/* ═══════════════════════════════════════════════════════════════ PlainAid — gender-personalised theme overrides Loaded on every public page (index, compare-plans, hospitals, explained). Applies on top of each page's own default (= "Other" / neutral) design by overriding CSS custom properties, scoped to [data-gender] on . Nothing changes for data-gender="n" or when the attribute is absent — the page's own :root values stand. Three variable namespaces exist across the site (pages were built at different times), so each theme is written once per namespace: NS-A → index.html (--forest / --gold / --bone / --ink) NS-B → plainaid_homepage.html, plainaid_explained.html (--teal / --amber / --cream / --text) NS-C → plainaid_hospitals.html (--navy / --gold / --cream / --text) Semantic pairing (same real colour, different var name): anchor forest / teal(NS-B) / navy accent green / teal-light+green+sa-green(NS-B) / teal+sa-green(NS-C) accent-bg green-soft / teal-pale+teal-ghost+green-bg / sa-green-bg gold gold / amber / gold page-bg bone / cream / cream ink & text ink+text-mid+text-muted (all namespaces, name varies) ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────── FEMALE — chic rose ───────────────────────── Deep wine-rose anchor, warm rose-gold accent, blush page background. Kept editorial and grown-up on purpose — not a "pink UI", a rose one. */ html[data-gender="f"] { /* NS-A — index.html */ --forest:#7A2E43; --forest-mid:#93435B; --green:#C2577A; --green-deep:#A6425F; --green-soft:#FBEAEF; --gold:#B98A54; --gold-dark:#96703F; --gold-soft:#F6EADA; --bone:#FDF6F4; --bone-mid:#F5E4E2; --stone:#EFD7DA; --border:rgba(122,46,67,0.14); --ink:#2B1A20; --text-mid:#5B3A42; --text-muted:#8C6E73; } html[data-gender="f"] { /* NS-B — homepage.html, explained.html */ --teal:#7A2E43; --teal-mid:#93435B; --teal-light:#C2577A; --teal-pale:#F3D7DF; --teal-ghost:#FBEAEF; --cream:#FDF6F4; --cream-dark:#F5E4E2; --amber:#B98A54; --amber-light:#F6EADA; --text:#2B1A20; --text-mid:#5B3A42; --text-muted:#8C6E73; --border:rgba(122,46,67,0.14); --green:#C2577A; --green-bg:#FBEAEF; --sa-green:#C2577A; } html[data-gender="f"] { /* NS-C — hospitals.html */ --navy:#7A2E43; --navy-mid:#93435B; --teal:#C2577A; --teal-light:#D07B98; --gold:#B98A54; --gold-light:#F6EADA; --gold-dark:#96703F; --sa-green:#C2577A; --sa-green-bg:#FBEAEF; --cream:#FDF6F4; --stone:#EFD7DA; --border:rgba(122,46,67,0.1); --text:#2B1A20; --text-mid:#5B3A42; --text-muted:#8C6E73; } /* ───────────────────────── MALE — professional navy ──────────────────── Deep navy anchor, cool steel-blue accent, muted brass detail. Reads like a private-banking product, not "boy-blue". */ html[data-gender="m"] { /* NS-A — index.html */ --forest:#0B2545; --forest-mid:#14355E; --green:#3A6EA5; --green-deep:#2C567F; --green-soft:#E8EEF5; --gold:#9C8A5E; --gold-dark:#7C6B45; --gold-soft:#EFEBDD; --bone:#F3F5F8; --bone-mid:#E5EAF0; --stone:#D7DEE7; --border:rgba(11,37,69,0.14); --ink:#10151F; --text-mid:#3C4552; --text-muted:#737C89; } html[data-gender="m"] { /* NS-B — homepage.html, explained.html */ --teal:#0B2545; --teal-mid:#14355E; --teal-light:#3A6EA5; --teal-pale:#D5E1EE; --teal-ghost:#E8EEF5; --cream:#F3F5F8; --cream-dark:#E5EAF0; --amber:#9C8A5E; --amber-light:#EFEBDD; --text:#10151F; --text-mid:#3C4552; --text-muted:#737C89; --border:rgba(11,37,69,0.14); --green:#3A6EA5; --green-bg:#E8EEF5; --sa-green:#3A6EA5; } html[data-gender="m"] { /* NS-C — hospitals.html */ --navy:#0B2545; --navy-mid:#14355E; --teal:#3A6EA5; --teal-light:#5F8CBC; --gold:#9C8A5E; --gold-light:#EFEBDD; --gold-dark:#7C6B45; --sa-green:#3A6EA5; --sa-green-bg:#E8EEF5; --cream:#F3F5F8; --stone:#D7DEE7; --border:rgba(11,37,69,0.1); --text:#10151F; --text-mid:#3C4552; --text-muted:#737C89; } /* ═══════════════════════════════════════════════════════════════ Entry gate — one-time full-screen picker (index.html only, via #pa-gate-mount). Colours here are intentionally hardcoded, not themed, since the three option buttons must preview all three palettes at once regardless of which is currently applied. ═══════════════════════════════════════════════════════════════ */ html.pa-gate-lock{overflow:hidden;} .pa-gate{ position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; padding:1.25rem;background:rgba(20,20,18,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); opacity:1;transition:opacity 0.4s ease; } .pa-gate.pa-gate-out{opacity:0;} .pa-gate-card{ width:100%;max-width:460px;background:#fff;border-radius:22px; padding:2.25rem 2rem 2rem;text-align:center; box-shadow:0 24px 70px rgba(0,0,0,0.35); transform:translateY(0) scale(1);transition:transform 0.4s cubic-bezier(0.22,1,0.36,1); } .pa-gate.pa-gate-out .pa-gate-card{transform:translateY(14px) scale(0.97);} .pa-gate-mark{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.8rem;letter-spacing:0.08em; text-transform:uppercase;color:#0E3B2E;margin-bottom:1rem; } .pa-gate-title{ font-family:'Space Grotesk',sans-serif;font-size:1.45rem;font-weight:600;color:#1B1D19; margin-bottom:0.5rem;line-height:1.25; } .pa-gate-sub{font-family:'Inter',sans-serif;font-size:0.88rem;color:#6b6b64;line-height:1.5;margin-bottom:1.75rem;} .pa-gate-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:0.65rem;} .pa-gate-opt{ display:flex;flex-direction:column;align-items:center;gap:0.6rem; padding:1rem 0.5rem;border-radius:16px;border:1.5px solid #E0DACA;background:#fff;cursor:pointer; font-family:'Inter',sans-serif;font-weight:600;font-size:0.82rem;color:#1B1D19; transition:transform 0.2s cubic-bezier(0.22,1,0.36,1),border-color 0.2s,box-shadow 0.2s; } .pa-gate-opt:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 10px 24px rgba(0,0,0,0.14);} .pa-gate-opt:active{transform:translateY(-1px) scale(0.98);} .pa-opt-swatch{width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,0.6);} .pa-opt-f .pa-opt-swatch{background:linear-gradient(135deg,#C2577A,#7A2E43);} .pa-opt-m .pa-opt-swatch{background:linear-gradient(135deg,#3A6EA5,#0B2545);} .pa-opt-n .pa-opt-swatch{background:linear-gradient(135deg,#C9A84C,#0E3B2E);} @media(max-width:420px){ .pa-gate-opts{gap:0.5rem;} .pa-gate-opt{padding:0.85rem 0.35rem;font-size:0.74rem;} .pa-opt-swatch{width:32px;height:32px;} } @media(prefers-reduced-motion:reduce){.pa-gate,.pa-gate-card,.pa-gate-opt{transition:none!important;}}