/* ═══════════════════════════════════════════════════════ CSCAce — Design System v2 Direction: Premium academic platform Ref: Linear × Brilliant × Stripe docs ═══════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Brand */ --red: #C8372D; --red-light: #FEF0EF; --red-mid: #E04438; --red-dark: #9B1D16; /* Neutrals — cool-tinted, not warm beige */ --ink: #0F1117; --ink-2: #3D4149; --ink-3: #6B7280; --ink-4: #9CA3AF; --bg: #F4F5F7; --bg-white: #FFFFFF; --bg-raised: #FAFAFA; /* Inverse surface — an ALWAYS-dark surface for elements that are meant to be "a dark chip/card/tooltip with light text" in BOTH themes (e.g. tooltips, flashcard backs, toasts). Never use a text token like --ink as a background: --ink flips light in dark mode and turns those surfaces into unreadable light holes. Use this pair instead. */ --surface-inverse: #14100E; --on-inverse: #FFFFFF; --border: rgba(15,17,23,0.08); --border-med: rgba(15,17,23,0.14); --border-strong: rgba(15,17,23,0.22); /* Semantic colors */ --green: #0D7A4E; --green-light: #EAFAF3; --blue: #1649C8; --blue-light: #EEF2FF; --gold: #B45309; --gold-light: #FEF3C7; /* Typography */ --font-display: 'Playfair Display', serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Elevation */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04); --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -2px rgba(0,0,0,0.04); --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.03); --shadow-red: 0 4px 14px rgba(200,55,45,0.22); /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; /* Transitions */ --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1); } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } /* Smooth, flicker-free light⇄dark cross-fade. The `theme-transition` class is added to only for the duration of a toggle (see toggleTheme), so these universal transitions never slow down normal hover/focus interactions. */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, fill 0.4s ease, stroke 0.4s ease, box-shadow 0.4s ease !important; } @media (prefers-reduced-motion: reduce) { html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: none !important; } } /* Shared inline-icon baseline (see icon() in supabase-client.js). */ .ic { display: inline-block; vertical-align: middle; flex-shrink: 0; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.6; min-height: 100vh; } /* ═══════════════════════════════════════════════════════ NAV ═══════════════════════════════════════════════════════ */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.88); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--border); } .nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; height: 56px; display: flex; align-items: center; gap: 1.25rem; } .logo { text-decoration: none; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--red); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; font-family: var(--font-display); letter-spacing: -0.3px; box-shadow: 0 2px 6px rgba(200,55,45,0.3); } .logo-text { font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; } .logo-text em { color: var(--red); font-style: normal; } .nav-links { display: flex; list-style: none; gap: 0; flex: 1; } .nav-links a { text-decoration: none; color: var(--ink-3); font-size: 0.82rem; font-weight: 450; padding: 0.35rem 0.7rem; border-radius: var(--r-sm); transition: color var(--t-fast), background var(--t-fast); display: block; letter-spacing: -0.01em; } .nav-links a:hover { color: var(--ink); background: var(--bg); } .nav-links a.active { color: var(--red); background: var(--red-light); font-weight: 500; } .nav-actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; } .btn-nav { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; padding: 0.4rem 0.875rem; border-radius: var(--r-sm); cursor: pointer; border: none; background: var(--red); color: #fff; transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); box-shadow: var(--shadow-red); letter-spacing: -0.01em; } .btn-nav:hover { background: var(--red-dark); box-shadow: 0 4px 18px rgba(200,55,45,0.3); transform: translateY(-1px); } /* ═══════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════ */ .btn { font-family: var(--font-body); font-weight: 500; border-radius: var(--r-md); cursor: pointer; transition: all var(--t-base); border: none; display: inline-flex; align-items: center; gap: 0.375rem; letter-spacing: -0.01em; text-decoration: none; } .btn-primary { background: var(--red); color: #fff; padding: 0.7rem 1.5rem; font-size: 0.9rem; box-shadow: var(--shadow-red); } .btn-primary:hover { background: var(--red-dark); box-shadow: 0 6px 20px rgba(200,55,45,0.32); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: var(--bg-white); color: var(--ink); border: 1px solid var(--border-med); padding: 0.7rem 1.5rem; font-size: 0.9rem; box-shadow: var(--shadow-xs); } .btn-ghost:hover { background: var(--bg); border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.78rem; background: var(--bg-white); border: 1px solid var(--border-med); color: var(--ink-2); box-shadow: var(--shadow-xs); } .btn-sm:hover { background: var(--bg); color: var(--ink); } .btn-sm.red { background: var(--red); color: #fff; border-color: var(--red); box-shadow: none; } .btn-sm.green { background: var(--green-light); color: var(--green); border-color: transparent; } /* ═══════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════ */ .hero { max-width: 1280px; margin: 0 auto; padding: 5rem 1.5rem 4.5rem; display: grid; grid-template-columns: 1fr 400px; gap: 5rem; align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--red-light); border: 1px solid rgba(200,55,45,0.15); border-radius: 20px; padding: 0.25rem 0.75rem 0.25rem 0.5rem; margin-bottom: 1.5rem; } .hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; } .hero-eyebrow-text { font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--red); font-family: var(--font-mono); } .hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 1.25rem; text-wrap: balance; color: var(--ink); } .hero h1 .accent { color: var(--red); background: linear-gradient(135deg, var(--red) 0%, #E06550 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-desc { font-size: 1rem; color: var(--ink-3); max-width: 500px; margin-bottom: 2rem; line-height: 1.75; } .hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .hero-trust { display: flex; gap: 1.5rem; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: 0.5rem; } .trust-n { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; } .trust-l { font-size: 0.75rem; color: var(--ink-4); line-height: 1.3; } .trust-sep { width: 1px; height: 28px; background: var(--border-med); } /* Hero Card */ .hero-card { background: var(--bg-white); border-radius: var(--r-xl); border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 1.5rem; overflow: hidden; position: relative; } .hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--red) 0%, #F59E8B 50%, transparent 100%); } .hc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; } .hc-title { font-weight: 600; font-size: 0.85rem; letter-spacing: -0.01em; } .hc-badge { font-size: 0.68rem; background: var(--green-light); color: var(--green); padding: 0.2rem 0.5rem; border-radius: 20px; font-weight: 500; font-family: var(--font-mono); } .hc-subjects { display: grid; gap: 0.5rem; margin-bottom: 1.25rem; } .hc-subj { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; background: var(--bg); border-radius: var(--r-md); border: 1px solid var(--border); transition: border-color var(--t-fast); } .hc-subj:hover { border-color: var(--border-strong); } .hc-subj-icon { font-size: 1rem; width: 28px; text-align: center; } .hc-subj-info { flex: 1; min-width: 0; } .hc-subj-name { font-size: 0.82rem; font-weight: 500; letter-spacing: -0.01em; } .hc-subj-meta { font-size: 0.68rem; color: var(--ink-4); font-family: var(--font-mono); } .hc-subj-bar { width: 56px; } .hc-bar-track { height: 3px; background: var(--border-med); border-radius: 2px; } .hc-bar-fill { height: 100%; border-radius: 2px; } .hc-bar-fill.math { background: var(--blue); width: 72%; } .hc-bar-fill.phys { background: var(--red); width: 65%; } .hc-bar-fill.chem { background: var(--green); width: 58%; } .hc-bar-fill.cn { background: var(--gold); width: 80%; } .hc-footer { border-top: 1px solid var(--border); padding-top: 0.875rem; display: flex; justify-content: space-between; align-items: center; } .hc-next { font-size: 0.75rem; color: var(--ink-4); } .hc-next strong { color: var(--ink-2); } .hc-cta { font-size: 0.78rem; color: var(--red); font-weight: 500; cursor: pointer; text-decoration: none; } .hc-cta:hover { opacity: 0.8; } /* ═══════════════════════════════════════════════════════ SECTIONS ═══════════════════════════════════════════════════════ */ .section { padding: 5rem 1.5rem; } .section-inner { max-width: 1280px; margin: 0 auto; } .section-tag { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--red); margin-bottom: 0.625rem; display: block; } .section-title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2.1rem); letter-spacing: -0.025em; margin-bottom: 0.625rem; color: var(--ink); text-wrap: balance; } .section-sub { font-size: 0.95rem; color: var(--ink-3); margin-bottom: 2.5rem; line-height: 1.7; } .subjects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 0.875rem; } .subject-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; cursor: pointer; transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); text-decoration: none; color: inherit; display: block; position: relative; overflow: hidden; } .subject-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(200,55,45,0.03) 0%, transparent 60%); opacity: 0; transition: opacity var(--t-base); } .subject-card:hover { border-color: rgba(200,55,45,0.3); box-shadow: 0 8px 24px rgba(200,55,45,0.08), var(--shadow-md); transform: translateY(-3px); } .subject-card:hover::after { opacity: 1; } .subj-icon { font-size: 1.75rem; margin-bottom: 1rem; display: block; } .subj-label { font-size: 0.65rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-4); margin-bottom: 0.3rem; } .subj-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.02em; } .subj-desc { font-size: 0.825rem; color: var(--ink-3); line-height: 1.6; margin-bottom: 1.25rem; } .subj-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; } .chip { font-size: 0.68rem; padding: 0.18rem 0.5rem; border-radius: var(--r-sm); font-family: var(--font-mono); border: 1px solid var(--border-med); color: var(--ink-3); background: var(--bg); } .subj-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.72rem; color: var(--ink-4); font-family: var(--font-mono); } /* ─── Dark section ─── */ .section-dark { background: var(--ink); color: #fff; } .section-dark .section-tag { color: #F97064; } .section-dark .section-title { color: #fff; } .section-dark .section-sub { color: rgba(255,255,255,0.48); } .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1px; background: rgba(255,255,255,0.06); border-radius: var(--r-xl); overflow: hidden; border: 1px solid rgba(255,255,255,0.08); } .tool-card { padding: 1.75rem; background: rgba(255,255,255,0.015); transition: background var(--t-base); } .tool-card:hover { background: rgba(255,255,255,0.05); } .tool-icon { font-size: 1.35rem; margin-bottom: 0.875rem; } .tool-name { font-size: 0.9rem; font-weight: 600; color: #fff; margin-bottom: 0.5rem; letter-spacing: -0.01em; } .tool-desc { font-size: 0.8rem; color: rgba(255,255,255,0.45); line-height: 1.6; margin-bottom: 1rem; } .tool-link { font-size: 0.8rem; color: #F97064; text-decoration: none; font-weight: 500; } .tool-link:hover { opacity: 0.8; } /* Exam info */ .exam-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.875rem; } .info-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem; box-shadow: var(--shadow-xs); } .info-card-label { font-size: 0.67rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-4); margin-bottom: 0.5rem; } .info-card-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.25rem; } .info-card-sub { font-size: 0.75rem; color: var(--ink-4); } /* ═══════════════════════════════════════════════════════ PAGE HEADER ═══════════════════════════════════════════════════════ */ .page-header { background: var(--ink); color: #fff; padding: 2.5rem 1.5rem; position: relative; overflow: hidden; } .page-header::after { content: ''; position: absolute; top: 0; right: 0; width: 320px; height: 100%; background: radial-gradient(ellipse at right center, rgba(200,55,45,0.18) 0%, transparent 70%); pointer-events: none; } .page-header-inner { max-width: 1280px; margin: 0 auto; position: relative; } .page-header h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 2.8vw, 2.25rem); letter-spacing: -0.025em; margin-bottom: 0.375rem; } .page-header p { color: rgba(255,255,255,0.48); font-size: 0.875rem; } /* ═══════════════════════════════════════════════════════ QUESTION BANK ═══════════════════════════════════════════════════════ */ .qb-layout { max-width: 880px; margin: 0 auto; padding: 1.75rem 1.5rem; } .sidebar { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.125rem; position: sticky; top: 70px; box-shadow: var(--shadow-xs); } .sidebar-section-title { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-4); margin-bottom: 0.5rem; padding: 0 0.25rem; } .filter-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0.42rem 0.6rem; background: none; border: none; border-radius: var(--r-sm); font-family: var(--font-body); font-size: 0.82rem; color: var(--ink-3); cursor: pointer; text-align: left; transition: all var(--t-fast); } .filter-btn:hover { background: var(--bg); color: var(--ink-2); } .filter-btn.active { background: var(--red-light); color: var(--red); font-weight: 500; } .filter-count { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-4); } .filter-btn.active .filter-count { color: var(--red); opacity: 0.65; } .filter-sep { height: 1px; background: var(--border); margin: 0.75rem 0; } .qb-toolbar { display: flex; gap: 0.625rem; margin-bottom: 1.125rem; align-items: center; flex-wrap: wrap; } .q-search { flex: 1; min-width: 180px; padding: 0.55rem 0.875rem; border: 1px solid var(--border-med); border-radius: var(--r-md); font-family: var(--font-body); font-size: 0.85rem; background: var(--bg-white); color: var(--ink); outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); box-shadow: var(--shadow-xs); } .q-search:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,55,45,0.1); } .mode-tabs { display: flex; background: var(--bg); border-radius: var(--r-md); padding: 2px; gap: 2px; } .mode-tab { padding: 0.42rem 0.875rem; font-size: 0.78rem; font-family: var(--font-body); font-weight: 500; border: none; background: none; cursor: pointer; color: var(--ink-3); transition: all var(--t-fast); border-radius: var(--r-sm); letter-spacing: -0.01em; } .mode-tab.active { background: var(--bg-white); color: var(--ink); box-shadow: var(--shadow-xs); } /* Question Card */ .q-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem; margin-bottom: 0.75rem; transition: border-color var(--t-fast), box-shadow var(--t-fast); box-shadow: var(--shadow-xs); } .q-card:hover { border-color: var(--border-med); box-shadow: var(--shadow-sm); } .q-head { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.875rem; flex-wrap: wrap; } .q-num { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-4); } .q-subj-tag { font-size: 0.65rem; padding: 0.16rem 0.45rem; border-radius: var(--r-sm); font-weight: 500; letter-spacing: 0.01em; } .q-subj-tag.math { background: var(--blue-light); color: var(--blue); } .q-subj-tag.physics { background: var(--red-light); color: var(--red); } .q-subj-tag.chemistry{ background: var(--green-light);color: var(--green); } .q-subj-tag.chinese { background: var(--gold-light); color: var(--gold); } .q-diff-tag { font-size: 0.65rem; padding: 0.16rem 0.45rem; border-radius: var(--r-sm); font-weight: 500; border: 1px solid; margin-left: auto; } .q-diff-tag.easy { border-color: #A7F0BA; color: var(--green); background: var(--green-light); } .q-diff-tag.mid { border-color: #FCD97A; color: var(--gold); background: var(--gold-light); } .q-diff-tag.hard { border-color: #FCA5A5; color: var(--red); background: var(--red-light); } .q-text { font-size: 0.93rem; line-height: 1.7; margin-bottom: 1rem; color: var(--ink); } .q-options { display: grid; gap: 0.35rem; } .q-option { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0.875rem; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: all var(--t-fast); background: var(--bg); } .q-option:hover { border-color: rgba(200,55,45,0.35); background: var(--red-light); } .q-option.correct { border-color: var(--green) !important; background: var(--green-light) !important; } .q-option.wrong { border-color: var(--red); background: var(--red-light); opacity: 0.75; } .q-option.selected { border-color: var(--red); background: var(--red-light); } .opt-key { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; min-width: 16px; color: var(--ink-4); padding-top: 1px; } .opt-val { font-size: 0.85rem; line-height: 1.5; } /* ── Question figures (inline SVG charts/diagrams) ── */ .q-figure { display: flex; justify-content: center; margin: 0 0 1rem; padding: 0.75rem; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow-x: auto; } .q-figure svg { max-width: 100%; height: auto; } /* White halo behind figure labels: lines/curves passing under a label no longer strike through the glyphs (paint-order draws the stroke beneath the fill). White-filled labels (letters on colored atoms) are excluded. */ .q-figure svg text:not([fill="#ffffff"]):not([fill="#fff"]):not([fill="white"]) { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; } /* ── Multi-answer ── */ .q-multi-tag { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.45rem; border-radius: 5px; color: var(--gold); background: var(--gold-light); border: 1px solid #FCD97A; } .q-check-btn { margin-top: 0.6rem; } .q-check-btn[disabled] { opacity: 0.5; cursor: default; pointer-events: none; } /* ── HUB (subjects → topics) ───────────────────────────────── */ .qb-hub { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; display: flex; flex-direction: column; gap: 1.25rem; } .hub-cols { display: flex; gap: 1.25rem; align-items: flex-start; } .hub-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; } .hub-center { display: flex; justify-content: center; } .hub-center .hub-card { width: 100%; max-width: calc(50% - 0.625rem); } @media (max-width: 720px) { .hub-cols { flex-direction: column; } .hub-center .hub-card { max-width: none; } } .hub-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg, 16px); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .hub-card-head { width: 100%; display: flex; align-items: center; gap: 0.7rem; padding: 1rem 1.25rem; border: none; cursor: pointer; text-align: left; background: var(--bg); border-bottom: 1px solid var(--border); transition: background var(--t-fast); } .hub-card-head:hover { background: var(--red-light); } .hub-icon { width: 1.75rem; height: 1.75rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-2); } .hub-icon svg { width: 22px; height: 22px; } .hub-icon-math { color: var(--blue); } .hub-icon-physics { color: var(--red); } .hub-icon-chemistry { color: var(--green); } .hub-icon-chinese { color: var(--gold); } .hub-name { font-family: var(--font-display); font-size: 1.15rem; flex: 1; color: var(--ink); } .hub-total { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--ink-3); background: var(--bg-white); border: 1px solid var(--border-med); border-radius: 999px; padding: 0.1rem 0.6rem; } .hub-topics { display: flex; flex-direction: column; padding: 0.5rem; gap: 0.15rem; } .hub-topic { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.75rem; border: none; background: none; cursor: pointer; border-radius: var(--r-md); text-align: left; transition: background var(--t-fast); } .hub-topic:hover { background: var(--bg); } .hub-topic-name { font-size: 0.88rem; color: var(--ink); } .hub-topic-count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); flex-shrink: 0; } /* ── Breadcrumb / back to topics ───────────────────────────── */ .qb-breadcrumb { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; } .qb-back-btn { border: 1px solid var(--border-med); background: var(--bg-white); cursor: pointer; padding: 0.4rem 0.875rem; border-radius: var(--r-md); font-family: var(--font-body); font-size: 0.82rem; color: var(--ink-2); transition: all var(--t-fast); flex-shrink: 0; } .qb-back-btn:hover { border-color: var(--red); color: var(--red); } .qb-crumb { font-size: 0.85rem; color: var(--ink-3); } .q-explain { margin-top: 0.875rem; padding: 0.875rem 1rem; background: var(--gold-light); border-left: 2px solid var(--gold); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 0.83rem; line-height: 1.65; display: none; color: var(--ink-2); } .q-explain.show { display: block; } .q-actions { display: flex; gap: 0.5rem; margin-top: 0.875rem; align-items: center; } .q-bookmark-btn { margin-left: auto; font-size: 0.78rem; cursor: pointer; padding: 0.3rem 0.5rem; background: none; border: none; color: var(--ink-4); border-radius: var(--r-sm); transition: all var(--t-fast); } .q-bookmark-btn:hover, .q-bookmark-btn.saved { color: var(--gold); } /* ═══════════════════════════════════════════════════════ PAST PAPERS ═══════════════════════════════════════════════════════ */ .pp-filters { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1.5rem 0; display: flex; gap: 0.375rem; flex-wrap: wrap; align-items: center; } .pp-filters-label { font-size: 0.75rem; color: var(--ink-4); margin-right: 0.25rem; } .pill { padding: 0.28rem 0.75rem; border-radius: 20px; border: 1px solid var(--border-med); background: var(--bg-white); font-size: 0.77rem; cursor: pointer; color: var(--ink-3); transition: all var(--t-fast); font-family: var(--font-body); box-shadow: var(--shadow-xs); } .pill:hover { background: var(--bg); border-color: var(--border-strong); color: var(--ink); } .pill.active { /* Inverted selected chip — pair the tokens so text flips WITH the background (was hardcoded #fff, which vanished on the light fill in dark mode). */ background: var(--ink); color: var(--bg-white); border-color: var(--ink); box-shadow: var(--shadow-sm); } .pp-grid { max-width: 1280px; margin: 0 auto; padding: 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.875rem; } .pp-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; cursor: pointer; transition: all var(--t-base); display: flex; flex-direction: column; gap: 0.875rem; box-shadow: var(--shadow-xs); } .pp-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); } .pp-year-row { display: flex; align-items: flex-end; justify-content: space-between; } .pp-year { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--ink); } .pp-session { font-size: 0.75rem; color: var(--ink-4); } .pp-subjects { display: flex; gap: 0.3rem; flex-wrap: wrap; } .pp-subj-pill { font-size: 0.65rem; padding: 0.18rem 0.45rem; border-radius: var(--r-sm); border: 1px solid; font-family: var(--font-mono); } .pp-subj-pill.math { background: var(--blue-light); color: var(--blue); border-color: transparent; } .pp-subj-pill.phys { background: var(--red-light); color: var(--red); border-color: transparent; } .pp-subj-pill.chem { background: var(--green-light); color: var(--green); border-color: transparent; } .pp-subj-pill.cn { background: var(--gold-light); color: var(--gold); border-color: transparent; } .pp-meta { display: flex; gap: 0.875rem; } .pp-meta-item { font-size: 0.72rem; color: var(--ink-4); font-family: var(--font-mono); } .pp-score { display: flex; align-items: center; gap: 0.5rem; } .pp-score-label { font-size: 0.7rem; color: var(--ink-4); } .pp-score-val { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; } .pp-card-actions { display: flex; gap: 0.5rem; padding-top: 0.625rem; border-top: 1px solid var(--border); } /* ═══════════════════════════════════════════════════════ FLASHCARDS ═══════════════════════════════════════════════════════ */ .fc-wrapper { max-width: 680px; margin: 0 auto; padding: 2.5rem 1.5rem; } .fc-subj-tabs { display: flex; gap: 0.375rem; margin-bottom: 2rem; flex-wrap: wrap; } .fc-tab { padding: 0.375rem 0.875rem; border-radius: 20px; border: 1px solid var(--border-med); font-size: 0.78rem; cursor: pointer; color: var(--ink-3); background: var(--bg-white); transition: all var(--t-fast); font-family: var(--font-body); font-weight: 450; box-shadow: var(--shadow-xs); } .fc-tab.active { background: var(--ink); color: var(--bg-white); border-color: var(--ink); box-shadow: var(--shadow-sm); } .fc-progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; } .fc-prog-bar { flex: 1; height: 3px; background: var(--border-med); border-radius: 2px; } .fc-prog-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--red) 0%, #E06550 100%); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .fc-prog-text { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-4); white-space: nowrap; } .flashcard { perspective: 1400px; height: 320px; cursor: pointer; margin-bottom: 1.5rem; } .fc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .flashcard.flipped .fc-inner { transform: rotateY(180deg); } .fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.25rem 2rem; text-align: center; overflow: hidden; } .fc-front { background: var(--bg-white); border: 1px solid var(--border); box-shadow: var(--shadow-md); } .fc-front::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--red), var(--gold)); border-radius: var(--r-xl) var(--r-xl) 0 0; } .fc-back { background: var(--surface-inverse); transform: rotateY(180deg); box-shadow: var(--shadow-lg); } .fc-face-label { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1.25rem; } .fc-front .fc-face-label { color: var(--ink-4); } .fc-back .fc-face-label { color: rgba(255,255,255,0.3); } .fc-term { font-family: var(--font-display); font-size: clamp(1.3rem, 3.5vw, 1.75rem); letter-spacing: -0.025em; color: var(--ink); line-height: 1.2; } .fc-def { font-size: 0.88rem; color: rgba(255,255,255,0.82); line-height: 1.75; } .fc-flip-hint { font-size: 0.7rem; color: var(--ink-4); margin-top: 1.25rem; } .fc-controls { display: flex; gap: 0.625rem; justify-content: center; } .fc-btn { padding: 0.65rem 1.35rem; border-radius: var(--r-md); font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; cursor: pointer; border: 1.5px solid var(--border-med); background: var(--bg-white); color: var(--ink); transition: all var(--t-fast); box-shadow: var(--shadow-xs); } .fc-btn:hover { background: var(--bg); box-shadow: var(--shadow-sm); } .fc-btn.know { border-color: var(--green); color: var(--green); background: var(--green-light); } .fc-btn.know:hover { background: #C0EEDD; } .fc-btn.skip { border-color: var(--red); color: var(--red); background: var(--red-light); } .fc-btn.skip:hover { background: #FDDCDB; } /* ═══════════════════════════════════════════════════════ PROGRESS ═══════════════════════════════════════════════════════ */ .prog-layout { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; } .prog-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.875rem; margin-bottom: 2rem; } .prog-stat { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem; box-shadow: var(--shadow-xs); transition: box-shadow var(--t-base); } .prog-stat:hover { box-shadow: var(--shadow-sm); } .prog-stat-label { font-size: 0.67rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-4); margin-bottom: 0.5rem; } .prog-stat-val { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.25rem; } .prog-stat-sub { font-size: 0.72rem; color: var(--ink-4); } .prog-section-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.02em; } .topic-bars { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.375rem; box-shadow: var(--shadow-xs); } .tb-row { display: grid; grid-template-columns: 1fr 1fr 56px; gap: 1rem; align-items: center; padding: 0.625rem 0; border-bottom: 1px solid var(--border); } .tb-row:last-child { border-bottom: none; } .tb-name { font-size: 0.85rem; color: var(--ink-2); } .tb-track { height: 4px; background: var(--border-med); border-radius: 2px; overflow: hidden; } .tb-fill { height: 100%; border-radius: 2px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); } .tb-pct { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-4); text-align: right; } /* ═══════════════════════════════════════════════════════ MODAL ═══════════════════════════════════════════════════════ */ .modal-bg { position: fixed; inset: 0; background: rgba(15,17,23,0.5); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity var(--t-base); backdrop-filter: blur(4px); } .modal-bg.open { opacity: 1; pointer-events: all; } .modal { background: var(--bg-white); border-radius: var(--r-xl); padding: 2rem; max-width: 580px; width: 100%; max-height: 88vh; overflow-y: auto; transform: translateY(12px) scale(0.98); transition: transform var(--t-base); box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .modal-bg.open .modal { transform: translateY(0) scale(1); } .modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; } .modal-close { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 0.85rem; cursor: pointer; color: var(--ink-3); padding: 0.3rem 0.5rem; transition: all var(--t-fast); box-shadow: var(--shadow-xs); } .modal-close:hover { color: var(--ink); background: var(--border); } /* ── Auth modal (shared by every page's Sign In / gate modal) ── Single source of truth: pages used to re-declare these inline, but paper-exam.html and app.html rely on this block alone. */ .auth-modal { max-width: 420px; } .auth-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; } .auth-tab { flex: 1; padding: 0.625rem; border: none; background: none; cursor: pointer; font-family: var(--font-body); font-size: 0.875rem; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; } .auth-tab.active { color: var(--red); border-bottom-color: var(--red); font-weight: 500; } .auth-field { margin-bottom: 1rem; } .auth-label { font-size: 0.78rem; color: var(--ink-2); margin-bottom: 0.375rem; display: block; font-weight: 500; } .auth-input { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--border-med); border-radius: var(--r-md); font-family: var(--font-body); font-size: 0.9rem; background: var(--bg-white); color: var(--ink); outline: none; transition: border-color 0.15s; } .auth-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,55,45,0.1); } .auth-error { color: var(--red); font-size: 0.8rem; margin-bottom: 0.875rem; display: none; } .auth-error.show { display: block; } .auth-success { color: var(--green); font-size: 0.85rem; margin-bottom: 0.875rem; display: none; } .auth-success.show { display: block; } .modal-section { margin-bottom: 1.5rem; } .modal-section-title { font-size: 0.65rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-4); margin-bottom: 0.75rem; } .modal-pills { display: flex; gap: 0.375rem; flex-wrap: wrap; } .modal-footer { border-top: 1px solid var(--border); padding-top: 1.25rem; display: flex; gap: 0.75rem; } /* ═══════════════════════════════════════════════════════ EXAM TIMER BAR ═══════════════════════════════════════════════════════ */ .exam-bar { display: none; position: sticky; top: 56px; z-index: 90; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-xs); } .exam-bar.show { display: block; } .exam-bar-inner { max-width: 1280px; margin: 0 auto; padding: 0.55rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; } .exam-counter { font-size: 0.78rem; color: var(--ink-3); font-family: var(--font-mono); } .exam-timer { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; color: var(--red); margin-left: auto; letter-spacing: 0.02em; } .exam-timer.warning { animation: pulse 1s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.45} } /* ═══════════════════════════════════════════════════════ EXAM CONFIRM MODAL ═══════════════════════════════════════════════════════ */ .exam-confirm-modal { max-width:460px; } .exam-confirm-icon { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#c8372d,#e85d4a); display:flex; align-items:center; justify-content:center; font-size:1.75rem; margin:0 auto 1.25rem; } .exam-confirm-title { font-family:var(--font-display); font-size:1.5rem; text-align:center; margin-bottom:0.5rem; } .exam-confirm-sub { text-align:center; color:var(--ink-2); font-size:0.875rem; line-height:1.6; margin-bottom:1.5rem; } .exam-rules { background:var(--bg); border-radius:10px; padding:1rem 1.25rem; margin-bottom:1.5rem; display:flex; flex-direction:column; gap:0.5rem; } .exam-rule { display:flex; align-items:center; gap:0.625rem; font-size:0.82rem; color:var(--ink-2); } .exam-rule-dot { width:6px; height:6px; border-radius:50%; background:var(--red); flex-shrink:0; } .exam-subject-select { margin-bottom:1.25rem; } .exam-subject-label { font-size:0.78rem; color:var(--ink-2); font-weight:500; display:block; margin-bottom:0.5rem; } .exam-subject-btns { display:flex; flex-wrap:wrap; gap:0.5rem; } .exam-subj-btn { flex:1; min-width:90px; padding:0.5rem 0.75rem; border:1px solid var(--border-med); border-radius:8px; background:var(--bg-white); cursor:pointer; font-size:0.82rem; font-family:var(--font-body); color:var(--ink-2); transition:all 0.15s; text-align:center; } .exam-subj-btn:hover { border-color:var(--red); color:var(--red); } .exam-subj-btn.active { border-color:var(--red); background:rgba(200,55,45,0.07); color:var(--red); font-weight:500; } .exam-confirm-actions { display:flex; gap:0.75rem; } .exam-confirm-actions .btn { flex:1; justify-content:center; } /* ═══════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════ */ .footer { border-top: 1px solid var(--border); padding: 2rem 1.5rem; } .footer-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .footer p { font-size: 0.75rem; color: var(--ink-4); } .footer-links { display: flex; gap: 1rem; margin-left: auto; } .footer-links a { font-size: 0.75rem; color: var(--ink-4); text-decoration: none; transition: color var(--t-fast); } .footer-links a:hover { color: var(--ink-2); } /* ═══════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════ */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero-card { display: none; } .qb-layout { grid-template-columns: 1fr; } .sidebar { position: static; } .nav-links { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ═══════════════════════════════════════════════════════ IMPECCABLE — Product register additions Applied per product.md: Inter-only for UI data, tighter scale, committed states, skeleton loaders ═══════════════════════════════════════════════════════ */ /* Override: Playfair only on page/hero titles — NOT on data */ .prog-stat-val, .pp-year, .rs-val, .info-card-value { font-family: var(--font-body); letter-spacing: -0.03em; } /* Tighter product scale (1.125 ratio, fixed rem) */ .page-header h1 { font-size: 1.625rem; } /* 26px */ .section-title { font-size: 1.375rem; } /* 22px */ .prog-stat-val { font-size: 1.875rem; } /* 30px */ .info-card-value { font-size: 1.375rem; } /* 22px */ /* ── Full interactive states on all inputs ─────────── */ .q-option:focus-visible, .filter-btn:focus-visible, .btn:focus-visible, .btn-nav:focus-visible, .fc-btn:focus-visible, .pill:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .filter-btn:active { transform: scale(0.97); } .btn-primary:active, .btn-ghost:active { transform: scale(0.98); } .subject-card:active { transform: translateY(-1px); } /* Disabled states */ .btn[disabled], .btn-nav[disabled], .fc-btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* ── Skeleton loader — product standard ────────────── */ .skeleton-block { background: linear-gradient( 90deg, var(--border) 0%, rgba(15,17,23,0.04) 40%, var(--border) 80% ); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: var(--r-md); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 4px; } .skeleton-title { height: 22px; margin-bottom: 12px; width: 60%; border-radius: 4px; } .skeleton-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem; margin-bottom: 0.75rem; } /* ── Empty state — teaches, not abandons ───────────── */ .empty-state { padding: 3rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .empty-state-icon { width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 0.25rem; } .empty-state-title { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .empty-state-desc { font-size: 0.825rem; color: var(--ink-3); max-width: 320px; line-height: 1.6; } /* ── More committed density on sidebar ─────────────── */ .sidebar { padding: 0.875rem; } .filter-btn { padding: 0.35rem 0.5rem; font-size: 0.8rem; } .sidebar-section-title { font-size: 0.6rem; padding: 0.25rem 0.25rem 0.125rem; } /* ── Question card — tighter, denser ───────────────── */ .q-card { padding: 1.125rem; } .q-text { font-size: 0.9rem; margin-bottom: 0.875rem; } .opt-val { font-size: 0.83rem; } .q-option { padding: 0.5rem 0.75rem; } /* ── Progress stat: Inter weight hierarchy ──────────── */ .prog-stat-label { letter-spacing: 0.06em; } .prog-stat-val { font-weight: 700; color: var(--ink); } .prog-stat-sub { color: var(--ink-4); } /* ── Consistent button vocabulary (no shape variance) ─ */ .btn, .btn-primary, .btn-ghost, .btn-sm, .btn-nav { border-radius: var(--r-md); } .fc-btn, .fc-tab, .pill { border-radius: var(--r-md); } /* ── Motion: 150–250ms product range ───────────────── */ :root { --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* No orchestrated load sequences */ .hero, .section, .q-card, .subject-card { animation: none; } /* ── Contrast fix: muted text must pass 4.5:1 ──────── */ .nav-links a { color: var(--ink-2); } /* was ink-3 — too light */ .subj-desc { color: var(--ink-2); } .hero-desc { color: var(--ink-2); } .filter-btn { color: var(--ink-2); } .q-text { color: var(--ink); } .opt-val { color: var(--ink); } .tool-desc { color: rgba(255,255,255,0.6); } /* was .45 — too light on dark bg */ /* ── Accent discipline: red only for actions/states ── */ /* Remove decorative red from non-interactive elements */ .hero-eyebrow-dot { background: var(--red); } /* intent: status indicator — keep */ .exam-timer { color: var(--red); } /* intent: urgency state — keep */ .nav-links a.active { color: var(--red); } /* intent: selection state — keep */ /* ── Reduced motion ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .skeleton-block { animation: none; background: var(--border); } .fc-inner { transition: none; } .subject-card { transition: border-color var(--t-fast); } .subject-card:hover { transform: none; box-shadow: var(--shadow-sm); } } /* ═══════════════════════════════════════════════════════ DARK MODE — warm "Deep Midnight" palette (toggle via sidebar) Most components read CSS vars, so they adapt automatically. Activated by html[data-theme="dark"] (set in supabase-client.js). ═══════════════════════════════════════════════════════ */ html[data-theme="dark"] { /* Brand — brighten red for contrast on dark surfaces */ --red: #E5564A; --red-light: rgba(229,86,74,0.16); --red-mid: #EC6256; --red-dark: #C8372D; /* Warm neutrals — text light, surfaces deep warm-brown */ --ink: #F4EAE7; --ink-2: #DBC9C3; --ink-3: #B6A09A; --ink-4: #8C746E; --bg: #1A1310; --bg-white: #241A16; --bg-raised: #2D211C; /* Stays a deep warm tone in dark mode so inverse surfaces remain dark. */ --surface-inverse: #2D211C; --on-inverse: #F4EAE7; --border: rgba(255,255,255,0.10); --border-med: rgba(255,255,255,0.17); --border-strong: rgba(255,255,255,0.28); /* Semantic — translucent tints so they read on dark */ --green: #3FBF86; --green-light: rgba(13,122,78,0.22); --blue: #7FA0FF; --blue-light: rgba(80,120,240,0.18); --gold: #E0A33C; --gold-light: rgba(180,120,40,0.22); /* Deeper ambient shadows */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3); --shadow: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -1px rgba(0,0,0,0.3); --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.55), 0 4px 6px -2px rgba(0,0,0,0.3); --shadow-lg: 0 20px 28px -5px rgba(0,0,0,0.6), 0 10px 12px -5px rgba(0,0,0,0.35); --shadow-red: 0 4px 16px rgba(229,86,74,0.30); color-scheme: dark; } /* Base surfaces + known hardcoded whites that don't use vars */ html[data-theme="dark"] body { background: var(--bg); color: var(--ink); } html[data-theme="dark"] .nav { background: rgba(26,19,16,0.95); border-bottom-color: var(--border); } html[data-theme="dark"] .nav .btn-nav { background: var(--red); color: #fff; } html[data-theme="dark"] .app-main { background: var(--bg); } html[data-theme="dark"] .page-header { background: var(--bg-raised); border-color: var(--border); } /* Inputs / modals */ html[data-theme="dark"] .auth-input, html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--bg-raised); color: var(--ink); border-color: var(--border-med); } html[data-theme="dark"] .modal, html[data-theme="dark"] .auth-modal { background: var(--bg-white); color: var(--ink); } /* Landing "dark band" sections use var(--ink) as background to stay dark in LIGHT mode. In DARK mode --ink flips to a light tone, which would turn the band light while its text stays #fff (unreadable). Pin a deep tone instead. */ html[data-theme="dark"] .section-dark { background: #140E0B; } html[data-theme="dark"] .section-dark .tools-grid { background: rgba(255,255,255,0.08); } /* ═══ SOLVER (Step 2 — one question at a time) ════════════════════ */ .solver-info { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--ink-2); padding: 0.6rem 0.875rem; margin-bottom: 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); } .solver-info .si-sep { color: var(--ink-4); } .solver-info .si-item { font-weight: 500; color: var(--ink); } .solver-info .si-diff { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 5px; border: 1px solid transparent; } .solver-info .si-diff.easy { color: var(--green); background: var(--green-light); border-color: #A7F0BA; } .solver-info .si-diff.mid { color: var(--gold); background: var(--gold-light); border-color: #FCD97A; } .solver-info .si-diff.hard { color: var(--red); background: var(--red-light); border-color: #FCA5A5; } .solver-info .si-src { color: var(--ink-2); } .qb-help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; cursor: pointer; font-size: 0.62rem; font-weight: 700; color: #fff; background: var(--ink-3); vertical-align: middle; transition: background var(--t-fast); } .qb-help:hover { background: var(--red); } .qb-help-pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 260px; z-index: 50; background: var(--surface-inverse); color: var(--on-inverse); font-size: 0.74rem; font-weight: 400; line-height: 1.5; text-align: left; padding: 0.6rem 0.75rem; border-radius: 8px; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: opacity var(--t-fast), visibility var(--t-fast); pointer-events: none; } .qb-help-pop::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--surface-inverse); } .qb-help:hover .qb-help-pop, .qb-help:focus .qb-help-pop, .qb-help.show .qb-help-pop { opacity: 1; visibility: visible; } .solver-passage { background: var(--bg-white); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: var(--r-md); padding: 0.875rem 1rem; margin-bottom: 0.75rem; font-size: 0.9rem; line-height: 1.7; color: var(--ink); } .solver-navbtns { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1rem 0 0.75rem; } .solver-pos { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-3); } .solver-navigator { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-top: 0.75rem; border-top: 1px solid var(--border); } .nav-cell { width: 30px; height: 30px; padding: 0; border-radius: 7px; cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; border: 1px solid var(--border-med); background: var(--bg-white); color: var(--ink-2); transition: all 0.12s; } .nav-cell:hover { transform: translateY(-1px); } .nav-cell.easy { border-color: #A7F0BA; } .nav-cell.mid { border-color: #FCD97A; } .nav-cell.hard { border-color: #FCA5A5; } .nav-cell.done-correct { background: var(--green-light); border-color: var(--green); color: var(--green); } .nav-cell.done-wrong { background: var(--red-light); border-color: var(--red); color: var(--red); } .nav-cell.done-mixed { background: var(--gold-light); border-color: var(--gold); color: var(--gold); } .nav-cell.current { outline: 2px solid var(--ink); outline-offset: 1px; color: var(--ink); font-weight: 700; } /* ═══ HUB filter + definition (Step: filter on landing) ═══════════ */ .hub-def { max-width: 1100px; margin: 0 auto 1rem; padding: 0.875rem 1rem; display: flex; gap: 0.7rem; align-items: flex-start; background: var(--blue-light); border: 1px solid #c7d2fe; border-radius: var(--r-md); font-size: 0.82rem; line-height: 1.55; color: var(--ink-2); } .hub-def-q { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .hub-filter { max-width: 1100px; margin: 0 auto 1.25rem; padding: 0.875rem 1rem; background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-md); } .hf-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap; } .hf-row:last-of-type { margin-bottom: 0; } .hf-label { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-4); width: 70px; flex-shrink: 0; } .hf-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; } .hf-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border: 1px solid var(--border-med); border-radius: 20px; background: var(--bg-white); cursor: pointer; font-size: 0.8rem; color: var(--ink-2); font-family: var(--font-body); transition: all var(--t-fast); } .hf-btn:hover { border-color: var(--red); color: var(--red); } .hf-btn.active { background: var(--red-light); border-color: var(--red); color: var(--red); font-weight: 500; } .hf-btn em { font-style: normal; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-4); } .hf-btn.active em { color: var(--red); } .hf-note { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border-med); font-size: 0.76rem; color: var(--ink-3); line-height: 1.5; } .hf-note a { color: var(--red); } .hub-empty { padding: 0.6rem 0.875rem; font-size: 0.8rem; color: var(--ink-4); } .auth-gate-note { background: var(--gold-light); border: 1px solid #FCD97A; border-radius: 8px; padding: 0.625rem 0.75rem; margin-bottom: 1rem; font-size: 0.8rem; color: var(--ink-2); line-height: 1.5; } .auth-gate-note a { color: var(--red); font-weight: 500; } /* ═══ SOLVER tools (Step 3): highlighter, strike-out, per-Q timer ═══ */ .solver-tools { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .tool-btn { padding: 0.35rem 0.7rem; border: 1px solid var(--border-med); border-radius: 20px; background: var(--bg-white); cursor: pointer; font-size: 0.78rem; color: var(--ink-2); font-family: var(--font-body); transition: all var(--t-fast); } .tool-btn:hover { border-color: var(--red); color: var(--red); } .tool-btn.active { background: #FEF3C7; border-color: var(--gold); color: var(--gold); font-weight: 500; } .q-timer { margin-left: auto; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2); background: var(--bg); border: 1px solid var(--border-med); border-radius: 20px; padding: 0.3rem 0.7rem; } body.hl-cursor .q-text, body.hl-cursor .solver-passage { cursor: text; } mark.hl { background: #FFEC99; color: inherit; border-radius: 2px; cursor: pointer; padding: 0 1px; } /* per-option eliminate (✗) */ .q-option { position: relative; } .opt-strike { margin-left: auto; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-med); background: var(--bg-white); color: var(--ink-4); cursor: pointer; font-size: 0.7rem; line-height: 1; opacity: 0; transition: all var(--t-fast); } .q-option:hover .opt-strike { opacity: 1; } .opt-strike:hover { border-color: var(--red); color: var(--red); } .q-option.struck { opacity: 0.5; } .q-option.struck .opt-val { text-decoration: line-through; color: var(--ink-4); } .q-option.struck .opt-strike { opacity: 1; border-color: var(--red); color: var(--red); } /* ═══ FLASHCARD DECKS (My Decks) ═════════════════════════════════ */ .fc-mode-tabs { display:flex; gap:0.5rem; margin-bottom:1.5rem; } .fc-mode-btn { padding:0.4rem 1rem; border:1px solid var(--border-med); border-radius:999px; background:var(--bg-white); cursor:pointer; font-family:var(--font-body); font-size:0.85rem; color:var(--ink-2); transition:all var(--t-fast); } .fc-mode-btn:hover { border-color:var(--red); color:var(--red); } .fc-mode-btn.active { background:var(--red); border-color:var(--red); color:#fff; font-weight:500; } .fc-decks-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; } .fc-decks-title { font-family:var(--font-display); font-size:1.5rem; } .fc-deck-card { display:flex; align-items:center; gap:0.75rem; padding:0.875rem 1rem; margin-bottom:0.6rem; background:var(--bg-white); border:1px solid var(--border); border-radius:var(--r-md); } .fc-deck-info { flex:1; cursor:pointer; min-width:0; } .fc-deck-name { font-weight:600; } .fc-deck-desc { font-size:0.8rem; color:var(--ink-3); margin-top:0.15rem; } .fc-deck-actions { display:flex; gap:0.4rem; flex-shrink:0; } .fc-field { margin-bottom:0.875rem; } .fc-field label { display:block; font-size:0.78rem; color:var(--ink-2); font-weight:500; margin-bottom:0.35rem; } .fc-img { max-width:100%; max-height:180px; border-radius:8px; margin-bottom:0.5rem; } .fc-mini-img { height:34px; width:auto; border-radius:4px; vertical-align:middle; } .fc-card-row { display:flex; align-items:center; gap:0.6rem; padding:0.55rem 0.75rem; border:1px solid var(--border); border-radius:8px; margin-bottom:0.4rem; background:var(--bg-white); } .fc-card-side { flex:1; min-width:0; font-size:0.85rem; overflow:hidden; } .fc-card-arrow { color:var(--ink-4); } .fc-card-del { width:24px; height:24px; border-radius:50%; border:1px solid var(--border-med); background:var(--bg-white); cursor:pointer; color:var(--ink-3); font-size:0.7rem; flex-shrink:0; } .fc-card-del:hover { border-color:var(--red); color:var(--red); } .fc-addcard { margin-top:1.25rem; padding:1rem; border:1px dashed var(--border-med); border-radius:var(--r-md); background:var(--bg); } .fc-addcard-title { font-weight:600; margin-bottom:0.75rem; } .fc-addcard-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } @media (max-width:600px){ .fc-addcard-grid { grid-template-columns:1fr; } } .fc-side-label { font-size:0.72rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.35rem; } .fc-upload { display:inline-block; margin-top:0.4rem; padding:0.35rem 0.7rem; font-size:0.78rem; border:1px solid var(--border-med); border-radius:8px; cursor:pointer; color:var(--ink-2); background:var(--bg-white); } .fc-upload:hover { border-color:var(--red); color:var(--red); } .fc-prev { margin-top:0.4rem; display:flex; align-items:center; gap:0.4rem; font-size:0.78rem; color:var(--ink-3); } /* ═══ Flashcard keyboard-shortcut hint ═══════════════════════════ */ .fc-keyhint { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0.5rem 1rem; margin-top:1.25rem; padding:0.7rem 1rem; background:var(--bg-white); border:1px solid var(--border); border-radius:999px; box-shadow:var(--shadow-xs); } .fc-keyhint-label { font-family:var(--font-mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-4); padding-right:0.25rem; } .fc-key-group { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.78rem; color:var(--ink-2); } .fc-keyhint kbd { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 0.4rem; font-family:var(--font-mono); font-size:0.72rem; font-weight:600; color:var(--ink); background:var(--bg); border:1px solid var(--border-med); border-bottom-width:2px; border-radius:6px; } .fc-keyhint kbd.ok { color:var(--green); border-color:#A7F0BA; background:var(--green-light); } .fc-keyhint kbd.no { color:var(--red); border-color:#FCA5A5; background:var(--red-light); } @media (max-width:600px){ .fc-keyhint { border-radius:14px; } } /* ═══ Flashcard image lightbox ═══════════════════════════════════ */ .fc-img { cursor: zoom-in; } .fc-lightbox { display: none; position: fixed; inset: 0; z-index: 400; background: rgba(15,17,23,0.88); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; } .fc-lightbox.show { display: flex; } .fc-lightbox img { max-width: 95vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .fc-lightbox-close { position: fixed; top: 1.1rem; right: 1.25rem; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: #fff; font-size: 1rem; cursor: pointer; } .fc-lightbox-close:hover { background: rgba(255,255,255,0.28); }