/* * LEOENGLISH Beginner — shared neon glass learning system * Loaded after each legacy page so the lessons keep their original content and * behaviour while sharing one responsive visual language. */ :root { --leo-bg: #050615; --leo-panel: rgba(17, 15, 42, .66); --leo-panel-strong: rgba(14, 12, 35, .9); --leo-line: rgba(164, 114, 255, .3); --leo-cyan: #21dfff; --leo-pink: #ff3bc8; --leo-violet: #9b5cff; --leo-white: #f8f7ff; --leo-muted: #aaa8c9; --leo-green: #52f7b7; --leo-red: #ff6c93; --leo-shadow: 0 24px 70px rgba(0, 0, 0, .45), 0 0 40px rgba(127, 73, 255, .1); --leo-gradient: linear-gradient(100deg, var(--leo-pink), var(--leo-violet) 50%, var(--leo-cyan)); } /* ---------- Light theme tokens (mirrors the Next.js app's data-theme switch) ---------- */ :root[data-theme="light"] { --leo-bg: #F7F5FF; --leo-panel: rgba(255, 255, 255, .82); --leo-panel-strong: rgba(255, 255, 255, .97); --leo-line: rgba(124, 58, 237, .22); --leo-cyan: #0E7490; --leo-pink: #BE1976; --leo-violet: #7C3AED; --leo-white: #17152B; --leo-muted: #5A5876; --leo-green: #12946B; --leo-red: #D2374F; --leo-shadow: 0 18px 46px rgba(90, 70, 150, .14), 0 0 26px rgba(124, 58, 237, .08); --leo-gradient: linear-gradient(100deg, var(--leo-pink), var(--leo-violet) 50%, var(--leo-cyan)); } html { scroll-behavior: smooth; color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body.neon-learning { --primary: var(--leo-violet); --primary-hover: #b68aff; --secondary: var(--leo-pink); --bg-gradient: none; --text-main: var(--leo-white); --card-bg: var(--leo-panel); margin: 0 !important; min-height: 100vh !important; height: auto !important; padding: 92px 20px 56px !important; box-sizing: border-box; overflow-x: hidden !important; color: var(--leo-white) !important; background: radial-gradient(circle at 14% 5%, rgba(255, 59, 200, .16), transparent 28%), radial-gradient(circle at 84% 12%, rgba(33, 223, 255, .14), transparent 26%), radial-gradient(circle at 50% 100%, rgba(126, 67, 255, .2), transparent 38%), #050615 !important; font-family: "Poppins", "Lexend", system-ui, sans-serif !important; isolation: isolate; } body.neon-learning *, body.neon-learning *::before, body.neon-learning *::after { box-sizing: border-box; } .neon-ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; } .neon-ambient::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(122, 103, 222, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(122, 103, 222, .14) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, #000, transparent 78%); } .neon-orb { position: absolute; width: 340px; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .17; animation: leo-drift 15s ease-in-out infinite alternate; } .neon-orb.one { left: -110px; top: 12%; background: var(--leo-pink); } .neon-orb.two { right: -100px; top: 34%; background: var(--leo-cyan); animation-delay: -7s; } .neon-orb.three { left: 38%; bottom: -180px; background: var(--leo-violet); animation-delay: -3s; } @keyframes leo-drift { to { transform: translate3d(40px, -24px, 0) scale(1.14); } } .neon-skip { position: fixed; top: 8px; left: 12px; z-index: 100000; padding: 10px 14px; color: #050615; background: var(--leo-cyan); border-radius: 10px; transform: translateY(-150%); transition: transform .2s ease; } .neon-skip:focus { transform: translateY(0); } .neon-coursebar { position: fixed; z-index: 9990; inset: 12px 18px auto; min-height: 64px; display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr); align-items: center; gap: 18px; width: min(1220px, calc(100% - 36px)); margin-inline: auto; padding: 9px 12px 9px 16px; border: 1px solid rgba(142, 91, 255, .38); border-radius: 18px; background: rgba(8, 8, 25, .74); box-shadow: 0 15px 46px rgba(0, 0, 0, .42), 0 0 34px rgba(155, 92, 255, .14); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); } .neon-coursebar::after { content: ""; position: absolute; inset: auto 20px -1px; height: 1px; background: var(--leo-gradient); box-shadow: 0 0 16px rgba(33, 223, 255, .6); } .neon-brand, .neon-unit-meta, .neon-course-actions { display: flex; align-items: center; } .neon-brand { gap: 10px; min-width: 0; text-decoration: none; color: var(--leo-white); } .neon-brand-mark { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 1px solid rgba(255, 59, 200, .55); border-radius: 12px; background: linear-gradient(145deg, rgba(255, 59, 200, .2), rgba(33, 223, 255, .13)); box-shadow: 0 0 20px rgba(255, 59, 200, .22); font-size: 20px; overflow: hidden; } .neon-logo-mark { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: hue-rotate(225deg) saturate(2) brightness(1.15) drop-shadow(0 0 6px rgba(155, 92, 255, .75)) drop-shadow(0 0 12px rgba(33, 223, 255, .55)); } /* Static hub-page nav logo (not JS-injected) */ nav .logo { display: flex; align-items: center; gap: 14px; } nav .logo .neon-logo-mark { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 20px; border: 1.5px solid rgba(255, 59, 200, .5); background: linear-gradient(145deg, rgba(255, 59, 200, .18), rgba(33, 223, 255, .12)); } /* Small guardian mascot fixed in the corner, present on every neon-learning page */ .neon-mascot { position: fixed; right: clamp(6px, 2vw, 22px); bottom: clamp(6px, 2vw, 22px); z-index: 5; width: clamp(70px, 9vw, 130px); pointer-events: none; opacity: .55; mix-blend-mode: screen; filter: drop-shadow(0 0 14px rgba(155, 92, 255, .35)) drop-shadow(0 0 26px rgba(33, 223, 255, .2)); animation: leo-mascot-float 7s ease-in-out infinite; } @keyframes leo-mascot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (max-width: 640px) { .neon-mascot { width: clamp(52px, 16vw, 84px); opacity: .4; } } @media (prefers-reduced-motion: reduce) { .neon-mascot { animation: none; } } .neon-brand-copy { min-width: 0; } .neon-brand-copy strong { display: block; font: 800 13px/1.1 "Montserrat", sans-serif; letter-spacing: .08em; } .neon-brand-copy small { display: block; margin-top: 4px; color: var(--leo-muted); font-size: 8px; letter-spacing: .17em; white-space: nowrap; } .neon-unit-meta { gap: 12px; justify-content: center; min-width: 0; } .neon-unit-number { flex: 0 0 auto; padding: 7px 11px; border: 1px solid rgba(33, 223, 255, .28); border-radius: 10px; color: var(--leo-cyan); background: rgba(33, 223, 255, .07); font-size: 11px; font-weight: 800; letter-spacing: .13em; } .neon-unit-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14px; } .neon-course-actions { justify-content: flex-end; gap: 7px; } .neon-icon-link, .neon-prev-next, .neon-theme-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: 0 11px; border: 1px solid rgba(164, 114, 255, .3); border-radius: 11px; background: rgba(255, 255, 255, .035); color: var(--leo-white); text-decoration: none; font-size: 12px; cursor: pointer; transition: .25s ease; } .neon-icon-link:hover, .neon-prev-next:hover, .neon-theme-toggle:hover { transform: translateY(-2px); border-color: var(--leo-cyan); color: var(--leo-cyan); box-shadow: 0 0 18px rgba(33, 223, 255, .16); } .neon-icon-link.active { border-color: var(--leo-pink); color: #fff; background: linear-gradient(120deg, rgba(255, 59, 200, .2), rgba(155, 92, 255, .18)); } .neon-icon-link span { margin-left: 6px; } .neon-theme-toggle svg { width: 16px; height: 16px; } body.neon-learning > .container, body.neon-learning > .game-container:not(#gameBoard), body.neon-learning > main { position: relative; z-index: 1; width: min(1180px, 100%) !important; max-width: 1180px !important; margin-inline: auto !important; } /* Shared glass surfaces */ body.neon-learning nav, body.neon-learning .section, body.neon-learning .flashcard, body.neon-learning .activity, body.neon-learning .exercise, body.neon-learning .grammar-content, body.neon-learning .game-container, body.neon-learning .container, body.neon-learning .chat-box, body.neon-learning .mode-selector, body.neon-learning .modal-content, body.neon-learning .info-panel, body.neon-learning .tips-box, body.neon-learning .error-box, body.neon-learning .diff-container, body.neon-learning .unit { color: var(--leo-white) !important; border-color: var(--leo-line) !important; background: var(--leo-panel) !important; box-shadow: var(--leo-shadow) !important; backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); } body.neon-learning h1, body.neon-learning .main-title { color: transparent !important; background: var(--leo-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; text-shadow: none !important; filter: drop-shadow(0 0 16px rgba(155, 92, 255, .18)); } body.neon-learning h2, body.neon-learning h3, body.neon-learning h4 { color: var(--leo-white) !important; } body.neon-learning p, body.neon-learning li, body.neon-learning label, body.neon-learning .subtitle, body.neon-learning .sub-title { color: var(--leo-muted) !important; } body.neon-learning a { -webkit-tap-highlight-color: transparent; } body.neon-learning button, body.neon-learning .btn, body.neon-learning .restart-btn, body.neon-learning #hint-btn { border: 0 !important; border-radius: 13px !important; color: #070611 !important; background: var(--leo-gradient) !important; box-shadow: 0 10px 28px rgba(155, 92, 255, .25), 0 0 22px rgba(33, 223, 255, .1) !important; font-weight: 800 !important; cursor: pointer; transition: transform .24s ease, box-shadow .24s ease, filter .24s ease !important; } body.neon-learning button:hover, body.neon-learning .btn:hover, body.neon-learning .restart-btn:hover, body.neon-learning #hint-btn:hover { transform: translateY(-2px) !important; filter: brightness(1.13); box-shadow: 0 14px 35px rgba(155, 92, 255, .34), 0 0 30px rgba(33, 223, 255, .2) !important; } body.neon-learning button:focus-visible, body.neon-learning a:focus-visible { outline: 3px solid rgba(33, 223, 255, .72); outline-offset: 3px; } /* Main lesson pages */ body.lesson-full { display: block !important; align-items: initial !important; justify-content: initial !important; } body.lesson-full > .container { padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; backdrop-filter: none; } body.lesson-full nav { position: sticky !important; top: calc(var(--leo-coursebar-h, 80px) + 8px) !important; z-index: 900; margin: 12px 0 22px !important; padding: 13px 18px !important; border-radius: 16px !important; background: rgba(8, 8, 25, .82) !important; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } body.lesson-full nav .logo { color: var(--leo-white) !important; } body.lesson-full .nav-links a { color: var(--leo-muted) !important; } body.lesson-full .nav-links a:hover { color: var(--leo-cyan) !important; background: rgba(33, 223, 255, .07) !important; } body.lesson-full .section { padding: clamp(22px, 4vw, 46px) !important; border-radius: 26px !important; min-height: 540px; } body.lesson-full .section.active { animation: leo-enter .45s ease both !important; } body.lesson-full .flashcard { border-radius: 22px !important; padding: clamp(22px, 4vw, 40px) !important; } body.lesson-full .flashcard:hover { transform: translateY(-4px) scale(1.01) !important; box-shadow: 0 26px 70px rgba(0,0,0,.48), 0 0 40px rgba(155,92,255,.18) !important; } body.lesson-full .game-container { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none; } body.lesson-full .card, body.lesson-full .word-card { color: var(--leo-white) !important; border-color: rgba(155, 92, 255, .38) !important; background: linear-gradient(145deg, rgba(23, 18, 52, .9), rgba(10, 13, 36, .82)) !important; box-shadow: 0 14px 35px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.06) !important; } /* Flashcard Next/Back controls — Back pinned to the left, Next stays centered */ body.lesson-full .flashcard-controls { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 20px; min-height: 44px; } body.lesson-full .flashcard-back-btn { position: absolute !important; left: 0; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(155,92,255,.4) !important; color: var(--leo-white) !important; box-shadow: none !important; } body.lesson-full .flashcard-back-btn:hover { border-color: var(--leo-cyan) !important; color: var(--leo-cyan) !important; background: rgba(33,223,255,.08) !important; box-shadow: 0 0 16px rgba(33,223,255,.3) !important; } @media (max-width: 560px) { body.lesson-full .flashcard-controls { flex-direction: column-reverse; gap: 10px; } body.lesson-full .flashcard-back-btn { position: static !important; } } /* Vocab matching grid — English cards get purple neon glass with a fast rising light-sweep; Vietnamese cards get a distinct pink tone */ body.lesson-full #vocabulary .card, body.lesson-full .card.english, body.lesson-full .card.vietnamese { position: relative; overflow: hidden; } body.lesson-full .card.english { background: linear-gradient(160deg, rgba(155,92,255,.45), rgba(64,22,150,.8), rgba(33,223,255,.3)) !important; border-color: rgba(155,92,255,.7) !important; color: var(--leo-white) !important; box-shadow: 0 10px 26px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.14), 0 0 26px rgba(155,92,255,.3) !important; } body.lesson-full .card.english::after { content: ""; position: absolute; top: -60%; left: -60%; width: 35%; height: 220%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); filter: blur(1.5px); animation: leo-glass-diagonal 1.1s linear infinite; pointer-events: none; } @keyframes leo-glass-diagonal { 0% { transform: translate(-30%, 130%) rotate(45deg); opacity: 0; } 15% { opacity: .95; } 100% { transform: translate(130%, -30%) rotate(45deg); opacity: 0; } } body.lesson-full .card.vietnamese { background: linear-gradient(160deg, rgba(255,59,200,.32), rgba(40,12,45,.88)) !important; border-color: rgba(255,59,200,.55) !important; color: var(--leo-white) !important; box-shadow: 0 10px 26px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.08) !important; } body.lesson-full .card.english span { color: var(--leo-white) !important; font-weight: 800 !important; font-size: 1.08em; text-shadow: 0 0 8px rgba(255,255,255,.5), 0 0 16px rgba(155,92,255,.4); position: relative; z-index: 1; } body.lesson-full #vocabulary .phonetic { color: var(--leo-white) !important; opacity: .92; font-weight: 600 !important; font-size: 10px !important; text-shadow: 0 0 6px rgba(255,255,255,.35); position: relative; z-index: 1; } body.lesson-full .card.vietnamese { font-weight: 800 !important; text-shadow: 0 0 8px rgba(255,255,255,.35); } body.lesson-full .divider { color: rgba(33, 223, 255, .36) !important; } body.lesson-full .vietnamese, body.lesson-full .answer-vietnamese { color: var(--leo-white) !important; } body.lesson-full .english, body.lesson-full #questions .question, body.lesson-full #questions .answer-text { color: var(--leo-cyan) !important; text-shadow: 0 0 10px rgba(33, 223, 255, .55), 0 0 20px rgba(33, 223, 255, .25) !important; } body.lesson-full input, body.lesson-full select, body.lesson-full textarea { color: var(--leo-white) !important; background: rgba(4, 5, 18, .64) !important; border: 1px solid rgba(155, 92, 255, .36) !important; border-radius: 10px !important; } /* Vocabulary flashcards */ body.lesson-vocabulary { display: flex !important; padding-top: 118px !important; } body.lesson-vocabulary .title-container { position: relative !important; top: auto !important; width: min(1050px, 100%) !important; margin: 0 auto 10px !important; overflow: visible !important; } body.lesson-vocabulary .title-container h1, body.lesson-vocabulary .title-container .subtitle { white-space: normal !important; animation: none !important; transform: none !important; } body.lesson-vocabulary .title-container h1 { font-size: clamp(28px, 5vw, 48px) !important; margin: 0 !important; } body.lesson-vocabulary .game-container, body.lesson-vocabulary #gameBoard { display: flex !important; gap: 18px !important; justify-content: center !important; width: min(1120px, 100%) !important; max-width: 1120px !important; margin: 18px auto !important; padding: clamp(20px, 4vw, 38px) !important; border-radius: 28px !important; } /* ===== Futuristic Octagon Energy Glass Card (static border, no spin) ===== */ @keyframes leo-energy-flicker { 0%, 100% { filter: drop-shadow(0 0 4px rgba(0,234,255,.5)) drop-shadow(0 0 10px rgba(139,92,246,.38)); } 45% { filter: drop-shadow(0 0 7px rgba(0,234,255,.8)) drop-shadow(0 0 16px rgba(139,92,246,.6)); } 50% { filter: drop-shadow(0 0 5px rgba(0,234,255,.6)) drop-shadow(0 0 11px rgba(139,92,246,.45)); } 55% { filter: drop-shadow(0 0 7px rgba(0,234,255,.8)) drop-shadow(0 0 16px rgba(139,92,246,.6)); } } body.lesson-vocabulary .card, body.lesson-vocabulary .hexagon, body.lesson-vocabulary .octagon, body.lesson-vocabulary .flashcard { color: var(--leo-white) !important; border: 2px solid transparent !important; background: linear-gradient(145deg, rgba(28,22,66,.88), rgba(10,15,38,.82)) padding-box, conic-gradient(from 135deg, rgba(124,77,255,.35) 0deg, rgba(124,77,255,.35) 300deg, #00eaff 322deg, #6f4cff 336deg, #d946ef 346deg, #ffffff 352deg, rgba(124,77,255,.35) 360deg) border-box !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -20px 45px rgba(0,0,0,.15), 0 15px 35px rgba(0,0,0,.25) !important; animation: leo-energy-flicker 2.6s ease-in-out infinite; animation-delay: var(--energy-delay, 0s); transition: transform .3s cubic-bezier(.2,.8,.2,1), filter .3s ease, box-shadow .3s ease !important; will-change: transform; } body.lesson-vocabulary .card:nth-child(2n) { --energy-delay: -.7s; } body.lesson-vocabulary .card:nth-child(3n) { --energy-delay: -1.4s; } body.lesson-vocabulary .card:nth-child(4n) { --energy-delay: -.35s; } body.lesson-vocabulary .card:nth-child(5n) { --energy-delay: -1.9s; } body.lesson-vocabulary .card:hover, body.lesson-vocabulary .hexagon:hover, body.lesson-vocabulary .octagon:hover, body.lesson-vocabulary .flashcard:hover { transform: translateY(-5px) scale(1.025) !important; filter: brightness(1.08); animation-duration: 1.5s !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -20px 45px rgba(0,0,0,.15), 0 15px 40px rgba(92,64,255,.18), 0 0 25px rgba(0,224,255,.10) !important; } @media (max-width: 640px) { body.lesson-vocabulary .card { animation-duration: 3.2s; } body.lesson-vocabulary .card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -20px 45px rgba(0,0,0,.15), 0 12px 30px rgba(92,64,255,.14), 0 0 18px rgba(0,224,255,.08) !important; } } body.lesson-vocabulary .card-back, body.lesson-vocabulary .back { color: var(--leo-white) !important; background: linear-gradient(145deg, #25164f, #101434) !important; } body.lesson-vocabulary .phonetic { color: var(--leo-cyan) !important; text-shadow: 0 0 12px rgba(0,220,255,.2); } /* Fireflies/bubbles: violet + cyan, never the old gold */ body.lesson-vocabulary .firefly, body.lesson-vocabulary .bubble { background: var(--leo-cyan) !important; box-shadow: 0 0 8px 2px var(--leo-cyan), 0 0 14px 4px rgba(155,92,255,.5) !important; } body.lesson-vocabulary .firefly:nth-child(odd), body.lesson-vocabulary .bubble:nth-child(odd) { background: #9B5CFF !important; box-shadow: 0 0 8px 2px #9B5CFF, 0 0 14px 4px rgba(33,223,255,.5) !important; } body.lesson-vocabulary .restart-btn { position: relative !important; bottom: auto !important; right: auto !important; margin: 10px auto !important; padding: 12px 24px !important; } body.lesson-vocabulary .popup { color: var(--leo-white) !important; background: var(--leo-panel-strong) !important; border: 1px solid var(--leo-line) !important; box-shadow: var(--leo-shadow) !important; } body.lesson-vocabulary .popup #popupIPA { color: var(--leo-muted) !important; font-size: 1.05em !important; } body.lesson-vocabulary .popup #popupMeaning { color: var(--leo-cyan) !important; font-weight: 700 !important; } body.lesson-vocabulary .popup #popupPartOfSpeech { color: #c9adff !important; font-size: 1em !important; } body.lesson-vocabulary .popup .example-row { color: var(--leo-white) !important; font-size: 1em !important; text-align: center !important; line-height: 1.5; } body.lesson-vocabulary .popup #popupExampleVi { color: var(--leo-green) !important; font-size: .95em !important; font-style: italic; text-align: center !important; } body.lesson-vocabulary .popup .translate-btn { display: inline-flex !important; align-items: center; gap: 4px; margin-left: 8px; padding: 4px 12px !important; font-family: 'Montserrat', sans-serif; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .04em; border-radius: 999px !important; border: 1px solid rgba(33,223,255,.45) !important; background: rgba(33,223,255,.12) !important; color: var(--leo-cyan) !important; box-shadow: none !important; cursor: pointer; vertical-align: middle; transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important; } body.lesson-vocabulary .popup .translate-btn:hover { transform: translateY(-1px) !important; background: rgba(33,223,255,.25) !important; box-shadow: 0 0 16px rgba(33,223,255,.4) !important; } /* Vocabulary game */ body.lesson-game { display: block !important; } body.lesson-game > .container { width: min(760px, 100%) !important; max-width: 760px !important; padding: 20px !important; border: 1px solid var(--leo-line) !important; border-radius: 28px !important; } body.lesson-game .header-container { border-color: rgba(33, 223, 255, .36) !important; background: transparent !important; } body.lesson-game .main-title { animation-duration: 18s !important; } body.lesson-game .info-panel { color: var(--leo-white) !important; border: 1px solid rgba(155,92,255,.3) !important; background: linear-gradient(145deg, rgba(34, 23, 72, .82), rgba(10, 11, 32, .86)) !important; } body.lesson-game #target-word { color: var(--leo-white) !important; border: 1px solid rgba(255, 59, 200, .42) !important; background: linear-gradient(110deg, rgba(255,59,200,.16), rgba(155,92,255,.2), rgba(33,223,255,.15)) !important; box-shadow: 0 12px 34px rgba(0,0,0,.38), 0 0 24px rgba(155,92,255,.14) !important; } body.lesson-game .vocab-card { color: var(--leo-white) !important; border: 1px solid rgba(155, 92, 255, .42) !important; border-radius: 18px !important; background: linear-gradient(145deg, rgba(28, 21, 61, .92), rgba(9, 12, 31, .94)) !important; box-shadow: 0 14px 30px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.07) !important; } body.lesson-game .vocab-card:hover { transform: translateY(-5px) scale(1.025) !important; border-color: var(--leo-cyan) !important; box-shadow: 0 20px 40px rgba(0,0,0,.43), 0 0 25px rgba(33,223,255,.18) !important; } body.lesson-game .vocab-card .icon, body.lesson-game .speaker { color: var(--leo-cyan) !important; } body.lesson-game .word { color: var(--leo-white) !important; } body.lesson-game .pinyin-card { color: var(--leo-muted) !important; } body.lesson-game #feedback, body.lesson-game #hint-text { color: var(--leo-muted) !important; } body.lesson-game .correct-feedback { color: var(--leo-green) !important; } body.lesson-game .wrong-feedback { color: var(--leo-red) !important; } body.lesson-game .firefly { background: var(--leo-cyan) !important; box-shadow: 0 0 12px var(--leo-cyan) !important; } /* Dialogue / pronunciation trainer */ body.lesson-dialogue { padding-top: 104px !important; } body.lesson-dialogue > .container { width: min(820px, 100%) !important; max-width: 820px !important; padding: clamp(22px, 5vw, 44px) !important; border: 1px solid rgba(155, 92, 255, .38) !important; border-radius: 30px !important; } body.lesson-dialogue .ai-badge { border: 1px solid rgba(33,223,255,.32) !important; color: var(--leo-white) !important; background: rgba(10,13,35,.8) !important; box-shadow: 0 0 24px rgba(33,223,255,.12) !important; } body.lesson-dialogue .ai-dot { background: var(--leo-green) !important; box-shadow: 0 0 12px var(--leo-green); } body.lesson-dialogue .mode-selector { border: 1px solid var(--leo-line) !important; border-radius: 18px !important; padding: 7px !important; } body.lesson-dialogue .mode-btn { color: var(--leo-muted) !important; background: transparent !important; box-shadow: none !important; } body.lesson-dialogue .mode-btn.active { color: var(--leo-white) !important; background: linear-gradient(110deg, rgba(255,59,200,.28), rgba(155,92,255,.34), rgba(33,223,255,.24)) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 20px rgba(155,92,255,.14) !important; } body.lesson-dialogue .chat-box { border-radius: 22px !important; min-height: 250px; } body.lesson-dialogue .en-text { color: var(--leo-cyan) !important; text-shadow: 0 0 10px rgba(33, 223, 255, .55), 0 0 20px rgba(33, 223, 255, .25) !important; } body.lesson-dialogue .vi-text { color: var(--leo-white) !important; } body.lesson-dialogue .status-text { color: var(--leo-muted) !important; } body.lesson-dialogue .badge-robot { color: var(--leo-cyan) !important; background: rgba(33,223,255,.11) !important; } body.lesson-dialogue .badge-user { color: #ff9dde !important; background: rgba(255,59,200,.11) !important; } body.lesson-dialogue .record-btn { color: #fff !important; background: radial-gradient(circle at 35% 30%, #ff79da, #ff3b86 48%, #8f2bff) !important; border: 5px solid rgba(255,255,255,.82) !important; box-shadow: 0 12px 30px rgba(255,59,151,.32), 0 0 34px rgba(155,92,255,.24) !important; } body.lesson-dialogue .transcript-preview { color: var(--leo-green) !important; background: rgba(82,247,183,.07) !important; border-color: rgba(82,247,183,.3) !important; } body.lesson-dialogue .modal-overlay { background: rgba(2,3,12,.8) !important; backdrop-filter: blur(14px); } body.lesson-dialogue .modal-content { background: rgba(11,10,30,.96) !important; } body.lesson-dialogue .score-circle { background: var(--leo-gradient) !important; border-color: rgba(255,255,255,.8) !important; } /* 24-unit course hub */ body.lesson-hub { display: block !important; padding-top: 28px !important; } body.lesson-hub > .container { padding: 0 20px 64px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none; } body.lesson-hub nav { position: sticky !important; top: 12px !important; z-index: 1000; min-height: 100px; padding: 12px 22px !important; border-radius: 18px !important; background: rgba(8,8,25,.78) !important; } body.lesson-hub nav .logo { color: var(--leo-white) !important; } body.lesson-hub .nav-links a { color: var(--leo-muted) !important; } body.lesson-hub > .container > h1 { margin-top: 72px !important; font-size: clamp(34px, 6vw, 64px) !important; letter-spacing: -.04em; } body.lesson-hub > .container > h2 { margin-bottom: 34px !important; color: var(--leo-muted) !important; font-size: 15px !important; letter-spacing: .22em; text-transform: uppercase; } .neon-hub-kicker { margin: 56px 0 -60px; text-align: center; color: var(--leo-cyan); font-size: 11px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; } .neon-filterbar { display: flex; align-items: center; gap: 12px; width: min(720px, 100%); margin: 0 auto 34px; padding: 10px 12px 10px 18px; border: 1px solid var(--leo-line); border-radius: 16px; background: rgba(13, 12, 35, .65); box-shadow: 0 14px 35px rgba(0,0,0,.28); backdrop-filter: blur(18px); } .neon-filterbar .search-icon { color: var(--leo-cyan); } .neon-filterbar input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--leo-white); background: transparent; font: inherit; } .neon-filterbar input::placeholder { color: #777596; } .neon-filter-count { flex: 0 0 auto; padding: 7px 10px; border-radius: 9px; color: var(--leo-muted); background: rgba(255,255,255,.05); font-size: 11px; font-weight: 700; } body.lesson-hub .unit-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 18px !important; } /* ============ UNIT CARD ============ */ body.lesson-hub .unit { position: relative; min-height: 440px; padding: 20px !important; background: linear-gradient(145deg, rgba(19,15,48,.94), rgba(12,18,43,.90)) !important; border: 1px solid rgba(130,90,255,.25) !important; border-radius: 28px !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; text-align: left !important; box-shadow: 0 20px 60px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.04); transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .4s ease !important; } body.lesson-hub .unit::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 25%), rgba(155,92,255,.19), transparent 60%); opacity: 0; transition: opacity .3s ease; } body.lesson-hub .unit:hover { transform: translateY(-6px) !important; border-color: rgba(33,223,255,.48) !important; box-shadow: 0 28px 66px rgba(0,0,0,.4), 0 0 40px rgba(33,223,255,.13), inset 0 1px rgba(255,255,255,.06) !important; } body.lesson-hub .unit:hover::after { opacity: 1; } body.lesson-hub .unit:hover .unit-visual { filter: brightness(1.1) saturate(1.15); } /* ============ UNIT VISUAL BANNER ============ */ body.lesson-hub .unit-visual { --u-icon-a: var(--leo-cyan); --u-icon-b: var(--leo-violet); --u-icon-c: var(--leo-pink); --u-glow: rgba(155,92,255,.5); --u-particle: #9fd8ff; position: relative; width: 100%; height: 128px; margin: 0 0 18px !important; border-radius: 22px; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, rgba(255,59,200,.14), rgba(155,92,255,.12) 45%, rgba(33,223,255,.13)), linear-gradient(160deg, rgba(22,18,46,.92), rgba(9,10,26,.94)); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -20px 30px -20px rgba(0,0,0,.6); transition: filter .35s ease; } body.lesson-hub .unit-visual .energy-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 42px), repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 42px); -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 90%); mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 90%); opacity: .55; z-index: 1; } body.lesson-hub .unit-visual .ambient-light { position: absolute; left: -12%; top: -35%; width: 62%; height: 170%; border-radius: 50%; filter: blur(28px); opacity: .5; background: radial-gradient(circle, var(--u-glow), transparent 70%); animation: unitAmbientPulse 6s ease-in-out infinite; z-index: 1; } body.lesson-hub .unit-visual::before { content: ""; position: absolute; top: -60%; left: -35%; width: 42%; height: 220%; background: linear-gradient(90deg, transparent, rgba(70,220,255,.16), rgba(255,65,210,.18), transparent); transform: rotate(15deg); animation: unitLightSweep 7s linear infinite; pointer-events: none; z-index: 3; } body.lesson-hub .unit-visual::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--angle, 0deg), transparent 0 8%, rgba(33,223,255,.85) 18%, rgba(255,59,200,.85) 32%, transparent 46%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .8; animation: unitBorderSpin 5.5s linear infinite; z-index: 4; pointer-events: none; } @property --angle { syntax: ''; inherits: false; initial-value: 0deg; } body.lesson-hub .unit-visual .floating-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; } body.lesson-hub .unit-visual .particle { position: absolute; bottom: 4px; width: 3px; height: 3px; border-radius: 50%; background: var(--u-particle); box-shadow: 0 0 6px 1px var(--u-particle); opacity: 0; animation: unitParticleDrift 10s linear infinite; } body.lesson-hub .unit-visual .visual-icons { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 0 20px; z-index: 3; } body.lesson-hub .unit-visual .visual-icons i { position: relative; } body.lesson-hub .unit-visual .icon-a { font-size: 46px; color: var(--u-icon-a); opacity: .95; filter: drop-shadow(0 0 14px var(--u-icon-a)); } body.lesson-hub .unit-visual .icon-b { font-size: 32px; color: var(--u-icon-b); opacity: .85; margin-top: 18px; filter: drop-shadow(0 0 12px var(--u-icon-b)); } body.lesson-hub .unit-visual .icon-c { font-size: 24px; color: var(--u-icon-c); opacity: .8; margin-top: -14px; filter: drop-shadow(0 0 10px var(--u-icon-c)); } body.lesson-hub .unit-visual .icon-accent { font-size: 16px; color: var(--u-icon-a); opacity: .55; align-self: flex-start; margin-top: 10px; } body.lesson-hub .unit-visual .icon-ghost { font-size: 84px; color: var(--u-icon-b); opacity: .14; position: absolute !important; right: 6px; top: 50%; transform: translateY(-50%); margin: 0 !important; } body.lesson-hub .unit-visual .unit-badge { position: absolute; top: 10px; right: 12px; z-index: 5; display: flex; align-items: center; gap: 5px; padding: 4px 11px 4px 9px; border-radius: 999px; background: rgba(8,8,24,.55); border: 1px solid rgba(155,92,255,.4); backdrop-filter: blur(4px); box-shadow: 0 0 14px rgba(33,223,255,.22); } body.lesson-hub .unit-visual .unit-badge .badge-label { font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 800; letter-spacing: .14em; color: var(--leo-cyan); opacity: .9; } body.lesson-hub .unit-visual .unit-badge .badge-num { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 800; color: var(--leo-white); } /* Unit 1 — At the Bank */ body.lesson-hub .unit-visual.theme-bank { --u-icon-a: var(--leo-cyan); --u-icon-b: var(--leo-violet); --u-icon-c: #F5B942; --u-glow: rgba(33,223,255,.5); --u-particle: #7fe9ff; } /* Unit 2 — Shopping for Clothes */ body.lesson-hub .unit-visual.theme-shopping { --u-icon-a: var(--leo-pink); --u-icon-b: var(--leo-violet); --u-icon-c: var(--leo-cyan); --u-glow: rgba(255,59,200,.45); --u-particle: #ff9de1; } /* Unit 3 — Social Media and Technology */ body.lesson-hub .unit-visual.theme-technology { --u-icon-a: var(--leo-cyan); --u-icon-b: #4B8CFF; --u-icon-c: var(--leo-violet); --u-glow: rgba(33,223,255,.45); --u-particle: #9fd8ff; } /* Generic rotating palette for Units 4-24 until they get bespoke scenes */ body.lesson-hub .unit-visual.theme-default.accent-0 { --u-icon-a: var(--leo-cyan); --u-icon-b: var(--leo-violet); --u-glow: rgba(33,223,255,.4); --u-particle: #7fe9ff; } body.lesson-hub .unit-visual.theme-default.accent-1 { --u-icon-a: var(--leo-pink); --u-icon-b: var(--leo-violet); --u-glow: rgba(255,59,200,.4); --u-particle: #ff9de1; } body.lesson-hub .unit-visual.theme-default.accent-2 { --u-icon-a: var(--leo-violet); --u-icon-b: var(--leo-cyan); --u-glow: rgba(155,92,255,.4); --u-particle: #c9adff; } body.lesson-hub .unit-visual.theme-default.accent-3 { --u-icon-a: #4B8CFF; --u-icon-b: var(--leo-pink); --u-glow: rgba(75,140,255,.4); --u-particle: #9fd8ff; } body.lesson-hub .unit-visual.theme-default.accent-4 { --u-icon-a: var(--leo-cyan); --u-icon-b: #F5B942; --u-glow: rgba(33,223,255,.35); --u-particle: #7fe9ff; } @keyframes unitBorderSpin { to { --angle: 360deg; } } @keyframes unitAmbientPulse { 0%, 100% { opacity: .38; transform: scale(1); } 50% { opacity: .68; transform: scale(1.08); } } @keyframes unitLightSweep { 0% { left: -35%; } 100% { left: 130%; } } @keyframes unitParticleDrift { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .85; } 100% { transform: translateY(-118px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { body.lesson-hub .unit-visual::before, body.lesson-hub .unit-visual::after, body.lesson-hub .unit-visual .ambient-light, body.lesson-hub .unit-visual .particle { animation: none; } } body.lesson-hub .unit a { color: var(--leo-white) !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.45; } body.lesson-hub .unit > div:first-child > a { min-height: 50px; } body.lesson-hub .unit p { min-height: 24px; text-align: left; } body.lesson-hub .unit-icon { color: var(--leo-pink) !important; } body.lesson-hub .vocabulary { justify-content: flex-start !important; } body.lesson-hub .vocabulary a { color: var(--leo-cyan) !important; font-size: 12px !important; letter-spacing: .1em; } body.lesson-hub .vocab-icon { color: var(--leo-cyan) !important; } body.lesson-hub .game-section { border-top-color: rgba(255,255,255,.06) !important; align-items: stretch !important; gap: 10px !important; } /* ============ ACTION BUTTONS (Lesson / Vocabulary / Dialogue / Game) ============ */ body.lesson-hub .lesson-link, body.lesson-hub .game-link, body.lesson-hub .dialogue-link, body.lesson-hub .vocab-link { position: relative; display: flex !important; align-items: center; gap: 12px; width: 100% !important; min-height: 58px; padding: 0 18px 0 22px !important; border-radius: 16px !important; background: linear-gradient(110deg, rgba(255,255,255,.055), rgba(120,80,255,.055)) !important; border: 1px solid rgba(160,100,255,.3) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 25px rgba(0,0,0,.15) !important; overflow: hidden; font-size: 12px !important; letter-spacing: .07em; transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease !important; } body.lesson-hub .lesson-link::before, body.lesson-hub .game-link::before, body.lesson-hub .dialogue-link::before, body.lesson-hub .vocab-link::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.09), transparent 70%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; } body.lesson-hub .lesson-link:hover::before, body.lesson-hub .game-link:hover::before, body.lesson-hub .dialogue-link:hover::before, body.lesson-hub .vocab-link:hover::before { transform: translateX(120%); } body.lesson-hub .lesson-link:active, body.lesson-hub .game-link:active, body.lesson-hub .dialogue-link:active, body.lesson-hub .vocab-link:active { transform: scale(.985); } body.lesson-hub .action-line { position: absolute; left: 0; top: 16%; width: 2px; height: 68%; border-radius: 2px; background: linear-gradient(180deg, var(--leo-cyan), var(--leo-violet)); opacity: .55; transition: width .3s ease, opacity .3s ease, box-shadow .3s ease; } body.lesson-hub .action-icon { position: relative; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(67,216,255,.18), rgba(255,54,204,.14)); border: 1px solid rgba(100,210,255,.25); box-shadow: 0 0 18px rgba(73,200,255,.12); transition: box-shadow .3s ease; } body.lesson-hub .action-icon i { font-size: 15px !important; color: var(--leo-white) !important; margin: 0 !important; } body.lesson-hub .action-label { position: relative; font-weight: 700; text-transform: uppercase; transition: color .3s ease; } body.lesson-hub .lesson-link:hover { border-color: #ffd166 !important; background: linear-gradient(110deg, rgba(255,255,255,.07), rgba(255,209,102,.1)) !important; } body.lesson-hub .lesson-link:hover .action-label { color: #ffd166 !important; } body.lesson-hub .lesson-link:hover .action-line { background: linear-gradient(180deg, #ffd166, #ffe9b8); width: 3px; opacity: 1; box-shadow: 0 0 10px #ffd166; } body.lesson-hub .lesson-link:hover .action-icon { box-shadow: 0 0 22px rgba(255,209,102,.35); border-color: rgba(255,209,102,.5); } body.lesson-hub .vocab-link:hover { border-color: var(--leo-violet) !important; background: linear-gradient(110deg, rgba(255,255,255,.07), rgba(155,92,255,.1)) !important; } body.lesson-hub .vocab-link:hover .action-label { color: #c9adff !important; } body.lesson-hub .vocab-link:hover .action-line { background: linear-gradient(180deg, var(--leo-violet), #c9adff); width: 3px; opacity: 1; box-shadow: 0 0 10px var(--leo-violet); } body.lesson-hub .vocab-link:hover .action-icon { box-shadow: 0 0 22px rgba(155,92,255,.35); border-color: rgba(155,92,255,.5); } body.lesson-hub .dialogue-link:hover { border-color: var(--leo-cyan) !important; background: linear-gradient(110deg, rgba(255,255,255,.07), rgba(33,223,255,.08)) !important; } body.lesson-hub .dialogue-link:hover .action-label { color: var(--leo-cyan) !important; } body.lesson-hub .dialogue-link:hover .action-line { background: linear-gradient(180deg, var(--leo-cyan), #9fe8ff); width: 3px; opacity: 1; box-shadow: 0 0 10px var(--leo-cyan); } body.lesson-hub .dialogue-link:hover .action-icon { box-shadow: 0 0 22px rgba(33,223,255,.35); border-color: rgba(33,223,255,.5); } body.lesson-hub .game-link:hover { border-color: var(--leo-pink) !important; background: linear-gradient(110deg, rgba(255,255,255,.07), rgba(255,59,200,.08)) !important; } body.lesson-hub .game-link:hover .action-label { color: #ff9de1 !important; } body.lesson-hub .game-link:hover .action-line { background: linear-gradient(180deg, var(--leo-pink), #ff9de1); width: 3px; opacity: 1; box-shadow: 0 0 10px var(--leo-pink); } body.lesson-hub .game-link:hover .action-icon { box-shadow: 0 0 22px rgba(255,59,200,.35); border-color: rgba(255,59,200,.5); } body.lesson-hub .simple-user-display { border: 1px solid rgba(155,92,255,.25) !important; background: rgba(255,255,255,.035) !important; } body.lesson-hub .signout-btn { color: var(--leo-white) !important; background: rgba(255,108,147,.14) !important; box-shadow: none !important; } body.lesson-hub .unit.is-filtered { display: none !important; } @keyframes leo-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { .neon-coursebar { grid-template-columns: 1fr auto; } .neon-unit-meta { display: none; } .neon-icon-link span { display: none; } body.lesson-full .nav-links { background: rgba(8,8,25,.96) !important; border: 1px solid var(--leo-line); } } @media (max-width: 640px) { body.neon-learning { padding: 82px 12px 36px !important; } .neon-coursebar { inset: 8px 8px auto; width: calc(100% - 16px); min-height: 58px; padding: 7px 8px 7px 11px; border-radius: 15px; gap: 8px; } .neon-brand-mark { flex-basis: 34px; height: 34px; font-size: 17px; } .neon-brand-copy strong { font-size: 11px; } .neon-brand-copy small { display: none; } .neon-prev-next { display: none; } .neon-icon-link { min-width: 34px; min-height: 34px; padding: 0 8px; } body.lesson-full .section { padding: 20px 14px !important; border-radius: 20px !important; } body.lesson-full nav { padding: 11px 13px !important; } body.lesson-vocabulary { padding-top: 92px !important; } body.lesson-vocabulary .game-container, body.lesson-vocabulary #gameBoard { padding: 15px 10px !important; gap: 8px !important; } body.lesson-vocabulary .card, body.lesson-vocabulary .hexagon, body.lesson-vocabulary .octagon { width: 138px !important; height: 138px !important; font-size: .92rem !important; } body.lesson-game > .container { padding: 14px !important; border-radius: 20px !important; } body.lesson-game .vocab-card { height: 170px !important; } body.lesson-dialogue { padding-top: 82px !important; } body.lesson-dialogue > .container { padding: 22px 14px !important; border-radius: 22px !important; } body.lesson-dialogue .chat-box { padding: 25px 14px !important; } body.lesson-dialogue .en-text { font-size: 23px !important; } body.lesson-hub { padding: 10px !important; } body.lesson-hub > .container { padding-inline: 0 !important; } body.lesson-hub nav { top: 7px !important; padding: 10px 14px !important; min-height: 76px; } body.lesson-hub nav .logo { gap: 10px; } body.lesson-hub nav .logo .neon-logo-mark { flex-basis: 54px; width: 54px; height: 54px; border-radius: 15px; } body.lesson-hub nav .logo span { font-size: 15px; } body.lesson-hub > .container > h1 { margin-top: 54px !important; } .neon-hub-kicker { margin-top: 40px; } body.lesson-hub .unit-list { grid-template-columns: 1fr !important; } body.lesson-hub .unit { min-height: 350px; } body.lesson-hub .unit-visual { height: 108px; } body.lesson-hub .unit-visual .icon-a { font-size: 38px; } body.lesson-hub .unit-visual .icon-b { font-size: 26px; } body.lesson-hub .unit-visual .icon-c { font-size: 20px; } body.lesson-hub .unit-visual .icon-ghost { font-size: 64px; } body.lesson-hub .lesson-link, body.lesson-hub .game-link, body.lesson-hub .dialogue-link, body.lesson-hub .vocab-link { min-height: 54px; } } @media (min-width: 641px) and (max-width: 900px) { body.lesson-hub .unit-list { grid-template-columns: repeat(2, 1fr) !important; } } /* ---------- Unicorn card unlock celebration ---------- */ .leo-unlock-overlay { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 50% 30%, rgba(126, 67, 255, .28), rgba(3, 4, 13, .82) 60%), rgba(3, 4, 13, .78); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); animation: leo-unlock-fade-in .3s ease both; } @keyframes leo-unlock-fade-in { from { opacity: 0; } to { opacity: 1; } } .leo-unlock-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .leo-unlock-particle { position: absolute; bottom: 10%; width: 7px; height: 7px; border-radius: 50%; animation: leo-unlock-firework 2.4s ease-out infinite; } @keyframes leo-unlock-firework { 0% { transform: translateY(0) scale(.3); opacity: 0; } 15% { opacity: 1; } 70% { opacity: .8; } 100% { transform: translateY(-62vh) scale(1); opacity: 0; } } .leo-unlock-card-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 380px; width: 100%; text-align: center; animation: leo-unlock-pop .55s cubic-bezier(.22, 1.4, .36, 1) both; } @keyframes leo-unlock-pop { 0% { transform: scale(.55) translateY(30px); opacity: 0; } 70% { transform: scale(1.04) translateY(-4px); opacity: 1; } 100% { transform: scale(1) translateY(0); opacity: 1; } } .leo-unlock-close { position: absolute; top: -14px; right: -6px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(10, 8, 24, .7); color: var(--leo-white); font-size: 20px; line-height: 1; cursor: pointer; z-index: 2; } .leo-unlock-title { margin: 0; font-family: "Montserrat", "Poppins", sans-serif; font-weight: 800; font-size: clamp(18px, 4.5vw, 24px); background: var(--leo-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 30px rgba(155, 92, 255, .4); } .leo-unlock-card-glow { position: relative; border-radius: 22px; padding: 4px; animation: leo-unlock-glow-pulse 2.2s ease-in-out infinite; } @keyframes leo-unlock-glow-pulse { 0%, 100% { box-shadow: 0 0 24px 4px rgba(155, 92, 255, .55), 0 0 60px 10px rgba(33, 223, 255, .25); } 50% { box-shadow: 0 0 40px 10px rgba(255, 59, 200, .6), 0 0 80px 18px rgba(33, 223, 255, .4); } } .leo-unlock-card-img { display: block; width: 100%; max-width: 300px; border-radius: 18px; box-shadow: var(--leo-shadow); } .leo-unlock-sub { margin: 0; font-size: 13px; color: var(--leo-muted); max-width: 320px; } @media (max-width: 480px) { .leo-unlock-card-img { max-width: 240px; } } /* ========================================================= LIGHT THEME OVERRIDES The rules above lean on the --leo-* custom properties for text/border/panel colour almost everywhere, so redefining them (above) already re-themes most of the page. What's left here is the handful of spots that used a literal dark rgba() instead of a variable — mostly background gradients that need a genuinely different (lighter) recipe, not just a colour swap. ========================================================= */ :root[data-theme="light"] body.neon-learning { background: radial-gradient(circle at 14% 5%, rgba(190, 25, 118, .07), transparent 28%), radial-gradient(circle at 84% 12%, rgba(14, 116, 144, .07), transparent 26%), radial-gradient(circle at 50% 100%, rgba(124, 58, 237, .09), transparent 38%), #ffffff !important; } :root[data-theme="light"] .neon-ambient::before { opacity: .10; } :root[data-theme="light"] .neon-orb { opacity: .10; } :root[data-theme="light"] .neon-coursebar { background: rgba(255, 255, 255, .82) !important; border-color: rgba(124, 58, 237, .22) !important; box-shadow: 0 15px 40px rgba(90, 70, 150, .12), 0 0 26px rgba(124, 58, 237, .08) !important; } :root[data-theme="light"] .neon-icon-link, :root[data-theme="light"] .neon-prev-next, :root[data-theme="light"] .neon-theme-toggle { background: rgba(124, 58, 237, .05); border-color: rgba(124, 58, 237, .22); } :root[data-theme="light"] .neon-icon-link:hover, :root[data-theme="light"] .neon-prev-next:hover, :root[data-theme="light"] .neon-theme-toggle:hover { border-color: var(--leo-cyan) !important; color: var(--leo-cyan) !important; box-shadow: 0 0 16px rgba(14, 116, 144, .16); } :root[data-theme="light"] .neon-icon-link.active { background: linear-gradient(120deg, rgba(190, 25, 118, .16), rgba(124, 58, 237, .16)) !important; color: var(--leo-white) !important; } :root[data-theme="light"] .neon-filter-count { background: rgba(124, 58, 237, .07); } :root[data-theme="light"] .neon-filterbar { background: rgba(255, 255, 255, .82); border-color: rgba(124, 58, 237, .2); box-shadow: 0 14px 32px rgba(90, 70, 150, .1); } :root[data-theme="light"] .neon-filterbar input::placeholder { color: #8b88a8; } :root[data-theme="light"] .neon-mascot { opacity: .3; } /* Main lesson pages */ :root[data-theme="light"] body.lesson-full nav { background: rgba(255, 255, 255, .86) !important; } :root[data-theme="light"] body.lesson-full .nav-links { background: rgba(255, 255, 255, .98) !important; border-color: rgba(124, 58, 237, .18); } :root[data-theme="light"] body.lesson-full .card, :root[data-theme="light"] body.lesson-full .word-card { border-color: rgba(124, 58, 237, .24) !important; background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(246, 243, 255, .92)) !important; box-shadow: 0 14px 32px rgba(90, 70, 150, .12), inset 0 1px rgba(255, 255, 255, .7) !important; } :root[data-theme="light"] body.lesson-full .flashcard-back-btn { background: rgba(124, 58, 237, .05) !important; border-color: rgba(124, 58, 237, .3) !important; } :root[data-theme="light"] body.lesson-full .card.english { background: linear-gradient(160deg, rgba(124, 77, 255, .28), rgba(124, 58, 237, .12), rgba(14, 116, 144, .14)) !important; border-color: rgba(124, 58, 237, .55) !important; box-shadow: 0 10px 24px rgba(90, 70, 150, .14), inset 0 1px rgba(255, 255, 255, .7), 0 0 18px rgba(124, 58, 237, .14) !important; } :root[data-theme="light"] body.lesson-full .card.english span { text-shadow: none !important; } :root[data-theme="light"] body.lesson-full #vocabulary .phonetic { text-shadow: none !important; } :root[data-theme="light"] body.lesson-full .card.vietnamese { background: linear-gradient(160deg, rgba(190, 25, 118, .16), rgba(255, 255, 255, .95)) !important; border-color: rgba(190, 25, 118, .38) !important; text-shadow: none !important; } :root[data-theme="light"] body.lesson-full .english, :root[data-theme="light"] body.lesson-full #questions .question, :root[data-theme="light"] body.lesson-full #questions .answer-text { text-shadow: none !important; } :root[data-theme="light"] body.lesson-full input, :root[data-theme="light"] body.lesson-full select, :root[data-theme="light"] body.lesson-full textarea { background: rgba(255, 255, 255, .9) !important; border-color: rgba(124, 58, 237, .3) !important; } /* Vocabulary flashcards */ :root[data-theme="light"] body.lesson-vocabulary .card, :root[data-theme="light"] body.lesson-vocabulary .hexagon, :root[data-theme="light"] body.lesson-vocabulary .octagon, :root[data-theme="light"] body.lesson-vocabulary .flashcard { background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(246, 243, 255, .92)) padding-box, conic-gradient(from 135deg, rgba(124, 77, 255, .22) 0deg, rgba(124, 77, 255, .22) 300deg, #0e7490 322deg, #7c3aed 336deg, #be1976 346deg, #ffffff 352deg, rgba(124, 77, 255, .22) 360deg) border-box !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -20px 45px rgba(124, 58, 237, .05), 0 15px 30px rgba(90, 70, 150, .12) !important; } :root[data-theme="light"] body.lesson-vocabulary .card-back, :root[data-theme="light"] body.lesson-vocabulary .back { background: linear-gradient(145deg, #f3edff, #ffffff) !important; } :root[data-theme="light"] body.lesson-vocabulary .phonetic { text-shadow: none !important; } :root[data-theme="light"] body.lesson-vocabulary .popup { background: rgba(255, 255, 255, .97) !important; border-color: rgba(124, 58, 237, .2) !important; } /* Vocabulary game */ :root[data-theme="light"] body.lesson-game > .container { border-color: rgba(124, 58, 237, .22) !important; } :root[data-theme="light"] body.lesson-game .info-panel { background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(246, 243, 255, .88)) !important; border-color: rgba(124, 58, 237, .2) !important; } :root[data-theme="light"] body.lesson-game #target-word { background: linear-gradient(110deg, rgba(190, 25, 118, .1), rgba(124, 58, 237, .12), rgba(14, 116, 144, .1)) !important; border-color: rgba(190, 25, 118, .3) !important; box-shadow: 0 12px 28px rgba(90, 70, 150, .1) !important; } :root[data-theme="light"] body.lesson-game .vocab-card { background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(246, 243, 255, .9)) !important; border-color: rgba(124, 58, 237, .28) !important; box-shadow: 0 14px 28px rgba(90, 70, 150, .1), inset 0 1px rgba(255, 255, 255, .7) !important; } :root[data-theme="light"] body.lesson-game .vocab-card:hover { border-color: var(--leo-cyan) !important; } /* Dialogue / pronunciation trainer */ :root[data-theme="light"] body.lesson-dialogue > .container { border-color: rgba(124, 58, 237, .24) !important; } :root[data-theme="light"] body.lesson-dialogue .ai-badge { background: rgba(255, 255, 255, .86) !important; border-color: rgba(14, 116, 144, .3) !important; box-shadow: 0 0 18px rgba(14, 116, 144, .1) !important; } :root[data-theme="light"] body.lesson-dialogue .mode-selector { border-color: rgba(124, 58, 237, .2) !important; } :root[data-theme="light"] body.lesson-dialogue .en-text { text-shadow: none !important; } :root[data-theme="light"] body.lesson-dialogue .modal-content { background: rgba(255, 255, 255, .98) !important; } :root[data-theme="light"] body.lesson-dialogue .transcript-preview { background: rgba(18, 148, 107, .08) !important; } /* 24-unit course hub */ :root[data-theme="light"] body.lesson-hub nav { background: rgba(255, 255, 255, .85) !important; } :root[data-theme="light"] body.lesson-hub .unit { background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(246, 243, 255, .9)) !important; border-color: rgba(124, 58, 237, .18) !important; box-shadow: 0 20px 50px rgba(90, 70, 150, .12), inset 0 1px rgba(255, 255, 255, .7) !important; } :root[data-theme="light"] body.lesson-hub .unit:hover { border-color: rgba(14, 116, 144, .42) !important; box-shadow: 0 26px 58px rgba(90, 70, 150, .16), 0 0 34px rgba(14, 116, 144, .1), inset 0 1px rgba(255, 255, 255, .8) !important; } :root[data-theme="light"] body.lesson-hub .unit-visual { background: linear-gradient(135deg, rgba(190, 25, 118, .1), rgba(124, 58, 237, .1) 45%, rgba(14, 116, 144, .1)), linear-gradient(160deg, rgba(246, 243, 255, .96), rgba(255, 255, 255, .92)); border-color: rgba(124, 58, 237, .14); box-shadow: inset 0 1px rgba(255, 255, 255, .8), inset 0 -20px 30px -20px rgba(90, 70, 150, .16); } :root[data-theme="light"] body.lesson-hub .unit-visual .unit-badge { background: rgba(255, 255, 255, .78); border-color: rgba(124, 58, 237, .28); } :root[data-theme="light"] body.lesson-hub .unit-visual .unit-badge .badge-num { color: var(--leo-white); } :root[data-theme="light"] .neon-hub-kicker { color: var(--leo-cyan); } :root[data-theme="light"] body.lesson-hub .simple-user-display { color: var(--leo-white) !important; background: rgba(255, 255, 255, .55) !important; border-color: rgba(124, 58, 237, .2) !important; } :root[data-theme="light"] body.lesson-hub .lesson-link, :root[data-theme="light"] body.lesson-hub .game-link, :root[data-theme="light"] body.lesson-hub .dialogue-link, :root[data-theme="light"] body.lesson-hub .vocab-link { background: linear-gradient(110deg, rgba(124, 58, 237, .06), rgba(14, 116, 144, .05)) !important; border-color: rgba(124, 58, 237, .24) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 20px rgba(90, 70, 150, .08) !important; } :root[data-theme="light"] body.lesson-hub .action-icon { background: linear-gradient(135deg, rgba(14, 116, 144, .14), rgba(190, 25, 118, .1)); border-color: rgba(124, 58, 237, .22); } @media (max-width: 900px) { :root[data-theme="light"] body.lesson-full .nav-links { background: rgba(255, 255, 255, .98) !important; border-color: rgba(124, 58, 237, .2); } } @media (prefers-reduced-motion: reduce) { body.neon-learning *, body.neon-learning *::before, body.neon-learning *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* =================================================================== SINGLE-PAGE LESSON REDESIGN One learner-facing scroll: every .section on a lesson-full page stays visible and stacks vertically (no more click-to-switch tabs), the old duplicate in-page nav is hidden, and a single hidden drawer + sticky progress/continue header replace both old navbars. =================================================================== */ /* Old in-page tab bar (Home/Vocabulary/Grammar/.../Extra Activity) is fully superseded by the TOC drawer below. Hidden, not deleted, so nothing referencing showSection() breaks. */ body.lesson-full > .container > nav { display: none !important; } /* Every section stays visible and simply stacks — this is the "scroll to learn" model instead of tab-switching. */ body.lesson-full .section { display: block !important; min-height: 0 !important; margin-bottom: clamp(20px, 4vw, 36px); } body.lesson-full .section:last-of-type { margin-bottom: 0; } /* The brand heading used to repeat inside every single section ("LEOENGLISH LANGUAGE HUB" x6) — redundant once the shared sticky header already carries the brand once. */ body.lesson-full .section > h1:first-child { display: none !important; } .neon-section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; } .neon-section-num { flex: 0 0 auto; font: 800 13px/1 "Montserrat", sans-serif; letter-spacing: .12em; color: var(--leo-cyan); border: 1px solid rgba(33, 223, 255, .35); background: rgba(33, 223, 255, .08); border-radius: 9px; padding: 6px 10px; } .neon-section-title-wrap { min-width: 0; } .neon-section-title { margin: 0; font: 800 clamp(20px, 3vw, 26px)/1.25 "Montserrat", sans-serif; color: var(--leo-white) !important; background: none !important; -webkit-text-fill-color: var(--leo-white) !important; } .neon-section-sub { margin: 4px 0 0; font-size: 13px; color: var(--leo-muted) !important; } .neon-section-ungraded-tag { flex: 0 0 auto; align-self: center; margin-left: auto; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--leo-line); background: rgba(255, 255, 255, .04); color: var(--leo-muted) !important; font-size: 11px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; } /* In-context doorway to the richer standalone practice page for a section (flip-card vocab game / AI speaking scorer / arcade game) — replaces the old always-on top mode-switch row. */ .neon-section-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 13px 22px; min-height: 48px; border-radius: 14px; border: 1px solid rgba(155, 92, 255, .4); background: rgba(155, 92, 255, .1); color: var(--leo-white) !important; font-weight: 700; font-size: 15px; text-decoration: none; } .neon-section-more:hover { border-color: var(--leo-cyan); color: var(--leo-cyan) !important; background: rgba(33, 223, 255, .08); } /* ---------- Header row 2: progress + big "continue" CTA ---------- */ .neon-progress-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding-top: 10px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); } .neon-progress-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 16px; } .neon-progress-track { flex: 1 1 auto; min-width: 0; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; } .neon-progress-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--leo-gradient); transition: width .5s cubic-bezier(.22, .9, .3, 1); } .neon-progress-label { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--leo-muted); white-space: nowrap; } /* Big, always-visible % — the number a learner glances at to know "how much have I done", separate from the thin bar itself. */ .neon-progress-percent { flex: 0 0 auto; display: flex; align-items: baseline; gap: 1px; min-width: 64px; font-family: "Montserrat", sans-serif; font-weight: 800; line-height: 1; background: var(--leo-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px rgba(155, 92, 255, .35)); } .neon-progress-percent-num { font-size: 30px; } .neon-progress-percent-sign { font-size: 16px; } .neon-progress-percent.bump { animation: neon-percent-bump .45s cubic-bezier(.22, 1.4, .4, 1); } @keyframes neon-percent-bump { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .neon-progress-percent.bump { animation: none; } } @media (max-width: 720px) { .neon-progress-percent-num { font-size: 24px; } .neon-progress-percent-sign { font-size: 13px; } } .neon-continue-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 13px; border: 0; background: var(--leo-gradient); color: #070611; font: 800 15px/1 "Poppins", sans-serif; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 28px rgba(155, 92, 255, .3), 0 0 22px rgba(33, 223, 255, .14); transition: transform .2s ease, filter .2s ease; } .neon-continue-btn:hover { transform: translateY(-2px); filter: brightness(1.1); } @media (max-width: 720px) { .neon-progress-row { flex-wrap: wrap; row-gap: 10px; } .neon-progress-main { flex-basis: 100%; order: 2; } .neon-progress-label { display: none; } .neon-continue-btn { flex: 1 1 auto; justify-content: center; order: 3; } } /* The old design hid text labels under mode icons below 900px — with only one action left (☰ Mục lục / ← Bài học) there's room to keep it readable at every width, which matters for older/low-tech users. */ .neon-toc-toggle span, .neon-back-link span { display: inline !important; } /* .neon-toc-toggle is a real