/* ============================================================ WARM COFFEE THEME — shared brand stylesheet Mirrors the homepage (index.html) "cj-warm" look so every page reads as one site: cream paper, ink frames, hard offset shadows, Fraunces display + Nunito body. Usage on a page: 1. (remove class="dark") 2. 3. In , after /dist/output.css: Everything is scoped under .cj-warm so it cleanly out-specifies Tailwind single-class utilities and the page-local component CSS, with no !important. Reversible: drop the cj-warm class. ============================================================ */ :root { --cream: #FBF3E4; --cream-2: #F3E3C3; --paper: #FFFDF7; --milk: #FFF6E9; --ink: #3A2415; --coffee: #6B4226; --muted: #8C6E54; --burnt: #E0762F; --gold: #F2B705; --rust: #C2410C; --berry: #C24E6B; --teal: #2E8B7F; --hard-sm: 3px 3px 0 var(--ink); --hard: 4px 4px 0 var(--ink); --hard-lg: 6px 6px 0 var(--ink); --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif; --font-body: 'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif; } /* Metric-matched fallback: kills the load-in reflow before Fraunces downloads. Local Georgia, re-scaled to Fraunces' widths + line box. */ @font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'), local('Times New Roman'), local('Times'); size-adjust: 105%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; } /* ---- Base shell ---- */ body.cj-warm { background: var(--cream); background-image: radial-gradient(circle at 12% 16%, rgba(224,118,47,0.06), transparent 42%), radial-gradient(circle at 88% 6%, rgba(242,183,5,0.07), transparent 40%); background-attachment: fixed; color: var(--ink); font-family: var(--font-body); font-weight: 600; } .cj-warm h1, .cj-warm h2, .cj-warm h3, .cj-warm h4, .cj-warm .font-extrabold, .cj-warm .cosmic-text { font-family: var(--font-display); font-optical-sizing: auto; letter-spacing: -0.02em; color: var(--ink); } /* ---- Hero / cosmic text: drop the magenta-cyan gradient, go solid rust Fraunces (matches homepage). ---- */ .cj-warm .cosmic-text { background: none !important; -webkit-text-fill-color: var(--rust); color: var(--rust); animation: none !important; font-weight: 700; text-shadow: 0 1px 1px rgba(255,253,247,0.6); } /* Section eyebrow → warm sticker pill (sponsors uses gradient text) */ /* Section labels (eyebrows) read as plain uppercase labels, not buttons. */ .cj-warm .section-eyebrow, .cj-warm .hero-eyebrow { background: none; -webkit-text-fill-color: var(--burnt); color: var(--burnt); -webkit-background-clip: border-box; background-clip: border-box; padding: 0; border: none; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 800; } /* Small in-card category tags stay as gold sticker pills. */ .cj-warm .offer-tag, .cj-warm .contact-tag { background: var(--gold); -webkit-text-fill-color: var(--ink); color: var(--ink); -webkit-background-clip: border-box; background-clip: border-box; padding: 0.28rem 0.85rem; border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--hard-sm); letter-spacing: 0.06em; font-weight: 700; } /* Starfields don't read on cream — hide them everywhere. */ .cj-warm .stars-container { display: none !important; } /* ============================================================ TAILWIND DARK-UTILITY NEUTRALIZERS Remap the dark-theme utility classes these pages ship with onto the warm palette. Scoped .cj-warm (0,2,0) beats utilities (0,1,0). ============================================================ */ /* Surfaces */ .cj-warm.bg-gray-900, .cj-warm .bg-gray-900, .cj-warm.bg-gray-950, .cj-warm .bg-gray-950, .cj-warm.bg-slate-900, .cj-warm .bg-slate-900 { background-color: var(--cream); } .cj-warm .bg-gray-800, .cj-warm .bg-slate-800, .cj-warm .bg-gray-700 { background-color: var(--paper); } .cj-warm .bg-gray-100, .cj-warm .bg-gray-50 { background-color: var(--cream); } .cj-warm .bg-white { background-color: var(--paper); } /* Text */ .cj-warm.text-gray-100, .cj-warm .text-gray-100, .cj-warm .text-white, .cj-warm .text-gray-50 { color: var(--ink); } .cj-warm .text-gray-200 { color: #3f2a18; } .cj-warm .text-gray-300 { color: var(--coffee); } .cj-warm .text-gray-400 { color: var(--muted); } .cj-warm .text-gray-500 { color: var(--muted); } .cj-warm .text-gray-600 { color: var(--coffee); } .cj-warm .text-gray-700, .cj-warm .text-gray-900 { color: var(--ink); } /* Accent text (cyan / blue / indigo / pink / amber) → warm accents */ .cj-warm .text-cyan-300, .cj-warm .text-cyan-200, .cj-warm .text-cyan-400, .cj-warm .text-blue-500, .cj-warm .text-blue-400, .cj-warm .text-indigo-400 { color: var(--burnt); } .cj-warm .text-amber-200, .cj-warm .text-amber-100, .cj-warm .text-yellow-300 { color: var(--coffee); } .cj-warm .text-pink-400, .cj-warm .text-fuchsia-400 { color: var(--berry); } /* Borders / dividers */ .cj-warm .border-white\/10, .cj-warm .border-white\/20, .cj-warm .border-gray-700, .cj-warm .border-gray-800 { border-color: rgba(58,36,21,0.18); } /* Shadows → hard offset */ .cj-warm .shadow-md, .cj-warm .shadow-lg, .cj-warm .shadow-xl { box-shadow: var(--hard); } /* Default links */ .cj-warm a { color: var(--burnt); } .cj-warm a:hover { color: var(--rust); } /* Indigo / blue buttons (e.g. legal "Back to home") → burnt sticker button */ .cj-warm .bg-indigo-600, .cj-warm .bg-indigo-500, .cj-warm .bg-blue-600, .cj-warm .bg-blue-500 { background-color: var(--burnt); color: var(--milk); border: 2px solid var(--ink); box-shadow: var(--hard-sm); } .cj-warm .bg-indigo-600:hover, .cj-warm .bg-blue-600:hover { background-color: var(--rust); color: var(--milk); } /* ============================================================ PAGE-LOCAL COMPONENT RESKINS (for-individuals.html, work-with-me.html, policies.html) ============================================================ */ /* Dark gradient cards → paper + ink frame + hard shadow. Kill the masked gradient ::before border. */ .cj-warm .offer-card, .cj-warm .choice-card, .cj-warm .booking-card, .cj-warm .discovery-card { background: var(--paper); border: 3px solid var(--ink); border-radius: 1.35rem; box-shadow: var(--hard-lg); color: var(--ink); } .cj-warm .offer-card::before, .cj-warm .choice-card::before, .cj-warm .booking-card::before, .cj-warm .discovery-card::before, .cj-warm .discovery-card::after { display: none !important; } @media (hover: hover) { .cj-warm .choice-card:hover, .cj-warm .booking-card:hover, .cj-warm .offer-card:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 var(--ink); } } /* Call-to-action buttons → burnt fill, ink frame, hard shadow */ .cj-warm .offer-cta, .cj-warm .choice-cta, .cj-warm .booking-cta-btn, .cj-warm .btn-form, .cj-warm .btn-email { background: var(--burnt) !important; color: var(--milk) !important; border: 2px solid var(--ink); box-shadow: var(--hard-sm); } .cj-warm .choice-cta--brand, .cj-warm .booking-cta-btn--pink { background: var(--berry) !important; } .cj-warm .checkout-cta { animation: none; } @media (hover: hover) { .cj-warm .offer-cta:hover, .cj-warm .choice-cta:hover, .cj-warm .booking-cta-btn:hover { transform: translate(-1px,-1px); box-shadow: var(--hard); opacity: 1; } } /* Icon chips / number badges → gold sticker */ .cj-warm .choice-icon, .cj-warm .step-num, .cj-warm .offer-glyph { background: var(--gold) !important; color: var(--ink) !important; border: 2px solid var(--ink); } /* "What to expect" numbered steps: body copy was baked light (#e2e8f0) and went near-invisible on cream — pull it back to readable coffee/ink. */ .cj-warm .step-list li { color: var(--coffee); } .cj-warm .step-list strong { color: var(--ink); } /* "Please read" notice → warm amber paper */ .cj-warm .notice { background: rgba(242,183,5,0.14); border: 2px solid var(--ink); border-radius: 1rem; box-shadow: var(--hard-sm); color: var(--coffee); } .cj-warm .notice h2 { color: var(--rust); } .cj-warm .notice strong { color: var(--ink); } .cj-warm .notice p { color: var(--coffee); } /* Policy pills */ .cj-warm .policy-link { color: var(--coffee); border: 2px solid var(--ink); background: var(--milk); box-shadow: var(--hard-sm); } @media (hover: hover) { .cj-warm .policy-link:hover { color: var(--ink); background: var(--gold); } } /* Legal pages: section accent rail + body copy */ .cj-warm .policy-section { border-left-color: var(--burnt); } .cj-warm .policy-section h2 { color: var(--ink); } .cj-warm .policy-section p, .cj-warm .policy-section li { color: var(--coffee); } .cj-warm .updated, .cj-warm .subtitle, .cj-warm .meta { color: var(--muted); } .cj-warm .policy-content a { color: var(--burnt); } .cj-warm .policy-content a:hover { color: var(--rust); } /* ============================================================ INJECTED NAVBAR + FOOTER (components/navbar, components/footer) The components ship dark defaults (navy bar, cyan button). Warm them consistently on every page. Scoped .cj-warm (0,2,0) beats the components' single-class rules with no marquee offset, so the navbar sits at the top on pages that have no promo ticker. ============================================================ */ .cj-warm .main-navbar { background: var(--milk); border-bottom: 3px solid var(--ink); box-shadow: none; } .cj-warm .nav-brand { color: var(--ink); font-family: var(--font-display); font-weight: 700; } .cj-warm .nav-btn-fill { background: var(--burnt); color: var(--milk); border: 2px solid var(--ink); box-shadow: var(--hard-sm); } .cj-warm .nav-btn-outline { border: 2px solid var(--ink); color: var(--ink); background: transparent; } @media (hover: hover) { .cj-warm .nav-brand:hover { color: var(--burnt); } .cj-warm .nav-btn-fill:hover { background: var(--rust); } .cj-warm .nav-btn-outline:hover { border-color: var(--burnt); color: var(--burnt); } } .cj-warm .site-footer { border-top: 2px solid var(--ink); color: var(--coffee); } .cj-warm .site-footer a { color: var(--burnt); font-weight: 700; } .cj-warm .site-footer .footer-kofi a { color: var(--rust); } @media (hover: hover) { .cj-warm .site-footer a:hover { color: var(--ink); } }