/* ═══════════════════════════════════════════════════════════════════════ THEME · PREMIUM LIGHT HEALTHCARE (scoped under body.theme-light) A visual-only override layer — no HTML/content/layout changes. CSS custom properties inherit, so re-declaring brand/surface/text tokens on re-tints every variable-driven component automatically. Then a few explicit overrides convert the deliberately-dark blocks (hero, stat band, final CTA) to the light system. Rollout = add the class site-wide. ═══════════════════════════════════════════════════════════════════════ */ body.theme-light{ /* brand — updated client palette (round 2) */ --navy:#1E5AA8; /* primary blue */ --blue:#1E5AA8; /* secondary blue (kept = primary; --navy-700 below is the literal "Primary Dark") */ --teal:#14B8A6; /* medical teal / accent */ --navy-900:#112B4E; /* deepest heading ink */ --navy-700:#0F3D91; /* Primary Dark */ --teal-700:#0FA999; /* teal hover */ --teal-50:#E8F9F8; /* Accent Light */ /* text */ --ink:#112B4E; /* Heading */ --slate:#526277; /* Body Text */ /* surfaces */ --white:#ffffff; --mist:#EEF6FF; /* Alternate Section */ --surface-2:#EEF6FF; --line:#E7EEF6; /* Border */ /* semantic */ --success:#16A34A; --wa:#16A34A; --destructive:#EF4444; /* softer, cooler elevation to match a bright canvas */ --sh-sm:0 4px 16px rgba(17,43,78,.05); --sh:0 10px 35px rgba(17,43,78,.08); --sh-lg:0 24px 60px rgba(17,43,78,.12); /* page canvas */ background:#F8FBFD; /* headings → Manrope (loaded conditionally in header.php); body stays Inter */ --ff-h:'Manrope',-apple-system,'Segoe UI',sans-serif; } body.theme-light{color:var(--slate)} body.theme-light h1,body.theme-light h2,body.theme-light h3,body.theme-light h4,body.theme-light h5{color:var(--ink)} body.theme-light p{color:var(--slate)} /* ── muted text token (brief: #8A98AA) ───────────────────────────────── */ body.theme-light small,body.theme-light .muted{color:#8A98AA} /* warning token (brief: #F59E0B) — only applied where a component already uses a warning role */ body.theme-light .warn,body.theme-light .badge-warn{color:#F59E0B} /* ── BUTTONS — primary solid teal, 16px radius, soft shadow (brief) ──── */ body.theme-light .btn{border-radius:16px} body.theme-light .btn-teal{ background:#14B8A6;color:#fff;font-weight:700; box-shadow:0 10px 24px rgba(20,184,166,.28),0 2px 6px rgba(16,42,67,.08)} body.theme-light .btn-teal:hover{background:#0FA999} /* secondary = white bg, blue border, blue text → light-teal on hover */ body.theme-light .btn-ghost,body.theme-light .btn-outline{ background:#fff;color:var(--navy);border:1.5px solid var(--navy)} body.theme-light .btn-ghost:hover,body.theme-light .btn-outline:hover{ background:var(--teal-50);border-color:var(--teal);color:var(--teal-700)} /* ── EMERGENCY BANNER (.cbx-emg, contact.php) — deliberately stays deep maroon/red (universal urgent-care colour, not the brand palette). Its own "p{color:#e8c4cd}" (pale pink) rule was losing on specificity to the global "body.theme-light p{color:var(--slate)}" rule, turning the copy slate-grey and low-contrast against the dark red gradient. */ body.theme-light .cbx-emg-copy p{color:#e8c4cd} /* ── CARDS — white, 24px radius, cool border, lift + teal edge on hover ─ */ body.theme-light .card,body.theme-light .loc-card,body.theme-light .spv-bento-c, body.theme-light .spv-ac,body.theme-light .grid-3>*{ background:#fff;border:1px solid var(--line);box-shadow:0 10px 35px rgba(16,42,67,.06)} body.theme-light .card:hover,body.theme-light .loc-card:hover, body.theme-light .spv-bento-c:hover{ border-color:var(--teal);box-shadow:0 16px 44px rgba(16,42,67,.12);transform:translateY(-4px)} /* ── NAVBAR — clean white, subtle blur, thin cool border ─────────────── */ body.theme-light .topbar{ background:#F2F8FC;color:#52606D;border-bottom:1px solid var(--line)} body.theme-light .topbar a{color:#52606D} body.theme-light .hdr{ background:rgba(255,255,255,.9);border-bottom:1px solid var(--line)} /* ═══════ HERO — remove dark navy, replace with premium LIGHT hero ═════ */ body.theme-light .hero-v2{ color:var(--ink); background: radial-gradient(1100px 520px at 78% 12%,#EAF4FC 0%,rgba(234,244,252,0) 62%), radial-gradient(760px 420px at 8% 92%,#EEF6FB 0%,rgba(238,246,251,0) 60%), linear-gradient(180deg,#ffffff 0%,#F6FBFE 52%,#ffffff 100%)} /* soft medical grid instead of white-on-navy */ body.theme-light .hv2-grid{ background-image:linear-gradient(rgba(15,76,129,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(15,76,129,.05) 1px,transparent 1px)} /* pastel orbs, very light */ body.theme-light .hv2-o1{background:radial-gradient(circle,rgba(20,184,166,.18),transparent 70%)} body.theme-light .hv2-o2{background:radial-gradient(circle,rgba(30,90,168,.14),transparent 70%);opacity:.7} /* headline + copy → ink/slate */ body.theme-light .hero-v2 h1{color:var(--ink)} body.theme-light .hero-v2 h1 .hl{color:var(--teal)} body.theme-light .hv2-sub{color:var(--slate)} /* eyebrow badge → light teal chip */ body.theme-light .hv2-badge{ background:var(--teal-50);border:1px solid rgba(20,184,166,.35);color:var(--teal-700)} /* stat row on light */ body.theme-light .hv2-stat b{color:var(--ink)} body.theme-light .hv2-stat small{color:#7B8794} body.theme-light .hv2-stat-ic{ background:var(--teal-50);border:1px solid rgba(20,184,166,.25)} body.theme-light .hv2-stat-ic svg{color:var(--teal)} body.theme-light .hv2-stars{color:#F59E0B} /* feature ticks */ body.theme-light .hv2-points li{color:var(--slate)} body.theme-light .hv2-points li::before{color:var(--teal)} /* glass "Call" button becomes a real light secondary button in this hero */ body.theme-light .hero-v2 .btn-glass{ background:#fff;color:var(--navy);border:1.5px solid var(--line);backdrop-filter:none} body.theme-light .hero-v2 .btn-glass:hover{border-color:var(--teal);color:var(--teal-700)} /* illustration accents */ body.theme-light .hv2-badge2{ background:#fff;color:var(--teal);border:1px solid var(--line);box-shadow:0 8px 22px rgba(16,42,67,.08)} body.theme-light .hv2-organ{color:rgba(15,76,129,.14)} body.theme-light .hv2-illus-glow{background:radial-gradient(circle,rgba(20,184,166,.16),transparent 68%)} /* doctor card → solid white; its inner text was white-on-navy, re-ink it */ body.theme-light .hv2-card{ background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgba(16,42,67,.14)} body.theme-light .hv2-cname b{color:var(--ink)} body.theme-light .hv2-cname small{color:#7B8794} body.theme-light .hv2-cchip{background:var(--mist);border:1px solid var(--line)} body.theme-light .hv2-cchip b{color:var(--teal-700)} body.theme-light .hv2-cchip small{color:var(--slate)} /* ═══════════════════════════════════════════════════════════════════ INNER-PAGE HEROES → LIGHT, matching the homepage hero-v2 exactly. Every non-home hero (.spv-hero: about/city/case-library/blog-index, .cbx-hero: contact, .hx-hero: hub, .bk-hero: books, .pst-hero: patient stories, .cx-hero: conditions, .sx-hero: services, .kx-hero: knowledge index, .nf-hero: 404, .mx-hero: knowledge master-hub, .bx-hero: gastro blog, .awp-hero: awards) was a dark navy/glass hero. Converting the background + the "glass" chip/button/divider decorations to the same light system used on the homepage — same request as the site-wide colour rollout, applied to the one component that was still dark. */ body.theme-light :is(.spv-hero,.cbx-hero,.hx-hero,.bk-hero,.pst-hero, .cx-hero,.sx-hero,.kx-hero,.nf-hero,.mx-hero,.bx-hero,.awp-hero){ color:var(--slate); background: radial-gradient(1100px 550px at 78% -10%,#EAF4FC 0%,rgba(234,244,252,0) 62%), radial-gradient(800px 460px at 6% 100%,#EEF6FB 0%,rgba(238,246,251,0) 60%), linear-gradient(180deg,#ffffff 0%,#F6FBFE 55%,#ffffff 100%)} /* breadcrumb — only ever appears inside these heroes, safe to fix globally */ body.theme-light .crumb a{color:var(--slate)} body.theme-light .crumb a:hover{color:var(--teal-700)} body.theme-light .crumb span{color:var(--ink)} body.theme-light .crumb i{color:var(--slate)} /* glass secondary button → real light button, same recipe as hero-v2 */ body.theme-light :is(.spv-hero,.cbx-hero,.hx-hero,.bk-hero,.pst-hero, .cx-hero,.sx-hero,.kx-hero,.nf-hero,.mx-hero,.bx-hero,.awp-hero) .btn-glass{ background:#fff;color:var(--navy);border:1.5px solid var(--line);backdrop-filter:none} body.theme-light :is(.spv-hero,.cbx-hero,.hx-hero,.bk-hero,.pst-hero, .cx-hero,.sx-hero,.kx-hero,.nf-hero,.mx-hero,.bx-hero,.awp-hero) .btn-glass:hover{ border-color:var(--teal);color:var(--teal-700)} /* trust-row dividers that were rgba(white) hairlines on navy → light line */ body.theme-light :is(.sx-trustrow,.sx-why-foot,.sx-book-doc,.cx-stats,.cx-cta-doc, .pst-stats,.hx-qrow,.kx-trust,.mx-trust){border-top-color:var(--line)!important} /* popular-search / trust-badge pills → light mist chip instead of white-glass */ body.theme-light :is(.cx-chip,.hx-pop,.awp-nums span,.bx-trend-row a, .bk-hero-badges span,.cbx-badge){ color:var(--navy);background:var(--mist);border-color:var(--line); -webkit-backdrop-filter:none;backdrop-filter:none} body.theme-light :is(.cx-chip.on,.hx-pop.active){background:var(--teal);color:#fff;border-color:var(--teal)} body.theme-light .cbx-mc{background:#fff;border-color:var(--line);box-shadow:var(--sh-sm);backdrop-filter:none} /* hero stat tile (about/city/case-library "25+ Years" pill) */ body.theme-light .cx-t{background:#fff;border-color:var(--line);box-shadow:var(--sh-sm);backdrop-filter:none} body.theme-light .cx-t:hover{background:var(--mist)} body.theme-light .cx-t b{color:var(--teal-700)} body.theme-light .cx-t small{color:var(--slate)} body.theme-light .spv-hero-rate{color:var(--slate)} /* floating photo-frame panel inside patient-stories/case-library hero */ body.theme-light :is(.pst-panel,.csl-panel){background:#fff;border-color:var(--line);box-shadow:var(--sh-lg)} /* eyebrow chip (top badge) inside each light hero — was pale-mint-on-teal-glass, tuned for navy; convert to solid teal-on-mist so it stays legible on white */ body.theme-light :is(.spv-hero .spv-eyebrow,.cx-hero .cx-badge,.hx-hero .hx-badge, .sx-hero .sx-badge,.kx-hero .kx-badge,.pst-hero .pst-badge,.mx-hero .mx-eyb, .awp-hero .ax-eyb){ color:var(--teal-700);background:var(--teal-50);border-color:rgba(20,184,166,.3); -webkit-backdrop-filter:none;backdrop-filter:none} /* hero trust-row / stat text ("25+ Years", "Cashless insurance accepted", "40+ topics"…) — was rgba(255,255,255,x)/#fff, invisible on the new white hero background */ body.theme-light :is(.spv-badges span){ color:var(--navy);background:var(--mist);border-color:var(--line); -webkit-backdrop-filter:none;backdrop-filter:none} body.theme-light :is(.sx-trustrow span,.kx-trust span,.mx-trust span,.hx-pops span,.cx-pop-lbl){color:var(--slate)} body.theme-light :is(.sx-trustrow .ic,.kx-trust .ic,.mx-trust .ic){color:var(--teal)} body.theme-light :is(.cx-stat b,.pst-stats b,.bx-hero-stats b,.hx-q b){color:var(--ink)} body.theme-light :is(.cx-stat small,.pst-stats small,.bx-hero-stats small,.hx-q small){color:#8A98AA} /* Gastro-Health article header (.gh-arthero, shares .spv-hero) — date/read-time and the "Written & reviewed by Dr. Tank" byline were rgba(255,255,255,x)/#fff, invisible on the light hero background (missed in the original rollout). */ body.theme-light .gh-meta-dot{color:var(--slate)} body.theme-light .gh-meta-dot .ic{color:var(--teal-700)} body.theme-light .gh-art-by{color:var(--slate)} body.theme-light .gh-art-by b{color:var(--ink)} body.theme-light .gh-art-by .ic{color:var(--teal-700)} /* Hero lede/subtitle (.spv-lede — used on Health Library hub, service pages, article headers, etc.) and the "Doctor-written / Medically reviewed / Evidence-based / Updated regularly" trust pills (.blog-hero-trust, Health Library hub only) — both were rgba(255,255,255,x)/#fff glass-on-navy, invisible on the light hero background (same missed-spot pattern). */ body.theme-light .spv-lede{color:var(--slate)} body.theme-light .gh-lede{color:var(--slate)} /* Research article meta row (.bla-meta, blog-leaf-hero) and Case Library "Documented by Dr. Tank" byline (.blog-byline, also blog-leaf-hero) — same missed-spot pattern: rgba(255,255,255,x)/#fff text on the now-light hero. */ body.theme-light .bla-meta span{color:var(--slate)} body.theme-light .bla-meta .ic{color:var(--teal-700)} body.theme-light .bla-meta-stars b{color:var(--ink)} body.theme-light .blog-byline b{color:var(--ink)} body.theme-light .blog-byline small{color:var(--slate)} body.theme-light .blog-byline small .ic{color:var(--teal-700)} /* Contact page hero (.cbx-hero — page-scoped styles inline in contact.php, not style.css) — eyebrow chip, subtitle and trust badges were tuned for the navy gradient .cbx-hero used to have; same missed-spot pattern now that theme-light.css lightens .cbx-hero's background. */ body.theme-light .cbx-eyebrow{ color:var(--teal-700);background:var(--teal-50);border-color:rgba(20,184,166,.3); -webkit-backdrop-filter:none;backdrop-filter:none} body.theme-light .cbx-sub{color:var(--slate)} body.theme-light .cbx-sub b{color:var(--ink)} body.theme-light .cbx-badge{ color:var(--navy);background:var(--mist);border-color:var(--line); -webkit-backdrop-filter:none;backdrop-filter:none} /* Patient Stories hero (.pst-hero, page-scoped styles inline) — eyebrow badge, subtitle, and the caption strip UNDER the doctor photo (.pst-mini — this one sits on a white .pst-panel already, so it was invisible even before the light-theme rollout touched the hero itself). */ body.theme-light .pst-badge{ color:var(--teal-700);background:var(--teal-50);border-color:rgba(20,184,166,.3); -webkit-backdrop-filter:none;backdrop-filter:none} body.theme-light .pst-lede{color:var(--slate)} body.theme-light .pst-mini{border-top-color:var(--line)} body.theme-light .pst-mini span{color:var(--muted)} body.theme-light .pst-mini span.is-a{color:var(--teal-700)} body.theme-light .pst-mini span:not(:last-child)::after{color:var(--line)} /* Gastro Health Blog hub "Latest Feature" card (.bx-feat, page-scoped styles inline in gastro-health.php) — the card itself only had a near-transparent rgba(255,255,255,.04) glass tint (relying on the old dark .bx-hero behind it for contrast), so on the light hero it's an invisible card with invisible white text/button inside. Give it a real white card background. */ body.theme-light .bx-feat{background:#fff;border-color:var(--line)} body.theme-light .bx-feat-meta span{color:var(--slate)} body.theme-light .bx-feat-meta .ic{color:var(--teal-700)} body.theme-light .bx-feat-body p{color:var(--slate)} body.theme-light .bx-feat .btn-glass{background:var(--mist);border-color:var(--line);color:var(--navy)} body.theme-light .bx-feat .btn-glass:hover{border-color:var(--teal);color:var(--teal-700)} /* Conditions A–Z hero (.cx-hero, page-scoped styles inline) — subtitle. */ body.theme-light .cx-lede{color:var(--slate)} /* Every other hub page defines its OWN differently-named "-lede" subtitle class (page-scoped inline styles) — same rgba(255,255,255,x) pattern, each missed individually in the original rollout. One rule for all of them: .hx-lede (Health Library), .kx-lede (Knowledge Centres index), .mx-lede (Knowledge Centre master-hub), .sx-lede (Services hub). */ body.theme-light .hx-lede,body.theme-light .kx-lede, body.theme-light .mx-lede,body.theme-light .sx-lede{color:var(--slate)} /* 404 page (.nf-hero, page-scoped styles inline) — the big "404" numeral and the glass buttons were white, invisible once .nf-hero (it's in the light- hero conversion list) lost its own dark navy gradient to theme-light.css's higher-specificity override. */ body.theme-light .nf-code{color:var(--ink)} body.theme-light .nf-code .nf-o{color:var(--teal-700)} body.theme-light .nf-btns .btn-glass{background:#fff;border-color:var(--line);color:var(--navy)} body.theme-light .nf-btns .btn-glass:hover{border-color:var(--teal);color:var(--teal-700)} body.theme-light .blog-hero-trust span{ color:var(--navy);background:var(--mist);border-color:var(--line); -webkit-backdrop-filter:none;backdrop-filter:none} body.theme-light .blog-hero-trust .ic{color:var(--teal-700)} body.theme-light .cx-stat b i{color:var(--teal-700)} body.theme-light .hx-drbadge{background:#fff;border-color:var(--line);box-shadow:var(--sh-sm)} body.theme-light .hx-drbadge span{color:var(--ink)} body.theme-light .cbx-mc span{color:var(--ink)} body.theme-light .cbx-mc svg{color:var(--teal-700)} body.theme-light .cbx-mc:hover{background:var(--teal-50);border-color:var(--teal)} /* headline highlight word/gradient-clip — solid teal instead of fade-to-pale-mint (the #7ffbe9 pale-mint end of the old gradient was tuned for a navy backdrop and reads as washed-out on white) */ body.theme-light .spv-hero-copy h1 span{color:var(--teal)} body.theme-light :is(.cx-hero,.sx-hero,.kx-hero,.mx-hero,.bx-hero-top) h1 em{ background:none;-webkit-text-fill-color:currentColor;color:var(--teal)} /* ═══════ STAT BANDS — were solid navy; make them light tinted panels ══ */ /* homepage band = .spv-stats (full-bleed), shared bento band = .statband */ body.theme-light .spv-stats,body.theme-light .statband{ background:linear-gradient(135deg,#F2F8FC,#EAF2FA); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} body.theme-light .statband{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 10px 35px rgba(16,42,67,.06)} body.theme-light .spv-stats b,body.theme-light .spv-stat b,body.theme-light .spv-count, body.theme-light .statband .s b{color:var(--teal-700)} body.theme-light .spv-stats small,body.theme-light .spv-stat small{color:var(--slate)} /* real markup for the shared bento band is

....

— not */ body.theme-light .statband .s span{color:var(--slate)} body.theme-light .statband .s+.s::before{background:var(--line)} body.theme-light .statband .stats-note{color:#8A98AA} body.theme-light .spv-stat-ic{background:var(--teal-50);border:1px solid rgba(20,184,166,.2)} body.theme-light .spv-stat-ic svg{color:var(--teal)} /* ═══════ FINAL CTA band — keep it a colour block but on-brand blue ═══ */ body.theme-light .sl-final{ background:linear-gradient(135deg,var(--navy) 0%,#14507f 55%,var(--blue) 100%)} /* (white text inside stays correct against this mid-blue block) */ /* ═══════════════════════════════════════════════════════════════════ CTA / CONSULTATION BAND — light, compact (not a big navy card). Same real content/links (footer.php untouched) — visual pass only. ═══════════════════════════════════════════════════════════════════ */ body.theme-light .convert{background:#F8FBFD;padding:clamp(40px,6vw,64px) 0} body.theme-light .convert .eyb{color:var(--teal-700)} body.theme-light .convert h2{color:var(--ink)} body.theme-light .convert p{color:var(--slate)} body.theme-light .cq{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm)} body.theme-light .cq b{color:var(--ink)} body.theme-light .cq small{color:var(--slate)} body.theme-light .cq-call{background:var(--teal-50);color:var(--navy)} body.theme-light .cq-wa{background:rgba(22,163,74,.12);color:#16A34A} body.theme-light .cq:hover{border-color:var(--teal)} body.theme-light .cq:hover .cq-call{background:var(--navy);color:#fff} body.theme-light .cq:hover .cq-wa{background:#16A34A;color:#fff} /* appointment_form() card — clean white card, modest shadow (not oversized) */ body.theme-light .convert .apptform{box-shadow:var(--sh-lg);border-radius:24px} /* ═══════════════════════════════════════════════════════════════════ DARK NAVY BOXES SITE-WIDE — every non-home hero (.spv-hero, .cbx-hero, .hx-hero, .bk-hero, .pst-hero, .cx-hero, .sx-hero, .kx-hero, .nf-hero, .mx-hero, .bx-hero, .awp-hero) PLUS every dark mid-page CTA/feature box (.sl-final, .loc-hosp, .awp-tl/.awp-cta, .pst-feat/.pst-cta, .sx-why/.sx-fact/.sx-minicta/.sx-book, .hx-tc/.hx-art-feat/.hx-cs/.hx-cta, .cx-phead/.cx-trust/.cx-cta, .csl-feat/.csl-cta, .mx-why/.mx-final, .bx-mc/.bx-news-card, .cbx-lux, .kx-az/.kx-fg/.kx-ai/.kx-book-copy) is a navy/blue card that sets color:#fff on the CONTAINER and lets its heading/paragraph children inherit it. Inheritance always loses to an explicit rule no matter how weak, so the global "body.theme-light h1..h5{color:var(--ink)}" / "p{color:var(--slate)}" rules were silently turning every one of these headings/paragraphs dark-on-dark-navy — invisible. This single high-specificity block restores white text for h1–h6/p/small inside all of them at once. */ body.theme-light :is( .sl-final,.loc-hosp,.awp-tl,.awp-cta,.pst-feat,.pst-cta, .sx-why,.sx-fact,.sx-minicta,.sx-book, .hx-tc,.hx-art-feat,.hx-cs,.hx-cta, .cx-phead,.cx-trust,.cx-cta,.csl-feat,.csl-cta, .mx-why,.mx-final,.bx-mc,.bx-news-card,.cbx-lux, .kx-az,.kx-fg,.kx-ai,.kx-book-copy ) :is(h1,h2,h3,h4,h5,h6,p,small){color:#fff} /* .cx-phead is a small dark card-header strip *inside* the light .cx-hero's sub-cards (not the hero itself) — stays dark intentionally, unaffected by the hero-light conversion above. */ /* ── FOOTER — dark navy (brief: #0B2345), teal highlights kept ───────── */ body.theme-light .foot{ background: radial-gradient(900px 420px at 88% -12%,rgba(20,184,166,.13),transparent 60%), radial-gradient(700px 380px at 0% 0%,rgba(30,90,168,.16),transparent 55%), linear-gradient(180deg,#0B2345,#081832)} body.theme-light .foot::before{ background:linear-gradient(90deg,var(--navy),var(--teal),var(--navy-700))} /* brand column — logo wordmark sits on dark bg now, force white/teal ink. Scoped to .foot only — this class is shared with the HEADER's logo (also .logo-t), and an unscoped rule here was turning the header wordmark white-on-white/invisible too. */ body.theme-light .foot .logo-t b{color:#fff!important} body.theme-light .foot .logo-t small{color:rgba(255,255,255,.6)} body.theme-light .fb>p{color:rgba(255,255,255,.62)} body.theme-light .fb .reg{color:rgba(255,255,255,.42)} /* BUG FIX: the global "body.theme-light h1..h5{color:var(--ink)}" rule (dark ink) was beating .fc h4's own white color on specificity — column headings were rendering near-invisible (dark-on-dark-navy). Force them back to white here. */ body.theme-light .fc h4{color:#fff} /* column dividers — subtle vertical rules between the 5 footer columns */ body.theme-light .fg{position:relative;column-gap:44px} body.theme-light .fg>.fc{position:relative} body.theme-light .fg>.fc::before{ content:"";position:absolute;left:-22px;top:2px;bottom:2px;width:1px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.12) 15%,rgba(255,255,255,.12) 85%,transparent)} /* social icons + quick-link rows — slightly larger, teal hover kept */ body.theme-light .fsoc a{width:40px;height:40px} body.theme-light .fsoc a:hover{background:linear-gradient(135deg,var(--teal),var(--teal-700));box-shadow:0 12px 24px rgba(20,184,166,.3)} body.theme-light .fc a:hover,body.theme-light .fc span .ic{color:var(--teal)} /* google-rating badge in the brand column, once configured */ body.theme-light .gr-badge{color:#fff} body.theme-light .gr-badge small{color:rgba(255,255,255,.6)} body.theme-light .disclaimer{color:rgba(255,255,255,.4)} body.theme-light .fbot{color:rgba(255,255,255,.5)} /* ── ICON chips — teal glyph on very-light-teal rounded square ───────── */ body.theme-light .loc-card-ic,body.theme-light .spv-bento-ic,body.theme-light .spv-ac-ic{ background:var(--teal-50);color:var(--teal);border:1px solid rgba(20,184,166,.18)} /* ── FORMS — white, soft cool borders, teal focus ring ──────────────── */ body.theme-light .apptform input,body.theme-light .apptform select, body.theme-light .apptform textarea{ background:#fff;border:1.5px solid var(--line)} body.theme-light .apptform input:focus,body.theme-light .apptform select:focus, body.theme-light .apptform textarea:focus{ border-color:var(--teal);box-shadow:0 0 0 4px rgba(20,184,166,.14)} body.theme-light .apptform label{color:var(--navy)}