/* ========================================================= HOPE CHURCH — DARK MODE Activated by [data-theme="dark"] on . Layered over site.css; only overrides — no new visual ideas. Surface hierarchy in dark mode: bg-page #0E141B (was white) -- deepest bg-tint #141B25 (was ink-050) -- subtle section shift bg-muted #1A222E (card surface) -- elevated ink-900 #1A1F26 (untouched) -- dramatic dark blocks now read as "feature" panels ========================================================= */ :root[data-theme="dark"] { color-scheme: dark; /* ---- Surface tokens ---- */ --bg-page: #0E141B; --bg-tint: #141B25; --bg-muted: #1A222E; --bg-brand-soft: #0E2238; /* Remap the underlying gray scale that ministry CSS files reach into directly (background: var(--ink-050)). Without this, those sections render light-on-dark. Keep close to our dark surfaces. */ --ink-050: #141B25; /* was #F8F9FB — now matches bg-tint */ --ink-100: #1A222E; /* was #F1F3F5 — now matches bg-muted */ --ink-200: #1F2937; /* was #E4E7EB — slightly lighter for hover */ --ink-300: #2A3441; /* was form input borders — still readable */ /* Mid-to-dark inks are referenced directly as text/icon colors in give-page.css, worship-ministry.css, and site.css (event chevron, admin drag handle, mobile-menu SVGs). Remap them to white so any stray text using `var(--ink-400..700)` reads cleanly on dark. --ink-800/--ink-900 stay as-is — they back the "feature panel" dark blocks (bg-invert, hero scrims) and must remain dark. */ --ink-400: #FFFFFF; --ink-500: #FFFFFF; --ink-600: #FFFFFF; --ink-700: #FFFFFF; /* ---- Foreground ---- In dark mode every text token resolves to pure white. The grey ladder we use in light mode (fg-2/3/4 → secondary/meta/disabled) collapses here on purpose so no body copy renders grey-on-dark. */ --fg-1: #FFFFFF; --fg-2: #FFFFFF; --fg-3: #FFFFFF; --fg-4: #FFFFFF; /* ---- Borders ---- */ --border-hairline: rgba(255,255,255,0.08); --border-default: rgba(255,255,255,0.14); --border-strong: rgba(255,255,255,0.28); /* ---- Shadows: ground in true black ---- */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.40); --shadow-sm: 0 2px 6px rgba(0,0,0,0.45); --shadow-md: 0 8px 20px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.30); --shadow-lg: 0 20px 40px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.30); --shadow-brand: 0 16px 32px rgba(0, 130, 202, 0.35); /* ---- Status backgrounds need re-tuning ---- */ --success-bg: rgba(43,165,100,0.16); --warning-bg: rgba(232,160,41,0.18); --danger-bg: rgba(214,69,69,0.18); --info-bg: rgba(0,130,202,0.16); } /* ========================================================= SECTIONS — formerly #fff ========================================================= */ [data-theme="dark"] .hero-b, [data-theme="dark"] .mission-bar, [data-theme="dark"] .new-here, [data-theme="dark"] .events-section, [data-theme="dark"] .missions-trips, [data-theme="dark"] .about-story, [data-theme="dark"] .about-origin, [data-theme="dark"] .about-team-cta, [data-theme="dark"] .about-faith, [data-theme="dark"] .staff-section, [data-theme="dark"] .discover-intro { background: var(--bg-page); } /* SECTIONS — formerly var(--ink-050) */ [data-theme="dark"] .messages-section, [data-theme="dark"] .ministries-section, [data-theme="dark"] .about-values, [data-theme="dark"] .about-mission, [data-theme="dark"] .about-beliefs, [data-theme="dark"] .visit-section, [data-theme="dark"] .app-band, [data-theme="dark"] .discover-cover, [data-theme="dark"] .steps-rails, [data-theme="dark"] .team-elders-section, [data-theme="dark"] .team-support-section, [data-theme="dark"] .section-alt { background: var(--bg-tint); } /* The "dark" variant of messages-section -- push it slightly deeper so it still reads as a "feature" panel against the now-dark page */ [data-theme="dark"] .messages-section.dark { background: #0a0f15; } /* ========================================================= CARDS — formerly background: #fff ========================================================= */ [data-theme="dark"] .ministry-card, [data-theme="dark"] .msg-card, [data-theme="dark"] .msg-list-card, [data-theme="dark"] .event-card, [data-theme="dark"] .event-card-big, [data-theme="dark"] .lifegroups-why-card, [data-theme="dark"] .lifegroup-card, [data-theme="dark"] .missions-tier, [data-theme="dark"] .missions-partner, [data-theme="dark"] .missions-partner-v2, [data-theme="dark"] .discover-card, [data-theme="dark"] .visit-card, [data-theme="dark"] .embed-frame, [data-theme="dark"] .step-rail, [data-theme="dark"] .value-card, [data-theme="dark"] .mission-pillar, [data-theme="dark"] .belief-card, [data-theme="dark"] .discover-faq details { background: var(--bg-muted); border-color: var(--border-hairline); } [data-theme="dark"] .ministry-card:hover, [data-theme="dark"] .msg-card:hover, [data-theme="dark"] .msg-list-card:hover, [data-theme="dark"] .event-card:hover, [data-theme="dark"] .event-card-big:hover, [data-theme="dark"] .lifegroup-card:hover, [data-theme="dark"] .missions-partner:hover, [data-theme="dark"] .value-card:hover, [data-theme="dark"] .mission-pillar:hover { border-color: var(--hope-sky); } /* Event date chip on photo card needs to keep contrast */ [data-theme="dark"] .event-card-big-img .event-date { background: var(--bg-muted); color: var(--hope-sky); } [data-theme="dark"] .event-date { background: var(--bg-brand-soft); color: var(--hope-sky); } /* ========================================================= SITE HEADER ========================================================= */ [data-theme="dark"] .site-header { background: rgba(14,20,27,0.92); border-bottom-color: var(--border-hairline); } [data-theme="dark"] .site-nav a { color: #fff; } [data-theme="dark"] .site-nav a:hover { color: #fff; } [data-theme="dark"] .site-nav a.active { color: var(--hope-sky); } [data-theme="dark"] .site-nav a.active::after { background: var(--hope-sky); } [data-theme="dark"] .site-burger { color: #fff; } [data-theme="dark"] .site-burger:hover { background: rgba(255,255,255,0.06); } /* Brand logo: SiteHeader now picks the right PNG (reversed in dark mode); no filter needed. */ /* Nav dropdown */ [data-theme="dark"] .nav-dropdown-trigger { color: #fff; } [data-theme="dark"] .nav-dropdown-trigger:hover { color: #fff; } [data-theme="dark"] .nav-dropdown-trigger.active { color: var(--hope-sky); } [data-theme="dark"] .nav-dropdown-panel { background: #18202B; border-color: var(--border-hairline); box-shadow: var(--shadow-lg); } [data-theme="dark"] .nav-dropdown-eyebrow { color: var(--hope-sky); } [data-theme="dark"] .nav-dropdown-item-label{ color: #fff; } [data-theme="dark"] .nav-dropdown-item-desc { color: #fff; } [data-theme="dark"] .nav-dropdown-item:hover{ background: rgba(255,255,255,0.05); } [data-theme="dark"] .nav-dropdown-item.active { background: rgba(0,130,202,0.18); } [data-theme="dark"] .nav-dropdown-item.active .nav-dropdown-item-label { color: var(--hope-sky); } /* Mobile menu */ [data-theme="dark"] .mobile-menu { background: var(--bg-page); } [data-theme="dark"] .mobile-menu-nav a { color: #fff; border-bottom-color: var(--border-hairline); } [data-theme="dark"] .mobile-menu-nav a:hover { background: rgba(255,255,255,0.05); } [data-theme="dark"] .mobile-menu-nav a.active { color: var(--hope-sky); } [data-theme="dark"] .mobile-menu-group-head { color: #fff; border-bottom-color: var(--border-hairline); } [data-theme="dark"] .mobile-menu-group-items { background: var(--bg-tint); border-bottom-color: var(--border-hairline); } [data-theme="dark"] .mobile-menu-group-items a { color: #fff; } [data-theme="dark"] .mobile-menu-foot { color: #fff; border-top-color: var(--border-hairline); } /* ========================================================= FORMS ========================================================= */ [data-theme="dark"] .visit-field input, [data-theme="dark"] .visit-field select, [data-theme="dark"] .visit-field textarea { background: var(--bg-page); border-color: var(--border-default); color: var(--fg-1); } [data-theme="dark"] .visit-field input::placeholder, [data-theme="dark"] .visit-field textarea::placeholder { color: var(--fg-3); } [data-theme="dark"] .visit-field input:focus, [data-theme="dark"] .visit-field select:focus, [data-theme="dark"] .visit-field textarea:focus { border-color: var(--hope-sky); box-shadow: 0 0 0 3px rgba(107,196,232,0.22); } [data-theme="dark"] .visit-success { background: rgba(0,130,202,0.16); border-color: rgba(107,196,232,0.30); color: var(--hope-sky); } /* ========================================================= BUTTONS ========================================================= */ [data-theme="dark"] .btn-secondary { background: transparent; color: var(--hope-sky); border-color: var(--hope-sky); } [data-theme="dark"] .btn-secondary:hover { background: rgba(107,196,232,0.12); color: #fff; } [data-theme="dark"] .btn-ghost { color: #fff; } [data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.08); } /* ========================================================= HERO B (used as a light editorial split — needs dark adaptation) ========================================================= */ [data-theme="dark"] .hero-b-title { color: var(--fg-1); } [data-theme="dark"] .hero-b-lead { color: var(--fg-2); } [data-theme="dark"] .hero-b-meta { border-top-color: var(--border-hairline); } [data-theme="dark"] .hero-b-meta-value { color: var(--fg-1); } [data-theme="dark"] .hero-b-meta-label { color: var(--fg-3); } /* ========================================================= MISSION BAR — keep colored words; flip the bottom border ========================================================= */ [data-theme="dark"] .mission-bar { border-bottom-color: var(--border-hairline); } [data-theme="dark"] .mission-bar-eyebrow { color: var(--fg-3); } /* ========================================================= EVENTS TOGGLE (uses bg vars that we have re-pointed) ========================================================= */ [data-theme="dark"] .events-toggle { background: var(--bg-muted); border-color: var(--border-hairline); } [data-theme="dark"] .events-toggle:hover { background: #20283555; border-color: var(--hope-sky); box-shadow: var(--shadow-sm); } [data-theme="dark"] .events-toggle-chevron { background: var(--bg-page); border-color: var(--border-hairline); } [data-theme="dark"] .events-toggle.is-open .events-toggle-chevron { background: var(--hope-blue); border-color: var(--hope-blue); } /* ========================================================= CONNECT CARD ========================================================= */ [data-theme="dark"] .connect-checkbox { background: var(--bg-muted); color: var(--fg-1); } [data-theme="dark"] .connect-chip { background: var(--bg-muted); border-color: var(--border-hairline); color: var(--fg-2); } [data-theme="dark"] .connect-chip:hover { color: var(--hope-sky); border-color: var(--hope-sky); } [data-theme="dark"] .connect-also { background: rgba(0,130,202,0.14); } [data-theme="dark"] .connect-also strong { color: var(--hope-sky); } /* ========================================================= ABOUT · doctrine accordion, scripture quote, etc ========================================================= */ [data-theme="dark"] .doctrine { border-top-color: var(--border-hairline); } [data-theme="dark"] .doctrine:last-child { border-bottom-color: var(--border-hairline); } [data-theme="dark"] .doctrine-accordion > summary:hover { background: rgba(107,196,232,0.04); } [data-theme="dark"] .doctrine-chevron { background: var(--bg-muted); color: var(--fg-2); } [data-theme="dark"] .doctrine-accordion[open] > summary .doctrine-chevron, [data-theme="dark"] .doctrine-accordion > summary:hover .doctrine-chevron { background: rgba(0,130,202,0.18); color: var(--hope-sky); } [data-theme="dark"] .doctrine-sub { border-top-color: var(--border-hairline); } [data-theme="dark"] .doctrine-sub-item h4 { color: var(--hope-sky); } [data-theme="dark"] .about-faith-epigraph { border-top-color: var(--border-hairline); border-bottom-color: var(--border-hairline); color: var(--fg-1); } [data-theme="dark"] .about-faith-epigraph cite { color: var(--hope-sky); } [data-theme="dark"] .about-story-inner p.lead-first::first-letter { color: var(--hope-sky); } [data-theme="dark"] .about-origin-copy h2, [data-theme="dark"] .about-team-cta-copy h2 { color: var(--fg-1); } [data-theme="dark"] .about-origin-copy p.lead { color: var(--fg-1); } [data-theme="dark"] .about-values-coda, [data-theme="dark"] .about-mission-coda { color: var(--fg-2); } /* ========================================================= EMBED SLOT (the dashed placeholder card) ========================================================= */ [data-theme="dark"] .embed-slot { background: repeating-linear-gradient(45deg, var(--bg-tint), var(--bg-tint) 10px, var(--bg-page) 10px, var(--bg-page) 20px); border-color: var(--border-default); } [data-theme="dark"] .embed-slot-title { color: var(--fg-1); } [data-theme="dark"] .embed-slot-desc { color: var(--fg-3); } /* ========================================================= ANNOUNCEMENT BAR — keep navy in light, deepen in dark ========================================================= */ [data-theme="dark"] .announce-bar { background: #061226; } /* ========================================================= THEME TOGGLE BUTTON (sits in the sunday-strip) ========================================================= */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.72); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; padding: 5px 10px 5px 8px; border-radius: 999px; transition: color 140ms ease, background 140ms ease, border-color 140ms ease; line-height: 1; } .theme-toggle:hover { color: #fff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); } .theme-toggle:focus-visible { outline: 2px solid var(--hope-sky); outline-offset: 2px; } .theme-toggle-icon { width: 14px; height: 14px; display: inline-flex; } .theme-toggle-label { font-variant-numeric: tabular-nums; } @media (max-width: 720px) { .theme-toggle-label { display: none; } .theme-toggle { padding: 5px 8px; } } /* ========================================================= MINISTRY PAGES — full dark-mode sweep Every ministry CSS file hardcodes `background: #fff` and `background: var(--ink-050)` on its own sections and cards. The base dark-mode rules only cover site.css; without this block, all the /ministry-* pages render light-on-dark. Sections (formerly #fff) → var(--bg-page) [deepest] Sections (formerly --ink-050) → var(--bg-tint) [subtle shift] Cards / panels (formerly #fff) → var(--bg-muted) [elevated] Card-like (formerly --ink-050) → var(--bg-muted) [elevated] ========================================================= */ /* ---------- Kids ---------- */ [data-theme="dark"] .kids-intro, [data-theme="dark"] .kids-gallery-section, [data-theme="dark"] .kids-calendar { background: var(--bg-page); border-top-color: var(--border-hairline); } [data-theme="dark"] .kids-pillar, [data-theme="dark"] .kids-safety-list li, [data-theme="dark"] .kids-callout-box, [data-theme="dark"] .kids-calendar-frame { background: var(--bg-muted); border-color: var(--border-hairline); } [data-theme="dark"] .kids-foundation { /* foundation block already dark; just neutralize */ border-top-color: var(--border-hairline); } /* ---------- Linked 5/6 (redesign — Hope Tweens) ---------- */ [data-theme="dark"] .l56-brand, [data-theme="dark"] .l56-block, [data-theme="dark"] .l56-photo-section { background: var(--bg-page); } [data-theme="dark"] .l56-block-title, [data-theme="dark"] .l56-block-times, [data-theme="dark"] .l56-brand-title, [data-theme="dark"] .l56-meta-row dt { color: var(--fg-1); } [data-theme="dark"] .staff-card .elder-email { color: var(--hope-sky); } [data-theme="dark"] .l56-meta-row { border-bottom-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .l56-meta-row dd { color: #fff; } [data-theme="dark"] .l56-calendar-frame { background: var(--bg-muted); border-color: var(--border-hairline); } [data-theme="dark"] .l56-photo-frame { background: var(--bg-muted); } /* The Hope Tweens blue card stays vivid in dark mode — it's the focal point. */ /* ---------- Students ---------- */ [data-theme="dark"] .hs-wednesday, [data-theme="dark"] .hs-gallery { background: var(--bg-page); } [data-theme="dark"] .hs-sunday, [data-theme="dark"] .hs-calendar { background: var(--bg-tint); border-top-color: var(--border-hairline); } [data-theme="dark"] .hs-callout, [data-theme="dark"] .hs-sunday-time, [data-theme="dark"] .hs-calendar-frame, [data-theme="dark"] .hs-beat, [data-theme="dark"] .hs-wed-times { background: var(--bg-muted); border-color: var(--border-hairline); } /* ---------- College ---------- */ [data-theme="dark"] .cc-anchor, [data-theme="dark"] .cc-rhythm, [data-theme="dark"] .cc-life { background: var(--bg-page); } [data-theme="dark"] .cc-pillar, [data-theme="dark"] .cc-rhythm-card, [data-theme="dark"] .cc-calendar-frame { background: var(--bg-muted); border-color: var(--border-hairline); } /* ---------- Women ---------- */ [data-theme="dark"] .wv-anchor, [data-theme="dark"] .wv-calendar { background: var(--bg-page); } [data-theme="dark"] .wv-rhythm { background: var(--bg-muted); border-color: var(--border-hairline); } /* ---------- Men ---------- */ [data-theme="dark"] .mn-meets { background: var(--bg-page); } [data-theme="dark"] .mn-pillar, [data-theme="dark"] .mn-calendar-frame { background: var(--bg-muted); border-color: var(--border-hairline); } /* ---------- Fueled by Hope ---------- */ [data-theme="dark"] .fh-secondhalf, [data-theme="dark"] .fh-gallery, [data-theme="dark"] .fh-calendar { background: var(--bg-page); border-top-color: var(--border-hairline); } [data-theme="dark"] .fh-calendar-frame { background: var(--bg-muted); border-color: var(--border-hairline); } /* ---------- Worship ---------- */ [data-theme="dark"] .wt-teams { background: var(--bg-page); } [data-theme="dark"] .wt-crew { background: var(--bg-tint); border-top-color: var(--border-hairline); } [data-theme="dark"] .wt-role { background: var(--bg-muted); border-color: var(--border-hairline); } /* ========================================================= SITE.CSS — straggler white surfaces missed by the original dark-mode pass ========================================================= */ /* Newer hover states that flash to white */ [data-theme="dark"] .events-toggle:hover { background: #20283555; border-color: var(--hope-sky); box-shadow: var(--shadow-sm); } [data-theme="dark"] .missions-trip { background: var(--bg-muted); border-color: var(--border-hairline); } [data-theme="dark"] .missions-trip:hover { background: var(--bg-tint); border-color: var(--hope-sky); } /* Connect chips / cards that weren't fully covered */ [data-theme="dark"] .connect-embed-wrap, [data-theme="dark"] .connect-embed, [data-theme="dark"] .discover-embed-wrap, [data-theme="dark"] .discover-embed { background: var(--bg-muted); border-color: var(--border-hairline); } /* ========================================================= GIVE PAGE — small leftover white squares (icons + addresses) ========================================================= */ [data-theme="dark"] .give-way-icon, [data-theme="dark"] .give-way-address, [data-theme="dark"] .give-way-mailto { background: var(--bg-page); border-color: var(--border-hairline); color: var(--fg-1); } [data-theme="dark"] .give-ways-rule { background: rgba(255,255,255,0.10); } [data-theme="dark"] .give-why-rule { background: rgba(255,255,255,0.10); } /* ========================================================= APP PAGE — the App Store buttons in the hero use bare `#fff` because the hero is hard-coded dark in light mode. In dark mode the app store pill should stay readable but not pure white on dark. ========================================================= */ [data-theme="dark"] .app-page-hero .app-store-btn { background: var(--bg-muted); color: var(--fg-1); } [data-theme="dark"] .app-page-hero .app-store-btn:hover { background: var(--bg-tint); color: var(--fg-1); } /* ========================================================= MISSIONS PARTNER TAGS — keep their semantic color but tone the warm pills so they don't glow on dark pages. ========================================================= */ [data-theme="dark"] .missions-partner-tag.tag-national { background: rgba(232,160,41,0.18); color: #F0B660; } [data-theme="dark"] .missions-partner-tag.tag-global { background: rgba(43,165,100,0.18); color: #6FD49A; } [data-theme="dark"] .missions-partner-tag.tag-local { background: rgba(0,130,202,0.18); color: var(--hope-sky); } /* ========================================================= MISSIONS PAGE — explicit dark surface for every card on this page. The shared `.missions-tier` / `.missions-partner-v2` rules above already cover this, but call them out again here isolated so a cascade ordering or selector-list parsing issue can never leave them rendering white-on-dark. ========================================================= */ [data-theme="dark"] .missions-tier { background: var(--bg-muted); border-color: var(--border-hairline); } [data-theme="dark"] .missions-partner-v2 { background: var(--bg-muted); border-color: var(--border-hairline); } [data-theme="dark"] .missions-partner-img { background: var(--bg-page); } [data-theme="dark"] .missions-tier-head { border-bottom-color: var(--border-hairline); } [data-theme="dark"] .missions-tier-count { color: var(--fg-3); } /* ========================================================= HERO A — bottom transition into the dark page background. The mode-agnostic ::after vignette in site.css already deepens the blue, but in dark mode we want it to fade all the way to var(--bg-page) so the seam to the next section (which is also bg-page) disappears entirely. ========================================================= */ [data-theme="dark"] .hero-a::after { background: linear-gradient(180deg, transparent 0%, rgba(0, 12, 22, 0.55) 45%, var(--bg-page) 100%); } /* ========================================================= PODCAST EPISODES — `.podcast-episode:hover` already wired in podcast-prayer.css; the rest of the surfaces use var(--bg-card) which we make track --bg-muted here so one var change cascades everywhere. ========================================================= */ /* ========================================================= PODCAST EPISODES — `.podcast-episode:hover` already wired in podcast-prayer.css; the rest of the surfaces use var(--bg-card) which we make track --bg-muted here so one var change cascades everywhere. ========================================================= */ [data-theme="dark"] { --bg-card: var(--bg-muted); --bg-0: var(--bg-page); --bg-1: var(--bg-tint); --bg-2: var(--bg-muted); } /* ========================================================= MINISTRY HEADINGS — every ministry CSS uses `color: var(--ink-900)` for its big section headings. `--ink-900` is intentionally NOT remapped (the original dark-themed feature panels still need that dramatic dark). Instead, retarget the specific heading selectors to use var(--fg-1) when [data-theme="dark"]. ========================================================= */ [data-theme="dark"] .kids-pillar h3, [data-theme="dark"] .l56-pillar h3, [data-theme="dark"] .l56-callout p, [data-theme="dark"] .l56-rhythm-day, [data-theme="dark"] .l56-rhythm-card h3, [data-theme="dark"] .l56-rhythm-times, [data-theme="dark"] .hs-wed-copy h2, [data-theme="dark"] .hs-wed-day, [data-theme="dark"] .hs-wed-times-label, [data-theme="dark"] .hs-wed-times-val, [data-theme="dark"] .hs-beat h4, [data-theme="dark"] .hs-sunday-time, [data-theme="dark"] .hs-sunday-time strong, [data-theme="dark"] .cc-pillar h3, [data-theme="dark"] .cc-anchor-verse, [data-theme="dark"] .cc-anchor-verse .quoted, [data-theme="dark"] .cc-rhythm-day, [data-theme="dark"] .cc-rhythm-card h3, [data-theme="dark"] .cc-rhythm-card .cc-rhythm-times, [data-theme="dark"] .cc-rhythm-card .cc-rhythm-times .cc-dot, [data-theme="dark"] .wv-anchor h1, [data-theme="dark"] .wv-anchor-mission strong, [data-theme="dark"] .wv-rhythms-head h2, [data-theme="dark"] .wv-rhythm h3, [data-theme="dark"] .wv-calendar-head h2, [data-theme="dark"] .mn-pillars-head h2, [data-theme="dark"] .mn-pillar h3, [data-theme="dark"] .mn-meets-head h2, [data-theme="dark"] .mn-calendar-head h2, [data-theme="dark"] .fh-secondhalf-copy p strong, [data-theme="dark"] .wt-teams-head h2, [data-theme="dark"] .wt-crew-head h2, [data-theme="dark"] .wt-role h3 { color: var(--fg-1); } /* Give page section titles + meta */ [data-theme="dark"] .give-banner-amount-label, [data-theme="dark"] .give-ways-list-head h2, [data-theme="dark"] .give-way-body h3, [data-theme="dark"] .give-way-address, [data-theme="dark"] .give-why-title, [data-theme="dark"] .give-thanks-message { color: var(--fg-1); } /* App-page hero store buttons — color comes through automatically thanks to the .app-page-hero .app-store-btn rule above; nothing else here. */ /* ========================================================= MINISTRY BODY TEXT — paragraphs that hardcode var(--fg-2)/(--fg-3) are fine; but a few use #1A1F26 via inheritance from a parent that we just turned dark. ========================================================= */ [data-theme="dark"] .kids-callout-box, [data-theme="dark"] .hs-callout, [data-theme="dark"] .l56-callout, [data-theme="dark"] .wv-rhythm, [data-theme="dark"] .cc-rhythm-card:not(.primary), [data-theme="dark"] .mn-pillar, [data-theme="dark"] .l56-rhythm-card { color: var(--fg-1); } /* ========================================================= BRIGHTER LEAD COPY IN DARK MODE Students, Linked 56, and Fueled by Hope all have several body/lead paragraphs that hit var(--fg-2)/(--fg-3) — those map to soft grey on dark surfaces. Bump them to high-contrast white so they read clearly. Eyebrow-style labels stay slightly muted so the visual hierarchy survives. ========================================================= */ [data-theme="dark"] .hs-wed-copy p, [data-theme="dark"] .hs-beat p, [data-theme="dark"] .hs-sunday-copy p, [data-theme="dark"] .hs-gallery-head p, [data-theme="dark"] .hs-calendar-head p, [data-theme="dark"] .l56-block-body, [data-theme="dark"] .l56-brand-body, [data-theme="dark"] .fh-secondhalf-copy p, [data-theme="dark"] .fh-gallery-head p, [data-theme="dark"] .fh-calendar-head p { color: #fff; } [data-theme="dark"] .hs-wed-times-label { color: #fff; } /* ========================================================= STRAGGLER WHITE BOXES + DARK-ACCENT-ON-DARK FIXES ========================================================= */ /* Linked 5/6 safety callout: hardcoded background:#fff in light-mode CSS with no prior dark override. Body/strong text resolves to fg-1 (now white), so it was rendering white-on-white. Tint the box to the standard elevated card surface. */ [data-theme="dark"] .l56-safety-note { background: var(--bg-muted); border-color: var(--border-hairline); } /* Wednesday-night "EVERY WED 6:30–8:00 PM" chip: card background becomes dark via the existing .hs-wed-times override, but the "WED" / "6:30–8:00 PM" pieces inherit the chip's text color which was undefined. Set the chip's own color so the values read clean. */ [data-theme="dark"] .hs-wed-times { color: #fff; } /* Men's H.I.T. lockup letter uses var(--mn-navy) — almost-black blue on a card that we tint to var(--bg-muted) in dark mode. Swap to sky for visibility while keeping the brand accent feel. */ [data-theme="dark"] .mn-pillar-letter { color: var(--mn-sky); } /* Fueled by Hope: two big headings ("Built around this season of life", "Scenes from recent gatherings") use var(--fh-navy) which is darker than the dark-mode page background. Retarget to white, and shift the ember-deep accent to the lighter ember tone so the colored ems read. --fh-navy is also used as a SECTION BACKGROUND elsewhere on the page, so we cannot remap the variable globally — use specific selectors. */ [data-theme="dark"] .fh-secondhalf-copy h2, [data-theme="dark"] .fh-gallery-head h2, [data-theme="dark"] .fh-calendar-head h2 { color: #fff; } [data-theme="dark"] .fh-secondhalf-copy h2 em, [data-theme="dark"] .fh-gallery-head h2 em, [data-theme="dark"] .fh-calendar-head h2 em, [data-theme="dark"] .fh-eyebrow, [data-theme="dark"] .fh-secondhalf-coda { color: var(--fh-ember, #E08A2C); } [data-theme="dark"] .fh-secondhalf-copy p strong { color: #fff; }