/* ========================================================================== Want-IT Dark Mode Activated via prefers-color-scheme: dark OR .dark-mode class on No functional or content changes — purely visual override. No CSS nesting used — maximum browser compatibility. ========================================================================== */ /* ---------- Design tokens ---------- */ /* System preference handled by JS — always uses .dark-mode class */ html.dark-mode { --dm-bg: #0f1117; --dm-bg-elevated: #181a22; --dm-bg-card: #1c1e28; --dm-bg-input: #22242e; --dm-text: #e4e4e7; --dm-text-muted: #9ca3af; --dm-border: #2e3040; --dm-shadow: rgba(0, 0, 0, 0.45); } /* -- All dark mode styles are class-based (html.dark-mode) below -- */ /* ========================================================================== CLASS-BASED TRIGGER (html.dark-mode) Flat selectors — no nesting. ========================================================================== */ /* -- Base -- */ html.dark-mode body { background: var(--dm-bg) !important; color: var(--dm-text) !important; } /* -- Utility bg -- */ html.dark-mode .u-bg-white { background-color: var(--dm-bg-elevated) !important; } html.dark-mode .u-bg-light-gray { background-color: var(--dm-bg) !important; } html.dark-mode .u-bg-black-blue, html.dark-mode .u-bg-very-dark-blue { background-color: #0a0c12 !important; } /* -- Utility text -- */ html.dark-mode .u-black, html.dark-mode .u-black-blue, html.dark-mode .u-very-dark-blue { color: var(--dm-text) !important; } /* -- Hero -- */ html.dark-mode .c-hero { background: var(--dm-bg) !important; } /* -- Nav -- */ html.dark-mode body.is-scrolled .c-nav { background: var(--dm-bg-elevated) !important; box-shadow: 0 2px 13px 5px var(--dm-shadow) !important; } html.dark-mode body.is-menu-open .c-nav { background: var(--dm-bg-elevated) !important; } html.dark-mode .c-nav__mobile-item > a { color: var(--dm-text) !important; background: transparent !important; } html.dark-mode .c-nav__mobile-item > a:hover { background: transparent !important; } html.dark-mode .c-nav__logo { filter: invert(1) brightness(2); } @media screen and (max-width: 900px) { html.dark-mode body.is-menu-open .c-nav__mobile { background: var(--dm-bg-elevated) !important; } } /* duplicate hover removed — already covered by unconditional rule above */ /* -- Sections -- */ html.dark-mode .l-section--corner:before, html.dark-mode .l-section--corner:after { background: var(--dm-bg) !important; } /* -- Box -- */ html.dark-mode .c-box { background: var(--dm-bg-card) !important; box-shadow: 0px 4px 30px var(--dm-shadow) !important; } html.dark-mode .c-box--light { background: var(--dm-bg-elevated) !important; } /* -- Buttons -- */ html.dark-mode .c-btn--outline { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } html.dark-mode .c-btn--outline:hover { background: var(--dm-bg-input) !important; } html.dark-mode .c-btn--third { border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .c-btn--inverse { background: var(--dm-bg-card) !important; } html.dark-mode .c-btn--inverse:hover { background: var(--dm-bg-input) !important; } /* -- Cards, badges, labels -- */ html.dark-mode .c-badge { background: var(--dm-bg-card) !important; } html.dark-mode .c-label { background: var(--dm-bg-card) !important; color: var(--dm-text) !important; } html.dark-mode .c-label--outline { border-color: var(--dm-border) !important; } /* -- Footer -- */ html.dark-mode .c-footer__bot { border-top-color: var(--dm-border) !important; } html.dark-mode .c-footer__elev { background: var(--dm-bg-card) !important; box-shadow: 0 10px 20px var(--dm-shadow) !important; } html.dark-mode .c-footer__social { border-color: var(--dm-border) !important; } /* -- Forms -- */ html.dark-mode .c-form__control { background: var(--dm-bg-input) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .c-form__control::-moz-placeholder { color: var(--dm-text-muted) !important; } html.dark-mode .c-form__control::placeholder { color: var(--dm-text-muted) !important; } html.dark-mode .c-form__select select { background: var(--dm-bg-input) !important; } /* -- Burger -- */ html.dark-mode .c-burger__line, html.dark-mode .c-burger__line:before, html.dark-mode .c-burger__line:after { background: var(--dm-text) !important; } html.dark-mode body.is-menu-open .c-burger__line { background: transparent !important; } html.dark-mode body.is-menu-open .c-burger__line:before, html.dark-mode body.is-menu-open .c-burger__line:after { background: var(--dm-text) !important; } /* -- Dropdown -- */ html.dark-mode .dropdown-menu { background: var(--dm-bg-card) !important; box-shadow: 0 15px 20px 0 var(--dm-shadow) !important; } html.dark-mode .dropdown-item { color: var(--dm-text) !important; } /* -- WYSIWYG -- */ html.dark-mode .c-wysiwyg--row thead tr th:first-child { background: var(--dm-bg-elevated) !important; } /* -- Video box -- */ html.dark-mode .c-video-box__button { background: var(--dm-bg-card) !important; } /* -- Map label -- */ html.dark-mode .c-map__label { background: var(--dm-bg-card) !important; } /* -- Logo slider fade -- */ html.dark-mode .c-logo-slider::before { background: linear-gradient(to right, var(--dm-bg), transparent) !important; } html.dark-mode .c-logo-slider::after { background: linear-gradient(to left, var(--dm-bg), transparent) !important; } /* -- Misc -- */ html.dark-mode .c-line { background: rgba(255, 255, 255, 0.06) !important; } html.dark-mode hr { background-color: var(--dm-border) !important; } /* -- Pattern images -- */ html.dark-mode img[src*="pattern-1"], html.dark-mode img[src*="pattern-2"] { filter: invert(1) opacity(0.08) !important; } /* -- SVG icons in boxes -- */ html.dark-mode .c-box svg { color: var(--dm-text) !important; } /* -- Cookie consent -- */ html.dark-mode #cc-main .cm, html.dark-mode #cc-main .cp { background: var(--dm-bg-elevated) !important; color: var(--dm-text) !important; } /* -- Generic cards -- */ html.dark-mode [class*="c-card"], html.dark-mode .c-testimonial, html.dark-mode .c-pricing { background-color: var(--dm-bg-card) !important; color: var(--dm-text) !important; } /* -- Selection -- */ html.dark-mode ::selection { background: var(--primary-color); color: #fff; } /* -- Links / blockquote -- */ html.dark-mode p a { color: var(--primary-color); } html.dark-mode blockquote { color: var(--dm-text-muted); } /* -- Buttons missing overrides -- */ html.dark-mode .c-btn--secondary { border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .c-btn--secondary:hover { background: var(--dm-bg-input) !important; } /* -- Footer social hover -- */ html.dark-mode .c-footer__social:hover { background: var(--dm-bg-input) !important; } /* -- WYSIWYG bullets -- */ html.dark-mode .c-wysiwyg ul li:before { background: var(--primary-color) !important; } html.dark-mode .c-wysiwyg h2, html.dark-mode .c-wysiwyg h3, html.dark-mode .c-wysiwyg h4 { color: var(--dm-text) !important; } /* -- Dropdown hover -- */ html.dark-mode .dropdown-item:hover { color: var(--primary-color) !important; } /* ---------- Dark mode toggle button ---------- */ .c-dark-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; cursor: pointer; border-radius: 50%; transition: background 0.2s ease; padding: 0; margin-left: 8px; flex-shrink: 0; } /* Mobile toggle: show on mobile, hide on desktop */ .c-dark-toggle.u-none-md { display: inline-flex !important; } @media (min-width: 900px) { .c-dark-toggle.u-none-md { display: none !important; } } .c-dark-toggle:hover { background: rgba(0, 0, 0, 0.06); } .c-dark-toggle svg { width: 20px; height: 20px; stroke: #374151; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Dark mode overrides for toggle */ html.dark-mode .c-dark-toggle:hover { background: rgba(255, 255, 255, 0.08); } html.dark-mode .c-dark-toggle svg { stroke: var(--dm-text, #e4e4e7); }