/* ────────────────────────────────────────────────────────────── PBOS — Dark mode Activated by [data-theme="dark"] on . Default uses system preference, overridable via toggle. ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; /* Re-map the CSS variables the whole site already uses */ --navy: #004aad; /* Brand navy — universal */ --navy-dark: #00358a; --navy-deep: #00205a; --white: #2d2e31; /* "White" surfaces → elevated dark surfaces */ --off-white: #2d2e31; --app-bg: #202124; /* Chrome-style dark gray page background */ --ink: #e8eaed; /* Primary text */ --ink-soft: #c4c7c5; /* Secondary text */ --muted: #9aa0a6; /* Muted text */ --rule: #3c4043; /* Borders / dividers */ --gold: #d4b660; } /* ── Body + base ───────────────────────────────────────────────── */ html[data-theme="dark"] body { background: var(--app-bg); color: var(--ink); } /* ── Hardcoded #fff / #ffffff surfaces → dark cards ────────────── */ html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#ffffff"], html[data-theme="dark"] [style*="background: #ffffff"], html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background-color: #fff"] { background: #2d2e31 !important; } html[data-theme="dark"] [style*="background:#fafaf8"], html[data-theme="dark"] [style*="background: #fafaf8"], html[data-theme="dark"] [style*="background:#f4f4f1"], html[data-theme="dark"] [style*="background: #f4f4f1"], html[data-theme="dark"] [style*="background:#f7f5ef"], html[data-theme="dark"] [style*="background: #f7f5ef"] { background: #292a2d !important; } /* ── Hardcoded dark text → invert ──────────────────────────────── */ html[data-theme="dark"] [style*="color:#000"], html[data-theme="dark"] [style*="color: #000"], html[data-theme="dark"] [style*="color:#0d0d0d"], html[data-theme="dark"] [style*="color: #0d0d0d"] { color: var(--ink) !important; } html[data-theme="dark"] [style*="color:#333"], html[data-theme="dark"] [style*="color: #333"] { color: var(--ink-soft) !important; } /* ── Cards / sections that explicitly use light bg classes ────── */ html[data-theme="dark"] .step-card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .deliverable-card, html[data-theme="dark"] .why-card, html[data-theme="dark"] .value-card, html[data-theme="dark"] .program-card, html[data-theme="dark"] .what-card, html[data-theme="dark"] .not-card, html[data-theme="dark"] .feature-card, html[data-theme="dark"] .role-card, html[data-theme="dark"] .nl-form-card, html[data-theme="dark"] .policy-section, html[data-theme="dark"] .testimonial-card, html[data-theme="dark"] .pbos-modal, html[data-theme="dark"] .nl-modal { background: #2d2e31 !important; border-color: var(--rule) !important; } /* ── Inputs ───────────────────────────────────────────────────── */ html[data-theme="dark"] .nl-input, html[data-theme="dark"] .pbos-input, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] textarea { background: #3c4043 !important; color: var(--ink) !important; border-color: var(--rule) !important; } html[data-theme="dark"] .nl-input::placeholder, html[data-theme="dark"] .pbos-input::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--muted) !important; } /* ── Nav drawer hamburger lines (now overridden in nav section below) ── */ /* ── Hero block hardcoded #fff bg + inline rgb(239/248) bgs ──── */ html[data-theme="dark"] .hero, html[data-theme="dark"] [style*="background-color: rgb(239"], html[data-theme="dark"] [style*="background-color:rgb(239"], html[data-theme="dark"] [style*="background-color: rgb(248"], html[data-theme="dark"] [style*="background-color:rgb(248"], html[data-theme="dark"] [style*="background: rgb(239"], html[data-theme="dark"] [style*="background:rgb(239"], html[data-theme="dark"] [style*="background: rgb(248"], html[data-theme="dark"] [style*="background:rgb(248"] { background-color: var(--app-bg) !important; background: var(--app-bg) !important; } /* ── Hardcoded-color text classes → invert to ink ────────────── */ html[data-theme="dark"] .hero-headline, html[data-theme="dark"] .hero-sub, html[data-theme="dark"] .hero-body, html[data-theme="dark"] .hero-eyebrow, html[data-theme="dark"] .nl-hero-headline, html[data-theme="dark"] .nl-hero-sub, html[data-theme="dark"] .section-title, html[data-theme="dark"] .cta-headline, html[data-theme="dark"] .value-name, html[data-theme="dark"] .step-title, html[data-theme="dark"] .not-card-title, html[data-theme="dark"] .deliverable-title, html[data-theme="dark"] .rhythm-title, html[data-theme="dark"] .walkaway-title, html[data-theme="dark"] .why-card-title, html[data-theme="dark"] .feature-title, html[data-theme="dark"] .role-title, html[data-theme="dark"] .what-card-title, html[data-theme="dark"] .tile-title, html[data-theme="dark"] .policy-section-title, html[data-theme="dark"] .policy-body-text, html[data-theme="dark"] .policy-subhead, html[data-theme="dark"] .policy-list, html[data-theme="dark"] .diff-cell.label, html[data-theme="dark"] .diff-cell.us, html[data-theme="dark"] .timeline-end-headline { color: var(--ink) !important; } html[data-theme="dark"] .hero-eyebrow { background: rgba(0, 74, 173, 0.18) !important; border-color: rgba(0, 74, 173, 0.4) !important; } /* ── Hardcoded-bg sections ──────────────────────────────────── */ /* ── Nav bar transparency (applies in both light + dark) ─────── */ nav, nav.nav { background: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ── Nav bar stays in LIGHT mode regardless of theme ─────────── */ html[data-theme="dark"] nav, html[data-theme="dark"] nav.nav { background: rgba(255, 255, 255, 0.5) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important; color: #0d0d0d !important; border-color: #e0ddd8 !important; } html[data-theme="dark"] nav .nav-links a, html[data-theme="dark"] nav .nav-question, html[data-theme="dark"] nav a:not(.nav-cta):not(.drawer-cta) { color: #0d0d0d !important; } html[data-theme="dark"] nav .nav-links a:hover { color: #004aad !important; } html[data-theme="dark"] .nav-hamburger span { background: #0d0d0d !important; } html[data-theme="dark"] .nav-drawer { background: #fff !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; border-top-color: rgba(0,0,0,0.06) !important; } html[data-theme="dark"] .nav-drawer a { color: #0d0d0d !important; border-color: rgba(0,0,0,0.06) !important; } html[data-theme="dark"] .nav-drawer a:hover { color: #004aad !important; } html[data-theme="dark"] .nav-drawer .drawer-cta { background: #004aad !important; color: #fff !important; } html[data-theme="dark"] .nav-cta { background: #004aad !important; color: #fff !important; } html[data-theme="dark"] .card-section, html[data-theme="dark"] .story-section, html[data-theme="dark"] .values-section, html[data-theme="dark"] .thesis-section, html[data-theme="dark"] .mission-section, html[data-theme="dark"] .timeline-section, html[data-theme="dark"] .offer-section, html[data-theme="dark"] .who-section, html[data-theme="dark"] .not-section, html[data-theme="dark"] .diff-section, html[data-theme="dark"] .roles-section, html[data-theme="dark"] .timeline-bar, html[data-theme="dark"] .main-content, html[data-theme="dark"] .stage-section:nth-child(odd) .stage-inner, html[data-theme="dark"] .stage-section:nth-child(even) .deliverable-card { background: #292a2d !important; } /* ── Diff table (services hero) ──────────────────────────────── */ html[data-theme="dark"] .diff-head, html[data-theme="dark"] .diff-cell.label, html[data-theme="dark"] .diff-cell.them, html[data-theme="dark"] .diff-head-cell.them { background: #292a2d !important; } html[data-theme="dark"] .diff-cell.us, html[data-theme="dark"] .diff-head-cell.us { background: #2d2e31 !important; border-left-color: var(--rule) !important; } /* ── Individual cards w/ hardcoded #fff bg ───────────────────── */ html[data-theme="dark"] .not-card, html[data-theme="dark"] .step-card, html[data-theme="dark"] .rhythm-card, html[data-theme="dark"] .walkaway-card, html[data-theme="dark"] .value-row, html[data-theme="dark"] .timeline-pin, html[data-theme="dark"] .deliverable-card, html[data-theme="dark"] .feature-card, html[data-theme="dark"] .role-card, html[data-theme="dark"] .what-card, html[data-theme="dark"] .stat-card { background: #2d2e31 !important; border-color: var(--rule) !important; } /* ── White-CTA pills on dark cta sections ─────────────────────── */ html[data-theme="dark"] .btn-primary-white { background: var(--ink) !important; color: var(--app-bg) !important; } html[data-theme="dark"] .btn-primary-white:hover { background: #fff !important; color: var(--app-bg) !important; } html[data-theme="dark"] .program.featured .program-cta { background: var(--ink) !important; color: var(--app-bg) !important; } /* ── Origin timeline pin ─────────────────────────────────────── */ html[data-theme="dark"] .timeline-pin { color: var(--ink-soft) !important; border-color: var(--rule) !important; } /* ── Flagship+ timeline dot ──────────────────────────────────── */ html[data-theme="dark"] [class*="timeline-dot"] { background: #2d2e31 !important; } /* ── Navy-backed sections stay navy ─────────────────────────── */ html[data-theme="dark"] .cta-section, html[data-theme="dark"] .founder-section, html[data-theme="dark"] .testimonials-section { background: var(--navy) !important; } /* ── Marquee bar stays accent-coloured ───────────────────────── */ html[data-theme="dark"] .marquee-bar { background: var(--navy); } /* ── Diff table cells (services) ─────────────────────────────── */ html[data-theme="dark"] .diff-head, html[data-theme="dark"] .diff-cell.label { background: #141414 !important; } html[data-theme="dark"] .diff-cell.them, html[data-theme="dark"] .diff-head-cell.them { background: #121212 !important; color: var(--muted) !important; } html[data-theme="dark"] .diff-cell.us, html[data-theme="dark"] .diff-head-cell.us { background: #161616 !important; border-left-color: var(--rule) !important; } /* ── Links / tiles on links.html ──────────────────────────────── */ html[data-theme="dark"] .tile, html[data-theme="dark"] .feature { background: #2d2e31 !important; border-color: var(--rule) !important; } html[data-theme="dark"] .tile:hover, html[data-theme="dark"] .feature:hover { background: #3c4043 !important; } /* ── Footer ──────────────────────────────────────────────────── */ html[data-theme="dark"] footer { background: var(--app-bg) !important; } html[data-theme="dark"] .footer-links a, html[data-theme="dark"] .footer-copy { color: var(--ink-soft) !important; } /* ── Calendly popup widget (their iframe is unstyled by us) ───── */ /* ── Calendly popup widget — kill white box in dark mode ────── */ html[data-theme="dark"] .calendly-overlay, html[data-theme="dark"] .calendly-overlay .calendly-popup, html[data-theme="dark"] .calendly-overlay .calendly-popup-content, html[data-theme="dark"] .calendly-overlay .calendly-popup-close, html[data-theme="dark"] .calendly-popup, html[data-theme="dark"] .calendly-popup-content, html[data-theme="dark"] .calendly-popup-content iframe { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } html[data-theme="dark"] .calendly-overlay .calendly-popup-close { filter: invert(1) brightness(2); } /* ── Theme toggle button (hidden — theme follows OS only) ─────── */ .pbos-theme-toggle { display: none !important; } /* ── Mission-word PBOS visibility in dark mode ────────────────── */ html[data-theme="dark"] .mission-word { color: rgba(91, 141, 239, 0.45) !important; } .pbos-theme-toggle { position: fixed; bottom: 20px; left: 20px; z-index: 9997; width: 44px; height: 44px; border-radius: 50%; background: var(--off-white, #f7f5ef); border: 1.5px solid var(--rule, #e0ddd8); color: var(--ink, #0d0d0d); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.12); transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s ease; font-family: inherit; padding: 0; } .pbos-theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.18); } .pbos-theme-toggle svg { width: 20px; height: 20px; display: block; } html[data-theme="dark"] .pbos-theme-toggle { background: #292a2d; border-color: #3c4043; color: #e8eaed; box-shadow: 0 6px 20px rgba(0,0,0,0.4); } @media (max-width: 640px) { .pbos-theme-toggle { bottom: 14px; left: 14px; width: 40px; height: 40px; } }