/* ========================================================= Complete Family Protection — Colors & Type Source: 2026 CFP Brand Guidelines ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lato:wght@300;400;700;900&display=swap'); :root { /* ----------------------------------------------------------- COLORS — Primary palette ----------------------------------------------------------- */ --cfp-usa-blue: #053A63; /* Primary. Use for 80% of brand surfaces. */ --cfp-dark-blue: #00308F; /* Secondary. Deep institutional accent. */ --cfp-carolina-blue: #00AEEF; /* Links & highlights */ --cfp-insurance-blue: #40A5D9; /* Supporting */ --cfp-guru-blue: #01A2E3; /* Digital & UI */ --cfp-vivint-green: #05E5AF; /* CTAs ONLY. Reserve for primary actions. */ --cfp-light-gray: #EFEFEF; /* Backgrounds */ --cfp-page-gray: #F5F5F5; /* Landing-page background */ --cfp-dark-gray: #1A1A1A; /* Sparingly for contrast sections */ --cfp-white: #FFFFFF; /* Neutrals derived for UI text scales (never pure black) */ --cfp-ink-900: #0B1F33; /* Near-black on light */ --cfp-ink-700: #2C3E50; --cfp-ink-500: #5A6B7A; --cfp-ink-300: #98A4AF; --cfp-ink-100: #D9DEE3; --cfp-hairline: #E4E7EB; /* Borders / dividers */ /* ----------------------------------------------------------- SEMANTIC COLOR ROLES ----------------------------------------------------------- */ --fg-1: var(--cfp-usa-blue); /* Headlines, primary text */ --fg-2: var(--cfp-ink-700); /* Body text */ --fg-3: var(--cfp-ink-500); /* Supporting, captions */ --fg-on-dark: var(--cfp-white); --fg-link: var(--cfp-carolina-blue); --bg-page: var(--cfp-white); --bg-subtle: var(--cfp-page-gray); --bg-muted: var(--cfp-light-gray); --bg-contrast: var(--cfp-dark-gray); --bg-brand: var(--cfp-usa-blue); --border-default: var(--cfp-hairline); --border-strong: var(--cfp-ink-300); --accent-cta: var(--cfp-vivint-green); --accent-cta-ink: var(--cfp-usa-blue); /* CTA text reads on green */ --status-info: var(--cfp-carolina-blue); --status-warn: #C77700; --status-danger: #B3261E; --status-success: #2E7D5B; /* ----------------------------------------------------------- TYPOGRAPHY — Families ----------------------------------------------------------- */ --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Type scale (per brand spec: Inter Bold 32–44pt H1, Inter SemiBold 20–28pt H2, Lato Regular 14–16pt body, Lato Regular 10–12pt caption) */ --fs-display: 44px; --fs-h1: 36px; --fs-h2: 24px; --fs-h3: 20px; --fs-lead: 18px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; --fs-micro: 10px; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-loose: 1.65; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* ----------------------------------------------------------- SPACING (4pt grid) ----------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ----------------------------------------------------------- RADII ----------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ----------------------------------------------------------- SHADOWS — gentle, trust-building, never dramatic ----------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(5, 58, 99, 0.06); --shadow-sm: 0 1px 3px rgba(5, 58, 99, 0.08), 0 1px 2px rgba(5, 58, 99, 0.04); --shadow-md: 0 4px 12px rgba(5, 58, 99, 0.08), 0 2px 4px rgba(5, 58, 99, 0.04); --shadow-lg: 0 12px 28px rgba(5, 58, 99, 0.12), 0 4px 8px rgba(5, 58, 99, 0.06); --shadow-focus: 0 0 0 3px rgba(0, 174, 239, 0.35); /* Layout */ --landing-max: 960px; /* per brand spec */ --content-max: 1200px; } /* ========================================================= ELEMENT DEFAULTS ========================================================= */ html, body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-2); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; } .display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } h2, .h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; } h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; } p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-2); margin: 0; } .lead { font-family: var(--font-body); font-size: var(--fs-lead); line-height: var(--lh-loose); color: var(--fg-2); } small, .small { font-size: var(--fs-small); color: var(--fg-3); } .caption { font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); } .eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-caption); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--cfp-carolina-blue); } .disclaimer { font-family: var(--font-body); font-size: var(--fs-micro); line-height: var(--lh-normal); color: var(--fg-3); } a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { color: var(--cfp-guru-blue); }