/* Theme overrides for static landing pages. Matches the main homepage palette (src/index.css) in both light and dark. Activated via or from theme.js. */ /* ============================================================ DARK (default) — matches homepage hsl(220 20% 4%) family ============================================================ */ html.dark { --navy: #0a0d12; /* hsl(220 20% 4%) page bg */ --navy-mid: #11151c; /* hsl(220 20% 8%) card */ --navy-light: #1a1f28; /* hsl(220 20% 12%) elevated */ --teal: #0abf8a; --teal-dark: #089970; --coral: #ff4b2b; /* homepage accent */ --coral-light: #ff7a3d; --white: #f0f2f5; /* hsl(220 14% 96%) text */ --off-white: #1a1f28; --text-muted: #8a93a3; /* hsl(220 9% 65%) */ --border-dark: hsl(220 15% 18%); --shadow-lg: 0 20px 60px rgba(0,0,0,0.5); } html.dark body { background: var(--navy); color: var(--white); } html.dark nav { background: rgba(10,13,18,0.85) !important; border-bottom-color: var(--border-dark); } html.dark .dropdown-menu { background: #11151c; border-color: var(--border-dark); } html.dark footer { background: #07090d; border-top-color: var(--border-dark); } /* ============================================================ LIGHT — matches homepage clean white look ============================================================ */ html.light { --navy: #ffffff; --navy-mid: #f8f9fb; --navy-light: #eef1f5; --teal: #0abf8a; --teal-dark: #089970; --coral: #ff4b2b; --coral-light: #ff7a3d; --white: #0f1729; /* hsl(222 47% 11%) text */ --off-white: #f8f9fb; --text-muted: #6b7385; /* hsl(220 9% 46%) */ --border-dark: hsl(220 13% 91%); --shadow-lg: 0 20px 60px rgba(15,28,46,0.10); } html.light body { background: var(--navy); color: var(--white); } /* Nav (light) */ html.light nav { background: rgba(255,255,255,0.92) !important; border-bottom-color: var(--border-dark); } html.light .nav-links a { color: rgba(15,23,41,0.65); } html.light .nav-links a:hover, html.light .nav-active { color: #0f1729 !important; } html.light .dropdown-menu { background: #ffffff; border-color: var(--border-dark); box-shadow: 0 12px 40px rgba(15,28,46,0.12); } html.light .dropdown-menu a { color: rgba(15,23,41,0.75); } html.light .dropdown-menu a:hover { background: rgba(15,23,41,0.05); color: #0f1729; } /* Muted text on dark-themed elements -> dark-on-light equivalents */ html.light .hero-sub, html.light .card-subtitle, html.light .price-tagline, html.light .price-val, html.light .feature-li, html.light .note-text, html.light .step-desc, html.light .step-pill, html.light .faq-a, html.light .cta-section p, html.light .footer-banner p, html.light .inc-table th, html.light .inc-table td { color: rgba(15,23,41,0.70); } html.light .feature-desc, html.light .price-note, html.light .no { color: rgba(15,23,41,0.45) !important; } html.light .footer-banner strong { color: #0f1729; } /* Cards / surfaces */ html.light .card, html.light .price-card, html.light .footer-banner-inner, html.light .tabs, html.light .faq-section, html.light .step-pill { background: var(--navy-mid); border-color: var(--border-dark); } html.light .price-card.featured { background: linear-gradient(145deg, #ffffff, #f3f5f9); } html.light .feature-item:hover { background: rgba(15,23,41,0.04); } /* Tabs */ html.light .tab { color: rgba(15,23,41,0.55); } html.light .tab.active { background: #ffffff; color: #0f1729; box-shadow: 0 2px 8px rgba(15,28,46,0.08); } /* Table */ html.light .inc-table thead tr { background: var(--navy-light); } html.light .inc-table td { background: var(--navy-mid); border-bottom-color: var(--border-dark); } html.light .inc-table tbody tr:hover td { background: var(--navy-light); } /* FAQ */ html.light .faq-item { border-bottom-color: var(--border-dark); } /* Ghost-ish buttons */ html.light .btn-ghost, html.light .btn-comply { color: #0f1729; border-color: rgba(15,23,41,0.2); } html.light .btn-comply:hover { border-color: rgba(15,23,41,0.5); background: rgba(15,23,41,0.04); } html.light .btn-ghost:hover { background: rgba(15,23,41,0.04); } /* Footer */ html.light footer { background: #f3f4f7; border-top-color: var(--border-dark); } html.light .footer-copy, html.light .footer-links a { color: var(--text-muted); } html.light .footer-links a:hover { color: #0f1729; } /* ============================================================ LOGO (persistent SVG, swapped in by theme.js) ============================================================ */ .nav-logo-img { height: 22px; width: auto; display: block; transition: filter 0.2s; } html.dark .nav-logo-img { filter: invert(1) hue-rotate(180deg); } /* Re-correct the coral gradient after invert by keeping it warm: invert+hue-rotate flips text to white while keeping the coral diamond close to its original warm tone. */ /* ============================================================ Theme toggle button ============================================================ */ .theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: inherit; width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 12px; font-size: 16px; transition: background 0.15s, border-color 0.15s; } .theme-toggle:hover { background: rgba(255,255,255,0.06); } html.light .theme-toggle { border-color: rgba(15,23,41,0.15); } html.light .theme-toggle:hover { background: rgba(15,23,41,0.04); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } html.light .theme-toggle .icon-sun { display: inline; } html.light .theme-toggle .icon-moon { display: none; } .nav-right { display: flex; align-items: center; } /* ============================================================ Compare table (Why YooRemit) — fix invisible text in light mode ============================================================ */ html.light .compare-table thead tr { background: var(--navy-light); } html.light .compare-table th { color: rgba(15,23,41,0.65); } html.light .compare-table td { color: rgba(15,23,41,0.85); border-bottom-color: var(--border-dark); } html.light .compare-table tbody tr { background: var(--navy-mid); } html.light .compare-table tbody tr:hover { background: var(--navy-light); }