/* ===================================================================== TOKENS: Altara Research store The ONLY file that names a color, a font or a radius. From Altara's brand kit (Brand Playbook, Oct 2026): Deep Navy #06194D ink on white, and the dark panels Royal Blue #043B94 the accent as TEXT on white: prices, links Bright Blue #086AED fills only: buttons, rules, the logo's ribbon Montserrat (headings), Open Sans (body), as the playbook specifies. The kit's look is white, airy and clinical (the cover art is white with blue molecules), so the page is light and navy is kept for a few panels. Measured, never eyeballed (WCAG AA is 4.5:1 for body text): navy on white / ice 16.75 / 15.46 #2E3A57 body on white/ice 11.30 / 10.43 navy .70 (dim) on ice 6.20 navy .66 (faint) on ice ~5.1 royal on white / ice 10.20 / 9.42 bright on white 4.89 <- passes on WHITE only. bright on ice 4.51 <- borderline: never text there. white on bright (button) 4.89 white on navy 16.75 white .72 on navy 9.09 sky #6CC4FF on navy 8.75 bright on navy 3.43 FAILS That last line is why the accent inside .tone-dark is sky, not bright. Two tones. The page is light; .tone-dark (top bar, footer, closing panel, the set band, the gate's brand side) re-points the same token names, so a component written once reads on either ground. ===================================================================== */ :root { /* ---- 1. BRAND --------------------------------------------------------- */ --navy: #06194D; --navy-hi: #0E2B6E; --navy-deep: #041236; --royal: #043B94; --bright: #086AED; --bright-deep: #0757C9; --sky: #6CC4FF; --cyan: #22C7F2; --white: #FFFFFF; --ice: #F3F6FB; --ice-2: #EAF0F9; --ink-body: #2E3A57; /* ---- 2. LIGHT TONE (default) ----------------------------------------- */ --accent: var(--royal); --accent-bright: var(--bright); --accent-deep: var(--navy); --accent-soft: color-mix(in srgb, var(--bright) 7%, transparent); --accent-line: color-mix(in srgb, var(--bright) 32%, transparent); --accent-fill: var(--bright); --bg: var(--white); --bg-alt: var(--ice); --panel: var(--white); --surface: var(--white); --surface-hover: color-mix(in srgb, var(--bright) 4%, var(--white)); --raised: var(--white); --band: var(--ice); --line: color-mix(in srgb, var(--navy) 16%, transparent); --line-soft: color-mix(in srgb, var(--navy) 10%, transparent); --line-faint: color-mix(in srgb, var(--navy) 6%, transparent); --text: var(--navy); --text-body: var(--ink-body); --text-dim: color-mix(in srgb, var(--navy) 70%, transparent); --text-faint: color-mix(in srgb, var(--navy) 66%, transparent); --text-error: #B3261E; --ok: #15703F; --btn-bg: var(--bright); --btn-bg-hover: var(--bright-deep); --btn-ink: var(--white); --shadow: 0 1px 2px color-mix(in srgb, var(--navy) 6%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--navy) 30%, transparent); --shadow-lift: 0 2px 4px color-mix(in srgb, var(--navy) 6%, transparent), 0 24px 48px -22px color-mix(in srgb, var(--bright) 38%, transparent); /* The logo's ribbon: navy into bright into cyan. Decoration only. */ --ribbon: linear-gradient(100deg, var(--navy) 0%, var(--royal) 30%, var(--bright) 62%, var(--cyan) 100%); --ice-wash: radial-gradient(80% 120% at 85% 10%, color-mix(in srgb, var(--bright) 9%, transparent), transparent 62%), linear-gradient(180deg, var(--ice) 0%, var(--white) 100%); --navy-grad: radial-gradient(90% 120% at 90% 0%, color-mix(in srgb, var(--bright) 34%, transparent), transparent 60%), linear-gradient(160deg, var(--navy-hi) 0%, var(--navy) 55%, var(--navy-deep) 100%); /* ---- 3. TYPE ----------------------------------------------------------- Montserrat and Open Sans, as the playbook specifies. JetBrains Mono for instrument output (lot numbers, SKUs, CAS, report numbers): the change that makes a store read as analytical rather than as a supplement shop. */ --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --fw-black: 700; --fw-bold: 600; --fw-med: 500; --fs-hero: clamp(36px, 5vw, 64px); --fs-h2: clamp(28px, 3.3vw, 42px); --fs-h3: 19px; --fs-body: 16px; --fs-small: 14px; --fs-label: 12px; --fs-micro: 11px; --track-eyebrow: .16em; --track-btn: .01em; --track-nav: .01em; /* ---- 4. SHAPE ---------------------------------------------------------- Precise, not soft: 14px cards, 10px controls, pills only for labels. */ --radius-panel: 22px; --radius: 14px; --radius-sm: 10px; --radius-pill: 999px; --border: 1px solid var(--line); --max: 1240px; --gutter: 16px; --section-y: 96px; --section-y-sm:60px; --ease: cubic-bezier(.16,.9,.24,1); --t-fast: .2s; --t-med: .35s; --z-marquee: 400; --z-sticky: 450; --z-drawer: 500; --z-overlay: 600; --z-gate: 900; } @media (min-width: 768px) { :root { --gutter: 28px; } } /* ---- 5. DARK TONE: navy panels ----------------------------------------- */ .tone-dark { --accent: var(--sky); --accent-bright: var(--sky); --accent-soft: color-mix(in srgb, var(--sky) 12%, transparent); --accent-line: color-mix(in srgb, var(--sky) 38%, transparent); --accent-fill: var(--sky); --bg: var(--navy); --bg-alt: var(--navy-deep); --panel: color-mix(in srgb, var(--white) 5%, var(--navy)); --surface: color-mix(in srgb, var(--white) 5%, transparent); --surface-hover: color-mix(in srgb, var(--white) 9%, transparent); --band: var(--navy-deep); --line: color-mix(in srgb, var(--white) 22%, transparent); --line-soft: color-mix(in srgb, var(--white) 14%, transparent); --line-faint: color-mix(in srgb, var(--white) 8%, transparent); --text: var(--white); --text-body: color-mix(in srgb, var(--white) 82%, transparent); --text-dim: color-mix(in srgb, var(--white) 72%, transparent); --text-faint: color-mix(in srgb, var(--white) 64%, transparent); --btn-bg: var(--white); --btn-bg-hover: var(--ice-2); --btn-ink: var(--navy); color: var(--text-body); }