/* ============================================================ QuestClass — "Playful" Theme Blooket-style + RPG · kid-friendly, chunky, colorful Apply with (student + teacher only) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@600;700;800;900&display=swap'); /* ───────────────────────────────────────────────────────────── 1 · DESIGN TOKENS — punchier, more saturated ───────────────────────────────────────────────────────────── */ body.theme-fun { /* Vibrant palette — bright candy tones */ --fun-purple: #9B5CFF; --fun-purple-d: #6E2EF5; --fun-blue: #1FA2FF; --fun-blue-d: #0E72F0; --fun-mint: #18E06E; --fun-mint-d: #0BB857; --fun-gold: #FFC42E; --fun-gold-d: #F59E00; --fun-coral: #FF6B70; --fun-coral-d: #F03A45; --fun-pink: #FF5BA8; --fun-pink-d: #ED2E8C; --fun-cyan: #1FE3F0; --fun-ink: #2B2150; /* deep purple-ink text */ --fun-ink-soft: #6B5F94; --fun-card: #FFFFFF; --fun-border: #ECE6FF; /* Rounded chunky fonts */ --font-fun-head: 'Fredoka', 'Prompt', sans-serif; --font-fun-body: 'Nunito', 'Prompt', sans-serif; /* Patch core tokens so existing components inherit */ --t1: var(--fun-ink); --t2: var(--fun-ink-soft); --blue: var(--fun-blue); --r-sm: 14px; --r-md: 18px; --r-lg: 24px; --r-xl: 30px; font-family: var(--font-fun-body); color: var(--fun-ink); font-weight: 700; } /* Fun gradient sky background */ body.theme-fun { background-color: #EEF0FF; } body.theme-fun::before { content: ''; position: fixed; inset: 0; background: radial-gradient(circle at 12% 8%, rgba(155,92,255,0.24) 0%, transparent 42%), radial-gradient(circle at 88% 12%, rgba(31,162,255,0.22) 0%, transparent 42%), radial-gradient(circle at 50% 100%, rgba(24,224,110,0.18) 0%, transparent 50%), linear-gradient(160deg, #F3EFFF 0%, #E6F3FF 50%, #ECFFF6 100%); pointer-events: none; z-index: 0; } /* ───────────────────────────────────────────────────────────── 2 · TYPOGRAPHY ───────────────────────────────────────────────────────────── */ body.theme-fun .page-title, body.theme-fun .pixel-title, body.theme-fun .pixel-lg, body.theme-fun .modal-title, body.theme-fun .qc-section-title { font-family: var(--font-fun-head); font-weight: 700; letter-spacing: 0.2px; color: var(--fun-purple-d); } body.theme-fun .page-title { font-size: 1.55rem; } body.theme-fun .pixel-title { font-size: 1.05rem; line-height: 1.4; letter-spacing: 0.3px; } body.theme-fun .pixel-title.t-blue { color: var(--fun-blue-d); } body.theme-fun .pixel-title.t-mint { color: var(--fun-mint-d); } body.theme-fun .pixel-title.t-red { color: var(--fun-coral-d); } body.theme-fun .section-label, body.theme-fun .qc-label { font-family: var(--font-fun-body); font-weight: 800; text-transform: none; letter-spacing: 0.3px; color: var(--fun-ink-soft); font-size: 0.74rem; } /* ───────────────────────────────────────────────────────────── 3 · TOPNAV — rounded floating bar ───────────────────────────────────────────────────────────── */ body.theme-fun .topnav { background: rgba(255,255,255,0.95); border-bottom: 3px solid var(--fun-border); box-shadow: 0 4px 0 rgba(124,77,255,0.07), 0 6px 20px rgba(124,77,255,0.10); height: 62px; } body.theme-fun .topnav-brand { height: 42px; } /* ───────────────────────────────────────────────────────────── 4 · TABS — chunky pills ───────────────────────────────────────────────────────────── */ body.theme-fun .tab-btn { font-family: var(--font-fun-body); font-weight: 800; font-size: 0.84rem; border-radius: 99px; border: 2px solid transparent; color: var(--fun-ink-soft); padding: 0.4rem 0.95rem; } body.theme-fun .tab-btn:hover { color: var(--fun-purple-d); background: #F1ECFF; } body.theme-fun .tab-btn.active { color: #fff; background: linear-gradient(135deg, var(--fun-purple), var(--fun-blue)); border-color: transparent; box-shadow: 0 3px 0 var(--fun-purple-d), 0 5px 12px rgba(124,77,255,0.30); } body.theme-fun .tab-btn.active .tab-icon { color: #fff; } /* ───────────────────────────────────────────────────────────── 5 · CARDS — chunky rounded with soft solid shadow ───────────────────────────────────────────────────────────── */ body.theme-fun .qc-card, body.theme-fun .glass, body.theme-fun .glass-md, body.theme-fun .bento-cell { background: var(--fun-card); border: 3px solid var(--fun-border); border-radius: var(--r-lg); box-shadow: 0 5px 0 rgba(124,77,255,0.06), 0 8px 22px rgba(90,70,160,0.10); } body.theme-fun .qc-card:hover, body.theme-fun .bento-cell:hover { border-color: #DCCEFF; box-shadow: 0 7px 0 rgba(124,77,255,0.09), 0 12px 28px rgba(90,70,160,0.14); transform: translateY(-2px); } /* Tinted cards get colored chunky borders */ body.theme-fun .glass-gold { background: #FFF8E8; border-color: #FFE3A0; } body.theme-fun .glass-mint { background: #E9FFF2; border-color: #A7F0C6; } body.theme-fun .glass-coral { background: #FFEFEF; border-color: #FFC4C6; } body.theme-fun .glass-purple { background: #F4EEFF; border-color: #DBC8FF; } body.theme-fun .glass-blue { background: #E9F3FF; border-color: #B6D8FF; } /* ───────────────────────────────────────────────────────────── 6 · BUTTONS — signature 3D pressable ───────────────────────────────────────────────────────────── */ body.theme-fun .btn { font-family: var(--font-fun-body); font-weight: 800; font-size: 0.9rem; border-radius: 99px; padding: 0.55rem 1.4rem; border: none; transition: transform 0.08s var(--ease), box-shadow 0.08s var(--ease), filter 0.15s; } body.theme-fun .btn:active:not(:disabled) { transform: translateY(4px); } /* Each color gets a darker "lip" underneath for the 3D effect */ body.theme-fun .btn-blue { background: linear-gradient(180deg, var(--fun-blue), var(--fun-blue-d)); box-shadow: 0 4px 0 var(--fun-blue-d), 0 7px 14px rgba(46,139,255,0.32); } body.theme-fun .btn-mint { background: linear-gradient(180deg, var(--fun-mint), var(--fun-mint-d)); box-shadow: 0 4px 0 var(--fun-mint-d), 0 7px 14px rgba(24,201,100,0.32); } body.theme-fun .btn-gold { background: linear-gradient(180deg, var(--fun-gold), var(--fun-gold-d)); box-shadow: 0 4px 0 var(--fun-gold-d), 0 7px 14px rgba(255,176,32,0.32); } body.theme-fun .btn-coral { background: linear-gradient(180deg, var(--fun-coral), var(--fun-coral-d)); box-shadow: 0 4px 0 var(--fun-coral-d), 0 7px 14px rgba(255,90,95,0.32); } body.theme-fun .btn-purple { background: linear-gradient(180deg, var(--fun-purple), var(--fun-purple-d)); box-shadow: 0 4px 0 var(--fun-purple-d), 0 7px 14px rgba(124,77,255,0.32); } body.theme-fun .btn-blue, body.theme-fun .btn-mint, body.theme-fun .btn-gold, body.theme-fun .btn-coral, body.theme-fun .btn-purple { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.18); } body.theme-fun .btn-blue:hover:not(:disabled), body.theme-fun .btn-mint:hover:not(:disabled), body.theme-fun .btn-gold:hover:not(:disabled), body.theme-fun .btn-coral:hover:not(:disabled), body.theme-fun .btn-purple:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); } body.theme-fun .btn-blue:active:not(:disabled) { box-shadow: 0 0 0 var(--fun-blue-d); } body.theme-fun .btn-mint:active:not(:disabled) { box-shadow: 0 0 0 var(--fun-mint-d); } body.theme-fun .btn-gold:active:not(:disabled) { box-shadow: 0 0 0 var(--fun-gold-d); } body.theme-fun .btn-coral:active:not(:disabled) { box-shadow: 0 0 0 var(--fun-coral-d); } body.theme-fun .btn-purple:active:not(:disabled) { box-shadow: 0 0 0 var(--fun-purple-d); } body.theme-fun .btn-ghost { background: #fff; border: 3px solid var(--fun-border); color: var(--fun-ink-soft); box-shadow: 0 4px 0 var(--fun-border); } body.theme-fun .btn-ghost:hover:not(:disabled) { border-color: #DBC8FF; color: var(--fun-purple-d); background: #F7F3FF; } body.theme-fun .btn-ghost:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0; } body.theme-fun .btn-lg { padding: 0.8rem 2.2rem; font-size: 1.05rem; } /* ───────────────────────────────────────────────────────────── 7 · BADGES — chunky rounded ───────────────────────────────────────────────────────────── */ body.theme-fun .badge { font-family: var(--font-fun-body); font-weight: 800; font-size: 0.72rem; padding: 0.22rem 0.7rem; border-radius: 99px; border-width: 2px; } /* ───────────────────────────────────────────────────────────── 8 · INPUTS — friendly rounded ───────────────────────────────────────────────────────────── */ body.theme-fun .qc-input, body.theme-fun input[type="text"], body.theme-fun input[type="number"], body.theme-fun input[type="password"], body.theme-fun input[type="date"], body.theme-fun select, body.theme-fun textarea { font-family: var(--font-fun-body); font-weight: 700; border: 3px solid var(--fun-border); border-radius: 99px; padding: 0.55rem 1.1rem; color: var(--fun-ink); } body.theme-fun textarea { border-radius: var(--r-md); } body.theme-fun .qc-input:focus, body.theme-fun input:focus, body.theme-fun select:focus, body.theme-fun textarea:focus { border-color: var(--fun-purple); box-shadow: 0 0 0 4px rgba(124,77,255,0.15); } /* ───────────────────────────────────────────────────────────── 9 · XP / STAT BARS — chunky candy bars ───────────────────────────────────────────────────────────── */ body.theme-fun .xp-track, body.theme-fun .stat-track, body.theme-fun .analytics-track, body.theme-fun .analytics-bar-wrap, body.theme-fun .stat-bar-wrap, body.theme-fun .xp-bar-wrap { height: 12px; border-radius: 99px; background: #ECE6FF; border: 2px solid #E2D9FF; overflow: hidden; } body.theme-fun .xp-fill { background: linear-gradient(90deg, var(--fun-mint), var(--fun-cyan)); } body.theme-fun .stat-track { height: 9px; } /* ───────────────────────────────────────────────────────────── 10 · QUIZ — big chunky game cards ───────────────────────────────────────────────────────────── */ body.theme-fun .quiz-question-box { font-family: var(--font-fun-head); font-weight: 600; border: 4px solid var(--fun-border); border-radius: var(--r-xl); box-shadow: 0 6px 0 rgba(124,77,255,0.07), 0 10px 26px rgba(90,70,160,0.12); font-size: 1.25rem; color: var(--fun-ink); } body.theme-fun .quiz-timer { font-family: var(--font-fun-head); font-weight: 700; font-size: 2.6rem; color: var(--fun-purple); } body.theme-fun .quiz-timer.danger { color: var(--fun-coral); } body.theme-fun .quiz-option { font-family: var(--font-fun-body); font-weight: 800; font-size: 1.05rem; border-radius: var(--r-lg); min-height: 88px; text-shadow: 0 1px 2px rgba(0,0,0,0.18); transition: transform 0.08s var(--ease), box-shadow 0.08s var(--ease); } body.theme-fun .opt-A { background: linear-gradient(180deg,#FF6B6F,#E03A45); box-shadow: 0 5px 0 #B91C1C, 0 9px 18px rgba(220,38,38,0.30); } body.theme-fun .opt-B { background: linear-gradient(180deg,#4D9CFF,#1366E6); box-shadow: 0 5px 0 #1149A8, 0 9px 18px rgba(37,99,235,0.30); } body.theme-fun .opt-C { background: linear-gradient(180deg,#2BD673,#0EA152); box-shadow: 0 5px 0 #0A7D40, 0 9px 18px rgba(5,150,105,0.30); } body.theme-fun .opt-D { background: linear-gradient(180deg,#FFC24D,#E08A00); box-shadow: 0 5px 0 #B45309, 0 9px 18px rgba(217,119,6,0.30); } body.theme-fun .quiz-option:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); } body.theme-fun .quiz-option:active:not(:disabled) { transform: translateY(5px); } body.theme-fun .opt-correct { outline: 4px solid #fff; box-shadow: 0 0 0 6px var(--fun-mint), 0 0 26px rgba(24,201,100,0.5) !important; } /* ───────────────────────────────────────────────────────────── 11 · QUIZ REJOIN NOTICE ───────────────────────────────────────────────────────────── */ body.theme-fun #quizRejoinNotice { font-family: var(--font-fun-body) !important; font-weight: 800 !important; border: 3px solid #FFE3A0 !important; border-radius: 99px !important; background: #FFF8E8 !important; color: var(--fun-gold-d) !important; } /* ───────────────────────────────────────────────────────────── 12 · RANDOMIZER (teacher) ───────────────────────────────────────────────────────────── */ body.theme-fun .randomizer-display { font-family: var(--font-fun-head); font-weight: 700; border: 4px dashed #B6D8FF; border-radius: var(--r-xl); background: #E9F3FF; color: var(--fun-blue-d); font-size: 3.6rem; } body.theme-fun .randomizer-display.result { background: #FFF8E8; border-color: #FFE3A0; border-style: solid; color: var(--fun-gold-d); box-shadow: 0 6px 0 rgba(224,138,0,0.18), 0 10px 24px rgba(224,138,0,0.18); } /* ───────────────────────────────────────────────────────────── 13 · WORLD MAP / STAGE NODES ───────────────────────────────────────────────────────────── */ body.theme-fun .stage-node { border-radius: var(--r-lg); } body.theme-fun .stage-node.unlocked { background: #E9FFF2; border: 3px solid #A7F0C6; box-shadow: 0 4px 0 rgba(14,161,82,0.12); } body.theme-fun .stage-node.unlocked:hover { transform: translateY(-3px); box-shadow: 0 7px 0 rgba(14,161,82,0.15), 0 10px 22px rgba(14,161,82,0.18); } body.theme-fun .stage-icon { font-size: 2.5rem; } /* ───────────────────────────────────────────────────────────── 14 · TABLES ───────────────────────────────────────────────────────────── */ body.theme-fun .qc-table th { font-family: var(--font-fun-body); font-weight: 800; text-transform: none; letter-spacing: 0.2px; background: #F1ECFF; color: var(--fun-purple-d); border-bottom: 3px solid #DBC8FF; } body.theme-fun .qc-table td { font-weight: 700; } /* ───────────────────────────────────────────────────────────── 15 · GACHA — extra juicy ───────────────────────────────────────────────────────────── */ body.theme-fun .gacha-machine { border: 4px solid #DBC8FF; border-radius: var(--r-xl); box-shadow: 0 6px 0 rgba(124,77,255,0.10), 0 10px 26px rgba(124,77,255,0.14); } body.theme-fun .gacha-orb { background: radial-gradient(circle at 32% 30%, #C9A8FF, var(--fun-purple) 48%, #3A1B8C); border: 4px solid rgba(255,255,255,0.55); } /* ───────────────────────────────────────────────────────────── 16 · TOAST ───────────────────────────────────────────────────────────── */ body.theme-fun .qc-toast { font-family: var(--font-fun-body); font-weight: 800; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--fun-purple), var(--fun-blue)); box-shadow: 0 5px 0 var(--fun-purple-d), 0 10px 24px rgba(124,77,255,0.30); } /* ───────────────────────────────────────────────────────────── 17 · BOSS BATTLE (student) — make it pop ───────────────────────────────────────────────────────────── */ body.theme-fun #bossEntryCard { border: 4px solid #DBC8FF !important; border-radius: var(--r-xl) !important; box-shadow: 0 6px 0 rgba(124,77,255,0.10), 0 10px 26px rgba(124,77,255,0.16) !important; } body.theme-fun .boss-hp-track { height: 18px !important; border-radius: 99px !important; border: 3px solid #FFC4C6 !important; background: #FFEFEF !important; overflow: hidden !important; } body.theme-fun .boss-hp-fill { border-radius: 99px !important; background: linear-gradient(90deg, #FF6B6F, #E03A45) !important; } /* ───────────────────────────────────────────────────────────── 18 · PLAYFUL ANIMATIONS ───────────────────────────────────────────────────────────── */ @keyframes funPop { 0% { transform: scale(0.85); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } body.theme-fun .fade-in { animation: funPop 0.35s var(--ease); } @keyframes funWiggle { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } } body.theme-fun .topnav-brand:hover { animation: funWiggle 0.4s var(--ease); } /* ───────────────────────────────────────────────────────────── 19 · MOBILE BOTTOM NAV — clear icons + active circle indicator ───────────────────────────────────────────────────────────── */ body.theme-fun .mobile-nav { background: rgba(255,255,255,0.98); border-top: 3px solid var(--fun-border); box-shadow: 0 -5px 0 rgba(124,77,255,0.05), 0 -8px 22px rgba(90,70,160,0.10); padding: 0.5rem 0 0.4rem; } body.theme-fun .mobile-nav-item { font-family: var(--font-fun-body); font-weight: 800; font-size: 0.6rem; color: var(--fun-ink-soft); gap: 4px; transition: color 0.18s var(--ease); } /* The icon sits inside a circle "token" */ body.theme-fun .mobile-nav-item .mn-icon { width: 42px; height: 42px; border-radius: 50%; background: transparent; border: 2px solid transparent; transition: transform 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease); } /* Clearer, bolder icon strokes */ body.theme-fun .mobile-nav-item .mn-icon svg { width: 23px; height: 23px; stroke-width: 2.4; } /* Hover hint */ body.theme-fun .mobile-nav-item:not(.active):hover .mn-icon { background: #F1ECFF; } body.theme-fun .mobile-nav-item:not(.active):hover { color: var(--fun-purple-d); } /* ACTIVE — filled gradient circle that lifts up + shows position */ body.theme-fun .mobile-nav-item.active { color: var(--fun-purple-d); } body.theme-fun .mobile-nav-item.active .mn-icon { background: linear-gradient(135deg, var(--fun-purple), var(--fun-blue)); border-color: #fff; color: #fff; transform: translateY(-10px) scale(1.12); box-shadow: 0 5px 0 var(--fun-purple-d), 0 8px 18px rgba(124,77,255,0.40); } body.theme-fun .mobile-nav-item.active .mn-icon svg { stroke-width: 2.6; } /* Little dot under the active label as a position marker */ body.theme-fun .mobile-nav-item.active span:last-child { position: relative; } body.theme-fun .mobile-nav-item.active span:last-child::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 6px; height: 6px; border-radius: 50%; background: var(--fun-purple); transform: translateX(-50%); box-shadow: 0 0 8px rgba(155,92,255,0.6); }