/* ========================================================================== Gen1Pro Nutrition — Design Tokens Authoring source of truth. Mirrored into theme.json when the theme is scaffolded; never hand-edit the two out of sync. Aesthetic: near-black canvas, performance red, heavy condensed display type, rectangular geometry, generous vertical rhythm. ========================================================================== */ :root { /* ---------------------------------------------------------------------- COLOR LIGHT theme, matching the BPN reference. Values were read from the live site's computed styles and :root custom properties, not sampled by eye — see reference/bpn/TOKEN-SHEET.md. The page is white; the hero is dark only because the photograph is. Neutrals are WARM (BPN's --warm-gray / --dark-gray ramps), not neutral greys — that warmth is a large part of why their page feels the way it does. -------------------------------------------------------------------- */ /* Surfaces */ --g1-bg: #FFFFFF; /* page background (BPN --color_body_bg) */ --g1-surface: #FFFFFF; /* cards — separated by border, not fill */ --g1-surface-2: #F6F4F3; /* inputs, hovered cards (--warm-gray-4) */ --g1-surface-3: #DFDBD7; /* pressed states, active chips (--warm-gray-3) */ --g1-band: #EEEEEE; /* category band — measured on BPN */ --g1-band-alt: #F0F0F0; /* trust strip — measured on BPN */ --g1-line: #EBEBEB; /* hairlines (--color_borders) */ --g1-line-strong: #CCCCCC; /* input borders (--color_text_field_border) */ /* Text Ratios below are stated against the DARKEST background each colour actually sits on — #EEEEEE, not #FFFFFF. Quoting the white-only figure is how the previous (dark) token set ended up shipping a 4.25:1 failure. */ --g1-text: #000000; /* 18.1:1 on #EEE — primary */ --g1-text-strong: #2D2A26; /* 12.3:1 — warm near-black (--dark-gray-1) */ --g1-text-muted: #62605D; /* 5.4:1 — secondary (--dark-gray-2) */ --g1-text-subtle: #6C6C6C; /* 4.5:1 — fine print. BPN's own #767676 is 4.54 on white but only 3.91 on the #EEE band, so it is darkened here. */ --g1-text-invert: #FFFFFF; /* on dark imagery and red fills */ /* Brand accent — Gen1's own red, sampled from assets/media/brand/logo-colour.png. BPN's is #EB1000; we keep Gen1's. ACCESSIBILITY CONTRACT: --g1-red on #FFFFFF = 4.67:1 -> passes AA at any size on white --g1-red on #EEEEEE = 4.03:1 -> LARGE TEXT ONLY on the bands --g1-text-invert on red = 4.67:1 -> white-on-red CTAs pass --g1-red-text (small text) = 4.56:1 on #EEE, 5.29:1 on white */ --g1-red: #E41C26; /* CTAs, accents, marquee */ --g1-red-hover: #B1151D; /* button hover / active */ --g1-red-text: #D41A23; /* small red text on light — AA safe anywhere */ --g1-red-tint: rgba(228, 28, 38, 0.08); /* washes, selected chips */ --g1-red-glow: rgba(228, 28, 38, 0.30); /* focus ring halo */ /* Functional */ --g1-success: #14804A; /* darkened for light backgrounds */ --g1-warning: #B45309; --g1-error: #C0111A; --g1-star: #E8A317; /* Dark surfaces — used by the hero, footer and drawers, which stay dark. */ --g1-dark: #0C0C0C; --g1-dark-2: #1C1C1C; --g1-dark-line: #2A2A2A; /* Ink for those dark surfaces. The light-theme greys are tuned against a white-to-#EEE range and drop to 3.1:1 on #0C0C0C, so anything sitting on a dark surface takes this ramp instead. Ratios are against --g1-dark. */ --g1-on-dark: #FFFFFF; /* 20.0:1 */ --g1-on-dark-muted: #C9C6C2; /* 11.1:1 — links, contact, body */ --g1-on-dark-subtle: #9C9995; /* 6.2:1 — disclaimers, fine print */ /* ---------------------------------------------------------------------- TYPOGRAPHY Three families, each self-hosted as a subsetted woff2. No CDN — one fewer third-party connection, and the display face is preloaded for LCP. -------------------------------------------------------------------- */ --g1-font-display: "Archivo Black", "Arial Black", Impact, sans-serif; /* H1/H2, weight 900 */ --g1-font-ui: "Archivo", system-ui, sans-serif; /* labels, buttons, subheads */ --g1-font-body: "Archivo", system-ui, -apple-system, sans-serif; /* body */ --g1-font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* SKUs, order numbers */ /* Type scale — fluid via clamp(), so 360px and 1440px both read correctly without a stack of breakpoint overrides. */ /* Capped at BPN's measured values, not above them: their hero H1 computes 96px and their section H2 48px at 1440. We were rendering 120px / 64px. */ --g1-text-display-xl: clamp(3rem, 9vw, 6rem); /* hero H1 — BPN 96px */ --g1-text-display-l: clamp(2.25rem, 5vw, 3rem); /* section H2 — BPN 48px */ --g1-text-display-m: clamp(1.75rem, 3.5vw, 2.5rem); /* sub-section H3 */ --g1-text-h4: 1.25rem; --g1-text-body-l: 1.125rem; --g1-text-body: 1rem; --g1-text-body-s: 0.875rem; --g1-text-label: 0.8125rem; /* all-caps eyebrows, badges */ --g1-text-micro: 0.75rem; /* fine print, disclaimers */ /* Line height — display type is set tight, body type loose. */ --g1-leading-display: 0.92; --g1-leading-tight: 1.1; --g1-leading-snug: 1.35; --g1-leading-body: 1.65; /* Letter spacing — negative on huge display, wide on small all-caps. The wide tracking on labels is what makes uppercase legible at 13px. */ --g1-tracking-display: -0.045em; /* BPN: -4.32px at 96px */ --g1-tracking-tight: -0.03em; /* BPN: -1.44px at 48px */ --g1-tracking-normal: 0; --g1-tracking-wide: 0.08em; --g1-tracking-wider: 0.12em; --g1-weight-regular: 400; --g1-weight-medium: 500; --g1-weight-semibold: 600; --g1-weight-bold: 700; /* ---------------------------------------------------------------------- SPACING — 4px base -------------------------------------------------------------------- */ --g1-space-1: 0.25rem; /* 4px */ --g1-space-2: 0.5rem; /* 8px */ --g1-space-3: 0.75rem; /* 12px */ --g1-space-4: 1rem; /* 16px */ --g1-space-5: 1.5rem; /* 24px */ --g1-space-6: 2rem; /* 32px */ --g1-space-7: 3rem; /* 48px */ --g1-space-8: 4rem; /* 64px */ --g1-space-9: 5rem; /* 80px */ --g1-space-10: 6rem; /* 96px */ --g1-space-11: 8rem; /* 128px */ --g1-space-12: 10rem; /* 160px */ /* Section rhythm. Measured off BPN: product rows 60px top / 72px bottom, category band 32px, trust strip 24px. The previous 64–128px made our page roughly twice as tall for the same content, which was the single biggest reason the two felt different in pace. */ --g1-section-y: clamp(2.5rem, 5vw, 4.5rem); /* 40–72px */ --g1-section-y-tight: clamp(1.5rem, 3vw, 2rem); /* 24–32px */ --g1-section-y-band: 2rem; /* 32px, category band */ /* ---------------------------------------------------------------------- LAYOUT -------------------------------------------------------------------- */ /* Header height. The hero cancels this with a negative margin so the transparent header floats over the image; when the two drifted apart a strip of white body background showed between the announcement bar and the hero. Declared once here, consumed by layout.css and home.css. */ --g1-header-h: 68px; --g1-container: 1440px; /* outer max */ --g1-container-inner: 1312px; /* text and grid content — BPN's measured content width */ --g1-container-prose: 68ch; /* article body measure */ --g1-gutter: clamp(1rem, 4vw, 3rem); --g1-grid-gap: clamp(1rem, 2vw, 1.5rem); --g1-grid-gap-tight: 0.75rem; /* ---------------------------------------------------------------------- GEOMETRY — deliberately rectangular. Rounded corners soften the brand in the wrong direction; keep radii near zero. -------------------------------------------------------------------- */ --g1-radius-none: 0; --g1-radius-sm: 5px; /* cards, inputs, buttons — BPN computes 5px. The earlier 2px came from an assumption that the brand was 'deliberately rectangular'; the reference is not. */ --g1-radius-md: 4px; /* modals, drawers */ --g1-radius-pill: 999px; /* category chips only */ --g1-border: 1px solid var(--g1-line); --g1-border-strong: 1px solid var(--g1-line-strong); --g1-border-cta: 2px solid var(--g1-text); /* ---------------------------------------------------------------------- ELEVATION — used sparingly. On a near-black canvas, surface steps do most of the work; shadows are for genuinely floating UI. -------------------------------------------------------------------- */ --g1-shadow-card: 0 1px 2px rgba(45, 42, 38, 0.06); --g1-shadow-lift: 0 10px 28px rgba(45, 42, 38, 0.14); --g1-shadow-drawer: 0 0 48px rgba(45, 42, 38, 0.24); --g1-focus-ring: 0 0 0 2px var(--g1-bg), 0 0 0 4px var(--g1-red); /* ---------------------------------------------------------------------- MOTION — fast and confident. Every transition here is under 400ms; anything slower reads as sluggish on a performance brand. -------------------------------------------------------------------- */ --g1-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --g1-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --g1-duration-fast: 150ms; --g1-duration-base: 250ms; --g1-duration-slow: 400ms; --g1-marquee-duration: 30s; /* ---------------------------------------------------------------------- Z-INDEX — named, so nothing gets fixed with z-index: 9999 later. -------------------------------------------------------------------- */ --g1-z-base: 1; --g1-z-sticky: 100; /* The backdrop sits BELOW the header, not above it. `position: sticky` + z-index makes the header a stacking context, so the mega panel nested inside it can never rise above a sibling backdrop no matter what z-index the panel is given. Keeping the scrim under the header is the only ordering where the mega panel stays visible — and it leaves the nav reachable while a panel is open, which is the behaviour we want. */ --g1-z-overlay: 150; --g1-z-header: 200; --g1-z-dropdown: 300; --g1-z-drawer: 500; --g1-z-modal: 600; --g1-z-toast: 700; } /* -------------------------------------------------------------------------- BREAKPOINTS Custom properties can't be used in media queries, so these are documented here and duplicated literally at call sites. Mobile-first throughout. 360px floor — small Android, the narrowest supported width 640px sm — 2-col product grids 768px md — tablet, mega-menu still collapsed to drawer 1024px lg — desktop nav appears, 3-col grids 1280px xl — 4-col product grids 1440px xxl — container max reached ------------------------------------------------------------------------ */ /* -------------------------------------------------------------------------- REDUCED MOTION Scroll reveals, hover lifts and the marquee all respect this. The marquee is stopped rather than hidden, so the slogan still reads. ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --g1-duration-fast: 0.01ms; --g1-duration-base: 0.01ms; --g1-duration-slow: 0.01ms; --g1-marquee-duration: 0s; } } @media (min-width: 1024px) { :root { --g1-header-h: 88px; } /* BPN's header row measures 90px */ }