/* ====================== WAB BLOG — DARK MODE v1.5 Applied when STRATEGY: When "preserve header & footer" is OFF (no .wab-dark-preserve-hf): → Dark bg applied to html, body, body > *, everything. When "preserve header & footer" is ON (.wab-dark-preserve-hf present): → Dark bg applied to html + body (for overall page bg). → Header & footer elements are EXCLUDED via :not() selectors. → The trick: we don't touch them at all, so theme styles stay. ====================== */ /* ── CSS variable overrides (always apply) ── */ html.wab-dark { --wab-bg: var(--wab-dark-bg, #111827); --wab-p-color: var(--wab-dark-text, #e5e7eb); --wab-h2-color: var(--wab-gray-900); --wab-h3-color: #f3f4f6; --wab-h4-color: var(--wab-gray-700); --wab-h5-color: #d1d5db; --wab-h6-color: #9ca3af; --wab-gray-50: #1f2937; --wab-gray-100: #1f2937; --wab-gray-200: #374151; --wab-gray-300: #4b5563; --wab-gray-400: #6b7280; --wab-gray-500: #9ca3af; --wab-gray-600: #d1d5db; --wab-gray-700: #e5e7eb; --wab-gray-800: #f3f4f6; --wab-gray-900: #f9fafb; } /* ══════════════════════════════════════ MODE A: NO preserve (dark everywhere) ══════════════════════════════════════ */ html.wab-dark:not(.wab-dark-preserve-hf) { background-color: var(--wab-bg) !important; } html.wab-dark:not(.wab-dark-preserve-hf) body { background-color: var(--wab-bg) !important; color: var(--wab-p-color) !important; } html.wab-dark:not(.wab-dark-preserve-hf) body > *, html.wab-dark:not(.wab-dark-preserve-hf) .site, html.wab-dark:not(.wab-dark-preserve-hf) .site-content, html.wab-dark:not(.wab-dark-preserve-hf) .site-main, html.wab-dark:not(.wab-dark-preserve-hf) #page, html.wab-dark:not(.wab-dark-preserve-hf) #content, html.wab-dark:not(.wab-dark-preserve-hf) #primary, html.wab-dark:not(.wab-dark-preserve-hf) main, html.wab-dark:not(.wab-dark-preserve-hf) article, html.wab-dark:not(.wab-dark-preserve-hf) .wb-container, html.wab-dark:not(.wab-dark-preserve-hf) .container, html.wab-dark:not(.wab-dark-preserve-hf) .content-area, html.wab-dark:not(.wab-dark-preserve-hf) .wab-article { background-color: var(--wab-bg) !important; } /* ══════════════════════════════════════════════ MODE B: PRESERVE header & footer Dark bg on html+body (page backdrop) but header/footer are completely untouched. Only target WAB-specific and content wrappers. ══════════════════════════════════════════════ */ html.wab-dark.wab-dark-preserve-hf { background-color: var(--wab-bg) !important; } html.wab-dark.wab-dark-preserve-hf body { background-color: var(--wab-bg) !important; } /* Target only content-area wrappers, NOT header/footer. We use specific selectors instead of body > * wildcard. */ html.wab-dark.wab-dark-preserve-hf .site-content, html.wab-dark.wab-dark-preserve-hf .site-main, html.wab-dark.wab-dark-preserve-hf #content, html.wab-dark.wab-dark-preserve-hf #primary, html.wab-dark.wab-dark-preserve-hf main.site-main, html.wab-dark.wab-dark-preserve-hf .content-area, html.wab-dark.wab-dark-preserve-hf .wb-container, html.wab-dark.wab-dark-preserve-hf .wab-article, html.wab-dark.wab-dark-preserve-hf article.single-post { background-color: var(--wab-bg) !important; } /* ══════════════════════════════════ SHARED: WAB elements (both modes) ══════════════════════════════════ */ /* Article text */ html.wab-dark .wab-article, html.wab-dark .wab-article__content, html.wab-dark .wab-article__content p, html.wab-dark .wab-article__content li, html.wab-dark .wab-article__content td, html.wab-dark .wab-article__content th, html.wab-dark .wab-article__content span, html.wab-dark .wab-article__content div { color: var(--wab-p-color); } html.wab-dark .wab-article__content h2 { color: var(--wab-h2-color); } html.wab-dark .wab-article__content h3 { color: var(--wab-h3-color); } html.wab-dark .wab-article__content h4 { color: var(--wab-h4-color); } html.wab-dark .wab-article__content h5 { color: var(--wab-h5-color); } html.wab-dark .wab-article__content h6 { color: var(--wab-h6-color); } /* TOC wrapper */ html.wab-dark .wab-toc-wrapper { background: var(--wab-gray-100); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } html.wab-dark .wab-toc-nav__link { color: var(--wab-gray-400); } html.wab-dark .wab-toc-nav__link.is-active { color: var(--wab-gray-900); } html.wab-dark .wab-toc-progress { background: var(--wab-gray-200); } /* Article elements */ html.wab-dark .wab-article__content blockquote { color: var(--wab-gray-400); } html.wab-dark .wab-article__content blockquote cite { color: var(--wab-gray-500); } html.wab-dark .wab-article__content code { background: var(--wab-gray-100); color: var(--wab-gray-700); } html.wab-dark .wab-article__content a { color: var(--wab-primary); } html.wab-dark .wab-article__content hr { background: var(--wab-gray-200); } /* Dark toggle button */ html.wab-dark .wab-dark-toggle { background: var(--wab-gray-100); border-color: var(--wab-gray-200); color: var(--wab-gray-700); } html.wab-dark .wab-dark-toggle__sun { display: none; } html.wab-dark .wab-dark-toggle__moon { display: block; } /* Callouts dark */ html.wab-dark .wp-block-group.is-style-wab-callout-info { background: color-mix(in srgb, var(--wab-primary) 10%, transparent); border-color: color-mix(in srgb, var(--wab-primary) 30%, transparent); } html.wab-dark .wp-block-group.is-style-wab-callout-warning { background: color-mix(in srgb, var(--wab-accent) 10%, transparent); border-color: color-mix(in srgb, var(--wab-accent) 30%, transparent); } html.wab-dark .wp-block-group.is-style-wab-callout-tip { background: color-mix(in srgb, var(--wab-success) 10%, transparent); border-color: color-mix(in srgb, var(--wab-success) 30%, transparent); } /* Summary box dark */ html.wab-dark .wp-block-group.is-style-wab-summary { background: var(--wab-gray-100); } /* Fact box dark */ html.wab-dark .wp-block-group.is-style-wab-fact { background: var(--wab-gray-100); border-color: var(--wab-gray-200); } html.wab-dark .wp-block-group.is-style-wab-fact p { color: var(--wab-gray-600); } /* Feature list dark — checkmark stays white on primary bg, ok */ /* Numbered steps dark — number stays white on primary bg, ok */ /* Comparison table dark */ html.wab-dark .wab-comparison { border-color: var(--wab-gray-200); } html.wab-dark .wab-comparison__table th, html.wab-dark .wab-comparison__table td { border-top-color: var(--wab-gray-200); } /* Quote banner dark — already uses gray-900 bg which inverts via vars */ /* Author bio dark */ html.wab-dark .wab-author-bio { background: var(--wab-gray-100); } /* Margin note dark */ html.wab-dark .wab-margin-note__inner { background: color-mix(in srgb, var(--wab-gray-700) 15%, transparent); } /* CTA banner dark — already uses gray-900 which inverts via vars */ /* Related articles dark */ html.wab-dark .wab-related--thumbs .wab-related__card { border-color: var(--wab-gray-200); background: var(--wab-gray-100); } html.wab-dark .wab-related__row { border-bottom-color: var(--wab-gray-200); } html.wab-dark .wab-related__row:first-child { border-top-color: var(--wab-gray-200); } html.wab-dark .wab-related__row:hover { background: var(--wab-gray-100); } /* Sticky stack dark */ html.wab-dark .wab-sticky-stack__step-inner { background: color-mix(in srgb, var(--wab-bg) 90%, transparent); } /* Callout Box dark */ html.wab-dark .wab-callout-box:not(.wab-callout-box--dark) { background: color-mix(in srgb, var(--wab-primary) 10%, var(--wab-dark-bg, #1a1a2e)) !important; } html.wab-dark .wab-callout-box__content, html.wab-dark .wab-callout-box__content p { color: var(--wab-dark-text, #e0e0e0); } /* Feature Card dark */ html.wab-dark .wab-feature-card:not(.wab-feature-card--dark) { background: color-mix(in srgb, var(--wab-gray-700) 15%, var(--wab-dark-bg, #1a1a2e)) !important; } html.wab-dark .wab-feature-card__body h1, html.wab-dark .wab-feature-card__body h2, html.wab-dark .wab-feature-card__body h3, html.wab-dark .wab-feature-card__body h4 { color: var(--wab-dark-text, #e0e0e0); } html.wab-dark .wab-feature-card__body p { color: var(--wab-dark-text, #e0e0e0); } /* CTA Banner dark */ html.wab-dark .wab-cta-banner:not(.wab-cta-banner--dark) { background: color-mix(in srgb, var(--wab-primary) 15%, var(--wab-dark-bg, #1a1a2e)) !important; } /* Comparison Table dark */ html.wab-dark .wab-comparison__table th, html.wab-dark .wab-comparison__table td { border-color: var(--wab-gray-600); color: var(--wab-dark-text, #e0e0e0); } html.wab-dark .wab-comparison__table thead th, html.wab-dark .wab-comparison__cat { background: color-mix(in srgb, var(--wab-primary) 10%, var(--wab-dark-bg, #1a1a2e)); } /* Related Articles dark */ html.wab-dark .wab-related__card { background: var(--wab-gray-800); } html.wab-dark .wab-related__card-title { color: var(--wab-dark-text, #e0e0e0); } html.wab-dark .wab-related__row { border-color: var(--wab-gray-700); } /* Author Bio dark */ html.wab-dark .wab-author-bio { background: color-mix(in srgb, var(--wab-primary) 8%, var(--wab-dark-bg, #1a1a2e)) !important; } /* Sticky Stack dark */ html.wab-dark .wab-sticky-stack__step-inner { background: color-mix(in srgb, var(--wab-dark-bg, #1a1a2e) 95%, transparent); color: var(--wab-dark-text, #e0e0e0); } /* Scroll Video overlay dark */ html.wab-dark .wab-scroll-video__overlay-inner { background: color-mix(in srgb, var(--wab-dark-bg, #1a1a2e) 92%, transparent); color: var(--wab-dark-text, #e0e0e0); } /* Statistics blocks dark */ html.wab-dark .wab-stat-counters, html.wab-dark .wab-stat-bar, html.wab-dark .wab-stat-line, html.wab-dark .wab-stat-pie, html.wab-dark .wab-stat-progress { color: var(--wab-dark-text, #e0e0e0); }