/* ============================================================ ReviseKit UI Overhaul Scoped under .rk-v2 on for safe override. Revert: remove class="rk-v2" from . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap'); /* ============================================================ SESSION 1 — Foundation: Geist font + minor refinements Keep original dark colour scheme. Only change font + fix easy rating. ============================================================ */ .rk-v2 { /* Font: Geist (only change from original palette) */ --font-heading: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Fix rating-easy: was red (same as again), now violet for distinction */ --rating-easy: #6B52F5; /* Base typography */ font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ SESSION 2 — Navbar Clean up the navbar: sharper bg, accent branding, cleaner buttons. Keep dark theme. Keep all existing functionality. ============================================================ */ /* Navbar container — solid dark instead of translucent blur */ .rk-v2 .navbar { background: rgba(8, 14, 28, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* Widen inner to match new content width */ .rk-v2 .nav-inner { max-width: 100%; padding: 0 20px; } /* Brand — accent glow on icon, clean gradient text */ .rk-v2 .brand-icon { filter: drop-shadow(0 0 8px rgba(107, 82, 245, 0.5)); } .rk-v2 .brand-text { background: linear-gradient(135deg, #fff 0%, #A78BFA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; letter-spacing: -0.3px; } /* Beta tag — violet instead of orange */ .rk-v2 .beta-tag { background: rgba(107, 82, 245, 0.2); color: #A78BFA; border: 1px solid rgba(107, 82, 245, 0.3); box-shadow: none; } /* Nav buttons — cleaner, no border by default */ .rk-v2 .nav-btn { border: 1px solid transparent; background: transparent; color: rgba(255, 255, 255, 0.45); border-radius: 8px; transition: all 0.15s ease; } .rk-v2 .nav-btn:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); border-color: transparent; } .rk-v2 .nav-btn.active { color: #A78BFA; background: rgba(107, 82, 245, 0.1); border-color: rgba(107, 82, 245, 0.2); } /* Nav button labels */ .rk-v2 .nav-btn-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; } /* PRO badge — violet accent */ .rk-v2 .nav-pro-btn { background: rgba(107, 82, 245, 0.1) !important; border: 1px solid rgba(107, 82, 245, 0.25) !important; } .rk-v2 .nav-pro-btn:hover { background: rgba(107, 82, 245, 0.18) !important; box-shadow: 0 0 12px rgba(107, 82, 245, 0.2); } .rk-v2 .pro-badge-text { background: linear-gradient(135deg, #A78BFA, #6B52F5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; letter-spacing: 1px; } /* Sign in button — violet accent */ .rk-v2 .nav-signin-btn, .rk-v2 .nav-signin-btn.nav-signin-btn-guest { background: rgba(107, 82, 245, 0.12); color: #C4B5FD; border: 1px solid rgba(107, 82, 245, 0.25); border-radius: 8px; font-family: var(--font-body); font-weight: 500; transition: all 0.15s ease; } .rk-v2 .nav-signin-btn:hover, .rk-v2 .nav-signin-btn.nav-signin-btn-guest:hover { background: rgba(107, 82, 245, 0.2); color: #DDD6FE; border-color: rgba(107, 82, 245, 0.4); box-shadow: none; } /* User avatar — violet */ .rk-v2 .user-avatar-btn { background: #6B52F5; } /* User dropdown — cleaner */ .rk-v2 .user-dropdown { background: var(--bg-elevated); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .rk-v2 .user-dropdown-item:hover { background: rgba(255, 255, 255, 0.05); } .rk-v2 .plan-badge.plan-free { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); } .rk-v2 .plan-badge.plan-pro { background: rgba(107, 82, 245, 0.15); color: #A78BFA; } /* Shortcuts popover — match dropdown style */ .rk-v2 .shortcuts-popover { background: var(--bg-elevated); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .rk-v2 .shortcuts-popover kbd { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; } /* Bottom nav — match navbar style */ .rk-v2 .bottom-nav { background: rgba(8, 14, 28, 0.96); border-top: 1px solid rgba(255, 255, 255, 0.06); max-width: 100%; } .rk-v2 .bottom-nav-item { color: rgba(255, 255, 255, 0.35); font-family: var(--font-body); } .rk-v2 .bottom-nav-item.active { color: #A78BFA; } .rk-v2 .bottom-nav-item:hover { color: rgba(255, 255, 255, 0.65); } /* Beta banner — violet tint instead of orange */ .rk-v2 .beta-banner { border: 1px solid rgba(107, 82, 245, 0.3); background: linear-gradient(140deg, rgba(107, 82, 245, 0.12), rgba(107, 82, 245, 0.06)); color: #DDD6FE; } .rk-v2 .beta-banner-dismiss { border: 1px solid rgba(167, 139, 250, 0.3); color: #C4B5FD; background: rgba(107, 82, 245, 0.15); } .rk-v2 .beta-banner-dismiss:hover { background: rgba(107, 82, 245, 0.25); } /* ============================================================ SESSION 3 — Home screen: hero, stats, CTAs, search Violet accent throughout. Cleaner cards. Better typography. ============================================================ */ /* Hero title — Geist with tight tracking */ .rk-v2 .hero-title { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.5px; } /* Hero CTA — violet instead of cyan */ .rk-v2 .hero-primary-cta { background: linear-gradient(135deg, #7C3AED, #6B52F5); color: #FFFFFF; box-shadow: 0 8px 20px rgba(107, 82, 245, 0.3); border-radius: 10px; font-family: var(--font-heading); font-weight: 600; } .rk-v2 .hero-primary-cta:hover { box-shadow: 0 12px 28px rgba(107, 82, 245, 0.4); } .rk-v2 .hero-primary-cta:focus-visible { outline: 2px solid rgba(107, 82, 245, 0.8); outline-offset: 3px; } /* Streak badge — violet glow on number */ .rk-v2 .streak-num { color: #A78BFA; text-shadow: 0 0 12px rgba(107, 82, 245, 0.4); } /* Quick stats — violet accent on values */ .rk-v2 .qstat { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; transition: all 0.15s ease; } .rk-v2 .qstat:hover { border-color: rgba(107, 82, 245, 0.2); } .rk-v2 .qstat-val { color: #C4B5FD; font-family: var(--font-heading); } .rk-v2 .qstat-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.5px; } /* Study All button — violet instead of red */ .rk-v2 .study-all-btn { background: linear-gradient(135deg, rgba(107, 82, 245, 0.12), rgba(107, 82, 245, 0.05)); border: 1px solid rgba(107, 82, 245, 0.25); border-radius: 12px; transition: all 0.15s ease; } .rk-v2 .study-all-btn::before { background: linear-gradient(135deg, rgba(107, 82, 245, 0.08), transparent); } .rk-v2 .study-all-btn:hover { box-shadow: 0 0 20px rgba(107, 82, 245, 0.15); } .rk-v2 .study-all-icon { background: #6B52F5; color: #FFFFFF; box-shadow: 0 4px 14px rgba(107, 82, 245, 0.35); border-radius: 10px; } .rk-v2 .study-all-title { font-family: var(--font-heading); font-weight: 600; } .rk-v2 .study-all-arrow { color: #A78BFA; } /* Learn Mode CTA — subtler violet variant */ .rk-v2 .home-learn-cta { background: linear-gradient(135deg, rgba(107, 82, 245, 0.06), rgba(107, 82, 245, 0.02)); border-color: rgba(107, 82, 245, 0.15); } .rk-v2 .home-learn-cta::before { background: linear-gradient(135deg, rgba(107, 82, 245, 0.06), transparent); } .rk-v2 .home-learn-cta .study-all-icon { background: rgba(107, 82, 245, 0.2); color: #A78BFA; box-shadow: 0 4px 14px rgba(107, 82, 245, 0.15); } .rk-v2 .home-learn-cta .study-all-arrow { color: rgba(167, 139, 250, 0.7); } /* Search bar — cleaner */ .rk-v2 .search-bar { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; transition: border-color 0.15s ease; } .rk-v2 .search-bar:focus-within { border-color: rgba(107, 82, 245, 0.3); } .rk-v2 .search-input { font-family: var(--font-body); } .rk-v2 .search-results { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } /* Section label — consistent typography */ .rk-v2 .section-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.8px; } /* Daily revision block — violet tint */ .rk-v2 .daily-revision-block { background: linear-gradient(160deg, rgba(107, 82, 245, 0.1), rgba(107, 82, 245, 0.04)); border: 1px solid rgba(107, 82, 245, 0.2); border-radius: 12px; } .rk-v2 .daily-revision-focus { font-family: var(--font-heading); color: #DDD6FE; } .rk-v2 .daily-revision-cta { background: linear-gradient(135deg, #7C3AED, #6B52F5); color: #FFFFFF; border-radius: 8px; } .rk-v2 .daily-revision-cta:hover { box-shadow: 0 8px 20px rgba(107, 82, 245, 0.3); } /* Resume session block — violet tint */ .rk-v2 .resume-session-block { background: linear-gradient(160deg, rgba(107, 82, 245, 0.08), rgba(59, 130, 246, 0.05)); border: 1px solid rgba(107, 82, 245, 0.18); border-radius: 12px; } .rk-v2 .resume-session-source { font-family: var(--font-heading); color: #DDD6FE; } .rk-v2 .resume-session-cta { background: linear-gradient(135deg, #6B52F5, #7C3AED); color: #FFFFFF; border-radius: 8px; } /* Daily challenge card — violet accent */ .rk-v2 .daily-challenge-card { border: 1px solid rgba(107, 82, 245, 0.2); border-radius: 12px; } /* Weak topic cards — cleaner */ .rk-v2 .weak-topic-card { border-radius: 10px; transition: all 0.15s ease; } .rk-v2 .weak-topic-card:hover { border-color: rgba(107, 82, 245, 0.25); } /* Board + tier pills — violet active state */ .rk-v2 .board-pill, .rk-v2 .tier-pill { border-radius: 99px; transition: all 0.12s ease; } .rk-v2 .board-pill.active, .rk-v2 .tier-pill.active { background: rgba(107, 82, 245, 0.12); border-color: rgba(107, 82, 245, 0.3); color: #C4B5FD; } /* Exam date picker */ .rk-v2 .edp-input { border-radius: 8px; font-family: var(--font-body); } .rk-v2 .edp-input:focus { border-color: rgba(107, 82, 245, 0.4); box-shadow: 0 0 0 3px rgba(107, 82, 245, 0.1); } /* Home extras toggle */ .rk-v2 .home-extras-toggle { color: #A78BFA; border-radius: 8px; font-family: var(--font-body); font-weight: 500; } .rk-v2 .home-extras-toggle:hover { background: rgba(107, 82, 245, 0.08); } /* Home extra buttons — consistent card style */ .rk-v2 .home-extra-btn { border-radius: 12px; transition: all 0.15s ease; } .rk-v2 .home-extra-btn:hover { border-color: rgba(107, 82, 245, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .rk-v2 .home-extra-title { font-family: var(--font-heading); font-weight: 600; } /* ============================================================ SESSION 4 — Subject cards + Topic screen + Screen headers ============================================================ */ /* Subject grid — 2 columns on wider screens */ .rk-v2 .subject-grid { gap: 10px; } /* Subject card — cleaner hover, violet accent left border glow */ .rk-v2 .subject-card { border-radius: 12px; transition: all 0.15s ease; } .rk-v2 .subject-card::before { /* Keep the 3px left subject-color bar from style.css */ } .rk-v2 .subject-card:hover { transform: translateX(2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.12); } .rk-v2 .subject-card:active { transform: translateX(1px); } /* Subject icon wrap — slightly tighter radius */ .rk-v2 .subject-icon-wrap { border-radius: 10px; } /* Subject name — Geist */ .rk-v2 .subject-name { font-family: var(--font-heading); font-weight: 600; font-size: 16px; } /* Subject meta */ .rk-v2 .subject-meta { font-size: 12px; font-family: var(--font-body); } /* Progress ring track — slightly more visible */ .rk-v2 .ring-track { stroke: rgba(255, 255, 255, 0.06); } /* Ring label — Geist */ .rk-v2 .ring-label { font-family: var(--font-heading); font-weight: 600; } /* Lock overlay — cleaner */ .rk-v2 .subject-lock-overlay { border-radius: 12px; } /* Recommended badge — violet */ .rk-v2 .subject-recommended-badge { background: rgba(107, 82, 245, 0.15); color: #A78BFA; border-radius: 99px; font-family: var(--font-body); font-weight: 500; font-size: 11px; } /* Mastered star */ .rk-v2 .subject-mastered-count { color: #A78BFA; } /* ---- Screen headers ---- */ .rk-v2 .screen-header { gap: 12px; } .rk-v2 .screen-title { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.3px; } .rk-v2 .screen-sub { font-family: var(--font-body); } /* Back button — cleaner, transparent default */ .rk-v2 .back-btn { border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.03); border-radius: 8px; transition: all 0.12s ease; } .rk-v2 .back-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); } /* Breadcrumb — cleaner */ .rk-v2 .hierarchy-breadcrumb { border: 1px solid rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.02); border-radius: 8px; } .rk-v2 .crumb-trail { font-family: var(--font-body); } /* ---- Topics screen ---- */ /* Study subject button — violet hover */ .rk-v2 .study-subject-btn { border-radius: 10px; font-family: var(--font-heading); font-weight: 600; transition: all 0.12s ease; } .rk-v2 .study-subject-btn:hover { border-color: rgba(107, 82, 245, 0.25); } /* Topic cards — cleaner with violet hover */ .rk-v2 .topic-card { border-radius: 10px; transition: all 0.12s ease; } .rk-v2 .topic-card:hover { border-color: rgba(107, 82, 245, 0.2); transform: translateX(2px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Topic name — Geist */ .rk-v2 .topic-name { font-family: var(--font-heading); font-weight: 600; } .rk-v2 .topic-level-label { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.5px; } /* Topic badges — violet for new, cleaner pills */ .rk-v2 .topic-count-badge { border-radius: 99px; font-family: var(--font-body); font-weight: 500; font-size: 11px; } .rk-v2 .tcb-new { background: rgba(107, 82, 245, 0.12); color: #A78BFA; } .rk-v2 .tcb-due { background: rgba(239, 68, 68, 0.1); color: #F87171; } .rk-v2 .tcb-mastered { background: rgba(16, 185, 129, 0.1); color: #34D399; } /* Topic progress bar — keep subject colors */ .rk-v2 .topic-progress-bar { border-radius: 99px; height: 5px; } .rk-v2 .topic-progress-fill { border-radius: 99px; } /* Mastered star — violet */ .rk-v2 .topic-mastered-star { color: #A78BFA; } /* Print checklist button */ .rk-v2 .print-checklist-btn { border-radius: 8px; font-family: var(--font-body); } /* Learn mode subject cards */ .rk-v2 .learn-subject-card { border-radius: 10px; transition: all 0.12s ease; } .rk-v2 .learn-subject-card:hover { border-color: rgba(107, 82, 245, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Empty state */ .rk-v2 .rk-empty-state { border-radius: 12px; } .rk-v2 .rk-empty-state-title { font-family: var(--font-heading); font-weight: 600; } .rk-v2 .rk-empty-state-btn { background: #6B52F5; border-radius: 8px; font-family: var(--font-body); font-weight: 600; } /* ============================================================ SESSION 5 — Flashcard study session + ratings Highest-risk session: must not break the 3D flip. Only restyle visuals, never touch transform/backface rules. ============================================================ */ /* Study progress bar — violet fill */ .rk-v2 .study-progress-bar { border-radius: 99px; overflow: hidden; } .rk-v2 .study-progress-fill { background: linear-gradient(90deg, #6B52F5, #A78BFA); box-shadow: 0 0 8px rgba(107, 82, 245, 0.4); border-radius: 99px; } /* Study mode badge — violet */ .rk-v2 .study-mode-badge { background: rgba(107, 82, 245, 0.12); color: #A78BFA; border-radius: 99px; font-family: var(--font-body); font-weight: 500; } /* Session tier badge */ .rk-v2 .session-tier-badge { border-radius: 99px; font-family: var(--font-body); } /* End session button */ .rk-v2 .end-session-btn { color: #F87171; font-family: var(--font-body); border-radius: 8px; } .rk-v2 .end-session-btn:hover { background: rgba(239, 68, 68, 0.08); } /* Change topic button */ .rk-v2 .study-change-topic-btn { border-radius: 8px; font-family: var(--font-body); } /* ---- Flashcard faces ---- */ /* Front face — cleaner dark with violet top accent */ .rk-v2 .card-front { background: linear-gradient(145deg, rgba(20, 29, 50, 0.95), rgba(10, 16, 32, 0.95)); border: 1px solid rgba(107, 82, 245, 0.15); box-shadow: var(--shadow-lg), 0 0 24px rgba(107, 82, 245, 0.04); } /* Back face — subtle violet tint */ .rk-v2 .card-back { background: linear-gradient(145deg, rgba(20, 18, 45, 0.97), rgba(12, 10, 32, 0.97)); border: 1px solid rgba(107, 82, 245, 0.2); box-shadow: var(--shadow-lg), 0 0 32px rgba(107, 82, 245, 0.06); } /* Subject tag — violet on back */ .rk-v2 .card-back-tag { color: #A78BFA; opacity: 0.8; } /* Question + answer typography — Geist */ .rk-v2 .card-question { font-family: var(--font-heading); font-weight: 600; font-size: 19px; } .rk-v2 .card-answer { font-family: var(--font-body); font-size: 15px; line-height: 1.65; } /* Tap hint */ .rk-v2 .tap-hint { border-top: 1px solid rgba(255, 255, 255, 0.04); } /* Learn more link — violet on hover */ .rk-v2 .flashcard-learn-more-link:hover, .rk-v2 .flashcard-learn-more-link:focus-visible { color: #A78BFA; } /* Higher badge — violet instead of green */ .rk-v2 .higher-badge { background: rgba(107, 82, 245, 0.12); color: #A78BFA; border: 1px solid rgba(107, 82, 245, 0.2); border-radius: 99px; } /* ---- Rating buttons ---- */ .rk-v2 .rating-buttons { gap: 8px; } .rk-v2 .rating-btn { border-radius: 10px; font-family: var(--font-body); transition: all 0.12s ease; } .rk-v2 .rating-btn:hover { transform: translateY(-2px); } .rk-v2 .rating-btn:active { transform: scale(0.97); } .rk-v2 .rating-name { font-family: var(--font-body); font-size: 11px; font-weight: 600; } /* Again — red */ .rk-v2 .rating-again { border-color: rgba(239, 68, 68, 0.25); } .rk-v2 .rating-again:hover { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 4px 16px rgba(239, 68, 68, 0.15); } /* Hard — amber */ .rk-v2 .rating-hard { border-color: rgba(245, 158, 11, 0.25); } .rk-v2 .rating-hard:hover { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15); } /* Good — green */ .rk-v2 .rating-good { border-color: rgba(16, 185, 129, 0.25); } .rk-v2 .rating-good:hover { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.5); box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15); } /* Easy — violet (distinct from again) */ .rk-v2 .rating-easy { border-color: rgba(107, 82, 245, 0.25); } .rk-v2 .rating-easy .rating-icon { color: #6B52F5; } .rk-v2 .rating-easy:hover { background: rgba(107, 82, 245, 0.1); border-color: rgba(107, 82, 245, 0.5); box-shadow: 0 4px 16px rgba(107, 82, 245, 0.15); } /* Session shortcut hint */ .rk-v2 .session-shortcut-hint { font-family: var(--font-body); } .rk-v2 .session-progress-chip { font-family: var(--font-body); } /* Session primary button (quiz continue) */ .rk-v2 .session-primary-btn { background: #6B52F5; border-radius: 8px; font-family: var(--font-body); font-weight: 600; } .rk-v2 .session-primary-btn:hover { background: #5A42E0; } /* ---- Summary screen ---- */ .rk-v2 .summary-title { font-family: var(--font-heading); font-weight: 700; } .rk-v2 .summary-sub { font-family: var(--font-body); } /* Focus area — violet instead of red */ .rk-v2 .summary-focus-area { border: 1px solid rgba(107, 82, 245, 0.2); background: rgba(107, 82, 245, 0.06); border-radius: 10px; } .rk-v2 .summary-focus-btn { border-color: rgba(107, 82, 245, 0.3); color: #A78BFA; border-radius: 8px; font-family: var(--font-body); } .rk-v2 .summary-focus-btn:hover { background: rgba(107, 82, 245, 0.08); } /* Wrong cards list */ .rk-v2 .wrong-card-item { border-radius: 8px; } /* Summary action buttons */ .rk-v2 .btn-primary { background: #6B52F5; border-radius: 8px; font-family: var(--font-body); font-weight: 600; } .rk-v2 .btn-primary:hover { background: #5A42E0; } .rk-v2 .btn-secondary { border-radius: 8px; font-family: var(--font-body); font-weight: 500; } /* ============================================================ SESSION 6 — Quiz mode Restyle option buttons, correct/wrong/reveal states, feedback box. Keep all JS state class names intact. ============================================================ */ /* Quiz question — Geist */ .rk-v2 .quiz-question { font-family: var(--font-heading); font-weight: 600; } .rk-v2 .quiz-subject-tag { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; } /* Quiz options — violet hover instead of red */ .rk-v2 .quiz-option-btn { border-radius: 10px; font-family: var(--font-body); transition: all 0.15s ease; } .rk-v2 .quiz-option-btn:hover:not(:disabled) { background: rgba(107, 82, 245, 0.06); border-color: rgba(107, 82, 245, 0.3); box-shadow: 0 0 16px rgba(107, 82, 245, 0.08); transform: translateX(2px); } .rk-v2 .quiz-option-btn:active:not(:disabled) { transform: translateX(1px); } /* Option letter badge — violet hover */ .rk-v2 .quiz-option-letter { border-radius: 8px; font-family: var(--font-heading); transition: all 0.15s ease; } .rk-v2 .quiz-option-btn:hover:not(:disabled) .quiz-option-letter { background: rgba(107, 82, 245, 0.15); border-color: rgba(107, 82, 245, 0.3); color: #A78BFA; } /* Correct state — keep green, no changes needed (looks good) */ /* Wrong state — keep red, no changes needed */ /* Correct-reveal state — keep green, no changes needed */ /* Dimmed — keep opacity 0.38, no changes */ /* Quiz feedback box — cleaner */ .rk-v2 .quiz-feedback-box { border-radius: 10px; } .rk-v2 .quiz-feedback-text { font-family: var(--font-body); } /* Quiz score bar */ .rk-v2 .quiz-score-bar { font-family: var(--font-body); } .rk-v2 .quiz-score-val { font-family: var(--font-heading); font-weight: 700; } /* Quiz higher badge — violet */ .rk-v2 .quiz-higher-badge { background: rgba(107, 82, 245, 0.12); color: #A78BFA; border: 1px solid rgba(107, 82, 245, 0.2); border-radius: 99px; } /* Quiz continue button */ .rk-v2 .quiz-continue-btn { background: #6B52F5; border-radius: 8px; font-family: var(--font-body); font-weight: 600; } .rk-v2 .quiz-continue-btn:hover { background: #5A42E0; } /* ============================================================ SESSION 7 — Stats page + heatmap ============================================================ */ /* Stat hero cards — violet accent on values */ .rk-v2 .stat-hero-card { border-radius: 10px; transition: all 0.15s ease; } .rk-v2 .stat-hero-card:hover { border-color: rgba(107, 82, 245, 0.15); } .rk-v2 .stat-hero-val { font-family: var(--font-heading); font-weight: 700; color: #C4B5FD; } /* Streak val — keep distinct amber */ .rk-v2 .streak-card .stat-hero-val { color: #FBBF24; } /* Mastered val — keep green */ .rk-v2 .mastered-card .stat-hero-val { color: #34D399; } .rk-v2 .stat-hero-label { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.5px; } /* Stats section titles */ .rk-v2 .stats-section-title { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.8px; } /* Heatmap — violet tones instead of green */ .rk-v2 .heatmap-container { border-radius: 10px; } .rk-v2 .heatmap-day { border-radius: 3px; } .rk-v2 .heatmap-level-1 { background: rgba(107, 82, 245, 0.15); } .rk-v2 .heatmap-level-2 { background: rgba(107, 82, 245, 0.3); } .rk-v2 .heatmap-level-3 { background: rgba(107, 82, 245, 0.5); } .rk-v2 .heatmap-level-4 { background: #6B52F5; } .rk-v2 .heatmap-day:hover::after { background: var(--bg-elevated); border: 1px solid rgba(107, 82, 245, 0.2); border-radius: 6px; } /* Subject mastery bars */ .rk-v2 .smi-name { font-family: var(--font-heading); font-weight: 600; } .rk-v2 .smi-pct { font-family: var(--font-heading); font-weight: 700; } .rk-v2 .smi-bar { border-radius: 99px; height: 8px; } .rk-v2 .smi-fill { border-radius: 99px; } /* Card status grid */ .rk-v2 .card-status-grid .cs-card { border-radius: 10px; } .rk-v2 .cs-val { font-family: var(--font-heading); font-weight: 700; } .rk-v2 .cs-label { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.5px; } /* Stats action buttons */ .rk-v2 .stats-action-btn { border-radius: 8px; font-family: var(--font-body); } .rk-v2 .stats-action-btn:hover { border-color: rgba(107, 82, 245, 0.25); } /* ============================================================ SESSION 8 — Exam practice + SLOP drills ============================================================ */ /* ---- Exam Practice ---- */ /* Exam question cards */ .rk-v2 .exam-question-card { border-radius: 10px; transition: all 0.15s ease; } .rk-v2 .exam-question-card:hover { border-color: rgba(107, 82, 245, 0.15); } .rk-v2 .exam-question-card.expanded { border-color: rgba(107, 82, 245, 0.2); } /* Exam badges */ .rk-v2 .exam-badge { border-radius: 99px; font-family: var(--font-body); font-weight: 500; } .rk-v2 .exam-marks-badge { background: rgba(107, 82, 245, 0.12); color: #A78BFA; } .rk-v2 .exam-cmd-badge { font-family: var(--font-body); } /* Exam section labels */ .rk-v2 .exam-section-label { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.5px; } /* Mark scheme reveal button — violet */ .rk-v2 .mark-scheme-reveal-btn { background: #6B52F5; border: none; border-radius: 8px; font-family: var(--font-body); font-weight: 600; } .rk-v2 .mark-scheme-reveal-btn:hover { background: #5A42E0; } /* Mark scheme table */ .rk-v2 .mark-scheme-table { border-radius: 8px; font-family: var(--font-body); } /* Exam model answer */ .rk-v2 .exam-model-answer-text { font-family: var(--font-body); line-height: 1.6; } /* Exam tip — violet accent */ .rk-v2 .exam-tip { background: rgba(107, 82, 245, 0.06); border-color: rgba(107, 82, 245, 0.15); border-radius: 8px; } /* Exam self-assessment buttons */ .rk-v2 .exam-self-btn { border-radius: 6px; font-family: var(--font-body); transition: all 0.12s ease; } .rk-v2 .exam-self-btn.selected { background: #6B52F5; border-color: #6B52F5; color: white; } .rk-v2 .exam-self-btn.exam-self-zero.selected { background: #EF4444; border-color: #EF4444; } /* Exam filter pills — violet active */ .rk-v2 .exam-filter-pill { border-radius: 99px; font-family: var(--font-body); font-weight: 500; transition: all 0.12s ease; } .rk-v2 .exam-filter-pill.active { background: rgba(107, 82, 245, 0.12); border-color: rgba(107, 82, 245, 0.3); color: #A78BFA; } .rk-v2 .exam-filter-pill:hover { border-color: rgba(107, 82, 245, 0.2); } /* Paper timer bar */ .rk-v2 .paper-timer-bar { border-radius: 8px; } /* ---- SLOP Drills ---- */ /* Category pills — violet active */ .rk-v2 .slop-cat-pill { border-radius: 99px; font-family: var(--font-body); font-weight: 500; transition: all 0.12s ease; } .rk-v2 .slop-cat-pill.active { background: rgba(107, 82, 245, 0.12); border-color: rgba(107, 82, 245, 0.3); color: #A78BFA; } .rk-v2 .slop-cat-pill:hover { border-color: rgba(107, 82, 245, 0.2); } /* Drill cards */ .rk-v2 .slop-drill-card { border-radius: 10px; transition: all 0.15s ease; } .rk-v2 .slop-drill-card:hover { border-color: rgba(107, 82, 245, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .rk-v2 .slop-drill-name { font-family: var(--font-heading); font-weight: 600; } .rk-v2 .slop-drill-desc { font-family: var(--font-body); } /* SLOP active area */ .rk-v2 .slop-active-area { border-radius: 12px; } /* SLOP answer reveal */ .rk-v2 .slop-answer-reveal { border-radius: 10px; } .rk-v2 .slop-answer-text { font-family: var(--font-body); } /* SLOP end screen */ .rk-v2 .slop-end-title { font-family: var(--font-heading); font-weight: 700; } .rk-v2 .slop-end-val { font-family: var(--font-heading); font-weight: 700; color: #C4B5FD; } .rk-v2 .slop-end-label { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.5px; } /* ============================================================ SESSION 9 — Auth + Pricing + Modals + Toasts ============================================================ */ /* ---- Auth screen ---- */ .rk-v2 .auth-card { border-radius: 14px; } .rk-v2 .auth-title { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.3px; } .rk-v2 .auth-input { border-radius: 8px; font-family: var(--font-body); transition: border-color 0.12s ease, box-shadow 0.12s ease; } .rk-v2 .auth-input:focus { border-color: rgba(107, 82, 245, 0.4); box-shadow: 0 0 0 3px rgba(107, 82, 245, 0.1); } .rk-v2 .auth-submit-btn { background: #6B52F5; border-radius: 8px; font-family: var(--font-body); font-weight: 600; } .rk-v2 .auth-submit-btn:hover:not(:disabled) { background: #5A42E0; } .rk-v2 .auth-tab { font-family: var(--font-body); } .rk-v2 .auth-tab.auth-tab-active { color: #A78BFA; border-bottom-color: #6B52F5; } .rk-v2 .auth-google-btn { border-radius: 8px; font-family: var(--font-body); } .rk-v2 .auth-skip-btn { color: #A78BFA; font-family: var(--font-body); } .rk-v2 .auth-skip-btn:hover { color: #C4B5FD; } .rk-v2 .auth-error { border-radius: 8px; } .rk-v2 .auth-success { border-radius: 8px; } .rk-v2 .auth-forgot-btn { color: #A78BFA; } /* ---- Pricing ---- */ .rk-v2 .pricing-card { border-radius: 14px; transition: all 0.15s ease; } .rk-v2 .pricing-card:hover { border-color: rgba(107, 82, 245, 0.2); } .rk-v2 .pricing-price { font-family: var(--font-heading); font-weight: 700; } .rk-v2 .pricing-cta { background: #6B52F5; border-radius: 8px; font-family: var(--font-body); font-weight: 600; } .rk-v2 .pricing-cta:hover { background: #5A42E0; } /* ---- Modals ---- */ .rk-v2 .modal-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .rk-v2 .mode-picker-modal { border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); } .rk-v2 .mode-picker-title { font-family: var(--font-heading); font-weight: 700; } .rk-v2 .mode-picker-sub { font-family: var(--font-body); } .rk-v2 .mode-option-btn { border-radius: 12px; transition: all 0.12s ease; } .rk-v2 .mode-option-btn:hover { border-color: rgba(107, 82, 245, 0.25); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .rk-v2 .mode-option-title { font-family: var(--font-heading); font-weight: 600; } .rk-v2 .mode-option-desc { font-family: var(--font-body); } .rk-v2 .mode-picker-cancel { border-radius: 8px; font-family: var(--font-body); } /* Flashcard + MCQ setup modals */ .rk-v2 .flashcard-setup-modal { border-radius: 16px; } .rk-v2 .flashcard-setup-select { border-radius: 8px; font-family: var(--font-body); } .rk-v2 .flashcard-setup-summary { font-family: var(--font-body); } /* Session size pills */ .rk-v2 .session-size-pill { border-radius: 99px; font-family: var(--font-body); transition: all 0.12s ease; } .rk-v2 .session-size-pill.active { background: rgba(107, 82, 245, 0.12); border-color: rgba(107, 82, 245, 0.3); color: #A78BFA; } /* Upgrade modal — violet */ .rk-v2 .upgrade-modal { border-radius: 16px; } .rk-v2 .upgrade-modal-title { font-family: var(--font-heading); font-weight: 700; } .rk-v2 .upgrade-modal-desc { font-family: var(--font-body); } .rk-v2 .upgrade-modal-cta { background: #6B52F5; border-radius: 8px; font-family: var(--font-body); font-weight: 600; } .rk-v2 .upgrade-modal-cta:hover { background: #5A42E0; } .rk-v2 .upgrade-modal-close { border-radius: 8px; } /* Celebration modal */ .rk-v2 .celebration-modal { border-radius: 16px; } /* ---- Toasts ---- */ .rk-v2 .toast { border-radius: 10px; font-family: var(--font-body); } .rk-v2 .toast.toast-info { border-color: rgba(107, 82, 245, 0.3); color: #A78BFA; } /* ============================================================ SESSION 10 — Utility screens Formulas, command words, practicals, planner, lesson, learn mode, privacy, terms, footer ============================================================ */ /* ---- Learn mode + Lessons ---- */ .rk-v2 .lesson-content { border-radius: 12px; font-family: var(--font-body); } .rk-v2 .lesson-content h3 { font-family: var(--font-heading); font-weight: 600; } .rk-v2 .lesson-content .exam-tip { background: rgba(107, 82, 245, 0.06); border-left: 3px solid rgba(107, 82, 245, 0.4); border-radius: 0 8px 8px 0; } .rk-v2 .btn-lesson-complete { background: #6B52F5; border-radius: 8px; font-family: var(--font-body); font-weight: 600; } .rk-v2 .btn-lesson-complete:hover { background: #5A42E0; } /* Lesson key terms */ .rk-v2 .key-term-pill { border-radius: 99px; font-family: var(--font-body); } /* Video panel */ .rk-v2 .lesson-video-card { border-radius: 12px; } .rk-v2 .lesson-video-title { font-family: var(--font-heading); font-weight: 600; } .rk-v2 .lesson-video-provider { font-family: var(--font-body); } .rk-v2 .lesson-video-play { background: #6B52F5; border-radius: 8px; font-family: var(--font-body); font-weight: 600; } .rk-v2 .lesson-video-play:hover { background: #5A42E0; } .rk-v2 .lesson-video-link { color: #A78BFA; } .rk-v2 .lesson-video-link:hover { color: #C4B5FD; } /* Lesson group headers */ .rk-v2 .lesson-group-header { font-family: var(--font-heading); font-weight: 600; } .rk-v2 .lesson-item { border-radius: 8px; font-family: var(--font-body); } /* ---- Formula sheets ---- */ .rk-v2 .formula-tab { font-family: var(--font-body); font-weight: 500; transition: all 0.12s ease; } .rk-v2 .formula-tab.active { color: #A78BFA; border-bottom-color: #6B52F5; } .rk-v2 .formula-card { border-radius: 10px; } /* ---- Command words ---- */ .rk-v2 .cw-card { border-radius: 10px; } .rk-v2 .cw-word { font-family: var(--font-heading); font-weight: 700; color: #A78BFA; } .rk-v2 .cw-definition { font-family: var(--font-body); } /* ---- Practicals ---- */ .rk-v2 .prac-tab { font-family: var(--font-body); font-weight: 500; } .rk-v2 .prac-tab.active { color: #A78BFA; border-bottom-color: #6B52F5; } /* ---- Study planner ---- */ .rk-v2 .planner-card { border-radius: 12px; font-family: var(--font-body); } .rk-v2 .planner-day-title { font-family: var(--font-heading); font-weight: 600; } .rk-v2 .planner-input { border-radius: 8px; font-family: var(--font-body); } .rk-v2 .planner-input:focus { border-color: rgba(107, 82, 245, 0.4); box-shadow: 0 0 0 3px rgba(107, 82, 245, 0.1); } .rk-v2 .planner-regen-btn { background: #6B52F5; border-radius: 8px; font-family: var(--font-body); font-weight: 600; } .rk-v2 .planner-regen-btn:hover { background: #5A42E0; } .rk-v2 .planner-countdown { font-family: var(--font-heading); } /* Pomodoro */ .rk-v2 .pom-btn { border-radius: 8px; font-family: var(--font-body); } .rk-v2 .pom-study-pill, .rk-v2 .pom-break-pill { border-radius: 99px; font-family: var(--font-body); } .rk-v2 .pom-study-pill.active, .rk-v2 .pom-break-pill.active { background: rgba(107, 82, 245, 0.12); border-color: rgba(107, 82, 245, 0.3); color: #A78BFA; } /* ---- Mistake journal ---- */ .rk-v2 .mj-card { border-radius: 10px; } .rk-v2 .mj-chip { border-radius: 99px; font-family: var(--font-body); } .rk-v2 .mj-question { font-family: var(--font-heading); font-weight: 600; } .rk-v2 .mj-answer { font-family: var(--font-body); } /* ---- Footer ---- */ .rk-v2 #app-footer { font-family: var(--font-body); } .rk-v2 #app-footer a, .rk-v2 .footer-link { font-family: var(--font-body); } .rk-v2 .report-issue-btn { color: #A78BFA; } /* ---- Coming soon panel ---- */ .rk-v2 .coming-soon-panel { border-radius: 12px; } .rk-v2 .coming-soon-title { font-family: var(--font-heading); font-weight: 600; } .rk-v2 .coming-soon-body { font-family: var(--font-body); } /* ---- Loading ---- */ .rk-v2 .loading-overlay { font-family: var(--font-body); } .rk-v2 .content-loading-skeleton .skel-line { border-radius: 8px; } /* ============================================================ SESSION 11 — Responsive polish + accessibility ============================================================ */ /* Wider content on desktop */ @media (min-width: 768px) { .rk-v2 .screen { max-width: 720px; } .rk-v2 .subject-grid { grid-template-columns: repeat(2, 1fr); } .rk-v2 .quick-stats { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .rk-v2 .screen { max-width: 800px; } } /* Ensure focus rings are violet */ .rk-v2 *:focus-visible { outline: 2px solid rgba(107, 82, 245, 0.6); outline-offset: 2px; } /* High contrast mode — keep working */ .rk-v2.high-contrast .qstat, .rk-v2.high-contrast .subject-card, .rk-v2.high-contrast .topic-card, .rk-v2.high-contrast .exam-question-card { border-width: 2px; } /* Dyslexia font — override Geist when active */ .rk-v2.dyslexia-font { --font-body: 'OpenDyslexic', sans-serif; --font-heading: 'OpenDyslexic', sans-serif; } /* Large text — keep working (already uses relative sizing) */ /* Reduced motion — disable our transitions */ .rk-v2.reduced-motion, .rk-v2.reduced-motion * { transition-duration: 0s !important; animation-duration: 0s !important; } /* Scrollbar — subtle violet */ .rk-v2 ::-webkit-scrollbar { width: 6px; height: 6px; } .rk-v2 ::-webkit-scrollbar-track { background: transparent; } .rk-v2 ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 99px; } .rk-v2 ::-webkit-scrollbar-thumb:hover { background: rgba(107, 82, 245, 0.3); } /* Selection — violet */ .rk-v2 ::selection { background: rgba(107, 82, 245, 0.2); } /* ============================================================ Sticky screen headers — back button always visible on scroll ============================================================ */ /* Group A: Study session — navbar is hidden by JS, so top: 0 */ .rk-v2 .study-header { position: sticky; top: 0; z-index: 10; background: var(--bg-deep); border-bottom: 1px solid var(--glass-border); padding: 12px 20px; margin: -24px -20px 16px; backdrop-filter: none; } /* Group B: All other screens — navbar visible, sit below it */ .rk-v2 .screen-header, .rk-v2 .match-header, .rk-v2 .cloze-header, .rk-v2 .qq-header, .rk-v2 .screen-header.mj-header { position: sticky; top: var(--nav-height); z-index: 10; background: var(--bg-deep); border-bottom: 1px solid var(--glass-border); padding: 12px 20px; margin-left: -20px; margin-right: -20px; backdrop-filter: none; Flashcard Picker Modal ============================================================ */ .fp-step-indicator { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 4px; } .fp-breadcrumb { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; padding: 8px 12px; border-radius: 8px; background: var(--glass-bg); border: 1px solid var(--glass-border); } .fp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; max-height: 400px; overflow-y: auto; } .fp-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 10px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass-bg); cursor: pointer; transition: all 0.15s ease; text-align: center; min-height: 80px; font-family: var(--font-body); } .fp-tile:hover { border-color: rgba(107, 82, 245, 0.3); background: rgba(107, 82, 245, 0.06); } .fp-tile:active { transform: scale(0.97); } .fp-tile-icon { font-size: 24px; } .fp-tile-name { font-size: 14px; font-weight: 600; color: var(--text-primary); } .fp-tile-meta { font-size: 11px; color: var(--text-muted); } /* All subjects / All topics special tile */ .fp-tile-all { border-color: rgba(107, 82, 245, 0.2); background: rgba(107, 82, 245, 0.04); } .fp-tile-all:hover { border-color: rgba(107, 82, 245, 0.4); background: rgba(107, 82, 245, 0.1); } .fp-tile-all .fp-tile-name { color: #A78BFA; } /* Locked tile */ .fp-tile-locked { opacity: 0.5; cursor: pointer; } .fp-tile-locked:hover { border-color: var(--glass-border); background: var(--glass-bg); } .fp-tile-lock-icon { font-size: 16px; opacity: 0.5; } /* Disabled tile (no cards) */ .fp-tile-disabled { opacity: 0.35; cursor: not-allowed; } .fp-tile-disabled:hover { border-color: var(--glass-border); background: var(--glass-bg); transform: none; } /* Count tiles — larger */ .fp-tile-count { min-height: 90px; font-size: 24px; font-weight: 700; } .fp-tile-count .fp-tile-name { font-size: 22px; font-weight: 700; } .fp-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-bottom: 12px; } .fp-actions { display: flex; gap: 10px; justify-content: flex-end; } /* ============================================================ Upcoming Exams Countdown Cards ============================================================ */ .upcoming-exams-wrap { margin-bottom: 20px; } .upcoming-exams-list { display: flex; flex-direction: column; gap: 8px; } .exam-countdown-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-bg); font-family: var(--font-body); } .exam-countdown-icon { font-size: 18px; flex-shrink: 0; } .exam-countdown-info { flex: 1; min-width: 0; } .exam-countdown-subject { font-size: 13px; font-weight: 600; color: var(--text-primary); } .exam-countdown-paper { font-size: 11px; color: var(--text-muted); } .exam-countdown-days { font-size: 14px; font-weight: 700; flex-shrink: 0; text-align: right; } .exam-countdown-days.urgent { color: #EF4444; } .exam-countdown-days.soon { color: #F59E0B; } .exam-countdown-days.comfortable { color: #10B981; }