/* * ============================================================================ * STRATAMIZE.COM — MARKETING TOKENS (tokens.css) * ============================================================================ * Part 1 is the STRATAMIZE COCKPIT "Ops Terminal" canonical :root block, * copied VERBATIM from stratamize-design-system/tokens.css (the single source * of truth). Part 2 is the clearly-marked MARKETING EXTENSIONS block — the * only additions permitted for the marketing site. No cockpit token is * overridden; no new hex literals anywhere (everything derives via tokens / * color-mix). Builders reference ONLY the custom properties in this file. * ============================================================================ */ :root { /* ============================================================ STRATAMIZE COCKPIT — "OPS TERMINAL" CANONICAL TOKENS Authored in OKLCH; locked brand hex preserved in comments. Contrast ratios are vs --bg (near-black #04060A), WCAG verified. SINGLE SOURCE OF TRUTH — builders copy verbatim into tokens.css. ============================================================ */ /* ---- SURFACES — near-black field + lifted wells (no card soup) ---- */ --bg: oklch(6.8% 0.012 250); /* #04060A page floor (true near-black) */ --bg-2: oklch(8.6% 0.012 250); /* header strip / table head / command rail */ --well: oklch(10.6% 0.013 250); /* #070A0F lifted data well / panel surface */ --well-deep: oklch(5.0% 0.010 250); /* inputs / code / deepest inset */ --row-hover: color-mix(in oklab, var(--mint) 7%, transparent); /* mint row-cursor wash */ /* ---- HAIRLINES — slate at low alpha (structure, not shadow) ---- */ --line: color-mix(in oklab, var(--slate) 22%, transparent); --line-strong: color-mix(in oklab, var(--slate) 36%, transparent); --line-faint: color-mix(in oklab, var(--slate) 12%, transparent); --line-mint: color-mix(in oklab, var(--mint) 50%, transparent); --tick: color-mix(in oklab, var(--text) 16%, transparent); /* corner registration ticks */ /* ---- TEXT TIERS (ratios vs --bg) ---- */ --text: oklch(96% 0.015 234); /* #EAF7FF ice — ~18.6:1 AAA */ --text-secondary: oklch(84% 0.014 232); /* body / cells — ~13.0:1 AAA */ --text-muted: oklch(66% 0.034 233); /* #6F8B9B labels — ~6.4:1 AA */ --text-faint: oklch(60% 0.022 235); /* small data/meta — ~4.8:1 AA (FIXED tier) */ --slate: oklch(62% 0.040 233); /* raw slate — hairline mixes only */ --on-mint: oklch(26% 0.07 163); /* dark ink ON solid mint — ~AA on #3BF5B0 */ /* ---- MINT — PRIMARY, rationed as a live cursor / light source ---- */ --mint: oklch(86.4% 0.174 163); /* #3BF5B0 links·active-nav·focus·LIVE — ~15:1 */ --mint-wash: color-mix(in oklab, var(--mint) 13%, transparent); /* chip / highlight bg */ --mint-edge: color-mix(in oklab, var(--mint) 42%, transparent); /* chip / rail border */ --mint-glow: color-mix(in oklab, var(--mint) 30%, transparent); /* reserved live bloom */ --mint-ink: var(--on-mint); /* text on solid mint */ /* ---- SEMANTIC ACCENTS — glyph/count/rail only, never sprayed ---- */ --info: oklch(84.8% 0.142 209); /* #22E6FF cyan — in-review/info — ~13:1 */ --warn: oklch(87.9% 0.163 91); /* #FFD23C amber — attention/needs-info — ~14:1 */ --danger: oklch(69.7% 0.198 13); /* #FF5C7A red-pink — declined/critical — ~7:1 */ --rare: oklch(69.3% 0.258 343); /* #FF3DC4 magenta — rare highlight — ~6.5:1 */ --info-wash: color-mix(in oklab, var(--info) 13%, transparent); --info-edge: color-mix(in oklab, var(--info) 38%, transparent); --warn-wash: color-mix(in oklab, var(--warn) 13%, transparent); --warn-edge: color-mix(in oklab, var(--warn) 40%, transparent); --danger-wash: color-mix(in oklab, var(--danger) 15%, transparent); --danger-edge: color-mix(in oklab, var(--danger) 42%, transparent); --danger-glow: color-mix(in oklab, var(--danger) 26%, transparent); --rare-wash: color-mix(in oklab, var(--rare) 14%, transparent); --rare-edge: color-mix(in oklab, var(--rare) 42%, transparent); /* ---- TYPE — three voices, strictly zoned ---- */ --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; /* page/panel titles */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* prose · labels · nav */ --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Cascadia Code", monospace; /* ALL data */ /* ---- FLUID TYPE SCALE — operator-dense; dedicated numeral ramp ---- */ --fs-label: clamp(0.625rem, 0.60rem + 0.10vw, 0.6875rem); /* tracked microcaps */ --fs-tag: 0.6875rem; /* chip text, th */ --fs-micro: 0.75rem; /* chip / table sub */ --fs-sm: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem); /* table cells */ --fs-base: clamp(0.875rem, 0.85rem + 0.18vw, 0.9375rem); /* body / UI */ --fs-md: clamp(1rem, 0.95rem + 0.30vw, 1.125rem); /* panel title / nav */ --fs-num-s: clamp(1.125rem, 1.02rem + 0.55vw, 1.375rem); /* small data figure */ --fs-num-m: clamp(1.625rem, 1.35rem + 1.30vw, 2.25rem); /* status-tile count */ --fs-num-l: clamp(2.25rem, 1.75rem + 2.50vw, 3.25rem); /* funnel / KPI count */ --fs-num-x: clamp(2.75rem, 2.10rem + 3.20vw, 4rem); /* residual hero */ --fs-title: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* page title (display) */ --tracking-tag: 0.14em; /* uppercase micro labels */ --tracking-nav: 0.08em; /* nav */ --leading-tight: 1.05; --leading-body: 1.5; /* ---- SPACING — 4px base, applied with rhythm not uniformly ---- */ --s-px: 1px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* ---- LAYOUT ---- */ --shell-h: 48px; --content-max: 1440px; --gutter: clamp(16px, 1vw + 12px, 32px); --bento-gap: var(--s-4); --rail-w: 2px; /* signal-rail thickness (panels); tiles use 3px left-rail */ /* ---- RADIUS — machined; chips square; only dots/pulse are round ---- */ --r-0: 0; --r-1: 2px; --r-2: 3px; --r-3: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 999px; /* ---- DEPTH — hairlines + one inset lip; glows reserved ---- */ --well-inset: inset 0 1px 0 0 color-mix(in oklab, var(--text) 5%, transparent); --shadow-panel: var(--well-inset), 0 12px 30px -18px oklch(0% 0 0 / 0.85); --glow-mint: 0 0 0 1px var(--mint-edge), 0 0 28px -6px var(--mint-glow); /* the single bloom */ --glow-crit: 0 0 0 1px var(--danger-edge), 0 0 26px -8px var(--danger-glow); --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--mint); /* focus-visible */ /* ---- MOTION — compositor-friendly only (transform / opacity) ---- */ --dur-1: 90ms; --dur-2: 150ms; --dur-3: 240ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-snap: cubic-bezier(0.2, 0, 0, 1); --blink: 1.05s; /* live-cursor blink period */ } /* ============================================================================ MARKETING EXTENSIONS — stratamize.com ONLY ---------------------------------------------------------------------------- Additions for marketing scale (hero display type, section rhythm, container widths, atmosphere washes). These do NOT override any cockpit token above, and introduce NO new color values — every wash derives from cockpit tokens via color-mix(). site.css is the only consumer. ============================================================================ */ :root { /* ---- MARKETING DISPLAY RAMP (above --fs-title) ---- */ --fs-hero: clamp(3rem, 2.1rem + 4.5vw, 5.5rem); /* home/landing h1 */ --fs-hero-2: clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem); /* subpage h1 */ --fs-h2: clamp(1.625rem, 1.35rem + 1.4vw, 2.5rem); /* section h2 */ --fs-h3: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem); /* card / row h3 */ --fs-lead: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem); /* hero/section lead */ /* ---- SECTION RHYTHM ---- */ --space-section: clamp(4rem, 3rem + 5vw, 8.5rem); /* default band */ --space-section-sm: clamp(2.5rem, 2rem + 3vw, 4.5rem); /* tight band */ /* ---- CONTAINERS (cockpit --content-max: 1440px stays the outer clamp) ---- */ --wrap-max: 1200px; /* marketing content column */ --measure-max: 72ch; /* long-form prose measure */ /* ---- WASH / ATMOSPHERE (derived — no new hex) ---- */ --wash-hero: radial-gradient(120% 85% at 85% -10%, color-mix(in oklab, var(--mint) 7%, transparent), transparent 58%); --wash-band: radial-gradient(90% 100% at 50% -20%, color-mix(in oklab, var(--info) 4%, transparent), transparent 62%); --wash-cta: radial-gradient(80% 120% at 50% -20%, color-mix(in oklab, var(--mint) 10%, transparent), transparent 60%); /* ---- STACKING ---- */ --z-nav: 100; --z-skip: 200; } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --blink: 0s; } }