/* ========================================================= MOC — FOREST THEME (dark) Applies the "story mock" look site-wide via ONE class. Usage: add class="theme-forest" to , link this AFTER site.css. Palette: #204D4D SchemeColor ladder. Warm cream type. Forest photos carry the green. Built 2026-06-14/15 (overnight rollout). ========================================================= */ body.theme-forest { /* token overrides → dark */ --bg-page: #0A1717; --bg-surface: #102727; --bg-subtle: #132E2E; --pale-teal: rgba(99,130,130,0.16); /* step--me bg, focus glow, secondary hover */ --fg-primary: #FAF8F5; /* headings on dark */ --fg-body: rgba(250,248,245,0.86); --fg-muted: rgba(250,248,245,0.70); --fg-faint: rgba(250,248,245,0.52); --border-soft: rgba(99,130,130,0.18); --border-default: rgba(99,130,130,0.30); --border-strong: rgba(99,130,130,0.45); --accent: #4D7171; /* #204D4D tint #2 */ background: var(--bg-page); color: var(--fg-body); } /* headings / display text that hardcode teal → cream */ body.theme-forest .display, body.theme-forest .section-head h2, body.theme-forest .hero__headline-raleway, body.theme-forest .quote blockquote, body.theme-forest .article__head h1, body.theme-forest .article-hero__card h1 { color: var(--fg-primary); } body.theme-forest .hero__headline-raleway em { color: #9FC4BE; } body.theme-forest .card__title, body.theme-forest .step__title, body.theme-forest .post-card__title, body.theme-forest .article__body h2, body.theme-forest .article__body h3 { color: #EAF3F1; } /* accent bits → light brand-teal (on controlled card/inline surfaces) */ body.theme-forest .card__kicker, body.theme-forest .step__num, body.theme-forest .post-card__cat, body.theme-forest .article__cat, body.theme-forest .aud__rank, body.theme-forest .qcard__n { color: var(--accent); } body.theme-forest .rule { background: var(--accent); } /* eyebrows → cream for legibility (matches the locked mock decision); the teal rule under them carries the accent */ body.theme-forest .eyebrow, body.theme-forest .eyebrow--teal { color: rgba(250,248,245,0.9); } body.theme-forest .soon__tag { color: var(--accent); border-color: var(--border-default); } body.theme-forest a:not(.btn) { color: #7FB0AA; text-decoration-color: rgba(127,176,170,0.5); } body.theme-forest a:not(.btn):hover { color: #A7CFC9; } /* body copy / leads / muted → cream-soft */ body.theme-forest p, body.theme-forest li, body.theme-forest .muted, body.theme-forest .step__body, body.theme-forest .card__body, body.theme-forest .post-card__excerpt { color: var(--fg-body); } body.theme-forest .lead { color: var(--fg-muted); } body.theme-forest strong { color: #fff; } /* section background bands → dark variations (rhythm) */ body.theme-forest .band-white { background: var(--bg-surface); } body.theme-forest .band-pale { background: var(--bg-subtle); } body.theme-forest .band-teal { background: #163636; } /* header → dark glass */ body.theme-forest .site-header { background: rgba(10,23,23,0.82); border-bottom-color: var(--border-soft); } body.theme-forest .brand__wm b { color: var(--fg-primary); } body.theme-forest .brand__wm span { color: var(--fg-faint); } body.theme-forest .nav a.navlink { color: var(--fg-body); } body.theme-forest .nav a.navlink:hover, body.theme-forest .nav a.navlink[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } body.theme-forest .nav-toggle span { background: var(--accent); } @media (max-width: 880px) { body.theme-forest .nav { background: var(--bg-page); border-bottom-color: var(--border-soft); } body.theme-forest .nav a.navlink { border-bottom-color: var(--border-soft); } } /* cards → dark surface */ body.theme-forest .card { background: rgba(250,248,245,0.04); border-color: var(--border-soft); } body.theme-forest .card:hover { border-color: var(--accent); box-shadow: 0 14px 40px rgba(4,12,12,0.5); } body.theme-forest .card ul.ticks li { color: var(--fg-body); border-top-color: var(--border-soft); } body.theme-forest .card ul.ticks li::before { color: var(--accent); } body.theme-forest .card__meta { color: var(--fg-faint); } body.theme-forest .aud { border-top-color: var(--accent); background: transparent; } /* trust strip */ body.theme-forest .trust { border-color: var(--border-soft); } body.theme-forest .trust__item { color: var(--fg-muted); } body.theme-forest .trust__sep { color: var(--border-default); } /* lifecycle steps */ body.theme-forest .step { border-top-color: var(--border-soft); } body.theme-forest .step:last-child { border-bottom-color: var(--border-soft); } body.theme-forest .step--me { background: rgba(99,130,130,0.14); } body.theme-forest .step--me .step__title { color: var(--accent); } body.theme-forest .step--me .step__body { color: var(--fg-body); } /* testimonial / pull-quote */ body.theme-forest .quote blockquote { color: var(--fg-primary); } body.theme-forest .quote__attr b { color: #EAF3F1; } body.theme-forest .quote__attr span { color: var(--fg-muted); } body.theme-forest .quote__bar { background: var(--accent); } body.theme-forest .quote__mark { color: rgba(99,130,130,0.45); } /* feature caption */ body.theme-forest .feature__cap { color: var(--fg-faint); } /* panels */ body.theme-forest .panel { background: rgba(250,248,245,0.04); border-color: var(--border-soft); box-shadow: none; } body.theme-forest .panel--teal { background: #163636; } /* light "cream island" panel inside the dark theme (e.g., contact "Prefer to write?") — keep text dark + links brand-teal so it stays readable on the cream surface */ body.theme-forest .panel--cream, body.theme-forest .panel--cream p, body.theme-forest .panel--cream li { color: #1c1a18; } body.theme-forest .panel--cream .muted { color: rgba(28,26,24,0.62); } body.theme-forest .panel--cream a:not(.btn) { color: #204C4C; text-decoration-color: rgba(32,76,76,0.45); } body.theme-forest .panel--cream a:not(.btn):hover { color: #163636; } /* light frosted "glass" card (Health Check → "What's actually in it") — cream surface (rgba(250,248,245,.88)), so force dark text in the forest theme */ body.theme-forest .panel--glass p { color: #2b2723; } body.theme-forest .panel--glass .lead { color: #3a352f; } body.theme-forest .panel--glass strong { color: #173636; } body.theme-forest .panel--glass .eyebrow, body.theme-forest .panel--glass .eyebrow--teal { color: #204D4D; } body.theme-forest .panel--glass .display, body.theme-forest .panel--glass [style*="color:var(--teal)"] { color: #204D4D !important; } body.theme-forest .panel--glass .rule { background: #204D4D; } /* buttons on dark */ body.theme-forest .btn--primary { background: var(--accent); color: var(--cream); } body.theme-forest .btn--primary:hover { background: #5e8585; color: #fff; } body.theme-forest .btn--secondary { color: var(--fg-primary); border-color: var(--border-default); } body.theme-forest .btn--secondary:hover { background: rgba(99,130,130,0.14); color: #fff; border-color: var(--accent); } body.theme-forest .btn--ghost { color: var(--accent); } body.theme-forest .btn--ghost:hover { color: #A7CFC9; } body.theme-forest .lnk { color: var(--accent); } body.theme-forest .lnk:hover { color: #A7CFC9; } /* forms → dark inputs */ body.theme-forest .field label { color: var(--fg-muted); } body.theme-forest .field input, body.theme-forest .field select, body.theme-forest .field textarea { background: rgba(250,248,245,0.05); color: var(--fg-primary); border-color: var(--border-default); } body.theme-forest .field input::placeholder, body.theme-forest .field textarea::placeholder { color: rgba(250,248,245,0.4); } body.theme-forest .field input:focus, body.theme-forest .field select:focus, body.theme-forest .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(77,113,113,0.25); } body.theme-forest .qcard { background: rgba(250,248,245,0.04); border-color: var(--border-soft); } body.theme-forest .qcard p { color: var(--fg-body); } /* page-hero card → dark glass (cream text on darkened forest, matches the mock) */ body.theme-forest .page-hero::before { background: rgba(8,18,17,0.34); } body.theme-forest .page-hero__card { background: rgba(10,23,23,0.3); border-color: rgba(127,176,170,0.22); } /* lighter card → let the forest show; text-shadow keeps the cream legible */ body.theme-forest .page-hero__card .display, body.theme-forest .page-hero__card h2, body.theme-forest .page-hero__card .lead, body.theme-forest .page-hero__card p, body.theme-forest .page-hero__card .eyebrow, body.theme-forest .page-hero__card .eyebrow--teal { text-shadow: 0 1px 16px rgba(6,16,15,0.6); } body.theme-forest .page-hero__card .section-head h2, body.theme-forest .page-hero__card h2, body.theme-forest .page-hero__card .display { color: var(--fg-primary); } body.theme-forest .page-hero__card .lead, body.theme-forest .page-hero__card p { color: rgba(250,248,245,0.86); } body.theme-forest .page-hero__card .eyebrow, body.theme-forest .page-hero__card .eyebrow--teal { color: rgba(250,248,245,0.9); } /* Inline-styled text colors — this codebase sets color:var(--teal*) etc. INLINE a lot, and inline styles beat class rules. Attribute selectors + !important flip them to light. (Only touches `color:` declarations, so inline backgrounds are unaffected.) */ body.theme-forest [style*="color:var(--teal-dark)"], body.theme-forest [style*="color:var(--teal-deep)"], body.theme-forest [style*="color:var(--teal)"], body.theme-forest [style*="color:var(--espresso)"], body.theme-forest [style*="color:var(--warm-700)"], body.theme-forest [style*="color:var(--warm-600)"] { color: #EAF3F1 !important; } body.theme-forest [style*="color:var(--fg-faint)"], body.theme-forest [style*="color:var(--warm-500)"] { color: rgba(250,248,245,0.55) !important; } /* selection / focus / footer */ body.theme-forest ::selection { background: var(--accent); color: #06201c; } body.theme-forest :focus-visible { outline-color: var(--accent); } body.theme-forest .site-footer { background: #081312; }