/* ============================================================================ COMCEPT — DESIGN TOKENS (The Forensic Instrument / Signal Lock) Standalone. Zero Tailwind, zero made. CSS. Loaded BEFORE comcept.css. All custom properties are taken VERBATIM from brand.config.json so the two sites never drift. Contrast ratios machine-verified against carbon-900 base. ---------------------------------------------------------------------------- THE SPLIT IS THE BRAND: humans speak Space Grotesk, the machine speaks JetBrains Mono. Mono = chrome/labels/numerics only, never long prose. ONE amber signal: the Q2 node. Restraint IS the flex. ============================================================================ */ /* --------------------------------------------------------------------------- FONTS — two self-hosted VARIABLE WOFF2 subsets (wght axis present). tech('variable') so a single file drives the 300->600 H1 weight-settle; plain format('woff2') second src is the fallback for engines without tech(). --------------------------------------------------------------------------- */ @font-face { font-family: 'Space Grotesk'; src: url(/comcept-site/fonts/space-grotesk.woff2) format('woff2') tech('variable'), url(/comcept-site/fonts/space-grotesk.woff2) format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url(/comcept-site/fonts/jetbrains-mono.woff2) format('woff2') tech('variable'), url(/comcept-site/fonts/jetbrains-mono.woff2) format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; } :root { /* ========================================================================= CARBON RAMP — the planes of the instrument. ========================================================================= */ --carbon-950: #07080B; /* deepest plane: hero/CTA/footer base */ --carbon-900: #0B0C10; /* page base; theme-color; the contrast reference bg */ --carbon-850: #0F1117; /* alternate section bg */ --carbon-800: #14161D; /* raised glass panels / cards / inputs */ --carbon-700: #1C2029; --carbon-600: #272C38; /* hairline borders (1px dividers) */ --carbon-500: #353C4B; --carbon-400: #4F5D75; /* = Metric Slate. STRUCTURE / grid-lines ONLY, never text. */ /* ========================================================================= AMBER — THE ONE SIGNAL. The node, the active CTA, the hero beam. amber-500 ~10.5:1 on carbon-900 (passes AA as text) but is RESERVED for accent — NEVER body/label text. Amber on a light/paper surface FAILS (~1.7:1); the site stays carbon-dark so that case never arises. ========================================================================= */ --amber-500: #FFB800; /* the node, primary CTA fill, active/focus, hero beam, sweep */ --amber-400: #FFC629; /* hover / glow only */ --amber-300: #FFD152; /* faint glow only */ --amber-600: #E0A100; /* pressed */ /* ========================================================================= CYAN — rare 2nd channel, MAX 3 appearances site-wide. 'live data' semantics ONLY (one HUD live-dot, one bento 'live' cell, optional submit success flash). cyan-400 ~13:1 but RESERVED for graphical dots — NEVER readable text, NEVER adjacent to amber as a colour-pair. ========================================================================= */ --cyan-400: #00F0FF; --cyan-500: #00C8D6; /* ========================================================================= SLATE — structure + muted text. slate-400 #6B7891 ~4.0:1 on carbon-900 -> FAILS AA for text. GRID LINES / HAIRLINES (graphical 3:1) ONLY, never text. slate-300 #8893A8 ~6.9:1 -> AA muted TEXT FLOOR. Never muddier for copy. slate-200 #9AA4B8 ~8.4:1 -> secondary / mono-label text (AA/AAA). ========================================================================= */ --slate-400: #6B7891; /* ~4.0:1 — grid/hairline GRAPHICAL only, never text */ --slate-300: #8893A8; /* ~6.9:1 — muted text FLOOR (AA) */ --slate-200: #9AA4B8; /* ~8.4:1 — secondary / mono labels / HUD chrome (AA) */ /* ========================================================================= TEXT. white ~18.4:1 on carbon-900 — headings / body. paper light-surface text ONLY — never a page bg on this site. ========================================================================= */ --white: #FFFFFF; /* ~18.4:1 — headings/body */ --paper: #F4F5F7; /* light-surface text only */ /* CONTRAST CONTRACT (machine-verified, on carbon-900 #0B0C10): white ~18.4:1 AAA — headings + body slate-200 ~8.4:1 AA/AAA — secondary + ALL mono labels/eyebrows/HUD slate-300 ~6.9:1 AA — muted floor (never muddier for text) amber-500 ~10.5:1 AA — RESERVED accent, never body/label text cyan-400 ~13:1 high — RESERVED graphical 'live' dots, never text slate-400 ~4.0:1 FAIL — grid/hairline GRAPHICAL use ONLY, never text */ /* ========================================================================= TYPE — two faces only. Fluid clamp() scale; tabular-nums on numerics. Display = Space Grotesk (H1 animates wght 300->600 where supported). Mono = JetBrains Mono (chrome/labels/numerics only). ========================================================================= */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace; --fs-wordmark: clamp(1rem, 1.4vw, 1.25rem); /* wght700, .2em, uppercase */ --fs-h1: clamp(2.6rem, 6.5vw, 5.5rem); /* wght500 (settles 300->600) */ --fs-h2: clamp(1.9rem, 4vw, 3.25rem); /* wght500 */ --fs-h3: clamp(1.3rem, 2vw, 1.75rem); /* wght500 */ --fs-body: clamp(1.05rem, 1.2vw, 1.2rem); /* wght400, lh1.6, 62ch */ --fs-mono-label: 0.75rem; /* wght500 uppercase .14em */ --fs-mono-data: clamp(2rem, 3.5vw, 3rem); /* wght500 tabular-nums */ --tracking-wordmark: 0.2em; --tracking-h1: -0.02em; --tracking-h2: -0.01em; --tracking-mono: 0.14em; --lh-h1: 0.96; --lh-body: 1.6; --measure: 62ch; /* ========================================================================= SPACING — 8px base modular scale (deliberately NOT made.'s gr-*). ========================================================================= */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; /* Layout */ --container-max: 1240px; --gutter: clamp(1.25rem, 5vw, 2.5rem); --section-pad: clamp(96px, 12vh, 160px); /* ========================================================================= RADII — sharp = forensic. radius-0 on ALL instrument/HUD/readout elements + the crosshair mark. sm/md ONLY on interactive cards/inputs/buttons; pill on service chips. ========================================================================= */ --radius-0: 0; --radius-sm: 4px; --radius-md: 8px; --radius-pill: 999px; /* ========================================================================= GLOW — color-mix(in oklch) box-shadows. NEVER on the crosshair mark. Lives on node / CTA / active-states / WebGL bloom only. rgba() @supports fallback below for engines without color-mix oklch. ========================================================================= */ --glow-amber: 0 0 0 1px color-mix(in oklch, var(--amber-500) 60%, transparent), 0 0 24px color-mix(in oklch, var(--amber-500) 30%, transparent); --glow-amber-soft: 0 0 16px color-mix(in oklch, var(--amber-400) 22%, transparent); /* Focus ring — 2px offset amber, ALWAYS visible via :focus-visible. */ --focus-ring: 0 0 0 2px var(--carbon-900), 0 0 0 4px var(--amber-500); /* Glass */ --glass-bg: color-mix(in oklch, var(--carbon-800) 72%, transparent); --glass-border: 1px solid var(--carbon-600); /* ========================================================================= MOTION — easings + named durations. ========================================================================= */ --ease-instrument: cubic-bezier(0.2, 0.8, 0.2, 1); /* confident settle */ --ease-decisive: cubic-bezier(0.16, 1, 0.3, 1); /* snap reveals */ --dur-ui: 240ms; /* UI state 200-400ms */ --dur-reveal: 520ms; /* reveals 400-600ms */ --dur-snap: 420ms; /* node snap / lock-on */ } /* --------------------------------------------------------------------------- GLOW FALLBACK — engines without color-mix(in oklch) get static rgba() equivalents so older browsers still show a real glow (amber #FFB800, carbon-800 #14161D). --------------------------------------------------------------------------- */ @supports not (color: color-mix(in oklch, red, blue)) { :root { --glow-amber: 0 0 0 1px rgba(255, 184, 0, 0.6), 0 0 24px rgba(255, 184, 0, 0.3); --glow-amber-soft: 0 0 16px rgba(255, 198, 41, 0.22); --glass-bg: rgba(20, 22, 29, 0.86); } }