/* ============================================================================ CONSOLATION SYSTEMS — Foundation tokens A dark-first, cinematic, restrained system for an independent software studio. Cold near-black ground, one warm amber light. IBM Plex Sans + Mono. Tiered architecture: 1. PRIMITIVE — the raw cold neutral ramp + the single amber scale (+ 2 cold status hues) 2. SEMANTIC — roles (bg, layer, text, border, accent, focus) named by role, not hue, mapped to the primitives. One face: amber present as the one warm light. Built in OKLCH for perceptually even steps. Validate text contrast with APCA. ============================================================================ */ /* ----- FONTS -------------------------------------------------------------- */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/IBMPlexSans-Light.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); } :root { /* ========================================================================== TIER 1 — PRIMITIVES ========================================================================== */ /* COLD NEUTRAL RAMP. Near-black, through deep blue-grey, to a cold fog. 12 perceptually even steps. Hue tuned to the master image: a petrol-teal cold, NOT indigo. It drifts as the photo does — darker steps bluer (~233, the water), lighter steps cooler-teal (~222, the fog). Lightness + chroma unchanged from v1, so all APCA/contrast results hold; only hue moved (~25). Re-sampled from hero.jpg / visitor.jpg. */ --n-1000: oklch(0.145 0.014 233); /* void — the deepest ground */ --n-950: oklch(0.185 0.020 232); /* deep — page floor */ --n-900: oklch(0.235 0.026 231); /* blue — first raised surface */ --n-800: oklch(0.295 0.030 230); /* a lifted panel */ --n-700: oklch(0.360 0.032 229); /* hairline-bright border */ --n-600: oklch(0.435 0.032 228); /* fog — the deep fog line */ --n-500: oklch(0.520 0.030 227); /* half-sensed text */ --n-400: oklch(0.600 0.028 226); /* faint text */ --n-300: oklch(0.685 0.024 225); /* the lifted fog line */ --n-200: oklch(0.770 0.020 224); /* secondary text */ --n-100: oklch(0.865 0.016 223); /* primary cold text */ --n-50: oklch(0.935 0.010 222); /* cold fog, near-white */ /* AMBER SCALE. The single warm light in the cold. The only accent hue. 6 steps, from the brightest filament down to amber settling into dark. */ --amber-100: oklch(0.905 0.058 78); /* the caret, the brightest filament */ --amber-200: oklch(0.840 0.098 72); /* bright amber */ --amber-300: oklch(0.770 0.150 64); /* amber accent (text / solid) — tuned to the door's heat (C 0.128->0.150, H 66->64) */ --amber-400: oklch(0.690 0.130 62); /* pressed / hovered solid */ --amber-500: oklch(0.595 0.115 60); /* amber settling */ --amber-600: oklch(0.500 0.095 58); /* amber in the dark, the deep filament */ /* COLD STATUS. Used ONLY when a destructive or positive signal is unavoidable. One dim, desaturated red and one green, both kept cold. Never a palette. */ --status-danger: oklch(0.620 0.110 25); /* dim cold red */ --status-positive: oklch(0.660 0.060 158); /* dim cold green */ /* SPACE — 8px rhythm (refined from the seed --s1..--s9) */ --s-0: 4px; --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 64px; --s-6: 104px; --s-7: 168px; --s-8: 264px; --s-9: 360px; /* RADIUS — near-square. Discipline, real-OS chrome, never rounded-friendly. */ --r-0: 0px; --r-1: 2px; --r-2: 3px; --r-3: 5px; /* TYPE FAMILIES */ --font-display: "IBM Plex Sans", system-ui, sans-serif; /* monumental grotesque */ --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; /* the typed voice */ /* TYPE SCALE (px @1440). Refined from the seed --t-* values. */ --t-wordmark: 84px; --lh-wordmark: 1.02; --t-opener: 38px; --lh-opener: 1.10; --t-glow: 30px; --lh-glow: 1.20; --t-lead: 23px; --lh-lead: 1.34; --t-body: 19px; --lh-body: 1.78; --t-small: 15px; --lh-small: 1.60; --t-label: 12px; --lh-label: 1.40; --tracking-wordmark: -0.01em; --tracking-label: 0.14em; /* the typed, spaced micro-label */ --tracking-mono: 0em; /* MOTION — small, restrained. A few durations, one calm easing. */ --dur-1: 120ms; /* state change: hover, focus */ --dur-2: 220ms; /* entrance of a small element */ --dur-3: 420ms; /* a panel, a reveal */ --ease: cubic-bezier(0.2, 0, 0, 1); /* calm, no bounce, ever */ --caret-blink: 1100ms; /* the typed caret */ /* ELEVATION — flat. Shadows are cast light, not glow. Used sparingly. */ --shadow-1: 0 1px 0 0 rgba(0,0,0,0.40); --shadow-2: 0 6px 24px -12px rgba(0,0,0,0.70); } /* ============================================================================ TIER 2 — SEMANTIC ROLES. Roles mapped to primitives; build only with these. ============================================================================ */ /* ----- the one face: amber present, the one warm light on cold near-black --- */ :root { color-scheme: dark; --bg: var(--n-1000); /* the page ground */ --layer: var(--n-950); /* a raised surface / card */ --layer-2: var(--n-900); /* a higher surface / menu / input field */ --layer-3: var(--n-800); /* hover fill on a raised surface */ --text-primary: var(--n-100); --text-secondary: var(--n-300); --text-faint: var(--n-500); --text-on-accent: var(--n-1000); /* cold near-black on amber solid */ --border-subtle: var(--n-800); --border-default: var(--n-700); --border-strong: var(--n-600); --accent-solid: var(--amber-300); /* the one warm fill */ --accent-hover: var(--amber-200); --accent-press: var(--amber-400); --accent-text: var(--amber-300); /* amber as type / link */ --accent-quiet: var(--amber-500); /* amber settling, low emphasis */ --accent-bright: var(--amber-100); /* the caret, the filament */ --focus: var(--amber-300); --selection-bg: oklch(0.770 0.128 66 / 0.26); --danger: var(--status-danger); --positive: var(--status-positive); } /* ============================================================================ BASE ELEMENT STYLES — the "typed" voice. Plex Sans display, Plex Mono body. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } ::selection { background: var(--selection-bg); } body { margin: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-mono); font-size: var(--t-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* DISPLAY — Plex Sans. Hierarchy from typeface + role, not many weights. */ .cs-wordmark { font-family: var(--font-display); font-weight: 300; font-size: var(--t-wordmark); line-height: var(--lh-wordmark); letter-spacing: var(--tracking-wordmark); color: var(--text-primary); } .cs-opener { font-family: var(--font-display); font-weight: 400; font-size: var(--t-opener); line-height: var(--lh-opener); color: var(--text-primary); } .cs-glow { font-family: var(--font-display); font-weight: 300; font-size: var(--t-glow); line-height: var(--lh-glow); color: var(--text-secondary); } /* BODY + UI — Plex Mono, the terminal voice. */ .cs-lead { font-family: var(--font-mono); font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--text-secondary); } .cs-body { font-family: var(--font-mono); font-size: var(--t-body); line-height: var(--lh-body); color: var(--text-secondary); } .cs-small { font-family: var(--font-mono); font-size: var(--t-small); line-height: var(--lh-small); color: var(--text-faint); } .cs-label { font-family: var(--font-mono); font-size: var(--t-label); line-height: var(--lh-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); } /* the single amber phrase per surface: light (Visitor), the amber holds (Studio), a warmer light (Reach) */ .cs-amber { color: var(--accent-text); } /* the typed caret */ .cs-caret { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 0.08em; background: var(--accent-bright); vertical-align: text-bottom; animation: cs-blink var(--caret-blink) steps(1, end) infinite; } @keyframes cs-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* REDUCED MOTION — the path. Hold the caret steady, drop entrances. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .cs-caret { animation: none; opacity: 1; } }