/* ===================================================================== THE ROCKSTAR GAME - "Backstage" design system Handoff stylesheet. Everything is driven by the :root tokens below; port these custom properties into site.css in the Razor project and the component classes map 1:1 to partials / tag helpers. Dark-only. No external CSS deps. Fonts: Google Fonts (see ). ===================================================================== */ :root { /* surfaces (warm near-black) */ --bg:#0d0c0a; --surface:#16140f; --surface-2:#1c1a14; --surface-3:#252118; --line:#322d23; --line-2:#463f31; /* text (warm off-white) */ --paper:#f4efe4; --paper-2:#c4bda9; --paper-3:#8b8471; --paper-4:#615a49; /* accent - swap this one value to re-theme (crimson default) */ --accent:#e33b2b; --accent-ink:#ffffff; /* Amber alt: --accent:#f0a81e; Magenta alt: --accent:#e5399b; */ /* stat hues - muted, cohesive */ --health:#5fb872; --happiness:#e6b23e; --creativity:#b07de0; --ability:#5f8fe0; --songwriting:#e0854f; --pop:#e0604a; --up:#5fb872; --down:#e2564a; --hold:#8b8471; --good:#5fb872; --warn:#e6b23e; --bad:#e2564a; /* semantic tinted-pill backgrounds + one-off inks (D-light - flip per theme) */ --accent-hover:#c33324; --up-bg:#173a25; --down-bg:#3a1512; --good-bg:#173d24; --bad-bg:#3a1713; --danger-bg:#4d1c15; --danger-ink:#ffffff; --patron:#f2c14e; --patron-glow:0 0 6px rgba(242,193,78,.35); --wave:#4da3c7; /* D99 - world events (genre waves): a cold tide-blue, distinct from the action red */ --lbl:#a87fd8; /* D100 - record labels: a boardroom violet (from the ceremony confetti palette) */ --logo-shadow:.4; /* radius / elevation */ --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px; --shadow-1:0 1px 0 rgba(255,255,255,.04) inset,0 2px 10px rgba(0,0,0,.5); --shadow-2:0 1px 0 rgba(255,255,255,.05) inset,0 12px 40px rgba(0,0,0,.6); /* spacing scale (reference): 4 8 12 16 20 24 32 40 48 64 */ /* type */ --ff-disp:'Barlow Condensed',system-ui,sans-serif; --ff-body:'IBM Plex Sans',system-ui,sans-serif; --ff-mono:'IBM Plex Mono',ui-monospace,monospace; } /* ==== LIGHT THEME (D-light) - token overrides only, ported verbatim from docs/design/backstage/light-theme.html. Dark stays the :root default; light applies from the OS preference unless a manual [data-theme] wins. Warm paper, not clinical white. ==== */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#e7e0d0; --surface:#f1ebdd; --surface-2:#f8f3e8; --surface-3:#fffdf7; --line:#d8cfba; --line-2:#c3b8a0; --paper:#211d16; --paper-2:#4a4335; --paper-3:#726a58; --paper-4:#9a917c; --accent:#cf3320; --accent-ink:#ffffff; --accent-hover:#b32c1b; --health:#3f8f56; --happiness:#a17817; --creativity:#8a52c4; --ability:#3f6fc9; --songwriting:#c0631f; --pop:#cf4630; --up:#3f8f56; --down:#cc3b2e; --hold:#726a58; --good:#3f8f56; --warn:#a17817; --bad:#cc3b2e; --up-bg:#e0efe4; --down-bg:#f7e1de; --good-bg:#e0efe4; --bad-bg:#f7e1de; --danger-bg:#f7e1de; --danger-ink:#a8271b; --patron:#b8860b; --patron-glow:none; --wave:#2a7d9c; --lbl:#8a52c4; --shadow-1:0 1px 2px rgba(52,42,22,.08),0 1px 3px rgba(52,42,22,.10); --shadow-2:0 4px 12px rgba(52,42,22,.10),0 14px 34px rgba(52,42,22,.14); --logo-shadow:.14; } } :root[data-theme="light"]{ --bg:#e7e0d0; --surface:#f1ebdd; --surface-2:#f8f3e8; --surface-3:#fffdf7; --line:#d8cfba; --line-2:#c3b8a0; --paper:#211d16; --paper-2:#4a4335; --paper-3:#726a58; --paper-4:#9a917c; --accent:#cf3320; --accent-ink:#ffffff; --accent-hover:#b32c1b; --health:#3f8f56; --happiness:#a17817; --creativity:#8a52c4; --ability:#3f6fc9; --songwriting:#c0631f; --pop:#cf4630; --up:#3f8f56; --down:#cc3b2e; --hold:#726a58; --good:#3f8f56; --warn:#a17817; --bad:#cc3b2e; --up-bg:#e0efe4; --down-bg:#f7e1de; --good-bg:#e0efe4; --bad-bg:#f7e1de; --danger-bg:#f7e1de; --danger-ink:#a8271b; --patron:#b8860b; --patron-glow:none; --wave:#2a7d9c; --lbl:#8a52c4; --shadow-1:0 1px 2px rgba(52,42,22,.08),0 1px 3px rgba(52,42,22,.10); --shadow-2:0 4px 12px rgba(52,42,22,.10),0 14px 34px rgba(52,42,22,.14); --logo-shadow:.14; } /* manual dark wins over a light OS preference */ :root[data-theme="dark"]{ --bg:#0d0c0a; --surface:#16140f; --surface-2:#1c1a14; --surface-3:#252118; --line:#322d23; --line-2:#463f31; --paper:#f4efe4; --paper-2:#c4bda9; --paper-3:#8b8471; --paper-4:#615a49; --accent:#e33b2b; --accent-ink:#ffffff; --accent-hover:#c33324; --health:#5fb872; --happiness:#e6b23e; --creativity:#b07de0; --ability:#5f8fe0; --songwriting:#e0854f; --pop:#e0604a; --up:#5fb872; --down:#e2564a; --hold:#8b8471; --good:#5fb872; --warn:#e6b23e; --bad:#e2564a; --up-bg:#173a25; --down-bg:#3a1512; --good-bg:#173d24; --bad-bg:#3a1713; --danger-bg:#4d1c15; --danger-ink:#ffffff; --patron:#f2c14e; --patron-glow:0 0 6px rgba(242,193,78,.35); --wave:#4da3c7; --lbl:#a87fd8; --shadow-1:0 1px 0 rgba(255,255,255,.04) inset,0 2px 10px rgba(0,0,0,.5); --shadow-2:0 1px 0 rgba(255,255,255,.05) inset,0 12px 40px rgba(0,0,0,.6); --logo-shadow:.4; } /* ---------- base ---------- */ *{box-sizing:border-box} html,body{margin:0} body{background:var(--bg);color:var(--paper);font-family:var(--ff-body);font-size:14px;line-height:1.5} a{color:var(--accent);text-decoration:none} code{font-family:var(--ff-mono);color:var(--paper-2)} ::selection{background:var(--accent);color:#fff} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .mono{font-family:var(--ff-mono)} .disp{font-family:var(--ff-disp)} .muted{color:var(--paper-3)} .wrap{max-width:1320px;margin:0 auto;padding:0 24px} /* ---------- brand marks ---------- */ .diamond{width:11px;height:11px;background:var(--accent);transform:rotate(45deg);flex:none} .wordmark{font-family:var(--ff-disp);font-weight:800;text-transform:uppercase;letter-spacing:.02em} .wordmark .accent{color:var(--accent)} .brand-link{display:flex;align-items:center;gap:9px;color:var(--paper);text-decoration:none} .brand-link:hover .wordmark{color:var(--accent)} .kicker{font-family:var(--ff-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-3)} /* ---------- app shell ---------- */ .app{display:flex;min-height:100vh} .app-nav{width:238px;flex:none;background:var(--surface);border-right:1px solid var(--line);padding:18px 0;display:flex;flex-direction:column} .brand{padding:0 18px 16px;border-bottom:1px solid var(--line);margin-bottom:12px;display:flex;align-items:center;gap:9px} .brand .wordmark{font-size:19px;line-height:1} .nav-scroll{flex:1;overflow:auto;padding:0 10px} .nav-section{margin:0 0 14px} .nav-head{font-family:var(--ff-disp);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-4);padding:4px 10px 6px} .nav-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:var(--r-sm);font-size:13.5px;color:var(--paper-2);border-left:2px solid transparent;margin-bottom:1px} .nav-link:hover{background:var(--surface-3)} .nav-link.is-active{color:var(--paper);background:var(--surface-3);border-left-color:var(--accent)} .nav-link .label{display:flex;align-items:center;gap:9px} .nav-link .dot{width:5px;height:5px;border-radius:1px;background:var(--paper-4);transform:rotate(45deg)} .nav-link.is-active .dot{background:var(--accent)} .nav-badge{font-family:var(--ff-mono);font-size:10.5px;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-pill);padding:1px 7px;min-width:18px;text-align:center} .app-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)} /* ---------- top stat bar ---------- */ .topbar{border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--bg));padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .band-id{display:flex;align-items:center;gap:14px;min-width:0} .avatar{width:42px;height:42px;flex:none;border-radius:var(--r-md);background:linear-gradient(135deg,var(--surface-3),var(--surface));border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--ff-disp);font-weight:800;font-size:20px;color:var(--accent)} .band-name{font-family:var(--ff-disp);font-weight:700;font-size:20px;line-height:1} .band-sub{font-size:12px;color:var(--paper-3);margin-top:3px} .stat-bar{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)} .stat{padding:7px 16px;border-right:1px solid var(--line);text-align:right} .stat__label{font-family:var(--ff-disp);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-4)} .stat__val{font-family:var(--ff-mono);font-size:15px;color:var(--paper);margin-top:2px} .stat__val.is-accent{color:var(--accent)} .topbar-actions{display:flex;align-items:center;gap:12px} .topbar-controls{display:flex;align-items:center;gap:12px} .topbar-link{display:flex;align-items:center;padding:0 15px;color:var(--paper-3);font-size:12px} .topbar-link:hover{color:var(--paper)} .topbar-link--icon{padding:0 4px} .topbar-link--icon svg{display:block} /* Small screens: dissolve the actions wrapper so the band identity + controls share the top row and the wide (£-heavy) stat-bar drops to its own full-width row below. */ @media (max-width:640px){ /* Mobile topbar: band identity on row 1 (with room reserved top-right for the controls, which are pinned there out-of-flow), the wide £-heavy stat-bar wraps to its own scrollable row below. Fixes the controls/wording being shoved off-screen. */ .topbar{position:relative} .topbar-actions{display:contents} .topbar .band-id{order:1;width:100%;padding-right:64px} .topbar .stat-bar{order:2;max-width:100%;overflow-x:auto} .topbar .topbar-controls{position:absolute;top:14px;right:20px;z-index:1} } .nav-toggle{display:none;width:40px;height:40px;border:1px solid var(--line-2);background:var(--surface-3);color:var(--paper);border-radius:var(--r-sm);cursor:pointer;font-size:18px;align-items:center;justify-content:center} /* ---------- pinned vitals strip ---------- */ .vitals-strip{display:flex;gap:18px;padding:9px 24px;border-bottom:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap} .vs-item{display:flex;align-items:center;gap:8px} .vs-label{font-family:var(--ff-disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-3)} .vs-track{width:52px;height:6px;background:var(--surface);border-radius:var(--r-pill);overflow:hidden} .vs-fill{display:block;height:100%;width:var(--pct,0%);background:var(--fill,var(--accent))} .vs-num{font-family:var(--ff-mono);font-size:12px;color:var(--paper-2)} /* ---------- page content ---------- */ .page{padding:24px} .page-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;flex-wrap:wrap;gap:10px} .page-title{font-family:var(--ff-disp);font-weight:700;font-size:32px;text-transform:uppercase;margin:0;letter-spacing:.01em} .page-sub{font-size:13px;color:var(--paper-3);margin-top:4px} .page-actions{display:flex;gap:9px} /* ---------- buttons ---------- */ .btn{font-family:var(--ff-disp);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:14px;padding:10px 20px;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1} .btn--primary{background:var(--accent);color:var(--accent-ink);font-weight:700;border-color:var(--accent)} .btn--primary:hover{background:var(--accent-hover)} .btn--secondary{border-color:var(--line-2);background:var(--surface-3);color:var(--paper)} .btn--secondary:hover{border-color:var(--paper-4)} .btn--ghost{color:var(--paper-2)} .btn--ghost:hover{background:var(--surface-3)} .btn--danger{font-weight:700;border-color:var(--bad);background:var(--danger-bg);color:var(--danger-ink)} .btn--sm{font-size:13px;padding:9px 16px} .btn--lg{font-size:16px;padding:14px 30px;font-weight:700} .btn--block{display:flex;width:100%} .btn:disabled,.btn.is-disabled{border-color:var(--line);background:var(--surface);color:var(--paper-4);cursor:not-allowed;pointer-events:none} /* ---------- form controls ---------- */ .field{display:block;margin-bottom:14px} .field__label{display:block;font-size:12px;color:var(--paper-3);margin-bottom:5px} .label-strong{font-family:var(--ff-disp);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-3);margin-bottom:6px;display:block;font-weight:600} .input,.select,.textarea{width:100%;font-family:var(--ff-body);font-size:14px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--paper);outline:none} .input:focus,.select:focus,.textarea:focus{border-color:var(--accent)} .input.is-mono{font-family:var(--ff-mono)} .textarea{resize:vertical;min-height:90px} .input--error{border-color:var(--bad)} .field-error{font-size:12px;color:var(--bad);margin-top:5px;display:block} /* Batch 9 - inline validation (data-validate) */ .field--error .input,.field--error .select,.field--error .textarea{border-color:var(--bad)} .field__error{font-size:12px;color:var(--bad);margin-top:5px;display:block;min-height:0} .field__error:empty{display:none} .req{color:var(--bad)} button[disabled],.btn[disabled]{opacity:.5;cursor:not-allowed} /* Batch 9 - data-confirm dialog */ .dialog-modal{border:none;background:transparent;padding:0;max-width:min(92vw,420px);color:var(--paper)} .dialog-modal::backdrop{background:rgba(0,0,0,.55)} .input-affix{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);overflow:hidden} .input-affix__pre{padding:10px 12px;font-family:var(--ff-mono);color:var(--paper-3);border-right:1px solid var(--line)} .input-affix .input{border:none;background:transparent} .check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--paper-2)} input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:16px;height:16px} input[type=range]{accent-color:var(--accent);width:100%} .range-scale{display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:11px;color:var(--paper-4);margin-top:4px} /* ---------- panels / cards / frames ---------- */ .panel{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1)} .panel__head{padding:13px 16px;border-bottom:1px solid var(--line);font-family:var(--ff-disp);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2);display:flex;justify-content:space-between;align-items:center} .panel__body{padding:16px} .card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-1)} .card--raised{border-color:var(--line-2);background:linear-gradient(160deg,var(--surface-3),var(--surface-2));box-shadow:none} /* D87 - the gold Patron ★ shown next to band names everywhere (title="Patron"). */ .patron-star{color:var(--patron);font-size:.9em;margin-left:.28em;line-height:1;text-shadow:var(--patron-glow);white-space:nowrap} /* D-light - light/dark toggle. In the topbar it's a plain icon that sits with the text links; the --float variant (public pages, no topbar) is a self-contained button. */ .theme-toggle{font-size:16px;line-height:1;background:none;border:none;color:var(--paper-3);cursor:pointer;padding:0 2px;display:inline-grid;place-items:center} .theme-toggle:hover{color:var(--paper)} /* D86 - the Patron CTA: accent-forward so patronage stands out in the support cluster. */ .card--patron{border-color:color-mix(in srgb,var(--accent),transparent 45%);background:linear-gradient(160deg,color-mix(in srgb,var(--accent),transparent 88%),var(--surface-2))} .card--patron .card-title{color:var(--accent)} .frame{border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2);background:var(--bg)} .breadcrumb{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 20px;border-bottom:1px solid var(--line);background:var(--surface);font-family:var(--ff-mono);font-size:12px;color:var(--paper-3)} .breadcrumb .muted{color:var(--paper-4)} .hint{font-size:11.5px;color:var(--paper-4);line-height:1.5} /* D73 - live release-cost line (selected producer × studio points vs money) */ .cost-line{font-family:var(--ff-mono);font-size:13px;color:var(--paper-2);padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)} .cost-line.is-over{color:var(--bad);border-color:color-mix(in srgb,var(--bad),#000 40%)} .divider{height:1px;background:var(--line);border:none;margin:0} .divider--dashed{border-top:1px dashed var(--line-2);height:0} /* ---------- meters ---------- */ .meter__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px} .meter__label{font-family:var(--ff-disp);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-3)} .meter__val{font-family:var(--ff-mono);font-size:13px;color:var(--paper)} .meter__track{height:9px;background:var(--surface);border-radius:var(--r-pill);overflow:hidden} .meter__fill{display:block;height:100%;width:var(--pct,0%);background:var(--fill,var(--accent))} .meter-list{display:flex;flex-direction:column;gap:13px} /* ---------- layout helpers ---------- */ .grid{display:grid;gap:16px} .grid--auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .grid--auto-tight{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} /* 3-up survives a 1024 viewport (736px content) */ .grid--auto-wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .grid--cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .stack{display:flex;flex-direction:column;gap:16px} .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} /* ---------- tables ---------- */ .table-wrap{overflow-x:auto} .table{width:100%;border-collapse:collapse;font-size:13.5px} .table th{text-align:left;padding:10px 16px;font-family:var(--ff-disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-4);font-weight:600;border-bottom:1px solid var(--line-2)} .table td{padding:12px 16px;border-bottom:1px solid var(--line)} .table .num{font-family:var(--ff-mono);text-align:right} .table th.num{text-align:right} .table tbody tr:hover{background:var(--surface)} .table tr.is-you{background:color-mix(in srgb,var(--accent),transparent 88%)} .table tr.is-you:hover{background:color-mix(in srgb,var(--accent),transparent 84%)} .table tr.is-you .rank,.table tr.is-you a{color:var(--accent);font-weight:700} .table--dense th,.table--dense td{padding:9px 14px} .tag{font-size:11px;color:var(--paper-4)} .pill-tag{font-size:11px;color:var(--paper-4);border:1px solid var(--line-2);border-radius:3px;padding:1px 5px;text-transform:uppercase;font-family:var(--ff-mono)} /* ---------- chips / badges ---------- */ .chip{font-family:var(--ff-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--paper-3);display:inline-block} .chip--up{background:var(--up-bg);color:var(--up)} .chip--down{background:var(--down-bg);color:var(--down)} .chip--accent{background:var(--accent);color:var(--accent-ink)} /* ---------- alerts ---------- */ .alert{padding:11px 15px;border:1px solid var(--line-2);border-left:3px solid var(--paper-4);border-radius:var(--r-sm);background:var(--surface-2);font-size:13.5px;color:var(--paper-2);display:flex;align-items:center;gap:12px} .alert--good{border-left-color:var(--good)} .alert--warn{border-left-color:var(--warn)} .alert--bad{border-left-color:var(--bad)} .alert--accent{border-left-color:var(--accent)} /* ---------- tabs ---------- */ .tabs{display:flex;border-bottom:1px solid var(--line);flex-wrap:wrap} .tab{font-family:var(--ff-disp);font-size:14px;text-transform:uppercase;letter-spacing:.05em;padding:9px 15px;border:none;border-bottom:2px solid transparent;color:var(--paper-3);cursor:pointer;background:none} .tab.is-active{border-bottom-color:var(--accent);color:var(--paper);font-weight:600} /* ---------- pagination ---------- */ .pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .pager__item{font-family:var(--ff-mono);font-size:13px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);border:1px solid var(--line-2);color:var(--paper-2)} .pager__item.is-active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .pager__item.is-disabled{color:var(--paper-4)} .pager__ellipsis{font-family:var(--ff-mono);font-size:12px;color:var(--paper-4);padding:0 6px} /* ---------- dialog / empty ---------- */ .dialog{border:1px solid var(--line-2);border-radius:var(--r-md);background:linear-gradient(180deg,var(--surface-3),var(--surface-2));box-shadow:var(--shadow-2);padding:22px;max-width:400px} .dialog__title{font-family:var(--ff-disp);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.02em} .dialog__body{font-size:13.5px;color:var(--paper-2);line-height:1.55;margin:8px 0 18px} .dialog__actions{display:flex;gap:10px;justify-content:flex-end} .empty{border:1px dashed var(--line-2);border-radius:var(--r-md);padding:34px 20px;text-align:center} .empty__icon{width:32px;height:32px;margin:0 auto 12px;border:2px solid var(--paper-4);transform:rotate(45deg)} .empty__title{font-family:var(--ff-disp);font-weight:700;font-size:18px;text-transform:uppercase} /* ---------- stepper (wizard) ---------- */ .stepper{display:flex;align-items:center;max-width:560px;margin-bottom:26px} .step{display:flex;align-items:center;gap:10px;flex:1} .step__num{width:28px;height:28px;flex:none;border-radius:50%;background:var(--surface-3);color:var(--paper-4);font-family:var(--ff-mono);font-size:13px;display:flex;align-items:center;justify-content:center} .step__label{font-family:var(--ff-disp);font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--paper-3);white-space:nowrap} .step__line{flex:1;height:2px;background:var(--line-2);margin:0 4px} .step.is-active .step__num,.step.is-done .step__num{background:var(--accent);color:var(--accent-ink)} .step.is-active .step__label{color:var(--paper)} .step.is-done .step__line{background:var(--accent)} /* ---------- option cards (radio) ---------- */ .opt-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);cursor:pointer} .opt-card:hover{border-color:var(--line-2)} .opt-card.is-selected{border-color:var(--accent);background:var(--surface-3)} .opt-radio{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--paper-4);display:flex;align-items:center;justify-content:center} .opt-card.is-selected .opt-radio{border-color:var(--accent)} .opt-dot{width:8px;height:8px;border-radius:50%;background:transparent} .opt-card.is-selected .opt-dot{background:var(--accent)} .opt-name{font-family:var(--ff-disp);font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.03em;color:var(--paper);display:block} .opt-desc{font-size:12.5px;color:var(--paper-3);margin-top:2px;display:block} .opt-meta{text-align:right;flex:none} .opt-cost{font-family:var(--ff-mono);font-size:13px;color:var(--paper);display:block} .opt-cost.is-free{color:var(--good)} .opt-mult{font-size:11px;color:var(--paper-4);text-transform:uppercase;letter-spacing:.08em;margin-top:2px;display:block} /* ---------- art placeholder (graceful fallback) ---------- */ .art{border-radius:var(--r-md);border:1px solid var(--line-2);background-image:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 11px,var(--surface-3) 11px,var(--surface-3) 22px);display:flex;align-items:center;justify-content:center} .art__label{font-family:var(--ff-mono);font-size:11px;color:var(--paper-4);letter-spacing:.1em;text-transform:uppercase} /* ---------- doc sections (kit / tokens / routes / index) ---------- */ .section{padding:48px 0 0} .section__head{display:flex;align-items:baseline;gap:16px;margin-bottom:8px} .section__num{font-family:var(--ff-mono);font-size:13px;color:var(--accent);letter-spacing:.1em} .section__title{font-family:var(--ff-disp);font-weight:700;font-size:30px;text-transform:uppercase;margin:0} .section__intro{color:var(--paper-3);font-size:14px;margin:0 0 22px;max-width:760px} .doc-header{border-bottom:1px solid var(--line);padding:40px 0 34px;background:linear-gradient(180deg,var(--surface),var(--bg))} .swatch{width:34px;height:34px;flex:none;border-radius:var(--r-sm);border:1px solid var(--line-2)} /* ---------- public / auth ---------- */ .public-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap} .public-nav .links{display:flex;gap:20px;align-items:center} .public-nav .links a:not(.btn){font-family:var(--ff-disp);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--paper-3)} .hero{padding:56px 32px;text-align:center;background:radial-gradient(120% 100% at 50% 0%,var(--surface),var(--bg))} .hero h1{font-family:var(--ff-disp);font-weight:800;font-size:66px;line-height:.9;letter-spacing:-.01em;text-transform:uppercase;margin:16px auto 0;max-width:820px} .hero p{max-width:560px;margin:18px auto 26px;color:var(--paper-2);font-size:16px} .stats-strip{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stat-cell{flex:1;min-width:130px;padding:20px;text-align:center;border-right:1px solid var(--line)} .stat-cell .v{font-family:var(--ff-mono);font-size:24px;color:var(--paper)} .stat-cell .k{font-family:var(--ff-disp);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-4);margin-top:4px} .moment{display:flex;gap:16px;align-items:center} .auth-stage{background:radial-gradient(120% 90% at 50% 0%,var(--surface),var(--bg))} /* ===================================================================== PUBLIC RELAUNCH (D88) - logged-out surfaces, ported from docs/design/public-logged-out.html (.home-* / new .auth-*). Token-driven, so light theme works for free. Logo (.logo--nav) + light tokens already live above/in the theme blocks; not re-ported here. ===================================================================== */ /* --- theme toggle (shared icon-swap: two spans, CSS-driven by data-theme) --- */ .home-theme{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--surface-3);color:var(--paper-2);border-radius:var(--r-sm);cursor:pointer;font-size:16px;line-height:1} .home-theme:hover{border-color:var(--paper-4);color:var(--paper)} .theme-toggle__light,.home-theme__light{display:none} :root[data-theme="light"] .theme-toggle__dark,:root[data-theme="light"] .home-theme__dark{display:none} :root[data-theme="light"] .theme-toggle__light,:root[data-theme="light"] .home-theme__light{display:inline} /* --- small-screen "More" menu (zero-JS
) --- */ .home-menu{display:none;position:relative} .home-menu>summary{list-style:none;cursor:pointer} .home-menu>summary::-webkit-details-marker{display:none} .home-menu__panel{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;display:flex;flex-direction:column;padding:6px;gap:2px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-2);z-index:30} .home-menu__panel a{font-family:var(--ff-disp);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--paper-2);padding:10px 12px;border-radius:var(--r-sm)} .home-menu__panel a:hover{color:var(--paper);background:var(--surface-3)} @media (max-width:720px){.home-menu{display:block}} /* --- public bar --- */ .home-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 26px;background:color-mix(in srgb,var(--bg),transparent 8%);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .home-nav .logo--nav .logo-stub,.home-foot .logo--nav .logo-stub{--logo-bg:var(--bg)} .home-nav__links{display:flex;align-items:center;gap:8px} .home-nav__link{font-family:var(--ff-disp);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--paper-2);padding:9px 12px;border-radius:var(--r-sm);white-space:nowrap} .home-nav__link:hover{color:var(--paper);background:var(--surface-3)} @media (max-width:720px){.home-nav__hide{display:none}} /* tighten the bar on small phones so logo + toggle + Log in + Create account + More stay on one row without wrapping or clipping. */ @media (max-width:520px){ .home-nav{padding:11px 14px;gap:10px} .home-nav__links{gap:5px} .home-nav__link{padding:8px 8px} .home-nav .btn{padding:9px 13px} } /* --- hero --- */ .home-hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,110px) 26px clamp(48px,7vw,84px); background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--accent),transparent 88%), transparent 58%),radial-gradient(100% 70% at 50% 130%, var(--surface), var(--bg) 72%),var(--bg)} .home-hero__in{max-width:900px;margin:0 auto;text-align:center;position:relative} .home-hero__kick{display:inline-flex;align-items:center;gap:11px;font-family:var(--ff-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-3)} .home-hero__kick .diamond{width:8px;height:8px} .home-hero__h1{font-family:var(--ff-disp);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:.005em;margin:18px 0 0;font-size:clamp(44px,8.5vw,104px);color:var(--paper)} .home-hero__h1 em{font-style:normal;color:var(--accent)} .home-hero__sub{color:var(--paper-2);font-size:clamp(15px,1.9vw,19px);margin:20px auto 0;max-width:52ch;line-height:1.5} .home-hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px} .home-hero__note{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.05em;color:var(--paper-4);margin-top:18px} /* --- live stat strip --- */ .home-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;max-width:900px;margin:clamp(32px,5vw,52px) auto 0;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} .home-stat{background:var(--surface-2);padding:16px 12px;text-align:center} .home-stat__v{font-family:var(--ff-mono);font-size:clamp(20px,3vw,28px);font-weight:500;color:var(--paper);line-height:1} .home-stat__k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-4);margin-top:7px} .home-stat__v .home-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--up);margin-right:7px;vertical-align:baseline;animation:home-pulse 2s ease-in-out infinite} @keyframes home-pulse{0%,100%{opacity:1}50%{opacity:.35}} @media (prefers-reduced-motion:reduce){.home-stat__v .home-live{animation:none}} @media (max-width:640px){.home-stats{grid-template-columns:repeat(2,1fr)}.home-stat:last-child{grid-column:1/-1}} /* --- section shell --- */ .home-sec{max-width:1180px;margin:0 auto;padding:clamp(48px,7vw,88px) 26px 0} .home-sec__eye{font-family:var(--ff-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)} .home-sec__h{font-family:var(--ff-disp);font-weight:800;font-size:clamp(28px,4.5vw,46px);text-transform:uppercase;letter-spacing:.01em;line-height:.98;margin:8px 0 0;color:var(--paper);max-width:20ch} .home-sec__lead{color:var(--paper-3);font-size:15px;margin:12px 0 0;max-width:60ch} /* --- "on the charts now" (live top single/album, with artwork) --- */ .home-now{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px} @media (max-width:640px){.home-now{grid-template-columns:1fr}} .home-now__card{display:flex;gap:16px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-1)} .home-now__art{width:76px;height:76px;flex:none;border-radius:var(--r-sm);border:1px solid var(--line-2);object-fit:cover;background:var(--surface-3)} .home-now__art--ph{background-image:repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--line-2),transparent 55%) 9px 10px);display:grid;place-items:center} .home-now__art--ph .diamond{width:16px;height:16px} .home-now__eye{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} .home-now__title{font-family:var(--ff-disp);font-weight:800;font-size:22px;text-transform:uppercase;color:var(--paper);line-height:1;margin-top:5px} .home-now__title a{color:inherit}.home-now__title a:hover{color:var(--accent)} .home-now__band{font-size:13px;color:var(--paper-3);margin-top:6px} /* --- feature grid --- */ .home-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px} @media (max-width:860px){.home-features{grid-template-columns:1fr 1fr}} @media (max-width:560px){.home-features{grid-template-columns:1fr}} .home-feat{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;box-shadow:var(--shadow-1)} .home-feat__icon{font-size:24px;line-height:1;display:block} .home-feat__h{font-family:var(--ff-disp);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.02em;color:var(--paper);margin:13px 0 0;display:flex;align-items:center;gap:9px} .home-feat__h .diamond{width:8px;height:8px} .home-feat__b{color:var(--paper-3);font-size:13.5px;line-height:1.55;margin-top:8px} /* --- in-action tiles --- */ .home-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px} @media (max-width:860px){.home-shots{grid-template-columns:1fr}} .home-shot{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface-2)} .home-shot__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background-color:var(--surface-3)} .home-shot__cap{padding:12px 15px;font-size:12.5px;color:var(--paper-3);border-top:1px solid var(--line);line-height:1.5} .home-shot__cap b{color:var(--paper-2);font-weight:600} /* --- rivalry callout (echoes the dashboard rivalry card) --- */ .home-rivalry{max-width:1180px;margin:clamp(48px,7vw,88px) auto 0;padding:0 26px} .home-rivalry__card{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(28px,5vw,52px);text-align:center; background:radial-gradient(120% 100% at 50% 0%,var(--surface-3),var(--surface-2) 72%);box-shadow:var(--shadow-1)} .home-rivalry__vs{display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,40px);flex-wrap:wrap} .home-rivalry__band{font-family:var(--ff-disp);font-weight:800;font-size:clamp(24px,4vw,44px);text-transform:uppercase;letter-spacing:.01em;color:var(--paper);line-height:.95} .home-rivalry__mid{font-family:var(--ff-disp);font-weight:800;font-size:14px;letter-spacing:.2em;color:var(--accent)} .home-rivalry__score{font-family:var(--ff-mono);font-size:16px;color:var(--paper-2);margin-top:16px} .home-rivalry__score b{color:var(--up)} /* --- final CTA --- */ .home-cta{max-width:1180px;margin:clamp(48px,7vw,88px) auto 0;padding:0 26px} .home-cta__in{border:1px solid var(--accent);border-radius:var(--r-lg);padding:clamp(32px,5vw,56px) 26px;text-align:center;background:color-mix(in srgb,var(--accent),transparent 90%)} .home-cta__h{font-family:var(--ff-disp);font-weight:800;font-size:clamp(28px,4.5vw,48px);text-transform:uppercase;letter-spacing:.01em;line-height:.98;color:var(--paper)} .home-cta__sub{color:var(--paper-2);font-size:15px;margin:12px auto 0;max-width:48ch} /* --- footer --- */ .home-foot{max-width:1180px;margin:clamp(52px,7vw,90px) auto 0;padding:28px 26px 44px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .home-foot__links{display:flex;gap:8px 18px;flex-wrap:wrap} .home-foot__link{font-family:var(--ff-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--paper-3)} .home-foot__link:hover{color:var(--paper)} .home-foot__note{font-size:12px;color:var(--paper-4);line-height:1.5} /* --- auth pages (new card shell; replaces the old .auth-frame/.auth-body/.auth-card) --- */ .auth-wrap{min-height:520px;display:grid;place-items:center;padding:56px 24px; background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--accent),transparent 90%), transparent 58%),var(--bg)} .auth-card{width:100%;max-width:420px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px;box-shadow:var(--shadow-2)} .auth-card__h{font-family:var(--ff-disp);font-weight:800;font-size:34px;text-transform:uppercase;text-align:center;margin:0 0 4px;color:var(--paper)} .auth-card__sub{text-align:center;font-size:13px;color:var(--paper-3);margin:0 0 26px} .auth-or{display:flex;align-items:center;gap:12px;margin:20px 0} .auth-or span{flex:1;height:1px;background:var(--line)} .auth-or b{font-family:var(--ff-mono);font-size:11px;color:var(--paper-4);font-weight:500} .auth-fine{text-align:center;font-size:11.5px;color:var(--paper-4);margin-top:16px;line-height:1.5} /* ===================================================================== ARCHETYPE COMPOSITION LAYER (Phase 2b.1) Every per-page inline style="" was lifted here so batched pages inherit it. Utilities are a bounded set on the token spacing scale; anything multi-property is a semantic component class. Dynamic values (meter --pct/--fill/--before/--after) stay inline inside partials only. ===================================================================== */ /* --- text utilities --- */ .text-center{text-align:center} .tc-paper{color:var(--paper)}.tc-paper-2{color:var(--paper-2)}.tc-paper-3{color:var(--paper-3)}.tc-paper-4{color:var(--paper-4)} .tc-accent{color:var(--accent)}.tc-up{color:var(--up)}.tc-down{color:var(--down)} .fs-11{font-size:11px}.fs-12{font-size:12px}.fs-13{font-size:13px} /* --- spacing utilities (token scale: 4 8 12 16 20 24) --- */ .mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px} .mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px} .mx-auto{margin-left:auto;margin-right:auto} /* --- gap modifiers (apply to .row / .stack / .grid) --- */ .g-8{gap:8px}.g-9{gap:9px}.g-10{gap:10px}.g-11{gap:11px}.g-12{gap:12px}.g-14{gap:14px}.g-16{gap:16px}.g-24{gap:24px} /* --- flex / grid utilities --- */ .nowrap{flex-wrap:nowrap} .row--center{justify-content:center} .row--end{align-items:flex-end} .row--right{justify-content:flex-end} .grid--top{align-items:start} .grid--2{grid-template-columns:1fr 1fr} .grid--stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))} .flex-1{flex:1} .flex-none{flex:none} .self-start{align-self:flex-start} .w-110{width:110px}.w-180{width:180px}.w-auto{width:auto} /* --- shared modifiers --- */ .frame--flat{box-shadow:none} .wordmark--sm{font-size:18px} .kicker--sm{font-size:11px} .kicker--accent{color:var(--accent)} .link-muted{font-size:12px;color:var(--paper-3)} .link-sm{font-size:12px} .hint--ruled{border-top:1px dashed var(--line-2);padding-top:11px} .panel--clip{overflow:hidden} .art--square{aspect-ratio:1/1} .art--sm{width:84px;height:84px;flex:none} .btn--flex{flex:1} .btn--icon{width:36px;height:36px;padding:0;flex:none} .btn--add{align-self:flex-start;border:1px dashed var(--line-2)} .is-hyped{color:var(--accent);border-color:var(--accent)} /* Batch 12 - active hype button */ /* --- auth archetype --- */ .auth-frame{max-width:900px;margin:40px auto} .auth-body{padding:56px 24px} .auth-title{font-family:var(--ff-disp);font-weight:800;font-size:38px;text-transform:uppercase;text-align:center;margin:0 0 4px} .auth-tagline{text-align:center;font-size:13px;color:var(--paper-3);margin:0 0 26px} .auth-aux{text-align:center;margin-top:14px} .auth-foot{text-align:center;margin-top:16px;font-size:13px;color:var(--paper-3)} .input--lg{font-size:15px;padding:12px 14px} .field--last{margin-bottom:20px} .or-divider{display:flex;align-items:center;gap:12px;margin:22px 0} .or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--line)} .or-divider__label{font-family:var(--ff-mono);font-size:11px;color:var(--paper-4)} /* --- public archetype --- */ .public-frame{max-width:1100px;margin:32px auto} .moment-grid{padding:28px 24px} .moment__eyebrow{font-family:var(--ff-disp);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)} .moment__title{font-family:var(--ff-disp);font-weight:700;font-size:20px;text-transform:uppercase;margin-top:3px} .moment__artist{font-size:13px;color:var(--paper-3)} /* --- dashboard archetype --- */ .rank-row{display:flex;align-items:baseline;gap:8px;margin-top:4px} .rank-num{font-family:var(--ff-mono);font-size:30px} .rank-delta{font-size:12px;color:var(--up)} .card-title{font-family:var(--ff-disp);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:14px} .card-copy{font-size:12.5px;color:var(--paper-2);margin:6px 0 11px} .card-note{font-size:12px;color:var(--paper-3);margin-top:2px} .activity-list{padding:6px 0} .activity{display:flex;gap:11px;padding:9px 16px;align-items:flex-start;flex-wrap:nowrap} .activity__dot{width:6px;height:6px;border-radius:1px;transform:rotate(45deg);margin-top:6px;flex:none;background:var(--pop)} .activity__dot--health{background:var(--health)} .activity__text{font-size:13px;color:var(--paper-2);line-height:1.45} /* --- detail archetype --- */ /* D93/D98 - art column capped at 440 CSS px (the -lg variant still covers @2x), and the info column gets a REAL minimum (420px): grid track sizing fills a minmax's max before fr tracks grow, so the old minmax(260,570) art hogged its 570 while the info column was starved to scraps just above the stack breakpoint. The stack point sits at 940 because the two column minimums (260+420 + gap) need ~700px of content width - below that we go single column. */ .grid--detail{grid-template-columns:minmax(260px,440px) minmax(420px,1fr)} /* min-width:0 on the items: a grid item's implicit min-width:auto would otherwise refuse to shrink below a table's intrinsic width, defeating .table-wrap's overflow-x and stretching the whole page on phones. */ .grid--detail>*{min-width:0} @media (max-width:940px){.grid--detail{grid-template-columns:minmax(0,1fr)}} .detail-art-col{width:100%;max-width:440px} .detail-title{font-family:var(--ff-disp);font-weight:800;font-size:40px;text-transform:uppercase;line-height:.95;margin:0} .detail-byline{font-size:15px;color:var(--paper-2);margin:6px 0 20px} .stat-card__val{font-family:var(--ff-mono);font-size:20px;color:var(--paper);margin-top:3px} .tracklist{display:flex;flex-direction:column;gap:8px} .track{display:flex;gap:14px;align-items:center;padding:10px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);flex-wrap:nowrap} .track__side{font-family:var(--ff-mono);font-size:12px;color:var(--paper-4);width:24px;flex:none} .track__title{flex:1;color:var(--paper);font-size:14px} .track__bar{width:100px;height:7px;flex:none} .track__val{font-family:var(--ff-mono);font-size:12px;color:var(--paper-2);width:52px;text-align:right;flex:none} /* --- action archetype (rest) --- */ .action-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0} .action-split__form{border-right:1px solid var(--line)} .action-split__result{background:var(--surface)} .venue-list{display:flex;flex-direction:column;gap:10px;margin-bottom:24px} .action-controls{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap} .field-grow{flex:1;min-width:200px} .action-cost{border-top:1px dashed var(--line-2);margin-top:18px;padding-top:14px;font-size:13px} .meter__track--delta{position:relative;height:8px;background:var(--bg)} .meter__delta-before{position:absolute;inset:0;width:var(--before,0%);background:var(--fill);opacity:.4} .meter__delta-after{position:absolute;inset:0;width:var(--after,0%);background:var(--fill)} /* --- settings archetype --- */ .form-bar{justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--line);background:var(--surface)} /* --- wizard archetype --- */ .wizard-field{flex:1;min-width:150px} .projection-row{border-bottom:1px solid var(--line);padding-bottom:9px} .projection-val{font-family:var(--ff-mono);font-size:14px;color:var(--paper)} .wizard-nav{margin-top:24px;border-top:1px solid var(--line);padding-top:18px} /* --- shared partial bits (static; dynamic values stay inline in partials) --- */ .empty__body{font-size:13px;color:var(--paper-3);margin:6px 0 16px} .form-inline{display:inline} .opt-body{flex:1} /* --- shell: band identity links to the manager dashboard (band switcher affordance) --- */ .band-link{display:flex;align-items:center;gap:14px;min-width:0;color:inherit} .band-link:hover .band-name{color:var(--accent)} .band-switch-ico{font-size:13px;color:var(--paper-3);margin-left:2px;vertical-align:2px} .band-link:hover .band-switch-ico{color:var(--accent)} /* --- status dashboard (A1 live page) --- */ /* D93 - the banner renders as a wide strip: full width, height-clamped, centre-cropped (object-fit keeps the middle; upload guidance says "ideal 2400×500, focus centred"). */ .band-banner{width:100%;max-width:100%;max-height:200px;object-fit:cover;object-position:center;border-radius:var(--r-md);border:1px solid var(--line)} @media (max-width:640px){.band-banner{max-height:100px}} /* D89 - band identity: uploaded square logo + public bio */ .band-logo{width:84px;height:84px;flex:none;border-radius:var(--r-md);border:1px solid var(--line-2);object-fit:cover;background:var(--surface-3)} .band-logo--head{width:64px;height:64px} .avatar--img{object-fit:cover;padding:0} .bio-text{margin:0;white-space:pre-line;color:var(--paper-2);font-size:14px;line-height:1.6;overflow-wrap:anywhere} .donate-options{display:flex;flex-direction:column;gap:10px;margin-top:8px} .local-time-hint{color:var(--paper-3)} /* JS-appended viewer-local time next to UK-anchored times */ /* D79 - Getting Started onboarding checklist (ported verbatim from docs/design/backstage/dashboard-onboarding.html - Claude Design handoff) */ .onboard{max-width:1320px} /* full content width; degrades below */ .onboard .onboard-head{gap:14px;flex-wrap:wrap} .onboard-head__left{display:flex;align-items:baseline;gap:12px;min-width:0} .onboard-count{font-family:var(--ff-body);font-weight:400;font-size:12px;letter-spacing:0;text-transform:none;color:var(--paper-3)} .onboard-count .mono{color:var(--paper);font-size:13px} .onboard-head__right{display:flex;align-items:center;gap:16px} .onboard-bar{width:132px;height:7px;flex:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden} .onboard-bar__fill{display:block;height:100%;width:var(--pct,0%);background:var(--accent);transition:width .6s cubic-bezier(.2,.7,.2,1)} .onboard-dismiss{font-family:var(--ff-body);font-weight:400;font-size:12px;letter-spacing:0;text-transform:none;color:var(--paper-4);background:none;border:none;padding:2px 0;cursor:pointer} .onboard-dismiss:hover{color:var(--paper-2);text-decoration:underline} .onboard-steps{display:flex;flex-direction:column} .onboard-step{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"mark body aside";align-items:center;column-gap:16px;row-gap:11px;padding:15px 16px;border-bottom:1px solid var(--line)} .onboard-step:last-child{border-bottom:none} .onboard-step.is-done{background:color-mix(in srgb,var(--good),transparent 95%)} .onboard-mark{grid-area:mark;width:26px;height:26px;flex:none;border-radius:5px;transform:rotate(45deg);display:flex;align-items:center;justify-content:center} .onboard-mark__glyph{transform:rotate(-45deg);font-family:var(--ff-mono);font-size:12px;line-height:1;font-weight:500} .onboard-mark--pending{border:2px solid var(--paper-4);background:var(--surface)} .onboard-mark--pending .onboard-mark__glyph{color:var(--paper-3)} .onboard-mark--done{border:2px solid var(--accent);background:var(--accent)} .onboard-mark--done .onboard-mark__glyph{color:var(--accent-ink);font-size:13px;font-weight:600} .onboard-body{grid-area:body;min-width:0} .onboard-title{font-family:var(--ff-disp);font-weight:600;font-size:17px;text-transform:uppercase;letter-spacing:.03em;line-height:1.1;color:var(--paper)} .onboard-step.is-done .onboard-title{color:var(--paper-2)} .onboard-blurb{font-size:13px;color:var(--paper-3);line-height:1.4;margin-top:3px} .onboard-aside{grid-area:aside;display:flex;align-items:center;justify-content:flex-end;gap:14px} .onboard-reward{font-family:var(--ff-mono);font-size:13px;color:var(--paper);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:4px 12px;white-space:nowrap} .onboard-reward--earned{color:var(--good);background:var(--good-bg);border-color:transparent} .onboard-cta{white-space:nowrap} .onboard-flash{margin:0 0 14px} .onboard-flash .mono{color:var(--paper);font-weight:500} .onboard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:13px 16px;border-top:1px solid var(--line);background:var(--surface)} .onboard-foot__label{font-family:var(--ff-disp);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-3)} .onboard-foot__reward{font-family:var(--ff-mono);font-size:14px;color:var(--paper)} .onboard-foot.is-complete{background:color-mix(in srgb,var(--accent),transparent 88%);border-top:1px solid var(--accent);padding:16px} .onboard-foot.is-complete .onboard-foot__label{color:var(--paper);font-size:16px} .onboard-foot.is-complete .onboard-foot__reward{color:var(--accent);font-size:18px;font-weight:500} .onboard-foot__note{flex-basis:100%;font-size:12px;color:var(--paper-3);margin-top:4px} @keyframes onboard-pop{0%{transform:rotate(45deg) scale(.5);opacity:0}60%{transform:rotate(45deg) scale(1.18)}100%{transform:rotate(45deg) scale(1);opacity:1}} @keyframes onboard-slide{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}} .onboard-anim .onboard-mark--pop{animation:onboard-pop .5s cubic-bezier(.2,.8,.2,1) both} .onboard-anim .onboard-flash{animation:onboard-slide .45s ease both} @media (max-width:600px){ .onboard-step{grid-template-columns:auto 1fr;grid-template-areas:"mark body" ". aside"} .onboard-aside{justify-content:flex-start} .onboard-title{font-size:16px} } /* --- charts / catalogue (Batch 2) --- */ .art--thumb{width:40px;height:40px;flex:none} .chart-last{font-size:11px;color:var(--paper-4)} /* --- uploaded artwork (Batch 4, D32 - one file, CSS-sized) --- */ .art-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line-2)} .art-img--thumb{width:40px;height:40px;flex:none;border-radius:var(--r-sm)} .art-img--sm{width:84px;height:84px;flex:none} .field-hint{font-size:12px;color:var(--paper-4);margin-top:4px;display:block} .field-hint.is-ok{color:var(--good)} .field-hint.is-bad{color:var(--bad)} /* --- auxiliary one-off pages (logout confirm / doc placeholders / status) --- */ .frame--narrow{max-width:520px;margin:60px auto} .stage-body{padding:40px 24px;text-align:center} .stage-title{font-family:var(--ff-disp);font-weight:800;font-size:30px;text-transform:uppercase;margin:0 0 8px} .stage-lead{color:var(--paper-3);font-size:14px;margin:0 0 22px} .doc-page{padding:40px 24px} .doc-page--lg{padding:60px 24px} .doc-title{font-family:var(--ff-disp);font-weight:800;font-size:38px;text-transform:uppercase} .doc-title--bad{color:var(--bad)} .doc-lead{color:var(--paper-2)} .doc-meta{color:var(--paper-4);font-size:12px} .ml-8{margin-left:8px} /* ---------- responsive ---------- */ @media (max-width:860px){ .nav-toggle{display:inline-flex} .app-nav{position:fixed;top:0;bottom:0;left:0;z-index:60;transform:translateX(-100%);transition:transform .2s ease} .app-nav.is-open{transform:none} .nav-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55} .nav-scrim.is-open{display:block} .hero h1{font-size:44px} .page-title{font-size:26px} } /* stacked two-pane / two-up grids: drop the vertical rule, restore a horizontal one */ @media (max-width:640px){ .action-split__form{border-right:none;border-bottom:1px solid var(--line)} .grid--2{grid-template-columns:1fr} } /* ---------- Batch 9: genre-affinity heatmap (diverging RdBu around ×1.0) ---------- */ /* Cells carry their own diverging palette (fixed, not theme tokens - a heatmap legitimately owns its scale). RdBu is CVD- and print-safe. 2px surface gap between cells per marks spec. */ .heat{border-collapse:separate;border-spacing:2px;font-size:12px} .heat th{font-weight:600;color:var(--paper-2);text-align:center;padding:4px 6px;white-space:nowrap;font-size:11px} .heat th.heat__row{text-align:right;position:sticky;left:0;background:var(--bg);z-index:1;padding-right:10px} .heat td{width:46px;height:30px;text-align:center;border-radius:4px;font-family:var(--ff-mono);font-variant-numeric:tabular-nums} .aff-1{background:#2166ac;color:#fff} /* strong penalty */ .aff-2{background:#67a9cf;color:#08243a} /* penalty */ .aff-3{background:#d1e5f0;color:#0b2230} /* mild penalty */ .aff-4{background:#e4e6ea;color:#3a3d42} /* neutral ×1.0 */ .aff-5{background:#fddbc7;color:#5a1a10} /* mild boost */ .aff-6{background:#ef8a62;color:#3a1206} /* boost */ .aff-7{background:#b2182b;color:#fff} /* strong boost */ .heat-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--paper-2)} .heat-legend .swatch{display:inline-flex;gap:2px} .heat-legend .swatch span{width:22px;height:14px;border-radius:3px} /* compact single-genre strip (genre pickers) */ .aff-strip{display:flex;gap:2px;flex-wrap:wrap;margin-top:8px} .aff-strip .cell{min-width:52px;padding:5px 6px;border-radius:4px;font-size:11px;font-family:var(--ff-mono);text-align:center;line-height:1.3} .aff-strip .cell b{display:block;font-family:var(--ff-body);font-weight:600;font-size:10px;letter-spacing:.02em} .shop-genres{display:flex;gap:5px;flex-wrap:wrap} .shop-genres .chip{font-size:11px;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--paper-2);border:1px solid var(--line)} /* ============================================================================ Rivalry dashboard card (Batch 19/D81) - Claude Design delivery, ported verbatim from docs/design/backstage/dashboard-rivalry.html (the .rival- block). ============================================================================ */ .rival-card{padding:0;overflow:hidden} .rival-card--quiet{filter:saturate(.35);opacity:.9} /* head */ .rival-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)} .rival-head__title{display:flex;align-items:center;gap:9px;font-family:var(--ff-disp);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2)} .rival-head__title .rival-glove{font-size:14px;filter:grayscale(.2)} /* streak chip */ .rival-streak{font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .rival-streak--win{color:var(--up);background:var(--up-bg);box-shadow:0 0 0 1px color-mix(in srgb,var(--up),transparent 55%),0 0 14px color-mix(in srgb,var(--up),transparent 72%)} .rival-streak--loss{color:var(--down);background:var(--down-bg)} /* tale-of-the-tape matchup */ .rival-vs{padding:18px 16px 16px;text-align:center;background:radial-gradient(120% 90% at 50% 0%,var(--surface-3),var(--surface-2) 72%)} .rival-vs__you{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-3)} .rival-vs__you b{color:var(--paper-2);font-weight:500} .rival-vs__rule{display:flex;align-items:center;gap:10px;margin:9px 0} .rival-vs__rule::before,.rival-vs__rule::after{content:"";height:1px;flex:1;background:var(--line-2)} .rival-vs__vs{font-family:var(--ff-disp);font-weight:800;font-size:12px;letter-spacing:.2em;color:var(--accent)} .rival-vs__name{font-family:var(--ff-disp);font-weight:800;font-size:30px;line-height:.95;letter-spacing:.01em;text-transform:uppercase;color:var(--paper);display:inline-block} a.rival-vs__name:hover{color:var(--accent)} /* running record */ .rival-record{display:flex;align-items:center;justify-content:center;gap:0;padding:11px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)} .rival-record__cell{display:flex;align-items:baseline;gap:5px;padding:0 13px;position:relative} .rival-record__cell+.rival-record__cell::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line)} .rival-record__k{font-family:var(--ff-disp);font-weight:700;font-size:12px;letter-spacing:.06em} .rival-record__v{font-family:var(--ff-mono);font-size:16px;font-weight:500;color:var(--paper)} .rival-record__cell--w .rival-record__k{color:var(--up)} .rival-record__cell--l .rival-record__k{color:var(--down)} .rival-record__cell--d .rival-record__k{color:var(--hold)} .rival-record__since{font-family:var(--ff-body);font-size:11px;color:var(--paper-4);text-align:center;padding:0 16px 11px;background:var(--surface);margin-top:-1px} /* last night's rounds */ .rival-rounds{padding:4px 0} .rival-rounds__cap{font-family:var(--ff-disp);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-4);padding:11px 16px 6px} .rival-round{display:grid;grid-template-columns:22px 1fr auto;align-items:center;column-gap:11px;padding:8px 16px} .rival-round__icon{font-size:15px;text-align:center;line-height:1} .rival-round__label{font-size:11px;color:var(--paper-3);text-transform:uppercase;letter-spacing:.04em;line-height:1.2} .rival-round__vals{font-family:var(--ff-mono);font-size:14px;margin-top:2px;color:var(--paper-3);display:flex;align-items:baseline;gap:7px} .rival-round__vs{font-size:10px;color:var(--paper-4)} .rival-round__mine{color:var(--paper-3)} .rival-round--won .rival-round__mine{color:var(--paper);font-weight:500} .rival-round--lost .rival-round__theirs{color:var(--paper);font-weight:500} .rival-round__out{font-family:var(--ff-mono);font-size:10px;font-weight:500;letter-spacing:.06em;padding:3px 8px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .rival-round__out b{font-size:11px} .rival-round--won .rival-round__out{color:var(--up);background:var(--up-bg)} .rival-round--lost .rival-round__out{color:var(--down);background:var(--down-bg)} .rival-round--tied .rival-round__out{color:var(--hold);background:var(--surface-3)} /* verdict bar */ .rival-verdict{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 16px;font-family:var(--ff-disp);font-weight:700;font-size:16px;letter-spacing:.03em;text-transform:uppercase;border-top:1px solid var(--line)} .rival-verdict--won{color:var(--up);background:color-mix(in srgb,var(--up),transparent 88%);border-top-color:color-mix(in srgb,var(--up),transparent 55%)} .rival-verdict--lost{color:var(--down);background:color-mix(in srgb,var(--down),transparent 90%);border-top-color:color-mix(in srgb,var(--down),transparent 60%)} .rival-verdict--draw{color:var(--paper-2);background:var(--surface)} .rival-verdict .mono{font-size:16px} /* notice (awaiting / quiet) */ .rival-notice{padding:22px 18px;text-align:center;color:var(--paper-3);font-size:13px;line-height:1.5} .rival-notice__glyph{font-size:22px;display:block;margin-bottom:8px;filter:grayscale(.3)} .rival-notice__stamp{display:block;margin-top:8px;font-family:var(--ff-mono);font-size:11px;color:var(--paper-4);letter-spacing:.05em} /* footer */ .rival-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px 9px 6px;border-top:1px solid var(--line);background:var(--surface)} .rival-foot__end{font-family:var(--ff-disp);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:var(--paper-4);background:none;border:none;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer} .rival-foot__end:hover{color:var(--down);background:var(--surface-3)} /* pitch (no-rival) */ .rival-pitch{padding:18px 16px 16px} .rival-pitch__lead{font-family:var(--ff-disp);font-weight:700;font-size:19px;line-height:1.05;text-transform:uppercase;color:var(--paper);letter-spacing:.01em} .rival-pitch__body{font-size:13px;color:var(--paper-3);line-height:1.5;margin:8px 0 14px} .rival-pitch__metrics{display:flex;gap:14px;justify-content:center;margin:0 0 15px;font-family:var(--ff-mono);font-size:11px;color:var(--paper-3)} .rival-pitch__metrics span{display:flex;align-items:center;gap:5px} .rival-pitch__form{display:flex;flex-direction:column;gap:9px} /* one-shot flourish - optional garnish only */ @keyframes rival-pop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}} @keyframes rival-rise{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}} .rival-anim .rival-verdict{animation:rival-rise .5s ease both} .rival-anim .rival-verdict .rival-glove{display:inline-block;animation:rival-pop .55s cubic-bezier(.2,.8,.2,1) .1s both} @media (max-width:380px){ .rival-vs__name{font-size:26px} } /* ============================================================================ THE ROCKSTAR GAME AWARDS - season ceremony stage (Batch 21/D83). Ported verbatim from docs/design/awards-show.html (the .awards-* block; the export-only director strip is NOT ported). Rendered full-bleed at /awards/{n}. ============================================================================ */ .awards-stage{ position:relative;overflow:hidden; background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--accent),transparent 90%), transparent 60%), radial-gradient(100% 70% at 50% 120%, var(--surface), var(--bg) 70%), var(--bg); --awards-ease:cubic-bezier(.2,.75,.2,1); } .awards-screen{padding:clamp(28px,5vw,72px) clamp(20px,5vw,48px)} .awards-stage:not(.is-live) .awards-screen{ display:grid;place-items:center;text-align:center; border-bottom:1px solid var(--line);min-height:60vh; } .awards-stage:not(.is-live) .awards-title{min-height:78vh} .awards-stage.is-live{min-height:100vh;display:grid} .awards-stage.is-live .awards-screen{ grid-area:1/1;display:grid;place-items:center;text-align:center;min-height:100vh; opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s var(--awards-ease); } .awards-stage.is-live .awards-screen.is-current{opacity:1;visibility:visible;pointer-events:auto} .awards-inner{width:min(1080px,100%);margin:0 auto} .awards-title__mark{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:22px} .awards-title__mark .diamond{width:16px;height:16px} .awards-title__mark span{height:1px;width:min(120px,18vw);background:var(--line-2)} .awards-kicker{font-family:var(--ff-mono);font-size:clamp(11px,1.4vw,13px);letter-spacing:.34em;text-transform:uppercase;color:var(--paper-3)} .awards-title__h1{font-family:var(--ff-disp);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:.01em;margin:16px 0 0;font-size:clamp(44px,9vw,120px);color:var(--paper)} .awards-title__h1 .awards-em{color:var(--accent)} .awards-title__sub{color:var(--paper-2);font-size:clamp(14px,1.6vw,17px);margin:20px auto 30px;max-width:44ch} .awards-title__nojs{margin-top:8px;font-family:var(--ff-mono);font-size:12px;color:var(--paper-4);letter-spacing:.04em} .is-live .awards-title__nojs{display:none} .awards-act__icon{font-size:clamp(30px,4vw,46px);line-height:1} .awards-act__eyebrow{font-family:var(--ff-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-4);margin-top:14px} .awards-act__cat{font-family:var(--ff-disp);font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:.01em;font-size:clamp(30px,5.2vw,64px);margin:6px 0 0;color:var(--paper)} .awards-act__blurb{color:var(--paper-3);font-size:clamp(13px,1.5vw,16px);margin:12px auto 0;max-width:46ch} .awards-noms{display:flex;gap:clamp(14px,2vw,28px);justify-content:center;flex-wrap:wrap;margin:clamp(26px,4vh,48px) 0 0;transition:opacity .5s var(--awards-ease),transform .5s var(--awards-ease),filter .5s var(--awards-ease)} .awards-nom{width:clamp(150px,22vw,210px);max-width:44vw} .awards-art{position:relative;aspect-ratio:1;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--surface-3);overflow:hidden;display:grid;place-items:center} .awards-art img{width:100%;height:100%;object-fit:cover;display:block} .awards-art__ph{width:30%;height:30%;background:color-mix(in srgb,var(--accent),transparent 55%);transform:rotate(45deg);border-radius:2px} .awards-nom__name{font-family:var(--ff-disp);font-weight:700;font-size:clamp(16px,1.9vw,20px);text-transform:uppercase;letter-spacing:.02em;line-height:1.05;margin-top:12px;color:var(--paper)} .awards-nom__by{font-size:12.5px;color:var(--paper-3);margin-top:2px} .awards-nom__stat{font-family:var(--ff-mono);font-size:13px;color:var(--paper-2);margin-top:8px} .awards-nom__masked{color:var(--paper-4);letter-spacing:.34em} .awards-nom__real{display:none} .awards-runners{display:none;font-family:var(--ff-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-4);margin-top:clamp(20px,3vh,30px)} .awards-runlist{display:none;width:min(440px,92%);margin:clamp(16px,2.5vh,24px) auto 0;border-top:1px solid var(--line);text-align:left} .awards-runlist__cap{font-family:var(--ff-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-4);padding:11px 2px 5px;text-align:center} .awards-runrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 2px;border-bottom:1px solid var(--line)} .awards-runrow:last-child{border-bottom:none} .awards-runrow__name{font-family:var(--ff-disp);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.02em;color:var(--paper-2);line-height:1.1} .awards-runrow__name small{font-family:var(--ff-body);font-weight:400;font-size:12px;text-transform:none;letter-spacing:0;color:var(--paper-4)} .awards-runrow__stat{font-family:var(--ff-mono);font-size:14px;color:var(--paper-3);white-space:nowrap} .awards-nom__rank{font-family:var(--ff-mono);font-size:11px;color:var(--paper-4);letter-spacing:.1em;text-transform:uppercase} .awards-payoff{display:none;width:min(760px,100%);margin:clamp(20px,3vh,34px) auto 0} .awards-payoff__tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-disp);font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)} .awards-payoff__tag .diamond{width:9px;height:9px} .awards-payoff__art{width:clamp(148px,22vh,236px);aspect-ratio:1;margin:16px auto 0;box-shadow:var(--shadow-2),0 0 0 1px var(--line-2),0 0 60px color-mix(in srgb,var(--accent),transparent 74%)} .awards-payoff__name{font-family:var(--ff-disp);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:.01em;font-size:clamp(38px,7vw,86px);margin:20px 0 0;color:var(--paper)} a.awards-payoff__name{text-decoration:none} a.awards-payoff__name:hover{color:var(--accent)} .awards-payoff__by{color:var(--paper-2);font-size:clamp(13px,1.6vw,17px);margin-top:8px} .awards-payoff__by b{color:var(--paper);font-weight:600} .awards-payoff__stat{font-family:var(--ff-mono);font-weight:500;font-size:clamp(16px,2.2vw,26px);color:var(--accent);margin-top:14px} .awards-payoff__stat small{color:var(--paper-3);font-weight:400;font-size:.62em;letter-spacing:.06em;text-transform:uppercase} .awards-act{position:relative} .awards-act[data-phase="crowned"] .awards-act__blurb{opacity:.5} .awards-act[data-phase="crowned"] .awards-payoff{display:block;animation:awards-fade .5s var(--awards-ease) both} .awards-act[data-phase="crowned"] .awards-payoff__art{animation:awards-bloom .7s var(--awards-ease) both} .awards-act[data-phase="crowned"] .awards-runners{display:block;animation:awards-fade .5s var(--awards-ease) .3s both} .awards-act[data-phase="crowned"] .awards-noms{display:none} .awards-act[data-phase="crowned"] .awards-runlist{display:block;animation:awards-fade .5s var(--awards-ease) .34s both} .awards-act.is-climax .awards-payoff__name{font-size:clamp(44px,9vw,112px)} .awards-act.is-climax[data-phase="crowned"] .awards-payoff__art{box-shadow:var(--shadow-2),0 0 0 2px var(--accent),0 0 90px color-mix(in srgb,var(--accent),transparent 60%)} .is-live .awards-screen.is-current .awards-nom{animation:awards-rise .6s var(--awards-ease) both} .is-live .awards-screen.is-current .awards-nom:nth-child(1){animation-delay:.05s} .is-live .awards-screen.is-current .awards-nom:nth-child(2){animation-delay:.18s} .is-live .awards-screen.is-current .awards-nom:nth-child(3){animation-delay:.31s} .awards-finale__h{font-family:var(--ff-disp);font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:.95;font-size:clamp(30px,5vw,60px);margin:0} .awards-finale__k{font-family:var(--ff-mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-3);margin-bottom:12px} .awards-board{width:min(760px,100%);margin:clamp(24px,4vh,40px) auto 0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);box-shadow:var(--shadow-1);overflow:hidden;text-align:left} .awards-board__row{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)} .awards-board__row:last-child{border-bottom:none} .awards-board__row--top{background:color-mix(in srgb,var(--accent),transparent 90%)} .awards-board__icon{font-size:17px;text-align:center} .awards-board__cat{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-3)} .awards-board__win{font-family:var(--ff-disp);font-weight:700;font-size:clamp(17px,2vw,22px);text-transform:uppercase;letter-spacing:.01em;color:var(--paper);line-height:1.05;margin-top:2px} .awards-board__win a{color:inherit} .awards-board__win a:hover{color:var(--accent)} .awards-board__by{color:var(--paper-3);font-weight:400;font-size:13px;text-transform:none;letter-spacing:0} .awards-board__stat{font-family:var(--ff-mono);font-size:14px;color:var(--paper-2);text-align:right;white-space:nowrap} .awards-finale__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:clamp(22px,4vh,34px)} .awards-controls{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:clamp(26px,4vh,40px)} .awards-skip{background:none;border:none;font-family:var(--ff-mono);font-size:12px;letter-spacing:.06em;color:var(--paper-4);cursor:pointer;padding:8px 10px} .awards-skip:hover{color:var(--paper-2);text-decoration:underline} .awards-auto{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--paper-4);cursor:pointer;user-select:none} .awards-auto input{accent-color:var(--accent);width:14px;height:14px} .awards-progress{position:absolute;top:0;left:0;height:3px;background:var(--accent);width:var(--p,0%);transition:width .5s var(--awards-ease);z-index:4} .is-live .awards-progress{display:block} .awards-stage:not(.is-live) .awards-progress{display:none} .awards-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3} @keyframes awards-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes awards-bloom{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}} @keyframes awards-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes awards-dot{from{transform:rotate(45deg) scale(0)}60%{transform:rotate(45deg) scale(1.3)}to{transform:rotate(45deg) scale(1)}} @media (prefers-reduced-motion:reduce){ .awards-stage *,.awards-stage *::before,.awards-stage *::after{animation:none!important} } .awards-stage.is-calm .awards-nom, .awards-stage.is-calm .awards-payoff, .awards-stage.is-calm .awards-payoff__art, .awards-stage.is-calm .awards-runner{animation:none!important} @media (max-width:640px){ .awards-noms{gap:14px} .awards-nom{width:44vw} .awards-payoff{width:94%} .awards-board__row{grid-template-columns:22px 1fr;grid-template-areas:"i c" ". w" ". s";row-gap:3px} .awards-board__icon{grid-area:i}.awards-board__cat{grid-area:c} .awards-board__win{grid-area:w}.awards-board__stat{grid-area:s;text-align:left} } /* Light ceremony (Claude Design §2b) - the token stage holds; only the payoff spotlight needs help (the accent glow reads faint on paper) + lift the big name off the bright ground. */ :root[data-theme="light"] .awards-payoff__art{ box-shadow:0 10px 30px rgba(52,42,22,.16),0 0 0 2px var(--accent),0 0 46px color-mix(in srgb,var(--accent),transparent 55%)} :root[data-theme="light"] .awards-act.is-climax[data-phase="crowned"] .awards-payoff__art{ box-shadow:0 12px 36px rgba(52,42,22,.18),0 0 0 2px var(--accent),0 0 70px color-mix(in srgb,var(--accent),transparent 45%)} :root[data-theme="light"] .awards-payoff__name{text-shadow:0 1px 0 rgba(255,255,255,.5)} /* ==== MANAGER TROPHY CABINET - public manager page (Batch 23/D85). Ported verbatim from docs/design/manager-cabinet.html (the .cabinet-* block). Rendered in the normal app layout at /managers/{id}. Optional entrance garnish gated behind .cabinet-anim (app.js adds it). ==== */ .cabinet{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(20px,3vw,28px)} /* --- header --------------------------------------------------------------- */ .cabinet-head{display:flex;align-items:center;gap:clamp(16px,3vw,26px);flex-wrap:wrap} .cabinet-mono{width:66px;height:66px;flex:none;border-radius:var(--r-sm);background:linear-gradient(160deg,var(--surface-3),var(--surface-2));border:1px solid var(--line-2);box-shadow:var(--shadow-1);transform:rotate(45deg);display:grid;place-items:center} .cabinet-mono span{transform:rotate(-45deg);font-family:var(--ff-disp);font-weight:800;font-size:26px;text-transform:uppercase;color:var(--accent);line-height:1} .cabinet-id{min-width:0} .cabinet-id__handle{font-family:var(--ff-disp);font-weight:800;font-size:clamp(30px,5vw,44px);line-height:.95;text-transform:uppercase;letter-spacing:.01em;color:var(--paper);margin:0} .cabinet-id__since{font-family:var(--ff-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-3);margin-top:6px} .cabinet-stats{display:flex;flex-wrap:wrap;gap:10px 22px;margin-left:auto;padding-left:8px} .cabinet-stat{display:flex;flex-direction:column;gap:2px;text-align:right} .cabinet-stat__v{font-family:var(--ff-mono);font-size:22px;font-weight:500;color:var(--paper);line-height:1} .cabinet-stat__k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-4)} /* --- trophy shelf --------------------------------------------------------- */ .cabinet-season{display:flex;align-items:baseline;gap:11px;padding:16px 16px 9px} .cabinet-season:first-child{padding-top:4px} .cabinet-season__n{font-family:var(--ff-disp);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-2)} .cabinet-season__name{font-size:12.5px;color:var(--paper-3);font-style:italic} .cabinet-season__rule{flex:1;height:1px;background:var(--line);align-self:center} .cabinet-trophy{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--line)} .cabinet-trophy__icon{position:relative;width:34px;height:34px;display:grid;place-items:center;font-size:18px;line-height:1} .cabinet-trophy__icon::before{content:"";position:absolute;inset:0;margin:auto;width:30px;height:30px;transform:rotate(45deg);border:1px solid var(--line-2);border-radius:5px;background:var(--surface-3)} .cabinet-trophy__icon span{position:relative} .cabinet-trophy__cat{font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-3)} .cabinet-trophy__win{font-family:var(--ff-disp);font-weight:700;font-size:clamp(17px,2vw,21px);text-transform:uppercase;letter-spacing:.01em;color:var(--paper);line-height:1.05;margin-top:2px} .cabinet-trophy__win a{color:inherit} .cabinet-trophy__win a:hover{color:var(--accent)} .cabinet-trophy__subj{color:var(--paper-3);font-weight:400;font-size:14px;text-transform:none;letter-spacing:0} .cabinet-trophy__stat{font-family:var(--ff-mono);font-size:14px;color:var(--paper-2);text-align:right;white-space:nowrap} /* pinnacle: Artist of the Year echoes the payoff accent */ .cabinet-trophy--top{background:color-mix(in srgb,var(--accent),transparent 91%)} .cabinet-trophy--top .cabinet-trophy__icon::before{background:var(--accent);border-color:var(--accent)} .cabinet-trophy--top .cabinet-trophy__stat{color:var(--accent)} /* --- band roster ---------------------------------------------------------- */ .cabinet-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px} .cabinet-band{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-3);text-decoration:none;transition:border-color .15s,transform .15s} .cabinet-band:hover{border-color:var(--paper-4)} .cabinet-band__mark{width:12px;height:12px;flex:none;background:var(--accent);transform:rotate(45deg)} .cabinet-band__name{display:block;font-family:var(--ff-disp);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.01em;color:var(--paper);line-height:1.05} .cabinet-band__stat{display:block;font-family:var(--ff-mono);font-size:12px;color:var(--paper-3);margin-top:3px} /* --- also nominated (quiet) ----------------------------------------------- */ .cabinet-nom{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line);font-size:13px} .cabinet-nom:first-child{border-top:none} .cabinet-nom__place{width:18px;height:18px;flex:none;transform:rotate(45deg);border:1px solid var(--paper-4);border-radius:3px} .cabinet-nom__meta{font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-4);white-space:nowrap} .cabinet-nom__who{color:var(--paper-2);min-width:0} .cabinet-nom__who b{font-family:var(--ff-disp);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.02em;color:var(--paper-2)} .cabinet-nom__rank{font-family:var(--ff-disp);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--paper-3)} .cabinet-nom__stat{font-family:var(--ff-mono);font-size:12.5px;color:var(--paper-3);text-align:right;white-space:nowrap} /* --- empty state ---------------------------------------------------------- */ .cabinet-empty{text-align:center;padding:34px 20px} .cabinet-empty__mark{width:22px;height:22px;margin:0 auto 14px;transform:rotate(45deg);border:1px solid var(--line-2);border-radius:4px;background:var(--surface-3)} .cabinet-empty__lead{font-family:var(--ff-disp);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.02em;color:var(--paper-2)} .cabinet-empty__sub{color:var(--paper-3);font-size:13.5px;margin:8px auto 16px;max-width:42ch} /* --- optional garnish (only with .cabinet-anim; JS adds it) ---------------- */ @keyframes cabinet-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .cabinet-anim .cabinet-trophy,.cabinet-anim .cabinet-band,.cabinet-anim .cabinet-nom{animation:cabinet-rise .5s cubic-bezier(.2,.75,.2,1) both} .cabinet-anim .cabinet-band{transition:border-color .15s,transform .15s} .cabinet-anim .cabinet-band:hover{transform:translateY(-2px)} .cabinet-anim .cabinet-trophy:hover{background:color-mix(in srgb,var(--surface-3),transparent 40%)} .cabinet-anim .cabinet-trophy--top:hover{background:color-mix(in srgb,var(--accent),transparent 86%)} @media (prefers-reduced-motion:reduce){ .cabinet-anim .cabinet-trophy,.cabinet-anim .cabinet-band,.cabinet-anim .cabinet-nom{animation:none} .cabinet-anim .cabinet-band:hover{transform:none} } /* --- responsive ----------------------------------------------------------- */ @media (max-width:560px){ .cabinet-stats{margin-left:0;width:100%;justify-content:space-between;gap:10px} .cabinet-stat{text-align:left} .cabinet-trophy{grid-template-columns:34px 1fr;grid-template-areas:"i m" ". s";row-gap:7px} .cabinet-trophy__icon{grid-area:i} .cabinet-trophy__stat{grid-area:s;text-align:left} .cabinet-nom{grid-template-columns:auto 1fr;grid-template-areas:"p w" ". m" ". s";row-gap:3px} .cabinet-nom__place{grid-area:p}.cabinet-nom__who{grid-area:w} .cabinet-nom__meta{grid-area:m}.cabinet-nom__stat{grid-area:s;text-align:left} } /* ==== THE ROCKSTAR GAME - logo (C2 "Admit One"). Ported verbatim from docs/design/logo_and_brand_assets/logo.html (the .logo-* block). Size any lockup by setting font-size on the root; set --logo-bg to the colour BEHIND the mark so the notch punch-outs mask correctly (default surface-2; on the app shell usually --bg/--surface). ==== */ .logo,.logo--stacked{--logo-bg:var(--surface-2)} /* --- primary horizontal ticket -------------------------------------------- */ .logo{display:inline-flex;align-items:stretch;font-size:16px;filter:drop-shadow(0 12px 30px rgba(0,0,0,var(--logo-shadow)))} .logo__main{background:linear-gradient(160deg,var(--surface-3),var(--surface-2));border:1px solid var(--line-2);border-right:none;border-radius:var(--r-sm) 0 0 var(--r-sm);padding:1.25em 1.5em;position:relative} .logo__admit{font-family:var(--ff-mono);font-size:.56em;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);font-weight:600} .logo__the{font-family:var(--ff-mono);font-size:.68em;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-3);margin-top:.7em;white-space:nowrap} .logo__title{font-family:var(--ff-disp);font-weight:800;font-size:3.25em;line-height:.85;text-transform:uppercase;color:var(--paper);margin-top:.05em;letter-spacing:.005em} .logo__title em{font-style:normal;color:var(--accent)} .logo__notch{position:relative;width:0;border-left:.12em dotted var(--line-2)} .logo__notch::before,.logo__notch::after{content:"";position:absolute;left:-.56em;width:1em;height:1em;border-radius:50%;background:var(--logo-bg)} .logo__notch::before{top:-.5em}.logo__notch::after{bottom:-.5em} .logo__stub{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1em .85em;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.6em;writing-mode:vertical-rl} .logo__stub .logo__rg{writing-mode:horizontal-tb;font-family:var(--ff-disp);font-weight:800;font-size:1.65em;line-height:.8;text-align:center} .logo__stub .logo__no{font-family:var(--ff-mono);font-size:.56em;letter-spacing:.2em} /* on-light */ .logo--light .logo__main{background:#fff;border-color:#d9d2c0} .logo--light .logo__the{color:var(--paper-4)} .logo--light .logo__title{color:#171512} .logo--light .logo__notch{border-left-color:#d9d2c0} /* one-ink (currentColor drives everything; pair with --ink or --paper) */ .logo--mono .logo__main{background:transparent;border-color:currentColor} .logo--mono .logo__admit,.logo--mono .logo__the,.logo--mono .logo__title,.logo--mono .logo__title em{color:currentColor} .logo--mono .logo__notch{border-left-color:currentColor} .logo--mono .logo__stub{background:currentColor;border-color:currentColor} .logo--mono .logo__stub .logo__rg,.logo--mono .logo__stub .logo__no{color:var(--logo-bg,var(--bg))} .logo--ink{color:#171512}.logo--paper{color:var(--paper)} /* --- stacked lockup ------------------------------------------------------- */ .logo--stacked{display:inline-flex;flex-direction:column;align-items:center;text-align:center;gap:.7em;font-size:16px} .logo-badge{position:relative;background:var(--accent);color:var(--accent-ink);border-radius:var(--r-sm);padding:.5em .8em .55em;filter:drop-shadow(0 8px 20px rgba(0,0,0,var(--logo-shadow)))} .logo-badge::before,.logo-badge::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:.7em;height:.7em;border-radius:50%;background:var(--logo-bg)} .logo-badge::before{left:-.35em}.logo-badge::after{right:-.35em} .logo-badge .logo__rg{font-family:var(--ff-disp);font-weight:800;font-size:2.4em;line-height:.8} .logo-badge .logo__admit{font-family:var(--ff-mono);font-size:.5em;letter-spacing:.3em;text-transform:uppercase;display:block;margin-top:.25em;opacity:.9} .logo--stacked .logo__the{font-family:var(--ff-mono);font-size:.66em;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-3);white-space:nowrap} .logo--stacked .logo__title{font-family:var(--ff-disp);font-weight:800;font-size:2.6em;line-height:.85;text-transform:uppercase;color:var(--paper);letter-spacing:.01em} .logo--stacked .logo__title em{font-style:normal;color:var(--accent)} .logo--stacked.logo--light .logo__the{color:var(--paper-4)} .logo--stacked.logo--light .logo__title{color:#171512} /* --- stub icon ------------------------------------------------------------ */ .logo-stub{--logo-bg:var(--surface-2);position:relative;display:inline-grid;place-items:center;width:1em;height:1em;font-size:96px;background:var(--accent);color:var(--accent-ink);border-radius:.0625em;filter:drop-shadow(0 6px 16px rgba(0,0,0,var(--logo-shadow)))} .logo-stub::before,.logo-stub::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:.11em;height:.11em;border-radius:50%;background:var(--logo-bg)} .logo-stub::before{left:-.055em}.logo-stub::after{right:-.055em} .logo-stub .logo__rg{font-family:var(--ff-disp);font-weight:800;font-size:.42em;line-height:.8} /* --- single-line chrome lockup: RG stub + condensed wordmark (nav / slim bars) ---- */ .logo--nav{--logo-bg:var(--surface-2);display:inline-flex;align-items:center;gap:.7em;font-size:15px} .logo--nav .logo-stub{font-size:2.1em;filter:none;border-radius:.09em} .logo--nav .logo-stub .logo__rg{font-size:.44em} .logo--nav .logo__word{display:flex;flex-direction:column;line-height:1;white-space:nowrap} .logo--nav .logo__the{font-family:var(--ff-mono);font-size:.62em;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-3)} .logo--nav .logo__title{font-family:var(--ff-disp);font-weight:800;font-size:1.5em;text-transform:uppercase;letter-spacing:.01em;color:var(--paper);margin-top:.12em} .logo--nav .logo__title em{font-style:normal;color:var(--accent)} .logo--nav.logo--light .logo__the{color:var(--paper-4)} .logo--nav.logo--light .logo__title{color:#171512} /* --- app integration: --logo-bg per context (D-logo) ---------------------- */ /* Set --logo-bg to the surface behind the mark on BOTH the lockup and its stub (the base .logo-stub rule sets its own default, so target the stub explicitly). */ .brand{--logo-bg:var(--surface)} /* sidebar sits on --surface */ .public-nav{--logo-bg:var(--bg)} /* public/auth headers sit on --bg */ .brand .logo--nav .logo-stub{--logo-bg:var(--surface)} .public-nav .logo--nav .logo-stub{--logo-bg:var(--bg)} /* =================================================================== SEASON COMPONENTS - lift verbatim into site.css (D96) =================================================================== */ /* ---- the homepage season section (logged-out landing) ---- */ .season-sec{max-width:1180px;margin:0 auto} .season-eye{font-family:var(--ff-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0 0 14px} /* the ticket: stub | perforation | body */ .season-ticket{position:relative;display:grid;grid-template-columns:230px 1fr;background:linear-gradient(160deg,var(--surface-3),var(--surface-2));border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-2)} .season-ticket::before,.season-ticket::after{content:"";position:absolute;left:230px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);transform:translateX(-50%);z-index:1} .season-ticket::before{top:-10px;border-top-color:transparent} .season-ticket::after{bottom:-10px;border-bottom-color:transparent} .season-ticket__stub{padding:26px 24px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-width:0} .season-ticket__admit{font-family:var(--ff-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-3)} .season-ticket__num{font-family:var(--ff-disp);font-weight:800;font-size:clamp(84px,10vw,124px);line-height:.78;color:var(--accent);letter-spacing:-.01em} .season-ticket__name{font-family:var(--ff-disp);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.04em;line-height:1} .season-ticket__body{position:relative;border-left:1.5px dashed var(--line-2);padding:26px 28px 22px;display:flex;flex-direction:column;gap:18px;min-width:0} .season-fields{display:flex;gap:36px;flex-wrap:wrap} .season-field{min-width:0} .season-field__k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-3);margin:0 0 4px} .season-field__v{font-family:var(--ff-disp);font-weight:700;font-size:26px;text-transform:uppercase;line-height:1;margin:0} .season-field__v small{display:block;font-family:var(--ff-mono);font-weight:400;font-size:11px;text-transform:none;letter-spacing:0;color:var(--paper-3);margin-top:4px} .season-chip{align-self:flex-start;font-family:var(--ff-mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:var(--r-pill);padding:6px 14px} .season-chip--quiet{color:var(--paper-2);background:var(--surface-3);border-color:var(--line-2)} .season-chip--live{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)} /* opened -> ends progress meter */ .season-meter{margin-top:auto} .season-meter__track{height:4px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);overflow:hidden} .season-meter__fill{height:100%;width:var(--pct,0%);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--accent));border-radius:var(--r-pill)} .season-meter__ends{display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-4);margin-top:6px} /* what-seasons-are: explainer + the three passes + CTA */ .season-below{display:grid;grid-template-columns:minmax(260px,34ch) 1fr;gap:28px;align-items:start;margin-top:26px} .season-lead{color:var(--paper-2);font-size:15px;line-height:1.65;margin:0} .season-lead b{color:var(--paper)} .season-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;min-width:0} .season-point{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--shadow-1)} .season-point__ico{font-size:18px;line-height:1;margin:0 0 8px} .season-point__t{font-family:var(--ff-disp);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 4px} .season-point__d{font-size:12.5px;color:var(--paper-3);line-height:1.5;margin:0} .season-cta{margin-top:22px} .season-cta a{display:inline-block;font-family:var(--ff-disp);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-ink);background:var(--accent);border-radius:var(--r-sm);padding:11px 22px;text-decoration:none} .season-cta a:hover{background:var(--accent-hover)} @media (max-width:680px){ .season-ticket{grid-template-columns:1fr} .season-ticket::before,.season-ticket::after{display:none} .season-ticket__stub{flex-direction:row;align-items:end;justify-content:flex-start;gap:16px;padding-bottom:18px} .season-ticket__num{font-size:72px} .season-ticket__body{border-left:0;border-top:1.5px dashed var(--line-2)} .season-fields{gap:22px} .season-below{grid-template-columns:1fr} } /* ---- the dashboard season strip (Status page band) ---- */ .season-strip{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:12px 18px 12px 24px;overflow:hidden} .season-strip::before{content:"";position:absolute;left:-9px;top:50%;width:16px;height:16px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);transform:translateY(-50%)} .season-strip__name{font-family:var(--ff-disp);font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.04em} .season-strip__name em{font-style:normal;color:var(--accent)} .season-strip__fact{font-family:var(--ff-mono);font-size:11.5px;color:var(--paper-3)} .season-strip__fact b{color:var(--paper-2);font-weight:600} .season-strip__dot{color:var(--paper-4)} .season-strip__spacer{flex:1} .season-strip__link{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);text-decoration:none;white-space:nowrap} .season-strip__link:hover{text-decoration:underline} .season-strip .season-chip{font-size:10.5px;padding:4px 11px} @media (max-width:560px){.season-strip__spacer{display:none}.season-strip{gap:8px 14px}} /* =================== end SEASON COMPONENTS =================== */ /* =================================================================== BATCH 34 COMPONENTS - lift verbatim into site.css (D97) =================================================================== */ /* ---- Search v2 (search-) - grouped bands + releases results ---- */ .search-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start} .search-group__cap{font-family:var(--ff-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-3);margin:0 0 10px;display:flex;align-items:center;gap:10px} .search-group__cap b{color:var(--paper-2)} .search-group__cap::after{content:"";flex:1;height:1px;background:var(--line)} .search-list{display:flex;flex-direction:column;gap:8px} .search-hit{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px;box-shadow:var(--shadow-1);text-decoration:none;color:var(--paper);min-width:0} .search-hit:hover{border-color:var(--line-2);background:var(--surface-3)} .search-hit__art{width:42px;height:42px;flex:none;border-radius:var(--r-sm);border:1px solid var(--line-2);object-fit:cover;background:var(--surface-3)} .search-hit__ph{width:42px;height:42px;flex:none;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-family:var(--ff-disp);font-weight:700;font-size:16px;color:var(--paper-3);text-transform:uppercase} .search-hit__main{min-width:0;flex:1} .search-hit__name{font-family:var(--ff-disp);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .search-hit__sub{font-family:var(--ff-mono);font-size:11px;color:var(--paper-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .search-hit__meta{font-family:var(--ff-mono);font-size:11px;color:var(--paper-2);text-align:right;flex:none} .search-hit__meta small{display:block;color:var(--paper-4)} .search-empty{padding:26px 18px;text-align:center;color:var(--paper-3);background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--r-md)} .search-empty b{color:var(--paper-2)} /* ---- Compare v2 (cmp-) - the head-to-head header + verdict ---- */ .cmp-head{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;background:linear-gradient(160deg,var(--surface-3),var(--surface-2));border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:22px 26px;margin-bottom:20px} .cmp-side{display:flex;align-items:center;gap:14px;min-width:0} .cmp-side--them{flex-direction:row-reverse;text-align:right} .cmp-side__logo{width:64px;height:64px;flex:none;border-radius:var(--r-md);border:1px solid var(--line-2);object-fit:cover;background:var(--surface)} .cmp-side__ph{width:64px;height:64px;flex:none;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--surface);display:flex;align-items:center;justify-content:center;font-family:var(--ff-disp);font-weight:800;font-size:24px;color:var(--paper-3);text-transform:uppercase} .cmp-side__who{min-width:0} .cmp-side__tag{font-family:var(--ff-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-3);margin:0 0 3px} .cmp-side__name{font-family:var(--ff-disp);font-weight:800;font-size:24px;text-transform:uppercase;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cmp-verdict{text-align:center} .cmp-verdict__vs{font-family:var(--ff-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-4)} .cmp-verdict__score{font-family:var(--ff-disp);font-weight:800;font-size:44px;line-height:.95;color:var(--accent);white-space:nowrap} .cmp-verdict__line{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-2);margin-top:4px} .cmp-row-win{box-shadow:inset 3px 0 0 var(--up)} .cmp-row-loss{box-shadow:inset 3px 0 0 var(--down)} @media (max-width:640px){ .cmp-head{grid-template-columns:1fr;gap:12px;padding:18px} .cmp-side--them{flex-direction:row;text-align:left} .cmp-verdict{order:3;border-top:1px dashed var(--line-2);padding-top:12px} } /* ---- World Tastes country hover card (mkt-) - CSS-only ---- */ .mkt-th{position:relative;cursor:help;outline:none} .mkt-th:hover,.mkt-th:focus-visible,.mkt-th:focus-within{background:var(--surface-3)} .mkt-card{position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:30;min-width:225px;background:var(--surface-3);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-2);padding:12px 14px;text-align:left;display:none;font-weight:400;text-transform:none} .mkt-th:hover .mkt-card,.mkt-th:focus-visible .mkt-card,.mkt-th:focus-within .mkt-card{display:block} .mkt-th:last-child .mkt-card,.mkt-th:nth-last-child(2) .mkt-card{left:auto;right:0;transform:none} .mkt-card__name{font-family:var(--ff-disp);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px} .mkt-card__row{display:flex;justify-content:space-between;gap:16px;font-family:var(--ff-mono);font-size:11px;color:var(--paper-3);padding:3px 0} .mkt-card__row b{color:var(--paper);font-weight:600} .mkt-card__tastes{border-top:1px dashed var(--line-2);margin-top:8px;padding-top:8px;font-size:11.5px;color:var(--paper-2);line-height:1.5} .mkt-card__tastes b{color:var(--paper)} /* =================== end BATCH 34 COMPONENTS =================== */ /* =================================================================== BATCH 36 COMPONENTS (D99) - lifted verbatim from docs/design/backstage/batch36-panels.html (the reviewed artifact) =================================================================== */ /* ---- Feed comments (cmt-) - the count pill + thread + form ---- */ .cmt-count{white-space:nowrap} .cmt-count.has-comments{border-color:var(--line-2);color:var(--paper)} .cmt-thread{border-left:2px solid var(--line-2);margin-left:6px;padding-left:16px;display:flex;flex-direction:column;gap:0} .cmt-row{position:relative;display:flex;justify-content:space-between;gap:14px;padding:11px 2px;border-bottom:1px dashed var(--line)} .cmt-row:last-child{border-bottom:none} .cmt-row::before{content:"";position:absolute;left:-20px;top:20px;width:8px;height:2px;background:var(--line-2)} .cmt-row__who{font-size:13px} .cmt-row__who a{font-family:var(--ff-disp);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em;text-decoration:none} .cmt-row__when{font-family:var(--ff-mono);font-size:10.5px;color:var(--paper-4);margin-left:8px} .cmt-row__text{color:var(--paper-2);font-size:13px;margin-top:3px;overflow-wrap:anywhere} .cmt-row__del{flex:none;align-self:flex-start;background:none;border:none;color:var(--paper-4);font-size:13px;cursor:pointer;padding:2px 6px;border-radius:var(--r-sm)} .cmt-row__del:hover{color:var(--bad);background:var(--surface-2)} .cmt-empty{color:var(--paper-3);font-size:13px;padding:14px 2px 4px} .cmt-form{margin-top:14px} .cmt-input{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--paper);font-family:var(--ff-body);font-size:14px;padding:10px 12px;resize:vertical;min-height:64px} .cmt-input:focus{outline:none;border-color:var(--paper-3)} .cmt-form__bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px} .cmt-form__count{font-family:var(--ff-mono);font-size:11px;color:var(--paper-4)} /* ---- Genre waves (wave-) - banner, dashboard strip, heat badge, admin ---- */ .wave-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--wave) 14%,var(--surface-2)),var(--surface-2) 60%);border:1px solid var(--line-2);border-left:4px solid var(--wave);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:14px 18px} .wave-banner__emoji{font-size:22px;flex:none} .wave-banner__main{min-width:0;flex:1} .wave-banner__head{font-family:var(--ff-disp);font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:.02em;line-height:1.05} .wave-banner__head b{color:var(--wave)} .wave-banner__sub{font-size:13px;color:var(--paper-2);margin-top:2px} .wave-banner__sub .mono{font-family:var(--ff-mono);color:var(--paper)} .wave-nights{display:flex;gap:4px;align-items:center;flex:none} .wave-nights i{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--wave);opacity:.95} .wave-nights i.spent{background:var(--line-2);opacity:.7} .wave-nights__label{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-3);margin-left:6px} .wave-strip{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--wave);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:10px 14px;margin-bottom:20px} .wave-strip__text{flex:1;min-width:0;font-size:13px;color:var(--paper-2)} .wave-strip__text b{color:var(--paper)} .wave-strip__text .mono{font-family:var(--ff-mono);color:var(--paper)} .heat__cell--wave{position:relative;box-shadow:inset 0 0 0 2px var(--wave)} .heat__cell--wave::after{content:"🌊";position:absolute;top:-7px;right:-6px;font-size:11px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))} .wave-admin__live{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:color-mix(in srgb,var(--wave) 8%,var(--surface-2));border:1px solid var(--line-2);border-radius:var(--r-md);padding:10px 14px;margin-bottom:12px} .chip--wave{background:var(--wave);border-color:var(--wave);color:#fff} /* ---- Collabs (collab-) - offer card, terms sheet, hub rows ---- */ .collab-offer{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden} .collab-offer__head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:linear-gradient(160deg,var(--surface-3),var(--surface-2))} .collab-offer__emoji{font-size:20px;flex:none} .collab-offer__title{font-family:var(--ff-disp);font-weight:800;font-size:20px;text-transform:uppercase;line-height:1.05;min-width:0} .collab-offer__title a{text-decoration:none} .collab-offer__expiry{margin-left:auto;flex:none;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--warn)} .collab-terms{padding:14px 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 22px} .collab-terms__item{border-bottom:1px dashed var(--line);padding-bottom:8px;min-width:0} .collab-terms__label{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-4);margin-bottom:2px} .collab-terms__value{font-family:var(--ff-mono);font-size:14px;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .collab-terms__value small{color:var(--paper-3)} .collab-terms__item--yours .collab-terms__value{color:var(--accent);font-weight:600} .collab-offer__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line)} .collab-offer__split{font-size:12px;color:var(--paper-3);margin-left:auto} .collab-row{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:11px 16px;font-size:13px;color:var(--paper-2)} .collab-row b{color:var(--paper)} /* ---- feat. credit (feat-) - bylines + catalogue badge ---- */ .feat-byline{font-family:var(--ff-mono);font-size:.82em;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-3);margin:0 2px} .feat-badge{background:color-mix(in srgb,var(--accent) 10%,var(--surface-3));border-color:color-mix(in srgb,var(--accent) 45%,var(--line-2));color:var(--paper-2);margin-left:8px;white-space:nowrap} /* =================== end BATCH 36 COMPONENTS =================== */ /* =================================================================== BATCH 37 COMPONENTS (lbl-) - record labels (D100), ported from the user-approved docs/design/backstage/record-labels.html =================================================================== */ /* ---- the label mark - logo tile / monogram fallback (every surface) ---- */ .lbl-mark{flex:none;width:56px;height:56px;border-radius:var(--r-md);overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,color-mix(in srgb,var(--lbl) 26%,var(--surface-3)),var(--surface-2) 75%);border:1px solid color-mix(in srgb,var(--lbl) 40%,var(--line-2));box-shadow:var(--shadow-1)} .lbl-mark img{width:100%;height:100%;object-fit:cover;display:block} .lbl-mark span{font-family:var(--ff-disp);font-weight:800;font-size:26px;color:var(--lbl)} .lbl-mark--sm{width:38px;height:38px;border-radius:var(--r-sm)} .lbl-mark--sm span{font-size:18px} /* ---- public page header (/labels/{id}) ---- */ .lbl-head{display:flex;flex-wrap:wrap;align-items:center;gap:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--lbl) 9%,var(--surface-2)),var(--surface-2) 62%);border:1px solid var(--line-2);border-top:3px solid var(--lbl);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:18px 22px;margin-bottom:16px} .lbl-head__name{font-family:var(--ff-disp);font-weight:800;font-size:clamp(24px,3vw,34px);text-transform:uppercase;line-height:.95;letter-spacing:.01em} .lbl-head__meta{font-size:12.5px;color:var(--paper-3);margin-top:4px} .lbl-head__meta a{color:var(--paper-2)} .lbl-head__meta b{color:var(--paper-2);font-weight:600} .lbl-mission{font-size:13px;color:var(--paper-2);font-style:italic;border-left:3px solid color-mix(in srgb,var(--lbl) 55%,var(--line-2));padding:2px 0 2px 14px;max-width:62ch} /* ---- chips: distress (public, >= 3 nights) / signed / seeking / funded ---- */ .lbl-chip-distress{background:color-mix(in srgb,var(--bad) 16%,var(--surface-3));border-color:color-mix(in srgb,var(--bad) 55%,var(--line-2));color:var(--bad);font-weight:600} .lbl-chip-signed{background:color-mix(in srgb,var(--lbl) 12%,var(--surface-3));border-color:color-mix(in srgb,var(--lbl) 45%,var(--line-2));color:var(--paper-2)} .lbl-chip-signed a{color:var(--paper);text-decoration:none;font-weight:600} .lbl-chip-seeking{background:color-mix(in srgb,var(--good) 12%,var(--surface-3));border-color:color-mix(in srgb,var(--good) 45%,var(--line-2));color:var(--good)} .lbl-funded{background:color-mix(in srgb,var(--lbl) 12%,var(--surface-3));border-color:color-mix(in srgb,var(--lbl) 45%,var(--line-2));color:var(--paper-2);white-space:nowrap} .lbl-funded b{color:var(--paper)} /* ---- roster grid (public page) - signee cards with the contract stamp ---- */ .lbl-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .lbl-signee{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:13px 15px 11px;position:relative} .lbl-signee__band{font-family:var(--ff-disp);font-weight:700;font-size:18px;text-transform:uppercase;line-height:1.05} .lbl-signee__band a{text-decoration:none} .lbl-signee__stats{display:flex;gap:14px;margin-top:7px;font-family:var(--ff-mono);font-size:12px;color:var(--paper-2)} .lbl-signee__stats small{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-4)} .lbl-signee__since{position:absolute;top:11px;right:13px;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-4);border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:2px 7px;transform:rotate(2deg)} /* ---- directory card (/labels) ---- */ .lbl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .lbl-card{display:block;text-decoration:none;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:16px;transition:border-color .15s,transform .15s} .lbl-card:hover{border-color:color-mix(in srgb,var(--lbl) 50%,var(--line-2));transform:translateY(-1px)} .lbl-card__top{display:flex;align-items:center;gap:12px;margin-bottom:12px} .lbl-card__name{font-family:var(--ff-disp);font-weight:800;font-size:21px;text-transform:uppercase;line-height:1;min-width:0} .lbl-card__owner{font-size:12px;color:var(--paper-3);margin-top:3px} .lbl-card__open{margin-left:auto;flex:none} .chip--open{background:color-mix(in srgb,var(--good) 14%,var(--surface-3));border-color:color-mix(in srgb,var(--good) 50%,var(--line-2));color:var(--good)} .lbl-card__row{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed var(--line);padding-top:9px;font-family:var(--ff-mono);font-size:12px;color:var(--paper-2)} .lbl-card__row small{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-4);display:block;margin-bottom:1px} /* ---- board table (/labels/board) - season span = the live award race ---- */ .lbl-board{width:100%;border-collapse:collapse} .lbl-board th{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-3);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line-2)} .lbl-board td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px} .lbl-board .num{text-align:right;font-family:var(--ff-mono)} .lbl-board__pos{font-family:var(--ff-mono);color:var(--paper-3);width:40px} .lbl-board__name{font-family:var(--ff-disp);font-weight:700;font-size:17px;text-transform:uppercase} .lbl-board__name a{text-decoration:none} .lbl-board tr.is-first td{background:color-mix(in srgb,var(--lbl) 8%,transparent);border-bottom-color:color-mix(in srgb,var(--lbl) 35%,var(--line))} .lbl-board tr.is-first .lbl-board__pos{color:var(--lbl);font-weight:600} .lbl-board__trophy{font-size:12px;margin-left:6px} /* ---- hub treasury + runway ---- */ .lbl-treasury{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .lbl-stat{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:12px 15px} .lbl-stat__k{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-4)} .lbl-stat__v{font-family:var(--ff-mono);font-size:20px;margin-top:3px} .lbl-stat--money .lbl-stat__v{color:var(--lbl)} .lbl-stat--runway-low .lbl-stat__v{color:var(--warn)} /* ---- the distress ladder - 7 nights to bust (hub banner, escalating) ---- */ .lbl-distress{display:flex;flex-wrap:wrap;align-items:center;gap:14px;border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:12px 16px;border:1px solid} .lbl-distress__nights{display:flex;gap:4px;align-items:center;flex:none} .lbl-distress__nights i{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--line-2)} .lbl-distress__nights i.hit{background:var(--bad)} .lbl-distress__text{flex:1;min-width:200px;font-size:13px} .lbl-distress__text b{font-family:var(--ff-disp);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.04em} .lbl-distress--warn{background:color-mix(in srgb,var(--warn) 9%,var(--surface-2));border-color:color-mix(in srgb,var(--warn) 45%,var(--line-2))} .lbl-distress--warn b{color:var(--warn)} .lbl-distress--critical{background:color-mix(in srgb,var(--bad) 12%,var(--surface-2));border-color:color-mix(in srgb,var(--bad) 55%,var(--line-2))} .lbl-distress--critical b{color:var(--bad)} .lbl-distress--critical .lbl-distress__nights i.hit{animation:lbl-throb 1.6s ease-in-out infinite} @keyframes lbl-throb{50%{opacity:.45}} @media (prefers-reduced-motion: reduce){.lbl-distress--critical .lbl-distress__nights i.hit{animation:none}} /* ---- the contract card - offer terms + the recoup bar ---- */ .lbl-offer{background:var(--surface-2);border:1px solid color-mix(in srgb,var(--lbl) 30%,var(--line-2));border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden} .lbl-offer__head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:linear-gradient(160deg,color-mix(in srgb,var(--lbl) 10%,var(--surface-3)),var(--surface-2) 70%)} .lbl-offer__title{font-family:var(--ff-disp);font-weight:800;font-size:20px;text-transform:uppercase;line-height:1.05;min-width:0} .lbl-offer__title a{text-decoration:none} .lbl-offer__title .quiet{color:var(--paper-3)} .lbl-offer__expiry{margin-left:auto;flex:none;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--warn)} .lbl-offer__expiry--quiet{color:var(--paper-3)} .lbl-terms{padding:14px 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 22px} .lbl-terms__item{border-bottom:1px dashed var(--line);padding-bottom:8px;min-width:0} .lbl-terms__label{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-4);margin-bottom:2px} .lbl-terms__value{font-family:var(--ff-mono);font-size:14px;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lbl-terms__value small{color:var(--paper-3)} .lbl-terms__item--cut .lbl-terms__value{color:var(--accent);font-weight:600} .lbl-offer__msg{margin:0 18px 14px;font-size:13px;color:var(--paper-2);font-style:italic;border-left:3px solid var(--line-2);padding:2px 0 2px 12px} .lbl-offer__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line)} .lbl-offer__fine{font-size:12px;color:var(--paper-3);margin-left:auto} /* the recoup bar - how much of the advance the label has clawed back */ .lbl-recoup{padding:0 18px 16px} .lbl-recoup--head{padding-top:14px} .lbl-recoup__bar{height:8px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line-2);overflow:hidden} .lbl-recoup__fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,color-mix(in srgb,var(--lbl) 70%,var(--surface-2)),var(--lbl))} .lbl-recoup__fill.is-done{background:var(--good)} .lbl-recoup__row{display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:10.5px;color:var(--paper-3);margin-top:5px} .lbl-recoup__row b{color:var(--paper-2)} /* ---- founding wizard - the patron gate + the fee line ---- */ .lbl-patron-gate{background:linear-gradient(150deg,color-mix(in srgb,var(--patron) 10%,var(--surface-2)),var(--surface-2) 65%);border:1px solid color-mix(in srgb,var(--patron) 40%,var(--line-2));border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:22px;text-align:center;max-width:520px} .lbl-patron-gate__star{font-size:30px;color:var(--patron);line-height:1} .lbl-patron-gate__h{font-family:var(--ff-disp);font-weight:800;font-size:24px;text-transform:uppercase;margin:8px 0 6px} .lbl-patron-gate__sub{color:var(--paper-2);font-size:13px;max-width:46ch;margin:0 auto 16px} .lbl-fee{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--surface-3);border:1px dashed var(--line-2);border-radius:var(--r-md);padding:12px 16px;font-size:13px;color:var(--paper-2);margin-bottom:16px} .lbl-fee .mono{color:var(--paper)} .lbl-fee__amount{font-family:var(--ff-mono);font-size:20px;color:var(--lbl);flex:none} /* ---- dashboard cards - owner + signee ---- */ .lbl-dash{background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--lbl);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:14px 16px} .lbl-dash__title{font-family:var(--ff-disp);font-weight:800;font-size:19px;text-transform:uppercase;line-height:1.05;margin-bottom:9px} .lbl-dash__row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--paper-2);padding:3px 0;align-items:center} .lbl-dash__row .mono{color:var(--paper)} .lbl-dash__alert{color:var(--bad);font-weight:600} .lbl-dash .btn{display:block;text-align:center;margin-top:11px} /* ---- ceremony Kind-4 art - the label monogram when there's no logo ---- */ .awards-art--lbl{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,color-mix(in srgb,var(--lbl) 26%,var(--surface-3)),var(--surface-2) 75%);border:1px solid color-mix(in srgb,var(--lbl) 40%,var(--line-2))} .awards-art__lblmono{font-family:var(--ff-disp);font-weight:800;font-size:42px;color:var(--lbl)} /* =================== end BATCH 37 COMPONENTS =================== */ /* ---- the Google auth button - official G beside the label (2026-07-19) ---- */ .btn-google{display:flex;align-items:center;justify-content:center;gap:10px} .btn-google__g{width:18px;height:18px;flex:none;display:block} /* =================================================================== CHART MASTHEAD + COUNTDOWN (chart-) - ported from the user-approved docs/design/backstage/chart-masthead.html (2026-07-19) =================================================================== */ /* ---- the format rack - Singles / EPs / Albums / Streaming (the page's IDENTITY) ---- */ .chart-kinds{display:inline-flex;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-1);overflow:hidden} .chart-kind{position:relative;font-family:var(--ff-disp);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.04em;color:var(--paper-3);padding:9px 18px 8px;border-right:1px solid var(--line);text-decoration:none;transition:color .12s} .chart-kind:last-child{border-right:none} .chart-kind:hover{color:var(--paper-2)} .chart-kind.is-active{color:var(--paper);background:var(--surface-3)} .chart-kind.is-active::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:3px;border-radius:2px;background:var(--accent)} /* ---- the market dial - a FILTER, deliberately half the rack's voice ---- */ .chart-regions{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:12px} .chart-regions__k{flex:none;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-4)} .chart-region{font-family:var(--ff-mono);font-size:11px;letter-spacing:.04em;color:var(--paper-3);padding:3px 10px;border:1px solid transparent;border-radius:var(--r-pill);text-decoration:none;transition:color .12s,border-color .12s} .chart-region:hover{color:var(--paper-2);border-color:var(--line-2)} .chart-region.is-active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);font-weight:600} .chart-region--note{color:var(--paper-4);cursor:default} .chart-mast{margin-bottom:16px} /* ---- the countdown - No.1 throne, top-10 weight, the pack ---- */ .chart-no1{display:flex;flex-wrap:wrap;align-items:center;gap:18px;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 10%,var(--surface-2)),var(--surface-2) 62%);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line-2));border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:16px 20px;margin-bottom:12px} .chart-no1__art{width:96px;height:96px;border-radius:var(--r-md);flex:none;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.35);background:linear-gradient(140deg,var(--surface-3),var(--line-2))} .chart-no1__art img{width:100%;height:100%;object-fit:cover;display:block} .chart-no1__main{min-width:0;flex:1} .chart-no1__tag{font-family:var(--ff-mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);font-weight:600} .chart-no1__title{font-family:var(--ff-disp);font-weight:800;font-size:clamp(22px,3vw,32px);text-transform:uppercase;line-height:.95;margin-top:2px} .chart-no1__title a{text-decoration:none} .chart-no1__by{font-size:13px;color:var(--paper-2);margin-top:4px} .chart-no1__by a{font-weight:600;text-decoration:none} .chart-no1__stats{flex:none;text-align:right;font-family:var(--ff-mono);font-size:11.5px;color:var(--paper-3);line-height:1.9} .chart-no1__stats b{color:var(--paper);font-size:13px} /* tiered rows inside the standard chart table */ .chart-pos{font-family:var(--ff-disp);font-weight:800;font-size:22px;line-height:1;color:var(--paper)} .chart-pos--pack{font-size:14px;font-weight:700;color:var(--paper-3)} tr.chart-top10 td{padding-top:12px;padding-bottom:12px} tr.chart-top10 .chart-title{font-size:15px} tr.chart-top10 .art-img--thumb,tr.chart-top10 .art--thumb{width:44px;height:44px} .chart-break td{padding:5px 12px;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-4);background:var(--surface)} /* =================== end CHART MASTHEAD + COUNTDOWN =================== */