/* ===================================================================== TOKENS: South Shore Research store The ONLY file that names a color, a font or a radius. Redesign, 12 Oct 2026. The owner's reference was bluumpeptides.com: a quiet editorial store. Near-white paper, near-black ink, one pale blue for the bands, very large tight headlines with a single italic serif word, soft grey product tiles, generous rounding, almost no decoration. What makes it South Shore and not a copy: the client's logo, its surf-to-cobalt gradient used sparingly (the verified mark, rules, the accent word), deep cobalt as the accent ink, and a real lot record in the hero where the reference has an empty frame. From the client's logo (images/brand/logo-source.png; no brand book yet): Surf #00D4FE the light end of the SSR gradient Current #00A3FD the middle Cobalt #0150F0 the deep end Around it: Paper #FCFCFA the page White #FFFFFF raised panels Fog #F1F3F5 product tiles, quiet panels Tide #D4E5F3 the pale band: top bar, footer, soft buttons Tide 2 #E6F0F8 lighter tide, selected states Ink #0E1820 text and the solid buttons Measured, never eyeballed (WCAG AA is 4.5:1 for body text): paper white fog tide tide2 ink #0E1820 17.47 17.95 16.13 13.93 15.54 body #3A4853 9.16 9.41 8.46 7.30 8.15 dim #5A6772 5.65 5.80 5.22 4.51 5.03 deep #0A47C9 7.41 7.62 6.85 5.91 6.59 accent text cobalt #0150F0 6.00 6.16 5.54 4.78 5.34 fills, large text reef #127A55 5.19 5.33 4.79 FAILS 4.61 "verified", never on tide error #B3261E 6.36 6.54 5.88 5.07 5.66 current #00A3FD FAILS everywhere: decoration only surf #00D4FE FAILS everywhere: decoration only white on ink 17.95: the solid button. ===================================================================== */ :root { /* ---- 1. BRAND --------------------------------------------------------- */ --surf: #00D4FE; --current: #00A3FD; --cobalt: #0150F0; --deep: #0A47C9; --paper: #FCFCFA; --white: #FFFFFF; --fog: #F1F3F5; --fog-2: #E8ECEF; --tide: #D4E5F3; --tide-2: #E6F0F8; --ink: #0E1820; --ink-2: #1B2833; --reef: #127A55; /* ---- 2. ROLES ---------------------------------------------------------- */ --accent: var(--deep); --accent-bright: var(--cobalt); --accent-deep: var(--ink); --accent-soft: var(--tide-2); --accent-line: color-mix(in srgb, var(--cobalt) 34%, transparent); --accent-fill: var(--cobalt); --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) 88%, transparent); --ghost-bg: transparent; --line: color-mix(in srgb, var(--ink) 16%, transparent); --line-soft: color-mix(in srgb, var(--ink) 10%, transparent); --line-faint: color-mix(in srgb, var(--ink) 6%, transparent); --text: var(--ink); --text-body: #3A4853; --text-dim: #5A6772; --text-faint: #5A6772; --text-error: #B3261E; --ok: var(--reef); --btn-bg: var(--ink); --btn-bg-hover: var(--ink-2); --btn-ink: var(--white); --btn-soft: var(--tide); --btn-soft-hover: #C3D9EC; --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 12px 32px -18px color-mix(in srgb, var(--ink) 22%, transparent); --shadow-lift: 0 2px 4px color-mix(in srgb, var(--ink) 5%, transparent), 0 30px 60px -28px color-mix(in srgb, var(--ink) 34%, transparent); /* The logo's gradient, at the logo's angle. Decoration only. */ --grad: linear-gradient(115deg, var(--surf) 0%, var(--current) 48%, var(--cobalt) 100%); /* The gradient as TEXT (the italic accent word): stops dark enough to read on paper. #0A6FC4 4.97, cobalt 6.00, deep 7.41. */ --grad-text: linear-gradient(110deg, #0A6FC4 0%, var(--cobalt) 55%, var(--deep) 100%); /* ---- 3. TYPE ----------------------------------------------------------- Geist for everything set in roman: a neutral grotesque that holds very large and very tight. Instrument Serif italic for the one accent word in a headline. Geist Mono for instrument output: lot numbers, report numbers, results, catalog numbers. */ --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --fw-black: 600; --fw-bold: 600; --fw-med: 500; --fs-hero: clamp(44px, 8.4vw, 118px); --fs-h2: clamp(32px, 4.4vw, 60px); --fs-h3: 19px; --fs-body: 16px; --fs-small: 14px; --fs-label: 12px; --fs-micro: 11px; --track-eyebrow: .14em; --track-btn: 0; --track-nav: 0; /* ---- 4. SHAPE ---------------------------------------------------------- */ --radius-xl: 28px; --radius-lg: 22px; --radius-panel: 22px; --radius: 16px; --radius-sm: 10px; --radius-btn: 12px; --radius-pill: 999px; --border: 1px solid var(--line); /* The previous design's chamfers, retired: kept as no-ops so nothing that still names them clips. */ --chamfer: none; --chamfer-sm: none; --chamfer-lg: none; --max: 1320px; --gutter: 16px; --section-y: 88px; --section-y-sm:64px; --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; color-scheme: light; } @media (min-width: 768px) { :root { --gutter: 32px; } } @media (min-width: 1200px) { :root { --gutter: 40px; } } /* ---- 5. INK TONE: the few dark panels (the carton band) ---------------- */ .tone-dark { --accent: var(--surf); --accent-bright: var(--surf); --accent-soft: color-mix(in srgb, var(--surf) 12%, transparent); --accent-line: color-mix(in srgb, var(--surf) 36%, transparent); --accent-fill: var(--surf); --bg: var(--ink); --bg-alt: var(--ink-2); --panel: var(--ink-2); --surface: color-mix(in srgb, var(--white) 6%, transparent); --surface-hover: color-mix(in srgb, var(--white) 10%, 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) 82%, transparent); --text-dim: color-mix(in srgb, var(--white) 70%, transparent); --text-faint: color-mix(in srgb, var(--white) 66%, transparent); --btn-bg: var(--white); --btn-bg-hover: var(--tide); --btn-ink: var(--ink); color: var(--text-body); }