/* app.css — index.html's STRUCTURE layer. Split out of a 268 KB single-file index.html, and restructured again on 2026-08-19 as part of the Darkroom retheme. Four files now, with one job each, loaded in this order: tokens.css the design system — palette, type, space, motion brand.css utilities for the drawn assets in /static/brand/ app.css THIS FILE — structure, mechanics, states, a11y darkroom.css the design: what everything looks like adultswim.css the one alternate theme Two blocks left this file in that pass and are not coming back: • The 1,124-line Adult Swim theme moved to adultswim.css. Every read of this file used to be 45% a theme nobody was looking at, and a base-layer edit could silently collide with a theme-only selector. • PHASE E — the 600-line corrective design layer written over the previous direction — was DELETED rather than left underneath darkroom.css. Four stacked passes disagreeing about the same component is how this file got to 3,600 lines; adding a fifth with a new palette would have been the same mistake. The handful of rules in it that were structural rather than decorative (the .cwgrid/.nowgrid scrollbar suppression, two stray backdrop-filters, the .np-state treatment) were carried into darkroom.css by name, with the reasons written down there. What remains here is the part that is true regardless of how the site looks: layout, positioning, overflow and scroll behaviour, overlay and focus mechanics, ARIA-driven states, and the responsive breakpoints. If a rule here only says what colour or shape something is, it belongs in darkroom.css. Cached independently of the HTML: index.html is served no-cache (it changes every deploy and must revalidate), while this is served with a long max-age, so a deploy that only touches markup no longer re-downloads the CSS. */ /* The swappable backdrop system (Nocturne dot-grid stage, the retired Canopy forest, and the [data-atmos] switch between them) has been removed along with the theme picker. The one backdrop now is the ambient jewel glow in tokens.css (.aurora-sky). Nothing here paints the background any more. */ /* ── header nav ────────────────────────────────────────────────────────── Watch / Read / Listen. These were three full-width tiles ("doors") sitting at the top of the CONTENT column, which meant the first thing a member saw below the hero was navigation rather than their own library — and the three big "Request →" pills on them were three of the five competing request affordances the page used to have. They are navigation, so they are in the nav. The whole .doors/.door/.door-main/.door-req block is gone with them; nothing else referenced it. */ .topnav{display:flex; align-items:center; gap:2px; flex:none;} .navlink{position:relative; padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-pill); color:var(--ink-dim); font-size:var(--t-meta); font-weight:600; text-decoration:none; white-space:nowrap; transition:color .18s var(--ease), background .18s var(--ease);} .navlink:hover{color:var(--ink); background:color-mix(in srgb, var(--accent-base) 12%, transparent);} .navlink:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px;} /* accent underline that wipes in on hover — theme-reactive, sits under the pill */ .navlink::after{content:""; position:absolute; left:14px; right:14px; bottom:5px; height:1.5px; border-radius:2px; background:linear-gradient(90deg,var(--accent-base),var(--amber-base)); transform:scaleX(0); transform-origin:left center; transition:transform .26s var(--ease-standard);} .navlink:hover::after, .navlink:focus-visible::after{transform:scaleX(1);} @media(prefers-reduced-motion:reduce){.navlink::after{transition:none;}} /* Below 900px the wordmark + nav + controls stop fitting on one line. The nav is the part that survives collapse best — Watch is reachable from the hero and the catalog button, Read/Listen from the Request chooser's siblings — so it is what folds away first, before the search pill (640px) and long before anything in .topright. */ @media(max-width:900px){ .topnav{display:none;} } /* ── unified components (UI pass A) ────────────────────────────────────── Defined once here; every feature-specific class below (.cap, .who, .lgen, .ck, .syn-more, .sstate, .lbtn, .pv-btn, .libcontrols input/select, login inputs, .lb/.lbox/.loginbox/.pv-box) is wired to reuse these rather than reinventing padding/radius/shadow — see each section's comment below for how. Semantic color overrides (e.g. genre labels staying --accent-2) are kept as small deltas after the shared rule, per the plan. */ /* eyebrow — the one uppercase-micro-label treatment, for things that really are micro-labels: stat captions, spec keys, genre tags, status words. NOT for section headings — the rail headings used to ride this rule and were illegible as structure; see .railhead .cap further down. */ .eyebrow, .cap, .npc .who, .syn-g, .lgen, .crow .ck, .storage .ck, .roadmap .ck, .sname .sstate, .syn-more{ font-size:var(--t-eyebrow); letter-spacing:.28em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0; } /* Nocturne eyebrow variant — the mockup's own neon-gradient-clipped label treatment (its .eyebrow.neon), for the one or two spots per view where an eyebrow IS the brand moment (the gate's "Media Forest" label) rather than a quiet section header. Additive: everything above still applies (size/tracking/weight), this only swaps the color to the gradient. */ .eyebrow.neon{background:var(--neon); -webkit-background-clip:text; background-clip:text; color:transparent;} .syn-g, .lgen, .crow .ck, .storage .ck, .roadmap .ck, .syn-more{ color:var(--accent-2); } /* btn — one button system, three tiers. plain outline + ink-dim text everything ordinary wire .btn--accent, cyan outline important, but not THE action here neon gradient fill the one primary action on a surface The .authbtn / .authbtn-in / .btn--ghost classes that used to be wired into these selectors are gone: renderAuthBox() was rewritten to emit `.btn.btn--accent` and `.avatar`, and nothing has emitted an .authbtn since — the rules survived as an unreferenced third spelling of tiers that already existed. (Checked against every class string in index.html, app.js and the three member pages before deleting.) Which elements get neon: .hero-play (the lead hero slice's Play), `button.lbtn` (the two real