/* ===== Theme tokens ===== Light is the DEFAULT. Dark applies when . */ :root { --brand-navy: #003057; --brand-gold: #b3a369; --brand-gold-dark: #8c7b4f; --bg: #f5f6f8; --panel: #ffffff; --panel-2: #eef1f5; --border: #d8dee6; --text: #1c2430; --muted: #5b6573; --good: #1a7f37; --good-bg: rgba(26, 127, 55, 0.10); --bad: #c4392f; --bad-bg: rgba(196, 57, 47, 0.10); --accent: #1f6feb; --gold-text: #7a6a3c; /* gold that stays readable on white */ --radius: 12px; --shadow: 0 4px 18px rgba(20, 30, 45, 0.08); } html[data-theme="dark"] { --bg: #0f1419; --panel: #1a2027; --panel-2: #222a33; --border: #2c3641; --text: #e7ecf1; --muted: #95a3b3; --good: #2ea043; --good-bg: rgba(46, 160, 67, 0.14); --bad: #e5534b; --bad-bg: rgba(229, 83, 75, 0.14); --accent: #4c8bf5; --gold-text: #c9b977; --shadow: 0 6px 24px rgba(0, 0, 0, 0.35); } /* Vibrant rainbow sweep — the brand signature, reused by logo + wordmark. */ :root { --rainbow: linear-gradient(90deg, #ff3d6e, #ff8a3d, #ffd23d, #4ade80, #38bdf8, #818cf8, #c084fc, #ff3d6e); } @keyframes rainbow-sweep { to { background-position: 200% center; } } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; transition: background 0.2s, color 0.2s; } /* ===== Top bar ===== */ .topbar { background: linear-gradient(90deg, var(--brand-navy), #062a48); border-bottom: 2px solid var(--brand-gold); position: sticky; top: 0; z-index: 30; } .topbar-inner { max-width: 920px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 13px; } .brand-mark { position: relative; width: 42px; height: 42px; border-radius: 12px; background: var(--rainbow); background-size: 200% auto; animation: rainbow-sweep 6s linear infinite; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(129, 140, 248, 0.45); } /* A crisp white spark/prism glyph centered in the rainbow tile. */ .brand-spark { width: 18px; height: 18px; background: #fff; -webkit-mask: var(--spark-mask) center / contain no-repeat; mask: var(--spark-mask) center / contain no-repeat; } :root { --spark-mask: url("data:image/svg+xml;utf8,"); } .topbar h1 { font-size: 18px; margin: 0; color: #fff; } .wordmark { background: var(--rainbow); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: rainbow-sweep 6s linear infinite; font-weight: 800; letter-spacing: -0.2px; } .tagline { margin: 0; font-size: 12px; color: #cdd7e1; } @media (prefers-reduced-motion: reduce) { .brand-mark, .wordmark { animation: none; } } .topbar-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; font-size: 16px; width: 38px; height: 38px; border-radius: 9px; cursor: pointer; } .icon-btn:hover { background: rgba(255, 255, 255, 0.22); } /* ===== Layout ===== */ main { max-width: 920px; margin: 0 auto; padding: 28px 20px 120px; } .view { animation: fade 0.25s ease; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } h2 { font-size: 22px; margin: 0 0 4px; } .muted { color: var(--muted); } .source { font-size: 13px; color: var(--gold-text); margin: 6px 0 0; } .status { color: var(--muted); font-size: 14px; margin: 10px 0; } .status code { background: var(--panel-2); padding: 1px 6px; border-radius: 5px; } /* ===== Catalog ===== */ .catalog-head { margin-bottom: 18px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .test-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); } .test-card:hover { border-color: var(--brand-gold); transform: translateY(-2px); } .test-card .course-chip { align-self: flex-start; background: var(--brand-navy); color: #eaf1f8; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; padding: 2px 9px; border-radius: 20px; } .test-card h3 { margin: 4px 0 0; font-size: 16px; } .test-card p { margin: 0; font-size: 13px; color: var(--muted); } .test-card .card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .test-card .meta { font-size: 12px; color: var(--gold-text); font-weight: 600; } .saved-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border); } .saved-badge.submitted { color: var(--good); border-color: var(--good); background: var(--good-bg); } .saved-badge.progress { color: var(--accent); border-color: var(--accent); background: rgba(31, 111, 235, 0.08); } /* ===== Test header ===== */ .test-header { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 22px; box-shadow: var(--shadow); } .crumb { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--gold-text); } .controls { margin-top: 14px; } .toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; } /* ===== Questions ===== */ .q-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow); } .q-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; } .q-num { background: var(--brand-navy); color: #fff; font-weight: 700; font-size: 13px; min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; } .q-text { font-size: 16px; font-weight: 600; } .q-hint { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--gold-text); margin-top: 5px; } .q-topic { font-size: 11px; color: var(--muted); margin-top: 4px; font-weight: 400; } .options { display: flex; flex-direction: column; gap: 10px; } .option { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .option:hover { border-color: var(--brand-gold-dark); } .option input { margin-top: 3px; accent-color: var(--accent); } .option .opt-key { font-weight: 700; color: var(--gold-text); margin-right: 2px; } .option.selected { border-color: var(--accent); background: rgba(31, 111, 235, 0.07); } .option.correct { border-color: var(--good); background: var(--good-bg); } .option.incorrect { border-color: var(--bad); background: var(--bad-bg); } .option.locked { cursor: default; } .option .mark { margin-left: auto; font-weight: 700; white-space: nowrap; } .option.correct .mark { color: var(--good); } .option.incorrect .mark { color: var(--bad); } .explain { margin-top: 14px; border-left: 3px solid var(--brand-gold); background: var(--panel-2); border-radius: 0 8px 8px 0; padding: 12px 16px; font-size: 14px; } .explain[hidden] { display: none; } .explain .ex-label { font-weight: 700; color: var(--gold-text); font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; } .explain .ex-ref { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); } .q-card.is-correct { border-color: var(--good); } .q-card.is-incorrect { border-color: var(--bad); } /* ===== Buttons / submit ===== */ .submit-bar { display: flex; align-items: center; gap: 14px; margin-top: 24px; } .primary-btn { background: var(--brand-gold); color: var(--brand-navy); font-weight: 700; font-size: 15px; border: none; border-radius: 9px; padding: 12px 22px; cursor: pointer; } .primary-btn:hover { background: #c4b67d; } .primary-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ghost-btn { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 11px 18px; cursor: pointer; font-size: 14px; } .ghost-btn:hover { border-color: var(--brand-gold); } .ghost-btn.small { padding: 7px 14px; font-size: 13px; } #homeBtn { color: #fff; border-color: rgba(255,255,255,0.3); } #homeBtn:hover { border-color: var(--brand-gold); } /* ===== Score bar ===== */ .scorebar { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(90deg, var(--brand-navy), #062a48); border-top: 2px solid var(--brand-gold); z-index: 25; box-shadow: 0 -6px 20px rgba(0,0,0,0.25); } .scorebar-inner { max-width: 920px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 20px; } .score-main { display: flex; align-items: baseline; gap: 10px; } .score-pct { font-size: 30px; font-weight: 800; color: var(--brand-gold); } .score-frac { font-size: 14px; color: #cdd7e1; } .score-verdict { font-size: 14px; font-weight: 600; } .score-verdict.pass { color: #7ee08a; } .score-verdict.fail { color: #f3a39d; } .scorebar .ghost-btn { margin-left: auto; color: #e7ecf1; border-color: rgba(255,255,255,0.3); } /* ===== Hero / library header ===== */ .hero { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 24px 22px; margin-bottom: 22px; box-shadow: var(--shadow); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--rainbow); background-size: 200% auto; animation: rainbow-sweep 6s linear infinite; } .hero-title { font-size: 24px; margin: 4px 0 6px; } .hero-sub { margin: 0 0 16px; color: var(--muted); font-size: 14px; max-width: 60ch; } .hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .btn-ico { font-weight: 700; margin-right: 4px; } .import-status { font-size: 13px; color: var(--muted); } .import-status.ok { color: var(--good); } .import-status.err { color: var(--bad); } @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } } /* Primary button gets the vibrant treatment to feel more "intelligent". */ .primary-btn { background: var(--rainbow); background-size: 200% auto; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: background-position 0.4s ease, transform 0.1s ease, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(129, 140, 248, 0.35); } .primary-btn:hover { background-position: 100% center; transform: translateY(-1px); } .primary-btn:disabled { background: var(--border); color: var(--muted); box-shadow: none; text-shadow: none; } /* ===== Catalog card extras: source badge + per-card actions ===== */ .test-card { position: relative; } .lib-badge { position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; background: rgba(129,140,248,0.14); color: #6366f1; border: 1px solid rgba(129,140,248,0.4); } .card-actions { display: flex; gap: 8px; margin-top: 12px; } .card-btn { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; transition: border-color 0.12s, background 0.12s; } .card-btn:hover { border-color: var(--brand-gold-dark); } .card-btn.danger:hover { border-color: var(--bad); color: var(--bad); } /* ===== Toast ===== */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 28px rgba(0,0,0,0.3); z-index: 50; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); } .toast[hidden] { display: block; } /* ===== Auth: topbar controls ===== */ .signin-btn { background: var(--rainbow); background-size: 200% auto; color: #fff; font-weight: 700; font-size: 13px; border: none; border-radius: 9px; padding: 8px 16px; cursor: pointer; box-shadow: 0 3px 12px rgba(129,140,248,0.4); transition: background-position 0.4s, transform 0.1s; } .signin-btn:hover { background-position: 100% center; transform: translateY(-1px); } .user-chip { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 13px; padding: 5px 6px 5px 12px; border-radius: 20px; } .user-chip .chip-x { background: rgba(255,255,255,0.18); border: none; color: #fff; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 14px; cursor: pointer; } .user-chip .chip-x:hover { background: rgba(255,255,255,0.32); } /* ===== Auth modal ===== */ .modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(10,15,25,0.55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; } .modal-backdrop[hidden] { display: none; } .modal { position: relative; width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 28px 26px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); animation: fade 0.2s ease; } .modal-x { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; } .modal-title { font-size: 20px; margin: 0 0 4px; } .modal-title .wordmark { font-size: 20px; } .modal-sub { margin: 0 0 20px; color: var(--muted); font-size: 13px; } .google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .google-btn:hover { border-color: var(--brand-gold-dark); background: var(--panel-2); } .modal-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 18px 0; } .modal-or::before, .modal-or::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-form { display: flex; flex-direction: column; gap: 10px; } .auth-label { font-size: 13px; color: var(--muted); } .auth-input { padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 15px; } .auth-input:focus { outline: none; border-color: var(--accent); } .auth-input.code { letter-spacing: 10px; text-align: center; font-size: 22px; font-weight: 700; } .primary-btn.full { width: 100%; justify-content: center; } .link-btn { background: none; border: none; color: var(--accent); font-size: 13px; cursor: pointer; padding: 4px; } .auth-msg { font-size: 13px; margin: 14px 0 0; min-height: 18px; } .auth-msg.err { color: var(--bad); } .auth-msg.ok { color: var(--good); } /* "Saved to account" badge variant reuses lib-badge colors via a modifier */ .lib-badge.account { background: rgba(46,160,67,0.14); color: var(--good); border-color: rgba(46,160,67,0.4); } @media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } }