/* ============================================================================= COLOR MODE — light / dark toggle overrides Default is dark. Light mode activates via [data-theme="light"] on . Hard-coded inline colors from WP patterns/templates require !important. Cover blocks (hero, services) intentionally keep dark overlays. ============================================================================= */ /* --------------------------------------------------------------------------- 1. GLOBAL: body, text, links --------------------------------------------------------------------------- */ [data-theme="light"], [data-theme="light"] body { background: #f5f5f4; color: #1a1a1a; } [data-theme="light"] a { color: inherit; } /* --------------------------------------------------------------------------- 2. INLINE-COLOR OVERRIDES (patterns & templates set style="color:…") — #e5e2e1 on-surface → dark text — #e4bebc on-surface-variant → medium text — #ffb3b1 primary accent → stays warm but darker for contrast — #ab8987 outline / muted → darker muted — #737373 empty-state text → stays as-is (works on light bg) — #f5f5f5 headings inside covers → LEFT ALONE (dark overlay) --------------------------------------------------------------------------- */ /* On-surface text (#e5e2e1) — headings, titles, post titles, body text */ [data-theme="light"] [style*="color:#e5e2e1"], [data-theme="light"] .has-text-color[style*="color:#e5e2e1"] { color: #1a1a1a !important; } /* On-surface-variant (#e4bebc) — descriptions, excerpts, sub-copy */ [data-theme="light"] [style*="color:#e4bebc"], [data-theme="light"] .has-text-color[style*="color:#e4bebc"] { color: #4a3533 !important; } /* Primary accent (#ffb3b1) — labels, dates, small accent text */ [data-theme="light"] [style*="color:#ffb3b1"], [data-theme="light"] .has-text-color[style*="color:#ffb3b1"] { color: #c4393f !important; } /* Outline / muted (#ab8987) — secondary labels, nav links */ [data-theme="light"] [style*="color:#ab8987"], [data-theme="light"] .has-text-color[style*="color:#ab8987"] { color: #6b5654 !important; } /* --------------------------------------------------------------------------- 3. INLINE BACKGROUND OVERRIDES (sections with style="background-color:…") --------------------------------------------------------------------------- */ /* Surface (#131313) → off-white */ [data-theme="light"] [style*="background-color:#131313"] { background-color: #f5f5f4 !important; } /* Surface-container-lowest (#0e0e0e) → white */ [data-theme="light"] [style*="background-color:#0e0e0e"] { background-color: #ffffff !important; } /* --------------------------------------------------------------------------- 4. INLINE BORDER OVERRIDES (border-color set in templates) --------------------------------------------------------------------------- */ [data-theme="light"] [style*="border-bottom-color:#202020"], [data-theme="light"] [style*="border-top-color:#202020"] { border-color: #d4d2d1 !important; } [data-theme="light"] [style*="border-color:#5b403f"] { border-color: #c9a5a3 !important; } /* --------------------------------------------------------------------------- 5. HEADINGS & ELEMENTS (non-inline) --------------------------------------------------------------------------- */ [data-theme="light"] .wp-block-heading, [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: #1a1a1a; } /* --------------------------------------------------------------------------- 6. HEADER --------------------------------------------------------------------------- */ [data-theme="light"] .wetzlar-site-header { background: rgba(245, 245, 244, var(--wetzlar-header-alpha)); } [data-theme="light"] .wetzlar-nav__panel-overlay { background: rgba(245, 245, 244, 0.96); } [data-theme="light"] .wetzlar-nav__panel-content .wetzlar-nav__link { color: #1a1a1a; } [data-theme="light"] .wetzlar-nav__panel-content .wetzlar-nav__link:hover { color: #c4393f; } [data-theme="light"] .wetzlar-site-header .wp-block-navigation a { color: #555; } [data-theme="light"] .wetzlar-site-header .wp-block-navigation a:hover { color: #c4393f; } [data-theme="light"] .wetzlar-site-header p, [data-theme="light"] .wetzlar-site-header .wp-block-navigation a, [data-theme="light"] .wetzlar-site-header .wp-block-navigation-item__content { color: #333; mix-blend-mode: normal; } /* --------------------------------------------------------------------------- 7. AUTHORITY SECTION --------------------------------------------------------------------------- */ /* (Handled by inline-color overrides in section 2) */ /* --------------------------------------------------------------------------- 8. FEATURED WORK GRID — borders --------------------------------------------------------------------------- */ [data-theme="light"] .wetzlar-featured-grid .wp-block-image, [data-theme="light"] .wetzlar-col-8, [data-theme="light"] .wetzlar-col-12 { border-color: #d4d2d1; } /* --------------------------------------------------------------------------- 9. SERVICES SECTION — borders, service link text (Cover images keep dark overlay — text inside stays light) --------------------------------------------------------------------------- */ [data-theme="light"] .wetzlar-service-card-right { border-color: #d4d2d1; } /* --------------------------------------------------------------------------- 10. JOURNAL RAIL — cards, nav buttons --------------------------------------------------------------------------- */ [data-theme="light"] .wetzlar-journal-rail > .wp-block-group { background: #edeceb; border-color: rgba(91, 64, 63, 0.15); } [data-theme="light"] .wetzlar-nav-btn { color: #1a1a1a; border-color: #c9a5a3; } [data-theme="light"] .wetzlar-nav-btn:hover { background: #d4d2d1; } /* --------------------------------------------------------------------------- 11. CONTACT CTA — borders --------------------------------------------------------------------------- */ [data-theme="light"] .wetzlar-cta-section { border-color: rgba(91, 64, 63, 0.15); } /* --------------------------------------------------------------------------- 12. BUTTONS — red-fill stays bold; red-outline adapts --------------------------------------------------------------------------- */ [data-theme="light"] .wp-block-button.is-style-red-outline .wp-block-button__link { color: #c4393f; border-color: #c4393f; } [data-theme="light"] .wp-block-button.is-style-red-outline .wp-block-button__link:hover { background: #c4393f; color: #fff; } /* --------------------------------------------------------------------------- 13. FOOTER --------------------------------------------------------------------------- */ [data-theme="light"] .wetzlar-footer { background: #eae8e7 !important; } [data-theme="light"] .wetzlar-footer .wp-block-site-title a { color: #1a1a1a !important; } [data-theme="light"] .wetzlar-footer-col-label { color: #c4393f; } [data-theme="light"] .wetzlar-footer-links a { color: #6b6b6b; } [data-theme="light"] .wetzlar-footer-links a:hover { color: #1a1a1a; } [data-theme="light"] .wetzlar-footer-copyright { color: #6b6b6b; border-color: rgba(244, 63, 94, 0.2); } [data-theme="light"] .wetzlar-social-btn { color: #1a1a1a; border-color: rgba(91, 64, 63, 0.2); } [data-theme="light"] .wetzlar-social-btn:hover { color: #c4393f; } /* Color-mode toggle button (footer) — needs an explicit light-mode color so the icon stays visible against the lighter footer background. */ [data-theme="light"] .wetzlar-footer .wetzlar-color-mode-toggle { color: #1a1a1a; } /* Footer inline paragraph (copyright with style="color:#737373") */ [data-theme="light"] .wetzlar-footer [style*="color:#737373"], [data-theme="light"] .wetzlar-footer [style*="color:#737373"] a { color: #555 !important; } /* Footer site-title link (inline style on element) */ [data-theme="light"] .wetzlar-footer [style*="color:#f5f5f5"], [data-theme="light"] .wetzlar-footer a[style*="color:#f5f5f5"] { color: #1a1a1a !important; } /* --------------------------------------------------------------------------- 14. WP PRESET COLOR CLASS OVERRIDES --------------------------------------------------------------------------- */ [data-theme="light"] .has-on-surface-color { color: #1a1a1a !important; } [data-theme="light"] .has-on-surface-variant-color { color: #4a3533 !important; } [data-theme="light"] .has-primary-color { color: #c4393f !important; } [data-theme="light"] .has-outline-color { color: #6b5654 !important; } [data-theme="light"] .has-surface-background-color { background-color: #f5f5f4 !important; } [data-theme="light"] .has-surface-container-lowest-background-color { background-color: #ffffff !important; } [data-theme="light"] .has-surface-container-low-background-color { background-color: #edeceb !important; } [data-theme="light"] .has-surface-container-background-color { background-color: #e5e3e2 !important; } [data-theme="light"] .has-surface-container-high-background-color { background-color: #d4d2d1 !important; } [data-theme="light"] .has-neutral-950-background-color { background-color: #eae8e7 !important; } /* --------------------------------------------------------------------------- 15. SEARCH FORM --------------------------------------------------------------------------- */ [data-theme="light"] .wp-block-search__input { background: #edeceb !important; color: #1a1a1a !important; border-color: #c9a5a3 !important; } /* --------------------------------------------------------------------------- 16. POST CONTENT (single/page) — WP core blocks --------------------------------------------------------------------------- */ [data-theme="light"] .wp-block-post-content { color: #1a1a1a; } [data-theme="light"] .wp-block-post-content blockquote, [data-theme="light"] .wp-block-post-content .wp-block-quote { border-color: #c9a5a3; color: #4a3533; } [data-theme="light"] .wp-block-post-content pre, [data-theme="light"] .wp-block-post-content code { background: #edeceb; color: #1a1a1a; } [data-theme="light"] .wp-block-post-content .wp-block-separator { border-color: #d4d2d1; } [data-theme="light"] .wp-block-post-content .wp-block-table td, [data-theme="light"] .wp-block-post-content .wp-block-table th { border-color: #d4d2d1; } /* --------------------------------------------------------------------------- 17. 404 PAGE --------------------------------------------------------------------------- */ [data-theme="light"] .wetzlar-404-cover { background: #f5f5f4; } /* The cover has overlayColor:black + dimRatio:60 which is needed for the dark-mode look but completely darkens the panel in light mode. Replace the dim with a soft light tint and neutralize the .is-dark text override so headings/labels picked up by the inline-style selectors stay readable. */ [data-theme="light"] .wetzlar-404-cover > .wp-block-cover__background { background-color: #f5f5f4 !important; opacity: 0.6; } [data-theme="light"] .wetzlar-404-cover.is-dark { color: inherit; } /* ============================================================================= TOGGLE BUTTON ============================================================================= */ .wetzlar-color-mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin-left: auto; border: 1px solid rgba(91, 64, 63, 0.3); background: transparent; color: #e5e2e1; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; font-family: 'Material Symbols Outlined'; font-size: 20px; line-height: 1; font-weight: 400; font-variation-settings: 'FILL' 0, 'wght' 300; } .wetzlar-color-mode-toggle .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-size: inherit; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 300; display: inline-block; } .wetzlar-color-mode-toggle:hover { color: #ffb3b1; } [data-theme="light"] .wetzlar-color-mode-toggle { color: #1a1a1a; border-color: rgba(91, 64, 63, 0.2); } [data-theme="light"] .wetzlar-color-mode-toggle:hover { color: #d93f45; } /* --------------------------------------------------------------------------- 18. PORTFOLIO PAGE --------------------------------------------------------------------------- */ [data-theme="light"] .wetzlar-portfolio-page { background: #f5f5f4; } [data-theme="light"] .wetzlar-portfolio-header { border-bottom-color: rgba(26, 26, 26, 0.1); } [data-theme="light"] .wetzlar-portfolio-title { color: #1a1a1a; }