/* ========================================================================== Liquid Web Developers — Dark Mode (drop-in stylesheet) -------------------------------------------------------------------------- HOW IT WORKS This file does NOT require any changes to your components. It re-defines the handful of Tailwind utility classes your site actually uses (bg-white, text-navy-800, border-slate-200, .card, etc.) so their VALUES come from CSS variables instead of fixed colours. - In light mode the variables resolve to the exact colours you use today, so the site looks identical to now. - In dark mode the variables flip, and every component follows automatically. ACTIVATION (either works, both are supported) 1. Automatic — follows the visitor's OS setting via prefers-color-scheme. 2. Manual — set data-theme="dark" or "light" on to override. SPECIFICITY NOTE Every rule is prefixed with `html` so it beats Tailwind's single-class specificity regardless of stylesheet load order. No !important needed. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THEME VARIABLES -------------------------------------------------------------------------- */ /* Light theme — these values match the current site exactly. */ :root { --lw-page: #ffffff; /* page background */ --lw-surface: #ffffff; /* cards, header (bg-white) */ --lw-surface-2: #f8fafc; /* alt sections (slate-50) */ --lw-surface-3: #f1f5f9; /* slate-100 */ --lw-surface-4: #e2e8f0; /* slate-200 */ --lw-tint: #eff6ff; /* brand-50 tint panels */ --lw-tint-strong: #dbeafe; /* brand-100 */ --lw-band: #0e1729; /* navy-800 contrast bands */ --lw-text: #0e1729; /* navy-800 headings/body */ --lw-text-2: #142036; /* navy-700 */ --lw-text-3: #334155; /* slate-700 */ --lw-text-4: #475569; /* slate-600 */ --lw-text-5: #64748b; /* slate-500 */ --lw-text-6: #94a3b8; /* slate-400 */ --lw-text-7: #cbd5e1; /* slate-300 */ --lw-text-8: #e2e8f0; /* slate-200 */ --lw-border: #e2e8f0; /* slate-200 */ --lw-border-soft: #f1f5f9; /* slate-100 */ --lw-border-tint: #dbeafe; /* brand-100 */ --lw-border-navy: #d6e0ef; /* navy-100 */ --lw-link: #2563eb; /* brand-600 */ --lw-link-strong: #1d4ed8; /* brand-700 */ --lw-accent: #2563eb; /* eyebrows, accents */ --lw-shadow: 0 1px 3px rgba(10, 16, 30, 0.06), 0 8px 24px rgba(10, 16, 30, 0.06); --lw-shadow-lg: 0 20px 50px rgba(10, 16, 30, 0.12); --lw-danger-bg: #fef2f2; --lw-danger-bd: #fecaca; --lw-success-bg: #dcfce7; color-scheme: light; } /* Dark theme values — applied automatically when the OS prefers dark, unless the visitor has explicitly chosen light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lw-page: #0a101e; --lw-surface: #141f38; --lw-surface-2: #0d1424; --lw-surface-3: #16203a; --lw-surface-4: #1e293b; --lw-tint: #12203c; --lw-tint-strong: #1c3055; --lw-band: #111c31; --lw-text: #e8eef8; --lw-text-2: #dbe4f2; --lw-text-3: #c3cfe2; --lw-text-4: #a9b6ca; --lw-text-5: #93a1b8; --lw-text-6: #8391a8; --lw-text-7: #7b8ba3; --lw-text-8: #9aa8bf; --lw-border: rgba(255, 255, 255, 0.12); --lw-border-soft: rgba(255, 255, 255, 0.07); --lw-border-tint: rgba(96, 165, 250, 0.3); --lw-border-navy: rgba(255, 255, 255, 0.14); --lw-link: #60a5fa; --lw-link-strong: #93c5fd; --lw-accent: #60a5fa; --lw-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); --lw-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55); --lw-danger-bg: #2a1416; --lw-danger-bd: rgba(248, 113, 113, 0.35); --lw-success-bg: #10301f; color-scheme: dark; } } /* Manual override — set data-theme="dark" on to force dark. */ :root[data-theme="dark"] { --lw-page: #0a101e; --lw-surface: #111a2e; --lw-surface-2: #0d1424; --lw-surface-3: #16203a; --lw-surface-4: #1e293b; --lw-tint: #12203c; --lw-tint-strong: #1c3055; --lw-band: #111c31; --lw-text: #e8eef8; --lw-text-2: #dbe4f2; --lw-text-3: #c3cfe2; --lw-text-4: #a9b6ca; --lw-text-5: #93a1b8; --lw-text-6: #8391a8; --lw-text-7: #7b8ba3; --lw-text-8: #9aa8bf; --lw-border: rgba(255, 255, 255, 0.12); --lw-border-soft: rgba(255, 255, 255, 0.07); --lw-border-tint: rgba(96, 165, 250, 0.3); --lw-border-navy: rgba(255, 255, 255, 0.14); --lw-link: #60a5fa; --lw-link-strong: #93c5fd; --lw-accent: #60a5fa; --lw-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); --lw-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55); --lw-danger-bg: #2a1416; --lw-danger-bd: rgba(248, 113, 113, 0.35); --lw-success-bg: #10301f; color-scheme: dark; } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ html body { background-color: var(--lw-page); color: var(--lw-text); } /* -------------------------------------------------------------------------- 3. BACKGROUND UTILITIES -------------------------------------------------------------------------- */ html .bg-white { background-color: var(--lw-surface); } html .bg-slate-50 { background-color: var(--lw-surface-2); } html .bg-slate-100 { background-color: var(--lw-surface-3); } html .bg-slate-200 { background-color: var(--lw-surface-4); } html .bg-slate-700, html .bg-slate-800 { background-color: var(--lw-text-3); } html .bg-brand-20, html .bg-brand-50 { background-color: var(--lw-tint); } html .bg-brand-100 { background-color: var(--lw-tint-strong); } html .bg-red-50 { background-color: var(--lw-danger-bg); } html .bg-green-100 { background-color: var(--lw-success-bg); } /* Translucent header surfaces */ html .bg-white\/90 { background-color: color-mix(in srgb, var(--lw-surface) 90%, transparent); } html .bg-white\/95 { background-color: color-mix(in srgb, var(--lw-surface) 95%, transparent); } /* Navy contrast bands: keep them distinct from the page in dark mode. */ html .bg-navy-800 { background-color: var(--lw-band); } html .bg-navy-900 { background-color: var(--lw-page); } /* -------------------------------------------------------------------------- 4. TEXT UTILITIES -------------------------------------------------------------------------- */ html .text-navy-600 { color: var(--lw-text); } html .text-navy-800 { color: var(--lw-text); } html .text-navy-700 { color: var(--lw-text-2); } html .text-slate-700, html .text-slate-800 { color: var(--lw-text-3); } html .text-slate-600 { color: var(--lw-text-4); } html .text-slate-500 { color: var(--lw-text-5); } html .text-slate-400 { color: var(--lw-text-6); } html .text-slate-300 { color: var(--lw-text-7); } html .text-slate-200 { color: var(--lw-text-8); } html .text-brand-600 { color: var(--lw-link); } html .text-brand-700 { color: var(--lw-link-strong); } /* Inside dark bands (navy sections), text should stay light in BOTH themes. */ html .bg-navy-800 .text-white, html .bg-navy-900 .text-white { color: #ffffff; } /* -------------------------------------------------------------------------- 5. BORDER UTILITIES -------------------------------------------------------------------------- */ html .border-slate-200 { border-color: var(--lw-border); } html .border-slate-100 { border-color: var(--lw-border-soft); } html .border-brand-100 { border-color: var(--lw-border-tint); } html .border-navy-100 { border-color: var(--lw-border-navy); } html .border-red-200 { border-color: var(--lw-danger-bd); } html .divide-slate-100 > * + * { border-color: var(--lw-border-soft); } html .border-brand-900 { border-color: var(--lw-border); } html .bg-brand-900 { background-color: var(--lw-surface-2); } /* -------------------------------------------------------------------------- 6. PROJECT COMPONENT CLASSES (from globals.css) -------------------------------------------------------------------------- */ html .card { background-color: var(--lw-surface); border-color: var(--lw-border-soft); box-shadow: var(--lw-shadow); } html .prose-body { color: var(--lw-text-4); } html .eyebrow { color: var(--lw-accent); } html .h-section { color: var(--lw-text); } html .shadow-card { box-shadow: var(--lw-shadow); } html .btn-ghost { background-color: var(--lw-surface); color: var(--lw-text); border-color: var(--lw-border-navy); } html .btn-secondary { background-color: var(--lw-surface-3); color: var(--lw-text); } /* Primary button keeps its brand fill in both themes (contrast is fine). */ /* -------------------------------------------------------------------------- 7. HEADER & FOOTER -------------------------------------------------------------------------- */ html .site-header, html header.sticky { background-color: color-mix(in srgb, var(--lw-surface) 88%, transparent); border-color: var(--lw-border-soft); } /* Header dropdown panel */ html header .absolute.bg-white { background-color: var(--lw-surface); } /* Footer stays dark in both themes — just soften it in dark mode. */ html footer.bg-navy-800 { background-color: var(--lw-band); } /* -------------------------------------------------------------------------- 8. FORM CONTROLS -------------------------------------------------------------------------- */ html input, html select, html textarea { background-color: var(--lw-surface); color: var(--lw-text); border-color: var(--lw-border); } html input::placeholder, html textarea::placeholder { color: var(--lw-text-6); } html select option { background-color: var(--lw-surface); color: var(--lw-text); } /* Lead-form card sits on a dark band — keep it as an elevated surface. */ html .rounded-3xl.bg-white { background-color: var(--lw-surface); } /* -------------------------------------------------------------------------- 9. TABLES -------------------------------------------------------------------------- */ html table thead tr.bg-navy-800 { background-color: var(--lw-surface-4); } html table tbody tr.bg-white { background-color: var(--lw-surface); } html table tbody tr.bg-slate-50 { background-color: var(--lw-surface-2); } html table td, html table th { border-color: var(--lw-border-soft); } /* -------------------------------------------------------------------------- 10. INLINE SVG GRAPHICS The service-page illustrations use hard-coded fills. Attribute selectors remap the neutral greys/whites without touching the brand colours. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) svg [fill="#fff"], :root:not([data-theme="light"]) svg [fill="#ffffff"] { fill: var(--lw-surface); } :root:not([data-theme="light"]) svg [fill="#f8fafc"], :root:not([data-theme="light"]) svg [fill="#f1f5f9"] { fill: var(--lw-surface-3); } :root:not([data-theme="light"]) svg [fill="#e2e8f0"], :root:not([data-theme="light"]) svg [fill="#cbd5e1"] { fill: var(--lw-surface-4); } :root:not([data-theme="light"]) svg [fill="#0e1729"] { fill: var(--lw-text); } :root:not([data-theme="light"]) svg [fill="#eff6ff"], :root:not([data-theme="light"]) svg [fill="#dbeafe"] { fill: var(--lw-tint); } :root:not([data-theme="light"]) svg [fill="#64748b"], :root:not([data-theme="light"]) svg [fill="#475569"], :root:not([data-theme="light"]) svg [fill="#94a3b8"] { fill: var(--lw-text-5); } :root:not([data-theme="light"]) svg [stroke="#e2e8f0"], :root:not([data-theme="light"]) svg [stroke="#cbd5e1"] { stroke: var(--lw-border); } } :root[data-theme="dark"] svg [fill="#fff"], :root[data-theme="dark"] svg [fill="#ffffff"] { fill: var(--lw-surface); } :root[data-theme="dark"] svg [fill="#f8fafc"], :root[data-theme="dark"] svg [fill="#f1f5f9"] { fill: var(--lw-surface-3); } :root[data-theme="dark"] svg [fill="#e2e8f0"], :root[data-theme="dark"] svg [fill="#cbd5e1"] { fill: var(--lw-surface-4); } :root[data-theme="dark"] svg [fill="#0e1729"] { fill: var(--lw-text); } :root[data-theme="dark"] svg [fill="#eff6ff"], :root[data-theme="dark"] svg [fill="#dbeafe"] { fill: var(--lw-tint); } :root[data-theme="dark"] svg [fill="#64748b"], :root[data-theme="dark"] svg [fill="#475569"], :root[data-theme="dark"] svg [fill="#94a3b8"] { fill: var(--lw-text-5); } :root[data-theme="dark"] svg [stroke="#e2e8f0"], :root[data-theme="dark"] svg [stroke="#cbd5e1"] { stroke: var(--lw-border); } /* Text inside SVGs that sits on a dark band stays white. */ html .bg-navy-800 svg text[fill="#fff"] { fill: #ffffff; } /* -------------------------------------------------------------------------- 11. HOVER / INTERACTIVE STATES (higher specificity than Tailwind's `.hover\:x:hover`) -------------------------------------------------------------------------- */ html .hover\:bg-slate-50:hover { background-color: var(--lw-surface-2); } html .hover\:bg-white:hover { background-color: var(--lw-surface); } html .hover\:text-brand-600:hover { color: var(--lw-link); } html .hover\:text-white:hover { color: #ffffff; } html .hover\:border-brand-500:hover { border-color: var(--lw-link); } html .focus\:border-brand-500:focus { border-color: var(--lw-link); } /* -------------------------------------------------------------------------- 12. NICETIES -------------------------------------------------------------------------- */ html ::selection { background-color: color-mix(in srgb, var(--lw-link) 35%, transparent); color: var(--lw-text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img:not([src$=".svg"]), :root:not([data-theme="light"]) video { filter: brightness(0.92) contrast(1.02); } } :root[data-theme="dark"] img:not([src$=".svg"]), :root[data-theme="dark"] video { filter: brightness(0.92) contrast(1.02); } /* Smooth the switch when toggling manually (not on first paint). */ html.lw-theme-ready body, html.lw-theme-ready body * { /* transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; */ } @media (prefers-reduced-motion: reduce) { html.lw-theme-ready body, html.lw-theme-ready body * { transition: none; } }