/* ============================================================ 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; } /* ── Inline language tabs (per-card, per-question) ── Used in explanation cards — gives each MCQ its own AR/EN toggle so the user can flip ONE explanation without affecting the rest. Rendered via WANDMLang.renderInlineTabs(target, ar, en) in lang-toggle.js. Mobile-friendly: 36px buttons (well above 44px tappable surface with padding). */ .exp-lang-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: rgba(15, 20, 40, 0.05); border-radius: 10px; -webkit-tap-highlight-color: transparent; } .exp-lang-tab { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--muted, #6b7280); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.875rem; font-weight: 600; padding: 8px 16px; min-height: 36px; border-radius: 8px; cursor: pointer; touch-action: manipulation; transition: color 180ms, background 180ms, box-shadow 180ms, transform 120ms; } .exp-lang-tab:hover { color: var(--ink, #0f1428); } .exp-lang-tab:active { transform: scale(0.97); } .exp-lang-tab.is-active { background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%); color: #fff; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28); } .exp-lang-tab:focus-visible { outline: 2px solid var(--accent, #7C3AED); outline-offset: 2px; } .exp-lang-content { white-space: pre-wrap; line-height: 1.7; } @media (prefers-reduced-motion: reduce) { .exp-lang-tab { transition: none; } } /* ── 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); } /* ===== v3.4 — formatted explanation typography (.wf-content via content-format.js) ===== */ .wf-content > :first-child{ margin-top:0; } .wf-content > :last-child{ margin-bottom:0; } .wf-content p{ margin:0 0 10px; line-height:1.65; } .wf-content .wf-h{ font-weight:800; line-height:1.3; margin:14px 0 6px; letter-spacing:-0.2px; } .wf-content h3.wf-h{ font-size:16px; } .wf-content h4.wf-h{ font-size:14.5px; } .wf-content h5.wf-h,.wf-content h6.wf-h{ font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; opacity:.85; } .wf-content ul.wf-ul,.wf-content ol.wf-ol{ margin:8px 0 12px; padding-inline-start:22px; } .wf-content li{ margin:4px 0; } .wf-content strong{ font-weight:800; } .wf-content code{ font-family:ui-monospace,Menlo,monospace; font-size:.88em; padding:1px 5px; border-radius:5px; background:rgba(124,58,237,.10); } .wf-table-wrap{ overflow-x:auto; margin:10px 0 14px; -webkit-overflow-scrolling:touch; } .wf-table{ border-collapse:collapse; width:100%; font-size:13.5px; } .wf-table th,.wf-table td{ border:1px solid rgba(124,58,237,.18); padding:8px 11px; text-align:start; vertical-align:top; } .wf-table thead th{ background:rgba(124,58,237,.08); font-weight:800; } .wf-table tbody tr:nth-child(even) td{ background:rgba(124,58,237,.03); } @media(max-width:560px){ .wf-table{ font-size:12.5px; } } /* v3.4 — AR/EN toggle removed from UI globally (lang engine left intact) */ .lang-toggle,.tab-lang,[data-lang-toggle],[data-lang-label]{display:none !important;} /* ============================================================ v3.4 AUDITFIX2 — WANDM Notes professional design system Shared booster/box/battle-table styling so ALL chapters render with the same medical-book look (previously inlined per chapter). Dark-mode aware; mobile-safe at 360px. ============================================================ */ .wandm-booster{ margin-top:2.4em; } .wandm-booster .rc-flag{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.4px; color:#7C3AED; background:rgba(124,58,237,.1); padding:4px 10px; border-radius:999px; margin:0 0 6px; } .wandm-booster h2{ font-size:1.3rem; color:var(--ink,#111); border-bottom:2px solid #7C3AED; padding-bottom:7px; margin:1.4em 0 .9em; font-weight:850; } .wandm-booster h3{ font-size:1.05rem; color:#7C3AED; margin:1em 0 .5em; } .wandm-booster p{ font-size:15px; line-height:1.75; margin:.5em 0; } .wandm-booster ul{ margin:.5em 0 .8em; padding-inline-start:1.3em; } .wandm-booster li{ font-size:14.6px; line-height:1.7; margin:.28em 0; } .wandm-box{ border-radius:12px; padding:12px 14px; margin:12px 0; font-size:14.6px; line-height:1.7; } .wandm-box .lbl{ font-weight:800; display:block; margin-bottom:4px; } .wandm-box.trap{ background:#fff7ed; border:1px solid rgba(245,158,11,.3); } .wandm-box.redflag{ background:#fef2f2; border:1px solid rgba(220,38,38,.3); } .wandm-box.priority{ background:#ecfeff; border:1px solid rgba(6,182,212,.3); } .wandm-box.takeaway{ background:linear-gradient(135deg,#fff7ed,#fef3c7); border:1px solid rgba(245,158,11,.24); } .wandm-box.ar{ background:rgba(124,58,237,.05); border:1px solid rgba(124,58,237,.18); direction:rtl; text-align:right; } .wandm-ev{ font-size:11.5px; color:#6b7280; margin-top:6px; font-family:monospace; word-break:break-word; } .needs-review{ color:#b45309; font-weight:800; } .wandm-booster .table-wrap{ overflow-x:auto; margin:1em 0; -webkit-overflow-scrolling:touch; } .wandm-booster table.battle-table{ border-collapse:collapse; width:100%; font-size:14px; background:#fff; border-radius:10px; overflow:hidden; } .wandm-booster table.battle-table th{ background:linear-gradient(135deg,#7C3AED,#06B6D4); color:#fff; padding:10px 12px; text-align:start; font-weight:800; } .wandm-booster table.battle-table td{ padding:10px 12px; border-bottom:1px solid #e5e7eb; vertical-align:top; } .wandm-booster table.battle-table tr:nth-child(even) td{ background:#fafafa; } @media (max-width:560px){ .wandm-booster table.battle-table{ font-size:12.5px; } .wandm-booster table.battle-table th,.wandm-booster table.battle-table td{ padding:8px 9px; } } [data-theme="dark"] .wandm-booster h2{ color:#e8eaf3; } [data-theme="dark"] .wandm-box.trap{ background:rgba(245,158,11,.08); } [data-theme="dark"] .wandm-box.redflag{ background:rgba(220,38,38,.08); } [data-theme="dark"] .wandm-box.priority{ background:rgba(6,182,212,.08); } [data-theme="dark"] .wandm-box.takeaway{ background:rgba(245,158,11,.10); } [data-theme="dark"] .wandm-booster table.battle-table td{ background:rgba(255,255,255,.02); border-color:rgba(255,255,255,.08); } [data-theme="dark"] .wandm-booster table.battle-table tr:nth-child(even) td{ background:rgba(255,255,255,.04); }