/* ============================================================ UnderstandSEO — Typography Pairings ------------------------------------------------------------ PURPOSE Fixes the "every site uses the same font" problem. tokens.css binds palette-warm -> Fraunces, and since most prospects map to palette-warm, every site looked identical. This file DECOUPLES fonts from palette: load this AFTER tokens.css and add ONE `type-*` class to . The pairing's font vars win via the cascade (class selector beats the :root/element defaults), so tokens.css is never modified. USAGE 1. In , after tokens.css, add the matching Google Fonts for the pairing you chose (see each block's @font note). 2. On , set TWO classes: the palette and the pairing, e.g. 3. Pick the pairing from the brand brief's PERSONALITY line, and obey the NO-REPEAT rule: never reuse the previous prospect's pairing (logged in prospects.csv `type_pairing`). NO-REPEAT is what creates variety. The library is sized so you can run ~10 prospects before any pairing must repeat. Every pairing also tunes weight + tracking + hero scale, because variety in *weight and scale* sells the difference as much as the family does. Anton at Fraunces' tracking looks broken; each block sets what that family actually needs. ============================================================ */ /* Shared knobs every pairing may override. Defaults here mirror tokens.css so a site with no type-* class is unchanged. */ :root { --display-weight: 500; --display-tracking: -0.02em; --display-line: 1.05; --body-weight: 400; } /* Apply the display knobs globally so headings pick them up regardless of which palette/pairing is active. */ h1, h2, h3, h4 { font-weight: var(--display-weight); letter-spacing: var(--display-tracking); } /* ------------------------------------------------------------ 1. EDITORIAL WARM — refined, family-owned, heritage This is today's default look, named so the no-repeat logic can track it. Suits: trattorias, bakeries, classic American. @font: Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600 + DM Sans:400,500 ------------------------------------------------------------ */ .type-editorial-warm { --font-display: 'Fraunces', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --display-weight: 500; --display-tracking: -0.02em; } /* ------------------------------------------------------------ 2. GRAND SERIF — upscale, fine dining, special occasion High-contrast didone display. Suits: steakhouses, tasting menus, wine bars, hotels. @font: Playfair+Display:400,500,600,700 + Source+Sans+3:400,500,600 ------------------------------------------------------------ */ .type-grand-serif { --font-display: 'Playfair Display', 'Times New Roman', serif; --font-body: 'Source Sans 3', system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.01em; --hero-display-size: clamp(3rem, 8.5vw, 6.5rem); } /* ------------------------------------------------------------ 3. CONDENSED BOLD — loud, casual, high-energy Tall condensed display, set BIG. Suits: pizza, sports bar, burgers, taco shop, breweries. @font: Anton:400 + Inter:400,500,600 ------------------------------------------------------------ */ .type-condensed-bold { --font-display: 'Anton', 'Arial Narrow', sans-serif; --font-body: 'Inter', system-ui, sans-serif; --display-weight: 400; /* Anton has one weight */ --display-tracking: 0.005em; /* condensed needs a touch of air */ --display-line: 0.95; --hero-display-size: clamp(3.25rem, 11vw, 8rem); } .type-condensed-bold h1, .type-condensed-bold h2 { text-transform: uppercase; } /* ------------------------------------------------------------ 4. RETRO DINER — playful, breakfast, neighborhood Quirky variable grotesque display. Suits: diners, brunch spots, bakeries, ice cream, family cafes. @font: Bricolage+Grotesque:400,500,700 + Work+Sans:400,500 ------------------------------------------------------------ */ .type-retro-diner { --font-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif; --font-body: 'Work Sans', system-ui, sans-serif; --display-weight: 700; --display-tracking: -0.03em; } /* ------------------------------------------------------------ 5. MODERN CLEAN — contemporary, chef-driven, minimal Light serif display + neo-grotesque body. Suits: modern American, new-school cafes, design-forward concepts. @font: Instrument+Serif:400 (+italic) + Geist (self-host) / Inter ------------------------------------------------------------ */ .type-modern-clean { --font-display: 'Instrument Serif', Georgia, serif; --font-body: 'Geist', 'Inter', system-ui, sans-serif; --display-weight: 400; --display-tracking: -0.015em; --hero-display-size: clamp(3rem, 8vw, 6.75rem); } /* ------------------------------------------------------------ 6. HANDCRAFT — artisan, craft, maker Chunky display + humanist body. Suits: coffee roasters, craft bakeries, butcher shops, breweries, makers. @font: Gloock:400 + Hanken+Grotesk:400,500,600 ------------------------------------------------------------ */ .type-handcraft { --font-display: 'Gloock', 'Rockwell', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --display-weight: 400; --display-tracking: -0.01em; } /* ------------------------------------------------------------ 7. CIVIC TRUST — institutional, calm, credible Mirrors palette-civic's intent. Suits: healthcare, churches, schools, civic, professional services that want gravitas. @font: Source+Serif+4:400,500,600 + Source+Sans+3:400,500,600 ------------------------------------------------------------ */ .type-civic-trust { --font-display: 'Source Serif 4', 'Charter', Georgia, serif; --font-body: 'Source Sans 3', system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.01em; } /* ------------------------------------------------------------ 8. TECH SERVICE — modern B2B, trades-with-polish Grotesk display + grotesk body. Suits: HVAC/plumbing done modern, agencies, SaaS-adjacent local service. @font: Space+Grotesk:400,500,700 + Inter:400,500,600 ------------------------------------------------------------ */ .type-tech-service { --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.025em; } /* ------------------------------------------------------------ 9. WELLNESS — calm, airy, premium-soft Classical roman caps display + soft body. Suits: spa, yoga, beauty, med-spa, florists. @font: Marcellus:400 + Mulish:400,500,600 ------------------------------------------------------------ */ .type-wellness { --font-display: 'Marcellus', 'Optima', Georgia, serif; --font-body: 'Mulish', system-ui, sans-serif; --display-weight: 400; --display-tracking: 0.01em; /* roman caps breathe a little */ } /* ------------------------------------------------------------ 10. NEO BRUTAL — bold, unfussy, statement Heavy grotesk display + clean body. Suits: confident concepts, street food, natural wine, concepts that want edge. @font: Archivo:600,700,800 (+Expanded if self-hosting) + Inter:400,500 ------------------------------------------------------------ */ .type-neo-brutal { --font-display: 'Archivo', 'Helvetica Neue', sans-serif; --font-body: 'Inter', system-ui, sans-serif; --display-weight: 800; --display-tracking: -0.03em; --display-line: 0.98; } /* ------------------------------------------------------------ PERFORMANCE NOTES - Cap each site at TWO families (one display, one body). The mono var can stay as tokens.css set it. - Always load with &display=swap. - Preload ONLY the hero/display font: - Self-host Geist (not on Google Fonts) or fall back to Inter, which every pairing already lists. - Variable fonts (Fraunces, Bricolage, Source Serif 4, Space Grotesk, Archivo, Hanken) keep the request count low. ------------------------------------------------------------ */