/* Brandality dark theme — warm inverted paper palette, one source of truth. Pages keep their light :root tokens; html[data-theme="dark"] outranks :root on specificity, so link order never matters. */ html[data-theme="dark"]{ --bg:#1A1712; --surface:#23201A; --tint:#211D17; --ink:#F2EDE4; --ink-soft:rgba(242,237,228,.68); --ink-faint:rgba(242,237,228,.44); --border:rgba(242,237,228,.10); --border2:rgba(242,237,228,.17); --orange:#FF6B35; --orange-deep:#FF8552; --orange-tint:rgba(255,107,53,.15); --purple:#A98EE0; --purple-tint:rgba(151,116,214,.16); --blue:#8AABEE; --blue-tint:rgba(84,128,222,.16); --olive:#ADB392; --olive-tint:rgba(140,146,110,.16); --green:#8CC07D; --green-tint:rgba(101,164,84,.16); --red:#E58877; --red-tint:rgba(200,90,72,.16); color-scheme:dark; } /* Shared chrome that hardcodes light values in per-page CSS */ html[data-theme="dark"] header{background:rgba(26,23,18,.88)} html[data-theme="dark"] #nav{background:rgba(35,32,26,.85);box-shadow:0 2px 16px rgba(0,0,0,.35)} html[data-theme="dark"] #nav.scrolled{box-shadow:0 4px 28px rgba(0,0,0,.45)} html[data-theme="dark"] .nav-cta{color:var(--bg)} html[data-theme="dark"] .nav-cta:hover{color:#fff} html[data-theme="dark"] #mobile-menu{background:rgba(26,23,18,.98)} html[data-theme="dark"] .hero-grid-bg{background-image:linear-gradient(rgba(242,237,228,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(242,237,228,.05) 1px,transparent 1px)} html[data-theme="dark"] #grain{opacity:.06} html[data-theme="dark"] .subnav{background:rgba(26,23,18,.92)} html[data-theme="dark"] .subnav a.on{color:var(--bg)} /* Chat widget (styles injected at runtime with literals) */ html[data-theme="dark"] #bd-chat-panel{background:var(--bg);border-color:var(--border2);color:var(--ink)} html[data-theme="dark"] .bdc-msg.bot{background:var(--surface);border-color:var(--border);color:var(--ink)} html[data-theme="dark"] .bdc-msg.bot a{color:var(--orange-deep)} html[data-theme="dark"] .bdc-msg.user{background:#F2EDE4;color:#1A1712} html[data-theme="dark"] .bdc-quick button{background:var(--surface);border-color:var(--border2);color:var(--ink)} html[data-theme="dark"] .bdc-quick button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} html[data-theme="dark"] .bdc-input{background:var(--surface);border-top-color:var(--border)} html[data-theme="dark"] .bdc-input input{background:var(--bg);border-color:var(--border2);color:var(--ink)} html[data-theme="dark"] .bdc-typing{color:var(--ink-faint)} html[data-theme="dark"] #bd-chat-label{background:#F2EDE4;color:#1A1712} /* Cart drawer */ html[data-theme="dark"] #cart-drawer{background:var(--bg);color:var(--ink);box-shadow:-20px 0 60px rgba(0,0,0,.5)} html[data-theme="dark"] #cart-overlay{background:rgba(0,0,0,.55)} /* Theme toggle — a real switch (track + sliding thumb), mounted into the page's own nav/header by theme.js so it reads as part of the chrome. May be mounted more than once (desktop pill + mobile full-screen menu on index.html) — every instance shares .bd-theme-toggle and stays in sync via the [data-theme] attribute on , which is pure CSS, no JS needed. */ .bd-theme-toggle{display:inline-flex;align-items:center;background:none;border:none;padding:0;margin:0;cursor:pointer;flex-shrink:0;line-height:0} .bd-theme-toggle.bdt-auto-right{margin-left:auto} .bdt-track{position:relative;width:46px;height:25px;border-radius:100px;background:var(--tint,#F2EDE4);border:1px solid var(--border2,rgba(22,19,15,.16));display:flex;align-items:center;justify-content:space-between;padding:0 5px;transition:background .25s,border-color .25s} .bd-theme-toggle:hover .bdt-track{border-color:var(--orange,#FF5A1F)} .bdt-icon{width:12px;height:12px;position:relative;z-index:1;color:var(--ink-faint,rgba(22,19,15,.42));transition:color .25s} .bdt-thumb{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:var(--orange,#FF5A1F);box-shadow:0 1px 4px rgba(22,19,15,.3);transition:transform .28s cubic-bezier(.4,0,.2,1)} html[data-theme="dark"] .bdt-thumb{transform:translateX(21px)} html[data-theme="dark"] .bdt-track{background:var(--surface,#23201A)} /* Fallback: only used if theme.js can't find any header to mount into */ .bd-theme-toggle.bdt-fixed{position:fixed;top:1.1rem;right:1.1rem;z-index:290;background:var(--surface,#fff);border:1px solid var(--border2,rgba(22,19,15,.16));border-radius:100px;padding:.3rem} /* index.html only: the compact pill instance is too tight once the hamburger takes over, so it hides in favour of the roomier mobile-menu instance — same breakpoint index.html already uses to swap nav-links for the hamburger. */ .bd-theme-toggle.bdt-mobilemenu-instance{margin-top:.5rem} @media(max-width:1024px){.bd-theme-toggle.bdt-pill-instance{display:none}} @media(min-width:1025px){.bd-theme-toggle.bdt-mobilemenu-instance{display:none}} @media print{.bd-theme-toggle{display:none}} /* Currency picker (injected by currency.js) — a visitor's explicit choice always wins over the auto-detected default. Same multi-mount/sync pattern as the theme toggle above. */ .bd-currency-picker{display:inline-flex;align-items:center;gap:2px;background:var(--tint,#F2EDE4);border:1px solid var(--border2,rgba(22,19,15,.16));border-radius:100px;padding:2px;flex-shrink:0} .bd-currency-picker.bdc-auto-right{margin-left:auto} .bd-currency-picker button{background:none;border:none;border-radius:100px;font-family:var(--fb,'Inter',sans-serif);font-size:.68rem;font-weight:700;letter-spacing:.02em;color:var(--ink-faint,rgba(22,19,15,.42));padding:.3rem .6rem;cursor:pointer;transition:background .2s,color .2s} .bd-currency-picker button.on{background:var(--surface,#fff);color:var(--ink,#16130F);box-shadow:0 1px 3px rgba(22,19,15,.12)} html[data-theme="dark"] .bd-currency-picker button.on{box-shadow:0 1px 3px rgba(0,0,0,.3)} .bd-currency-picker.bdc-mobilemenu-instance{margin-top:.9rem} @media(max-width:1024px){.bd-currency-picker.bdc-pill-instance{display:none}} @media(min-width:1025px){.bd-currency-picker.bdc-mobilemenu-instance{display:none}} @media print{.bd-currency-picker{display:none}} @media(max-width:480px){.bd-currency-picker button{padding:.28rem .5rem;font-size:.64rem}} /* Pages without index.html's hamburger/mobile-menu (services, products, portal, command, checklist, print, apply, blog): let the header's right-hand group wrap instead of overflowing once the toggle/picker join it. */ @media(max-width:640px){ .hdr-right,.hdr-actions,header nav{flex-wrap:wrap;justify-content:flex-end;row-gap:.5rem} }