/* ============================================================================= Soft Reset theme, for every page EXCEPT the storefront. Created 2026-08-17. Tokens and rationale: DESIGN.md. WHY THIS FILE EXISTS AND index.html DOES NOT USE IT index.html inlines the same tokens in its . That is deliberate: it is the page cold paid traffic lands on, and inlining saves a render-blocking round trip (measured first-contentful-paint there is ~40ms). Every other page is reached from a link by someone already on the site, so one cached request is the better trade and single-sourcing beats saving 5ms. 🔴 THE DUPLICATION IS REAL. The :root block below is a copy of the one in index.html. If you change a token, change BOTH, or the storefront and the pages around it will drift apart. DESIGN.md section 3 is the source of truth. HOW IT RETHEMES THE TAILWIND PAGES refund / privacy / terms / affiliates / quiz / giveaway still link the COMPILED styles.css for layout, because rewriting their markup would risk the text, and the text is good. This file loads AFTER it and repaints the brand utilities (bg-cream, text-sage-deep, font-display and friends) onto the new palette. Layout classes are left alone. 🔴 Do NOT add a new Tailwind utility to those pages. styles.css is a compiled build: a class not already used somewhere on the site does not exist and fails silently. Write real CSS here instead. ============================================================================= */ @font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-var-latin.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrumentsans-var-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { --paper:#F7F3EA; --paper-2:#EFE9DC; --surface:#FFFDF8; --rule:#DED5C4; --ink:#23211D; --ink-soft:#5C5648; --ink-mute:#8A8171; --clay:#B4552F; --clay-deep:#8F411F; --sage:#5F7A69; --display:'Fraunces', Georgia, 'Times New Roman', serif; --sans:'Instrument Sans', system-ui, -apple-system, sans-serif; --r-sm:4px; --r-md:8px; --r-lg:14px; --r-pill:999px; } /* ---------- base ---------- */ html { -webkit-text-size-adjust:100%; } body { background:var(--paper) !important; color:var(--ink) !important; font-family:var(--sans) !important; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; } h1, h2, h3, h4 { font-family:var(--display) !important; letter-spacing:-0.02em !important; text-wrap:balance; font-variation-settings:'opsz' 48, 'SOFT' 0, 'WONK' 0; } h1 { font-variation-settings:'opsz' 96, 'SOFT' 0, 'WONK' 0; } a, button { touch-action:manipulation; } :focus-visible { outline:2px solid var(--clay); outline-offset:2px; border-radius:2px; } img { max-width:100%; height:auto; } /* ---------- repaint the old brand utilities ---------- These class names come from the compiled Tailwind build and still carry the retired sage/cream palette. Repainted rather than removed from the markup, because the markup is fine and the text is the thing worth protecting. */ .font-display { font-family:var(--display) !important; } .font-body { font-family:var(--sans) !important; } .text-ink { color:var(--ink) !important; } .text-ink-soft { color:var(--ink-soft) !important; } .text-sage-deep, .text-sage { color:var(--clay-deep) !important; } .text-cream { color:var(--surface) !important; } .hover\:text-ink:hover { color:var(--ink) !important; } .bg-cream { background-color:var(--paper) !important; } .bg-cream\/85 { background-color:rgba(247,243,234,.88) !important; } .bg-cream-deep { background-color:var(--paper-2) !important; } .bg-cream-deep\/60 { background-color:rgba(239,233,220,.6) !important; } .bg-sage { background-color:var(--clay) !important; } .hover\:bg-sage-deep:hover { background-color:var(--clay-deep) !important; } .bg-white { background-color:var(--surface) !important; } .border-cream-deep { border-color:var(--rule) !important; } .border-cream-deep\/60 { border-color:rgba(222,213,196,.7) !important; } .border-sage { border-color:var(--clay) !important; } /* The compiled .btn-primary supplies transition and hover only, never colour. Kill the sage-tinted lift it shipped with. */ .btn-primary { transition:background-color 120ms, color 120ms !important; } .btn-primary:hover { transform:none !important; box-shadow:none !important; } /* ---------- prose ---------- */ .prose-soft p { color:var(--ink-soft); line-height:1.7; margin-bottom:1rem; font-size:15.5px; } .prose-soft strong { color:var(--ink); font-weight:600; } .prose-soft a { color:var(--clay-deep); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; } .prose-soft a:hover { color:var(--ink); } .prose-soft h2 { color:var(--ink); } .prose-soft ul { color:var(--ink-soft); } .prose-soft li { margin-bottom:.4rem; } /* ---------- shared chrome ---------- A thin bar and a plain footer, so every page reads as the same publication as the storefront rather than as a legal annexe someone forgot about. */ .sr-strip { background:var(--clay-deep); color:#FBF3EC; text-align:center; padding:7px 16px; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; } .sr-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 20px; border-bottom:1px solid var(--rule); max-width:760px; margin:0 auto; } .sr-mark { font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-0.03em; text-decoration:none; color:var(--ink); display:inline-flex; align-items:center; min-height:44px; font-variation-settings:'opsz' 24; } .sr-bar nav { display:flex; gap:14px; align-items:center; } .sr-bar nav a { font-size:13px; color:var(--ink-soft); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; } .sr-bar nav a:hover { color:var(--ink); } .sr-buy { background:var(--clay); color:#FFFDF8 !important; text-decoration:none; border-radius:var(--r-pill); padding:9px 16px; font-size:13px; font-weight:700; white-space:nowrap; min-height:auto !important; } .sr-buy:hover { background:var(--clay-deep); color:#FFFDF8 !important; } .sr-foot { border-top:1px solid var(--rule); margin-top:48px; padding:24px 20px 34px; font-size:12.5px; color:var(--ink-mute); } .sr-foot-in { max-width:760px; margin:0 auto; } .sr-foot a { color:var(--ink-soft); display:inline-block; padding:9px 0; } /* ---------- misc surfaces the Tailwind pages use ---------- */ .rounded-2xl, .rounded-3xl { border-radius:var(--r-lg) !important; } table th { background:var(--paper-2); } table td, table th { border-color:var(--rule); } @media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }