/* * design-tokens.css (TU1, 2026-07-14) * * The single source of truth for GBC content-page typography: text colors + a type scale, as CSS * custom properties. Audit (2026-07-13) found NO token system — text color was hardcoded inline * 5,270x across 176 distinct hex values, font-size 7,343x across 87 values, so every page family * drifted its own palette ("looks amateur"). These tokens consolidate that to a small, canonical * set. Values are chosen from the DOMINANT existing usages so adopting them is a same-look swap * (minimal migration churn); page families migrate incrementally (TU3+), guarded against new drift. * * Loaded early in (before app.css) so every page + scoped stylesheet can use var(--gbc-*). */ :root { /* ---- Text colors (semantic) ---- */ --gbc-heading: #0a1525; /* near-black headings / H1-H2 */ --gbc-text: #3a4658; /* primary body / lead */ --gbc-text-strong: #4a5568; /* secondary body */ --gbc-muted: #5f6c80; /* meta, captions, breadcrumbs */ --gbc-link: #0066ff; /* links + primary accent */ --gbc-on-accent: #ffffff; /* text on a blue/dark surface */ /* ---- Surfaces & borders ---- */ --gbc-surface: #ffffff; /* card background */ --gbc-surface-alt: #fbfdff; /* subtle callout background */ --gbc-surface-tint: #eef4ff; /* light-blue chip/callout */ --gbc-border: #eef1f6; /* card / hairline borders */ /* ---- Type scale ---- */ --gbc-fs-xs: 12px; --gbc-fs-sm: 13px; --gbc-fs-base: 14px; --gbc-fs-md: 15px; --gbc-fs-lg: 16px; --gbc-fs-xl: 18px; --gbc-fs-2xl: 22px; --gbc-fs-h2: 19px; --gbc-fs-h1: clamp(26px, 4.5vw, 38px); /* ---- Radius ---- */ --gbc-radius: 12px; --gbc-radius-sm: 8px; /* ---- CRO CTA system (promoted from /learn's scoped tokens to GLOBAL) ---- The 3-CTA hierarchy that converts, consistent across the whole project: (1) PRIMARY = get-a-quote, high-contrast ORANGE (distinct from blue info-links); (2) SECONDARY = alternate path (green); (3) CALL = pay-per-call phone (navy). Pattern for CTAs: benefit + arrow copy ("Get My Free Quotes →"), trust microcopy stacked beneath ("Free · 2 min · no SSN · reviewed by a licensed agent"). */ --gbc-cta-primary: #dd6b20; /* get-a-quote (orange) */ --gbc-cta-primary-hover: #c05621; --gbc-cta-secondary: #38a169; /* alternate path (green) */ --gbc-cta-secondary-hover:#2f855a; --gbc-cta-call: #1a365d; /* phone / pay-per-call (navy) */ --gbc-cta-call-hover: #2c5282; --gbc-cta-text: #ffffff; /* label on a CTA */ --gbc-cta-trust: #5f6c80; /* trust microcopy under a CTA */ /* CTA shape/size (one consistent button) */ --gbc-cta-radius: 10px; --gbc-cta-pad: 14px 22px; --gbc-cta-pad-sm: 10px 16px; --gbc-cta-weight: 700; --gbc-cta-fs: 16px; }