/* ========================================================================== Hotbox University — Design tokens -------------------------------------------------------------------------- The world: the logo. Royal blue and white on a deep blue-black night, the way the mark sits on its badge. One light (the blue: the crest, the actions, the big numbers), white type, silver where the brand's steel lives, and foil only on the objects you win (the Operator Card). Money green and signal red keep their jobs as meaning, never as decoration. Every value on the site comes from here. (Round 27: the volt/graphite world was retired for this.) R39b (aesthetic director): navy steps, action blue for filled controls, one focus ring, one glass recipe, a radius ladder and a timing ladder. The full system and its before/after inventory: research-reports/aesthetic-system.md. ========================================================================== */ :root { color-scheme: dark; /* ---- Materials: graphite, in tonal steps ---- */ /* R39b: the steps moved from blue-black graphite to the world's navy, so a card in a lesson and a glass panel over the campus read as one material. */ --graphite: #050c1f; /* the canvas: navy night (name kept so nothing downstream moves) */ --graphite-1: #0a1630; /* panels */ --graphite-2: #0f1e3f; /* raised panels, inputs */ --graphite-3: #182b54; /* pressed fills, meters, tracks */ --ink: #030814; /* the deeper scenes */ --white: #ffffff; /* primary text: clean white, as asked */ --steel: #b9c3dc; /* secondary text: light enough to read a whole paragraph of */ --steel-dim: #8794b4; /* tertiary text: labels and footnotes (4.9:1 on a raised navy panel; was #7f8aa8 at 4.3) */ --chrome: linear-gradient(180deg, #ffffff, #ffffff); /* the shaded chrome was retired: big type is clean white */ --paper: #f3efe6; /* the receipt */ --paper-ink: #1d1f22; --paper-faint: #8a857a; --rule: rgba(160, 200, 255, 0.10); /* hairlines carry a breath of blue, so they belong to the navy */ --rule-strong: rgba(160, 200, 255, 0.20); --glass: rgba(6, 16, 39, 0.74); --glass-blur: saturate(140%) blur(18px); /* ---- The one light: the logo blue (variable names kept as --volt so every component follows) ---- */ --volt: #3b82ff; --volt-deep: #0040b0; /* the badge blue of the mark: fills, the price panel */ --volt-hot: #8ab4ff; /* blue as small text on the night */ --volt-rgb: 59, 130, 255; --on-volt: #ffffff; /* * ---- Action blue (R39b): the fill behind white words. ---- * --volt (#3b82ff) is a light: glows, lines, LEDs. Under white text it is only * 3.6:1, so every filled control (primary button, selected segment, pressed * toggle, chosen chip) uses --action instead: 4.7:1 at the label, AA. * The world's two blues (game.css --hu-blue-400/600) are the ends of its gradient. */ --action: #1a6cf5; --action-top: #3a8bff; --action-bottom: #1259d8; --action-hover: #2276ff; --action-fill: linear-gradient(180deg, var(--action-top), var(--action) 55%, var(--action-bottom)); --action-rgb: 26, 108, 245; /* Holographic foil: objects only, never the page. */ --holo: linear-gradient(110deg, #ffffff 0%, #8ab4ff 18%, #3b82ff 36%, #c9d7ff 54%, #0040b0 72%, #ffffff 90%); /* * ---- Meaning: the instrument palette ---- * Four lights, each with one job, so a number's color tells you what it is * before you read it. Volt = do this (actions, verdicts). Money green = money * in, a win, a target hit. Signal red = money out, a loss, the redline, a * gate. Instrument white = the fact itself: every plain number is white, not * gray, and lit. Nothing else gets a color. */ --money: #3ddc84; --money-hot: #7df5ad; /* small green text on graphite */ --money-rgb: 61, 220, 132; --red: #ff3d4a; --red-hot: #ff7a83; /* small red text on graphite */ --red-rgb: 255, 61, 74; --instrument: #ffffff; /* the numbers */ /* Scan blue: the sensor light. Data being taken in: a field in focus, a reading being computed, a lookup running. Never a verdict. */ --scan: #4dd2ff; --scan-hot: #8fe5ff; --scan-rgb: 77, 210, 255; --instrument-glow: 0 0 10px rgba(255, 255, 255, 0.18); /* ---- Status (verdicts and pills) ---- */ --ok: var(--money); --warn: #fbbf24; --bad: var(--red); /* ---- Aliases the shared components use ---- */ --bg-0: var(--graphite); --bg-1: var(--graphite-1); --bg-2: var(--graphite-2); --bg-3: var(--graphite-3); --bg-soft: var(--graphite-1); --line: var(--rule); --line-strong: var(--rule-strong); --line-top: rgba(255, 255, 255, 0.10); --fg: var(--white); --fg-dim: var(--steel); --fg-faint: var(--steel-dim); --neon: var(--volt); --neon-hot: var(--volt-hot); --neon-rgb: var(--volt-rgb); --neon-glow: 0 0 14px rgba(59, 130, 255, 0.45); --accent: var(--neon); --accent-hover: var(--action-hover); --accent-hot: var(--neon-hot); --accent-soft: rgba(59, 130, 255, 0.16); --accent-rgb: var(--neon-rgb); --on-accent: #ffffff; --on-light: var(--ink); --glow-accent: var(--neon-glow); /* ---- Type ---- */ /* The Loading Screen guide's stack: Inter Tight for display, Inter for UI, Space Grotesk for numbers and counters. */ --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif; --font-display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif; --font-mono: "Space Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif; --font-dot: "Space Grotesk", "Inter", sans-serif; /* numerals: serials, levels, counters */ --font-serif: var(--font-sans); --display-stretch: 82%; --signage-stretch: 70%; --wide-stretch: 112%; /* Type scale (R39b audit: these eight carry ~80% of all text; new work uses only them). 11.5 / 12.8 / 14.4 / 17 / 20 / 25.6 / 38.4 / 57.6 px. --t-3xs is the floor for tracked caps only. R39c: the floor is exactly 11px (was 10.88). Nothing a person has to read goes below it; the only smaller text on the site is the Operator Card's decorative microprint (aria-hidden). */ --t-3xs: 0.6875rem; --t-2xs: 0.72rem; --t-xs: 0.8rem; --t-sm: 0.9rem; --t-md: 1.0625rem; --t-lg: 1.25rem; --t-xl: 1.6rem; --t-2xl: 2.4rem; --t-3xl: 3.6rem; --t-4xl: 7rem; /* ---- Spacing (8px scale) ---- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 5rem; --s-9: 8rem; /* ---- Shape: machined. Softer than steel, harder than a toy. ---- R39b ladder, nested radii shrink by the padding between them: 4 tag · 8 key/control · 12 tile/input · 16 card · 22 panel/sheet · pill. */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; --gutter: clamp(20px, 5vw, 56px); --measure: 60ch; --container: 1240px; /* ---- Elevation: one light, above and slightly left. Layered, neutral, never black-on-black mud. ---- */ --shadow-hue: 240 6% 3%; --shadow-sm: 0.5px 1px 1px hsl(var(--shadow-hue) / 0.5); --shadow-md: 1px 2px 2px hsl(var(--shadow-hue) / 0.3), 2px 4px 4px hsl(var(--shadow-hue) / 0.3), 3px 6px 6px hsl(var(--shadow-hue) / 0.3); --shadow-lg: 1px 2px 2px hsl(var(--shadow-hue) / 0.2), 2px 4px 4px hsl(var(--shadow-hue) / 0.2), 4px 8px 8px hsl(var(--shadow-hue) / 0.2), 8px 16px 16px hsl(var(--shadow-hue) / 0.2), 16px 32px 32px hsl(var(--shadow-hue) / 0.2); /* R39c: the surface hairline is --hairline. --edge stays as an alias for older area rules, but areas also use --edge for a single color (the lesson callouts' lit edge, the Arsenal's border color), and wherever they did, a .card inside lost its hairline (a color is not a valid background-image layer). Shared surfaces read --hairline, which nobody overrides by accident. */ --hairline: linear-gradient(180deg, rgba(190, 220, 255, 0.22), rgba(160, 200, 255, 0.07) 40%, rgba(160, 200, 255, 0.04)); --edge: var(--hairline); --edge-strong: linear-gradient(180deg, rgba(200, 225, 255, 0.34), rgba(160, 200, 255, 0.09) 40%, rgba(160, 200, 255, 0.05)); --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.08); --shadow-card: var(--inner-light), var(--shadow-md); --shadow-float: var(--inner-light), var(--shadow-lg); --shadow-paper: 0 2px 0 rgba(0, 0, 0, 0.25), 0 30px 60px -16px rgba(0, 0, 0, 0.7); --keycap: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.35); --glass-edge: rgba(160, 200, 255, 0.16); --glass-top: rgba(200, 225, 255, 0.30); /* ---- Glass, done once (R39b): the material of every panel over the world. ---- Tint, blur with saturation (so the world's color survives), a hairline that is brighter on top (light from above), a faint sheen, and one soft drop shadow. */ --glass-tint: rgba(6, 16, 39, 0.78); --glass-tint-raised: rgba(12, 28, 62, 0.72); --glass-filter: saturate(150%) blur(18px); --glass-line: rgba(144, 195, 255, 0.24); --glass-line-top: rgba(190, 220, 255, 0.42); --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 120px); --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 80px -30px rgba(0, 0, 0, 0.85); /* ---- Focus (R39b): one ring everywhere. A 2px ice-blue line with a 2px gap, so it reads on navy glass, on the blue button and on a photo alike (9:1 on navy). ---- */ --focus: #9ccaff; --focus-ring: 2px solid var(--focus); --focus-offset: 2px; --focus-halo: 0 0 0 3px rgba(56, 165, 255, 0.30); /* for fields: a halo instead of an offset line */ /* ---- Motion ---- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease: cubic-bezier(0.2, 0, 0, 1); --ease-inout: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* R39b timing ladder: press 90 · state 140 · move 240 · reveal 600. Press is quick down and the release eases back, the way a real key feels. */ --ease-press: cubic-bezier(0.3, 0, 0.4, 1); --dur-press: 90ms; --dur-fast: 140ms; --dur-med: 240ms; --dur-slow: 600ms; --lift: translateY(-1px); --press: scale(0.97); --stagger: 40ms; } /* The angle the border light travels (animatable custom property). */ @property --angle { syntax: ''; inherits: false; initial-value: 0deg; } /* ---- Volt scene: the prize moment. Acid field, ink type, inverted controls. ---- */ .volt { --bg-0: var(--volt); --bg-1: #dcff33; --bg-2: #e6ff66; --bg-3: #c4ef00; --fg: var(--ink); --fg-dim: #2f3310; --fg-faint: #5a5f22; --line: rgba(11, 11, 14, 0.14); --line-strong: rgba(11, 11, 14, 0.28); --rule: rgba(11, 11, 14, 0.14); --rule-strong: rgba(11, 11, 14, 0.28); --neon: var(--ink); --neon-hot: var(--ink); --neon-rgb: 11, 11, 14; --accent: var(--ink); --accent-hover: #26262c; --accent-hot: var(--ink); --accent-soft: rgba(11, 11, 14, 0.12); --on-accent: var(--volt); --hairline: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(11, 11, 14, 0.08) 40%, rgba(11, 11, 14, 0.14)); --edge: var(--hairline); --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.5); --shadow-hue: 72 60% 25%; --keycap: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.2); --glass-edge: rgba(11, 11, 14, 0.18); --glass-top: rgba(255, 255, 255, 0.5); color-scheme: light; background: var(--bg-0); color: var(--fg); }