/* Alteco theme toggle — sun/moon button (matches the cart icon's frame) and dark-mode overrides for the site's design tokens. The button is injected by alteco-theme.js into #mainNav after the cart icon so it sits to its right. Sizing mirrors #alteco-cart-icon (38x38, 18px svg). Dark mode is activated by `[data-theme="dark"]` on . Because each page defines its tokens on `:root`, we use `:root[data-theme="dark"]` so attribute specificity beats the inline declarations regardless of source order. */ #alteco-theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; /* never shrink — narrow viewports clipped the icon to a sliver */ width: 38px; height: 38px; margin-left: 0.5rem; background: transparent; border: 1px solid rgba(184,157,94,0.32); border-radius: 50%; color: var(--gold, #b89d5e); cursor: pointer; outline: none; padding: 0; transition: background 0.3s cubic-bezier(0.16,1,0.3,1), color 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s cubic-bezier(0.16,1,0.3,1), transform 0.3s cubic-bezier(0.16,1,0.3,1); } @media (max-width: 480px) { #alteco-theme-toggle { margin-left: 0.35rem; } } #alteco-theme-toggle:hover { background: var(--gold, #b89d5e); color: #fff; border-color: var(--gold, #b89d5e); } #alteco-theme-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(184,157,94,0.28); } #alteco-theme-toggle svg { width: 18px; height: 18px; display: block; transition: transform 0.45s cubic-bezier(0.16,1,0.3,1); } #alteco-theme-toggle:active svg { transform: rotate(-25deg); } /* Smooth tonal swap when the user flips the theme. Limited to color/background so layout-affecting properties don't animate. */ html, body, #mainNav, .dropdown-menu, .alteco-cart-panel, .footer-bottom { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; } /* ------------------------------------------------------------------ */ /* DARK THEME OVERRIDES */ /* ------------------------------------------------------------------ */ :root[data-theme="dark"] { /* Surfaces */ --cream: #16140f; --off-white: #1d1a14; --white: #1d1a14; --sand: #221e17; --stone: #2a2519; --light-stone: #221e17; --warm-dark: #f0ebe0; --charcoal: #f0ebe0; /* Type — invert the dark→light scale so contrast on the new surfaces is right. */ --text-dark: #efeadf; --text-body: #cfc7b6; --text-mid: #9b927f; --text-light: #6e6657; /* Gold accent stays — slightly brighter so it reads on the deeper surface. */ --gold: #c8ad6c; --gold-light: #d8c084; --gold-dark: #ad9354; color-scheme: dark; } /* Body in dark mode — pages set body{background:var(--cream)} so the variable override flips it, but make it explicit too in case a page used a literal. */ :root[data-theme="dark"] body { background: var(--cream); color: var(--text-dark); } /* Nav: many pages hardcode `#mainNav { background: rgba(250,247,240,...) }`, others use transparent + a `.scrolled` cream bar. Inline page CSS uses literal rgba, so a CSS-variable override can't reach it — pin the bar dark in both states. The trade-off: pages that originally had a transparent nav over a hero (homepage, collection landings) get a dark bar in dark mode too. That reads cleanly against the dark hero overlay we already apply. */ :root[data-theme="dark"] #mainNav, :root[data-theme="dark"] #mainNav.scrolled { background: rgba(22,20,15,0.92) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(255,255,255,0.05); } /* Mobile menu drawer: opens to fullscreen with a hardcoded cream background. */ :root[data-theme="dark"] .nav-links { background: var(--cream) !important; } /* Hero overlay gradients are hardcoded to cream rgba on most pages; soften them so the hero blends into the dark page bottom rather than fading to bright. */ :root[data-theme="dark"] .hero-overlay { background: linear-gradient(to bottom, rgba(22,20,15,0.35) 0%, rgba(22,20,15,0.15) 30%, rgba(22,20,15,0.6) 70%, var(--cream) 100%) !important; } /* Dropdown menus use a hardcoded cream rgba in shared CSS — re-skin in dark. */ :root[data-theme="dark"] .dropdown-menu { background: rgba(29,26,20,0.98); border-color: rgba(255,255,255,0.06); } /* Hairline borders across the site use rgba(0,0,0,...). Lift them with light alpha so dividers stay visible against the dark surfaces. */ :root[data-theme="dark"] .footer-bottom, :root[data-theme="dark"] .about-stats, :root[data-theme="dark"] .alteco-cart-head, :root[data-theme="dark"] .alteco-cart-item, :root[data-theme="dark"] .alteco-cart-foot, :root[data-theme="dark"] .alteco-cart-totals, :root[data-theme="dark"] .alteco-cart-totals-grand { border-color: rgba(255,255,255,0.08) !important; } /* Cart drawer chrome */ :root[data-theme="dark"] .alteco-cart-panel { background: var(--cream); box-shadow: -10px 0 40px rgba(0,0,0,0.5); } :root[data-theme="dark"] .alteco-cart-foot, :root[data-theme="dark"] .alteco-cart-totals { background: var(--off-white); } :root[data-theme="dark"] .alteco-cart-thumb { background: #2a2519; border-color: rgba(255,255,255,0.08); } :root[data-theme="dark"] .alteco-cart-thumb-empty { background: var(--off-white); } :root[data-theme="dark"] .alteco-cart-qty { background: var(--off-white); border-color: rgba(255,255,255,0.12); } :root[data-theme="dark"] .alteco-cart-qty-num, :root[data-theme="dark"] .alteco-cart-qty-btn { color: var(--text-dark); } :root[data-theme="dark"] .alteco-cart-remove { border-color: rgba(255,255,255,0.12); color: var(--text-mid); } :root[data-theme="dark"] .alteco-cart-clear { border-color: rgba(255,255,255,0.12); } /* Toast: it uses the charcoal token which we've inverted to a light tone, so pin it back to a dark pill so the white text stays readable. */ :root[data-theme="dark"] #alteco-cart-toast { background: #0f0d09; color: #f0ebe0; } /* Outlined buttons rely on rgba(0,0,0,0.12) borders against light surfaces. */ :root[data-theme="dark"] .btn-outline { border-color: rgba(255,255,255,0.18); color: var(--text-dark); } /* Contact form inputs: page CSS gives them rgba(0,0,0,0.06) borders that disappear against dark backgrounds. Lift to a visible value. */ :root[data-theme="dark"] .form-field input, :root[data-theme="dark"] .form-field textarea, :root[data-theme="dark"] .form-field select { border-color: rgba(255,255,255,0.12) !important; color: var(--text-dark); } :root[data-theme="dark"] .form-field input::placeholder, :root[data-theme="dark"] .form-field textarea::placeholder { color: var(--text-mid); opacity: 0.7; } /* ------------------------------------------------------------------ */ /* PRODUCT TILES — image areas stay light */ /* ------------------------------------------------------------------ */ /* Handle/door/lock PNGs are rendered on white, so a dark tile background washes them out. Keep image-mat surfaces near-white in dark mode and let the surrounding card chrome (text rows, borders, page bg) carry the dark theme — same pattern Apple/Bose use for product photo cards on dark pages. */ /* Tiles that hold scanned technical drawings / aluform sliding renders — these were photographed on white paper, so a near-white mat keeps line work crisp. Handle/knob/pull tiles deliberately stay dark (see block below). */ :root[data-theme="dark"] .col-tile-img-contain:has(img), :root[data-theme="dark"] .hw-doc-card-img:has(img), :root[data-theme="dark"] .hw-fimet-grid .hw-aluform-row .col-tile-img:has(img) { background-color: #f0ece4; } /* Handle/knob/pull tiles + the configurator preview keep the dark mat — looks premium and matches the showroom feel. The original CSS uses `mix-blend-mode: multiply` on these images, which composites the handle pixels against the backdrop; on a dark backdrop multiply zeros out and the handle disappears. Force the blend back to normal so the PNG renders as-is. */ :root[data-theme="dark"] .hw-handle-grid .col-tile-img img, :root[data-theme="dark"] .hw-fimet-grid .col-tile-img img, :root[data-theme="dark"] .dh-img-wrap img, :root[data-theme="dark"] .dh-img-wrap .dh-layer { mix-blend-mode: normal !important; } /* Card wrappers: surface that holds the image plus the meta row. Keep them slightly elevated from the page background and outlined so they read as distinct cards on the dark page. */ :root[data-theme="dark"] .col-tile, :root[data-theme="dark"] .hw-card, :root[data-theme="dark"] .hw-doc-card, :root[data-theme="dark"] .coll-card, :root[data-theme="dark"] .interior-card, :root[data-theme="dark"] .ac-slide, :root[data-theme="dark"] .hw-aluform-row { background: #201c16 !important; border-color: rgba(255,255,255,0.08) !important; } /* Filter sidebars + search inputs — these use var(--white) for the input surface, which now flips to dark. Keep the input clearly fillable. */ :root[data-theme="dark"] .st-filter-aside, :root[data-theme="dark"] .hw-filter-aside { background: #1a1812 !important; border-color: rgba(255,255,255,0.06) !important; } :root[data-theme="dark"] .st-search input, :root[data-theme="dark"] .hw-search input { background: #2a2519 !important; border-color: rgba(255,255,255,0.12) !important; color: var(--text-dark); } :root[data-theme="dark"] .st-filter-box, :root[data-theme="dark"] .hw-filter-box { background: #2a2519 !important; border-color: rgba(255,255,255,0.25) !important; } :root[data-theme="dark"] .st-filter-count, :root[data-theme="dark"] .hw-filter-count { background: #2a2519 !important; border-color: rgba(255,255,255,0.1) !important; } :root[data-theme="dark"] .st-filter-label.is-checked, :root[data-theme="dark"] .hw-filter-label.is-checked, :root[data-theme="dark"] .st-check:checked + .st-filter-label, :root[data-theme="dark"] .hw-check:checked + .hw-filter-label { background: rgba(200,173,108,0.08) !important; } :root[data-theme="dark"] .st-filter-label.is-checked .st-filter-box, :root[data-theme="dark"] .hw-filter-label.is-checked .hw-filter-box { background: var(--gold) !important; } /* Generic info cards (search-empty boxes, contact cards) */ :root[data-theme="dark"] .st-search-empty, :root[data-theme="dark"] .hw-search-empty, :root[data-theme="dark"] .st-card, :root[data-theme="dark"] .hw-empty { background: #201c16 !important; border-color: rgba(255,255,255,0.08) !important; } /* The page-header band on store/hardware pages uses var(--cream) which is now dark — that's correct; nothing to do here. But the .st-filter-section / sub-sections that border-top against the header may need the border lifted. */ :root[data-theme="dark"] .st-filter-section { border-top-color: rgba(255,255,255,0.06) !important; }