/* Night mode (dark theme). Activated by data-theme="dark" on , set by js/theme.js from the user's saved choice, falling back to the device's own dark-mode setting. Strategy: remap the shared tokens (everything built on var(--…) follows automatically), then patch the small set of places that hardcode light surfaces. Brand hues stay recognisable, navy shifts lighter so text/ headings that use var(--navy) stay readable on dark surfaces, while filled controls get an explicit dark-safe fill below. */ /* Tell the browser the page themes itself. * * Without this, Android Chrome's "Auto Dark Theme" force-darkens the site on * its own and fights the rules below, which is why dark mode looked broken on * Android specifically while behaving on desktop. Declaring color-scheme * switches that off and hands theming back to us. * * It also fixes the parts the CSS below cannot reach: native form controls, * scrollbars and the text caret are drawn by the browser, and stay light on a * dark page until the scheme is declared. */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] { --navy: #9dc0e8; /* headings/text accents, readable on dark */ --navy-light: #b6cfef; --cyan: #4ad0e8; --ink: #eef2f9; /* Not pure black: a slightly lifted, slightly blue base is easier on the eye for long reading and lets cards sit above it without hard borders. */ --paper: #0e1522; /* page background */ --light-bg: #182133; /* subtle panels */ --border: #2c3a52; /* Muted text was too dim against the panels to pass comfortably; this is the level where secondary text stays genuinely readable. */ --text-muted: #a9b6cb; --text-dark: #eef2f9; --shadow: 0 8px 24px rgba(0,0,0,0.45); --shadow-hover: 0 18px 36px rgba(0,0,0,0.6); --ds-success: #3ecf9f; --ds-success-bg: #0e2b22; --ds-warning: #e0b25c; --ds-warning-bg: #2d2210; --ds-error: #f27d97; --ds-error-bg: #331520; --ds-info: #35c3de; --ds-info-bg: #0e2830; color-scheme: dark; } [data-theme="dark"] body { background: var(--paper); color: var(--text-dark); } /* Surfaces that hardcode white. Page-level styles set background:#fff on card classes; these attribute+class selectors out-rank them. */ /* Cards sit one step above the page so they read as surfaces, not flat patches, the main reason the first dark pass looked muddy. */ [data-theme="dark"] .req-card, [data-theme="dark"] .co-card, [data-theme="dark"] .sp-card, [data-theme="dark"] .sm-card, [data-theme="dark"] .dz-card, [data-theme="dark"] .sa-card, [data-theme="dark"] .quote-card, [data-theme="dark"] .ds-card, [data-theme="dark"] .product-card, [data-theme="dark"] .testimonial-card, [data-theme="dark"] .step-card, [data-theme="dark"] .modal, [data-theme="dark"] .dl-card, [data-theme="dark"] .nav-panel, [data-theme="dark"] .role-card, [data-theme="dark"] .biz-join-card, [data-theme="dark"] .eg-card, [data-theme="dark"] .quote-path-step, [data-theme="dark"] .eg-path { background: #1b2436; border-color: var(--border); } [data-theme="dark"] .modal-overlay { background: rgba(4,8,16,0.78); } /* Filled controls keep white text, so they need a dark-safe fill, the remapped light navy would fail contrast under white text. */ [data-theme="dark"] .ds-btn-primary, [data-theme="dark"] .shop-tab.active, [data-theme="dark"] .btn-primary, [data-theme="dark"] .category-pill.active { background: #2a4a73 !important; border-color: #2a4a73 !important; color: #fff !important; } [data-theme="dark"] .ds-btn-primary:hover:not(:disabled) { background: #35598a !important; } [data-theme="dark"] .ds-btn-secondary, [data-theme="dark"] .eng-tab, [data-theme="dark"] .dz-tab, [data-theme="dark"] .sp-tab, [data-theme="dark"] .sm-pill, [data-theme="dark"] .shop-tab, [data-theme="dark"] .quote-form input, [data-theme="dark"] .quote-form textarea, [data-theme="dark"] .cap-select { background: #1b2436; color: var(--text-dark); border-color: var(--border); } [data-theme="dark"] .eng-tab.active, [data-theme="dark"] .dz-tab.active, [data-theme="dark"] .sp-tab.active, [data-theme="dark"] .sm-pill.active { border-color: var(--navy); color: var(--navy); } [data-theme="dark"] .ds-input, [data-theme="dark"] .ds-textarea, [data-theme="dark"] input.ds-input, [data-theme="dark"] select.ds-input { background: #10192a; color: var(--text-dark); border-color: var(--border); } [data-theme="dark"] .ds-input::placeholder, [data-theme="dark"] .ds-textarea::placeholder { color: #6b7891; } [data-theme="dark"] header, [data-theme="dark"] .header-nav { background: #131c2c; border-color: var(--border); } [data-theme="dark"] .header-search input { background: #0f1626; color: var(--text-dark); } [data-theme="dark"] .mobile-nav { background: #0e1626; } [data-theme="dark"] .logo-text { color: var(--navy); } [data-theme="dark"] .ds-skeleton { background: #212c42; } [data-theme="dark"] .ds-state { color: var(--text-muted); } /* Chat + tables + misc panels that assume light surfaces */ [data-theme="dark"] .chat-list, [data-theme="dark"] .chat-thread, [data-theme="dark"] .chat-bubble-them { background: #1b2436; color: var(--text-dark); } [data-theme="dark"] .chat-bubble-me { background: #2a4a73; color: #fff; } [data-theme="dark"] table th { background: #0f1626; } [data-theme="dark"] table td { border-color: var(--border); } /* The night-mode toggle. Lives in the header next to the other controls. It used to float over the page, which covered content at the bottom of long pages. */ .theme-toggle-inline { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 1.5px solid var(--border); background: transparent; font-size: 17px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .theme-toggle-inline:hover { border-color: var(--cyan); } /* Fallback for pages with no header to host it. */ .theme-toggle:not(.theme-toggle-inline) { position: fixed; bottom: 84px; right: 14px; z-index: 1200; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--light-bg); font-size: 20px; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; } @media (min-width: 768px) { .theme-toggle:not(.theme-toggle-inline) { bottom: 18px; } } /* On pages with no header to host it, the floating toggle shares the corner with the WhatsApp support button, which now sits above the bottom nav at 88px. Stack this above that one so the two never overlap. */ @media (max-width: 820px) { .theme-toggle:not(.theme-toggle-inline) { bottom: 152px; right: 16px; } }