/* ═══════════════════════════════════════════════════════════ Blue Arctic V6 · Design Tokens ─────────────────────────────── The single source of truth for color, type, space, radius, elevation, and motion. Every other stylesheet consumes these custom properties: change brand decisions here, not inline. ═══════════════════════════════════════════════════════════ */ :root { /* ── Color · Arctic neutrals ─────────────────────────── */ --navy-950: #081420; /* footer, deepest surfaces */ --navy-900: #0C1D2E; /* dark bands */ --navy-800: #12283D; /* dark card surfaces */ --navy-700: #1B3A55; /* dark borders / hover surfaces */ --ink: #14283C; /* primary text */ --ink-2: #43607B; /* secondary text */ --ink-3: #546F8A; /* tertiary text / meta: AA (4.5:1+) on paper/mist/frost */ --paper: #FFFFFF; --mist: #F7F9FA; /* soft section background: neutral cool gray (blue reserved for accents) */ --frost: #EFF2F5; /* deeper wash / hover fills: neutral */ --line: #E3E9EE; /* hairline borders: neutral */ --line-2: #CFD9E2; /* stronger borders */ /* ── Color · Brand blue + ice accents ────────────────── */ --blue-700: #0E4DBB; --blue-600: #1560E8; /* primary actions */ --blue-500: #2D79F5; /* hover / links on dark */ --blue-100: #E3EEFD; /* selected fills */ --sky-400: #5FB9EE; /* arctic accent */ --ice-200: #C9E7F8; --ice-100: #E6F3FB; --ok-600: #0E9F6E; /* checkmarks, live status */ --star: #C67F10; /* review stars: amber, WCAG 2.2 AA non-text 3.26:1 on white */ /* ── Color · Carbon scale (internal hero system) ─────── */ /* Matte black → graphite. Neutral by design: these carry a deliberate 2–3% cool cast, never a navy one, so blue stays an accent rather than becoming the surface. Text colors are measured against --carbon-900 as the reference background. */ --carbon-950: #0A0B0C; /* deepest matte black: hero base top */ --carbon-900: #101215; /* primary carbon surface */ --carbon-850: #16191D; /* hero base bottom / raised panels */ --carbon-800: #1D2126; /* card surfaces on carbon */ --carbon-700: #2A2F36; /* borders, dividers, hover surfaces */ --silver-100: #E7EAEE; /* headings on carbon: 15.6:1 AAA */ --steel-200: #C6CCD3; /* body copy on carbon: 11.4:1 AAA */ --steel-400: #8A939E; /* meta / eyebrow on carbon: 5.5:1 AA */ --carbon-hair: rgba(255,255,255,.09); /* hairline on carbon */ --carbon-key: rgba(233,240,247,.06); /* ambient key-light alpha */ /* ── Brand signature ─────────────────────────────────── */ /* Simplified Blue Arctic mark: the arctic peak with the wave sweeping through its base. Used as a CSS mask (eyebrows & accents) so it can carry any gradient or color. */ --brand-peak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M11 1.7 C11.5 1.1 12.3 1.1 12.7 1.7 L22.5 18.6 C23.1 19.6 22.4 20.8 21.3 20.8 C15.9 20.8 15.1 16.9 10.9 17.3 C7.6 17.6 7 20.8 2.7 20.8 C1.6 20.8 0.9 19.6 1.5 18.6 Z'/%3E%3C/svg%3E"); /* Ambient washes (hero, panels): a whisper of arctic, not a tint */ --wash-hero: radial-gradient(1100px 520px at 82% -10%, rgba(95,185,238,.09), transparent 60%), radial-gradient(700px 420px at -8% 22%, rgba(21,96,232,.04), transparent 55%); /* ── Typography ──────────────────────────────────────── */ --font-display: "Manrope", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-hero: clamp(2.4rem, 4.6vw, 3.45rem); --fs-h2: clamp(1.95rem, 3.2vw, 2.7rem); --fs-h3: clamp(1.35rem, 2.1vw, 1.7rem); --fs-h4: 1.1875rem; --fs-lead: clamp(1.1rem, 1.5vw, 1.275rem); --fs-body: 1.0625rem; --fs-small: .9375rem; --fs-tiny: .875rem; --lh-tight: 1.08; --lh-head: 1.16; --lh-body: 1.7; /* ── Space (8px scale) ───────────────────────────────── */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 5.5rem; --sp-10: 7rem; /* ── Vertical rhythm scale (2026-08-05) ────────────────── ONE scale owns every vertical gap on the site. Values are per-side: two adjacent sections each contribute their own padding, so the gap you see is the SUM. The comments below give that sum, which is the number to design against. md 48 + 48 = 96px ← default section-to-section sm 24 + 48 = 72px ← a section that belongs with the one above sm 24 + 24 = 48px ← two closely-related bands lg 60 + 60 = 120px ← a deliberate large break (use sparingly) xl 88 = 88px ← single-sided: hero → first section Before this scale existed `--section-pad` was 115px a side, so every ordinary section transition measured 230px. That is the "large empty white zone" this replaces. 2026-08-17: md/lg raised one notch (40→48, 52→60) after the 80px default read compressed between MAJOR sections; sm and xl deliberately unchanged so related blocks stay related and the hero opening doesn't balloon. If you need a different gap, reach for a modifier class (.section--tight / --connected / --spacious in base.css), never a one-off margin. */ --space-section-xl: 5.5rem; /* 88 */ --space-section-lg: 3.75rem; /* 60 */ --space-section-md: 3rem; /* 48: default */ --space-section-sm: 1.5rem; /* 24 */ --space-band: 2rem; /* 32: trust rows, notes, minor bands */ --space-component: 2rem; /* 32: heading block → the content it introduces */ --space-card-gap: 1.375rem; /* 22: gap inside every card grid */ /* Legacy alias. Existing rules that still say var(--section-pad) inherit the new rhythm instead of the old 115px. */ --section-pad: var(--space-section-md); --container: 76rem; /* 1216px */ --container-pad: clamp(1.25rem, 4vw, 2rem); /* ── Radius ──────────────────────────────────────────── */ --r-sm: .625rem; --r-md: 1.125rem; /* 18px */ --r-lg: 1.375rem; /* 22px: cards */ --r-xl: 2rem; --r-pill: 999px; --r-btn: 999px; /* buttons: soft full pill (LucidLink-class refinement, 2026-07-21) */ /* ── Elevation ───────────────────────────────────────── */ --shadow-soft: 0 2px 4px rgba(8, 25, 45, .04), 0 14px 36px -20px rgba(8, 25, 45, .16); --shadow-lift: 0 3px 6px rgba(8, 25, 45, .04), 0 26px 56px -22px rgba(8, 25, 45, .22); --shadow-panel: 0 4px 10px rgba(8, 25, 45, .06), 0 28px 60px -24px rgba(8, 25, 45, .3); /* ── Motion ──────────────────────────────────────────── */ --ease-out: cubic-bezier(.22, .8, .32, 1); --dur-fast: 160ms; --dur-med: 300ms; --dur-slow: 550ms; /* ── Layout constants ────────────────────────────────── */ --header-h: 5rem; --announce-h: 2.5rem; /* ── Header seam ─────────────────────────────────────── */ /* .header-dark paints itself with this so the announce bar, header and hero read as one continuous canvas. The default is the homepage navy; a page sets --header-dark-bg on to move the seam without touching header markup or CSS. */ --header-dark-bg: var(--navy-900); /* ── Hero system ─────────────────────────────────────── */ /* Shared by all hero variants (see hero.css). Page-level overrides go on the hero element, never in page CSS. */ --hero-pad-top: clamp(2.75rem, 5vw, 4.5rem); --hero-pad-bottom: clamp(2.5rem, 4.5vw, 3.75rem); --hero-gap: clamp(2rem, 5vw, 4.25rem); --hero-stack: clamp(.95rem, 1.4vw, 1.2rem); /* rhythm between hero rows */ --hero-fs-h1: clamp(2.2rem, 4.2vw, 3.3rem); --hero-measure: 36rem; /* lead copy max width */ } /* ── Vertical rhythm · responsive steps ──────────────────── The scale steps down at two breakpoints rather than using clamp(), so the resulting section gap is a number you can predict and verify at each width: desktop 48+48 = 96px (target 88–104) tablet 36+36 = 72px (target 64–80) mobile 28+28 = 56px (target 48–60) */ @media (max-width: 900px) { :root { --space-section-xl: 4rem; /* 64 */ --space-section-lg: 3rem; /* 48 */ --space-section-md: 2.25rem; /* 36 */ --space-section-sm: 1.25rem; /* 20 */ --space-band: 1.5rem; --space-component: 1.5rem; --space-card-gap: 1.125rem; /* 18 */ } } @media (max-width: 560px) { :root { --space-section-xl: 3rem; /* 48 */ --space-section-lg: 2.25rem; /* 36 */ --space-section-md: 1.75rem; /* 28 */ --space-section-sm: 1rem; /* 16 */ --space-band: 1.25rem; --space-component: 1.25rem; --space-card-gap: 1rem; /* 16 */ } }