/* ============================================================ NUTSHELL — THEME SYSTEM Dark/light mode + accent / density / font / layout variants Driven by [data-theme] [data-accent] [data-density] [data-hero] on , plus CSS vars set by the Tweaks panel. ============================================================ */ /* ---- Smooth theme transition ---- */ html { transition: background-color .5s var(--ease-soft); } body, .section, .svc, .vstat, .cond, .promise, .jstep, .compare__table, .cta__card, .field input, .field select, .field textarea, .hero, .drawer, .faq__icon, .cover__chip, .hero__chip, .hero__badge-float, .hero__rating-float, .philo__stat-float, .ledby__quote, .topbar, .footer { transition: background-color .5s var(--ease-soft), color .5s var(--ease-soft), border-color .5s var(--ease-soft), box-shadow .5s var(--ease-soft); } /* ============================================================ ACCENT VARIANTS ============================================================ */ html[data-accent="moss"] { --copper: #5E7A5A; --copper-deep: #4C6648; --copper-soft: #9DB79A; --copper-wash: #E7EEE5; --sh-copper: 0 12px 28px rgba(76,102,72,.28); } html[data-accent="gold"] { --copper: #BE9243; --copper-deep: #9A7430; --copper-soft: #E0C589; --copper-wash: #F7EFDD; --sh-copper: 0 12px 28px rgba(154,116,48,.28); } html[data-accent="terracotta"] { --copper: #C9624B; --copper-deep: #A2452F; --copper-soft: #E59C86; --copper-wash: #FBE9E3; --sh-copper: 0 12px 28px rgba(162,69,47,.30); } /* ============================================================ DENSITY ============================================================ */ html[data-density="compact"] { --section-pad: clamp(48px, 7vw, 88px); } html[data-density="comfy"] { --section-pad: clamp(96px, 13vw, 172px); } /* ============================================================ HERO LAYOUT VARIANTS ============================================================ */ html[data-hero="editorial"] .hero__grid { grid-template-columns: 1fr; text-align: center; max-width: 980px; margin-inline: auto; } html[data-hero="editorial"] .hero__visual { display: none; } html[data-hero="editorial"] .hero__text { max-width: none; } html[data-hero="editorial"] .hero__sub { margin-inline: auto; } html[data-hero="editorial"] .hero__actions, html[data-hero="editorial"] .hero__trust { justify-content: center; } html[data-hero="editorial"] .hero__title { font-size: clamp(2.8rem, 6.6vw, 5.6rem); } html[data-hero="editorial"] .eyebrow { justify-content: center; } /* ============================================================ MOTION ============================================================ */ html[data-motion="reduced"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } html[data-motion="reduced"] .hero__badge-float, html[data-motion="reduced"] .hero__rating-float, html[data-motion="reduced"] .philo__stat-float, html[data-motion="reduced"] [class*="floaty"] { animation: none !important; } html[data-motion="reduced"] .app-phone__screens { animation: none !important; } /* ============================================================ DARK MODE ============================================================ */ html[data-theme="dark"] { --moss-pale: rgba(180,197,177,.10); --moss-wash: #122124; --moss-light: rgba(180,197,177,.16); --cream: #0E191B; --cream-warm: #101D1E; --ink-70: #C6D3CF; --ink-55: #A4B5B0; --ink-40: #889B96; --ink-muted: #899B96; } /* core surfaces / text tokens for dark */ html[data-theme="dark"] { --d-bg: #0E191B; --d-bg2: #122124; --d-surf: #18282B; --d-surf2: #1F3134; --d-text: #EAF0EA; --d-border: rgba(180,197,177,.14); } html[data-theme="dark"] body { background: var(--d-bg); color: var(--d-text); } /* sections */ html[data-theme="dark"] .section--cream { background: var(--d-bg); } html[data-theme="dark"] .section--wash { background: var(--d-bg2); } html[data-theme="dark"] .section--pale { background: var(--d-bg2); } html[data-theme="dark"] .section--warm { background: #0F1C1D; } html[data-theme="dark"] .section--dark { background: #08110F; } html[data-theme="dark"] .hero { background: linear-gradient(180deg, #14252A 0%, #0E191B 72%); } html[data-theme="dark"] .hero__blob--1 { background: radial-gradient(circle, rgba(120,150,120,.30), transparent 68%); } html[data-theme="dark"] .hero__blob--2 { background: radial-gradient(circle, rgba(201,123,99,.20), transparent 68%); } /* nav + drawer */ html[data-theme="dark"] .nav { background: rgba(14,25,27,.82); border-bottom-color: rgba(180,197,177,.1); } html[data-theme="dark"] .nav--scrolled { background: rgba(14,25,27,.95); } html[data-theme="dark"] .nav__logo img, html[data-theme="dark"] .footer__logo { filter: brightness(0) invert(1); opacity: .94; } html[data-theme="dark"] .nav__burger span { background: var(--d-text); } html[data-theme="dark"] .drawer { background: var(--d-bg); } html[data-theme="dark"] .nav__phone, html[data-theme="dark"] .drawer__meta a { color: var(--d-text); } /* cards & surfaces */ html[data-theme="dark"] .svc, html[data-theme="dark"] .vstat, html[data-theme="dark"] .cond, html[data-theme="dark"] .promise, html[data-theme="dark"] .jstep, html[data-theme="dark"] .compare__table, html[data-theme="dark"] .cta__card, html[data-theme="dark"] .hero__chip, html[data-theme="dark"] .hero__badge-float, html[data-theme="dark"] .hero__rating-float, html[data-theme="dark"] .philo__stat-float, html[data-theme="dark"] .cover__chip, html[data-theme="dark"] .jstep__connector { background: var(--d-surf); border-color: var(--d-border); color: var(--d-text); } html[data-theme="dark"] .cond:hover { background: var(--d-surf2); } html[data-theme="dark"] .compare__cell--nut { background: rgba(94,122,90,.16); } html[data-theme="dark"] .compare__row + .compare__row, html[data-theme="dark"] .faq__item { border-color: var(--d-border); } html[data-theme="dark"] .compare__cell .no { background: #2A3A36; } html[data-theme="dark"] .compare__cell .no svg { color: #6E807B; } /* headings & strong text → light */ html[data-theme="dark"] .s-title, html[data-theme="dark"] .hero__title, html[data-theme="dark"] .ledby__title, html[data-theme="dark"] .philo__title, html[data-theme="dark"] .svc__title, html[data-theme="dark"] .vstat__num, html[data-theme="dark"] .vstat__label, html[data-theme="dark"] .cond__t, html[data-theme="dark"] .jstep__t, html[data-theme="dark"] .faq__q, html[data-theme="dark"] .promise__text, html[data-theme="dark"] .promise__by b, html[data-theme="dark"] .philo__li, html[data-theme="dark"] .cover__chip, html[data-theme="dark"] .hero__chip b, html[data-theme="dark"] .hero__chip, html[data-theme="dark"] .compare__cell--feature, html[data-theme="dark"] .compare__cell--nut, html[data-theme="dark"] .compare__head-brand .logo, html[data-theme="dark"] .cta__card h3, html[data-theme="dark"] .hero__badge-float .t, html[data-theme="dark"] .philo__stat-float .n, html[data-theme="dark"] .app-card__t, html[data-theme="dark"] .field label { color: var(--d-text); } html[data-theme="dark"] .hero__trust-item { color: var(--ink-70); } html[data-theme="dark"] .hero__trust-sep { background: rgba(180,197,177,.18); } /* icon chips brighten */ html[data-theme="dark"] .svc__ico svg, html[data-theme="dark"] .vstat__ico svg, html[data-theme="dark"] .jstep__ico svg, html[data-theme="dark"] .philo__li svg, html[data-theme="dark"] .hero__chip-ico svg, html[data-theme="dark"] .hero__trust-item svg, html[data-theme="dark"] .hero__badge-float .ico svg, html[data-theme="dark"] .promise__avatar svg { color: var(--moss); } html[data-theme="dark"] .svc__ico, html[data-theme="dark"] .vstat__ico, html[data-theme="dark"] .jstep__ico, html[data-theme="dark"] .hero__chip-ico, html[data-theme="dark"] .hero__badge-float .ico, html[data-theme="dark"] .promise__avatar { background: rgba(180,197,177,.12); } html[data-theme="dark"] .svc:hover .svc__ico { background: var(--moss-deeper); } html[data-theme="dark"] .svc:hover .svc__ico svg { color: #fff; } /* inputs */ html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { background: var(--d-bg2); border-color: var(--d-border); color: var(--d-text); } html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field select:focus, html[data-theme="dark"] .field textarea:focus { background: var(--d-surf); border-color: var(--copper); } html[data-theme="dark"] .field input::placeholder, html[data-theme="dark"] .field textarea::placeholder { color: var(--ink-40); } /* faq icon ring */ html[data-theme="dark"] .faq__icon { border-color: var(--d-border); } html[data-theme="dark"] .jstep__num { color: rgba(180,197,177,.18); } /* cover map */ html[data-theme="dark"] .cover__map { background: var(--d-surf); border-color: var(--d-border); } /* footer slightly deeper */ html[data-theme="dark"] .footer { background: #08110F; } /* dark-mode logo swap in "Why Nutshell" section */ .ledby__logo--dark { display: none; } html[data-theme="dark"] .ledby__logo--light { display: none; } html[data-theme="dark"] .ledby__logo--dark { display: block; } /* dark-mode logo swap on the page transition veil */ html[data-theme="dark"] .veil__logo--light { display: none; } html[data-theme="dark"] .veil__logo--dark { display: block; } html[data-theme="dark"] .ledby__media-img:has(.ledby__logo) { background: var(--d-surf); } /* dark-mode ledby point headings */ html[data-theme="dark"] .ledby__point b { color: var(--d-text); } html[data-theme="dark"] .ledby__point-ico { background: rgba(180,197,177,.12); } html[data-theme="dark"] .ledby__point-ico svg { color: var(--moss); } html[data-theme="dark"] .ledby__title { color: var(--d-text); } html[data-theme="dark"] .ledby__title em { color: var(--copper-soft); } /* dark-mode CTA section */ html[data-theme="dark"] .cta { background: linear-gradient(160deg, #122420 0%, #0a1416 60%, #0d1a1c 100%); } /* dark-mode neumorphic form card */ html[data-theme="dark"] .cta__card { background: linear-gradient(145deg, #1a3230, #0f1f21); box-shadow: 8px 8px 20px rgba(0,0,0,.35), -6px -6px 16px rgba(180,197,177,.04); border-color: rgba(180,197,177,.06); } html[data-theme="dark"] .cta__card h3 { color: #fff; } html[data-theme="dark"] .cta__card p { color: rgba(234,240,234,.55); } html[data-theme="dark"] .field label { color: rgba(234,240,234,.7); } html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { background: linear-gradient(145deg, #0f1f21, #162a2c); box-shadow: inset 3px 3px 6px rgba(0,0,0,.3), inset -2px -2px 5px rgba(180,197,177,.05); color: #EAF0EA; } html[data-theme="dark"] .field input::placeholder, html[data-theme="dark"] .field textarea::placeholder { color: rgba(234,240,234,.3); } html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field select:focus, html[data-theme="dark"] .field textarea:focus { box-shadow: inset 3px 3px 6px rgba(0,0,0,.3), inset -2px -2px 5px rgba(180,197,177,.05), 0 0 0 2px rgba(217,118,101,.4); background: linear-gradient(145deg, #122426, #1a3230); } html[data-theme="dark"] .cta__form-note { color: rgba(234,240,234,.4); } html[data-theme="dark"] .field select option { background: #1a3230; color: #EAF0EA; } html[data-theme="dark"] .field__err { color: var(--copper-soft); } html[data-theme="dark"] .cta__success .ico { background: rgba(180,197,177,.12); } html[data-theme="dark"] .cta__success .ico svg { color: var(--moss); } html[data-theme="dark"] .cta__success h3 { color: #fff; } html[data-theme="dark"] .cta__success p { color: rgba(234,240,234,.55); } /* dark-mode success states */ html[data-theme="dark"] .cta__success h3 { color: var(--d-text); } html[data-theme="dark"] .cta__success .ico { background: rgba(180,197,177,.12); } /* dark creed highlights */ html[data-theme="dark"] .creed__quote .hl { color: var(--copper-soft); } html[data-theme="dark"] .creed__rule { background: var(--copper-soft); } /* dark-mode accreditation */ html[data-theme="dark"] .accred { background: #08110F; } /* dark-mode topbar */ html[data-theme="dark"] .topbar { background: #08110F; } /* dark-mode promise / testimonial accent bar */ html[data-theme="dark"] .promise::before { background: linear-gradient(90deg, var(--moss), var(--copper-soft)); } /* dark-mode FAQ hover */ html[data-theme="dark"] .faq__q:hover { background: rgba(180,197,177,.06); } /* ============================================================ THEME TOGGLE BUTTON (in nav) ============================================================ */ .theme-toggle, .access-toggle { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--moss-pale); color: var(--charcoal); flex-shrink: 0; transition: background .3s, transform .4s var(--ease), color .3s; position: relative; overflow: hidden; } .theme-toggle:hover { transform: rotate(-18deg); background: var(--moss-light); } .access-toggle:hover { background: var(--moss-light); } .access-toggle svg { width: 21px; height: 21px; } html[data-theme="dark"] .access-toggle { background: rgba(180,197,177,.12); color: var(--moss); } .theme-toggle svg { width: 19px; height: 19px; position: absolute; transition: opacity .35s var(--ease), transform .45s var(--ease); } .theme-toggle .ico-sun { opacity: 0; transform: rotate(90deg) scale(.4); } .theme-toggle .ico-moon { opacity: 1; transform: none; } html[data-theme="dark"] .theme-toggle { background: rgba(180,197,177,.12); color: var(--moss); } html[data-theme="dark"] .theme-toggle .ico-sun { opacity: 1; transform: none; color: var(--gold); } html[data-theme="dark"] .theme-toggle .ico-moon { opacity: 0; transform: rotate(-90deg) scale(.4); } @media (max-width: 1200px){ .theme-toggle { margin-right: 4px; } } /* ============================================================ ACCESSIBILITY PANEL — dark mode ============================================================ */ html[data-theme="dark"] .access-panel { background: var(--d-surf); border-color: var(--d-border); box-shadow: 0 24px 64px rgba(0,0,0,.5); } html[data-theme="dark"] .access-panel__title { color: var(--d-text); } html[data-theme="dark"] .access-panel__sub { color: var(--ink-55); } html[data-theme="dark"] .access-panel__close { border-color: var(--d-border); color: var(--moss); } html[data-theme="dark"] .access-panel__close:hover { background: rgba(180,197,177,.12); color: var(--d-text); } html[data-theme="dark"] .access-row__label { color: var(--d-text); } html[data-theme="dark"] .access-seg button { border-color: var(--d-border); color: var(--moss); } html[data-theme="dark"] .access-seg button[aria-pressed="true"] { background: var(--moss-deep); border-color: var(--moss-deep); color: #fff; } html[data-theme="dark"] .access-row--switch { border-color: var(--d-border); } html[data-theme="dark"] .access-switch { background: rgba(180,197,177,.22); } html[data-theme="dark"] .access-read-ico { background: rgba(180,197,177,.12); color: var(--moss); } /* easy read in dark mode: brighter, higher-contrast text */ html[data-theme="dark"].easy-read { --ink-70: #D9E4DE; --ink-55: #C6D4CD; --ink-40: #B8C8C0; --ink-muted: #AFC0B8; } /* ============================================================ DARK MODE — comprehensive text visibility fixes ============================================================ */ /* Navigation */ html[data-theme="dark"] .nav__link { color: rgba(234,240,234,.7); } html[data-theme="dark"] .nav__cta { color: #fff; } html[data-theme="dark"] .drawer__close { background: rgba(180,197,177,.12); color: var(--d-text); } html[data-theme="dark"] .drawer__link { color: var(--d-text); border-bottom-color: var(--d-border); } html[data-theme="dark"] .drawer__link:hover { color: var(--copper-soft); } html[data-theme="dark"] .drawer__cta { color: #fff; } html[data-theme="dark"] .scrim { background: rgba(0,0,0,.6); } /* Section subtitles & body text */ html[data-theme="dark"] .s-sub, html[data-theme="dark"] .ledby__text, html[data-theme="dark"] .philo__text, html[data-theme="dark"] .svc__desc, html[data-theme="dark"] .vstat__desc, html[data-theme="dark"] .cond__d, html[data-theme="dark"] .jstep__d, html[data-theme="dark"] .faq__a-inner, html[data-theme="dark"] .compare__note, html[data-theme="dark"] .compare__head-alt, html[data-theme="dark"] .promise__by span, html[data-theme="dark"] .managed__list div span, html[data-theme="dark"] .ledby__point span, html[data-theme="dark"] .hero__sub, html[data-theme="dark"] .cta__sub, html[data-theme="dark"] .app__sub, html[data-theme="dark"] .cta__form-note { color: rgba(234,240,234,.55); } /* Section title emphasis */ html[data-theme="dark"] .s-title em, html[data-theme="dark"] .managed__title em, html[data-theme="dark"] .cta__title em { color: var(--copper-soft); } /* Managed service section */ html[data-theme="dark"] .managed__title { color: var(--d-text); } html[data-theme="dark"] .managed__list div b { color: var(--d-text); } html[data-theme="dark"] .managed__stat-float { background: var(--d-surf); border-color: var(--d-border); } html[data-theme="dark"] .managed__stat-float .n, html[data-theme="dark"] .managed__stat-float .l { color: var(--d-text); } /* Eyebrow labels */ html[data-theme="dark"] .eyebrow { color: var(--copper-soft); } html[data-theme="dark"] .eyebrow--light { color: var(--copper-soft); } html[data-theme="dark"] .eyebrow--center { color: var(--copper-soft); } /* Footer */ html[data-theme="dark"] .footer__col h4 { color: var(--d-text); } html[data-theme="dark"] .footer__col a, html[data-theme="dark"] .footer__contact-item, html[data-theme="dark"] .footer__contact-item a { color: rgba(234,240,234,.6); } html[data-theme="dark"] .footer__col a:hover, html[data-theme="dark"] .footer__contact-item a:hover { color: var(--d-text); } html[data-theme="dark"] .footer__bottom { border-top-color: var(--d-border); } html[data-theme="dark"] .footer__bottom p, html[data-theme="dark"] .footer__legal a { color: rgba(234,240,234,.4); } html[data-theme="dark"] .footer__social a { background: rgba(180,197,177,.1); } html[data-theme="dark"] .footer__social a:hover { background: var(--moss-deeper); } html[data-theme="dark"] .footer__social a svg { color: rgba(234,240,234,.6); } /* Info panel / How it works */ html[data-theme="dark"] .info-tab { background: var(--d-surf); border-color: var(--d-border); color: var(--d-text); } html[data-theme="dark"] .info-tab.active { background: var(--moss-deeper); color: #fff; border-color: var(--moss-deeper); } html[data-theme="dark"] .info-panel__cap h3 { color: var(--d-text); } html[data-theme="dark"] .info-panel__cap p { color: rgba(234,240,234,.55); } html[data-theme="dark"] .flow__t { color: var(--d-text); } html[data-theme="dark"] .flow__d { color: rgba(234,240,234,.55); } html[data-theme="dark"] .flow__node { background: var(--d-surf); border-color: var(--d-border); } html[data-theme="dark"] .flow__node svg { color: var(--moss); } html[data-theme="dark"] .flow__line { background: var(--d-border); } html[data-theme="dark"] .tl__card { background: var(--d-surf); border-color: var(--d-border); } html[data-theme="dark"] .tl__t { color: var(--d-text); } html[data-theme="dark"] .tl__d, html[data-theme="dark"] .tl__step { color: rgba(234,240,234,.55); } html[data-theme="dark"] .tl__dot { background: var(--d-surf); border-color: var(--d-border); } html[data-theme="dark"] .tl__dot svg { color: var(--moss); } html[data-theme="dark"] .viz__card { background: var(--d-surf); border-color: var(--d-border); } html[data-theme="dark"] .viz__h { color: var(--d-text); } html[data-theme="dark"] .viz__sub, html[data-theme="dark"] .viz-tile .l, html[data-theme="dark"] .donut-legend__item { color: rgba(234,240,234,.55); } html[data-theme="dark"] .viz-tile .n { color: var(--d-text); } /* Topbar */ html[data-theme="dark"] .topbar__item, html[data-theme="dark"] .topbar__item a { color: rgba(234,240,234,.7); } html[data-theme="dark"] .topbar__pill { color: var(--d-text); background: rgba(180,197,177,.12); border-color: rgba(180,197,177,.2); } /* Creed section */ html[data-theme="dark"] .creed { background: var(--d-bg); } html[data-theme="dark"] .creed__quote { color: var(--d-text); } html[data-theme="dark"] .creed__by { color: rgba(234,240,234,.55); } /* Journey steps */ html[data-theme="dark"] .jstep { background: var(--d-surf); border-color: var(--d-border); } /* Trust stats below reviews */ html[data-theme="dark"] .vstat { background: var(--d-surf); border-color: var(--d-border); } /* Buttons */ html[data-theme="dark"] .btn--ghost-light { color: var(--d-text); border-color: rgba(234,240,234,.3); } html[data-theme="dark"] .btn--ghost-light:hover { background: rgba(234,240,234,.1); } html[data-theme="dark"] .btn--ghost { color: var(--d-text); border-color: var(--d-border); } /* Link arrows */ html[data-theme="dark"] .link-arrow { color: var(--copper-soft); } /* App section */ html[data-theme="dark"] .app__title, html[data-theme="dark"] .app__feat { color: var(--d-text); } /* Back to top */ html[data-theme="dark"] .to-top { background: var(--d-surf); border: 1px solid var(--d-border); } html[data-theme="dark"] .to-top svg { color: var(--d-text); } /* Conditions section on dark photo bg — already light text, just ensure readability */ html[data-theme="dark"] .section--photo .s-title, html[data-theme="dark"] .section--photo .s-sub, html[data-theme="dark"] .section--photo .cond__t, html[data-theme="dark"] .section--photo .cond__d { color: rgba(234,240,234,.9); } /* Map legend */ html[data-theme="dark"] .map-legend2 i { color: rgba(234,240,234,.6); } /* Comparison table */ html[data-theme="dark"] .compare__cell { color: rgba(234,240,234,.7); } /* Coverage chips */ html[data-theme="dark"] .cover__chip svg { color: var(--copper-soft); } /* Remaining dark-mode text fixes */ html[data-theme="dark"] .svc__tag { color: var(--copper-soft); background: rgba(217,118,101,.12); } html[data-theme="dark"] .compare__head-brand .tag { color: var(--copper-soft); background: rgba(217,118,101,.12); } html[data-theme="dark"] .cond__ico svg { color: var(--copper-soft); } html[data-theme="dark"] .jstep__connector svg { color: var(--copper-soft); } html[data-theme="dark"] .nav__phone svg { color: var(--copper-soft); } html[data-theme="dark"] .drawer__meta a { color: var(--d-text); } html[data-theme="dark"] .drawer__meta svg { color: var(--copper-soft); } html[data-theme="dark"] .philo__li { color: var(--d-text); } html[data-theme="dark"] .copper { color: var(--copper-soft); } html[data-theme="dark"] .faq__q:hover { color: var(--copper-soft); } html[data-theme="dark"] .cta__reassure { color: rgba(234,240,234,.45); } /* dark mode — reading pill */ html[data-theme="dark"] .read-pill { background: var(--d-surf); color: var(--d-text); border-color: var(--copper); box-shadow: 0 14px 40px rgba(0,0,0,.5); } html[data-theme="dark"] .read-pill__ico { background: rgba(217,118,101,.16); color: var(--copper-soft); } /* dark mode — icon chip backplates */ html[data-theme="dark"] .svc__ico, html[data-theme="dark"] .jstep__ico, html[data-theme="dark"] .vstat__ico { background: linear-gradient(135deg, rgba(180,197,177,.10) 0%, rgba(180,197,177,.20) 100%); box-shadow: inset 0 0 0 1.5px rgba(180,197,177,.16); } html[data-theme="dark"] .cond__ico { background: linear-gradient(135deg, rgba(217,118,101,.12) 0%, rgba(217,118,101,.22) 100%); box-shadow: inset 0 0 0 1.5px rgba(217,118,101,.18); } html[data-theme="dark"] .svc:hover .svc__ico { box-shadow: inset 0 0 0 1.5px rgba(180,197,177,.4); } html[data-theme="dark"] .soon-chip { background: rgba(217,118,101,.16); color: var(--copper-soft); } /* dark mode — coverage map v2 */ html[data-theme="dark"] .covmap__map { background: linear-gradient(180deg, #101E24 0%, #0C171C 100%); border-color: var(--d-border); box-shadow: inset 0 0 40px rgba(0,0,0,.4); } html[data-theme="dark"] .cov-context { fill: #1B2A30; stroke: #26363D; } html[data-theme="dark"] .cov-region--homecounties { fill: #3A4F44; stroke: #5C7D69; } html[data-theme="dark"] .cov-region--eastanglia { fill: #4E6B59; stroke: #71927F; } html[data-theme="dark"] .cov-town circle { fill: var(--d-text); stroke: #0C171C; } html[data-theme="dark"] .cov-town text { fill: var(--d-text); stroke: rgba(12,23,28,.85); } html[data-theme="dark"] .cov-town--hq text { fill: var(--copper-soft); } html[data-theme="dark"] .covmap__card { background: var(--d-surf); border-color: var(--d-border); } html[data-theme="dark"] .covmap__card h3 { color: var(--d-text); } html[data-theme="dark"] .covmap__note a { color: var(--copper-soft); } /* dark mode — journey + marquee */ html[data-theme="dark"] .jcard { background: var(--d-surf); border-color: var(--d-border); } html[data-theme="dark"] .jcard__body { background: var(--d-surf); } html[data-theme="dark"] .jcard__t { color: var(--d-text); } html[data-theme="dark"] .jscene--sage { background: linear-gradient(135deg, #1C2E2A, #24403A); } html[data-theme="dark"] .jscene--copper { background: linear-gradient(135deg, #33231E, #472E26); } html[data-theme="dark"] .jscene__medal { background: var(--d-surf2); } html[data-theme="dark"] .jstep-btn { border-color: var(--d-border); } html[data-theme="dark"] .jstep-btn.active { background: var(--d-surf); border-color: var(--moss); } html[data-theme="dark"] .jstep-btn__t { color: var(--d-text); } html[data-theme="dark"] .jstep-btn__n { background: rgba(180,197,177,.14); color: var(--moss); } html[data-theme="dark"] .jstep-btn.active .jstep-btn__n { background: var(--moss-deep); } html[data-theme="dark"] .jcard__num { background: var(--moss-deep); } html[data-theme="dark"] .marquee__fade--l { background: linear-gradient(90deg, var(--d-bg), transparent); } html[data-theme="dark"] .marquee__fade--r { background: linear-gradient(270deg, var(--d-bg), transparent); } /* dark mode - FAQ view more */ html[data-theme="dark"] .faq-more-btn { background: var(--d-surf); border-color: var(--d-border); color: var(--d-text); } html[data-theme="dark"] .faq-more-btn:hover { border-color: var(--moss); }