/* ============================================================ DIDHub dark-mode token sheet + chrome overrides Single source of truth for the dark theme. Linked on every page. Activated by `theme-dark` on (set by the head boot script + /js/theme-toggle.js). Uses :root.theme-dark (specificity 0,2,0) so it overrides each page's inline :root regardless of link order. The dark palette is ported from the dashboard (Numberz/dashboard/ src/style.css .theme-dark) so didhub.io and the app match. ============================================================ */ /* ── Light additions ────────────────────────────────────────────────────── --navy is overloaded on the marketing site: it's used as TEXT/brand/border (~5.5k×) AND as a background/gradient stop (~1.7k×). Dark mode must flip the text use to near-white while keeping background surfaces dark. So background usages are repointed to --navy-bg (same value in light = no visual change). --navy-2 (#2a4d7a, gradient stop) and --navy-dark are background-only and are intentionally NOT flipped in dark, so navy gradients stay dark. */ :root{ --navy-bg:#1e3a5f; /* Semantic "soft" callout backgrounds. Light values match the literals they replace (no-op in light); dark values are translucent tints that blend. */ --soft-warn:#fff7ed; --soft-warn-2:#fffbeb; --soft-danger:#fef2f2; --soft-danger-2:#fee2e2; --soft-info:#eff6ff; color-scheme:light; } /* Smooth the flip without janking long pages. */ body{transition:background-color .25s ease,color .25s ease;} /* ── Dark theme ───────────────────────────────────────────────────────────── */ :root.theme-dark{ color-scheme:dark; --bg:#0f141b; --bg-alt:#161d26; --surface:#161d26; --text:#e6eaf0; --text-muted:#aab4c2; --text-subtle:#7e8a9a; --border:#273039; --border-strong:#39444f; /* navy-as-text/brand/border → near-white; navy-as-background stays deep */ --navy:#e8eef7; --navy-bg:#15243c; /* emerald: keep the solid brand green for filled CTAs (white text on it); lighten the "dark" shade since it's used as text/links/hovers on dark. */ --emerald:#10b981; --emerald-dark:#34d399; --emerald-darker:#10b981; --emerald-light:rgba(16,185,129,.16); --emerald-soft:rgba(16,185,129,.12); --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 20px 50px rgba(0,0,0,.5); --shadow-xl:0 30px 80px rgba(0,0,0,.6); /* Soft semantic backgrounds → translucent tints on dark */ --soft-warn:rgba(249,115,22,.13); --soft-warn-2:rgba(251,191,36,.13); --soft-danger:rgba(220,38,38,.14); --soft-danger-2:rgba(220,38,38,.18); --soft-info:rgba(59,130,246,.14); } /* Amber "served on request" verdict icon is a dark amber (#b45309) that's unreadable on the dark tint — lift it. */ :root.theme-dark .served-on-request .ck-verdict i{color:#fbbf24;} /* Third-party integration / brand logos (Google favicons + /img/brands/*) are often dark or transparent and disappear on the dark tile. Sit them on a small white chip so any logo stays legible — mirrors how they read on light cards. */ :root.theme-dark .integrations-grid a img, :root.theme-dark img[src*="s2/favicons"], :root.theme-dark img[src*="/img/brands/"]{ background:#fff; border-radius:8px; padding:5px; box-sizing:border-box; } /* ── Chrome overrides (header is light-translucent; footer is already dark) ── */ :root.theme-dark .site-header{ background:rgba(15,20,27,.82); border-bottom-color:var(--border); } /* Form fields without an explicit background fall back to the browser's default field color (an off grey) in dark mode. Pin them to design surfaces so they blend (e.g. the /calling-rates + /area-codes search inputs). */ :root.theme-dark input[type=search], :root.theme-dark input[type=text], :root.theme-dark input[type=email], :root.theme-dark input[type=tel], :root.theme-dark input[type=number], :root.theme-dark input[type=password], :root.theme-dark select, :root.theme-dark textarea{ background:var(--bg-alt); color:var(--text); border-color:var(--border); } :root.theme-dark input::placeholder, :root.theme-dark textarea::placeholder{color:var(--text-subtle);} /* The "Built for reliability" stats band is a navy block in light mode. In dark, the saturated navy clashes with the neutral surfaces — make it a neutral elevated band with hairline borders so it reads as a clean section. */ :root.theme-dark .stats{ background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } /* Cookie-consent modal card is hardcoded light in _partials; make it dark. */ :root.theme-dark .dh-consent-modal-card{background:var(--surface);color:var(--text);} :root.theme-dark .dh-consent-modal-card h2{color:var(--navy);} :root.theme-dark .dh-consent-modal-lede, :root.theme-dark .dh-consent-row-desc{color:var(--text-muted);} :root.theme-dark .dh-consent-row-title{color:var(--navy);} :root.theme-dark .dh-consent-tier{background:var(--bg-alt);border-color:var(--border);} :root.theme-dark .dh-consent-modal-x{color:var(--text-subtle);} /* ── Theme toggle button (built + inserted by /js/theme-toggle.js) ─────────── */ .theme-toggle{ background:none;border:none;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:9px;flex-shrink:0; color:var(--text-muted);transition:background .15s,color .15s; -webkit-appearance:none;appearance:none;line-height:0; } .theme-toggle:hover{background:var(--bg-alt);color:var(--navy);} .theme-toggle svg{width:20px;height:20px;display:block;} .theme-toggle .ico-sun{display:none;} .theme-toggle .ico-moon{display:inline-flex;} :root.theme-dark .theme-toggle .ico-sun{display:inline-flex;} :root.theme-dark .theme-toggle .ico-moon{display:none;} :root.theme-dark .theme-toggle:hover{background:rgba(255,255,255,.06);}