/* * tokens.css -- CGH INJURY LAWYERS design-system custom properties (Broadsheet skin). * ============================================================================ * THE ONE FILE YOU RESKIN PER CLIENT. gp-* NAMES KEPT (RESKIN-GUIDE invariant); * only VALUES change. Downstream sheets read --gp-* tokens; zero raw hex elsewhere. * ============================================================================ * * CGH skin v1.0 -- LOCKED 2026-06-06 (Gate 1 approved by Brian): * - Brand gold #E5B025 = PIXEL-CONFIRMED from logo (cropped-CGH_WH-GOLD_LG.png, 677px). * - Display font = Fraunces (LOCKED). NOT Playfair (Magister-reserved). Body = Hanken Grotesk. Editorial = Libre Caslon Display. * - Action accent = cardinal #B03A2E (LOCKED). * * Divergence: distinct from Pons (teal+clay+Source Serif), Magister (charcoal+#C8941E+Playfair), * and rizkad hands-off (cream/brass/burnt-orange + Cabinet/Switzer). * * Accessibility law: body text >= AA 4.5:1 (3:1 large); focus ring >= 3:1 (WCAG 1.4.11). * Bright gold #E5B025 is ~2:1 on paper -> ACCENT/HIGHLIGHT ONLY, never body text on light. * Use --gp-gold-text #7A5E10 when gold must be readable text. Re-verify after any change. */ /* ============================================================ COLOR TOKENS -- CGH BRAND CONFIG ============================================================ */ :root { /* Primary = BRAND (client royal blue). Re-skin 2026-07-03: CLIENT-DELIVERED palette (7-swatch handoff, hexes sampled from the swatch file). Royal on white = 10.3:1. */ --gp-primary: #013998; /* client royal blue -- links, nav, structure */ --gp-primary-700: #022560; /* royal dark (hover) */ --gp-primary-50: #EEEFF3; /* client near-white tint (section alternation) */ /* CTA = ACTION (cardinal red). KEPT at 2026-07-03 client-palette swap per Brian's explicit call: the client palette has no red, but red buttons out-pop royal/gold (6.0:1 white text). OFF-PALETTE BY DESIGN, do not "fix" to gold or royal. */ --gp-cta: #B03A2E; /* cardinal red -- primary action buttons */ --gp-cta-700: #8F2D23; /* cardinal dark (hover) */ /* Secondary = readable dark-gold (focus rings, secondary accents; passes 3:1). */ --gp-secondary: #7A5E10; /* gold-text / dark gold */ --gp-secondary-50: #F3EAD2; /* soft gold tint */ /* Accent = BRIGHT BRAND GOLD. Highlights, eyebrows-on-dark, ornament. Light-surface bg only. */ --gp-accent: #E5B21B; /* CGH marigold gold -- live-site brand */ /* Neutrals -- client ink spine (2026-07-03 palette). Ink on white = 18.5:1. */ --gp-ink: #031428; /* client ink navy, primary text */ --gp-slate-700: #5A6573; /* cool secondary text (kept: client palette has no AA mid-gray) */ --gp-slate-200: #CBD2DC; /* client cool gray -- rules / dividers */ --gp-bone: #F6F8FA; /* page background (kept: one step lighter than --gp-primary-50 so tints read) */ --gp-white: #FFFFFF; /* card / raised surface */ /* Fixed light/dark surfaces (do NOT swap in OS dark mode). */ --gp-static-ink: #031428; --gp-static-white: #FFFFFF; --gp-hero-panel: #031428; /* client ink hero panel (gold on ink = 9.4:1) */ --gp-hero-edge: #020D1D; /* hero gradient stop (deeper than ink) */ /* Semantic colors. */ --gp-success: #2E7D52; --gp-warning: #A8650F; --gp-error: #8F2D23; /* = cardinal-dark, on-brand error */ --gp-info: #7A5E10; /* Shadows (rgba traced to --gp-ink 28,23,16). */ --gp-shadow-sm: 0 1px 3px rgba(28, 23, 16, 0.08); --gp-shadow-md: 0 4px 16px rgba(28, 23, 16, 0.10); --gp-shadow-lg: 0 8px 32px rgba(28, 23, 16, 0.14); --gp-shadow-hero: 0 30px 70px rgba(28, 23, 16, 0.34); --gp-shadow-sticky: 0 2px 12px rgba(28, 23, 16, 0.10); /* Focus ring. Secondary dark-gold = ~4.7:1 on paper / ~5.0:1 on white (>= 3:1). */ --gp-focus-color: var(--gp-secondary); --gp-focus-offset: 3px; --gp-focus-width: 2px; /* ============================================================ TYPOGRAPHY TOKENS -- CGH BRAND CONFIG (register fonts in inc/enqueue.php) ============================================================ */ /* CGH brand fonts (re-skin 2026-06-30): display = Oswald, body = Poppins (both Google Fonts, from live site). */ --gp-font-display: 'Oswald', 'Hanken Grotesk', system-ui, sans-serif; --gp-font-body: 'Poppins', system-ui, -apple-system, sans-serif; --gp-font-editorial: 'Poppins', system-ui, sans-serif; /* pull-quotes: Poppins italic (no serif in CGH brand) */ /* Type scale -- editorial. Broadsheet adds --gp-text-display-mega (SECTION TOKENS below). */ --gp-text-display: 4rem; /* 64px */ --gp-text-h1: 3rem; /* 48px */ --gp-text-h2: 2.25rem; /* 36px */ --gp-text-h3: 1.75rem; /* 28px */ --gp-text-h4: 1.375rem; /* 22px */ --gp-text-h5: 1.125rem; /* 18px */ --gp-text-eyebrow: 0.75rem; /* 12px -- uppercase, tracked */ --gp-text-body-lg: 1.1875rem; /* 19px */ --gp-text-body: 1.0625rem; /* 17px */ --gp-text-body-sm: 0.9375rem; /* 15px */ --gp-text-caption: 0.8125rem; /* 13px */ /* Line heights. */ --gp-leading-display: 1.02; --gp-leading-h1: 1.08; --gp-leading-h2: 1.14; --gp-leading-h3: 1.2; --gp-leading-h4: 1.3; --gp-leading-h5: 1.4; --gp-leading-body-lg: 1.55; --gp-leading-body: 1.62; --gp-leading-body-sm: 1.55; --gp-leading-caption: 1.5; /* Font weights. */ --gp-weight-regular: 400; --gp-weight-medium: 500; --gp-weight-semibold: 600; --gp-weight-bold: 700; /* Eyebrow letter-spacing. */ --gp-tracking-eyebrow: 0.16em; /* ============================================================ SPACING TOKENS (brand-neutral ramp, kept) ============================================================ */ --gp-space-1: 0.25rem; --gp-space-2: 0.5rem; --gp-space-3: 0.75rem; --gp-space-4: 1rem; --gp-space-5: 1.5rem; --gp-space-6: 2rem; --gp-space-7: 3rem; --gp-space-8: 4rem; --gp-space-9: 6rem; --gp-space-10: 8rem; /* ============================================================ BORDER RADIUS -- editorial restraint (slightly tighter than SaaS default) ============================================================ */ --gp-radius-sm: 3px; --gp-radius-md: 5px; --gp-radius-lg: 10px; --gp-radius-xl: 16px; --gp-radius-full: 9999px; /* ============================================================ LAYOUT TOKENS ============================================================ */ --gp-container: 1280px; --gp-container-wide: 1440px; --gp-container-px: var(--gp-space-5); /* ============================================================ Z-INDEX TOKENS (kept) ============================================================ */ --gp-z-base: 0; --gp-z-raised: 10; --gp-z-dropdown: 100; --gp-z-sticky: 200; --gp-z-overlay: 300; --gp-z-modal: 400; --gp-z-toast: 500; /* ============================================================ TRANSITION TOKENS (kept) ============================================================ */ --gp-transition-base: 150ms ease; --gp-transition-moderate: 250ms ease; --gp-transition-slow: 400ms ease; /* ============================================================ COMPONENT-LEVEL TOKENS (colors auto-follow palette above) ============================================================ */ /* Nav -- dark navy header to match live brand (#001a3e) */ --gp-nav-height: 90px; --gp-nav-bg: #001a3e; --gp-nav-border: rgba(255, 255, 255, 0.08); --gp-nav-link: #ffffff; --gp-nav-link-active: var(--gp-accent); --gp-nav-active-bar: 2px solid var(--gp-accent); /* Buttons */ --gp-btn-px: 1.4rem; --gp-btn-py: 0.9rem; --gp-btn-radius: var(--gp-radius-md); --gp-btn-font-size: var(--gp-text-body); --gp-btn-font-weight: var(--gp-weight-bold); --gp-btn-transition: var(--gp-transition-base); /* Primary button = cardinal RED (hybrid: red CTAs on navy brand) */ --gp-btn-primary-bg: var(--gp-cta); --gp-btn-primary-text: var(--gp-white); --gp-btn-primary-bg-hover: var(--gp-cta-700); --gp-btn-primary-scale-press: 0.98; /* Secondary button */ --gp-btn-secondary-bg: var(--gp-white); --gp-btn-secondary-text: var(--gp-ink); --gp-btn-secondary-border: 1.5px solid var(--gp-ink); --gp-btn-secondary-bg-hover: var(--gp-ink); --gp-btn-secondary-text-hover: var(--gp-white); /* Tertiary button */ --gp-btn-tertiary-text: var(--gp-secondary); /* Cards */ --gp-card-bg: var(--gp-white); --gp-card-border: 1px solid var(--gp-slate-200); --gp-card-radius: var(--gp-radius-lg); --gp-card-padding: var(--gp-space-5); --gp-card-shadow-hover: var(--gp-shadow-md); /* Forms */ --gp-input-bg: var(--gp-white); --gp-input-border: 1.5px solid var(--gp-slate-700); --gp-input-radius: var(--gp-radius-md); --gp-input-padding: 0.75rem; --gp-input-font-size: var(--gp-text-body); --gp-input-focus-border: var(--gp-secondary); --gp-input-focus-ring: 0 0 0 3px rgba(122, 94, 16, 0.18); /* from --gp-secondary */ /* ============================================================ VISUAL TOKENS (coded-visual library; only raw rgba lives here, traced to hex) ============================================================ */ --gp-visual-surface: var(--gp-white); --gp-visual-surface-alt: var(--gp-bone); --gp-visual-border: var(--gp-slate-200); --gp-visual-radius: var(--gp-radius-lg); --gp-visual-radius-lg: var(--gp-radius-xl); --gp-visual-pad: var(--gp-space-5); --gp-visual-shadow: var(--gp-shadow-md); /* Working set: "plasma" slot = cardinal, "cobalt" slot = gold (kept names, reskinned). */ --gp-visual-plasma: var(--gp-primary); --gp-visual-plasma-soft: var(--gp-primary-50); --gp-visual-cobalt: var(--gp-accent); --gp-visual-cobalt-soft: var(--gp-secondary-50); --gp-visual-ink: var(--gp-hero-panel); --gp-visual-edge: var(--gp-hero-edge); --gp-visual-glow: var(--gp-accent); --gp-visual-label: var(--gp-slate-700); --gp-visual-line: var(--gp-slate-200); /* Translucent fills (channels traced to cardinal 176,58,46 / gold 229,176,37 / ink 28,23,16). */ --gp-visual-plasma-trans: rgba(176, 58, 46, 0.14); --gp-visual-plasma-trans-2: rgba(176, 58, 46, 0.26); --gp-visual-cobalt-trans: rgba(229, 176, 37, 0.16); --gp-visual-cobalt-trans-2: rgba(229, 176, 37, 0.30); --gp-visual-glow-trans: rgba(229, 176, 37, 0.16); --gp-visual-onlight-veil: rgba(28, 23, 16, 0.04); --gp-visual-ondark-veil: rgba(255, 255, 255, 0.06); --gp-visual-ondark-border: rgba(255, 255, 255, 0.12); --gp-visual-ondark-text: var(--gp-bone); /* Gradient-mesh hero backdrop (gold + cardinal on deep ink panel). */ --gp-mesh-base: var(--gp-hero-panel); --gp-mesh-blob-1: rgba(229, 176, 37, 0.22); /* gold */ --gp-mesh-blob-2: rgba(176, 58, 46, 0.20); /* cardinal */ --gp-mesh-blob-3: rgba(229, 176, 37, 0.10); /* gold soft */ /* SVG draw-in geometry. */ --gp-visual-dash: 560; --gp-visual-stroke: 2.25; --gp-visual-stroke-bold: 3; /* ============================================================ SECTION TOKENS -- CGH / Broadsheet additions ============================================================ */ /* Broadsheet mega display (hero only) -- violent type contrast engine. */ --gp-text-display-mega: clamp(54px, 7.4vw, 104px); --gp-leading-mega: 0.92; --gp-tracking-mega: -0.025em; /* Gold as readable text on light (AA). Use this, never --gp-accent, for gold text. */ --gp-gold-text: #7A5E10; /* Tagline treatment ("IT'S MORE THAN MONEY." tracked all-caps gold). */ --gp-tagline-tracking: 0.18em; /* Surface alt (warm parchment) for attorney cards / pull-quote boxes. */ --gp-surface-warm: #EFEBE0; } /* ============================================================ DARK MODE OVERRIDES (STUBBED, DISABLED -- never-match clause). Light-only ship. ============================================================ */ @media (prefers-color-scheme: dark) and (min-width: 100000px) { :root { --gp-ink: #F7F4EE; --gp-bone: #16120B; --gp-white: #221C12; --gp-slate-200: #3A3327; --gp-slate-700: #C9BFA8; --gp-secondary: #E5B025; --gp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24); --gp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.32); --gp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.40); --gp-shadow-sticky: 0 2px 12px rgba(0, 0, 0, 0.32); --gp-nav-bg: var(--gp-bone); --gp-nav-border: var(--gp-slate-200); --gp-nav-link: var(--gp-ink); --gp-card-bg: var(--gp-white); --gp-card-border: 1px solid var(--gp-slate-200); } } /* ============================================================ REDUCED MOTION (kept verbatim) ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --gp-transition-base: 0ms; --gp-transition-moderate: 0ms; --gp-transition-slow: 0ms; } }