/* ============================================================================= DARK-MODE.CSS — Dark Theme Override System Hello Elementor Child Theme All dark mode styles are scoped under [data-theme="dark"] on the root html element. This attribute is toggled by assets/js/dark-mode.js. Architecture: - We override CSS custom properties defined in base.css. - A FORCE OVERRIDES section at the bottom uses !important to defeat parent theme (Hello Elementor) and Elementor Kit styles that would otherwise win specificity and leave body/components stuck in their light-mode colors. ============================================================================= */ /* ============================================================================= DARK MODE DESIGN TOKENS ============================================================================= */ [data-theme="dark"] { /* PAGE BACKGROUND */ --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 */ --hec-color-surface: #231a10; --hec-color-surface-raised: #2b2016; --hec-color-surface-overlay: rgba(35, 26, 16, 0.95); /* TEXT */ --hec-color-text-primary: #f1ede4; --hec-color-text-secondary: #d4c8b6; --hec-color-text-tertiary: #a89784; --hec-color-text-disabled: #6a5d4e; --hec-color-text-inverse: #16110b; --hec-color-text-on-amber: #16110b; /* BRAND / ACCENT */ --hec-color-accent: #ffbf00; --hec-color-accent-hover: #ffd564; --hec-color-accent-active: #e07c1a; --hec-color-accent-subtle: rgba(255, 191, 0, 0.12); --hec-color-accent-gold: #ffbf00; --hec-color-accent-gold-warm: #ffc660; /* HERO */ --hec-color-hero-overlay-start: rgba(10, 6, 2, 0.0); --hec-color-hero-overlay-end: rgba(10, 6, 2, 0.92); --hec-color-hero-text: #fff8e9; --hec-color-hero-badge-bg: var(--hec-brand-amber); --hec-color-hero-badge-text: #16110b; /* BORDERS */ --hec-color-border: rgba(212, 183, 170, 0.12); --hec-color-border-strong: rgba(212, 183, 170, 0.20); --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(255, 191, 0, 0.12); /* 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 */ --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(255, 191, 0, 0.15); --hec-color-inline-code-text: #ffd564; /* BLOCKQUOTE */ --hec-color-blockquote-border: var(--hec-brand-gold); --hec-color-blockquote-bg: rgba(255, 191, 0, 0.08); --hec-color-blockquote-text: #d4c8b6; /* TOC */ --hec-color-toc-bg: #1e1610; --hec-color-toc-border: var(--hec-brand-gold); --hec-color-toc-link: #d4c8b6; --hec-color-toc-link-hover: var(--hec-brand-gold); --hec-color-toc-link-active: var(--hec-brand-gold); /* 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-gold); /* CARDS */ --hec-color-card-bg: #1e1610; --hec-color-card-border: rgba(212, 183, 170, 0.10); --hec-color-card-shadow: rgba(0, 0, 0, 0.30); --hec-color-card-shadow-hover:rgba(0, 0, 0, 0.50); /* FEEDBACK */ --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-gold); /* SOCIAL SHARE */ --hec-color-share-bg: #1e1610; --hec-color-share-border: rgba(212, 183, 170, 0.12); --hec-color-share-icon: #d4c8b6; /* META BAR */ --hec-color-meta-text: #a89784; --hec-color-meta-pill-bg: rgba(212, 183, 170, 0.10); --hec-color-meta-pill-text: #d4c8b6; --hec-color-meta-pill-hover: rgba(255, 191, 0, 0.15); --hec-color-meta-pill-border: rgba(212, 183, 170, 0.14); /* SHADOWS */ --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(255, 191, 0, 0.30), 0 1px 3px rgba(255, 191, 0, 0.20); --hec-shadow-amber-lg: 0 8px 24px rgba(255, 191, 0, 0.35), 0 2px 6px rgba(255, 191, 0, 0.25); } /* ============================================================================= ICON SWAP (light=moon, dark=sun) — no !important needed, no conflict. ============================================================================= */ [data-theme="light"] .hec-dark-mode-toggle__sun { display: none; } [data-theme="light"] .hec-dark-mode-toggle__moon { display: flex; } [data-theme="dark"] .hec-dark-mode-toggle__sun { display: flex; } [data-theme="dark"] .hec-dark-mode-toggle__moon { display: none; } /* Default before JS runs */ .hec-dark-mode-toggle__sun { display: none; } .hec-dark-mode-toggle__moon { display: flex; } /* ============================================================================= FORCE OVERRIDES — Dark Mode These rules use !important to guarantee dark mode applies on every visible surface, regardless of what Hello Elementor (parent theme) or Elementor Kit global styles set on body/article/etc. Each rule is scoped to [data-theme="dark"] so light mode is never affected. ============================================================================= */ /* PAGE BODY — the main surface */ html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] body.hec-is-single-post { background-color: #16110b !important; color: #f1ede4 !important; } /* Article wrapper / content area — let body color show through */ html[data-theme="dark"] .hec-single-post-wrap, html[data-theme="dark"] .hec-article-grid, html[data-theme="dark"] .hec-article-main, html[data-theme="dark"] .hec-content-body { background-color: transparent !important; color: #f1ede4 !important; } /* CONTENT TEXT — paragraphs, lists, spans */ html[data-theme="dark"] .hec-content__body, html[data-theme="dark"] .hec-content__body p, html[data-theme="dark"] .hec-content__body ul, html[data-theme="dark"] .hec-content__body ol, html[data-theme="dark"] .hec-content__body li, html[data-theme="dark"] .hec-content__body dl, html[data-theme="dark"] .hec-content__body dt, html[data-theme="dark"] .hec-content__body dd { color: #f1ede4 !important; } /* HEADINGS — bright, almost-white */ html[data-theme="dark"] .hec-content__body h1, html[data-theme="dark"] .hec-content__body h2, html[data-theme="dark"] .hec-content__body h3, html[data-theme="dark"] .hec-content__body h4, html[data-theme="dark"] .hec-content__body h5, html[data-theme="dark"] .hec-content__body h6 { color: #d16a0b !important; } /* STRONG / B — pure white for emphasis */ html[data-theme="dark"] .hec-content__body strong, html[data-theme="dark"] .hec-content__body b { color: #ffcf60 !important; } /* List bullets and ordered markers */ html[data-theme="dark"] .hec-content__body li::marker { color: var(--hec-brand-gold) !important; } /* LINKS inside content. v1.0.14: same brand bright orange #ed751c as light mode, so body links are #ed751c in BOTH themes. Hover is a lighter tint of it. */ html[data-theme="dark"] .hec-content__body a { color: var(--hec-brand-orange-bright) !important; } html[data-theme="dark"] .hec-content__body a:hover { color: var(--hec-brand-amber-lighter) !important; } /* CODE BLOCKS */ html[data-theme="dark"] .hec-content__body pre, html[data-theme="dark"] .hec-content__body pre code { background-color: #0e0b07 !important; color: #f0d9b5 !important; border-color: rgba(212, 183, 170, 0.10) !important; } /* Inline code */ html[data-theme="dark"] .hec-content__body :not(pre) > code { background-color: rgba(255, 191, 0, 0.15) !important; color: #ffd564 !important; } /* BLOCKQUOTE */ html[data-theme="dark"] .hec-content__body blockquote, html[data-theme="dark"] .hec-content__body .wp-block-quote { background-color: rgba(255, 191, 0, 0.08) !important; color: #d4c8b6 !important; border-left-color: var(--hec-brand-gold) !important; } /* TABLES */ html[data-theme="dark"] .hec-content__body table { background-color: #1e1610 !important; color: #f1ede4 !important; border-color: rgba(212, 183, 170, 0.10) !important; } html[data-theme="dark"] .hec-content__body th { background-color: rgba(255, 191, 0, 0.15) !important; color: #fff8e9 !important; border-color: rgba(212, 183, 170, 0.12) !important; } html[data-theme="dark"] .hec-content__body td { border-color: rgba(212, 183, 170, 0.08) !important; } html[data-theme="dark"] .hec-content__body tr:nth-child(even) td { background-color: rgba(212, 183, 170, 0.03) !important; } /* HR / Separator */ html[data-theme="dark"] .hec-content__body hr, html[data-theme="dark"] .hec-content__body .wp-block-separator { border-color: rgba(212, 183, 170, 0.12) !important; } /* FAQ ACCORDION (Yoast / Rank Math schema FAQ) */ html[data-theme="dark"] .hec-content__body .schema-faq-section { background-color: #1e1610 !important; border-color: rgba(212, 183, 170, 0.12) !important; } html[data-theme="dark"] .hec-content__body .schema-faq-question { color: #fff8e9 !important; } html[data-theme="dark"] .hec-content__body .schema-faq-question:hover { color: var(--hec-brand-gold) !important; } html[data-theme="dark"] .hec-content__body .schema-faq-answer { color: #d4c8b6 !important; } html[data-theme="dark"] .hec-content__body .schema-faq-answer strong, html[data-theme="dark"] .hec-content__body .schema-faq-answer em { color: #ffffff !important; } /* SOCIAL SHARE BAR */ html[data-theme="dark"] .hec-social-share { background-color: #1e1610 !important; border-color: rgba(212, 183, 170, 0.12) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.40) !important; } html[data-theme="dark"] .hec-social-share__btn { color: #d4c8b6 !important; } html[data-theme="dark"] .hec-social-share__btn:hover { color: #ffffff !important; /* Platform color hover stays — set inline per button */ } html[data-theme="dark"] .hec-social-share__copy-btn { color: #d4c8b6 !important; border-color: rgba(212, 183, 170, 0.12) !important; } html[data-theme="dark"] .hec-social-share__copy-btn:hover { color: var(--hec-brand-gold) !important; } /* FEEDBACK WIDGET — panel + form (trigger pill stays amber by design) */ html[data-theme="dark"] .hec-feedback-widget__panel { background-color: #1e1610 !important; color: #f1ede4 !important; border-color: rgba(212, 183, 170, 0.12) !important; } html[data-theme="dark"] .hec-feedback-widget__panel-title { color: #fff8e9 !important; } html[data-theme="dark"] .hec-feedback-widget__panel-desc { color: #a89784 !important; } html[data-theme="dark"] .hec-feedback-widget__panel-header { border-bottom-color: rgba(212, 183, 170, 0.12) !important; } html[data-theme="dark"] .hec-feedback-widget__label { color: #d4c8b6 !important; } html[data-theme="dark"] .hec-feedback-widget__input, html[data-theme="dark"] .hec-feedback-widget__textarea { background-color: #16110b !important; color: #f1ede4 !important; border-color: rgba(212, 183, 170, 0.20) !important; } html[data-theme="dark"] .hec-feedback-widget__input::placeholder, html[data-theme="dark"] .hec-feedback-widget__textarea::placeholder { color: #6a5d4e !important; } html[data-theme="dark"] .hec-feedback-widget__close { color: #d4c8b6 !important; } html[data-theme="dark"] .hec-feedback-widget__close:hover { color: var(--hec-brand-gold) !important; } /* DARK MODE TOGGLE — extra safety */ html[data-theme="dark"] .hec-dark-mode-toggle { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 55%), linear-gradient(135deg, rgba(22, 17, 11, 0.92) 0%, rgba(10, 6, 2, 0.92) 100%) !important; color: #f5ede0 !important; border-color: rgba(255, 191, 0, 0.40) !important; } html[data-theme="dark"] .hec-dark-mode-toggle__icon { color: var(--hec-brand-gold) !important; } html[data-theme="dark"] .hec-dark-mode-toggle__label { color: #f5ede0 !important; } /* META BAR */ html[data-theme="dark"] .hec-meta-bar, html[data-theme="dark"] .hec-meta-bar * { color: #a89784 !important; } html[data-theme="dark"] .hec-meta-bar a, html[data-theme="dark"] .hec-meta-bar__pill { background-color: rgba(212, 183, 170, 0.10) !important; color: #d4c8b6 !important; border-color: rgba(212, 183, 170, 0.14) !important; } html[data-theme="dark"] .hec-meta-bar a:hover, html[data-theme="dark"] .hec-meta-bar__pill:hover { background-color: rgba(255, 191, 0, 0.15) !important; color: var(--hec-brand-gold) !important; } html[data-theme="dark"] .hec-meta-bar__author-name, html[data-theme="dark"] .hec-meta-bar__date, html[data-theme="dark"] .hec-meta-bar__reading-time { color: #d4c8b6 !important; } /* AUTHOR BOX */ html[data-theme="dark"] .hec-author-box, html[data-theme="dark"] .hec-author-box__inner { background-color: #1e1610 !important; border-color: rgba(212, 183, 170, 0.12) !important; color: #f1ede4 !important; } html[data-theme="dark"] .hec-author-box__name { color: #fff8e9 !important; } html[data-theme="dark"] .hec-author-box__bio { color: #d4c8b6 !important; } html[data-theme="dark"] .hec-author-box__link { color: var(--hec-brand-gold) !important; } /* RELATED POSTS */ html[data-theme="dark"] .hec-related-posts { color: #f1ede4 !important; } html[data-theme="dark"] .hec-related-posts__heading, html[data-theme="dark"] .hec-related-posts__title { color: #fff8e9 !important; } html[data-theme="dark"] .hec-related-card { background-color: #1e1610 !important; border-color: rgba(212, 183, 170, 0.10) !important; color: #f1ede4 !important; } html[data-theme="dark"] .hec-related-card__title { color: #fff8e9 !important; } html[data-theme="dark"] .hec-related-card__excerpt, html[data-theme="dark"] .hec-related-card__meta { color: #a89784 !important; } html[data-theme="dark"] .hec-related-card:hover .hec-related-card__title { color: var(--hec-brand-gold) !important; } /* NEWSLETTER CTA */ html[data-theme="dark"] .hec-newsletter-cta { background: linear-gradient( 135deg, #1e1610 0%, #231a10 50%, #1a1308 100% ) !important; border-color: rgba(255, 191, 0, 0.20) !important; color: #f1ede4 !important; } html[data-theme="dark"] .hec-newsletter-cta__heading, html[data-theme="dark"] .hec-newsletter-cta h2, html[data-theme="dark"] .hec-newsletter-cta h3 { color: #fff8e9 !important; } html[data-theme="dark"] .hec-newsletter-cta p { color: #d4c8b6 !important; } /* TOC plugin mount + Cy5 sidebar mount — let your sidebar TOC handle itself, but if the legacy #hec-toc-list is still present anywhere, dark it. */ html[data-theme="dark"] #hec-toc-list, html[data-theme="dark"] .hec-toc-wrapper { background-color: #1e1610 !important; color: #d4c8b6 !important; border-color: rgba(212, 183, 170, 0.10) !important; } html[data-theme="dark"] #hec-toc-list a, html[data-theme="dark"] .hec-toc-wrapper a { color: #d4c8b6 !important; } html[data-theme="dark"] #hec-toc-list a:hover, html[data-theme="dark"] .hec-toc-wrapper a:hover { color: var(--hec-brand-gold) !important; } /* HORIZONTAL RULES site-wide */ html[data-theme="dark"] hr, html[data-theme="dark"] .wp-block-separator { border-color: rgba(212, 183, 170, 0.12) !important; } /* IMAGES — softened brightness so they don't blast in the dark UI */ html[data-theme="dark"] .hec-content__body img, html[data-theme="dark"] .hec-related-card__img, html[data-theme="dark"] .hec-author-box__avatar { filter: brightness(0.90) saturate(0.95); transition: filter var(--hec-transition-slow); } html[data-theme="dark"] .hec-content__body img:hover, html[data-theme="dark"] .hec-related-card__img:hover { filter: brightness(1.0) saturate(1.0); } /* SCROLLBAR */ html[data-theme="dark"] { scrollbar-color: #3a2c1e #16110b; scrollbar-width: thin; } html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #16110b; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #3a2c1e; border-radius: var(--hec-radius-full); border: 2px solid #16110b; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: var(--hec-brand-amber-dark); } /* SELECTION */ html[data-theme="dark"] ::selection { background-color: rgba(255, 191, 0, 0.35); color: #16110b; }