/* ===================================================================== TOKENS: PuraCore Research store The ONLY file that names a color, a font or a radius. Design, 20 Oct 2026. The brand is "pure core": a circle holding a wave, and the client's own social covers set the lockup between clear glass arcs on white. So the store is built on clarity rather than night: bright ice paper, white glass cards, caustic light, the navy as ink, Bright Blue as light. The one dark band (the record) and the footer are the navy. Brand kit (images/brand/brand-kit.pdf): Deep Navy #08264F ink: headings, solid buttons, dark panels Bright Blue #177DCA light: large type, the wave, decoration Slate Gray #4B596D running text Around it: Paper #F6F9FC the page: ice, not white White #FFFFFF raised cards, glass Tile #F1F5FA product tiles: the vial photographs' own sweep Mist #E6EEF7 soft buttons, quiet bands Deep #1269AE Bright Blue taken down until it carries body text Night #061B39 the darkest band Measured, never eyeballed (WCAG AA is 4.5:1 for body text, 3:1 large): paper white tile mist navy night navy #08264F 14.19 14.99 13.70 12.81 - - slate #4B596D 6.74 7.12 6.50 6.08 - - dim #5A687C 5.36 5.67 5.18 4.84 - - deep #1269AE 5.43 5.74 5.24 4.90 - - accent text ok #0E7A50 5.07 5.36 4.90 4.58 - - error #B3261E 6.19 6.54 5.97 5.58 - - bright #177DCA 4.12 4.35 3.98 FAILS 3.44 3.94 large type only sky #6EC4F5 - - - - 7.77 8.89 accent on navy ice #9AD6F8 - - - - 9.53 10.91 white #FFFFFF - - - - 14.99 17.16 ===================================================================== */ @font-face { font-family: "Glacial Indifference"; src: url(/assets/fonts/GlacialIndifference-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Glacial Indifference"; src: url(/assets/fonts/GlacialIndifference-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---- 1. BRAND --------------------------------------------------------- */ --surf: #6EC4F5; /* sky: accent text on navy */ --current: #177DCA; /* brand Bright Blue */ --cobalt: #1269AE; /* Bright Blue, deep enough for text */ --deep: #1269AE; --navy: #08264F; /* brand Deep Navy */ --night: #061B39; --slate: #4B596D; /* brand Slate Gray */ --ice: #9AD6F8; --paper: #F6F9FC; --white: #FFFFFF; --fog: #F1F5FA; --fog-2: #E9F0F8; --tide: #E6EEF7; --tide-2: #EEF4FB; --ink: #08264F; --ink-2: #0C3165; --reef: #0E7A50; /* ---- 2. ROLES ---------------------------------------------------------- */ --accent: var(--cobalt); --accent-bright: var(--current); --accent-deep: var(--navy); --accent-soft: var(--tide-2); --accent-line: color-mix(in srgb, var(--current) 36%, transparent); --accent-fill: var(--current); --bg: var(--paper); --bg-alt: var(--fog); --panel: var(--white); --surface: var(--fog); --surface-hover: var(--fog-2); --raised: var(--white); --band: var(--tide); --field: var(--white); --media-bg: var(--fog); --header-bg: color-mix(in srgb, var(--paper) 78%, transparent); --ghost-bg: transparent; --line: color-mix(in srgb, var(--navy) 15%, transparent); --line-soft: color-mix(in srgb, var(--navy) 10%, transparent); --line-faint: color-mix(in srgb, var(--navy) 6%, transparent); --text: var(--ink); --text-body: var(--slate); --text-dim: #5A687C; --text-faint: #5A687C; --text-error: #B3261E; --ok: var(--reef); --btn-bg: var(--navy); --btn-bg-hover: var(--cobalt); --btn-ink: var(--white); --btn-soft: var(--tide); --btn-soft-hover: #D6E3F1; --shadow: 0 1px 2px color-mix(in srgb, var(--navy) 5%, transparent), 0 18px 40px -24px color-mix(in srgb, var(--navy) 28%, transparent); --shadow-lift: 0 2px 4px color-mix(in srgb, var(--navy) 5%, transparent), 0 40px 80px -36px color-mix(in srgb, var(--navy) 40%, transparent); --shadow-glow: 0 30px 80px -30px color-mix(in srgb, var(--current) 45%, transparent); /* Glass: the white cards over the light photographs. */ --glass: color-mix(in srgb, var(--white) 62%, transparent); --glass-strong: color-mix(in srgb, var(--white) 82%, transparent); --glass-line: color-mix(in srgb, var(--white) 90%, transparent); --glass-blur: blur(22px) saturate(1.5); /* The mark's gradient: sky into bright into navy. Decoration only. */ --grad: linear-gradient(120deg, var(--surf) 0%, var(--current) 45%, var(--navy) 100%); /* As TEXT on light grounds, large type only: deep 5.43 to bright 4.12. */ --grad-text: linear-gradient(100deg, var(--cobalt) 0%, var(--current) 60%, #2A8FD8 100%); /* As TEXT on navy and night: sky 7.77 to ice 9.53. */ --grad-text-dark: linear-gradient(100deg, var(--ice) 0%, var(--surf) 100%); /* ---- 3. TYPE ----------------------------------------------------------- The kit names Glacial Indifference (primary: headings, titles) and Open Sans (secondary). Glacial is OFL and self-hosted (images/fonts/ has the license). Its Regular at display size is the brand's airy voice; Bold for small titles. Open Sans for running text, as the kit says. IBM Plex Mono for instrument output: lots, reports, SKUs, the vial labels. */ --font-display: "Glacial Indifference", "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif; --font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Glacial Indifference", "Century Gothic", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --fw-black: 700; --fw-bold: 700; --fw-med: 400; --fs-hero: clamp(46px, 7.4vw, 112px); --fs-h2: clamp(36px, 4.6vw, 66px); --fs-h3: 20px; --fs-body: 16px; --fs-small: 14px; --fs-label: 12px; --fs-micro: 11px; --track-eyebrow: .22em; --track-btn: 0; --track-nav: 0; /* ---- 4. SHAPE ---------------------------------------------------------- */ --radius-xl: 34px; --radius-lg: 26px; --radius-panel: 26px; --radius: 20px; --radius-sm: 14px; --radius-btn: 999px; --radius-pill: 999px; --border: 1px solid var(--line); --chamfer: none; --chamfer-sm: none; --chamfer-lg: none; --max: 1320px; --gutter: 16px; --section-y: 112px; --section-y-sm:72px; --ease: cubic-bezier(.16,.9,.24,1); --t-fast: .2s; --t-med: .45s; --z-marquee: 400; --z-sticky: 450; --z-drawer: 500; --z-overlay: 600; --z-gate: 900; color-scheme: light; } @media (min-width: 768px) { :root { --gutter: 32px; } } @media (min-width: 1200px) { :root { --gutter: 40px; } } /* ---- 5. NAVY TONE: the record band, the featured card, the footer ------- */ .tone-dark { --accent: var(--surf); --accent-bright: var(--surf); --accent-soft: color-mix(in srgb, var(--surf) 14%, transparent); --accent-line: color-mix(in srgb, var(--surf) 38%, transparent); --accent-fill: var(--surf); --bg: var(--navy); --bg-alt: var(--ink-2); --panel: var(--ink-2); --surface: color-mix(in srgb, var(--white) 7%, transparent); --surface-hover: color-mix(in srgb, var(--white) 11%, transparent); --raised: var(--ink-2); --field: var(--ink-2); --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) 84%, transparent); --text-dim: color-mix(in srgb, var(--white) 72%, transparent); --text-faint: color-mix(in srgb, var(--white) 68%, transparent); --btn-bg: var(--white); --btn-bg-hover: var(--tide); --btn-ink: var(--navy); color: var(--text-body); }