/* ===================================================== LUR Growth — Design Tokens Canonical CSS custom properties for the brand. Import this in any HTML file to inherit the system. ===================================================== */ @import url('fonts/fonts.css'); :root { /* ============ PRIMARY PALETTE ============ */ --navy: #103140; /* primary text, dark hero sections */ --navy-light: #1a4255; --navy-dark: #0a2230; --navy-deep: #071a24; --coral: #FD9D7D; /* primary accent, CTAs (peachy-soft) */ --coral-light: #FDBB9F; --coral-dark: #E07A58; /* ============ SECONDARY ============ */ --teal: #5BB9B0; /* soft mint, NOT medical-teal */ --teal-light: #7CCFC7; --teal-dark: #449D94; --slate: #5B6D79; /* supporting text, dividers */ --slate-light: #7A8B96; --slate-dark: #435561; /* ============ EXTENDED ACCENTS (section-level only) ============ */ --gold: #D4A843; --gold-light: #E8C76A; --gold-dark: #B8922E; --plum: #C8A4E8; --plum-light: #DCC4F0; --green: #7DC47C; --green-accent: #7ABFAA; --rose: #FD9D7D; /* alias of coral */ /* ============ NEUTRALS (NEVER PURE WHITE) ============ */ --cream: #faf8f6; /* primary background */ --cream-warm: #FDFBF7; /* elevated surfaces */ --cream-dark: #f0ede8; /* secondary background */ --charcoal: #2c2c2c; /* body text */ --warm-gray: #7a7e82; --warm-gray-light: #a8acb0; /* ============ SOFT PASTEL TINTS (card washes, callouts) ============ */ --coral-soft: #FCE4DB; --coral-soft-deep: #F9CFBD; --slate-soft: #DDE4E9; --slate-soft-deep: #C4D1D9; --teal-soft: #D5EEEC; --teal-soft-deep: #B4E0DC; --sand-soft: #F5ECD9; /* ============ SEMANTIC ROLES ============ */ --bg: var(--cream); --bg-raised: var(--cream-warm); --bg-sunken: var(--cream-dark); --bg-inverse: var(--navy-dark); --fg: var(--charcoal); /* body text on cream */ --fg-1: var(--navy); /* primary display/headings */ --fg-2: var(--charcoal); /* body */ --fg-3: var(--warm-gray); /* supporting/meta */ --fg-4: var(--warm-gray-light); --fg-on-dark: #ffffff; --fg-on-dark-muted: rgba(255,255,255,0.75); --border: var(--slate-soft); --border-strong: var(--slate-soft-deep); --divider: rgba(16, 49, 64, 0.08); --accent: var(--coral); --accent-hover: var(--coral-dark); --link: var(--teal-dark); /* ============ FONT STACKS ============ */ --font-heading: 'Montserrat', system-ui, sans-serif; /* 400-800 */ --font-display: 'Cormorant Garamond', Georgia, serif; /* italic display lines */ --font-body: 'Poppins', system-ui, sans-serif; /* 300-600 */ --font-body-alt: 'Outfit', system-ui, sans-serif; /* alt body */ --font-accent: 'Lora', Georgia, serif; /* italic pull quotes, eyebrows */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ============ TYPE SCALE ============ */ --fs-display: clamp(2.75rem, 6vw, 4rem); /* hero */ --fs-h1: clamp(2rem, 4vw, 3rem); --fs-h2: clamp(1.6rem, 3vw, 2.25rem); --fs-h3: 1.4rem; --fs-h4: 1.15rem; --fs-body-lg: 1.15rem; --fs-body: 1rem; --fs-body-sm: 0.9rem; --fs-eyebrow: 0.8rem; --fs-caption: 0.75rem; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.6; --lh-loose: 1.8; --ls-eyebrow: 0.18em; --ls-label: 0.08em; --ls-tight: -0.02em; /* ============ SPACING ============ */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; --space-2xl: 8rem; /* ============ RADII ============ */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 50px; /* ============ SHADOWS (warm navy tint, never pure black) ============ */ --shadow-sm: 0 2px 8px rgba(16, 49, 64, 0.06); --shadow-md: 0 4px 20px rgba(16, 49, 64, 0.10); --shadow-lg: 0 8px 40px rgba(16, 49, 64, 0.14); --shadow-lift: 0 12px 48px rgba(16, 49, 64, 0.18); /* ============ MOTION ============ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --transition-base: 0.3s var(--ease-out); --transition-slow: 0.6s var(--ease-out); /* ============ LAYOUT ============ */ --max-width: 1200px; --nav-height: 80px; } /* ===================================================== BASE / SEMANTIC ELEMENT DEFAULTS ===================================================== */ body { background: var(--bg); color: var(--fg-2); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--fg-1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } h1 { font-size: var(--fs-h1); font-weight: 800; } h2 { font-size: var(--fs-h2); font-weight: 700; } h3 { font-size: var(--fs-h3); font-weight: 700; } h4 { font-size: var(--fs-h4); font-weight: 600; } p { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-2); } a { color: var(--link); text-decoration: none; transition: color var(--transition-base); } a:hover { color: var(--coral-dark); } small, .caption { font-size: var(--fs-caption); color: var(--fg-3); } code, pre { font-family: var(--font-mono); font-size: 0.9em; } ::selection { background-color: var(--coral); color: var(--navy-dark); } /* Elegant italic display line (used in hero sections) */ .display-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--navy); } /* Eyebrow label */ .eyebrow { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--coral-dark); } /* ===================================================== SIGNATURE TRI-COLOR ACCENT BAR Coral / Slate / Teal · equal thirds · mirrors the puzzle logo ===================================================== */ .tri-bar { display: flex; height: 6px; width: 120px; border-radius: 3px; overflow: hidden; } .tri-bar > span { flex: 1; display: block; } .tri-bar > span:nth-child(1) { background: var(--coral); } .tri-bar > span:nth-child(2) { background: var(--slate); } .tri-bar > span:nth-child(3) { background: var(--teal); }