/* ============================================================================= DARK-MODE.CSS — Dark Theme Override System Hello Elementor Child Theme All dark mode styles are scoped under [data-theme="dark"] on . This attribute is toggled by assets/js/dark-mode.js. Architecture: - We override only CSS custom properties defined in base.css. - Component CSS files use those variables, so they automatically adapt to dark mode without any component-level dark overrides. - This means adding a new component that uses existing variables automatically gets dark mode support for free. - Only exceptions (special cases) need direct overrides below the variable block. Transition: All color transitions are handled by the transition declarations on .hec-is-single-post in base.css. The duration is 420ms (slow) so the theme switch feels deliberate and premium, not jarring. ============================================================================= */ /* ============================================================================= DARK MODE DESIGN TOKENS ============================================================================= */ [data-theme="dark"] { /* --------------------------------------------------------------------------- PAGE BACKGROUND Deep warm dark — not pure black. Derived from brand dark brown. Pure black (#000) feels cheap. #150303 (brand darkest) is too red. We use a desaturated deep brown-black for the main surface. --------------------------------------------------------------------------- */ --hec-color-bg: #16110b; --hec-color-bg-elevated: #1e1610; --hec-color-bg-sunken: #100d08; --hec-color-bg-overlay: rgba(255, 191, 0, 0.04); /* --------------------------------------------------------------------------- SURFACE (cards, panels, inputs) Slightly lighter than the page background — creates visible depth. --------------------------------------------------------------------------- */ --hec-color-surface: #231a10; --hec-color-surface-raised: #2b2016; --hec-color-surface-overlay: rgba(35, 26, 16, 0.95); /* --------------------------------------------------------------------------- TEXT Warm off-white — not pure white. Pure white on dark brown reads harsh. We use a warm paper-like tone derived from the brand sand palette. --------------------------------------------------------------------------- */ --hec-color-text-primary: #f0e8dc; --hec-color-text-secondary: #c4b09a; --hec-color-text-tertiary: #8a7a6a; --hec-color-text-disabled: #5a4e42; --hec-color-text-inverse: #16110b; --hec-color-text-on-amber: #16110b; /* --------------------------------------------------------------------------- BRAND / ACCENT In dark mode, the amber shifts slightly lighter for contrast. The golden yellow becomes the primary accent on dark surfaces. --------------------------------------------------------------------------- */ --hec-color-accent: #e07c1a; --hec-color-accent-hover: #f08c2a; --hec-color-accent-active: #d16a0b; --hec-color-accent-subtle: rgba(209, 106, 11, 0.12); --hec-color-accent-gold: #ffbf00; --hec-color-accent-gold-warm: #ffc660; /* --------------------------------------------------------------------------- HERO The hero gradient darkens further in dark mode for depth. --------------------------------------------------------------------------- */ --hec-color-hero-overlay-start: rgba(10, 6, 2, 0.0); --hec-color-hero-overlay-end: rgba(10, 6, 2, 0.88); --hec-color-hero-text: #f5ede0; --hec-color-hero-badge-bg: var(--hec-brand-amber); --hec-color-hero-badge-text: #16110b; /* --------------------------------------------------------------------------- BORDERS Dark mode borders are very subtle — just enough to define edges. --------------------------------------------------------------------------- */ --hec-color-border: rgba(212, 183, 170, 0.10); --hec-color-border-strong: rgba(212, 183, 170, 0.18); --hec-color-border-accent: var(--hec-brand-amber); --hec-color-border-subtle: rgba(212, 183, 170, 0.06); /* --------------------------------------------------------------------------- INTERACTIVE STATES --------------------------------------------------------------------------- */ --hec-color-focus-ring: var(--hec-brand-gold); --hec-color-hover-bg: rgba(209, 106, 11, 0.12); /* --------------------------------------------------------------------------- FEEDBACK / STATUS --------------------------------------------------------------------------- */ --hec-color-success: #4ade80; --hec-color-success-bg: rgba(74, 222, 128, 0.10); --hec-color-error: #f87171; --hec-color-error-bg: rgba(248, 113, 113, 0.10); --hec-color-warning: var(--hec-brand-gold); --hec-color-warning-bg: rgba(255, 191, 0, 0.10); /* --------------------------------------------------------------------------- CODE BLOCKS In dark mode the code block background becomes the darkest surface. Text shifts to a warm cream tone that is easy on the eyes. --------------------------------------------------------------------------- */ --hec-color-code-bg: #0e0b07; --hec-color-code-text: #f0d9b5; --hec-color-code-border: rgba(212, 183, 170, 0.10); --hec-color-inline-code-bg: rgba(209, 106, 11, 0.15); --hec-color-inline-code-text: #f0a050; /* --------------------------------------------------------------------------- BLOCKQUOTE --------------------------------------------------------------------------- */ --hec-color-blockquote-border: var(--hec-brand-amber); --hec-color-blockquote-bg: rgba(209, 106, 11, 0.08); --hec-color-blockquote-text: #c4b09a; /* --------------------------------------------------------------------------- TABLE OF CONTENTS --------------------------------------------------------------------------- */ --hec-color-toc-bg: #1e1610; --hec-color-toc-border: var(--hec-brand-amber); --hec-color-toc-link: #c4b09a; --hec-color-toc-link-hover: #e07c1a; --hec-color-toc-link-active: #ffbf00; /* --------------------------------------------------------------------------- PROGRESS BAR --------------------------------------------------------------------------- */ --hec-color-progress-bg: rgba(212, 183, 170, 0.10); --hec-color-progress-fill: linear-gradient( 90deg, var(--hec-brand-amber) 0%, var(--hec-brand-gold) 100% ); /* --------------------------------------------------------------------------- DARK MODE TOGGLE --------------------------------------------------------------------------- */ --hec-color-toggle-bg: rgba(0, 0, 0, 0.30); --hec-color-toggle-bg-hover: rgba(0, 0, 0, 0.45); --hec-color-toggle-text: #f5ede0; /* --------------------------------------------------------------------------- AUTHOR BOX --------------------------------------------------------------------------- */ --hec-color-author-bg: #1e1610; --hec-color-author-border: rgba(212, 183, 170, 0.10); --hec-color-author-accent: var(--hec-brand-amber); /* --------------------------------------------------------------------------- CARDS (Related posts) --------------------------------------------------------------------------- */ --hec-color-card-bg: #1e1610; --hec-color-card-border: rgba(212, 183, 170, 0.08); --hec-color-card-shadow: rgba(0, 0, 0, 0.30); --hec-color-card-shadow-hover:rgba(0, 0, 0, 0.50); /* --------------------------------------------------------------------------- FEEDBACK WIDGET --------------------------------------------------------------------------- */ --hec-color-feedback-bg: var(--hec-brand-amber); --hec-color-feedback-text: #16110b; --hec-color-feedback-panel: #1e1610; --hec-color-feedback-border: rgba(212, 183, 170, 0.10); --hec-color-feedback-input: #16110b; --hec-color-feedback-input-border: rgba(212, 183, 170, 0.20); --hec-color-feedback-input-focus: var(--hec-brand-amber); /* --------------------------------------------------------------------------- SOCIAL SHARE --------------------------------------------------------------------------- */ --hec-color-share-bg: #1e1610; --hec-color-share-border: rgba(212, 183, 170, 0.10); --hec-color-share-icon: #c4b09a; /* --------------------------------------------------------------------------- META BAR --------------------------------------------------------------------------- */ --hec-color-meta-text: #8a7a6a; --hec-color-meta-pill-bg: rgba(212, 183, 170, 0.08); --hec-color-meta-pill-text: #c4b09a; --hec-color-meta-pill-hover: rgba(209, 106, 11, 0.15); --hec-color-meta-pill-border: rgba(212, 183, 170, 0.12); /* --------------------------------------------------------------------------- SHADOWS Dark mode shadows use pure black — warm tones don't read on dark. --------------------------------------------------------------------------- */ --hec-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --hec-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.20); --hec-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.20); --hec-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.30), 0 4px 6px -2px rgba(0, 0, 0, 0.20); --hec-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20); --hec-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.50); --hec-shadow-amber: 0 4px 14px rgba(209, 106, 11, 0.30), 0 1px 3px rgba(209, 106, 11, 0.20); --hec-shadow-amber-lg: 0 8px 24px rgba(209, 106, 11, 0.35), 0 2px 6px rgba(209, 106, 11, 0.25); } /* ============================================================================= DARK MODE COMPONENT OVERRIDES For elements that cannot be handled by variable overrides alone. Only add rules here when the variable system is insufficient. ============================================================================= */ /* --------------------------------------------------------------------------- SCROLLBAR — styled for dark mode --------------------------------------------------------------------------- */ [data-theme="dark"] .hec-is-single-post { scrollbar-color: #3a2c1e #16110b; scrollbar-width: thin; } [data-theme="dark"] .hec-is-single-post::-webkit-scrollbar { width: 8px; } [data-theme="dark"] .hec-is-single-post::-webkit-scrollbar-track { background: #16110b; } [data-theme="dark"] .hec-is-single-post::-webkit-scrollbar-thumb { background-color: #3a2c1e; border-radius: var(--hec-radius-full); border: 2px solid #16110b; } [data-theme="dark"] .hec-is-single-post::-webkit-scrollbar-thumb:hover { background-color: var(--hec-brand-amber-dark); } /* --------------------------------------------------------------------------- SELECTION — dark mode --------------------------------------------------------------------------- */ [data-theme="dark"] .hec-is-single-post ::selection { background-color: rgba(209, 106, 11, 0.35); color: #f0e8dc; } /* --------------------------------------------------------------------------- DARK MODE TOGGLE ICON SWAP Sun icon visible in dark mode (to switch back to light). Moon icon visible in light mode (to switch to dark). --------------------------------------------------------------------------- */ /* Light mode — show moon, hide sun */ [data-theme="light"] .hec-dark-mode-toggle__sun { display: none; } [data-theme="light"] .hec-dark-mode-toggle__moon { display: flex; } /* Dark mode — show sun, hide moon */ [data-theme="dark"] .hec-dark-mode-toggle__sun { display: flex; } [data-theme="dark"] .hec-dark-mode-toggle__moon { display: none; } /* Default state (before JS runs / no localStorage value) — show moon */ .hec-dark-mode-toggle__sun { display: none; } .hec-dark-mode-toggle__moon { display: flex; } /* --------------------------------------------------------------------------- DARK MODE TOGGLE LABEL TEXT --------------------------------------------------------------------------- */ [data-theme="light"] .hec-dark-mode-toggle__label { content: attr(data-light-label); } [data-theme="dark"] .hec-dark-mode-toggle__label { content: attr(data-dark-label); } /* --------------------------------------------------------------------------- IMAGES — slight brightness reduction in dark mode Prevents images from blasting white light in an otherwise dark UI. --------------------------------------------------------------------------- */ [data-theme="dark"] .hec-content__body img, [data-theme="dark"] .hec-related-card__img, [data-theme="dark"] .hec-author-box__avatar { filter: brightness(0.90) saturate(0.95); transition: filter var(--hec-transition-slow); } [data-theme="dark"] .hec-content__body img:hover, [data-theme="dark"] .hec-related-card__img:hover { filter: brightness(1.0) saturate(1.0); } /* --------------------------------------------------------------------------- HORIZONTAL RULES in dark mode --------------------------------------------------------------------------- */ [data-theme="dark"] .hec-is-single-post hr, [data-theme="dark"] .hec-is-single-post .wp-block-separator { border-color: rgba(212, 183, 170, 0.12); } /* --------------------------------------------------------------------------- TABLE in dark mode --------------------------------------------------------------------------- */ [data-theme="dark"] .hec-is-single-post table { border-color: rgba(212, 183, 170, 0.10); } [data-theme="dark"] .hec-is-single-post th { background-color: rgba(209, 106, 11, 0.15); color: #f0e8dc; border-color: rgba(212, 183, 170, 0.10); } [data-theme="dark"] .hec-is-single-post td { border-color: rgba(212, 183, 170, 0.08); } [data-theme="dark"] .hec-is-single-post tr:nth-child(even) td { background-color: rgba(212, 183, 170, 0.03); } /* --------------------------------------------------------------------------- NEWSLETTER CTA SECTION — dark mode --------------------------------------------------------------------------- */ [data-theme="dark"] .hec-newsletter-cta { background: linear-gradient( 135deg, #1e1610 0%, #231a10 50%, #1a1308 100% ); border-color: rgba(209, 106, 11, 0.20); } [data-theme="dark"] .hec-newsletter-cta__bg-accent { opacity: 0.08; } /* --------------------------------------------------------------------------- WORDPRESS BLOCK EDITOR DARK MODE NOTICE Only visible when WP_DEBUG is on and user is an editor. --------------------------------------------------------------------------- */ [data-theme="dark"] .hec-debug-notice { background: #1e1610; border-color: var(--hec-brand-gold); color: #c4b09a; }