:root { --bg: #ffffff; --bg-soft: #f6f7fb; --bg-muted: #f0f1f5; --surface: #ffffff; --text: #20222b; --text-soft: #676b76; --text-faint: #9ea3af; --line: #ececf2; --line-strong: #e0e2ea; --accent: #e60000; --accent-strong: #ff3b30; --shadow-soft: 0 12px 28px rgba(24, 32, 56, 0.06); --radius-xl: 24px; --radius-lg: 18px; --radius-md: 14px; --radius-sm: 10px; --left-rail: 230px; --right-rail: 260px; --brand-text: #1c1f29; --interactive-text: #12141b; --toggle-track: var(--bg-muted); --toggle-knob: #ffffff; --toggle-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); --hero-search-bg: var(--bg-soft); --hero-outline: rgba(255, 255, 255, 0.45); } [data-theme="dark"] { --bg: #0c0f15; --bg-soft: #151922; --bg-muted: #1b2130; --surface: #10141c; --text: #edf1f7; --text-soft: #a2abbb; --text-faint: #70798d; --line: #1d2432; --line-strong: #273041; --accent: #e60000; --accent-strong: #ff3b30; --shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.32); --brand-text: #f3f6fb; --interactive-text: #f3f6fb; --toggle-track: #2a3345; --toggle-knob: #ffffff; --toggle-shadow: 0 4px 10px rgba(0, 0, 0, 0.28); --hero-search-bg: #151922; --hero-outline: rgba(255, 255, 255, 0.2); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: "Segoe UI", Arial, sans-serif; color: var(--text); background: var(--bg); } a { color: inherit; text-decoration: none; } button, input { font: inherit; } .layout { display: grid; grid-template-columns: var(--left-rail) minmax(0, 1fr); min-height: 100vh; } .left-rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 20px 22px 28px; border-right: 1px solid var(--line); background: var(--surface); } /* Desktop rail collapse (toggled by the hamburger; persisted in localStorage). The rail's own hamburger disappears with the rail, so the topbar hamburger is surfaced as the re-expand affordance. Scoped ≥981px — below that the rail is a drawer, not a column. */ @media (min-width: 981px) { body.mss-rail-collapsed .layout { grid-template-columns: minmax(0, 1fr); } body.mss-rail-collapsed .left-rail { display: none; } body.mss-rail-collapsed .topbar__menu-toggle { display: inline-flex; } } .brand { display: flex; align-items: center; gap: 14px; } .brand--rail { margin-bottom: 28px; } .brand__link { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; } .brand__logo { height: 20px; width: auto; display: block; } .brand__text { font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; } .brand__text--strong { font-weight: 900; } .brand__text--light { font-weight: 300; } .brand__mark { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--accent); font-size: 1.1rem; } .brand__mark--triangle { transform: scaleX(1.15); } .icon-button { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 12px; background: transparent; color: var(--interactive-text); cursor: pointer; } .icon-button--light:hover { background: var(--bg-soft); } .cta-button { display: inline-flex; width: 100%; justify-content: center; padding: 14px 18px; margin-bottom: 22px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); font-weight: 600; } /* `[hidden]` MUST win over any element-class `display` (script.js toggles `el.hidden = true` on every [data-anonymous-cta] for signed-in callers). Without this, classes like `.cta-button` that set `display: inline-flex` would override the user-agent's default `[hidden] { display: none }`. */ [hidden] { display: none !important; } /* Pre-paint hide for signed-in callers — left-rail.php sets data-signed-in on before the rail renders, so the anonymous CTA never flashes on a navigation (script.js still sets `hidden` on load as the authoritative path). */ html[data-signed-in] [data-anonymous-cta] { display: none !important; } .rail-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .rail-section__title { margin: 0 0 12px; color: var(--text-faint); font-size: 0.9rem; } .rail-creators { display: grid; gap: 14px; } .rail-creator { display: flex; align-items: center; gap: 12px; color: var(--text); } .rail-creator__avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--bg-muted); color: var(--text); font-weight: 600; font-size: 0.9rem; } .rail-creator__avatar img { width: 100%; height: 100%; object-fit: cover; } .rail-creator__meta { min-width: 0; display: grid; gap: 2px; } .rail-creator__name { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail-creator__sub { font-size: 0.8rem; color: var(--text-soft); } .rail-nav { display: grid; gap: 4px; } .rail-nav__item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; color: var(--text); } .rail-nav__item--active, .rail-nav__item:hover { color: var(--interactive-text); } .rail-nav__icon { width: 22px; text-align: center; color: var(--text-soft); } .setting-list { display: grid; gap: 14px; } .setting-list__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); } .setting-dot, .theme-swatch, .toggle-switch { display: inline-block; flex-shrink: 0; } .setting-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); } .theme-swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); } .toggle-switch { width: 34px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: var(--toggle-track); position: relative; cursor: pointer; } .toggle-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--toggle-knob); box-shadow: var(--toggle-shadow); transition: transform 160ms ease; } .toggle-switch[aria-pressed="true"] { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); } .toggle-switch[aria-pressed="true"]::after { transform: translateX(14px); } .rail-footer { display: grid; gap: 8px; margin-top: 26px; color: var(--text-soft); font-size: 0.94rem; } .rail-footer small { margin-top: 8px; color: var(--text-faint); } .rail-footer a:hover { color: var(--text); text-decoration: underline; } .main-stage { min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px 22px 0; } .topbar--light { background: var(--surface); } /* Injected client-side by script.js into every .topbar. Hidden on wide viewports where the left-rail handles branding; shown ≤980px (fold view) as the first flex item, before topbar__nav. */ .topbar__logo { display: none; align-items: center; flex-shrink: 0; } .topbar__logo img { display: block; height: 32px; width: auto; } /* Injected by script.js as the first child of every .topbar. The rail's own toggle is unreachable on ≤980px (it lives inside the off-screen drawer), so this is the only way to open the nav on mobile. Hidden ≥981px where the rail is always visible. */ .topbar__menu-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; margin-right: 2px; border: 0; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; flex-shrink: 0; } .topbar__menu-toggle:hover, .topbar__menu-toggle:focus-visible { background: var(--bg-soft); outline: 0; } .topbar__menu-toggle svg { width: 22px; height: 22px; } /* Injected by script.js at the end of every .topbar__nav. Hidden on wide viewports (the search is inline there); shown ≤980px where the search is collapsed by default and toggled by this button. */ .topbar__search-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin-left: 4px; border: 0; border-radius: 999px; background: transparent; color: var(--text-soft); cursor: pointer; } .topbar__search-toggle:hover, .topbar__search-toggle:focus-visible { color: var(--text); background: rgba(255, 255, 255, 0.08); outline: 0; } .topbar__search-toggle svg { width: 20px; height: 20px; } .topbar__nav { display: flex; align-items: center; gap: 6px; } .topbar__nav-item { padding: 8px 16px; border-radius: 999px; color: var(--text-soft); font-size: 0.95rem; white-space: nowrap; transition: background 140ms ease, color 140ms ease; } .topbar__nav-item:hover { color: var(--text); } .topbar__nav-item--active { background: #ffffff2e; color: #fff; } .topbar__actions { display: flex; align-items: center; gap: 18px; } .topbar__actions--compact { justify-content: flex-end; min-width: 180px; } .account-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #3b3f49, #0f1218); color: #fff; font-size: 0.82rem; text-decoration: none; } .account-avatar img { width: 100%; height: 100%; object-fit: cover; } .text-link { color: var(--interactive-text); } .search { display: flex; align-items: center; gap: 12px; width: min(100%, 460px); padding: 0 14px; border-radius: 12px; } .search--light { min-height: 42px; background: var(--hero-search-bg); } .search__icon { color: var(--text-soft); } .search__input { width: 100%; border: 0; outline: 0; background: transparent; } .search__input--light { color: var(--text); } .button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 999px; cursor: pointer; } /* `display: inline-flex` above otherwise overrides the HTML5 `hidden` attribute, so the channels-page Edit button (which starts `hidden` and is unhidden by channels.js only when the viewer is the owner) would keep rendering for non-owners and signed-out viewers. Same pattern as `.auth-form[hidden]`, `.channel-modal[hidden]`, `.channel-panel[hidden]`. */ .button[hidden] { display: none; } /* "Following" state for the follow toggle button on /page/watch and /page/channels — overrides the .button--primary gradient with a flat ghost so the user has a visual cue (in addition to text) that they're currently following. Inverts on hover to telegraph the unfollow action. */ .watch-follow-btn--active, .channel-follow-btn--active { background: var(--bg-soft); color: var(--text); border-color: var(--line); } .watch-follow-btn--active:hover, .channel-follow-btn--active:hover { background: rgba(255, 88, 96, 0.14); color: #ff8e92; border-color: rgba(255, 88, 96, 0.3); } /* Saved-page empty + error states (also reused by future list pages) */ .channel-empty { text-align: center; padding: 48px 16px; color: var(--text-soft); } .channel-empty h3 { margin: 0 0 8px; color: var(--text); font-weight: 700; } .channel-empty p { margin: 0 0 16px; line-height: 1.5; } .channel-empty--error { color: #ff8e92; } .button--primary { padding: 12px 20px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff; } .button--small { padding: 10px 16px; } .button--outline { padding: 12px 20px; border-color: var(--hero-outline); color: #fff; } .button--white { padding: 12px 20px; background: var(--surface); border-color: var(--line); color: var(--text); } /* Destructive ghost variant for the "Clear history" button on /history. Soft red surface + red text by default; fills in on hover so the destructive action is clearly visible. */ [data-history-clear] { background: rgba(255, 88, 96, 0.12); border-color: rgba(255, 88, 96, 0.32); color: #ff5860; } [data-history-clear]:hover, [data-history-clear]:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; outline: 0; } .content-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--right-rail); gap: 26px; padding: 18px 22px 36px; } .content-grid--solo { grid-template-columns: minmax(0, 1fr); } .content-column { min-width: 0; } .page-title, .section-title { margin: 0 0 16px; } .page-title { font-size: 2.1rem; font-weight: 700; } .section-title { font-size: 1.05rem; font-weight: 700; } .section-title::before { content: ""; display: inline-block; width: 1.5rem; height: 1.5rem; margin-right: 6px; vertical-align: middle; background: url("https://cdn-mystreamspace.b-cdn.net/msslogo.png") no-repeat center / contain; } .section-title__link { color: inherit; text-decoration: none; } .section-title__link:hover, .section-title__link:focus-visible { text-decoration: underline; text-underline-offset: 4px; outline: 0; } .section-heading--stack { align-items: flex-start; } .section-heading--row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .catalog-section { margin-top: 30px; } .catalog-section--shorts { margin-top: 10px; } .discover-hero { margin-top: 30px; } .feature-card__media { position: relative; min-height: 560px; border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.68)), radial-gradient(circle at top center, rgba(103, 176, 255, 0.2), transparent 40%), linear-gradient(120deg, #08101c 0%, #0d2231 28%, #10151d 55%, #030406 100%); } .feature-card__media::before, .media-card__thumb::before, .poster-card__art::before, .list-item__thumb::before, .feed-card__thumb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.18), transparent 18%), linear-gradient(180deg, transparent 25%, rgba(0, 0, 0, 0.35) 100%); } .feature-card__overlay { position: absolute; left: 30px; right: 90px; bottom: 30px; z-index: 1; color: #fff; } .feature-card__overlay h2 { max-width: 10ch; margin: 0; font-size: clamp(2.6rem, 4vw, 4rem); line-height: 0.98; } .feature-card__overlay p { margin: 14px 0 0; color: rgba(255, 255, 255, 0.86); } .feature-card__actions { display: flex; gap: 14px; margin-top: 24px; } .feature-card__dots { position: absolute; top: 50%; right: 18px; z-index: 1; display: grid; gap: 12px; transform: translateY(-50%); } .feature-card__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); } .feature-card__dot--active { background: #fff; } /* Billboard — admin-controlled sponsored banner. Shares the `.feature-card__media` chrome (gradient + radius + min-height) with the legacy hero, but `.billboard` modes paint their own media on top via absolute fills. See views/assets/js/billboard.js. */ .billboard { position: relative; } .billboard__media { position: relative; overflow: hidden; background: #08101c; } /* Drop the inherited .feature-card__media gradient + ::before overlay — the billboard empty state is a flat solid surface. */ .billboard__media::before { display: none; } .billboard__media > .billboard__image, .billboard__media > .billboard__poster, .billboard__media > .billboard__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: #08101c; } .billboard__video { z-index: 1; } .billboard__poster { z-index: 0; } .billboard__pill { position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .billboard__pill--sponsored { background: rgba(0, 0, 0, 0.55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .billboard__pill--live { background: #e0224a; color: #fff; } .billboard__pill--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; } .billboard__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; margin-bottom: 4px; } .billboard__actions[hidden] { display: none; } .billboard__boost { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-radius: 18px; background: #f8f7fb; color: #05050a; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; transition: transform 120ms ease, background 120ms ease; } .billboard__boost:hover { background: #ecebf2; } .billboard__boost:active { transform: scale(0.97); } .billboard__boost-icon { font-size: 13px; line-height: 1; } .billboard__actions-right { display: flex; align-items: center; gap: 8px; } .billboard__icon { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #1a1a1f; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: background 120ms ease, transform 120ms ease; } .billboard__icon:hover { background: #2a2a32; } .billboard__icon:active { transform: scale(0.94); } .billboard__icon[disabled] { opacity: 0.45; cursor: not-allowed; } .billboard__icon > i { font-size: 14px; line-height: 1; pointer-events: none; } /* Live-comments bottom sheet (opened from `live_tv` mode's comment bubble). Hidden by default; `MssBillboardComments.open()` removes the [hidden] attribute and slides the panel up. */ .bb-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; justify-content: flex-end; } .bb-sheet[hidden] { display: none; } .bb-sheet__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); cursor: pointer; } .bb-sheet__panel { position: relative; width: 100%; max-width: 520px; margin: 0 auto; max-height: 78vh; min-height: 360px; background: #ffffff; color: #0e0e14; border-top-left-radius: 22px; border-top-right-radius: 22px; display: flex; flex-direction: column; transform: translateY(100%); animation: bb-sheet-up 220ms ease forwards; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18); } @keyframes bb-sheet-up { to { transform: translateY(0); } } .bb-sheet__head { position: relative; padding: 12px 18px 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .bb-sheet__handle { display: block; width: 40px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.16); margin: 0 auto 10px; } .bb-sheet__title { margin: 0; font-size: 16px; font-weight: 700; color: #0e0e14; } .bb-sheet__close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: rgba(0, 0, 0, 0.55); font-size: 22px; line-height: 1; cursor: pointer; } .bb-sheet__close:hover { color: #0e0e14; background: rgba(0, 0, 0, 0.05); } .bb-sheet__body { position: relative; flex: 1; overflow: hidden; display: flex; flex-direction: column; } .bb-sheet__loading, .bb-sheet__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 32px; color: rgba(0, 0, 0, 0.55); } .bb-sheet__empty[hidden], .bb-sheet__loading[hidden] { display: none; } .bb-sheet__empty-title { margin: 0 0 4px; color: #0e0e14; font-weight: 600; font-size: 15px; } .bb-sheet__spinner { width: 26px; height: 26px; border: 2.5px solid rgba(0, 0, 0, 0.12); border-top-color: #0e0e14; border-radius: 50%; animation: bb-sheet-spin 800ms linear infinite; } @keyframes bb-sheet-spin { to { transform: rotate(360deg); } } .bb-sheet__list { list-style: none; margin: 0; padding: 14px 18px 12px; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 12px; flex: 1; } .bb-sheet__row { display: flex; align-items: flex-start; gap: 10px; } .bb-sheet__avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0; } .bb-sheet__row-meta { flex: 1; min-width: 0; } .bb-sheet__row-name { font-size: 13px; font-weight: 700; color: #0e0e14; } .bb-sheet__row-handle { font-weight: 400; color: rgba(0, 0, 0, 0.5); margin-left: 4px; } .bb-sheet__row-body { font-size: 14px; color: rgba(14, 14, 20, 0.92); margin-top: 2px; word-wrap: break-word; } .bb-sheet__compose { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid rgba(0, 0, 0, 0.08); } .bb-sheet__input { flex: 1; background: rgba(0, 0, 0, 0.04); color: #0e0e14; border: 0; border-radius: 22px; padding: 10px 14px; font-size: 14px; outline: none; } .bb-sheet__input::placeholder { color: rgba(0, 0, 0, 0.42); } .bb-sheet__input:focus { background: rgba(0, 0, 0, 0.07); } .bb-sheet__send { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--color-accent, #6a80e0); color: #fff; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .bb-sheet__send::before { content: "➤"; } .bb-sheet__send[disabled] { background: rgba(0, 0, 0, 0.12); color: rgba(255, 255, 255, 0.85); cursor: not-allowed; } .bb-sheet__error { margin: 0; padding: 8px 18px 12px; color: #c93636; font-size: 12px; text-align: center; } .bb-sheet__error[hidden] { display: none; } @media (max-width: 768px) { .billboard__media { min-height: 320px; } .feature-card__media.billboard__media { min-height: 320px; } .bb-sheet__panel { max-width: 100%; max-height: 85vh; border-top-left-radius: 18px; border-top-right-radius: 18px; } } .video-row, .poster-row, .feed-grid { display: grid; gap: 16px; } .video-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .media-card__thumb, .poster-card__art, .list-item__thumb, .feed-card__thumb { position: relative; display: block; overflow: hidden; } .media-card__thumb { height: 258px; border-radius: 18px; } .media-card__thumb--music-one { background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.4)), linear-gradient(130deg, #38444f, #1f2b2f 50%, #010103); } .media-card__thumb--music-two { background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.4)), linear-gradient(130deg, #f7caef, #f39dd9 40%, #bfa1ff); } .media-card__thumb--music-three { background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.4)), linear-gradient(130deg, #7b5f49, #d7c8b7 45%, #b4904e); } .media-card__info, .feed-card__meta { display: flex; gap: 12px; padding-top: 12px; } .avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #1f232b; color: #fff; font-size: 0.82rem; flex-shrink: 0; } .avatar--mono { background: linear-gradient(135deg, #3b3f49, #0f1218); } .media-card h3, .poster-card h3, .list-item h3, .feed-card h3 { margin: 0; font-size: 0.98rem; line-height: 1.35; } .media-card p, .poster-card p, .list-item p, .feed-card p { margin: 6px 0 0; color: var(--text-soft); } .media-card small, .poster-card small, .list-item small, .feed-card small { display: block; margin-top: 6px; color: var(--text-faint); } .poster-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } .shorts-shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .shorts-shelf--scroll { grid-template-columns: none; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .shorts-shelf--scroll::-webkit-scrollbar { display: none; } .shorts-card--skeleton .shorts-card__art { height: 420px; border-radius: 22px; } .skeleton-line { border-radius: 6px; margin-top: 10px; } .skeleton-line--title { height: 14px; width: 80%; } .skeleton-line--sub { height: 12px; width: 50%; } .skeleton-line--meta { height: 10px; width: 35%; } /* Doubled class → specificity (0,2,0): the solid fill outranks per-card gradient classes (.feed-card__thumb--*, .avatar--mono) without !important; ::before kills the inherited gradient overlays. */ .skeleton-pulse.skeleton-pulse { background: var(--bg-muted); animation: skeleton-pulse 1.4s ease-in-out infinite; } .skeleton-pulse.skeleton-pulse::before { display: none; } @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .shorts-shelf--scroll > .shorts-card { flex: 0 0 280px; scroll-snap-align: start; } .live-chip { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; background: #e60000; color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; } /* Stream-ended variant — set by live_stream.js when the broadcast concludes. */ .live-chip--ended { background: #6b7280; } /* Gift-stars sheet — opened by send_stars.js (web SendStarsSheet). */ .gift-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.55); } .gift-sheet__panel { position: relative; width: 100%; max-width: 380px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 24px; } .gift-sheet__close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; color: var(--text-soft); font-size: 1.4rem; line-height: 1; cursor: pointer; } .gift-sheet__title { margin: 0 0 4px; font-size: 1.2rem; text-align: center; } .gift-sheet__fee-note { margin: 0 0 16px; text-align: center; color: var(--text-soft); font-size: 0.85rem; min-height: 1.2em; } /* Gift tier grid — 6 cards (2 rows of 3), mirrors the mobile sheet. */ .gift-sheet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .gift-sheet__card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .gift-sheet__card--on { border-color: var(--accent); background: var(--bg-soft); } .gift-sheet__card--disabled { opacity: 0.45; cursor: not-allowed; } .gift-sheet__card-icon { font-size: 1.9rem; line-height: 1; } .gift-sheet__card-img { width: 32px; height: 32px; object-fit: contain; } .gift-sheet__card-count { font-weight: 600; font-size: 0.85rem; } .gift-sheet__card-price { color: var(--text-faint); font-size: 0.78rem; } .gift-sheet__card-send { margin-top: 6px; padding: 5px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff; font-size: 0.8rem; font-weight: 600; } .gift-sheet__policy { margin: 0 0 14px; text-align: center; color: var(--text-faint); font-size: 0.75rem; } .gift-sheet__cancel { display: block; width: 100%; padding: 10px 0; border: 0; background: transparent; color: var(--text-soft); font-weight: 600; cursor: pointer; } /* In-panel dialog states: low-balance, sent, error. */ .gift-sheet__dialog { text-align: center; padding: 8px 0; } .gift-sheet__dialog-icon { width: 56px; height: 56px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.8rem; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff; } .gift-sheet__dialog-icon--ok { background: linear-gradient(135deg, #d2479b, #7b4ad8); } .gift-sheet__dialog-title { margin: 0 0 8px; font-size: 1.15rem; } .gift-sheet__dialog-msg { margin: 0 0 18px; color: var(--text-soft); font-size: 0.9rem; } .gift-sheet__dialog-actions { display: flex; gap: 10px; justify-content: center; } .gift-sheet__btn { flex: 1; padding: 11px 0; border: 0; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff; font-weight: 600; cursor: pointer; } .gift-sheet__btn--secondary { background: var(--bg-muted); color: var(--text); } .shorts-card__art--live-one { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.42)), linear-gradient(145deg, #7c3540, #23161b 55%, #0e0f14); } .shorts-card__art--live-two { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.42)), linear-gradient(145deg, #2a416c, #181d2a 55%, #090c12); } .shorts-card__art--live-three { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.42)), linear-gradient(145deg, #5c4a35, #1f1915 55%, #0c0c0e); } .shorts-card__art--live-four { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.42)), linear-gradient(145deg, #74455a, #26181d 55%, #0d0d10); } .shorts-card__art--live-five { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.42)), linear-gradient(145deg, #3b4a6b, #161a28 55%, #0a0c14); } .shorts-card__art--live-six { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.42)), linear-gradient(145deg, #2d5c4a, #121f1a 55%, #0a0e0c); } .shorts-card { min-width: 0; } .shorts-card__art { position: relative; display: block; height: 420px; overflow: hidden; border-radius: 22px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.36)), linear-gradient(145deg, #1e445b, #0b1821 70%, #f1792a); } .shorts-card__art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.14), transparent 16%), linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.3) 100%); } .shorts-card__art--one { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.36)), linear-gradient(145deg, #1e445b, #0b1821 70%, #f1792a); } .shorts-card__art--two { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.36)), linear-gradient(145deg, #6bc4d7, #0d2233 45%, #051018); } .shorts-card__art--three { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.36)), linear-gradient(145deg, #71c0d9, #3c6c73 45%, #0d1720); } .shorts-card__art--four { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.36)), linear-gradient(145deg, #cbb6a0, #7d8c97 45%, #d7c9bc); } .shorts-card__art--five { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.36)), linear-gradient(145deg, #031019, #1d3652 45%, #0d1017); } .shorts-card__art--six { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.36)), linear-gradient(145deg, #4e7381, #b6c8cc 45%, #c7271b); } .shorts-card h3 { margin: 12px 0 0; font-size: 0.98rem; line-height: 1.3; } .shorts-card p, .shorts-card small { display: block; margin-top: 6px; color: var(--text-soft); } .shorts-card p { margin-bottom: 1px; } /* Upcoming Events shelf — horizontally scrollable landscape cards, mirrors the .shorts-shelf--scroll pattern but with wider, shorter cards suited to event covers. */ .events-shelf { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .events-shelf::-webkit-scrollbar { display: none; } .events-shelf > .event-card { flex: 0 0 300px; scroll-snap-align: start; } .event-card { min-width: 0; } .event-card__cover { position: relative; display: block; height: 180px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.4)), linear-gradient(130deg, #38444f, #1f2b2f 50%, #010103); } .event-card__badge { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.78); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; text-align: center; } .event-card__badge--live { background: #e60000; } .event-card__body { padding-top: 12px; } .event-card__body h3 { margin: 0; font-size: 0.98rem; line-height: 1.3; } .event-card__body p { margin: 6px 0 0; color: var(--text-soft); font-size: 0.85rem; } .event-card__body small { display: block; margin-top: 6px; color: var(--text-faint); } .event-card__title-link { color: inherit; text-decoration: none; } .event-card__title-link:hover { color: var(--accent); } /* ── Events page filter tabs (/events) ──────────────────────────────── */ .events-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 22px; } .events-tab { display: inline-flex; align-items: center; padding: 9px 18px; border: 0; border-radius: 999px; background: var(--bg-muted); color: var(--text-soft); font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: background 140ms ease, color 140ms ease; } .events-tab:not(.events-tab--active):hover { color: var(--text); } .events-tab--active { background: var(--text); color: var(--bg); } .events-tab__dot { width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: #ff5a5f; } .events-empty { grid-column: 1 / -1; text-align: center; padding: 64px 16px; color: var(--text-soft); } .events-empty__icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0 auto 18px; border-radius: var(--radius-lg); background: var(--bg-soft); color: var(--text-faint); } .events-empty h3 { margin: 0 0 6px; color: var(--text); font-weight: 700; font-size: 1.05rem; } .events-empty p { margin: 0; } /* ── Event detail page (/events/) ───────────────────────────────── */ .event-detail { max-width: 920px; margin: 0 auto; padding-bottom: 48px; } .event-detail__cover { display: block; height: clamp(220px, 38vw, 420px); border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(130deg, #38444f, #1f2b2f 50%, #010103); } .event-detail__title { margin: 26px 0 0; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.15; } .event-detail__organizer { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--text-soft); text-decoration: none; font-size: 0.95rem; } .event-detail__organizer:hover { color: var(--text); } .event-detail__organizer-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-muted); color: #fff; font-size: 0.72rem; font-weight: 700; overflow: hidden; } .event-detail__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; } .event-detail__meta-card { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--bg-soft); } .event-detail__meta-icon { display: inline-flex; color: var(--text-soft); } .event-detail__meta-copy { display: flex; flex-direction: column; min-width: 0; } .event-detail__meta-copy strong { font-size: 1rem; font-weight: 700; } .event-detail__meta-copy small { margin-top: 2px; color: var(--text-soft); font-size: 0.82rem; } .event-detail__actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; } .event-detail__rsvp { flex: 0 0 auto; min-width: 188px; padding: 15px 28px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #a24784, #cb5d97); color: #fff; font-size: 0.98rem; font-weight: 700; cursor: pointer; transition: filter 0.15s ease, opacity 0.15s ease; } .event-detail__rsvp:hover { filter: brightness(1.06); } .event-detail__rsvp:disabled { opacity: 0.6; cursor: default; } .event-detail__rsvp--on { background: linear-gradient(90deg, #6a375c, #8a4670); } .event-detail__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--bg-soft); color: var(--text-soft); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .event-detail__icon-btn:hover { background: var(--bg-muted); color: var(--text); } .event-detail__rule { margin: 26px 0; border: 0; border-top: 1px solid var(--bg-muted); } .event-detail__section-title { margin: 0 0 12px; font-size: 1.08rem; font-weight: 700; } .event-detail__about { margin: 0; color: var(--text-soft); line-height: 1.6; white-space: pre-line; } .event-detail__attendees { display: flex; align-items: center; gap: 14px; } .event-detail__avatars { display: flex; } .event-detail__avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; margin-left: -10px; border: 2px solid var(--bg); color: #fff; font-size: 0.74rem; font-weight: 700; overflow: hidden; } .event-detail__avatar:first-child { margin-left: 0; } .event-detail__attendees-text { margin: 0; color: var(--text-soft); font-size: 0.92rem; } .event-detail__attendees-text strong { color: var(--text); font-weight: 700; } @media (max-width: 560px) { .event-detail__meta { grid-template-columns: 1fr; } .event-detail__rsvp { flex: 1; min-width: 0; } } .poster-card__art { height: 458px; border-radius: 18px; margin-bottom: 10px; } .poster-card__art--one { background: linear-gradient(145deg, #1e445b, #0b1821 70%, #f1792a); } .poster-card__art--two { background: linear-gradient(145deg, #6bc4d7, #0d2233 45%, #051018); } .poster-card__art--three { background: linear-gradient(145deg, #71c0d9, #3c6c73 45%, #0d1720); } .poster-card__art--four { background: linear-gradient(145deg, #cbb6a0, #7d8c97 45%, #d7c9bc); } .poster-card__art--five { background: linear-gradient(145deg, #031019, #1d3652 45%, #0d1017); } .poster-card__art--six { background: linear-gradient(145deg, #4e7381, #b6c8cc 45%, #c7271b); } .list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .list-column { display: grid; gap: 16px; } .list-item { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; align-items: start; } .list-item__thumb { width: 62px; height: 62px; border-radius: 12px; } .list-item__thumb--a { background: linear-gradient(145deg, #d5c6b8, #734634 45%, #1b223f); } .list-item__thumb--b { background: linear-gradient(145deg, #c9a48f, #8e694d 45%, #1d2128); } .list-item__thumb--c { background: linear-gradient(145deg, #72a4bf, #264f5d 45%, #07161b); } .list-item__thumb--d { background: linear-gradient(145deg, #5b4123, #d59f35 45%, #130f0b); } .list-item__thumb--e { background: linear-gradient(145deg, #d5d0af, #5b5d42 45%, #1d2128); } .list-item__thumb--f { background: linear-gradient(145deg, #afb9b0, #5c655d 45%, #1d2128); } .feed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feed-card__thumb { height: 298px; border-radius: 18px; } .feed-card__thumb--one { background: linear-gradient(145deg, #43718b, #112332 72%, #f47d2d); } .feed-card__thumb--two { background: linear-gradient(145deg, #5cbcd2, #12303c 45%, #0a1218); } .feed-card__thumb--three { background: linear-gradient(145deg, #486b6c, #203432 45%, #0f1517); } .feed-card__thumb--four { background: linear-gradient(145deg, #d4c5b7, #9f8a7e 45%, #b0a395); } .feed-card__thumb--five { background: linear-gradient(145deg, #0e1318, #264165 45%, #1d2027); } .feed-card__thumb--six { background: linear-gradient(145deg, #a1bcc5, #24404a 45%, #ce3624); } .time-pill { position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 4px 7px; border-radius: 8px; background: rgba(0, 0, 0, 0.84); color: #fff; font-size: 0.78rem; } .earn-pill { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); pointer-events: none; } /* Watch & Earn card on /watch — see project.wallet.md "Watch & Earn on /watch" */ .watch-earn { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-soft); } .watch-earn__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .watch-earn__label { font-size: 0.9rem; font-weight: 600; color: var(--text); } .watch-earn__count { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 0.85rem; font-weight: 700; color: var(--text-soft); } .watch-earn__star { color: #f59e0b; } .watch-earn__track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--line); } .watch-earn__fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(135deg, #f59e0b, #f97316); transition: width 0.3s ease; } .watch-earn__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.8rem; color: var(--text-soft); } .watch-earn__row-value { font-weight: 600; } .genre-bar { margin-top: 1rem; padding: 14px 22px 0; } .genre-bar__track { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; } .genre-bar__track::-webkit-scrollbar { display: none; } .genre-pill { flex: 0 0 auto; padding: 10px 20px; border-radius: 999px; background: var(--bg-muted); color: var(--text-soft); font-weight: 600; font-size: 0.95rem; white-space: nowrap; transition: background 140ms ease, color 140ms ease; } .genre-pill:not(.genre-pill--active):hover { color: var(--text); } .genre-pill--active { background: var(--text); color: var(--bg); } .fan-list { display: grid; gap: 14px; } .fan-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; } .fan-rank { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #777; color: #fff; font-weight: 700; background-size: cover; background-position: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); overflow: hidden; } .fan-item p { margin: 4px 0 0; color: var(--text-soft); } .follow-button { padding: 8px 14px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 0.88rem; } .button:hover, .cta-button:hover, .follow-button:hover, .rail-nav__item:hover, .text-link:hover { opacity: 0.9; } .button:focus-visible, .cta-button:focus-visible, .follow-button:focus-visible, .icon-button:focus-visible, .search__input:focus-visible, .rail-nav__item:focus-visible, .text-link:focus-visible { outline: 2px solid rgba(255, 106, 0, 0.5); outline-offset: 2px; } [data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] .left-rail, [data-theme="dark"] .topbar--light, [data-theme="dark"] .main-stage { background: var(--surface); } [data-theme="dark"] .search__input::placeholder { color: var(--text-faint); } [data-theme="dark"] .time-pill { background: rgba(0, 0, 0, 0.72); } [data-theme="dark"] .fan-rank { background: #2f3746; } @media (max-width: 1500px) { .content-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1280px) { .poster-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shorts-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } .video-row, .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 980px) { .layout { grid-template-columns: 1fr; } .left-rail { position: fixed; inset: 0 auto 0 0; z-index: 10; width: min(82vw, 280px); transform: translateX(-100%); transition: transform 160ms ease; } .left-rail.is-open { transform: translateX(0); } /* Scrim behind the open drawer — sits below the rail (z-index 10) but above page content. Clicking it closes the drawer via the document click-outside handler in script.js. */ body.mss-rail-open::after { content: ""; position: fixed; inset: 0; z-index: 9; background: rgba(0, 0, 0, 0.5); animation: mss-modal-fade 140ms ease-out; } .topbar { padding-top: 12px; justify-content: flex-start; flex-wrap: wrap; } .topbar__menu-toggle { display: inline-flex; } .topbar__logo { display: inline-flex; } /* Order so the row reads `[logo] [nav] [actions]` and the search drops to its own full-width row below. Without this, the search sat between nav and actions in fold view and pushed the Sign up button onto a wrapped row. */ .topbar__nav { order: 1; } .topbar__actions { order: 2; margin-left: auto; } .search { order: 3; flex-basis: 100%; width: 100%; } /* Show the search-toggle icon at the end of the nav, hide the inline search by default, and reveal it as a full-width row when the toggle has been activated. */ .topbar__search-toggle { display: inline-flex; } .search { display: none; } .topbar--search-open .search { display: flex; } /* Anonymous topbar shows both "Login" (text-link) and "Sign up" (primary button). On fold/mobile only the Sign up button is surfaced — the Login link hides. Authed state (Logout / My Channel / bell) is untouched. */ [data-account-actions] > .text-link { display: none; } .topbar__actions--compact { min-width: auto; } } @media (max-width: 760px) { .topbar { flex-wrap: wrap; gap: 14px; padding: 12px 16px 0; } .search { order: 3; width: 100%; } .content-grid { padding: 18px 16px 28px; } .genre-bar { padding: 14px 16px 0; } .feature-card__media { min-height: 380px; } .feature-card__overlay { left: 20px; right: 54px; bottom: 20px; } .feature-card__overlay h2 { font-size: 2.2rem; } .video-row, .poster-row, .shorts-shelf, .feed-grid, .list-grid { grid-template-columns: 1fr; } } /* Small phones (~412px Pixel / Galaxy and below). The topbar's first row — `[logo][nav][Sign up]` — needs ~436px of content width to fit; below this breakpoint the nav has to give up an item or the Sign up button wraps. Hiding Clips keeps the row single-line. The /clips entry is still reachable from the left-rail drawer and the homepage Clips shelf. */ @media (max-width: 412px) { /* On small phones, drop both Clips and Home from the topbar nav. The injected topbar__logo is an , so it already covers "go home" — a separate Home nav item is redundant here and the freed space keeps the row single-line. */ .topbar__nav [href="/clips"], .topbar__nav [href="/"] { display: none; } /* On small phones, the toggle-to-search pattern is friction — drop the icon and just show the search input inline as a full-width row below the nav. The existing ≤980px rules already give it `order: 3; flex-basis: 100%; width: 100%`. */ .topbar__search-toggle { display: none; } .search { display: flex; } } .watch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; padding: 18px 22px 36px; } .watch-main, .watch-sidebar { min-width: 0; } .watch-main { display: grid; gap: 18px; } .watch-player__media { position: relative; min-height: 620px; overflow: hidden; border-radius: 24px; background: #08101c; } /* "Tap to unmute" affordance — only visible while the autoplayed video is still muted. Sits above the