/* ═══════════════════════════════════════ OPIB OnePay – Shared Theme System Light (default) / Dark (.dark on ) ═══════════════════════════════════════ */ /* ── Theme Tokens ── */ :root { --t-bg:#faf7f2; --t-bg-cool:#f8fafc; --t-bg-cta:#1a1209; --t-bg-footer:#f5ede0; --t-bg-nav:rgba(250,247,242,0.88); --t-bg-nav2:rgba(248,245,238,0.78); --t-bg-glass:rgba(248,250,252,0.92); --t-bg-glass2:rgba(248,250,252,0.88); --t-bg-soft:rgba(26,18,9,0.04); --t-bg-howcard:rgba(255,255,255,0.92); --t-bg-howcard2:rgba(255,255,255,0.88); --t-node-bg:#fff; --t-border:rgba(26,18,9,0.08); --t-border2:rgba(26,18,9,0.15); --t-shadow:rgba(26,18,9,0.06); --t-nav-inset:rgba(255,255,255,0.6); --t-text:#2d2416; --t-heading:#1a1209; --t-muted:#8a7e6d; --t-subtle:#6b5e4d; --t-ghost:rgba(26,18,9,0.03); --t-glow1:rgba(255,122,26,0.06); --t-glow2:rgba(28,64,119,0.05); --t-hero-glow:rgba(255,122,26,0.06); --t-nav-glow:rgba(255,122,26,0.06); --t-fade:#faf7f2; --t-trust-bg:rgba(248,250,252,0.7); --t-est-bg:rgba(248,250,252,0.9); --t-est-border:rgba(26,18,9,0.1); --t-est-grad1:rgba(255,122,26,0.06); --t-est-grad2:rgba(248,250,252,0.85); --t-modal-bg1:rgba(250,247,242,0.98); --t-modal-bg2:rgba(245,237,224,0.98); --t-modal-border:rgba(26,18,9,0.1); --t-modal-shadow:rgba(26,18,9,0.12); --t-mobile-bg:rgba(250,247,242,0.98); color-scheme: light; } .dark { --t-bg:#09111f; --t-bg-cool:#09111f; --t-bg-cta:#0a1322; --t-bg-footer:#09111f; --t-bg-nav:rgba(19,28,45,0.84); --t-bg-nav2:rgba(12,19,33,0.7); --t-bg-glass:rgba(18,28,46,0.88); --t-bg-glass2:rgba(10,18,32,0.76); --t-bg-soft:rgba(255,255,255,0.05); --t-bg-howcard:rgba(11,18,32,0.15); --t-bg-howcard2:rgba(11,18,32,0.1); --t-node-bg:#09111f; --t-border:rgba(255,255,255,0.08); --t-border2:rgba(255,255,255,0.15); --t-shadow:rgba(2,7,18,0.45); --t-nav-inset:rgba(255,255,255,0.07); --t-text:#f5f7fb; --t-heading:#fff; --t-muted:#9aa7bc; --t-subtle:rgba(255,255,255,0.75); --t-ghost:rgba(255,255,255,0.03); --t-glow1:rgba(255,122,26,0.18); --t-glow2:rgba(28,64,119,0.22); --t-hero-glow:rgba(255,122,26,0.16); --t-nav-glow:rgba(255,122,26,0.22); --t-fade:#09111f; --t-trust-bg:rgba(9,17,31,0.42); --t-est-bg:rgba(8,16,31,0.9); --t-est-border:rgba(226,238,255,0.62); --t-est-grad1:rgba(255,122,26,0.1); --t-est-grad2:rgba(10,22,42,0.84); --t-modal-bg1:rgba(15,26,43,0.98); --t-modal-bg2:rgba(8,16,31,0.98); --t-modal-border:rgba(255,255,255,0.14); --t-modal-shadow:rgba(0,0,0,0.55); --t-mobile-bg:rgba(10,18,32,0.96); color-scheme: dark; } /* ── Body ── */ body { min-height: 100vh; background: radial-gradient(circle at top center, var(--t-glow1), transparent 22%), radial-gradient(circle at left 80%, var(--t-glow2), transparent 28%), var(--t-bg); color: var(--t-text); font-family: 'Manrope', sans-serif; overflow-x: hidden; } /* ── Glass / Nav ── */ .glass { background: linear-gradient(180deg, var(--t-bg-glass), var(--t-bg-glass2)); border: 1px solid var(--t-border); box-shadow: 0 20px 60px var(--t-shadow); backdrop-filter: blur(18px); } .nav-frame { position: relative; background: linear-gradient(180deg, var(--t-bg-nav), var(--t-bg-nav2)), radial-gradient(circle at center top, rgba(255, 122, 26, 0.14), transparent 48%); border: 1px solid var(--t-border); box-shadow: inset 0 1px 0 var(--t-nav-inset), 0 18px 50px var(--t-shadow); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .nav-blur { position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--t-nav-glow), transparent 20%), linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent); pointer-events: none; } /* ── Theme Toggle ── */ #theme-toggle { transition: color 0.2s, background 0.2s, border-color 0.2s; } :root:not(.dark) #theme-toggle { color: var(--t-subtle); border-color: var(--t-border); background: var(--t-bg-soft); } :root:not(.dark) #theme-toggle:hover { color: var(--t-heading); background: rgba(26,18,9,0.08); } /* ══════════════════════════════════════ Light-mode overrides (:root:not(.dark)) ══════════════════════════════════════ */ /* ── Tailwind bg-background / text-text overrides ── */ :root:not(.dark) .bg-background { background-color: var(--t-bg) !important; } :root:not(.dark) .text-text { color: var(--t-text) !important; } /* ── Navbar ── */ :root:not(.dark) header nav { color: var(--t-subtle); } :root:not(.dark) header nav a:hover { color: var(--t-heading) !important; } :root:not(.dark) header .text-white\/75 { color: var(--t-muted) !important; } :root:not(.dark) header .text-white { color: var(--t-text) !important; } :root:not(.dark) header .border-white\/10 { border-color: var(--t-border) !important; } :root:not(.dark) header .bg-white\/5 { background: var(--t-bg-soft) !important; } :root:not(.dark) header .hover\:border-white\/20:hover { border-color: rgba(26,18,9,0.18) !important; } :root:not(.dark) header .hover\:bg-white\/10:hover { background: rgba(26,18,9,0.08) !important; } :root:not(.dark) header .bg-brand, :root:not(.dark) header a.bg-brand { color: #fff !important; } :root:not(.dark) #mobile-menu { background: var(--t-mobile-bg) !important; border-color: var(--t-border) !important; } :root:not(.dark) #mobile-menu nav { color: var(--t-subtle) !important; } :root:not(.dark) #mobile-menu a.text-white { color: var(--t-text) !important; } :root:not(.dark) #mobile-menu a:hover { background: rgba(26,18,9,0.06) !important; color: var(--t-heading) !important; } :root:not(.dark) #mobile-menu .border-white\/10 { border-color: var(--t-border) !important; } :root:not(.dark) #mobile-menu .bg-white\/5 { background: var(--t-bg-soft) !important; } :root:not(.dark) #mobile-menu .bg-brand { color: #fff !important; } /* ── Glass Stats ── */ :root:not(.dark) .glass .text-white { color: var(--t-heading) !important; } :root:not(.dark) .glass .text-slate-400 { color: var(--t-muted) !important; } :root:not(.dark) .glass .border-white\/8 { border-color: var(--t-border) !important; } /* ── Hero / About Shell ── */ :root:not(.dark) .hero-shell h1.text-white, :root:not(.dark) .about-shell h1.text-white { color: var(--t-heading) !important; } :root:not(.dark) .hero-shell p.text-slate-300, :root:not(.dark) .about-shell p.text-slate-300 { color: var(--t-subtle) !important; } :root:not(.dark) .hero-shell .text-brandSoft, :root:not(.dark) .about-shell .text-brandSoft { color: #c45e10 !important; } :root:not(.dark) .hero-shell a.border-white\/12, :root:not(.dark) .hero-shell a[class*="border-white"], :root:not(.dark) .about-shell a.border-white\/12, :root:not(.dark) .about-shell a[class*="border-white"] { border-color: var(--t-border2) !important; background: var(--t-bg-soft) !important; color: var(--t-text) !important; } :root:not(.dark) .hero-shell a.border-white\/12:hover, :root:not(.dark) .hero-shell a[class*="border-white"]:hover, :root:not(.dark) .about-shell a.border-white\/12:hover, :root:not(.dark) .about-shell a[class*="border-white"]:hover { border-color: rgba(26,18,9,0.2) !important; background: rgba(26,18,9,0.08) !important; } :root:not(.dark) .hero-shell a.bg-brand, :root:not(.dark) .about-shell a.bg-brand { color: #fff !important; background: #ff7a1a !important; } /* ── Ghost decorative text ── */ :root:not(.dark) .about-ghost-word { color: var(--t-ghost) !important; } :root:not(.dark) .about-ghost-num { color: var(--t-ghost) !important; } /* ── Trust strip ── */ :root:not(.dark) .trust-divider { background: var(--t-border) !important; } :root:not(.dark) .trust-strip .text-slate-400 { color: var(--t-muted) !important; } :root:not(.dark) .about-trust-strip { background: var(--t-bg-cool) !important; border-color: var(--t-border) !important; } :root:not(.dark) .about-trust-item { color: var(--t-subtle) !important; border-color: var(--t-border2) !important; } /* ── About section ── */ :root:not(.dark) .about-metric-item { border-color: var(--t-border) !important; } :root:not(.dark) .about-metric-grid { background: var(--t-bg-cool) !important; } /* ── How-It-Works ── */ :root:not(.dark) .how-it-works-wrapper h2 { color: var(--t-heading) !important; } :root:not(.dark) .how-it-works-wrapper .text-white { color: var(--t-heading) !important; } :root:not(.dark) .how-it-works-wrapper .text-muted { color: var(--t-subtle) !important; } :root:not(.dark) .how-card h3 { color: var(--t-heading) !important; } :root:not(.dark) .how-card .text-white\/50 { color: var(--t-muted) !important; } :root:not(.dark) .how-card { box-shadow: 0 4px 24px var(--t-shadow) !important; } :root:not(.dark) .how-card::before { background: none !important; } :root:not(.dark) .node-circle::before { border-color: var(--t-border) !important; } /* ── Content sections (general) ── */ :root:not(.dark) section .text-white:not(.bg-brand .text-white) { color: var(--t-heading) !important; } :root:not(.dark) section .text-slate-300 { color: var(--t-subtle) !important; } :root:not(.dark) section .text-slate-200 { color: var(--t-subtle) !important; } :root:not(.dark) section .text-slate-400 { color: var(--t-muted) !important; } :root:not(.dark) section .border-white\/10 { border-color: var(--t-border) !important; } :root:not(.dark) section .border-white\/12 { border-color: var(--t-border) !important; } :root:not(.dark) section .bg-white\/5 { background: var(--t-bg-soft) !important; } :root:not(.dark) section .bg-white\/10 { background: rgba(26,18,9,0.06) !important; } :root:not(.dark) section a.bg-brand, :root:not(.dark) section button.bg-brand { color: #fff !important; } /* ── Main content (for simple pages without sections) ── */ :root:not(.dark) main > h1.text-white, :root:not(.dark) main h1.text-white { color: var(--t-heading) !important; } :root:not(.dark) main > h2.text-white, :root:not(.dark) main h2.text-white { color: var(--t-heading) !important; } :root:not(.dark) main p.text-slate-300 { color: var(--t-subtle) !important; } :root:not(.dark) main .text-slate-200 { color: var(--t-subtle) !important; } :root:not(.dark) main .border-white\/10 { border-color: var(--t-border) !important; } :root:not(.dark) main .bg-white\/5 { background: var(--t-bg-soft) !important; } :root:not(.dark) main a.bg-brand { color: #fff !important; } /* ── CTA strip (stays dark even in light mode) ── */ .cta-strip { background: var(--t-bg-cta); } :root:not(.dark) .cta-strip .text-white { color: #fff !important; } :root:not(.dark) .cta-strip .text-slate-300 { color: rgba(255,255,255,0.75) !important; } /* ── Footer ── */ :root:not(.dark) .site-footer { background: var(--t-bg-footer); border-top-color: var(--t-border); } :root:not(.dark) .site-footer::before { background: linear-gradient(to right, transparent 0%, rgba(255,122,26,0.2) 15%, rgba(255,122,26,0.35) 50%, rgba(255,122,26,0.2) 85%, transparent 100%) !important; } :root:not(.dark) .footer-logo-box { background: var(--t-bg-soft) !important; border-color: var(--t-border) !important; } :root:not(.dark) .footer-brand-desc { color: var(--t-subtle) !important; } :root:not(.dark) .footer-social-btn { background: var(--t-bg-soft) !important; border-color: var(--t-border) !important; color: var(--t-subtle) !important; } :root:not(.dark) .footer-ira-badge { background: var(--t-bg-soft) !important; border-color: var(--t-border) !important; } :root:not(.dark) .footer-ira-text strong { color: var(--t-heading) !important; } :root:not(.dark) .footer-ira-text span { color: var(--t-muted) !important; } :root:not(.dark) .footer-col-heading { color: var(--t-heading) !important; } :root:not(.dark) .footer-nav-list li a { color: var(--t-muted) !important; } :root:not(.dark) .footer-nav-list li a:hover { color: var(--t-heading) !important; } :root:not(.dark) .footer-nav-icon { background: var(--t-bg-soft) !important; border-color: var(--t-border) !important; } :root:not(.dark) .footer-hotline-number { color: var(--t-heading) !important; } :root:not(.dark) .footer-hotline-hours { color: var(--t-muted) !important; } :root:not(.dark) .footer-email-row { color: var(--t-muted) !important; } :root:not(.dark) .footer-email-row:hover { color: var(--t-heading) !important; } :root:not(.dark) .footer-email-icon { background: var(--t-bg-soft) !important; border-color: var(--t-border) !important; } :root:not(.dark) .footer-bottom-bar { border-top-color: var(--t-border) !important; } :root:not(.dark) .footer-bottom-bar p { color: var(--t-muted) !important; } :root:not(.dark) .footer-status-row { color: var(--t-muted) !important; } /* ── Footer CTA hero (about page) ── */ :root:not(.dark) .footer-cta-hero { border-color: var(--t-border) !important; } :root:not(.dark) .footer-cta-title { color: #fff !important; } :root:not(.dark) .footer-cta-copy { color: rgba(255,255,255,0.85) !important; } /* ── Coverage section (blog pages) ── */ :root:not(.dark) .coverage-section { background: var(--t-bg-cool) !important; } :root:not(.dark) .coverage-card { background: rgba(255,255,255,0.92) !important; border-color: var(--t-border) !important; box-shadow: 0 4px 20px var(--t-shadow) !important; } :root:not(.dark) .coverage-title { color: var(--t-heading) !important; } :root:not(.dark) .coverage-meta { color: var(--t-muted) !important; } :root:not(.dark) .coverage-list li { color: var(--t-subtle) !important; } :root:not(.dark) .coverage-tag { background: var(--t-bg-soft) !important; color: var(--t-subtle) !important; border-color: var(--t-border) !important; } /* ── Quote section (blog pages) ── */ :root:not(.dark) .quote-shell { background: rgba(255,255,255,0.92) !important; border-color: var(--t-border) !important; box-shadow: 0 8px 32px var(--t-shadow) !important; } :root:not(.dark) .quote-field input, :root:not(.dark) .quote-field select, :root:not(.dark) .quote-field textarea { background: var(--t-bg-soft) !important; border-color: var(--t-border2) !important; color: var(--t-heading) !important; } :root:not(.dark) .quote-field label { color: var(--t-subtle) !important; } /* ── FAQ section (blog pages) ── */ :root:not(.dark) .faq-item { background: rgba(255,255,255,0.92) !important; border-color: var(--t-border) !important; } :root:not(.dark) .faq-trigger { color: var(--t-heading) !important; } :root:not(.dark) .faq-panel p { color: var(--t-subtle) !important; } :root:not(.dark) .faq-icon { color: var(--t-muted) !important; } /* ── Services page ── */ :root:not(.dark) .services-tab { color: var(--t-muted) !important; border-color: var(--t-border) !important; } :root:not(.dark) .services-tab.active, :root:not(.dark) .services-tab:hover { color: var(--t-heading) !important; border-color: #ff7a1a !important; } :root:not(.dark) .featured-card { background: rgba(255,255,255,0.92) !important; border-color: var(--t-border) !important; box-shadow: 0 8px 32px var(--t-shadow) !important; } :root:not(.dark) .featured-content .text-white { color: var(--t-heading) !important; } :root:not(.dark) .featured-content .text-slate-300 { color: var(--t-subtle) !important; } /* ── Impact / Core Values cards (about page) ── */ :root:not(.dark) .impact-card, :root:not(.dark) .value-card, :root:not(.dark) .mvp-card { background: rgba(255,255,255,0.92) !important; border-color: var(--t-border) !important; box-shadow: 0 4px 20px var(--t-shadow) !important; } :root:not(.dark) .impact-card h3, :root:not(.dark) .value-card h3, :root:not(.dark) .mvp-card h3 { color: var(--t-heading) !important; } :root:not(.dark) .impact-card p, :root:not(.dark) .value-card p, :root:not(.dark) .mvp-card p { color: var(--t-subtle) !important; } /* ── Chatbot ── */ :root:not(.dark) #chatbot-messages::-webkit-scrollbar-thumb { background: var(--t-border2) !important; } :root:not(.dark) #chatbot-messages::-webkit-scrollbar-track { background: var(--t-bg-soft) !important; }