/* ============================================================ theme.css — Dark mode overrides for shared elements Uses .dark on (applied synchronously by theme.js) Dark palette: --bg: #0f172a (page background) --card-bg: #1e293b (elevated surfaces, cards, modal) --text: #e2e8f0 (primary text) --muted: #94a3b8 (secondary text) --border: #334155 (borders, dividers) --surface: #1e293b (inputs, footer bg) --hover: #273549 (hover states) ============================================================ */ /* ---------------------------------------------------------- 1. Body and base ---------------------------------------------------------- */ .dark body { background-color: #0f172a; color: #e2e8f0; } /* ---------------------------------------------------------- 2. Subpage nav header (light-bg pages: about, faq, etc.) ---------------------------------------------------------- */ .dark header { background: rgba(15, 23, 42, 0.85); border-bottom-color: #334155; } .dark header .text-\[\#020817\] { color: #e2e8f0; } .dark header .text-\[\#737373\] { color: #94a3b8; } .dark header .hover\:text-\[\#020817\]:hover { color: #e2e8f0; } /* ---------------------------------------------------------- 3. Theme toggle button (#theme-toggle) ---------------------------------------------------------- */ #theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: transparent; border: 1px solid transparent; cursor: pointer; color: #94a3b8; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } #theme-toggle:hover { background: rgba(0, 0, 0, 0.06); border-color: #e2e8f0; color: #020817; } .dark #theme-toggle { color: #94a3b8; } .dark #theme-toggle:hover { background: rgba(255, 255, 255, 0.08); border-color: #334155; color: #e2e8f0; } /* ---------------------------------------------------------- 4. Search modal — full dark override (SRCH-01) ---------------------------------------------------------- */ .dark #cmdk-dialog { background: #1e293b; border-color: #334155; } .dark #cmdk-input-wrap { border-bottom-color: #334155; } .dark #cmdk-input { color: #e2e8f0; } .dark #cmdk-input::placeholder { color: #475569; } .dark #cmdk-esc { background: #0f172a; border-color: #334155; color: #64748b; } .dark #cmdk-list::-webkit-scrollbar-thumb { background: #334155; } .dark .cmdk-item.cmdk-selected { background: #273549; } .dark .cmdk-item:active { background: #334155; } .dark .cmdk-item-icon { background: #0f172a; border-color: #334155; color: #94a3b8; } .dark .cmdk-selected .cmdk-item-icon { background: rgba(20, 83, 244, 0.1); border-color: rgba(20, 83, 244, 0.3); color: #6b8df5; } .dark .cmdk-item-title { color: #e2e8f0; } .dark .cmdk-item-desc { color: #94a3b8; } .dark .cmdk-item-arrow { color: #475569; } .dark #cmdk-footer { background: #162032; border-top-color: #334155; } .dark .cmdk-footer-group kbd { background: #1e293b; border-color: #334155; color: #64748b; } .dark .cmdk-footer-group span { color: #64748b; } .dark #cmdk-empty { color: #475569; } /* ---------------------------------------------------------- 5. .cmdk-trigger on light-bg pages (dark mode) ---------------------------------------------------------- */ .dark .cmdk-trigger { background: rgba(255, 255, 255, 0.06); border-color: #334155; color: #94a3b8; } .dark .cmdk-trigger:hover { background: rgba(255, 255, 255, 0.1); border-color: #475569; color: #cbd5e1; } .dark .cmdk-trigger kbd { background: rgba(255, 255, 255, 0.05); border-color: #334155; color: #64748b; } /* ---------------------------------------------------------- 6. Index page — Phase 2 dark overrides ---------------------------------------------------------- */ /* Feature section backgrounds (alternate white / #f6f5f4) */ .dark section.bg-white { background-color: #0f172a !important; } .dark .bg-\[\#f6f5f4\] { background-color: #111827 !important; } /* Feature section headings and body text */ .dark .text-gray-900 { color: #e2e8f0 !important; } .dark .text-gray-500 { color: #94a3b8 !important; } /* .scene-body inline style override */ .dark .scene-body { color: #94a3b8; } /* Bento feature card dark override (IDX-09) */ .dark .feature-card { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 20px 40px -15px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04) !important; } /* How It Works (IDX-03) */ .dark #how-it-works h2.text-\[\#0d0d0d\] { color: #e2e8f0; } .dark #how-it-works .eyebrow { background-color: #1e293b; color: #94a3b8; } .dark #how-it-works .bg-white { background-color: #1e293b !important; border-color: #334155 !important; } .dark #how-it-works h3.text-\[\#0d0d0d\] { color: #e2e8f0; } .dark #how-it-works .text-\[\#615d59\] { color: #94a3b8; } /* Step connector line */ .dark .step-connector::after { background: linear-gradient(to right, #334155, transparent); } /* FAQ section (IDX-04) */ .dark section .text-\[\#0d0d0d\] { color: #e2e8f0; } .dark section .text-\[\#615d59\] { color: #94a3b8; } /* FAQ white card */ .dark .bg-white.rounded-3xl { background-color: #1e293b !important; border-color: #334155 !important; } /* FAQ blue-tinted card */ .dark .bg-\[\#1e3a8a\]\/5 { background-color: rgba(30,58,138,0.15) !important; } .dark .border-\[\#1453f4\]\/10 { border-color: rgba(20,83,244,0.2) !important; } /* FAQ icon wrapper */ .dark .bg-\[\#f1f5f9\] { background-color: #1e293b !important; } /* FAQ eyebrow */ .dark .bg-\[\#1e3a8a\]\/5.text-\[\#0d0d0d\] { background-color: rgba(30,58,138,0.15) !important; color: #e2e8f0; } /* FAQ 1 dark card bottom border */ .dark .border-\[\#171717\] { border-color: #1e293b; } /* Pricing section (IDX-05) */ .dark #pricing .text-\[\#615d59\] { color: #94a3b8; } /* Waitlist CTA (IDX-10) */ .dark #waitlist h2.text-\[\#0d0d0d\] { color: #e2e8f0; } .dark #waitlist p.text-\[\#615d59\] { color: #94a3b8; } /* Iframe container */ .dark #waitlist .bg-white { background-color: #1e293b !important; border-color: #334155 !important; } /* Footer (IDX-06) */ .dark footer { border-top-color: #334155; } .dark footer .text-\[\#0d0d0d\] { color: #e2e8f0; } .dark footer .text-\[\#615d59\] { color: #94a3b8; } .dark footer a.hover\:text-\[\#0d0d0d\]:hover { color: #e2e8f0; } .dark footer .border-t { border-top-color: #334155; } /* Footer bottom separator dot */ .dark footer .text-\[\#e2e8f0\] { color: #334155; } /* ---------------------------------------------------------- 7. Phone mockup audit (IDX-08) All phone screens use hardcoded dark palette — no overrides needed. Hero phones (#hero-phone-strip, 5 phones): style="background:#0f172a" (phones 1, 3, 4, 5) style="background:#0a0a0a" (phone 2 — camera viewfinder) JS-generated bubbles: rgba(255,255,255,0.08), rgba(59,130,246,0.3) — fine on dark hp-flash (phone 2): bg-white div at opacity:0, briefly flashes to 0.7 then fades — intentional camera-flash effect, acceptable in dark mode Scene 1 (scene-6pm): phone-screen bg-[#020817] — dark ✓ Scene 2 (scene-proof): phone-screen bg-[#020817] — dark ✓ Scene 3 "After Solis" (right phone): phone-screen bg-[#020817] — dark ✓ Scene 3 "Before Solis" (left phone): phone-screen bg-[#f8f9fa] — INTENTIONALLY LIGHT — shows the problem state the product solves. DO NOT override. Dark frame + light screen reinforces the before/after contrast. Scene 4 (scene-leads): phone-screen bg-[#020817] — dark ✓ .phone-frame { background:#020817; border:3px solid #2a2a2e } — already dark .phone-frame-sm { background:#020817; border:2px solid #2a2a2e } — already dark No CSS changes required for phone mockup dark mode. ---------------------------------------------------------- */ /* ---------------------------------------------------------- 8. Subpage-specific overrides (Phase 3 — SUB-01 through SUB-08) AUDIT NOTES — what Phase 2 already covers on subpages: .dark section.bg-white → #0f172a (about body, faq body, careers culture/roles, contact sections) .dark .bg-[#f1f5f9] → #1e293b (values-section bg, FAQ icon wrappers, security stats bg) .dark .bg-white.rounded-3xl → #1e293b (careers values list card, contact form card) .dark .feature-card → #1e293b (careers culture cards — they have .feature-card class) .dark .bg-[#1e3a8a]\/5 and .dark .bg-\[\#f1f5f9\] → FAQ section eyebrows/icons .dark footer, .dark header → nav + footer on all pages WHAT THIS SECTION ADDS: - .bg-white.rounded-2xl cards (FAQ accordions, about principle cards, about belief-grid cards, leadership section border, legal page link cards — Phase 2 only covered .rounded-3xl) - Form inputs on contact.html (bg, text, border, placeholder, focus-ring) - text-[#404040] body copy color on contact page - TOC sidebar link styles on privacy/terms pages - border-[#f1f5f9] hairline dividers (contact info rows, legal hero separator, careers values dividers) - border-[#e2e8f0] on sections that have border-t / border-b (leadership border-t, roles border-t) - Eyebrow text-[#020817] on dark hero sections (about hero eyebrow) - Security stats bar inner chip bg-white cards - .dark-grid pseudo-element on security.html (already bg-[#020817] so just needs grid lines darkened) ---------------------------------------------------------- */ /* --- 8a. White rounded-2xl cards (FAQ accordions, about cards, belief grid, legal link cards) --- Phase 2 covered .rounded-3xl only. These are .rounded-2xl variants. */ .dark .bg-white.rounded-2xl { background-color: #1e293b !important; border-color: #334155 !important; } /* --- 8b. Body text color #020817 inside white sections --- Generic sections already handled by .dark section .text-[#0d0d0d]. These pages use text-[#020817] directly on headings inside white sections. */ .dark .text-\[\#020817\] { color: #e2e8f0; } /* --- 8c. Contact page: text-[#404040] medium-weight body text --- Used for: contact info labels, form label text, prose emphasis in legal pages. */ .dark .text-\[\#404040\] { color: #cbd5e1; } /* --- 8d. Form inputs on contact.html --- Selectors: .form-input, input[type=text/email], select, textarea with bg-[#f1f5f9] Note: .dark .bg-[#f1f5f9] already sets background to #1e293b globally. These rules add text color, border, placeholder, and focus state on top. */ .dark .form-input { color: #e2e8f0 !important; border-color: #334155 !important; background-color: #1e293b !important; } .dark .form-input::placeholder { color: #475569; } .dark .form-input:focus { border-color: #1453f4 !important; box-shadow: 0 0 0 3px rgba(20, 83, 244, 0.2); } /* Select element option text (system-rendered) */ .dark select.form-input option { background-color: #1e293b; color: #e2e8f0; } /* --- 8e. Contact page info-row border dividers (border-b border-[#f1f5f9]) --- The contact page "Ways to reach us" list uses border-b border-[#f1f5f9] hairlines. #f1f5f9 is near-white — will look like a white line on dark bg. */ .dark .border-\[\#f1f5f9\] { border-color: #1e293b !important; } /* --- 8f. Legal/privacy hero separator (border-b border-[#f1f5f9]) --- Privacy and terms page heros have class="... border-b border-[#f1f5f9]". Covered by 8e above (same selector). No extra rule needed. */ /* --- 8g. TOC sidebar on privacy.html and terms.html --- .toc-link is defined in per-page