/* BacPac AI — brand.css * Shared CSS for every BacPacAI.com page. Handles Fraunces variable-axis modes * and brand palette CSS custom properties. Load in every page's after * the Google Fonts tags. * * See docs/brand-guidelines.md for the canonical brand spec. * * CRITICAL: Mint (#7fd8be) and Coral (#ff8e72) are ILLUSTRATION-ONLY — never * apply these to buttons, borders, links, or UI chrome. They exist here as * CSS custom properties for illustration-layer usage (OG images, hero * backgrounds, etc.) — NOT for general page styling. */ :root { /* Primary UI palette */ --forest: #1a5632; --forest-hover: #0d2e1a; --meadow: #38a169; --sky: #63b3ed; /* Neutrals */ --deep: #0d2e1a; --body: #2d6a4f; --subtle: #4a7c59; --faint: #6b9e7a; /* Background tints */ --brand-bg: #f0faf4; --accent-bg: #ebf8ff; /* Illustration palette — NOT for UI chrome */ --brand-mint: #7fd8be; --brand-coral: #ff8e72; --brand-cream: #fff7e6; /* Hero background — a quieter warm off-white than --brand-cream. * Use this for large hero/display surfaces where full cream dominates * visually. Cream stays reserved for small brand moments (CTA text, * OG images, illustration accents) where its warmth is an asset. */ --hero-bg: #fefcf5; } /* ========================================================================= * Fraunces variable-axis modes — from docs/brand-guidelines.md Typography * Apply via class name, NOT inline style, so modes stay consistent across pages. * ========================================================================= */ /* Warm — hero headlines, About page, craft-forward moments. */ .fraunces-warm { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-style: normal; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; } /* Warm Italic — second line of display headlines within a Warm-mode H1. * Composes Warm's axis settings with italic style. Used in the hero where * line 2 is "Like it matters." paired with Warm-mode line 1. */ .fraunces-warm-italic { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; } /* Elegant — pull quotes, feature callouts, editorial. */ .fraunces-elegant { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-style: normal; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144; } /* Italic — mission statements, emotional moments. Distinct from Warm Italic; * this one is for editorial emphasis, not display headlines. */ .fraunces-italic { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-style: italic; font-variation-settings: "SOFT" 0, "WONK" 0; } /* Display bold — OG images, merch, maximum authority. */ .fraunces-display-bold { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-style: normal; font-variation-settings: "SOFT" 20, "opsz" 144; } /* ========================================================================= * Hero — typography-first layout * Used on index.html hero. Matches the React HeroSection from the app * (frontend/src/components/hero/HeroSection.tsx) so the brand feels * continuous between marketing and app. * ========================================================================= */ .hero-h1 { font-family: 'Fraunces', Georgia, serif; color: var(--forest); text-wrap: balance; margin: 0 0 28px; } .hero-h1-line-1 { display: block; font-weight: 700; font-size: clamp(32px, 11vw, 112px); line-height: 0.95; letter-spacing: -0.03em; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; white-space: nowrap; } .hero-h1-line-2 { display: block; font-weight: 400; font-style: italic; font-size: clamp(32px, 11vw, 112px); line-height: 0.95; letter-spacing: -0.03em; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; white-space: nowrap; } .hero-matters { color: var(--meadow); } .hero-subhead { font-family: 'Inter', system-ui, sans-serif; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.55; font-weight: 400; max-width: 560px; color: rgba(26, 86, 50, 0.72); margin: 0 0 40px; } /* ========================================================================= * Utility — CTAs that can't be fully expressed in Tailwind CDN utilities * (box-shadow values with Forest tint, deeper hover states, etc.) * ========================================================================= */ .cta-forest { background: var(--forest); color: var(--brand-cream); border: none; box-shadow: 0 2px 0 rgba(13, 46, 26, 0.20); transition: background 150ms, box-shadow 150ms; } .cta-forest:hover { background: var(--forest-hover); box-shadow: 0 4px 0 rgba(13, 46, 26, 0.25); } .cta-outline { background: transparent; color: var(--forest); border: 2px solid var(--forest); transition: background 150ms; } .cta-outline:hover { background: rgba(26, 86, 50, 0.06); } /* Inverse CTAs for dark-brand sections (backgrounds already in --forest). * Use .cta-white when the primary action sits on a Forest section; * .cta-outline-white is the ghosted secondary companion. */ .cta-white { background: #ffffff; color: var(--forest); border: none; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); transition: background 150ms, box-shadow 150ms; } .cta-white:hover { background: var(--brand-cream); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.20); } .cta-outline-white { background: transparent; color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.45); transition: background 150ms, border-color 150ms; } .cta-outline-white:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.65); }