/* ========================================================================== JayveeLingo — Day 1 styles Mobile-first, with a dark theme (default), a light theme, and an "auto" mode that follows the phone/browser's system light-dark setting. Designed for a ~400px wide phone screen first; it just sits centered on wider screens (desktop browser while testing). ========================================================================== */ /* ---------- Theme variables ---------- */ /* gets a data-theme attribute of "dark", "light", or "auto" (set in index.html, before CSS paints, to avoid a flash of the wrong theme). Dark is the baseline (:root). "light" overrides it explicitly. "auto" overrides it only when the system itself prefers light. */ :root, [data-theme="dark"] { --bg: #0f0c1d; --bg-elevated: rgba(38, 34, 66, 0.55); --bg-elevated-2: rgba(255, 255, 255, 0.06); --text: #f5f4ff; --text-dim: #a6a2c3; --border: rgba(255, 255, 255, 0.09); --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35); --glow-opacity: 0.55; --page-wash: radial-gradient(circle at 15% 0%, rgba(124, 92, 255, 0.18), transparent 55%), radial-gradient(circle at 85% 15%, rgba(255, 110, 199, 0.14), transparent 50%); --error-bg-a: rgba(255, 90, 90, 0.2); --error-bg-b: rgba(255, 90, 90, 0.08); --error-border: #8a3b3b; --error-text: #ffb4b4; --accent: #7c5cff; --accent-2: #ff6ec7; --accent-gradient: linear-gradient(135deg, #7c5cff, #ff6ec7); --spanish-gradient: linear-gradient(135deg, #ff5f6d, #ffc371); --tagalog-gradient: linear-gradient(135deg, #2b6cb0, #e6484f); --success: #4ade80; --danger: #f87171; --radius: 18px; --tap-min: 48px; /* CLAUDE.md rule: minimum tap target size */ color-scheme: dark; } [data-theme="light"] { --bg: #f4f2fb; --bg-elevated: rgba(255, 255, 255, 0.72); --bg-elevated-2: rgba(124, 92, 255, 0.08); --text: #221f33; --text-dim: #5f5b7a; --border: rgba(34, 21, 71, 0.10); --shadow-soft: 0 10px 26px rgba(90, 70, 150, 0.14); --glow-opacity: 0.22; --page-wash: radial-gradient(circle at 15% 0%, rgba(124, 92, 255, 0.14), transparent 55%), radial-gradient(circle at 85% 15%, rgba(255, 110, 199, 0.12), transparent 50%); --error-bg-a: rgba(220, 38, 38, 0.12); --error-bg-b: rgba(220, 38, 38, 0.05); --error-border: #e2a0a0; --error-text: #b42323; color-scheme: light; } @media (prefers-color-scheme: light) { [data-theme="auto"] { --bg: #f4f2fb; --bg-elevated: rgba(255, 255, 255, 0.72); --bg-elevated-2: rgba(124, 92, 255, 0.08); --text: #221f33; --text-dim: #5f5b7a; --border: rgba(34, 21, 71, 0.10); --shadow-soft: 0 10px 26px rgba(90, 70, 150, 0.14); --glow-opacity: 0.22; --page-wash: radial-gradient(circle at 15% 0%, rgba(124, 92, 255, 0.14), transparent 55%), radial-gradient(circle at 85% 15%, rgba(255, 110, 199, 0.12), transparent 50%); --error-bg-a: rgba(220, 38, 38, 0.12); --error-bg-b: rgba(220, 38, 38, 0.05); --error-border: #e2a0a0; --error-text: #b42323; color-scheme: light; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; transition: background-color 0.2s ease, color 0.2s ease; } body { display: flex; justify-content: center; position: relative; overflow-x: hidden; /* Subtle gradient wash behind everything, tuned per theme above. */ background: var(--page-wash), var(--bg); } /* Big soft blurred color blobs for visual depth. Purely decorative. */ .bg-glow { position: fixed; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none; opacity: var(--glow-opacity); } .bg-glow-1 { width: 260px; height: 260px; top: -80px; left: -60px; background: #7c5cff; } .bg-glow-2 { width: 220px; height: 220px; bottom: 10%; right: -70px; background: #ff6ec7; } /* ---------- Splash screen ---------- */ /* Shown first on every launch, fades into the app once lessons finish loading (js/app.js enforces a small minimum display time so it never flashes by too fast to notice). */ .splash-screen { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 20px; animation: fade-in 0.3s ease-out; } .splash-logo { width: 96px; height: 96px; border-radius: 28px; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-size: 44px; box-shadow: 0 16px 40px rgba(124, 92, 255, 0.45); animation: splash-pulse 1.8s ease-in-out infinite; } .splash-title { font-size: 28px; font-weight: 800; margin: 6px 0 0; letter-spacing: -0.02em; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent); } .splash-tagline { margin: 0; font-size: 12px; color: var(--text-dim); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .splash-loader { display: flex; gap: 6px; margin-top: 10px; } .splash-loader span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-gradient); opacity: 0.4; animation: dot-bounce 1s infinite ease-in-out; } .splash-loader span:nth-child(2) { animation-delay: 0.15s; } .splash-loader span:nth-child(3) { animation-delay: 0.3s; } @keyframes splash-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes dot-bounce { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } } #app { position: relative; z-index: 1; width: 100%; max-width: 480px; /* keeps it phone-shaped even on a desktop browser */ min-height: 100vh; padding: 20px 16px 40px; } /* ---------- Header ---------- */ .app-header { display: flex; flex-direction: column; gap: 14px; padding: 8px 4px 24px; } .app-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .app-title { font-size: 26px; font-weight: 800; margin: 0; letter-spacing: -0.02em; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent); } .app-tagline { margin: 2px 0 0; font-size: 12px; color: var(--text-dim); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .icon-button { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated-2); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); transition: transform 0.12s ease, background 0.12s ease; } .icon-button:active { transform: scale(0.9); background: var(--bg-elevated); } .theme-toggle { flex-shrink: 0; min-height: var(--tap-min); padding: 0 14px; display: flex; align-items: center; gap: 6px; background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-soft); transition: transform 0.12s ease, background 0.12s ease; } .theme-toggle:active { transform: scale(0.94); background: var(--bg-elevated); } .stats-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .stat { font-size: 13px; font-weight: 700; color: var(--text); border-radius: 999px; padding: 6px 14px; white-space: nowrap; box-shadow: var(--shadow-soft); border: 1px solid var(--border); } .stat-streak { background: linear-gradient(135deg, rgba(255, 159, 67, 0.35), rgba(255, 90, 90, 0.25)); } .stat-xp { background: linear-gradient(135deg, rgba(124, 92, 255, 0.35), rgba(255, 110, 199, 0.25)); } .stat span { color: var(--text); } /* ---------- Error banner ---------- */ .error-banner { background: linear-gradient(135deg, var(--error-bg-a), var(--error-bg-b)); border: 1px solid var(--error-border); color: var(--error-text); padding: 14px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; } .hidden { display: none !important; } /* ---------- Screens ---------- */ .screen { animation: fade-in 0.25s ease-out; } @keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Language cards (Home screen) ---------- */ .language-cards { display: flex; flex-direction: column; gap: 20px; } .language-card { position: relative; overflow: hidden; background: var(--bg-elevated); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow-soft); } /* Colored top stripe per language, drawn with a pseudo-element so it doesn't disturb the card's border-radius. */ .language-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .language-card.lang-es::before { background: var(--spanish-gradient); } .language-card.lang-tl::before { background: var(--tagalog-gradient); } .language-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .language-flag-badge { font-size: 24px; line-height: 1; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--bg-elevated-2); flex-shrink: 0; overflow: hidden; } .language-card-name { font-size: 17px; font-weight: 800; } .language-card-progress-label { font-size: 12px; color: var(--text-dim); font-weight: 600; margin-top: 2px; } /* Tappable "Review" banner shown on a language card only when SRS items are due today (Day 4). Sits between the card header and the progress bar so it reads as the primary call-to-action when it appears. */ .review-banner { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap-min); background: var(--accent-gradient); border: none; border-radius: 14px; color: #ffffff; font-weight: 700; font-size: 14px; padding: 0 14px; cursor: pointer; margin-bottom: 14px; box-shadow: 0 6px 18px rgba(124, 92, 255, 0.35); transition: transform 0.12s ease; } .review-banner:active { transform: scale(0.98); } .review-banner-icon { font-size: 18px; } .review-banner-text { flex: 1; text-align: left; } .review-banner-arrow { font-size: 18px; opacity: 0.8; } .progress-track { height: 6px; border-radius: 999px; background: var(--bg-elevated-2); overflow: hidden; margin-bottom: 14px; } .progress-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; } .lang-es .progress-fill { background: var(--spanish-gradient); } .lang-tl .progress-fill { background: var(--tagalog-gradient); } .lesson-list { display: flex; flex-direction: column; gap: 10px; } .lesson-row { display: flex; align-items: center; gap: 12px; min-height: var(--tap-min); width: 100%; background: var(--bg-elevated-2); border: 1px solid transparent; border-radius: 14px; padding: 10px 14px; color: var(--text); font-size: 15px; text-align: left; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease; } .lesson-row:hover { border-color: var(--border); } .lesson-row:active { transform: scale(0.98); background: rgba(124, 92, 255, 0.22); } .lesson-row-info { flex: 1; min-width: 0; } .lesson-row-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lesson-row-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .lesson-status { font-size: 15px; font-weight: 800; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .lesson-status.done { background: var(--accent-gradient); color: #ffffff; box-shadow: 0 4px 14px rgba(124, 92, 255, 0.45); } .lesson-status.not-done { border: 2px solid var(--border); color: transparent; } .empty-note { color: var(--text-dim); font-size: 14px; } /* ---------- Lesson screen ---------- */ .back-button { min-height: var(--tap-min); padding: 0 20px; background: var(--accent-gradient); border: none; border-radius: 999px; color: #ffffff; font-size: 15px; font-weight: 700; margin-bottom: 22px; cursor: pointer; box-shadow: 0 8px 22px rgba(124, 92, 255, 0.4); transition: transform 0.12s ease; } .back-button:active { transform: scale(0.96); } .lesson-title { font-size: 22px; font-weight: 800; margin: 0 0 16px; } /* ---------- Lesson progress bar ---------- */ .lesson-progress { margin-bottom: 20px; } .lesson-progress-text { font-size: 12px; color: var(--text-dim); font-weight: 700; margin-bottom: 6px; } .lesson-progress-track { height: 6px; border-radius: 999px; background: var(--bg-elevated-2); overflow: hidden; } .lesson-progress-fill { height: 100%; border-radius: 999px; background: var(--accent-gradient); transition: width 0.3s ease; } /* ---------- Exercise cards (shared look for every exercise type) ---------- */ .exercise-card { background: var(--bg-elevated); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 20px; text-align: center; box-shadow: var(--shadow-soft); margin-bottom: 18px; } /* Small round speaker button used on flashcards and multiple-choice prompts. Only rendered at all when js/audio.js confirms a voice is available. */ .speaker-btn { width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-elevated-2); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.12s ease, background 0.12s ease; } .speaker-btn:active { transform: scale(0.9); background: var(--bg-elevated); } /* ---------- Flashcard exercise ---------- */ .flashcard-card { cursor: pointer; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.12s ease; } .flashcard-card:active { transform: scale(0.98); } .flashcard-target-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; } .flashcard-target { font-size: 28px; font-weight: 800; } .flashcard-hint { font-size: 12px; color: var(--text-dim); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .flashcard-english { font-size: 21px; font-weight: 800; margin-bottom: 12px; } .flashcard-example { font-style: italic; margin-bottom: 4px; } .flashcard-example-en { color: var(--text-dim); font-size: 13px; margin-bottom: 16px; } .flashcard-note { font-size: 13px; color: var(--text-dim); border-top: 1px solid var(--border); padding-top: 14px; } .grade-buttons { display: flex; gap: 12px; } .grade-btn { flex: 1; min-height: var(--tap-min); border: none; border-radius: 14px; font-weight: 700; font-size: 15px; cursor: pointer; transition: transform 0.12s ease; } .grade-btn:active { transform: scale(0.96); } .grade-yes { background: linear-gradient(135deg, #4ade80, #22c55e); color: #062b13; } .grade-no { background: var(--bg-elevated-2); color: var(--text); border: 1px solid var(--border); } /* ---------- Multiple choice & listen-and-choose exercises ---------- */ .mc-prompt-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); font-weight: 700; margin-bottom: 10px; } .mc-prompt-row { display: flex; align-items: center; justify-content: center; gap: 12px; } .mc-prompt { font-size: 25px; font-weight: 800; } .mc-options { display: flex; flex-direction: column; gap: 10px; } .mc-option { min-height: var(--tap-min); background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 14px; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; padding: 0 16px; text-align: left; transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease; } .mc-option:active:not(:disabled) { transform: scale(0.98); } .mc-option.correct { background: linear-gradient(135deg, rgba(74, 222, 128, 0.35), rgba(34, 197, 94, 0.2)); border-color: var(--success); } .mc-option.wrong { background: linear-gradient(135deg, rgba(248, 113, 113, 0.35), rgba(239, 68, 68, 0.2)); border-color: var(--danger); } .mc-option:disabled { cursor: default; opacity: 0.9; } /* Big central speaker button for the listen-and-choose exercise. */ .listen-play-btn { width: 76px; height: 76px; border-radius: 50%; border: none; background: var(--accent-gradient); color: #ffffff; font-size: 30px; cursor: pointer; box-shadow: 0 12px 30px rgba(124, 92, 255, 0.45); transition: transform 0.12s ease; } .listen-play-btn:active { transform: scale(0.92); } /* ---------- Type-the-answer exercise ---------- */ .type-answer-input { width: 100%; min-height: var(--tap-min); margin-top: 18px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-elevated-2); color: var(--text); font-size: 17px; text-align: center; font-family: inherit; } .type-answer-input:focus { outline: none; border-color: var(--accent); } .type-answer-input.input-correct { border-color: var(--success); } .type-answer-input.input-wrong { border-color: var(--danger); } .type-answer-feedback { margin-top: 14px; font-size: 14px; } .feedback-correct { color: var(--success); font-weight: 700; } .feedback-wrong { color: var(--danger); font-weight: 700; } .feedback-note { color: var(--text-dim); margin-top: 4px; } /* ---------- Match pairs exercise (bonus round) ---------- */ .match-columns { display: flex; gap: 10px; text-align: left; } .match-column { flex: 1; display: flex; flex-direction: column; gap: 8px; } .match-tile { min-height: var(--tap-min); background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 10px; text-align: center; transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease; } .match-tile:active:not(:disabled) { transform: scale(0.96); } .match-tile.selected { border-color: var(--accent); background: linear-gradient(135deg, rgba(124, 92, 255, 0.3), rgba(255, 110, 199, 0.18)); } .match-tile.matched { border-color: var(--success); background: linear-gradient(135deg, rgba(74, 222, 128, 0.3), rgba(34, 197, 94, 0.16)); opacity: 0.7; cursor: default; } .match-tile.wrong { border-color: var(--danger); background: linear-gradient(135deg, rgba(248, 113, 113, 0.3), rgba(239, 68, 68, 0.16)); } /* Shared "next" button used by multiple choice, listen-and-choose, and type-the-answer once they've been graded. */ .exercise-next-btn { margin-top: 16px; width: 100%; min-height: var(--tap-min); background: var(--accent-gradient); border: none; border-radius: 999px; color: #ffffff; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 8px 22px rgba(124, 92, 255, 0.4); transition: transform 0.12s ease; } .exercise-next-btn:active { transform: scale(0.96); } /* ---------- Session end screen ---------- */ .session-end { text-align: center; padding: 20px 10px; } .session-end-icon { font-size: 42px; margin-bottom: 10px; } .session-end-xp { font-size: 28px; font-weight: 800; margin-bottom: 6px; background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent); } .session-end-accuracy { color: var(--text-dim); font-weight: 600; margin-bottom: 22px; } .continue-btn { width: 100%; min-height: var(--tap-min); background: var(--accent-gradient); border: none; border-radius: 999px; color: #ffffff; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 8px 22px rgba(124, 92, 255, 0.4); transition: transform 0.12s ease; } .continue-btn:active { transform: scale(0.96); } /* ---------- Stats screen (Day 5) ---------- */ .stats-section { background: var(--bg-elevated); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-soft); } .stats-section-title { margin: 0 0 12px; font-size: 15px; font-weight: 800; } .stats-row-line { font-size: 14px; margin-bottom: 6px; color: var(--text-dim); } .stats-row-line strong { color: var(--text); } .calendar-container { margin-top: 12px; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .calendar-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 12px; color: var(--text-dim); background: var(--bg-elevated-2); } .calendar-cell.calendar-empty { background: transparent; } .calendar-cell.calendar-active { background: var(--accent-gradient); color: #ffffff; font-weight: 700; } .calendar-cell.calendar-today { border: 2px solid var(--accent); font-weight: 700; color: var(--text); } .calendar-cell.calendar-active.calendar-today { border-color: #ffffff; } .daily-goal-input { width: 100%; min-height: var(--tap-min); margin-bottom: 12px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elevated-2); color: var(--text); font-size: 16px; text-align: center; font-family: inherit; } .daily-goal-input:focus { outline: none; border-color: var(--accent); } .backup-message { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--success); } .backup-message.error { color: var(--danger); } /* ---------- Mascots: Taco (Spanish) and Lumpia (Tagalog) teachers ---------- */ .mascot-img { display: block; transform-origin: center bottom; animation: mascot-idle-bob 2.6s ease-in-out infinite; } .mascot-img.mascot-talking { animation: mascot-talk 0.45s ease-in-out infinite; } @keyframes mascot-idle-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-3deg); } } @keyframes mascot-talk { 0%, 100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.06) rotate(4deg); } 50% { transform: scale(0.96) rotate(-4deg); } 75% { transform: scale(1.05) rotate(3deg); } } /* Home screen language card badge */ .mascot-card-badge { width: 100%; height: 100%; object-fit: contain; padding: 4px; } /* Lesson/review screen - the mascot "teaching" this session */ .lesson-mascot-slot { display: flex; justify-content: center; margin-bottom: 8px; } .mascot-lesson { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.25)); } /* Splash screen - both teachers waving hello while lessons load */ .splash-mascots { display: flex; gap: 20px; margin-top: 4px; } .mascot-splash { width: 68px; height: 68px; object-fit: contain; } .splash-mascots .mascot-img:nth-child(2) { animation-delay: 0.4s; }