/* ============================================================ STRAPT — Dark Theme Overrides Apply by adding class="theme-dark" to . Loads AFTER css/styles.css. ============================================================ */ body.theme-dark { --bg: #0a1120; /* deeper than ink-900 for max contrast */ --paper: #0a1120; --paper-2: #111a2c; /* card / elevated surface */ --text: #e8edf6; --muted: #94a3b8; --primary: #e8edf6; background: var(--bg); color: var(--text); } /* Header */ body.theme-dark .site-header { background: rgba(10,17,32,.88); border-bottom-color: rgba(255,255,255,.06); } body.theme-dark .brand-mark { /* Logo SVG is dark-native; keep its black background and add a subtle ring so it lifts off the dark site header. */ background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.08); } body.theme-dark .brand-name { color: #fff; } body.theme-dark .brand-tag { color: var(--ink-300); } body.theme-dark .main-nav a { color: var(--ink-200); } body.theme-dark .main-nav a:hover { color: #fff; background: rgba(255,255,255,.06); } body.theme-dark .main-nav a.active { background: rgba(217,119,6,.16); color: var(--accent); } body.theme-dark .phone-link { color: #fff; } body.theme-dark .menu-toggle span { background: #fff; } /* Section backgrounds */ body.theme-dark .section, body.theme-dark .svc-section { background: var(--bg); } body.theme-dark .section-paper, body.theme-dark .svc-section.alt { background: #0d1729; } /* Trust strip */ body.theme-dark .trust-strip { background: #0d1729; border-bottom-color: rgba(255,255,255,.06); } body.theme-dark .trust-row { color: var(--ink-200); } /* Method cards */ body.theme-dark .method-card { background: var(--paper-2); border-color: rgba(255,255,255,.06); color: var(--text); } body.theme-dark .method-card:hover { border-color: rgba(217,119,6,.4); box-shadow: 0 16px 48px rgba(0,0,0,.5); } body.theme-dark .method-letter { color: #fff; } body.theme-dark .method-card h3 { color: #fff; } body.theme-dark .method-card p { color: var(--ink-200); } body.theme-dark .method-features li { color: var(--ink-200); } body.theme-dark .proof-stamp { background: rgba(217,119,6,.08); color: var(--ink-100); border: 1px solid rgba(217,119,6,.2); } /* Service cards */ body.theme-dark .service-card { background: var(--paper-2); border-color: rgba(255,255,255,.06); } body.theme-dark .service-card:hover { border-color: var(--accent); background: #14213a; box-shadow: 0 16px 48px rgba(0,0,0,.5); } body.theme-dark .service-card .ic { background: rgba(217,119,6,.12); color: var(--accent); } body.theme-dark .service-card h3 { color: #fff; } body.theme-dark .service-card p { color: var(--ink-200); } /* Comparison table */ body.theme-dark .compare { background: var(--paper-2); border-color: rgba(255,255,255,.08); } body.theme-dark .compare td { border-top-color: rgba(255,255,255,.06); color: var(--ink-100); } body.theme-dark .compare td:last-child { background: rgba(217,119,6,.08); } /* CTA form */ body.theme-dark .cta-form { background: #14213a; color: var(--text); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 80px rgba(0,0,0,.5); } body.theme-dark .cta-form h3 { color: #fff; } body.theme-dark .cta-form .sub { color: var(--ink-300); } body.theme-dark .field label { color: var(--ink-100); } body.theme-dark .field input, body.theme-dark .field select, body.theme-dark .field textarea { background: #0a1120; border-color: rgba(255,255,255,.10); color: var(--text); } body.theme-dark .field input::placeholder, body.theme-dark .field textarea::placeholder { color: #64748b; } body.theme-dark .field input:focus, body.theme-dark .field select:focus, body.theme-dark .field textarea:focus { border-color: var(--accent); background: #0d1729; } body.theme-dark .disclaimer { color: var(--ink-400); } /* Buttons that lived on light surfaces */ body.theme-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.20); } body.theme-dark .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; } body.theme-dark .btn-dark { background: var(--accent); color: var(--ink-900); box-shadow: 0 6px 20px rgba(217,119,6,.3); } body.theme-dark .btn-dark:hover { background: var(--amber-500); } /* General text on body */ body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5 { color: #fff; } body.theme-dark p { color: var(--ink-100); } body.theme-dark .lead { color: var(--ink-200); } body.theme-dark .eyebrow { color: var(--accent); } /* About hero — already dark-friendly */ body.theme-dark .about-hero { background: #0d1729; } /* Acronym row */ body.theme-dark .acronym-row { background: var(--paper-2); border-color: rgba(255,255,255,.08); } body.theme-dark .acronym-row .word { color: var(--ink-300); } /* Breakdown letters */ body.theme-dark .breakdown-letter-big { color: #fff; } body.theme-dark .breakdown-content p { color: var(--ink-200); } /* Team stats */ body.theme-dark .tstat { background: var(--paper-2); border-color: rgba(255,255,255,.06); } body.theme-dark .tstat .l { color: var(--ink-300); } /* Service feature list */ body.theme-dark .svc-features li { color: var(--ink-200); } /* Service jump nav (sticky pills) */ body.theme-dark .svc-jumps { background: rgba(10,17,32,.92); border-bottom-color: rgba(255,255,255,.06); } body.theme-dark .svc-jumps a { background: var(--paper-2); border-color: rgba(255,255,255,.08); color: var(--ink-200); } body.theme-dark .svc-jumps a:hover, body.theme-dark .svc-jumps a.is-active { background: var(--accent); color: var(--ink-900); border-color: var(--accent); } /* Threat Matrix — controls + list */ body.theme-dark .tm-controls { background: #0d1729; border-bottom-color: rgba(255,255,255,.06); } body.theme-dark .tm-pill { background: var(--paper-2); color: var(--ink-200); } body.theme-dark .tm-pill:hover { background: #1a2438; } body.theme-dark .tm-pill.is-active { background: var(--accent); color: var(--ink-900); } body.theme-dark .tm-toggle { background: var(--paper-2); } body.theme-dark .tm-toggle button { color: var(--ink-300); } body.theme-dark .tm-toggle button.is-active { background: #14213a; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); } body.theme-dark .tm-search { background: var(--paper-2); } body.theme-dark .tm-search input { color: #fff; } body.theme-dark .tm-search input::placeholder { color: var(--ink-400); } body.theme-dark .tm-stats-strip { background: rgba(255,255,255,.04); border-top-color: rgba(255,255,255,.06); border-bottom-color: rgba(255,255,255,.06); } body.theme-dark .tm-stat-cell { background: #0d1729; } body.theme-dark .tm-stat-cell .label { color: var(--ink-300); } body.theme-dark .tm-stat-cell.info .value { color: #fff; } body.theme-dark .tm-main { border-top-color: rgba(255,255,255,.06); } body.theme-dark .tm-list { background: #0d1729; border-left-color: rgba(255,255,255,.06); } body.theme-dark .tm-list-header { background: #0d1729; border-bottom-color: rgba(255,255,255,.06); color: var(--ink-300); } body.theme-dark .tm-event { border-bottom-color: rgba(255,255,255,.06); } body.theme-dark .tm-event:hover { background: #14213a; } body.theme-dark .tm-event.active { background: rgba(217,119,6,.12); } body.theme-dark .tm-event-title { color: #fff; } body.theme-dark .tm-event-meta { color: var(--ink-300); } /* Threat-matrix sources block */ body.theme-dark .tm-sources { background: #0d1729; border-top-color: rgba(255,255,255,.06); } body.theme-dark .tm-source { background: var(--paper-2); border-color: rgba(255,255,255,.06); } body.theme-dark .tm-source h4 { color: #fff; } body.theme-dark .tm-source p { color: var(--ink-200); } /* Contact info list */ body.theme-dark .contact-info-list li { border-bottom-color: rgba(255,255,255,.06); } body.theme-dark .contact-info-list .ic { background: rgba(217,119,6,.12); } body.theme-dark .contact-info-list .label { color: var(--ink-300); } body.theme-dark .contact-info-list .val { color: #fff; } body.theme-dark .contact-info-list .val a { color: #fff; } body.theme-dark .contact-info-list .val a:hover { color: var(--accent); } /* Leaflet popups within dark mode */ body.theme-dark .leaflet-container { background: #0a1120; } body.theme-dark .leaflet-popup-content-wrapper { background: #14213a; color: var(--text); } body.theme-dark .leaflet-popup-tip { background: #14213a; } body.theme-dark .leaflet-popup-content .pop-meta { color: var(--ink-300); } /* Severity / category tag on dark */ body.theme-dark .tm-event-cat.cat-crime { background: rgba(220,38,38,.18); color: #fca5a5; } body.theme-dark .tm-event-cat.cat-weather { background: rgba(37,99,235,.18); color: #93c5fd; } body.theme-dark .tm-event-cat.cat-quake { background: rgba(217,119,6,.18); color: #fcd34d; } body.theme-dark .tm-event-cat.cat-cyber { background: rgba(124,58,237,.18); color: #c4b5fd; } body.theme-dark .tm-event-cat.cat-protest { background: rgba(219,39,119,.18); color: #f9a8d4; } body.theme-dark .tm-event-cat.cat-travel { background: rgba(5,150,105,.18); color: #6ee7b7; } body.theme-dark .tm-event-cat.cat-disaster { background: rgba(234,88,12,.18); color: #fdba74; } /* Severity dot text on dark */ body.theme-dark .sev-low { color: #6ee7b7; } body.theme-dark .sev-med { color: #fcd34d; } body.theme-dark .sev-high { color: #fca5a5; } /* Footer already dark — minor refinement only */ body.theme-dark .footer { border-top: 1px solid rgba(255,255,255,.06); } /* Testimonials on dark theme */ body.theme-dark .testimonial { background: var(--paper-2); border-color: rgba(255,255,255,.08); } body.theme-dark .testimonial:hover { background: #14213a; border-color: var(--accent); } body.theme-dark .t-quote { color: var(--ink-100); } body.theme-dark .t-name { color: #fff; } body.theme-dark .t-meta { color: var(--ink-300); } body.theme-dark .t-author { border-top-color: rgba(255,255,255,.08); } body.theme-dark .testimonial-letter { background: var(--paper-2); border-color: rgba(255,255,255,.08); } body.theme-dark .testimonial-letter p { color: var(--ink-100); } body.theme-dark .testimonial-letter .t-letter-meta, body.theme-dark .testimonial-letter .t-letter-author { border-color: rgba(255,255,255,.08); } body.theme-dark .testimonial-letter .t-letter-meta .t-org { color: #fff; } body.theme-dark .testimonial-letter .t-letter-meta .t-date { color: var(--ink-300); } body.theme-dark .testimonial-letter .t-letter-author .name { color: #fff; } /* Mobile menu drop on dark */ body.theme-dark .main-nav.is-open { background: #14213a; border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 16px 48px rgba(0,0,0,.5); } /* Subtle texture: noise on the body for premium feel (CSS only) */ body.theme-dark::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35; background-image: radial-gradient(circle at 20% 0%, rgba(217,119,6,.05) 0%, transparent 40%), radial-gradient(circle at 80% 100%, rgba(14,165,233,.04) 0%, transparent 40%); } body.theme-dark > * { position: relative; z-index: 1; }