/* * dark.css — Zeretis shared dark mode * Referenced by all pages. Applied via data-theme="dark" on . * Theme is set by an inline script at top of before paint. */ /* ── Core variable overrides ─────────────────────────────────────────────── */ :root[data-theme="dark"] { /* Backgrounds */ --white: #1e1b2e; --grey-50: #1a1730; --grey-100: #252236; --grey-200: #2e2a42; --grey-300: #3a3653; --grey-400: #6b6785; --grey-500: #857fa0; --grey-600: #9d99b0; --grey-700: #b8b4cc; --grey-800: #d4d0e8; --grey-900: #e8e4f0; /* Text */ --ink: #e8e4f0; /* Borders */ --border-neutral: #2e2a42; --border: #3a3653; /* Violet accents — keep vivid */ --violet: #7c3aed; --violet-light: #8b5cf6; --violet-pale: #2a1f4a; --violet-glow: #2a1f4a; /* Solver/chat specific */ --sidebar-bg: #13111f; --chat-bg: #1a1730; /* Shadows */ --shadow-sm: 0 1px 4px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 8px 32px rgba(0,0,0,.4); --shadow-xl: 0 16px 64px rgba(0,0,0,.5); } /* ── Global base ─────────────────────────────────────────────────────────── */ :root[data-theme="dark"] body { background: var(--grey-50); color: var(--ink); } /* ── Header ─────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] .app-header, :root[data-theme="dark"] header.app-header { background: #13111f; border-color: #2e2a42; } :root[data-theme="dark"] .site-wordmark, :root[data-theme="dark"] .header-logo { color: #e8e4f0; } /* Profile button */ :root[data-theme="dark"] .profile-btn { background: #252236; border-color: #3a3653; color: #e8e4f0; } :root[data-theme="dark"] .profile-label { color: #e8e4f0; } :root[data-theme="dark"] .profile-avatar { background: #3a3653; color: #9d99b0; } /* Profile dropdown */ :root[data-theme="dark"] .profile-dropdown { background: #1e1b2e; border-color: #2e2a42; box-shadow: 0 8px 32px rgba(0,0,0,.4); } :root[data-theme="dark"] .profile-dropdown-header { border-color: #2e2a42; } :root[data-theme="dark"] .profile-dropdown-name { color: #e8e4f0; } :root[data-theme="dark"] .profile-dropdown-email { color: #9d99b0; } :root[data-theme="dark"] .profile-dropdown-divider { background: #2e2a42; } :root[data-theme="dark"] .profile-dropdown-item { color: #e8e4f0; } :root[data-theme="dark"] .profile-dropdown-item:hover { background: #252236; } :root[data-theme="dark"] .profile-dropdown-item.danger { color: #f87171; } :root[data-theme="dark"] .theme-pill { background: #2e2a42; } /* Lang selector */ :root[data-theme="dark"] .lang-btn { background: #252236; border-color: #3a3653; color: #e8e4f0; } :root[data-theme="dark"] .lang-dropdown { background: #1e1b2e; border-color: #2e2a42; box-shadow: 0 8px 24px rgba(0,0,0,.4); } :root[data-theme="dark"] .lang-option { color: #e8e4f0; } :root[data-theme="dark"] .lang-option:hover { background: #252236; } /* Nav menu (mobile) */ :root[data-theme="dark"] .nav-menu { background: #1e1b2e; border-color: #2e2a42; } :root[data-theme="dark"] .nav-menu a { color: #e8e4f0; } :root[data-theme="dark"] .nav-menu a:hover { background: #252236; } :root[data-theme="dark"] .header-menu-btn { color: #e8e4f0; } /* ── Page backgrounds ────────────────────────────────────────────────────── */ :root[data-theme="dark"] .page-hero, :root[data-theme="dark"] .hero-section, :root[data-theme="dark"] section.hero { background: #13111f; } :root[data-theme="dark"] .section-alt, :root[data-theme="dark"] .bg-alt { background: #1a1730; } :root[data-theme="dark"] main, :root[data-theme="dark"] .page-main, :root[data-theme="dark"] .content-wrap { background: #1a1730; } /* ── Typography ──────────────────────────────────────────────────────────── */ :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4 { color: #e8e4f0; } :root[data-theme="dark"] p { color: #c4bfd6; } :root[data-theme="dark"] a { color: #a78bfa; } :root[data-theme="dark"] a:hover { color: #c4b5fd; } /* Keep violet CTAs vivid */ :root[data-theme="dark"] .btn-violet, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn.btn-primary { background: #7c3aed; color: white; } :root[data-theme="dark"] .btn-outline, :root[data-theme="dark"] .btn.btn-outline { background: transparent; border-color: #3a3653; color: #e8e4f0; } :root[data-theme="dark"] .btn-outline:hover { background: #252236; } :root[data-theme="dark"] .btn-white, :root[data-theme="dark"] .btn.btn-white { background: #252236; color: #e8e4f0; } /* ── Cards ───────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .feature-card, :root[data-theme="dark"] .pricing-card, :root[data-theme="dark"] .plan-card, :root[data-theme="dark"] .subject-card, :root[data-theme="dark"] .blog-card, :root[data-theme="dark"] .faq-item, :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .testimonial-card { background: #252236; border-color: #2e2a42; color: #c4bfd6; } :root[data-theme="dark"] .card h3, :root[data-theme="dark"] .feature-card h3, :root[data-theme="dark"] .pricing-card h3, :root[data-theme="dark"] .plan-card h3 { color: #e8e4f0; } /* ── Forms & inputs ──────────────────────────────────────────────────────── */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: #252236; border-color: #3a3653; color: #e8e4f0; } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #6b6785; } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus { border-color: #7c3aed; outline: none; } :root[data-theme="dark"] label { color: #9d99b0; } /* ── Tables ──────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] table { border-color: #2e2a42; } :root[data-theme="dark"] th { background: #252236; color: #e8e4f0; border-color: #2e2a42; } :root[data-theme="dark"] td { border-color: #2e2a42; color: #c4bfd6; } :root[data-theme="dark"] tr:hover td { background: #252236; } /* ── Solver-specific ─────────────────────────────────────────────────────── */ :root[data-theme="dark"] .sidebar { background: var(--sidebar-bg); border-color: #2e2a42; } :root[data-theme="dark"] .chat-item { color: #c4bfd6; } :root[data-theme="dark"] .chat-item:hover { background: #252236; } :root[data-theme="dark"] .chat-item.active { background: #2a1f4a; color: #e8e4f0; } :root[data-theme="dark"] .chat-menu-dropdown { background: #1e1b2e; border-color: #2e2a42; } :root[data-theme="dark"] .chat-rename-input { background: #1a1730; color: #e8e4f0; border-color: #3a3653; } :root[data-theme="dark"] .new-chat-btn { background: #2a1f4a; color: #c4b5fd; border-color: #3a3653; } :root[data-theme="dark"] .new-chat-btn:hover { background: #3a2a6a; } :root[data-theme="dark"] .account-section:hover { background: #252236; } :root[data-theme="dark"] .input-container { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] #user-input { color: #e8e4f0; } :root[data-theme="dark"] #user-input::placeholder { color: #6b6785; } :root[data-theme="dark"] .input-hint { color: #6b6785; } :root[data-theme="dark"] .char-count { color: #6b6785; } :root[data-theme="dark"] .ai-response-container { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .ai-response-body p { color: #c4bfd6; } :root[data-theme="dark"] .math-block, :root[data-theme="dark"] .step-math { background: #1a1730; border-color: #3a3653; color: #e8e4f0; } :root[data-theme="dark"] .math-block .katex, :root[data-theme="dark"] .step-math .katex, :root[data-theme="dark"] .math-block .katex-display, :root[data-theme="dark"] .step-math .katex-display { color: #e8e4f0; } :root[data-theme="dark"] .solution-section:nth-child(2) .math-block { background: #2a1f4a; border-color: #4c1d95; } :root[data-theme="dark"] .solution-label { color: #6b6785; } :root[data-theme="dark"] .solution-section { border-color: #2e2a42; } :root[data-theme="dark"] .steps-label-row { border-color: #2e2a42; } :root[data-theme="dark"] .step-item { border-color: #2e2a42; } :root[data-theme="dark"] .step-item:hover { background: #252236; } :root[data-theme="dark"] .step-num { background: #2e2a42; color: #9d99b0; border-color: #3a3653; } :root[data-theme="dark"] .step-desc { color: #c4bfd6; } :root[data-theme="dark"] .copy-bar { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .copy-btn, :root[data-theme="dark"] .math-copy-btn { background: #252236; border-color: #3a3653; color: #9d99b0; } :root[data-theme="dark"] .limit-banner { background: linear-gradient(135deg, #5b21b6, #4c1d95); } :root[data-theme="dark"] .limit-banner-btn { color: #1a1730; } :root[data-theme="dark"] .pricing-container, :root[data-theme="dark"] .pricing-bar { background: #1e1b2e; border-color: #2e2a42; } :root[data-theme="dark"] .tier { background: #252236; border-color: #2e2a42; color: #e8e4f0; } :root[data-theme="dark"] .tier h3 { color: #e8e4f0; } :root[data-theme="dark"] .tier p { color: #9d99b0; } /* Settings modal */ :root[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.7); } :root[data-theme="dark"] .modal-dashboard { background: #1e1b2e; border-color: #2e2a42; position: relative; } :root[data-theme="dark"] .modal-sidebar { background: #13111f; border-color: #2e2a42; } :root[data-theme="dark"] .modal-main { background: #1e1b2e; } :root[data-theme="dark"] .nav-item { color: #9d99b0; } :root[data-theme="dark"] .nav-item.active, :root[data-theme="dark"] .nav-item:hover { background: #252236; color: #e8e4f0; } :root[data-theme="dark"] .setting-row label { color: #9d99b0; } :root[data-theme="dark"] #auth-logged-in > div:first-child { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] #auth-logged-in a { background: #252236; border-color: #2e2a42; color: #e8e4f0; } :root[data-theme="dark"] #auth-logged-in a:hover { background: #2e2a42 !important; } /* Auth gate */ :root[data-theme="dark"] #auth-gate-card { background: #1e1b2e; box-shadow: 0 32px 96px rgba(0,0,0,.6); } :root[data-theme="dark"] .gate-google-btn { background: #252236; border-color: #3a3653; color: #e8e4f0; } :root[data-theme="dark"] .gate-google-btn:hover { background: #2e2a42; } /* ── Marketing pages ─────────────────────────────────────────────────────── */ :root[data-theme="dark"] .faq-item { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .faq-question { color: #e8e4f0; } :root[data-theme="dark"] .faq-answer { color: #9d99b0; } :root[data-theme="dark"] .faq-toggle { color: #9d99b0; } :root[data-theme="dark"] .plan-card { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .plan-card.featured { border-color: #7c3aed; } :root[data-theme="dark"] .plan-name { color: #e8e4f0; } :root[data-theme="dark"] .plan-price { color: #e8e4f0; } :root[data-theme="dark"] .plan-btn { border-color: #3a3653; color: #e8e4f0; } :root[data-theme="dark"] .plan-btn:hover { background: #3a3653; } :root[data-theme="dark"] .plan-btn.primary { background: #7c3aed; border-color: #7c3aed; color: white; } :root[data-theme="dark"] .subject-chip, :root[data-theme="dark"] .subject-card { background: #252236; border-color: #2e2a42; color: #e8e4f0; } :root[data-theme="dark"] .subject-card:hover { border-color: #7c3aed; background: #2a1f4a; } :root[data-theme="dark"] .blog-card { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .blog-card h3 { color: #e8e4f0; } :root[data-theme="dark"] .blog-card p { color: #9d99b0; } :root[data-theme="dark"] .testimonial-card { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .testimonial-text { color: #c4bfd6; } :root[data-theme="dark"] .testimonial-author { color: #9d99b0; } :root[data-theme="dark"] .stat-card { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .stat-number { color: #e8e4f0; } :root[data-theme="dark"] .stat-label { color: #9d99b0; } :root[data-theme="dark"] .cta-section, :root[data-theme="dark"] .cta-banner { background: linear-gradient(135deg, #2a1f4a, #1e1b2e); border-color: #3a3653; } :root[data-theme="dark"] .cta-section h2 { color: #e8e4f0; } :root[data-theme="dark"] .cta-section p { color: #9d99b0; } :root[data-theme="dark"] footer, :root[data-theme="dark"] .site-footer { background: #13111f; border-color: #2e2a42; color: #9d99b0; } :root[data-theme="dark"] .footer-link { color: #9d99b0; } :root[data-theme="dark"] .footer-link:hover { color: #e8e4f0; } /* ── Manage page ─────────────────────────────────────────────────────────── */ :root[data-theme="dark"] .manage-card, :root[data-theme="dark"] .account-card, :root[data-theme="dark"] .billing-card { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .plan-badge { background: #2a1f4a; color: #a78bfa; } :root[data-theme="dark"] .plan-badge.free { background: #252236; color: #9d99b0; } :root[data-theme="dark"] .usage-bar-track { background: #2e2a42; } :root[data-theme="dark"] .danger-zone { border-color: #3a3653; } :root[data-theme="dark"] .danger-row { border-color: #2e2a42; } :root[data-theme="dark"] .modal-box { background: #1e1b2e; border-color: #2e2a42; color: #e8e4f0; } :root[data-theme="dark"] .modal-box h3 { color: #e8e4f0; } :root[data-theme="dark"] .modal-box p { color: #9d99b0; } :root[data-theme="dark"] #delete-confirm-input { background: #252236; border-color: #3a3653; color: #e8e4f0; } /* ── Subscriptions page ──────────────────────────────────────────────────── */ :root[data-theme="dark"] .pricing-hero { background: #13111f; } :root[data-theme="dark"] .pricing-grid { background: transparent; } /* ── Scrollbars ──────────────────────────────────────────────────────────── */ :root[data-theme="dark"] ::-webkit-scrollbar { width: 6px; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1730; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3653; border-radius: 3px; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #6b6785; } /* ── index.htm specific ──────────────────────────────────────────────────── */ :root[data-theme="dark"] .hero-section, :root[data-theme="dark"] .page-hero { background: #13111f; } :root[data-theme="dark"] .hero-text h1 { color: #e8e4f0; } :root[data-theme="dark"] .hero-text p { color: #9d99b0; } :root[data-theme="dark"] .hero-section::before, :root[data-theme="dark"] .hero-section::after { opacity: 0.4; } :root[data-theme="dark"] .trust-strip { background: #1e1b2e; border-color: #2e2a42; } :root[data-theme="dark"] .trust-item { color: #9d99b0; } :root[data-theme="dark"] .audience-section { background: #1a1730; } :root[data-theme="dark"] .audience-card { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .audience-card h3 { color: #e8e4f0; } :root[data-theme="dark"] .audience-card p { color: #9d99b0; } :root[data-theme="dark"] .audience-card:hover { border-color: #7c3aed; background: #2a1f4a; } :root[data-theme="dark"] .aud-arrow { color: #7c3aed; } :root[data-theme="dark"] .features-section { background: #1e1b2e; } :root[data-theme="dark"] .features-strip-item { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .feat-strip-title { color: #e8e4f0; } :root[data-theme="dark"] .feat-strip-desc { color: #9d99b0; } :root[data-theme="dark"] .feat-strip-link { color: #a78bfa; } :root[data-theme="dark"] .eco-section { background: #1a1730; } :root[data-theme="dark"] .eco-stat { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .eco-stat-num { color: #4ade80; } :root[data-theme="dark"] .eco-text h2 { color: #e8e4f0; } :root[data-theme="dark"] .eco-text h2 span { color: #4ade80; } :root[data-theme="dark"] section[style*="off-white"], :root[data-theme="dark"] section[style*="violet-pale"] { background: #1a1730 !important; } :root[data-theme="dark"] section[style*="violet-pale"] h2 { color: #e8e4f0; } :root[data-theme="dark"] section[style*="violet-pale"] p { color: #9d99b0; } :root[data-theme="dark"] section[style*="violet-pale"] a[style] { background: rgba(30,27,46,0.8) !important; color: #e8e4f0; } /* Hero demo window */ :root[data-theme="dark"] .hero-visual { background: #1a1730; border-color: #2e2a42; } :root[data-theme="dark"] .demo-topbar { background: #13111f; border-color: #2e2a42; } :root[data-theme="dark"] .demo-title { color: #6b6785; } :root[data-theme="dark"] .demo-chat-box { background: #1a1730; } :root[data-theme="dark"] .hero-visual .ai-response-container { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .hero-visual .math-block { background: #1a1730; border-color: #3a3653; color: #e8e4f0; } :root[data-theme="dark"] .hero-visual .step-math { background: #1a1730; border-color: #3a3653; color: #e8e4f0; } :root[data-theme="dark"] .hero-visual .step-desc { color: #9d99b0; } :root[data-theme="dark"] .hero-visual .solution-label { color: #6b6785; } :root[data-theme="dark"] .hero-visual .copy-bar { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .hero-visual .copy-btn { background: #252236; border-color: #3a3653; color: #9d99b0; } :root[data-theme="dark"] .hero-visual .input-container { background: #252236; border-color: #2e2a42; } :root[data-theme="dark"] .hero-visual #demoInputField { color: #6b6785; } :root[data-theme="dark"] .hero-visual .input-container-wrapper { background: #1a1730; border-color: #2e2a42; } /* Section headers */ :root[data-theme="dark"] .section-header h2 { color: #e8e4f0; } :root[data-theme="dark"] .section-header p { color: #9d99b0; } :root[data-theme="dark"] .section-label { color: #7c3aed; background: #2a1f4a; border-color: rgba(124,58,237,.3); } /* Browser chrome dark mode */ :root[data-theme="dark"] .browser-chrome { background: #1a1828; border-color: #2e2a42; } :root[data-theme="dark"] .browser-titlebar { background: #1a1828; } :root[data-theme="dark"] .browser-addressbar { background: #1a1828; } :root[data-theme="dark"] .browser-tabs { background: #1a1828; } :root[data-theme="dark"] .browser-tab { background: #252236; border-color: #3a3653; color: #c4bfd6; } :root[data-theme="dark"] .browser-tab-inactive { background: #13111f; border-color: #2e2a42; color: #6b6785; } :root[data-theme="dark"] .browser-url { background: #252236; border-color: #3a3653; } :root[data-theme="dark"] .browser-url-text { color: #9d99b0; } :root[data-theme="dark"] .browser-url-text span { color: #e8e4f0; } :root[data-theme="dark"] .browser-nav-btn { background: rgba(255,255,255,.06); color: #6b6785; }