/* ───────────────────────────────────────────────────────────────────────── SITE-WIDE THEME for the static marketing/legal pages — pricing, tutorial, about, contact, accessibility, how-it-works, terms, privacy, and the eight wedge checkers (flight, parking, council, section75, transport, housing, employment, goods, retail, data). Loaded LAST in , so it remaps the shared tokens and overrides hardcoded surfaces; every page inherits the homepage palette without being touched individually. ── REWRITTEN 2026-07-28 ───────────────────────────────────────────────── The homepage became "statute as substrate" — near-black ground, muted accents, Georgia display, hairline rules (founder direction A). This file still carried the SUPERSEDED cream case-file skin (#faf7f0 paper, brick-red #c1502e, Playfair), so pricing and 17 other pages looked like a different product entirely — which is exactly what the founder saw: "the pricing page looks like the very old design". Two things this rewrite deliberately does: 1. INVERTS the light overrides. The old file forced `#fff` onto inputs, cards and result boxes. Left alone against a near-black ground those become white slabs — worse than the old skin, not better. Every one is remapped to a dark surface here. 2. DROPS the Google Fonts @import. The homepage is self-contained by design (no external fonts), the display face is Georgia either way, and an @import is a render-blocking request on every static page. Nothing else referenced Playfair once the headline rule below changed. The app (index.html #main-app) is themed in-file and is NOT affected: its per-stage palettes are guarded by scripts/check-stage-palette.mjs. ───────────────────────────────────────────────────────────────────────── */ :root{ /* ground — the same near-black with a faint cool cast as the homepage, so accents read as light falling on it rather than as flat colour fills */ --bg:#0A0A0C; --surface:#121317; --line:rgba(237,234,228,.09); --line2:rgba(237,234,228,.16); --ink:#EDEAE4; --ink2:#A29E97; --muted:#63615D; /* One fixed accent for the static pages. The homepage rotates six hues with the area of law; the rest of the site holds a single calm gold, which also keeps continuity with the brand's gold heritage. */ --brand:#C9963F; --brand-d:#E0AF52; --brand-soft:rgba(201,150,63,.10); --navy:#0E0F12; --grad:linear-gradient(135deg,#C9963F,#B5822F); /* families match the homepage exactly — no webfont fetch */ --f-law:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif; --f-ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace; color-scheme:dark; } body{background:var(--bg) !important;color:var(--ink) !important;font-family:var(--f-ui);} a{color:var(--brand);} /* the old blue→green "hero aura" blobs — off-brand against this ground */ .hero-aura{display:none !important;} /* ── Serif display headlines site-wide (body stays sans) ── */ h1,h2,h3,.hero h1,.sec-title,.tier-name,.faq-q,.checker h1,.checker h2,.step-h{ font-family:var(--f-law) !important;letter-spacing:-.018em;font-weight:400; color:var(--ink); } /* eyebrows / kickers / small caps labels */ .eyebrow,.kicker,.you-chip,.pop-tag,.lbl{ font-family:var(--f-mono) !important;letter-spacing:.2em;text-transform:uppercase; } /* primary buttons / badges — gold with dark ink, the homepage's button logic */ .btn-pri,.cta,.pop-tag,.num{ background:var(--brand) !important;color:#08090B !important;border:1px solid var(--brand) !important; box-shadow:0 8px 26px -14px rgba(201,150,63,.55) !important; } .btn-pri:hover,.cta:hover{filter:brightness(1.08);} .btn-ghost{ background:transparent !important;border:1px solid var(--line2) !important;color:var(--ink) !important; } .btn-ghost:hover{border-color:var(--brand) !important;color:var(--brand) !important;} /* panels & cards → layered dark surface, hairline border, no shadow */ .card,.checker,.letter-out,.faq-item,.tier,.plan,.panel{ background:var(--surface) !important;border-color:var(--line) !important;color:var(--ink) !important; box-shadow:none !important; } /* The highlighted tier keeps a gold edge so "most popular" still reads. The class on pricing.html is `.card.pop` (verified against its render() at pricing.html:177), not `.tier` — guessing the selector left the featured plan indistinguishable from the rest. */ .card.pop,.tier.pop,.plan.pop,.tier.featured{ border-color:var(--brand) !important; box-shadow:0 0 34px -18px rgba(201,150,63,.5) !important; } /* flatten corners (≤3px) — the homepage uses 2-3px everywhere */ .card,.checker,.letter-out,.faq-item,.tier,.plan,.panel,.btn,.btn-pri,.btn-ghost,.cta, .banner,.callout,.result,.opt,.date-in,.cap-in,input,textarea,select,.you-chip,.pop-tag{ border-radius:3px !important; } /* callouts / banners / disclaimers → gold-tinted, not brick */ .banner,.callout,.disclaimer,.status-line{ background:var(--brand-soft) !important;color:var(--ink2) !important; border:1px solid rgba(201,150,63,.22) !important; } .banner b,.callout b,.disclaimer b,.status-line b{color:var(--ink) !important;} /* inputs — dark fields, gold focus ring */ .opt,.date-in,.cap-in,.fld input,input,textarea,select{ background:#0E0F12 !important;border:1px solid var(--line2) !important;color:var(--ink) !important; } input:focus,textarea:focus,select:focus,.opt:focus{ outline:2px solid var(--brand) !important;outline-offset:2px;border-color:var(--brand) !important; } ::placeholder{color:var(--muted) !important;} /* checker result states — semantic colour, dark-legible (green ok / red no / amber maybe). These are the SAME hues the app uses for STRONG/PARTIAL/MISSING. */ .result{background:var(--surface) !important;border:1px solid var(--line) !important;color:var(--ink) !important;} .result.yes{background:rgba(143,212,158,.10) !important;border-color:rgba(143,212,158,.34) !important;} .result.no{background:rgba(255,158,144,.10) !important;border-color:rgba(255,158,144,.34) !important;} .result.maybe{background:rgba(242,178,102,.10) !important;border-color:rgba(242,178,102,.34) !important;} /* ── the brand mark ────────────────────────────────────────────────────── Every static page carries the wordmark as an inline SVG whose gradient stops are hardcoded teal→green (#2563eb → #10b981) — the palette from two designs ago, and the one thing that still shouted "different product" once the ground went dark. `stop-color` is a presentation attribute, so CSS can retint it centrally instead of editing 18 files; `rx` likewise brings the 8px pill down to the 3px this design uses everywhere. */ #lm stop:first-of-type{stop-color:#C9963F !important;} #lm stop:last-of-type{stop-color:#B5822F !important;} .brand svg linearGradient stop:first-of-type{stop-color:#C9963F !important;} .brand svg linearGradient stop:last-of-type{stop-color:#B5822F !important;} .brand svg rect,.mk svg rect{rx:3px;} /* the arrow glyph inside the mark reads as near-black on gold */ .brand svg path[fill="#fff"],.mk svg path[fill="#fff"]{fill:#08090B !important;} /* highlighted word → solid gold (background-clip text is fragile across pages) */ .grad{background:none !important;color:var(--brand) !important;-webkit-text-fill-color:var(--brand) !important;} .cs-toast{background:var(--surface) !important;color:var(--ink) !important;border:1px solid var(--line2) !important;} /* dark sections / footers — one step off the ground so they still separate */ .foot,.footer,.site-foot,.dark,.cta-band{ background:var(--navy) !important;color:var(--ink) !important;border-top:1px solid var(--line) !important; } .foot a,.footer a,.site-foot a{color:var(--ink2) !important;} .foot a:hover,.footer a:hover,.site-foot a:hover{color:var(--brand) !important;} /* hairline separators used across the static pages */ hr,.rule,.sep{border:0 !important;border-top:1px solid var(--line) !important;} /* tables (pricing comparison, terms) */ table{border-color:var(--line) !important;} th,td{border-color:var(--line) !important;color:var(--ink) !important;} thead th{color:var(--ink2) !important;font-family:var(--f-mono) !important; font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;} /* prose blocks on the legal pages */ p,li{color:var(--ink2);} strong,b{color:var(--ink);} code,kbd,pre{font-family:var(--f-mono) !important;background:#0E0F12 !important;color:var(--brand-d) !important;}