/* ============================================================ Dark Mode Overrides the design tokens in variables.css when data-theme="dark" is set on . ============================================================ */ [data-theme="dark"] { /* ── Neutrals ── */ --color-white: #0f172a; --color-charcoal: #f1f5f9; --color-text: #cbd5e1; --color-text-secondary: #94a3b8; --color-text-tertiary: #64748b; --color-border: #334155; --color-border-light: #1e293b; --color-bg-off-white: #1e293b; --color-bg-light: #334155; /* ── Brand (brighter for dark backgrounds) ── */ --color-primary: #2dd4a8; --color-primary-dark: #34d9ae; --color-primary-darker: #5eead4; --color-primary-light: rgba(45, 212, 168, 0.1); --color-primary-pale: rgba(45, 212, 168, 0.05); --color-primary-rgb: 45, 212, 168; /* ── Accent / Semantic ── */ --color-coral: #f87171; --color-amber: #fbbf24; --color-blue: #60a5fa; --color-coral-light: rgba(248, 113, 113, 0.1); --color-amber-light: rgba(251, 191, 36, 0.1); --color-blue-light: rgba(96, 165, 250, 0.1); /* ── Shadows (deeper for dark backgrounds) ── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.3); --shadow-primary: 0 4px 14px rgba(45, 212, 168, 0.3); color-scheme: dark; } /* ── Nav glassmorphism override ── */ [data-theme="dark"] .nav { background: rgba(15, 23, 42, 0.92); border-bottom-color: var(--color-border); } [data-theme="dark"] .nav.scrolled { background: rgba(15, 23, 42, 0.97); } /* ── Sticky CTA override ── */ [data-theme="dark"] .sticky-cta { background: rgba(15, 23, 42, 0.95); border-top-color: var(--color-border); } /* ── Footer stays dark in both modes ── */ [data-theme="dark"] .footer { background: #0c1222; color: rgba(255, 255, 255, 0.7); } [data-theme="dark"] .footer__logo, [data-theme="dark"] .footer__column-title { color: #ffffff; } [data-theme="dark"] .footer__social-link:hover { color: #ffffff; } /* ── Section overrides ── */ [data-theme="dark"] .section--alt { background: var(--color-bg-off-white); } /* Dark/teal sections already have light text — keep them as-is */ [data-theme="dark"] .section--dark, [data-theme="dark"] .section--teal { color: #ffffff; } /* ── Hero gradient ── */ [data-theme="dark"] .hero { background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); } /* ── Dropdown menus ── */ [data-theme="dark"] .nav__dropdown-menu { background: #1e293b; border-color: var(--color-border); } [data-theme="dark"] .nav__dropdown-item:hover { background: rgba(45, 212, 168, 0.08); } /* ── Cards ── */ [data-theme="dark"] .card { border-color: var(--color-border); } /* ── Screenshot frames ── */ [data-theme="dark"] .screenshot { border-color: var(--color-border); } /* ── Format icons ── */ [data-theme="dark"] .format-icon { border-color: var(--color-border); } /* ── Inputs ── */ [data-theme="dark"] .input, [data-theme="dark"] .textarea { background: #1e293b; border-color: var(--color-border); color: var(--color-text); } /* ── Pricing toggle ── */ [data-theme="dark"] .pricing-toggle__slider { background: #334155; } /* ── FAQ ── */ [data-theme="dark"] .faq-item { border-color: var(--color-border); } /* ── Security page (inline styles use hardcoded colors) ── */ [data-theme="dark"] .sec-card { background: #1e293b; border-color: #334155; } [data-theme="dark"] .sec-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .sec-card__icon { background: rgba(45, 212, 168, 0.1); color: #2dd4a8; } [data-theme="dark"] .sec-card__title { color: #f1f5f9; } [data-theme="dark"] .sec-card__text { color: #94a3b8; } [data-theme="dark"] .compliance-item { border-bottom-color: #334155; } [data-theme="dark"] .compliance-item i { color: #2dd4a8; } [data-theme="dark"] .compliance-item__title { color: #f1f5f9; } [data-theme="dark"] .compliance-item__text { color: #94a3b8; } [data-theme="dark"] .trust-badge { background: #1e293b; border-color: #334155; } [data-theme="dark"] .trust-badge__icon { background: rgba(45, 212, 168, 0.1); color: #2dd4a8; } [data-theme="dark"] .trust-badge__text { color: #f1f5f9; } [data-theme="dark"] .flow-step { background: #1e293b; border-color: #334155; } [data-theme="dark"] .flow-step__number { background: rgba(45, 212, 168, 0.1); color: #2dd4a8; } [data-theme="dark"] .flow-step__title { color: #f1f5f9; } [data-theme="dark"] .flow-step__text { color: #94a3b8; } [data-theme="dark"] .flow-steps::before { border-top-color: #334155; } [data-theme="dark"] .sec-faq-item { border-bottom-color: #334155; } [data-theme="dark"] .sec-faq-item__q { color: #f1f5f9; } [data-theme="dark"] .sec-faq-item__icon { color: #94a3b8; } [data-theme="dark"] .sec-faq-item__a-inner { color: #94a3b8; } /* ── ROI Calculator page ── */ [data-theme="dark"] .calc-input { background: #1e293b; border-color: #334155; } [data-theme="dark"] .calc-input__range { background: #334155; } [data-theme="dark"] .calc-results { background: #0c1222; } /* ── Primary buttons: dark text on bright teal ── */ [data-theme="dark"] .btn--primary { color: #0f172a; } /* ── Active nav link: ensure readable ── */ [data-theme="dark"] .nav__link.active { color: var(--color-primary); } /* ── Badge on dark: ensure readable ── */ [data-theme="dark"] .badge--primary { background: rgba(45, 212, 168, 0.15); color: var(--color-primary); } /* ── Pricing toggle save text ── */ [data-theme="dark"] .pricing-toggle__save { color: var(--color-primary); } /* ============================================================ Theme Toggle Button ============================================================ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); font-size: 1rem; } .theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-pale); } /* Light mode: show moon, hide sun */ .theme-toggle__icon--dark { display: none; } /* Dark mode: show sun, hide moon */ [data-theme="dark"] .theme-toggle__icon--light { display: none; } [data-theme="dark"] .theme-toggle__icon--dark { display: inline; } /* ── Skip link (visible on focus) ── */ .skip-link:focus { position: fixed; top: var(--space-4); left: var(--space-4); z-index: 9999; padding: var(--space-2) var(--space-4); background: var(--color-primary); color: #ffffff; border-radius: var(--radius-md); text-decoration: none; font-weight: var(--weight-semibold); clip: auto; width: auto; height: auto; overflow: visible; }