/* Hallmark · genre: editorial · macrostructure: Long Document (editorial) * theme: custom "editorial-warm" · paper oklch(97.5% .009 83) ivory * accent oklch(60% .155 47) burnt-orange (brand) + oklch(74% .135 75) amber * display Fraunces · body Hanken Grotesk · axes: light paper / roman-serif display / warm accent * Locked design system for goldenpetbrands.com mockup — every page shares it. */ :root { /* ---- Paper (TRUE NEUTRAL — chroma 0 = pure gray, no beige cast. * 2026-05-29 Brittany: tan/beige is not in the brand. Brand colors live in * --color-accent (orange) and --color-amber (gold); paper backgrounds are * now neutral so the brand colors do the warmth lifting. Lightness levels * preserved so the band alternation (paper / paper-2 / paper-3) still reads. ---- */ /* 2026-06-02: collapsed paper-2 and paper-3 onto paper (all near-pure white). The slight tonal banding was reading as beige to Brittany at her display calibration. Site is now mono-white across all editorial bands; visual separation between sections relies on rules, whitespace, and photo surfaces — not on background-color shifts. Previous values archived in comments next to each token below for fast reversion if needed. */ --color-paper: oklch(99% 0 0); /* main surface — near-white, no hue */ --color-paper-2: oklch(99% 0 0); /* WAS oklch(97% 0 0); now matches paper */ --color-paper-3: oklch(99% 0 0); /* WAS oklch(94.5% 0 0); now matches paper */ /* ---- Ink (warm near-black, never pure black) ---- */ --color-ink: oklch(24% 0.018 58); /* dark feature-section surface */ --color-ink-2: oklch(31% 0.018 56); /* ---- Text ---- */ --color-text: oklch(28% 0.016 55); --color-text-2: oklch(44% 0.013 55); --color-text-3: oklch(56% 0.011 58); /* captions, meta, muted */ --color-on-dark: oklch(95% 0.01 84); /* text on ink surfaces */ --color-on-dark-2:oklch(78% 0.012 78); /* ---- Accent — restored to OFFICIAL brand orange #FF6C15 on 2026-06-01 * per Brittany's call. The terracotta shift was visually quieter * but broke parity with the logo SVG, packaging, and product * photography. Web accent must match logo brand colors. ---- */ --color-accent: oklch(70% 0.196 42); /* official brand orange #FF6C15 — underlines, motif, checkmarks, hover */ --color-accent-ink: oklch(50% 0.15 43); /* deep brand orange — link text + button fills (passes AA on white) */ --color-accent-em: oklch(64% 0.196 42); /* bright brand orange #E85600 — italic headline highlights (.accent-em on light); logo hue+chroma, 6% darker so large headline text holds WCAG AA (3.64:1 on white) */ --color-amber: oklch(80% 0.172 79); /* official brand gold #FFAE00 — accents on dark bands */ /* ---- Hairlines & rules — chroma 0 (neutral gray) + lightness pushed UP toward * paper so dividers whisper instead of "lining" up across quiet sections. * 2026-05-29 Brittany: "remove the faint random lines" — bumped rule 86% → 93% * so the lightness delta from paper (99%) drops 13pt → 6pt. Still visible * where structurally needed (table-row separations, card borders) but no * longer reads as a busy line through empty whitespace. * --color-rule-dark stays warm (it sits on the dark ink band where neutral * grays would read cold). ---- */ --color-rule: oklch(93% 0 0); --color-rule-strong: oklch(82% 0 0); --color-rule-dark: oklch(40% 0.015 60); /* on ink surfaces */ /* ---- Focus ---- */ --color-focus: oklch(52% 0.16 46); /* ---- Scrim + soft on-dark tokens (added 2026-05-28 audit pass — replaces inline rgba/hex) ---- */ --color-scrim-strong: color-mix(in oklch, var(--color-ink) 45%, transparent); --color-scrim-med: color-mix(in oklch, var(--color-ink) 30%, transparent); --color-scrim-soft: color-mix(in oklch, var(--color-ink) 10%, transparent); --color-on-dark-soft-06: color-mix(in oklch, var(--color-on-dark) 6%, transparent); --color-on-dark-soft-10: color-mix(in oklch, var(--color-on-dark) 10%, transparent); --color-on-dark-soft-12: color-mix(in oklch, var(--color-on-dark) 12%, transparent); --color-on-dark-soft-15: color-mix(in oklch, var(--color-on-dark) 15%, transparent); --color-on-dark-soft-20: color-mix(in oklch, var(--color-on-dark) 20%, transparent); --color-on-dark-soft-25: color-mix(in oklch, var(--color-on-dark) 25%, transparent); --color-on-dark-soft-35: color-mix(in oklch, var(--color-on-dark) 35%, transparent); --color-on-dark-soft-60: color-mix(in oklch, var(--color-on-dark) 60%, transparent); --color-accent-glow: color-mix(in oklch, var(--color-accent) 18%, transparent); /* ---- Type — single-family system 2026-06-03. * Sofia Sans does EVERYTHING — body, UI, AND display/headlines. This is * the brand/logo font (gpb-logo.svg is set in Sofia Sans), so the whole * site now shares the wordmark's letterforms. Hierarchy comes from * weight + size + tracking, not a second typeface. * * Why: the serif-display + sans-body Google pairing (we had Newsreader * over Sofia Sans) is the default archetype of AI site builders and read * as "templated." A single-typeface system can't read as AI-generated — * it's literally the logo extended. --font-display now points at Sofia * Sans so every display element flips with one token. * * Old values preserved for revert: * --font-display: "Newsreader", Georgia, "Times New Roman", serif; (2026-06-01) * --font-display: "Fraunces", Georgia, "Times New Roman", serif; (original) * --font-body: "Hanken Grotesk", system-ui, ... ; (original) * ---- */ --font-display: "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 1.0625rem; --text-lg: 1.1875rem; --text-xl: clamp(1.35rem, 1.12rem + 0.95vw, 1.6rem); --text-2xl: clamp(1.6rem, 1.22rem + 1.6vw, 2.15rem); --text-3xl: clamp(2.05rem, 1.5rem + 2.5vw, 3rem); --text-display-s: clamp(2.5rem, 1.7rem + 3.4vw, 3.9rem); --text-display: clamp(3.05rem, 1.95rem + 5vw, 5.4rem); --leading-tight: 1.04; --leading-snug: 1.18; --leading-body: 1.62; --measure: 64ch; /* ---- Spacing (4-pt scale) ---- */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1.25rem; --space-lg: 2rem; --space-xl: 3.25rem; --space-2xl: 5.25rem; --space-3xl: 7.5rem; /* ---- Motion ---- * Two ease-out curves co-exist by design: * --ease-out : dramatic decelerate — for in-place transforms (button arrows, card * hover lifts, link underlines). Fast in, soft landing — feels snappy. * --ease-soft : gentle decelerate — for reveals, fades, nav condense, panel slides. * More linear feel — never harsh, never sudden. * --ease-spring : subtle overshoot — used sparingly on tactile micro-interactions * (CTA press, tab confirm). Adds delight without bouncing. */ --dur-short: 160ms; /* hover micro-interactions */ --dur-med: 300ms; /* card lifts, panel reveals */ --dur-long: 600ms; /* reveal entrances */ --dur-xlong: 900ms; /* feature-section orchestrated reveals */ --dur-feature: 1200ms; /* hero-scale slow pans */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* ---- Radius (hybrid: softened, photography-forward) ---- */ --radius-sm: 4px; --radius-md: 8px; /* buttons, chips */ --radius-lg: 16px; /* images, cards, photo frames */ --radius-pill: 100px; /* ---- Elevation (subtle, warm-tinted — used sparingly) ---- */ --shadow-soft: 0 1px 2px oklch(25% 0.02 60 / 0.05), 0 10px 26px oklch(25% 0.02 60 / 0.07); --shadow-card: 0 1px 3px oklch(25% 0.02 60 / 0.06), 0 16px 40px oklch(25% 0.02 60 / 0.10); /* ---- Elevation z-scale ---- */ --z-base: 1; --z-nav: 100; --z-overlay: 200; --z-splash: 500; --shell: 76rem; /* max content width */ --shell-wide: 90rem; }