/* ============================================================ WANDM NOTES — theme.css · DARK MODE OVERRIDES ============================================================ Loaded by every WANDM page. Defines the dark equivalents for every CSS custom property used across the platform. The boot snippet in each sets data-theme="dark" on BEFORE the first paint by reading localStorage — that's what prevents flash-of-light when a dark-mode user loads a page. Hardcoded #fff fixes: A handful of components were authored with literal #fff (modal cards, feedback widgets, etc.). Rather than editing every page, we override them here with attribute-selector specificity. New code should use var(--card) etc. ============================================================ */ [data-theme="dark"] { /* ── Brand accents ───────────────────────────────────── Slightly brighter on dark surfaces so they pop. */ --purple: #a78bfa; --purple-deep: #8b5cf6; --teal: #22d3ee; --pink: #f472b6; --gold: #fbbf24; --amber: #fbbf24; --green: #34d399; --red: #f87171; /* ── Text ─────────────────────────────────────────────── */ --ink: #f0f2f8; --ink-soft: #d4d8e6; --muted: #9aa3b8; --muted-2: #7a8398; /* ── Surfaces ─────────────────────────────────────────── */ --paper: #0a0e1c; --paper-2: #0f1429; --card: #1c2238; --card-2: #252c45; /* Glass morphism — semi-translucent dark for backdrop-filter */ --glass: rgba(28, 34, 56, 0.72); --glass-strong: rgba(28, 34, 56, 0.92); /* ── Borders ──────────────────────────────────────────── */ --border: rgba(255, 255, 255, 0.07); --border-2: rgba(255, 255, 255, 0.10); --border-3: rgba(255, 255, 255, 0.14); /* ── Gradient ─────────────────────────────────────────── */ --grad: linear-gradient(135deg, var(--purple), var(--purple-deep)); /* ── Shadows ──────────────────────────────────────────── */ --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.32); --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.44); --shadow-purple: 0 8px 22px rgba(124, 58, 237, 0.40); } /* ── Page-level body styling ─────────────────────────────── */ [data-theme="dark"] body { background: var(--paper); color: var(--ink); color-scheme: dark; } /* ── Hardcoded #fff fixes ────────────────────────────────── */ /* Modal cards (idle warning, feedback, update banner card) */ [data-theme="dark"] .idle-modal-card, [data-theme="dark"] .wfb-card, [data-theme="dark"] .submit-modal-card, [data-theme="dark"] .modal-card, [data-theme="dark"] .signin-card, [data-theme="dark"] .signup-card { background: var(--card); color: var(--ink); } /* Modal backdrops — keep dark overlay but more opacity */ [data-theme="dark"] .idle-modal-back, [data-theme="dark"] .wfb-back, [data-theme="dark"] .modal-back { background: rgba(0, 0, 0, 0.70); } /* Idle / modal buttons */ [data-theme="dark"] .idle-btn:not(.primary), [data-theme="dark"] .wfb-btn:not(.primary), [data-theme="dark"] .modal-btn:not(.primary) { background: var(--card-2); color: var(--ink-soft); border-color: var(--border-3); } [data-theme="dark"] .idle-btn:not(.primary):hover, [data-theme="dark"] .wfb-btn:not(.primary):hover { border-color: var(--purple); color: var(--purple); background: rgba(167, 139, 250, 0.08); } /* Feedback type rows */ [data-theme="dark"] .wfb-type { background: var(--card-2); border-color: var(--border-3); color: var(--ink-soft); } [data-theme="dark"] .wfb-type:hover { border-color: var(--purple); background: rgba(167, 139, 250, 0.06); } [data-theme="dark"] .wfb-type.selected { border-color: var(--purple); background: rgba(167, 139, 250, 0.12); color: var(--ink); } [data-theme="dark"] .wfb-context { background: var(--paper-2); color: var(--muted); } [data-theme="dark"] .wfb-textarea { background: var(--paper-2); color: var(--ink); border-color: var(--border-2); } [data-theme="dark"] .wfb-textarea:focus { border-color: var(--purple); } [data-theme="dark"] .wfb-trigger { background: transparent; border-color: var(--border-2); color: var(--muted); } [data-theme="dark"] .wfb-trigger:hover { border-color: var(--red); color: var(--red); background: rgba(248, 113, 113, 0.08); } /* Toast */ [data-theme="dark"] .wfb-toast { background: var(--card-2); color: var(--ink); border: 1px solid var(--border-2); } [data-theme="dark"] .wfb-toast.success { background: var(--green); color: #0d1226; } [data-theme="dark"] .wfb-toast.error { background: var(--red); color: #fff; } /* ── Theme toggle button (in app.html topbar) ───────────── */ .theme-toggle { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-2); background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease; touch-action: manipulation; -webkit-user-select: none; user-select: none; } .theme-toggle:hover { border-color: var(--purple); color: var(--purple); background: rgba(124, 58, 237, 0.06); } .theme-toggle svg { width: 18px; height: 18px; } /* Show sun icon in dark mode, moon icon in light mode */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle:hover { background: rgba(167, 139, 250, 0.10); } /* Floating variant — auto-injected by theme.js on standalone pages (index, signin, signup, etc.) that don't have a toggle in their own chrome. Sits in the top-right corner with a soft backdrop. */ .theme-toggle-floating { position: fixed; top: max(16px, env(safe-area-inset-top, 16px)); right: max(16px, env(safe-area-inset-right, 16px)); z-index: 100; background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(15, 20, 40, 0.10); box-shadow: 0 4px 14px rgba(15, 20, 40, 0.08); } .theme-toggle-floating:hover { background: rgba(255, 255, 255, 0.95); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(15, 20, 40, 0.12); } [data-theme="dark"] .theme-toggle-floating { background: rgba(28, 34, 56, 0.88); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.40); } [data-theme="dark"] .theme-toggle-floating:hover { background: rgba(37, 44, 69, 0.95); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.50); } @media (max-width: 560px) { .theme-toggle-floating { top: max(12px, env(safe-area-inset-top, 12px)); right: max(12px, env(safe-area-inset-right, 12px)); width: 40px; height: 40px; } } /* ── Smooth theme transition (just on theme switch) ─────── */ .theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after { transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; } /* ── Reduced motion ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after { transition: none !important; } } /* ============================================================ LANGUAGE TOGGLE — Hybrid (Arabic+English) ↔ English-only ============================================================ Controlled by lang-toggle.js. Mode persists in localStorage ('wandm_lang'). Default = 'hybrid'. AUTHORING CONTRACT: - Wrap Arabic+English mixed content in <... class="lang-hybrid"> - Wrap full English mirror in <... class="lang-english"> - Generic content (titles, options, stems already in English) needs no wrapping — visible in both modes. ANTI-FOUC: lang-toggle.js applies data-lang-mode to via inline boot script before first paint. Body mirror keeps CSS selectors short. ============================================================ */ body[data-lang-mode="english"] .lang-hybrid, html[data-lang-mode="english"] .lang-hybrid { display: none !important; } body[data-lang-mode="english"] .lang-english, html[data-lang-mode="english"] .lang-english { display: block !important; } body[data-lang-mode="hybrid"] .lang-hybrid, html[data-lang-mode="hybrid"] .lang-hybrid { display: block !important; } body[data-lang-mode="hybrid"] .lang-english, html[data-lang-mode="hybrid"] .lang-english { display: none !important; } /* Inline variants — for span/small/em inside paragraphs */ body[data-lang-mode="english"] .lang-hybrid-inline, html[data-lang-mode="english"] .lang-hybrid-inline { display: none !important; } body[data-lang-mode="english"] .lang-english-inline, html[data-lang-mode="english"] .lang-english-inline { display: inline !important; } body[data-lang-mode="hybrid"] .lang-hybrid-inline, html[data-lang-mode="hybrid"] .lang-hybrid-inline { display: inline !important; } body[data-lang-mode="hybrid"] .lang-english-inline, html[data-lang-mode="hybrid"] .lang-english-inline { display: none !important; } /* ── Language toggle button (matches .theme-toggle pattern) ── */ .lang-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 56px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--border, rgba(15,20,40,0.12)); border-radius: 999px; background: transparent; color: var(--ink, #0f1428); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: border-color .18s ease, color .18s ease, background-color .18s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .lang-toggle:hover { border-color: var(--purple, #7C3AED); color: var(--purple, #7C3AED); } .lang-toggle:active { transform: scale(0.96); } .lang-toggle .lang-label { display: inline-block; font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; min-width: 36px; text-align: center; } /* Floating variant (for content pages without tab bar) */ .lang-toggle.floating { position: fixed; top: env(safe-area-inset-top, 12px); right: 64px; /* leave room for theme-toggle which sits at right:12px */ z-index: 9990; background: var(--bg, #fff); box-shadow: 0 4px 14px rgba(0,0,0,0.08); } /* Dark mode adjustment */ html[data-theme="dark"] .lang-toggle { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.92); } html[data-theme="dark"] .lang-toggle:hover { border-color: var(--purple, #a78bfa); color: var(--purple, #a78bfa); } html[data-theme="dark"] .lang-toggle.floating { background: var(--bg, #0f1428); } /* Mobile — keep tap target ≥44px and tighter spacing */ @media (max-width: 560px) { .lang-toggle { min-width: 48px; padding: 0 10px; font-size: 12px; } .lang-toggle.floating { right: 56px; } } /* ── Free Mock CTA block (signin/signup pages) ──────────────── */ .free-mock-cta { margin-top: 18px; padding: 14px 16px; background: rgba(124, 58, 237, 0.06); border: 1px solid rgba(124, 58, 237, 0.18); border-radius: 12px; text-align: center; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; line-height: 1.6; } .free-mock-cta .fm-tag { display: block; color: rgba(15, 20, 40, 0.6); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; } .free-mock-cta .fm-link { color: var(--purple, #7C3AED); font-weight: 700; text-decoration: none; padding: 4px 6px; border-radius: 6px; transition: background-color .15s ease; -webkit-tap-highlight-color: transparent; } .free-mock-cta .fm-link:hover, .free-mock-cta .fm-link:focus { background: rgba(124, 58, 237, 0.10); text-decoration: none; } .free-mock-cta .fm-sep { color: rgba(15, 20, 40, 0.3); margin: 0 4px; } @media (max-width: 480px) { .free-mock-cta .fm-sep { display: block; height: 4px; visibility: hidden; } } html[data-theme="dark"] .free-mock-cta { background: rgba(167, 139, 250, 0.08); border-color: rgba(167, 139, 250, 0.22); } html[data-theme="dark"] .free-mock-cta .fm-tag { color: rgba(255, 255, 255, 0.55); } html[data-theme="dark"] .free-mock-cta .fm-link { color: #a78bfa; } html[data-theme="dark"] .free-mock-cta .fm-link:hover { background: rgba(167, 139, 250, 0.14); } html[data-theme="dark"] .free-mock-cta .fm-sep { color: rgba(255, 255, 255, 0.22); } /* AUDIT-2026-06-28 — Design Reference § 01 typography compliance. Monospace utility for timers, question numbers, code blocks. Spec: JetBrains Mono · weights 500 700 900. */ .wandm-mono, .timer, .q-num, .q-number, code, pre { font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Courier New', monospace; font-feature-settings: "tnum" 1, "zero" 1; } /* Arabic content: Tajawal, RTL, right-aligned by default. Apply via .ar class on any element that holds Arabic text. */ .ar, [lang="ar"], [dir="rtl"] { font-family: 'Tajawal', 'Inter', sans-serif; direction: rtl; text-align: right; font-weight: 500; }