/* ───────────────────────────────────────────────────────────────────────── Site-wide light/dark theming. The active theme lives in (set before first paint by the inline script in App.razor and flipped by the .theme-toggle button). Light is the default. - Global "site" tokens below are used by the landing page and shared chrome. - The QA section themes itself via its own --qa-* vars (qa.css). - The quiz (app.css) is light-authored, so we add explicit dark overrides at the bottom of this file. ──────────────────────────────────────────────────────────────────────── */ :root, html[data-theme="light"] { --site-bg: #f5f6f8; --site-surface: #ffffff; --site-surface-2: #eef0f4; --site-text: #1c2027; --site-muted: #5b6470; --site-border: #dfe3e9; --site-accent: #6366f1; /* indigo — matches the exam */ --site-accent-2: #c25a38; /* clay — matches the academy */ --site-shadow: 0 1px 3px rgba(0, 0, 0, .06); } html[data-theme="dark"] { --site-bg: #0f1115; --site-surface: #171a21; --site-surface-2: #1e222b; --site-text: #e7e9ee; --site-muted: #9aa3b2; --site-border: #2a2f3a; --site-accent: #818cf8; --site-accent-2: #e8a07f; --site-shadow: 0 1px 3px rgba(0, 0, 0, .4); } html[data-theme="dark"] { background: #0f1115; } /* ── Theme toggle button ─────────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: transparent; border: 1px solid var(--site-border); color: inherit; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0; transition: border-color .15s, background .15s; } .theme-toggle:hover { border-color: var(--site-accent); } .theme-icon-sun { display: none; } .theme-icon-moon { display: inline; } html[data-theme="dark"] .theme-icon-sun { display: inline; } html[data-theme="dark"] .theme-icon-moon { display: none; } /* Quiz header right-side cluster (brand link + academy link + toggle) */ .ql-header-right { margin-left: auto; align-self: center; display: flex; align-items: center; gap: 14px; } .ql-brand-link { text-decoration: none; } .ql-academy-link { color: var(--site-accent); text-decoration: none; font-size: .85rem; font-weight: 600; white-space: nowrap; } .ql-academy-link:hover { text-decoration: underline; } /* Payment / checkout button (themed, usable in both the exam and the academy) */ .pay-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--site-accent); color: #fff; border: none; border-radius: 9px; padding: 10px 20px; font-size: .92rem; font-weight: 600; cursor: pointer; transition: filter .15s; } .pay-btn:hover:not(:disabled) { filter: brightness(1.06); } .pay-btn:disabled { opacity: .55; cursor: default; } /* Paywall card (AccessGate) */ .pay-gate { text-align: center; background: var(--site-surface); border: 1px solid var(--site-border); border-radius: 16px; padding: 40px 32px; max-width: 460px; margin: 24px auto; } .pay-gate-icon { font-size: 2rem; margin-bottom: 10px; } .pay-gate-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; color: var(--site-text); } .pay-gate-text { color: var(--site-muted); font-size: .92rem; line-height: 1.6; margin: 0 0 20px; } .pay-gate-checking { color: var(--site-muted); font-size: .9rem; padding: 24px; } .pay-gate-hint { margin: 14px 0 0; font-size: .82rem; color: var(--site-muted); } .pay-gate-hint a { color: var(--site-accent); } /* Exam start-screen paywall (tiered by question count) */ .qz-paywall { background: var(--site-surface-2); border: 1px solid var(--site-border); border-radius: 12px; padding: 18px 20px; text-align: center; } .qz-paywall-text { margin: 0 0 14px; color: var(--site-text); font-size: .92rem; } .qz-paywall-note { margin: 12px 0 0; font-size: .8rem; color: var(--site-muted); } /* ── Legal pages ─────────────────────────────────────────────────────── */ .legal { max-width: 760px; margin: 0 auto; color: var(--site-text); line-height: 1.7; font-size: .95rem; } .legal h1 { font-size: 1.9rem; margin: 0 0 6px; } .legal h2 { font-size: 1.15rem; margin: 28px 0 8px; } .legal a { color: var(--site-accent); } .legal ul, .legal ol { padding-left: 1.3em; } .legal li { margin: .35em 0; } .legal-updated { color: var(--site-muted); font-size: .85rem; margin-bottom: 20px; } .legal code { background: var(--site-surface-2); padding: 1px 5px; border-radius: 4px; font-size: .85em; } .legal-template-note { background: #2a1e14; color: #f0c9a8; border: 1px solid #5a3a22; border-radius: 8px; padding: 12px 16px; font-size: .85rem; margin: 0 0 24px; } .legal-template-note code { background: rgba(0, 0, 0, .25); } /* ── Footer legal links ──────────────────────────────────────────────── */ .lp-footer-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; } .lp-footer-links a { color: var(--site-muted); text-decoration: none; } .lp-footer-links a:hover { color: var(--site-accent); text-decoration: underline; } .ql-legal-links { margin-top: 10px; } .ql-legal-links a { color: #6366f1; text-decoration: none; } .ql-legal-links a:hover { text-decoration: underline; } /* ── Landing page ────────────────────────────────────────────────────── */ .lp-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--site-bg); color: var(--site-text); font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .lp-header { display: flex; align-items: center; gap: 14px; padding: 14px 28px; border-bottom: 1px solid var(--site-border); background: var(--site-surface); } .lp-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; letter-spacing: .01em; color: var(--site-text); text-decoration: none; } .lp-brand-mark { font-size: 1.4rem; } .lp-header-spacer { margin-left: auto; } .lp-body { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 56px 24px 72px; box-sizing: border-box; } .lp-hero { text-align: center; margin-bottom: 48px; } .lp-hero h1 { font-size: 2.3rem; font-weight: 800; margin: 0 0 14px; line-height: 1.15; } .lp-hero p { color: var(--site-muted); font-size: 1.05rem; line-height: 1.6; max-width: 640px; margin: 0 auto; } .lp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 760px) { .lp-cards { grid-template-columns: 1fr; } .lp-hero h1 { font-size: 1.8rem; } } .lp-card { display: flex; flex-direction: column; background: var(--site-surface); border: 1px solid var(--site-border); border-radius: 16px; padding: 32px 30px; box-shadow: var(--site-shadow); text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .lp-card:hover { transform: translateY(-3px); border-color: var(--lp-card-accent, var(--site-accent)); box-shadow: 0 8px 24px rgba(0, 0, 0, .10); } .lp-card-exam { --lp-card-accent: var(--site-accent); } .lp-card-academy { --lp-card-accent: var(--site-accent-2); } .lp-card-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 16px; } .lp-card-kicker { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--lp-card-accent); margin-bottom: 8px; } .lp-card h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 10px; } .lp-card p { color: var(--site-muted); font-size: .92rem; line-height: 1.6; margin: 0 0 20px; flex: 1; } .lp-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .lp-chip { font-size: .72rem; color: var(--site-muted); background: var(--site-surface-2); border: 1px solid var(--site-border); border-radius: 999px; padding: 4px 10px; } .lp-card-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--lp-card-accent); color: #fff; border-radius: 9px; padding: 10px 20px; font-size: .92rem; font-weight: 600; } .lp-card:hover .lp-card-cta { filter: brightness(1.05); } .lp-footer { text-align: center; color: var(--site-muted); font-size: .8rem; padding: 24px 16px 36px; } /* ════════════════════════════════════════════════════════════════════════ Quiz dark-mode overrides (app.css is light-authored). Accent indigo and the colored correct/wrong/pass/fail states are kept — they read fine on a dark surface. ════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body, html[data-theme="dark"] .ql-shell { background: #0f1115; color: #e7e9ee; } html[data-theme="dark"] .ql-header { background: #171a21; border-bottom-color: #2a2f3a; } html[data-theme="dark"] .ql-subtitle { color: #9aa3b2; } html[data-theme="dark"] .ql-footer { border-top-color: #2a2f3a; } html[data-theme="dark"] .qz-start-card, html[data-theme="dark"] .qz-loading-card, html[data-theme="dark"] .qz-waiting-card, html[data-theme="dark"] .qz-question-card, html[data-theme="dark"] .qz-domain-card, html[data-theme="dark"] .qz-faq-item, html[data-theme="dark"] .qz-results-body, html[data-theme="dark"] .qz-wrong-card, html[data-theme="dark"] .ql-disclaimer-box, html[data-theme="dark"] .qz-gen-strip { background: #171a21; border-color: #2a2f3a; box-shadow: none; } /* Primary headings / strong text */ html[data-theme="dark"] .qz-title, html[data-theme="dark"] .qz-intro-heading, html[data-theme="dark"] .qz-intro-subheading, html[data-theme="dark"] .qz-section-heading, html[data-theme="dark"] .qz-domain-name, html[data-theme="dark"] .qz-faq-q, html[data-theme="dark"] .qz-mode-title, html[data-theme="dark"] .qz-question-text, html[data-theme="dark"] .qz-big-score, html[data-theme="dark"] .qz-wrong-q, html[data-theme="dark"] .ql-disc-item strong { color: #e7e9ee; } /* Body / secondary text */ html[data-theme="dark"] .qz-intro-body, html[data-theme="dark"] .qz-how-list, html[data-theme="dark"] .qz-explanation, html[data-theme="dark"] .qz-topic-table td { color: #c7ccd4; } /* Muted text */ html[data-theme="dark"] .qz-tagline, html[data-theme="dark"] .qz-hint, html[data-theme="dark"] .qz-section-sub, html[data-theme="dark"] .qz-domain-desc, html[data-theme="dark"] .qz-faq-a, html[data-theme="dark"] .qz-qnum, html[data-theme="dark"] .qz-score-live, html[data-theme="dark"] .qz-label, html[data-theme="dark"] .qz-mode-desc, html[data-theme="dark"] .qz-loading-note, html[data-theme="dark"] .qz-loading-note strong, html[data-theme="dark"] .qz-wrong-expl, html[data-theme="dark"] .qz-timer, html[data-theme="dark"] .qz-pct, html[data-theme="dark"] .ql-disc-item p, html[data-theme="dark"] .ql-disc-item p strong, html[data-theme="dark"] .ql-disc-footer { color: #9aa3b2; } /* Inputs / option & choice buttons / chips / links */ html[data-theme="dark"] .qz-input, html[data-theme="dark"] .qz-option, html[data-theme="dark"] .qz-count-btn, html[data-theme="dark"] .qz-mode-btn, html[data-theme="dark"] .qz-link, html[data-theme="dark"] .qz-pause-btn, html[data-theme="dark"] .qz-topic-chip { background: #1e222b; border-color: #2a2f3a; color: #e7e9ee; } html[data-theme="dark"] .qz-mode-desc { color: #9aa3b2; } html[data-theme="dark"] .qz-intro-note { background: #1e222b; color: #c7ccd4; border-left-color: #6366f1; } html[data-theme="dark"] .qz-domain-desc code { background: #1e222b; color: #c7ccd4; } /* Exam fact pills */ html[data-theme="dark"] .qz-fact { background: #1e222b; border-color: #39414f; } html[data-theme="dark"] .qz-fact-label { color: #9aa3b2; } /* Tables */ html[data-theme="dark"] .qz-topic-table th { color: #9aa3b2; border-bottom-color: #2a2f3a; } html[data-theme="dark"] .qz-topic-table td { border-bottom-color: #232833; } /* Bars / tracks */ html[data-theme="dark"] .qz-progress-bar-wrap, html[data-theme="dark"] .qz-gen-bar-track, html[data-theme="dark"] .qz-gen-bar-wrap { background: #1e222b; border-color: #2a2f3a; } /* Generic links inside the quiz shell */ html[data-theme="dark"] .ql-disc-item a { color: #818cf8; }