/* CONSOLE — the site-wide instrument theme. ───────────────────────────────────────────────────────────────────────────────────────────── ONE file, loaded LAST on every page. It does not replace chain.css, signal.css, desktop-tokens.css, tokens.css or any of the -chain.css bridges — it re-points the tokens they already read and adds the hardware character on top of the classes they already emit. Why tokens rather than rewrites: every page in this repo pulls its colour from a named custom property (--cn-* on the Chain pages, --bg/--panel/--text/--line on the self-contained ones, --sig-accent on the Signal pages). Re-pointing those is the same move chain.css already made for --lime, and it is why one file can carry all pages without touching their markup. The look: a cold graphite console. Navy-black grounds, silkscreen-cream legends, amber for what is live and red-orange for lamps, depth reserved for instruments (display windows, wells, rockers, lamps) and never spent on the list chrome around them. Inactive things recede by TONE ONLY — never by blurring anything that carries text. Load order matters: this must be the last stylesheet in on each page. See APPLY.md. */ /* ══ 1 · GROUND ═══════════════════════════════════════════════════════════════════════════════ The console palette, declared once. Everything below is derived from these six values. */ :root{ --co-black: #030507; /* the viewer — the only true black on the page */ --co-chassis: #0D1116; /* the case */ --co-panel: #12171E; /* the face controls sit on */ --co-well: #0B0F14; /* recessed bays inside the panel */ --co-glass: #06090D; /* display windows */ --co-ink: #EFE7D6; /* silkscreen cream */ --co-amber: #E8863A; /* live / selected */ --co-amber-hi: #F6C79C; --co-lamp: #FF7A3C; /* LEDs only */ --co-lamp-off: rgba(104,60,38,0.40); --co-teal: #5AAE9E; /* the one secondary — sources, neutrals, "measured" */ --co-edge: rgba(239,231,214,0.055); /* the hairline that defines a face */ --co-edge-strong: rgba(239,231,214,0.10); /* Alias. Seven rules in this file were written against --co-edge-2, which was never defined anywhere reachable from studio.html — an undefined custom property makes the whole `border:1px solid var(...)` declaration invalid, so all seven borders silently painted NOTHING: the Advanced drawer's top rule, the reset-module divider, the dial/lamp/frame wells, the action buttons and the stat cards were all edgeless. Caught by an audit against the design prototype, not by eye — a missing hairline reads as "slightly off", not as a bug, which is exactly why it survived several rounds of visual comparison. */ --co-edge-2: var(--co-edge-strong); --co-lift: rgba(214,231,250,0.045); /* a face catching light */ --co-lift-on: rgba(214,231,250,0.085); --co-shell: radial-gradient(120% 90% at 62% 45%, #1A222C 0%, #12171E 42%, #070A0D 100%); } /* ══ 2 · RETOKEN ══════════════════════════════════════════════════════════════════════════════ Each block re-points one existing token family. Nothing here is a new name for a page to learn. */ /* 2a · CHAIN (index, studio, about, approach, credits, custom, gallery, mono, print, privacy) */ :root{ --cn-page: var(--co-chassis); --cn-shell: var(--co-shell); --cn-well: var(--co-well); --cn-ink: var(--co-ink); --cn-amber: var(--co-amber); --cn-amber-hi: #F5A44E; --cn-ink-on-amber: #0D1116; --cn-ink-on-white: #0D1116; --cn-surf: rgba(214,231,250,0.045); --cn-surf-off: rgba(214,231,250,0.022); --cn-surf-btn: rgba(214,231,250,0.07); --cn-surf-track:rgba(214,231,250,0.12); --cn-line-off: rgba(239,231,214,0.045); --cn-line-head: rgba(239,231,214,0.07); --cn-line-div: rgba(239,231,214,0.09); --cn-line: rgba(239,231,214,0.09); --cn-line-2: rgba(239,231,214,0.10); --cn-line-btn: rgba(239,231,214,0.12); --cn-line-chip: rgba(239,231,214,0.18); /* The chain ramp: cold at module 01, amber at module 28, every module's accent interpolated between the two by its position. It is the one piece of colour in the app that carries information — you can tell roughly where you are in the process without reading a word. studio.html's own CHAIN_GRAD_A has always been #B9C4C2; this said #7E8C93, so the JS-drawn tints and the CSS-drawn ones were walking two different ramps and the early modules came out a half-step colder in one than in the other. One ramp now. */ --cn-grad-a: #B9C4C2; --cn-grad-b: var(--co-amber); } /* the ink ladder, restruck in cream */ :root{ --cn-t-16: rgba(239,231,214,0.16); --cn-t-22: rgba(239,231,214,0.22); --cn-t-30: rgba(239,231,214,0.30); --cn-t-35: rgba(239,231,214,0.35); --cn-t-40: rgba(239,231,214,0.40); --cn-t-42: rgba(239,231,214,0.44); --cn-t-45: rgba(239,231,214,0.48); --cn-t-50: rgba(239,231,214,0.52); --cn-t-55: rgba(239,231,214,0.56); --cn-t-60: rgba(239,231,214,0.62); --cn-t-62: rgba(239,231,214,0.64); --cn-t-68: rgba(239,231,214,0.68); --cn-t-70: rgba(239,231,214,0.72); --cn-t-72: rgba(239,231,214,0.74); --cn-t-75: rgba(239,231,214,0.78); --cn-t-80: rgba(239,231,214,0.82); --cn-t-85: rgba(239,231,214,0.86); --cn-t-90: rgba(239,231,214,0.90); --cn-t-92: rgba(239,231,214,0.92); --cn-t-12: rgba(239,231,214,0.12); } /* 2b · SIGNAL + DESKTOP TOKENS (signal.html, restore.html, and the shared shell on every page) */ :root{ --sig-accent: var(--co-amber); --bg: var(--co-chassis); --surface: var(--co-panel); --card: var(--co-panel); --card-2: #171D25; --border: var(--co-edge); --border-strong: var(--co-edge-strong); --text: var(--co-ink); --text-2: rgba(239,231,214,0.62); --text-3: rgba(239,231,214,0.40); --text-4: rgba(239,231,214,0.28); --lime: var(--co-amber); --lime-ink: var(--co-amber); --lime-wash: color-mix(in srgb, var(--co-amber) 8%, transparent); --lime-line: color-mix(in srgb, var(--co-amber) 45%, transparent); } /* 2c · THE SELF-CONTAINED PAGES. m.html, m2.html, microfilm.html, microfilm2.html, autopilot.html, compose.html, lightmap.html, offline.html and scope-window.html each declare their own :root. Because this file is linked AFTER their inline