/* ===================================================================== TOKENS: Ezranova store The ONLY file that names a color, a font or a radius. Design, 19 Oct 2026. The owner's reference was primedoctorrx.vercel.app, a premium telehealth site: a full-bleed cinematic hero, a big quiet statement, product cards in a horizontal rail, numbered steps, one dark featured card among light ones, tall photo panels that open on hover, a numbered FAQ. Learned: that rhythm and that restraint. Not taken: its people, its warm cream and gold, its copy, its claims (it sells prescriptions; this store sells research materials and says nothing about people at all). Ezranova's own: the brand kit's navy and blues, the wolf mark, a night ridge under one bright new star (the "nova") in place of people, cool ice paper, and a real lot record wherever the reference sells a promise. Brand kit (images/brand/brand-kit.pdf): Deep Navy #0A3469 dark panels, the footer Royal Blue #055BB2 accent text, the vial caps Bright Blue #1692E5 decoration, large type on navy Around it: Paper #F3F6FA the page: cool ice, not white White #FFFFFF raised cards Tile #EEF2F7 product tiles: the vial photographs' own sweep Mist #DCE6F2 soft buttons, quiet bands Ink #071A33 text and the solid buttons (navy taken near black) Night #05142A the hero and the darkest band Measured, never eyeballed (WCAG AA is 4.5:1 for body text): paper white tile mist navy night ink #071A33 16.08 17.43 15.51 13.82 - - body #34465C 8.90 9.65 8.58 7.65 - - dim #56677C 5.34 5.79 5.15 4.59 - - royal #055BB2 6.16 6.68 5.94 5.29 - - accent text navy #0A3469 11.34 12.29 10.94 9.74 - - ok #0E7A50 4.94 5.36 4.77 FAILS - - never on mist error #B3261E 6.03 6.54 5.81 5.18 - - bright #1692E5 3.09 3.35 FAILS FAILS 3.67 5.51 large type, decoration sky #5DB4F0 - - - - 5.42 8.12 accent text on navy ice #9FD0F5 - - - - 7.50 11.24 white #FFFFFF - - - - 12.29 18.42 ===================================================================== */ :root { /* ---- 1. BRAND --------------------------------------------------------- */ --surf: #5DB4F0; /* sky: accent text on navy */ --current: #1692E5; /* brand Bright Blue */ --cobalt: #055BB2; /* brand Royal Blue */ --deep: #055BB2; --navy: #0A3469; /* brand Deep Navy */ --night: #05142A; --ice: #9FD0F5; --paper: #F3F6FA; --white: #FFFFFF; --fog: #EEF2F7; --fog-2: #E3EAF3; --tide: #DCE6F2; --tide-2: #E8EFF7; --ink: #071A33; --ink-2: #0D2546; --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(--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) 86%, transparent); --ghost-bg: transparent; --line: color-mix(in srgb, var(--ink) 15%, 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: #34465C; --text-dim: #56677C; --text-faint: #56677C; --text-error: #B3261E; --ok: var(--reef); --btn-bg: var(--ink); --btn-bg-hover: var(--navy); --btn-ink: var(--white); --btn-soft: var(--tide); --btn-soft-hover: #CBD9EA; --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 14px 34px -20px color-mix(in srgb, var(--navy) 30%, transparent); --shadow-lift: 0 2px 4px color-mix(in srgb, var(--ink) 5%, transparent), 0 34px 64px -30px color-mix(in srgb, var(--navy) 42%, transparent); /* The mark's gradient: bright blue into royal into navy. Decoration only. */ --grad: linear-gradient(120deg, var(--current) 0%, var(--cobalt) 55%, var(--navy) 100%); /* As TEXT on light grounds: royal 6.16 to navy 11.34, every stop passes. */ --grad-text: linear-gradient(110deg, var(--cobalt) 0%, #0A4C96 55%, var(--navy) 100%); /* As TEXT on navy and night: sky 5.42 to ice 7.50. */ --grad-text-dark: linear-gradient(110deg, var(--ice) 0%, var(--surf) 100%); /* ---- 3. TYPE ----------------------------------------------------------- The kit names Lovelo (display, all caps) and Open Sans (text). Lovelo has no web license on file, so Montserrat carries the display role: the same geometric construction, set mixed case and tight for headlines, and in spaced capitals for eyebrows where Lovelo would be. Open Sans for running text, as the kit says. Newsreader italic for the one accent word in a headline. IBM Plex Mono for instrument output: lot numbers, report numbers, SKUs, the same face as the vial labels. */ --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --fw-black: 700; --fw-bold: 600; --fw-med: 500; --fs-hero: clamp(42px, 7.2vw, 104px); --fs-h2: clamp(32px, 4.2vw, 58px); --fs-h3: 19px; --fs-body: 16px; --fs-small: 14px; --fs-label: 12px; --fs-micro: 11px; --track-eyebrow: .2em; --track-btn: 0; --track-nav: 0; /* ---- 4. SHAPE ---------------------------------------------------------- */ --radius-xl: 30px; --radius-lg: 24px; --radius-panel: 24px; --radius: 18px; --radius-sm: 12px; --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: 104px; --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 dark panels, 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(--ink); color: var(--text-body); }