/** * landing-dark-theme.css — dark-theme overrides for the public landing pages * * Background: theme.js (loaded on landing pages) toggles data-theme="dark" * on . But the landing pages don't load design-system.css (where the * [data-theme="dark"] CSS variable rules live), so the toggle was inert — * operator-reported 2026-05-28: "nil change between Light and Dark Themes * on https://mysovereignty.digital/ or any other pages". * * Fix: this small targeted stylesheet flips the surface colours used on the * landing pages directly, scoped to data-theme="dark" so light mode is * unaffected. Same dark palette as design-system.css (slate-900 surface + * slate-100 primary text + teal-400 accents) for consistency with the * authenticated app. * * Keep this file landing-focused. Authenticated app CSS lives elsewhere. */ /* ─── Base surface ──────────────────────────────────────────────────────── */ [data-theme="dark"] { background: #0f172a; /* slate-900 — body */ color: #f1f5f9; /* slate-100 — primary text */ } [data-theme="dark"] body { background: #0f172a; color: #f1f5f9; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #f1f5f9; } [data-theme="dark"] p { color: #cbd5e1; /* slate-300 — secondary text */ } [data-theme="dark"] a { color: #5eead4; /* teal-300 — links on dark */ } [data-theme="dark"] a:hover { color: #99f6e4; /* teal-200 brighter on hover */ } /* ─── Hero ──────────────────────────────────────────────────────────────── */ [data-theme="dark"] .hero { background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%); color: #f1f5f9; } [data-theme="dark"] .hero-content, [data-theme="dark"] .hero-brand, [data-theme="dark"] .hero-title, [data-theme="dark"] .hero-subtitle { color: #f1f5f9; } /* ─── Coming-soon banner (top strip) ────────────────────────────────────── */ [data-theme="dark"] .coming-soon-banner { background: #134e4a; /* teal-900 — darker than hero */ color: #f1f5f9; } /* ─── Navbar / header ──────────────────────────────────────────────────── */ [data-theme="dark"] .company-hub-navbar, [data-theme="dark"] .navbar, [data-theme="dark"] .navbar-inner { background: #1e293b; /* slate-800 */ border-bottom: 1px solid #334155; } [data-theme="dark"] .company-hub-navbar a, [data-theme="dark"] .navbar a { color: #f1f5f9; } [data-theme="dark"] .company-hub-navbar a:hover, [data-theme="dark"] .navbar a:hover { color: #2dd4bf; } /* ─── Sections — generic ────────────────────────────────────────────────── */ [data-theme="dark"] section { background: #0f172a; color: #cbd5e1; } [data-theme="dark"] .whats-new, [data-theme="dark"] .our-principles, [data-theme="dark"] .value-proposition-banner, [data-theme="dark"] .anti-big-tech, [data-theme="dark"] .village-ai-intro, [data-theme="dark"] .get-in-touch, [data-theme="dark"] .support-ecosystem, [data-theme="dark"] .feature-highlights, [data-theme="dark"] .demo-villages-intro, [data-theme="dark"] .federation-card, [data-theme="dark"] .ai-features, [data-theme="dark"] .ai-description, [data-theme="dark"] .ai-guardian-teaser { background: #0f172a; color: #cbd5e1; } /* Cards / feature blocks */ [data-theme="dark"] .feature-highlight-card, [data-theme="dark"] .whats-new-card, [data-theme="dark"] .federation-card-inner, [data-theme="dark"] .founding-rate, [data-theme="dark"] .pricing-card, [data-theme="dark"] .product-card { background: #1e293b; border-color: #334155; color: #cbd5e1; } [data-theme="dark"] .feature-highlight-card h3, [data-theme="dark"] .whats-new-card h3, [data-theme="dark"] .product-card h3 { color: #f1f5f9; } /* Badges */ [data-theme="dark"] .whats-new-badge { background: #134e4a; color: #5eead4; } [data-theme="dark"] .whats-new-label { background: rgba(255, 255, 255, 0.12); color: #f1f5f9; } /* Anti-Big-Tech section text */ [data-theme="dark"] .anti-big-tech-text { color: #cbd5e1; } /* ─── Buttons ───────────────────────────────────────────────────────────── */ [data-theme="dark"] .btn-primary { background: #14b8a6; border-color: #14b8a6; color: #0f172a; } [data-theme="dark"] .btn-primary:hover { background: #2dd4bf; border-color: #2dd4bf; } [data-theme="dark"] .btn-secondary { background: transparent; border-color: #5eead4; color: #5eead4; } [data-theme="dark"] .btn-secondary:hover { background: rgba(94, 234, 212, 0.1); color: #99f6e4; border-color: #99f6e4; } [data-theme="dark"] .btn-inverted-teal { background: rgba(255, 255, 255, 0.95); color: #0f766e; } /* ─── Footer ────────────────────────────────────────────────────────────── */ [data-theme="dark"] footer, [data-theme="dark"] .federation-footer { background: #020617; /* even darker */ color: #cbd5e1; border-top: 1px solid #334155; } [data-theme="dark"] footer a { color: #5eead4; } /* ─── Containers ────────────────────────────────────────────────────────── */ [data-theme="dark"] .container { color: inherit; } /* ─── Pricing pages (pricing.html, beta-apply.html, products) ───────────── */ [data-theme="dark"] .pricing-section, [data-theme="dark"] .pricing-card, [data-theme="dark"] .pricing-tier, [data-theme="dark"] .pricing-grid, [data-theme="dark"] .pricing-comparison { background: #1e293b; color: #cbd5e1; border-color: #334155; } [data-theme="dark"] .pricing-card h1, [data-theme="dark"] .pricing-card h2, [data-theme="dark"] .pricing-card h3, [data-theme="dark"] .pricing-tier h1, [data-theme="dark"] .pricing-tier h2, [data-theme="dark"] .pricing-tier h3 { color: #f1f5f9; } [data-theme="dark"] .price { color: #5eead4; } /* Status badges (delivered / building / aspirational on pricing.html) */ [data-theme="dark"] .status-badge, [data-theme="dark"] .badge { background: rgba(255, 255, 255, 0.1); color: #f1f5f9; } [data-theme="dark"] .status-badge.delivered, [data-theme="dark"] .badge.delivered { background: rgba(34, 197, 94, 0.18); color: #86efac; } [data-theme="dark"] .status-badge.building, [data-theme="dark"] .badge.building { background: rgba(250, 204, 21, 0.18); color: #fde047; } [data-theme="dark"] .status-badge.aspirational, [data-theme="dark"] .badge.aspirational { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; } /* ─── TOC sidebar (used on pricing.html + long-form pages) ──────────────── */ [data-theme="dark"] .toc-sidebar { background: #1e293b; border-color: #334155; color: #cbd5e1; } [data-theme="dark"] .toc-header { background: #0f172a; border-bottom-color: #334155; } [data-theme="dark"] .toc-header h3, [data-theme="dark"] .toc-header h4 { color: #f1f5f9; } [data-theme="dark"] .toc-list, [data-theme="dark"] .toc-list li, [data-theme="dark"] .toc-list a { color: #cbd5e1; } [data-theme="dark"] .toc-list a:hover { color: #5eead4; background: rgba(94, 234, 212, 0.08); } [data-theme="dark"] .toc-list a.active { color: #5eead4; background: rgba(94, 234, 212, 0.15); border-left-color: #5eead4; } [data-theme="dark"] .toc-toggle { background: #334155; color: #f1f5f9; border-color: #475569; } [data-theme="dark"] .toc-toggle:hover { background: #475569; color: #f1f5f9; } [data-theme="dark"] .toc-toggle-icon { background: #f1f5f9; } /* ─── Demo-village dashboards (welcome.html, dashboard.html on demo subdomains) ─ */ [data-theme="dark"] .welcome, [data-theme="dark"] .welcome-shopfront, [data-theme="dark"] .feature-hubs-grid, [data-theme="dark"] .feature-hub-card, [data-theme="dark"] .about-village-card, [data-theme="dark"] .demo-banner { background: #1e293b; color: #cbd5e1; border-color: #334155; } [data-theme="dark"] .feature-hub-card h2, [data-theme="dark"] .feature-hub-card h3, [data-theme="dark"] .feature-hub-title { color: #f1f5f9; } [data-theme="dark"] .demo-banner { background: #0f172a; border-color: #5eead4; } /* ─── Generic page chrome catch-alls ─────────────────────────────────────── */ [data-theme="dark"] article, [data-theme="dark"] main { background: transparent; color: #cbd5e1; } [data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .info-card, [data-theme="dark"] .content-card { background: #1e293b; border-color: #334155; color: #cbd5e1; } [data-theme="dark"] .card h1, [data-theme="dark"] .card h2, [data-theme="dark"] .card h3, [data-theme="dark"] .card h4, [data-theme="dark"] .panel h1, [data-theme="dark"] .panel h2, [data-theme="dark"] .panel h3 { color: #f1f5f9; } [data-theme="dark"] blockquote { background: rgba(94, 234, 212, 0.08); border-left-color: #5eead4; color: #cbd5e1; } [data-theme="dark"] code { background: #0f172a; color: #5eead4; } [data-theme="dark"] pre { background: #020617; color: #cbd5e1; } [data-theme="dark"] table { background: #1e293b; color: #cbd5e1; } [data-theme="dark"] table th, [data-theme="dark"] table thead { background: #0f172a; color: #f1f5f9; border-bottom-color: #334155; } [data-theme="dark"] table td, [data-theme="dark"] table tr { border-color: #334155; } [data-theme="dark"] hr { border-color: #334155; } /* Generic input/textarea/select on public pages (forms on contact, beta-apply) */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="url"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: #1e293b; color: #f1f5f9; border-color: #475569; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #94a3b8; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: #5eead4; outline-color: #5eead4; } [data-theme="dark"] label { color: #cbd5e1; } /* Light-tint utility backgrounds — flip to dark counterparts (mirrors the * design-system.css pattern for app pages; replicated here for public pages * that don't load design-system). */ [data-theme="dark"] .bg-amber-50 { background-color: #451a03 !important; } [data-theme="dark"] .bg-green-50 { background-color: #052e16 !important; } [data-theme="dark"] .bg-yellow-50 { background-color: #422006 !important; } [data-theme="dark"] .bg-red-50 { background-color: #450a0a !important; } [data-theme="dark"] .bg-blue-50 { background-color: #172554 !important; } [data-theme="dark"] .bg-white { background-color: #1e293b !important; } [data-theme="dark"] .bg-gray-50 { background-color: #0f172a !important; } [data-theme="dark"] .bg-gray-100 { background-color: #1e293b !important; } [data-theme="dark"] .text-gray-900, [data-theme="dark"] .text-gray-800 { color: #f1f5f9 !important; } [data-theme="dark"] .text-gray-700, [data-theme="dark"] .text-gray-600 { color: #cbd5e1 !important; } [data-theme="dark"] .text-gray-500, [data-theme="dark"] .text-gray-400 { color: #94a3b8 !important; }