/* ============================================================================ Luria design system, single source of truth for tokens + fonts. Loaded identically on marketing (landing), onboarding, and app surfaces. Default palette: true/near-black layered surfaces (app + legacy pages). Light marketing palette: opt-in via . Shipping palette: html[data-theme="dark"] (stamped by theme-config.js), the §5 dark colorway of the template port work order (01_docs/01_planning/). Type: Instrument Serif (display) · Inter (body) · JetBrains Mono (mono). All fonts served from origin to satisfy CSP `font-src 'self'`. ============================================================================ */ /* ---- Fonts (self-hosted woff2, CSP-safe; all faces live in fonts.css) ---- */ @import url("/styles/fonts.css"); :root { /* ---- Surfaces (near/true black, layered by elevation) ---- */ --bg: #000000; --surface-1: #0A0A0B; --surface-2: #141416; --surface-3: #1C1C20; --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.14); /* ---- Text (high-contrast, opacity-stepped hierarchy) ---- */ --text: #FFFFFF; --display-ink: #FFFFFF; /* display type; palettes override below */ --text-2: rgba(255,255,255,.64); --text-3: rgba(255,255,255,.42); --text-inverse: #000000; /* ---- Accent: one cold electric blue. No gradients, no glow-by-default. ---- */ --accent: #4C6BFF; --accent-hover: #6E86FF; --accent-press: #3B57E6; --accent-tint: rgba(76,107,255,.12); --accent-line: rgba(76,107,255,.38); --on-accent: #FFFFFF; --accent-text: #6E86FF; /* ---- Type families ---- */ --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- Type scale (swiss: intentional, few steps) ---- */ --fs-display: clamp(44px, 6.2vw, 82px); --fs-h1: clamp(38px, 5vw, 60px); --fs-h2: clamp(28px, 3.4vw, 40px); --fs-h3: 24px; --fs-body-lg: 20px; --fs-body: 16px; --fs-sm: 14px; --fs-cap: 13px; --fs-micro: 12px; --lh-tight: 0.95; --lh-snug: 1.15; --lh-body: 1.6; --track-tight: -0.03em; --track-eyebrow: 0.18em; /* ---- Spacing ---- */ --s-1:4px; --s-2:6px; --s-3:8px; --s-4:10px; --s-5:12px; --s-6:16px; --s-7:18px; --s-8:20px; --s-9:24px; --s-10:32px; --s-11:40px; --s-12:48px; --s-13:64px; --s-14:96px; --s-15:128px; --s-16:180px; /* ---- Radii ---- */ --r-1:6px; --r-2:8px; --r-3:12px; --r-4:16px; --r-5:20px; --r-6:24px; --r-pill:999px; /* ---- Layout ---- */ --maxw:1200px; --gutter:24px; /* ---- Motion (ease-out only, 180 to 600ms, zero bounce) ---- */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 180ms; --dur: 300ms; --dur-slow: 500ms; --dur-reveal: 600ms; /* ---- Elevation (layered shadows, not borders) ---- */ --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.24); --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.36); } /* ---- Light marketing palette (landing/onboarding/legal opt in) ----------- */ html[data-palette="light"] { --bg: #F4F2EE; --surface-1: #FFFFFF; --surface-2: #EFEDE8; --surface-3: #E9E6E0; --line: rgba(10,10,10,.12); --line-strong: rgba(10,10,10,.22); --text: #0A0A0A; --display-ink: #0A0A0A; --text-2: rgba(10,10,10,.6); --text-3: rgba(10,10,10,.35); --text-inverse: #F4F2EE; /* Task-spec aliases (same values, alternate naming) */ --ink: #0A0A0A; --ink-60: rgba(10,10,10,.6); --ink-35: rgba(10,10,10,.35); /* Accent appears ONLY on: winning box, lift figures, primary CTA, live dot. */ --accent: #1B4DFF; --accent-hover: #3D66FF; --accent-press: #1440D9; --accent-tint: rgba(27,77,255,.10); --accent-line: rgba(27,77,255,.35); --on-accent: #FFFFFF; --accent-text: #1B4DFF; --shadow-1: 0 1px 2px rgba(10,10,10,.08), 0 2px 8px rgba(10,10,10,.06); --shadow-2: 0 2px 4px rgba(10,10,10,.08), 0 12px 32px rgba(10,10,10,.10); } html[data-palette="light"] .lr-img { outline-color: rgba(10,10,10,.10); } html[data-palette="light"] .btn-secondary { background: rgba(10,10,10,.05); } html[data-palette="light"] .btn-secondary:hover { background: rgba(10,10,10,.09); } /* ---- Dark theme: near-black ground, warm ink --------------------------- Active via , stamped by /theme-config.js (DEFAULT_THEME). Declared AFTER the light block so it wins at equal specificity. data-theme="light" has NO rules on purpose: flipping the config back to "light" restores every page's original palette exactly. Palette (template port work order §5): three depths, not two, #07070A ground, #0E0E13 panel, #14142E hero block, separated by rgba(242,240,234,.10) hairlines, never shadows. Ink is warm (#F2F0EA) on a cold ground. Cold blue (--accent) is for data, links and the box language; warm amber (--warm) is for action and appears 4-5× per page. */ html[data-theme="dark"] { color-scheme: dark; --bg: #07070A; /* page ground */ --bg-raised: #0E0E13; --surface: #0E0E13; /* raised panel */ --surface-1: #0E0E13; --surface-2: #13131A; --surface-3: #181821; --hero-block: #14142E; /* the big rounded card: deep ink-indigo, not bright */ --tile: rgba(242,240,234,.06); /* inner tile on a panel or the hero block */ --line: rgba(242,240,234,.10); /* hairlines do all the separating */ --line-strong: rgba(242,240,234,.20); --text: #F2F0EA; --display-ink: #F5F3ED; /* display type runs a step brighter */ --text-2: rgba(242,240,234,.64); /* .50 not .40: at .40 this token measured 3.42-3.49:1 on the four surfaces, under the 4.5:1 floor for the small text it drives (eyebrows, fine print, footer, captions). .50 measures 4.74-4.82:1 everywhere. */ --text-3: rgba(242,240,234,.50); --text-inverse: #07070A; --ink: #F2F0EA; --ink-60: rgba(242,240,234,.64); --ink-35: rgba(242,240,234,.50); /* cold blue: numbers, chart strokes, links, detection boxes. 4.6:1 on the ground; labels ON an accent fill go near-black (white is only 3.8:1) */ --accent: #4C6BFF; --accent-hover: #6E86FF; --accent-press: #3B57E6; --accent-tint: rgba(76,107,255,.14); --accent-line: rgba(76,107,255,.45); --on-accent: #07070A; /* --accent as SMALL TEXT measures 4.15-4.45:1 on the panel/tile/hero fills, just under the floor. Small accent text uses this lifted shade (5.57-6.24:1); --accent itself stays the fill/border/large-number color (needs 3:1, passes). */ --accent-text: #6E86FF; /* warm amber: the one action color, primary CTA, guarantee line, active nav item, the arrow glyphs between flow tiles. Nowhere else. */ --warm: #E0A03A; --warm-hover: #EBB15A; --warm-press: #C98E2F; --on-warm: #07070A; --shadow-1: none; --shadow-2: none; /* ---- /app dashboard tokens. The app's inline styles use var(--app-*, ), undefined outside dark, so the default near-black dashboard renders byte-identically on revert. ---- */ --app-card: #0E0E13; --app-card2: #13131A; --app-line-soft: rgba(242,240,234,.08); --app-line2: rgba(242,240,234,.14); --app-hover: rgba(242,240,234,.18); --app-bar: rgba(242,240,234,.32); --app-t-strong: rgba(242,240,234,.84); --app-t-mid: rgba(242,240,234,.64); --app-t-dim: rgba(242,240,234,.45); --app-accent-tint: rgba(76,107,255,.15); --app-accent-line: rgba(76,107,255,.5); --app-accent-glow: rgba(76,107,255,.22); --app-accent-bar: rgba(76,107,255,.65); --app-on-accent: #07070A; } html[data-theme="dark"] .lr-img { outline-color: rgba(242,240,234,.12); } html[data-theme="dark"] .btn-secondary { background: rgba(242,240,234,.07); } html[data-theme="dark"] .btn-secondary:hover { background: rgba(242,240,234,.12); } /* ---- Base reset / global type -------------------------------------------- */ html { background: var(--bg); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } /* Form controls don't inherit font-family from body, only the family, so size/weight stay whatever each component already set. */ button, input, select, textarea { font-family: inherit; } h1,h2,h3,.lr-display,.lr-h1,.lr-h2 { font-family: var(--font-display); font-weight: 400; /* Instrument Serif ships book weight only */ letter-spacing: var(--track-tight); line-height: var(--lh-tight); text-wrap: balance; margin: 0; } h3 { line-height: 1.1; } /* 0.95 is display-size only */ p { text-wrap: pretty; } .lr-display { font-size: var(--fs-display); } .lr-h1 { font-size: var(--fs-h1); } .lr-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); } .lr-eyebrow { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent); } /* Numbers that update must not reflow */ .tnum { font-variant-numeric: tabular-nums; } /* Images get a subtle 1px inset outline (pure white on dark) */ .lr-img { outline: 1px solid rgba(255,255,255,.10); outline-offset: -1px; } /* ---- Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; cursor: pointer; white-space: nowrap; transition-property: background-color, color, scale, box-shadow, border-color; transition-duration: var(--dur-fast); transition-timing-function: var(--ease); } .btn:active { scale: 0.96; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: rgba(255,255,255,.06); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); } .btn-secondary:hover { background: rgba(255,255,255,.10); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- Scroll-reveal primitives (driven by motion.js) ---------------------- */ .reveal { opacity: 0; transform: translateY(18px); will-change: transform, opacity; } .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); } /* stagger children via inline --i index */ .reveal-stagger > * { opacity: 0; transform: translateY(16px); } .reveal-stagger.is-in > * { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } /* headline word/line reveal */ .word { display: inline-block; opacity: 0; transform: translateY(0.5em); } .reveal-words.is-in .word { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); transition-delay: calc(var(--wi, 0) * 55ms); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > *, .word { opacity: 1 !important; transform: none !important; transition: none !important; } .btn:active { scale: 1; } * { scroll-behavior: auto !important; } }