/* * ============================================================ * UNIFIED INSURANCE PARTNERS — Brand Design Tokens * ============================================================ * * DESIGN RATIONALE * ───────────────── * Color: Deep navy (#16325C) as primary — authoritative and * trust-signaling without the cold, corporate feel of pure * black. Paired with warm amber (#E8991C) for CTAs — more * energetic and approachable than the flat "insurance gold" * seen on every competitor site. Backgrounds use warm off- * white (#F8F6F2) instead of stark white — creates a premium, * editorial feel. * * Typography: Playfair Display for headings — the editorial * serif communicates established expertise. Inter for body — * modern, clean, and highly legible at all sizes. The pairing * reads as "trusted institution, built for today." * * Personality: Elevated but approachable. Generous whitespace. * Warm shadows. Confident type scale. Not stuffy, not flashy. * * ───────────────── * TO SWAP FOR A NEW CLIENT: * Update the 6 color primitives under "BRAND COLORS" and the * 2 font variables under "TYPOGRAPHY." Everything else derives * from those. See _playbook/PLAYBOOK.md → Variables to Update. * ============================================================ */ /* Google Fonts — swap these @import values per client */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); :root { /* ────────────────────────────────────────── * BRAND COLORS — update these 8 values per client * ────────────────────────────────────────── */ --brand-primary: #16325C; /* Deep navy — main identity color */ --brand-primary-mid: #1D4078; /* Mid navy — hover states, borders */ --brand-primary-light: #2952A3; /* Bright navy — links, active states */ --brand-accent: #E8991C; /* Warm amber — CTAs, highlights */ --brand-accent-dark: #C47B0F; /* Dark amber — CTA hover */ --brand-accent-light: #F5C05A; /* Light amber — badges, decorative */ --brand-surface: #F8F6F2; /* Warm off-white — section backgrounds */ --brand-surface-alt: #EEE9E0; /* Slightly deeper warm — subtle contrast */ /* ────────────────────────────────────────── * TYPOGRAPHY — update these 2 values per client * ────────────────────────────────────────── */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* ────────────────────────────────────────── * DERIVED SEMANTIC ALIASES * (reference these in styles.css — don't use brand-* directly) * ────────────────────────────────────────── */ /* — Core palette — */ --color-primary: var(--brand-primary); --color-primary-hover: var(--brand-primary-mid); --color-primary-link: var(--brand-primary-light); --color-accent: var(--brand-accent); --color-accent-hover: var(--brand-accent-dark); --color-accent-muted: var(--brand-accent-light); /* — Neutral scale — */ --color-white: #FFFFFF; --color-surface: var(--brand-surface); --color-surface-alt: var(--brand-surface-alt); --color-gray-100: #F1EDE7; --color-gray-200: #E0D9CF; --color-gray-300: #C8BFB3; --color-gray-400: #A89C8E; --color-gray-500: #857870; --color-gray-600: #635850; --color-gray-700: #433830; --color-text: #111827; --color-text-secondary: #4B5563; --color-text-muted: #6B7280; /* — Semantic states — */ --color-success: #166534; --color-success-bg: #DCFCE7; --color-warning: #92400E; --color-warning-bg: #FEF3C7; --color-error: #991B1B; --color-error-bg: #FEE2E2; /* — Borders — */ --color-border: #DED7CC; --color-border-focus: var(--brand-primary-light); /* ────────────────────────────────────────── * TYPOGRAPHY SCALE * Ratio: 1.25 (Major Third) * ────────────────────────────────────────── */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* — Font weights — */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* — Line heights — */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; /* — Letter spacing — */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.12em; /* ────────────────────────────────────────── * SPACING — 4px base grid * ────────────────────────────────────────── */ --space-px: 1px; --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ /* ────────────────────────────────────────── * LAYOUT * ────────────────────────────────────────── */ --container-max: 1200px; --container-wide: 1440px; --container-narrow: 760px; --container-px: 1.5rem; /* matches --space-6 */ --container-px-sm: 1rem; /* mobile override */ --section-y: var(--space-24); --section-y-sm: var(--space-16); --section-y-xs: var(--space-12); /* ────────────────────────────────────────── * SHAPE * ────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ────────────────────────────────────────── * ELEVATION (warm-tinted shadows) * ────────────────────────────────────────── */ --shadow-xs: 0 1px 3px rgba(22, 50, 92, 0.06); --shadow-sm: 0 2px 8px rgba(22, 50, 92, 0.08); --shadow-md: 0 4px 20px rgba(22, 50, 92, 0.11); --shadow-lg: 0 8px 36px rgba(22, 50, 92, 0.14); --shadow-xl: 0 16px 56px rgba(22, 50, 92, 0.18); --shadow-inner: inset 0 1px 4px rgba(22, 50, 92, 0.08); /* ────────────────────────────────────────── * MOTION * ────────────────────────────────────────── */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 100ms; --duration-base: 200ms; --duration-slow: 350ms; --duration-slower: 500ms; /* ────────────────────────────────────────── * Z-INDEX * ────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; /* ────────────────────────────────────────── * COMPONENT TOKENS * (Derived from primitives above — change rarely) * ────────────────────────────────────────── */ /* Nav */ --nav-height: 72px; --nav-height-mobile: 64px; --nav-bg: var(--color-white); --nav-shadow: 0 1px 0 var(--color-border); /* Buttons */ --btn-radius: var(--radius-lg); --btn-px: var(--space-6); --btn-py: 0.8125rem; /* 13px — slightly generous */ --btn-font-size: var(--text-base); --btn-font-weight: var(--weight-semibold); /* Cards */ --card-radius: var(--radius-xl); --card-bg: var(--color-white); --card-border: var(--color-border); --card-shadow: var(--shadow-sm); --card-px: var(--space-8); --card-py: var(--space-8); /* Forms */ --input-height: 52px; --input-radius: var(--radius-lg); --input-border: var(--color-border); --input-bg: var(--color-white); --input-px: var(--space-4); /* Footer */ --footer-bg: var(--brand-primary); --footer-border: rgba(255,255,255,0.1); }