/** * Light ("white") mode — opt-in via [data-color-mode="light"] on , * toggled by the header icon button (dist/scripts/theme-toggle.js). * * Dark is this site's baseline/default appearance and stays completely * unmodified. This file only touches the two things that make the page * read as dark in the first place: * * 1. 's background — forced dark navy by a pre-existing, unconditional * rule in main.css: `.dark\:bg-black{background-color:var(--primary-color)}` * (not gated by any media query or class despite the "dark:" name — see * analysis). Our override selector has higher specificity * ([data-color-mode="light"] body = 0,1,1) than that rule (.dark\:bg-black * = 0,1,0), so it wins without needing !important. * * 2. Body text set via Tailwind's `.text-white` utility (52 uses across 14 * section/template files) and the same unconditional `.dark\:text-white` * rule (which is `!important`, so our override must be too). * * Also flips the underlay nav (header bar, sliding menu panel, corner/border * decorations) between dark and light so it matches the rest of the page. * * Deliberately NOT touched: * - The footer (`bg-primary`) — stays dark as a fixed brand element; not * part of this request, flag if you want it flipped too. * - --secondary-color (orange accent) — works on both light and dark. * - Per-section decorative/illustration hex colors — brand accents, not * background/text roles, left as-is. */ [data-color-mode="light"] body, [data-color-mode="light"] [data-main] { background-color: #ffffff; } [data-color-mode="light"] .text-white, [data-color-mode="light"] .dark\:text-white { color: var(--b100) !important; } /* Underlay nav — header bar (transparent + Progressive Blur in both modes, see underlay-nav.css) still needs its text color flipped for light mode. The sliding menu panel is a separate, full-height overlay (not the transparent bar) and keeps its own opaque background. */ [data-color-mode="light"] .underlay-nav__header { color: var(--b100); } [data-color-mode="light"] .underlay-nav__menu { background-color: #ffffff; color: var(--b100); } [data-color-mode="light"] .underlay-nav__corner { color: #ffffff; background-image: radial-gradient(circle farthest-side at 0 100%, transparent 99%, #ffffff); } /* BUG FIX: .is--bottom ties in specificity (0,2,0) with the rule above and loads later, so without this it silently won over .is--bottom's own gradient DIRECTION too (at 0 0, not at 0 100%) — collapsing both corners to the top corner's formula in light mode. */ [data-color-mode="light"] .underlay-nav__corner.is--bottom { background-image: radial-gradient(circle farthest-side at 0 0, transparent 99%, #ffffff); } [data-color-mode="light"] .underlay-nav__border { background-color: #ffffff; } /* .underlay-nav__toggle (Menu/Close) and its bars use currentColor and inherit from .underlay-nav__header, so they adapt automatically. The btn-darklight icon toggle keeps its own fixed light pill background in both modes by design — it already contrasts fine against either. */ /* Logo Wall: cancel the dark-mode "white silhouette" filter (logo-wall.css) so logos show their real colors in light mode. */ [data-color-mode="light"] .logo-wall__logo-img, [data-color-mode="light"] .logo-wall--static__img { mix-blend-mode: normal; filter: none; } /* Logo Wall hover card (logo-wall.css) is a dark-mode-only readability fix — a plain white/light page already gives every logo enough contrast on its own, so the card would just be a redundant gray box in light mode. */ [data-color-mode="light"] .logo-wall__item:hover .logo-wall__logo { background-color: transparent; } /* Footer — was left dark-always in the original analysis, extended to flip here to match the nav. This also FIXES a real bug: .text-white (footer address blocks, copyright) was being forced dark by the sitewide .text-white override above, but footer's own background never flipped — dark text on a still-dark footer was nearly invisible. Flipping footer's background here makes that existing override correct again, instead of needing to exclude footer from it. .location-icon (Wien/Lützen/Miami circular badges) is untouched — it's a self-contained dark badge with its own white icon, independent of page mode, same as the nav's corner/border decorations. */ [data-color-mode="light"] .footer-c { background-color: #ffffff; color: var(--b100); border-top-color: var(--border-c) !important; } /* .footer-parallax-wrap (footer.php) is the Footer Parallax Effect's own outer clipping container, a SEPARATE element from .footer-c with its own static #1c1e26 background — .footer-c slides up within it as the footer scrolls into view, so before it's fully in position this wrap's unflipped dark background showed through as a solid dark bar above the now-white footer. */ [data-color-mode="light"] .footer-parallax-wrap { background-color: #ffffff; } /* .nav-item a (footer nav-links + legal links — the only place this class is used) hardcodes color:var(--w80) / :hover color:var(--w100), tokens meant for a dark background. On the now-white footer this measures 1.56:1 at rest and 1:1 on hover (literally invisible) — both fail WCAG AA (4.5:1 minimum). --b80/--b100 measure 7.39:1 and 19.37:1 on white. */ [data-color-mode="light"] .nav-item a { color: var(--b80); } [data-color-mode="light"] .nav-item a:hover { color: var(--b100); } /* footer.php's own inline