/* Klyear · FINAL-V3 "motion study" · design tokens — OKLCH only, anchor hue ~255 (cool blue-black). v3 extends the v2 token sheet with three signature groups (spotlight / ribbon / terminal) — every new colour is OKLCH in the same 250–257 hue corridor. Only other change: the marquee's --dur-ticker is retired (the ribbon replaces the marquee). The palette is sampled FROM the two founder-approved brand assets so page and photograph share one register: deep blue-black field, cool paper whites, ONE electric blue (the beam). Every colour on the page routes through a token here — no mid-render improvisation. (The favicon/OG data-URI carries hex equivalents of these tokens because data URIs cannot reference CSS custom properties: void-deep=#07090e, ink=#eceff5, beam=#7da3f5, beam-hot=#a6d2ff.) */ :root { color-scheme: dark; /* ---- colour · the field (asset register: candidate-a black half, candidate-b sky) ---- */ --color-void: oklch(13% 0.016 255); /* page ground */ --color-void-deep: oklch(8% 0.012 255); /* loader, scrim base — never #000 */ --color-surface: oklch(16.5% 0.018 255); /* raised band (strip, frost base) */ --color-ghost: oklch(19.5% 0.022 257); /* footer ghost display type */ /* ---- colour · rules + ink (cool paper whites, from the document walls) ---- */ --color-rule: oklch(27% 0.016 255); /* hairlines on void */ --color-rule-bright: oklch(44% 0.02 255); /* emphasized decorative borders (2.6:1 on void — the text inside carries the contrast) */ --color-ink: oklch(94% 0.008 250); /* display + headings — paper white */ --color-body: oklch(77% 0.012 252); /* running copy */ --color-muted: oklch(64% 0.015 253); /* meta, captions — ≥4.5:1 on void */ /* ---- colour · the ONE electric blue (the beam in candidate-a) ---- */ --color-beam: oklch(72% 0.14 255); /* lines, lit stage names, accent text */ --color-beam-hot: oklch(85% 0.08 250); /* the beam's white-hot core — tiny doses */ --color-accent-fill: oklch(55% 0.20 256); /* CTA fill — 4.73:1 under accent-ink */ --color-accent-ink: oklch(98.5% 0.005 250); /* text on an accent fill */ --color-focus: oklch(72% 0.14 255); /* ---- colour · overlays (alpha = modifier, not palette) ---- */ --scrim-strong: oklch(8% 0.012 255 / 0.92); /* hero left wall — text contrast at any crop */ --scrim-heavy: oklch(8% 0.012 255 / 0.85); /* narrow-crop veil under running copy — 4.5:1 with margin */ --scrim-mid: oklch(8% 0.012 255 / 0.55); --scrim-none: oklch(8% 0.012 255 / 0); --scrim-edge: oklch(13% 0.016 255 / 1); /* photo bottom edge fuses into the page */ --frost: oklch(13% 0.016 255 / 0.78); /* scrolled nav */ --shadow-nav: 0 10px 30px -24px oklch(5% 0.01 255 / 0.9); /* ---- colour · light passes (polish pass — alpha variants of beam-hot/accent-ink) ---- */ --beam-veil: oklch(85% 0.08 250 / 0.12); /* hero shimmer band — one soft sweep */ --beam-pulse: oklch(85% 0.08 250 / 0.5); /* ambient highlight travelling the wire */ --sheen: oklch(98.5% 0.005 250 / 0.22); /* diagonal sheen across the CTA pill */ /* ---- v3 · signature ① scan-beam cursor spotlight (hero) ---- */ --spot-d: 21.25rem; /* spotlight diameter (~340px) */ --spot-core: oklch(85% 0.08 250 / 0.14); /* lightening core — beam-hot, low alpha */ --spot-mid: oklch(72% 0.14 255 / 0.09); /* beam-blue falloff ring */ --dur-spot: 12s; /* touch auto-pan — one full 12s circuit */ /* ---- v3 · signature ② living document ribbon (scene divider) ---- */ --paper: oklch(90% 0.012 250); /* paper plane, lit face */ --paper-dim: oklch(70% 0.02 252); /* paper plane, mid tone */ --paper-deep: oklch(46% 0.028 253); /* paper plane, shadow edge */ --paper-lit: oklch(85% 0.08 250 / 0.5); /* beam-lit edge, baked into the gradient */ --paper-rule: oklch(30% 0.03 255 / 0.22); /* faint document text-lines on the sheet */ --ribbon-glow: oklch(72% 0.14 255 / 0.07); /* band-center beam ambience */ --ribbon-h: 9.5rem; /* band height ≥40rem (7.5rem below) */ --ribbon-persp: 60rem; /* scene perspective — deep, gentle */ --dur-ribbon: 46s; /* drift loop — linear is legal on loops */ /* ---- v3 · signature ③ self-typing terminal manifesto (approach) ---- */ --color-term: oklch(10.5% 0.014 255); /* terminal panel — darker than surface */ --dur-caret: 1.1s; /* block-cursor blink cycle */ /* ---- texture · one film-grain token shared by page and photographs ---- */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-opacity: 0.05; /* ---- type · Clash Display display / Switzer body / JetBrains Mono machine voice ---- Fallback stacks stay characterful (Avenir Next / Futura) — Inter is banned even as fallback. */ --font-display: "Clash Display", "Avenir Next", "Futura", "Segoe UI", sans-serif; --font-body: "Switzer", "Avenir Next", "Seravek", "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* ---- type scale · 1.25 major third from 16px + display clamps ---- */ --text-xs: 0.72rem; --text-sm: 0.84rem; --text-base: 1rem; --text-md: 1.2rem; --text-lg: 1.5rem; --text-xl: 1.9rem; --text-2xl: 2.4rem; --text-display: clamp(2.35rem, 5.4vw + 1rem, 5.75rem); /* hero headline (28 chars; floor clears "Documents in." at 320) */ --text-statement: clamp(2.1rem, 3.2vw + 1rem, 4rem); /* scene-break + contact */ --text-head: clamp(1.9rem, 2vw + 1rem, 2.9rem); /* section heads */ --text-service: clamp(1.55rem, 2.4vw + 0.7rem, 3.1rem);/* editorial service titles */ --text-ghost: clamp(4.4rem, 15vw, 13.5rem); /* footer ghost wordmark */ /* ---- space · 4pt scale ---- */ --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6.5rem; --space-4xl: 10rem; /* ---- motion · four named easings, three buckets + loop constants ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-expo: cubic-bezier(0.19, 1, 0.22, 1); /* masked line rises + drawn hairlines */ --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-reveal: 600ms; /* masked line rise */ --dur-wipe: 900ms; /* scene-break clip wipe */ --dur-sheen: 700ms; /* CTA sheen sweep */ --dur-shimmer: 1.4s; /* hero beam shimmer — runs once */ --dur-kb: 24s; /* hero Ken Burns half-cycle (alternates) */ --dur-pulse: 6s; /* instrument-wire ambient pulse cycle */ /* (--dur-ticker retired in v3 — the marquee gave way to the document ribbon) */ /* ---- structure ---- */ --rule-1: 1px; --radius-pill: 999px; /* CTA pills (flymedia DNA, founder taste) */ --radius-tag: 4px; /* ---- page ---- */ --page-max: 80rem; --page-gutter: clamp(1.25rem, 5vw, 4.5rem); --nav-h: 4.5rem; /* ---- z · named levels only ---- */ --z-base: 1; --z-raised: 10; --z-sticky: 200; --z-grain: 300; /* the film veil sits over content AND nav, under the loader */ --z-modal: 400; }