/* ===================================================================== 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) */ /* D123 "The Galley" - --surface-2 is ALIASED to the page ground in all four theme blocks, so a panel's fill dissolves and a block is announced by its rule instead of its box. --surface (the sidebar, the topbar, a hovered row) and --surface-3 (the lifted plane: secondary buttons, the active nav item) are kept. The retired panel tone survives as --surface-panel, which is NOT dead: the public voice (D113a) still boxes six of its own components and this batch does not touch a logged-out page, so those keep the old fill by name. */ --bg:#0d0c0a; --surface:#16140f; --surface-2:var(--bg); --surface-3:#252118; --surface-panel:#1c1a14; --line:#322d23; --line-2:#463f31; /* text (warm off-white) */ --paper:#f4efe4; --paper-2:#c4bda9; --paper-3:#908975; --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) */ /* D103 - certification metals. Gold aliases the existing trophy --patron rather than inventing a second gold; silver/platinum are both greys, separated by brightness. */ --cert-silver:#b9bcc4; --cert-platinum:#eef2f8; --cert-diamond:#8fe3ff; --era-tan:#d0c890; --era-tan-deep:#685c20; /* D105 - the 2001 site's palette (the story page) */ --fx-good:#5fb872; --fx-bad:#e2564a; /* D119 - effect figures on the event ledger */ --logo-shadow:.4; /* radius / elevation - D123 "The Galley": every corner is square and nothing floats. The retired values were 6/10/14/999px and two layered shadows. Kept as tokens rather than deleted so the ~200 component rules that reference them need no edit, and so a future direction can move the whole game again by moving these four lines. */ --r-sm:0; --r-md:0; --r-lg:0; --r-pill:0; --shadow-1:none; --shadow-2:none; /* 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:var(--bg); --surface-3:#fffdf7; --surface-panel:#f8f3e8; /* D123 - surface-2 aliased; the retired tone stays as --surface-panel for the public voice */ --line:#d8cfba; --line-2:#c3b8a0; --paper:#211d16; --paper-2:#4a4335; --paper-3:#696251; --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; --r-sm:0; --r-md:0; --r-lg:0; --r-pill:0; --shadow-1:none; --shadow-2:none; /* D123 */ --logo-shadow:.14; --cert-silver:#7b8189; --cert-platinum:#5c6672; --cert-diamond:#1d7fa3; /* D103 fix - was missing here: OS-light users got the dark metals */ --era-tan:#6b6020; --era-tan-deep:#8a7c3a; /* D105 */ --fx-good:#2f6b41; --fx-bad:#a8271b; /* D119 - effect figures: --good/--bad miss AA on cream */ } } :root[data-theme="light"]{ --bg:#e7e0d0; --surface:#f1ebdd; --surface-2:var(--bg); --surface-3:#fffdf7; --surface-panel:#f8f3e8; /* D123 - surface-2 aliased; the retired tone stays as --surface-panel for the public voice */ --line:#d8cfba; --line-2:#c3b8a0; --paper:#211d16; --paper-2:#4a4335; --paper-3:#696251; --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; --cert-silver:#7b8189; --cert-platinum:#5c6672; --cert-diamond:#1d7fa3; /* D103 - darkened for cream */ --era-tan:#6b6020; --era-tan-deep:#8a7c3a; /* D105 */ --fx-good:#2f6b41; --fx-bad:#a8271b; /* D119 - effect figures: --good/--bad miss AA on cream */ --r-sm:0; --r-md:0; --r-lg:0; --r-pill:0; --shadow-1:none; --shadow-2:none; /* D123 */ --logo-shadow:.14; } /* manual dark wins over a light OS preference */ :root[data-theme="dark"]{ --bg:#0d0c0a; --surface:#16140f; --surface-2:var(--bg); --surface-3:#252118; --surface-panel:#1c1a14; /* D123 - surface-2 aliased; the retired tone stays as --surface-panel for the public voice */ --line:#322d23; --line-2:#463f31; --paper:#f4efe4; --paper-2:#c4bda9; --paper-3:#908975; --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; /* D103 - certification metals. Gold aliases the existing trophy --patron rather than inventing a second gold; silver/platinum are both greys, separated by brightness. */ --cert-silver:#b9bcc4; --cert-platinum:#eef2f8; --cert-diamond:#8fe3ff; --era-tan:#d0c890; --era-tan-deep:#685c20; /* D105 - the 2001 site's palette (the story page) */ --fx-good:#5fb872; --fx-bad:#e2564a; /* D119 - effect figures on the event ledger */ --r-sm:0; --r-md:0; --r-lg:0; --r-pill:0; --shadow-1:none; --shadow-2:none; /* D123 */ --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} /* D112 - skip link: off-screen until focused, then a real accent control at the top-left. */ .skip-link{position:absolute;left:-9999px;top:0;z-index:100;font-family:var(--ff-disp);font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:12px 18px;border-radius:0 0 var(--r-sm) 0} .skip-link:focus{left:0} #main:focus{outline:none} /* ---------- brand marks ---------- */ .brand-link{display:flex;align-items:center;gap:9px;color:var(--paper);text-decoration:none} .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} .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} /* D125 - the rotated-square bullet is deleted from all 60 links. It was ornament on every row and the accent shape was the only work it did; the 2px left rule every link already reserves says the same thing in the form language the rest of the shell is written in. Active is now that rule PLUS ink weight, so it survives at a glance and in greyscale, and keyboard focus stays the accent outline ring, which is nothing like either. */ .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);font-weight:600;background:var(--surface-3);border-left-color:var(--accent)} .nav-link .label{display:flex;align-items:center;min-width:0} .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)} /* ---------- the nightly update, while it is running (D126) ---------- */ /* Chrome, not page content: it renders between the topbar and the page, so it never enters a page's own section stack. The WARN hue rides the 2px top rule and nothing else - Newsprint at 2px would read as a named section (D124's rule ladder) and the accent may not be spent on an informational note. The words stay in paper ink because the light theme's warn (#a17817) is 3.06:1 on cream: fine for a rule, which is a graphical object, and short of AA for an 11px label. No fill, no sides, no radius - the rule is the edge (The Galley). */ .world-update{border-top:2px solid var(--warn);padding:11px 24px 13px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .world-update__mark{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);white-space:nowrap;flex:none} .world-update__body{margin:0;font-size:13px;line-height:1.5;color:var(--paper-2);max-width:74ch;text-wrap:pretty} /* The public chrome centres its content in .wrap, which already carries the 24px gutter; inside it the strip drops its own so the rule starts on the same vertical as the page below it. */ .wrap>.world-update{padding-left:0;padding-right:0} @media (max-width:700px){ .world-update{padding:10px 16px 12px;gap:5px} .world-update__body{font-size:12.5px} } /* ---------- top stat bar ---------- */ /* D123 - gradient deleted: it was depth on a raised plane, and there is no raised plane now. */ .topbar{border-bottom:1px solid var(--line);background:var(--surface);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:var(--surface-3);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} /* overflow:hidden used to clip the cells to the rounded box; D123 put every radius at 0, so all it still did was swallow the last figure whole. The bar wraps instead - it never has to choose between hiding a number and pushing the page sideways. */ .stat-bar{display:flex;flex-wrap:wrap;align-items:stretch;border:1px solid var(--line);border-radius:var(--r-md);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 drops to its own 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} /* The four figures were one 460px row inside a 342px phone: cash ran 118px past the edge and read "£1," with its label gone, behind a scroller nobody can see. They wrap onto a second row instead, and the separator rotates with them - a left rule reappears at the page margin wherever a row starts, so on a wrapped bar the cells take the top hairline that a wrapped grid of figures already uses (see 6, the full-width strips). */ .topbar .stat-bar{order:2;max-width:100%;border-left:0;column-gap:20px} .topbar .stat{border-left:0;border-top:1px solid var(--line);padding:6px 0 5px} .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} /* D130 - the wrap. Five small buttons on another band's profile came to 513px inside a 312px column and pushed the most linked page in the game 177px sideways under a thumb. Your own profile shows three and fits, which is why it survived every desk pass. */ .page-actions{display:flex;flex-wrap:wrap;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)} /* D137 - a select option the game is advising against, not forbidding (a tour venue far bigger than the band's crowd). Option colour is honoured on desktop Chrome/Firefox and ignored by the native pickers on iOS and Android, so the option's own TEXT carries the advice and this rule is the sighted-desktop bonus, never the message. */ .select option.opt-dim{color:var(--paper-4)} .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);box-shadow:none} /* D123 - gradient deleted */ /* 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%)} /* D123 - gradient deleted; the accent moved onto the block rule */ .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-3);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-3);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} /* D123 - the hovered row's fill and the "this is you" tint are deleted, not overridden: a row whose outer inset is zero cannot carry one (The Galley, section 13, where both states are carried by ink and a rule instead). The accent ink below is the half of the old treatment that still works, so it stays here. */ .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);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)} .chip--bad{background:color-mix(in srgb,var(--bad) 14%,var(--surface-3));border-color:color-mix(in srgb,var(--bad) 50%,var(--line-2));color:var(--bad)} /* ---------- alerts ---------- */ .alert{padding:11px 15px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);font-size:13.5px;color:var(--paper-2);display:flex;align-items:center;gap:12px} /* D123 - the coloured left rail is deleted, not overridden: it rotates to a top rule (The Galley). */ .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 ---------- */ /* D123 - a modal is the one thing that genuinely floats, because the page behind it is still there. It keeps a fill and an edge, squared, and takes the block rule (see The Galley). */ .dialog{border:1px solid var(--line-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} /* D125 - the hollow rotated square above every empty state is deleted. An empty state in this language is the title, the line under it and the room around them; the block above has already announced itself with a rule, so nothing has to draw a mark to stand in. */ .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;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} /* D123 - the hovered box's brighter edge and the chosen box's fill are deleted, not overridden: both went with the box, and section 13 marks the row with a rule instead. */ .opt-card.is-selected{border-color:var(--accent)} /* D123 - a KEPT circle. Every other corner in the game squares, but a circle means "choose one of these" and a square means "choose any of these" in every operating system there is, and a visual direction does not get to overrule an affordance. */ .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) ---------- */ /* D123 - a KEPT gradient. This is not a surface: it is the diagonal hatch that stands for artwork that does not exist yet, the way a printed page hatches a missing picture. */ .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:var(--surface)} /* D123 - gradient deleted */ .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:var(--bg)} /* D123 - the radial haze deleted (kit page only; the live hero is .home-hero, de-hazed in D113a) */ .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:var(--bg)} /* D123 - the radial haze deleted */ /* ===================================================================== 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-mark, D114) + 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:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid var(--line-2);background:transparent;color:var(--paper-3);border-radius:var(--r-sm);cursor:pointer;font-size:16px;line-height:1} /* D115 - a quiet utility, not a third button */ .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:880px){.home-menu{display:block}} /* D115 - the fold moved up from 720: five links plus the account pair overflow a 760px bar */ /* --- public bar --- */ /* D113a - solid bar, no glass: the blurred translucent header was the first of the generic tells. */ /* D115 - the bar reads as three groups. Inside a group the gap is tight (2px between links, 8px between the account pair); between groups it is generous (20px) with a hairline before the account pair. Log in is the secondary button so the pair is one decision at one height; the theme toggle is a bare outline at the seam. Nothing in the bar wraps. */ .home-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:12px 28px;min-height:64px;background:var(--bg);border-bottom:1px solid var(--line-2)} .home-nav__links{display:flex;align-items:center;gap:20px} .home-nav__link{font-family:var(--ff-disp);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-2);padding:10px 12px;margin:0 -9px;border-radius:var(--r-sm);white-space:nowrap} .home-nav__link + .home-nav__link{margin-left:-6px} .home-nav__link:hover{color:var(--paper);background:var(--surface-3)} .home-nav__account{display:flex;align-items:center;gap:8px;padding-left:20px;border-left:1px solid var(--line-2)} .home-nav .btn{white-space:nowrap;font-size:14px;padding:11px 16px;line-height:1} .home-nav .home-nav__login{background:transparent} @media (max-width:880px){ .home-nav__hide{display:none} /* D115 - the fold: a 13px ticket, tighter seams, smaller buttons; the bar must never wrap or clip */ .home-nav{padding:12px 16px;gap:14px} .home-nav__links{gap:12px} .home-nav .logo-mark{font-size:13px} .home-nav__account{padding-left:12px} .home-nav .btn{padding:11px 12px} } @media (max-width:640px){.home-nav .home-nav__login{display:none}} /* Log in lives in the More menu from here down */ @media (max-width:520px){.home-nav__hide-xs{display:none}} /* D112 - History holds on until phone width */ /* 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){ /* D112 - tap targets. These were ~33px tall against the 44px minimum, with Log in and Create account 5px apart, so a thumb regularly caught the wrong one. 13px of vertical padding on 14px/1 text clears 44px, and the gap doubles. The row still fits: History folds out at this width (home-nav__hide-xs) and the More menu carries it. */ .home-nav{padding:10px 12px;gap:10px} .home-nav__links{gap:12px} .home-nav__link{padding:13px 10px;margin:0} .home-nav .btn{padding:13px 14px} .home-nav__account{padding-left:0;border-left:0;gap:8px} .home-theme{width:44px;height:44px} } /* D113b - at 390 the row still clipped its own "More" menu (the finish review caught "MO" at the edge): tighter gaps and smaller type below 400px keep logo, toggle, Log in, Create account and More on one row with every tap target intact. */ @media (max-width:400px){ .home-nav{padding:10px 8px;gap:6px} .home-nav__links{gap:6px} .home-nav__link{padding:13px 6px;font-size:13px} .home-nav .btn{padding:13px 10px;font-size:13px} .home-nav .logo-mark{font-size:12px} } /* --- hero --- */ /* D113a - the hero lost its two radial glows (accent haze above, surface haze below) and took the public heading voice (--ff-head, set on body.public). Same composition, plain ground. */ .home-hero{position:relative;overflow:hidden;padding:clamp(48px,8vw,96px) 26px clamp(40px,6vw,72px);background:var(--bg)} .home-hero__in{max-width:960px;margin:0 auto;text-align:center;position:relative} .home-hero__h1{font-family:var(--ff-head,var(--ff-disp));font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.005em;margin:0;font-size:clamp(38px,7vw,88px);color:var(--paper);text-wrap:balance} .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:22px 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:12.5px;letter-spacing:.02em;color:var(--paper-3);margin-top:18px} /* --- live stat strip: this world's own numbers, four ruled cells (label over monospaced figure). Captions in --paper-3 (4.67:1 on --surface-2 in both themes) where --paper-4 sat at 2.5:1. --- */ /* D113a - the four figures stay (they are the live proof) but the rounded box of cells is now a ruled row: two rules, hairlines between, Barlow numerals. The hero-metric template is gone. */ .home-stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:960px;margin:clamp(32px,5vw,52px) auto 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)} .home-stat{padding:16px 12px 14px;text-align:center;border-left:1px solid var(--line)} .home-stat:first-child{border-left:0} .home-stat__v{font-family:var(--ff-disp);font-weight:800;font-variant-numeric:tabular-nums;font-size:clamp(26px,3.4vw,38px);color:var(--paper);line-height:1} .home-stat__k{font-family:var(--ff-mono);font-size:12px;letter-spacing:.02em;color:var(--paper-3);margin-top:6px} .home-live{display:inline-block;width:8px;height:8px;border-radius:50%;/* D123 - a KEPT circle: a lamp, on the public page, which does not move */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-live{animation:none}} @media (max-width:640px){.home-stats{grid-template-columns:repeat(2,1fr)}.home-stat:nth-child(3){border-left:0}.home-stat:nth-child(n+3){border-top:1px solid var(--line)}} /* --- section shell --- */ .home-sec{max-width:1180px;margin:0 auto;padding:clamp(48px,7vw,88px) 26px 0} /* D113a - no eyebrow rule any more: the section heading carries its own weight, in the public heading voice, with one word in the accent where the copy earns it. */ .home-sec__h{font-family:var(--ff-head,var(--ff-disp));font-weight:400;font-size:clamp(26px,3.6vw,40px);text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin:0;color:var(--paper);max-width:24ch;text-wrap:balance} .home-sec__h em{font-style:normal;color:var(--accent)} .home-sec__lead{color:var(--paper-2);font-size:16px;margin:14px 0 0;max-width:62ch} /* --- "on the charts now" (D112): the real Top 10 as ONE full-width ruled table. The first cut had a side card for the #1 album and a thumbnail column; rendered, the card floated over 500px of nothing and the thumbnails were ten empty grey squares. And every title and band fell through to the global red link colour - twenty-odd red strings on a page whose rule is one red voice. Titles now sit in paper, bands in the secondary ink, red only on hover; the album #1 lives in the caption. --- */ .home-chart{margin-top:34px} .home-chart .empty{padding:28px 16px;border-top:2px solid var(--paper)} /* D121 - the front-page chart is a RULED LIST, not a table: a 2px paper rule on top and hairlines between rows, per the public voice. Replaces a 4-column dense table that went ragged in the position column, carried no artwork, and overflowed a phone. */ .home-chart__list{list-style:none;margin:0;padding:0;border-top:2px solid var(--paper);counter-reset:none} .home-chart__row{display:grid;grid-template-columns:54px 56px minmax(0,1fr) 44px 66px;align-items:center; gap:0 16px;padding:11px 4px;border-bottom:1px solid var(--line)} .home-chart__row:hover{background:var(--surface)} /* the numeral sits over its last position in a FIXED track, both right-aligned, so the column edge stays straight from 1 to 10 - the inline pair it replaces could not */ .home-chart__pos{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1} .home-chart__posn{font-family:var(--ff-disp);font-weight:800;font-size:34px;line-height:.85;font-variant-numeric:tabular-nums;color:var(--paper)} .home-chart__posl{font-family:var(--ff-mono);font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--paper-3)} .home-chart__art{width:56px;height:56px;object-fit:cover;border:1px solid var(--line-2);border-radius:0;display:block} /* D123 - the same KEPT hatch, on the public homepage, which does not move. */ .home-chart__art--none{background-image:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 11px,var(--surface-3) 11px,var(--surface-3) 22px)} .home-chart__meta{min-width:0} .home-chart__title{display:block;font-family:var(--ff-disp);font-weight:700;font-size:17px;letter-spacing:.01em;text-transform:uppercase;color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .home-chart__by{font-size:13.5px;color:var(--paper-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .home-chart__band{color:var(--paper-2);font-weight:500} .home-chart__row:hover .home-chart__title{color:var(--accent)} .home-chart__title:hover,.home-chart__band:hover{color:var(--accent)} .home-chart__move{font-size:12.5px;font-weight:500;text-align:center;letter-spacing:.04em} .home-chart__wks{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15} .home-chart__wksn{font-family:var(--ff-mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--paper-2)} .home-chart__wksk{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-4)} .home-chart__wkin{display:none} /* Phone: no table, so there is nothing to scroll sideways. The movement flag keeps its OWN track - an earlier cut shared the title's cell and the two overlapped. Weeks folds into the byline rather than being dropped. */ @media (max-width:640px){ .home-chart__row{grid-template-columns:40px 52px minmax(0,1fr) auto;gap:0 12px;padding:10px 2px} .home-chart__posn{font-size:25px} .home-chart__posl{font-size:10px} .home-chart__art{width:52px;height:52px} .home-chart__title{font-size:15px} .home-chart__by{font-size:12.5px} .home-chart__move{font-size:11.5px;min-width:22px} .home-chart__wks{display:none} .home-chart__wkin{display:inline;color:var(--paper-3)} } .home-chart__cap{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;color:var(--paper-3)} .home-chart__links{display:flex;gap:18px;flex-wrap:wrap} .home-chart__cap a{color:var(--accent)} /* --- feature list (D113a: was a 3x2 grid of same-size emoji cards; now a ruled two-column list) --- */ .home-feats{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 44px;border-top:2px solid var(--paper)} @media (max-width:720px){.home-feats{grid-template-columns:1fr}} .home-feat{padding:18px 0 20px;border-bottom:1px solid var(--line-2)} .home-feat__h{font-family:var(--ff-disp);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.02em;color:var(--paper);margin:0;line-height:1.05} .home-feat__b{color:var(--paper-2);font-size:15px;line-height:1.55;margin:8px 0 0;max-width:52ch} /* --- 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}} /* D127 - a real