/* ============================================ Obby Language School — "Le Cahier" design system ============================================ Editorial-linguistic scholarship. Vellum + ink, wax seals, marginalia. Both themes share warm-earth palette — the room is the same, the lamp differs. Theme is selected via [data-theme="light"|"dark"] on . Existing token names preserved; new helpers are additive (*-folio, *-marginalia, *-drop-cap, section-ornament). NO Inter anywhere — see DESIGN-BRIEF.md. ============================================ */ :root { /* ---- Shared (non-theme) tokens ---- */ /* Accents are theme-specific (vermillion on vellum, gold on night) — see :root[data-theme] blocks. */ --sun: #c89028; --sun-dim: #a07020; --green: #5a7a3a; --green-strong: #4a6b2a; --red: #8c1d1f; --red-strong: #6e1416; /* CEFR seal palette — light theme (olive / ochre / oxblood ramp). Dark theme overrides these inside its block. */ --lvl-a1: #5a7a3a; /* olive ink */ --lvl-a1-bg: rgba(90, 122, 58, 0.08); --lvl-a2: #7a8a3a; /* mature olive */ --lvl-a2-bg: rgba(122, 138, 58, 0.08); --lvl-b1: #c89028; /* ochre */ --lvl-b1-bg: rgba(200, 144, 40, 0.08); --lvl-b2: #a8702a; /* darker ochre */ --lvl-b2-bg: rgba(168, 112, 42, 0.10); --lvl-c1: #8c1d1f; /* oxblood */ --lvl-c1-bg: rgba(140, 29, 31, 0.08); --lvl-c2: #5a1216; /* deep wax */ --lvl-c2-bg: rgba(90, 18, 22, 0.10); /* Layout */ --nav-height: 64px; --header-height: 56px; --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; --radius-pill: 999px; --hairline: 1px; /* Type — Fraunces (display) + Source Serif 4 (body) + IBM Plex Mono (mono). */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --lang-font: var(--font-body); /* Motion */ --t-fast: 120ms; --t-med: 200ms; --t-slow: 300ms; } /* ============================================ LIGHT THEME — "Vellum" (default). ============================================ */ :root, :root[data-theme="light"] { --bg-primary: #f7f2e9; /* warm cream / vellum */ --bg-card: #fffaf0; /* freshly-pressed paper */ --bg-card-hover: #f0e8d8; /* page-turn fold */ --bg-input: #fffaf0; --bg-soft: #f0e8d8; --text-primary: #1c1814; /* deep brown-black ink */ --text-secondary: #5c4a3a; /* sepia */ --text-muted: #7a6553; /* faded sepia — 4.7:1 on #f7f2e9, AA pass */ --text-thai: #1c1814; --accent: #b8312f; /* vermillion ink / wax seal */ --accent-dim: #8c1d1f; --accent-soft: rgba(184, 49, 47, 0.08); --accent-glow: rgba(184, 49, 47, 0.18); --sun-soft: rgba(200, 144, 40, 0.14); --green-dim: rgba(90, 122, 58, 0.14); --red-dim: rgba(140, 29, 31, 0.10); --border: #d4c8b0; /* foxed parchment edge */ --border-strong: #a89a7e; --shadow-sm: 0 1px 2px rgba(28, 24, 20, 0.06); --shadow-md: 0 4px 14px rgba(28, 24, 20, 0.08); --shadow-lg: 0 16px 40px rgba(28, 24, 20, 0.12); --shadow-glow: 0 0 0 3px var(--accent-glow); } /* ============================================ DARK THEME — "Vellum at Night". ============================================ */ :root[data-theme="dark"] { --bg-primary: #14110d; /* warm near-black, NOT blue-black */ --bg-card: #1f1a14; /* dark walnut */ --bg-card-hover: #2a2419; --bg-input: #1a160f; --bg-soft: #1a160f; --text-primary: #f0e8d8; /* lit vellum / candle paper */ --text-secondary: #c8b89e; /* warm cream-gray */ --text-muted: #8a7a65; /* 5.4:1 on warm-black, AA pass */ --text-thai: #f0e8d8; --accent: #e6a44a; /* warm gold — candle-lit gilt edge */ --accent-dim: #b8842a; --accent-soft: rgba(230, 164, 74, 0.10); --accent-glow: rgba(230, 164, 74, 0.20); --sun-soft: rgba(230, 164, 74, 0.16); --green-dim: rgba(148, 176, 106, 0.14); --red-dim: rgba(214, 90, 74, 0.14); --border: #3a3225; --border-strong: #5a4d3a; /* Dark-theme CEFR seals — same ramp, brightened for the warm-black background. */ --lvl-a1: #94b06a; --lvl-a1-bg: rgba(148, 176, 106, 0.10); --lvl-a2: #b8c074; --lvl-a2-bg: rgba(184, 192, 116, 0.10); --lvl-b1: #e6a44a; --lvl-b1-bg: rgba(230, 164, 74, 0.10); --lvl-b2: #d68e3c; --lvl-b2-bg: rgba(214, 142, 60, 0.12); --lvl-c1: #d65a4a; --lvl-c1-bg: rgba(214, 90, 74, 0.10); --lvl-c2: #b04030; --lvl-c2-bg: rgba(176, 64, 48, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50); --shadow-glow: 0 0 0 3px var(--accent-glow); } /* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Focus: hide outline only when :focus-visible is supported AND the focus wasn't keyboard-induced. The @supports fallback below covers Safari <15.4 and any browser where :focus-visible is unsupported — those see the 2px outline on every focus, which is preferable to no indicator at all. */ *:focus { outline: none; } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-glow); border-radius: var(--radius-sm); } @supports not selector(:focus-visible) { *:focus { outline: 2px solid var(--accent); outline-offset: 2px; } } /* Visually-hidden helper for screen-reader-only labels. */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } html, body { margin: 0; padding: 0; height: 100%; font-family: var(--font-body); font-variation-settings: "opsz" 18; background: var(--bg-primary); color: var(--text-primary); line-height: 1.7; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; touch-action: manipulation; transition: background-color 300ms ease, color 300ms ease; } /* CRIT — wire the JS-set --app-height into the body Grid shell. The viewport script in writes --app-height from visualViewport.height; on browsers that don't run it (or before it runs) we fall back to 100svh. */ body { display: grid; grid-template-rows: auto 1fr auto; min-height: var(--app-height, 100svh); overflow: hidden; } /* Display headings use Fraunces with display optical sizing + slight SOFT. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.15; font-weight: 600; letter-spacing: -0.005em; } h1 { font-variation-settings: "opsz" 96, "SOFT" 60; } h2 { font-variation-settings: "opsz" 72, "SOFT" 40; } h3 { font-variation-settings: "opsz" 36; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; } .hidden { display: none !important; pointer-events: none !important; } .screen { width: 100%; } /* ============ LOADING ============ */ #loading-screen { position: fixed; inset: 0; z-index: 200; background: var(--bg-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; } .loading-spinner { width: 44px; height: 44px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } .loading-text { font-family: var(--font-display); font-weight: 500; color: var(--text-secondary); font-size: 16px; letter-spacing: 0.05em; } @keyframes spin { to { transform: rotate(360deg); } } /* ============ AUTH ============ */ .auth-container { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); padding-top: calc(24px + env(safe-area-inset-top)); background: var(--bg-primary); overflow-y: auto; } .auth-card { width: 100%; max-width: 380px; background: var(--bg-card); border: var(--hairline) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 32px 28px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .auth-logo { font-size: 44px; line-height: 1; margin-bottom: 6px; } @media (prefers-reduced-motion: no-preference) { .auth-logo { animation: bounce-in 400ms cubic-bezier(.34, 1.4, .64, 1); } } @keyframes bounce-in { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } } .auth-title { font-family: var(--font-display); font-size: 32px; font-weight: 600; font-variation-settings: "opsz" 96, "SOFT" 60; color: var(--text-primary); text-align: center; margin: 6px 0 2px; letter-spacing: -0.015em; } .auth-subtitle { font-family: var(--font-body); color: var(--text-secondary); font-size: 15px; font-style: italic; text-align: center; margin-bottom: 18px; } .auth-form { display: flex; flex-direction: column; gap: 14px; width: 100%; } .auth-field { display: flex; flex-direction: column; gap: 4px; } .auth-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.1em; text-transform: uppercase; padding-left: 2px; } .auth-form input { width: 100%; padding: 12px 14px; min-height: 44px; background: transparent; border: var(--hairline) solid var(--border-strong); border-radius: var(--radius); font-size: 16px; /* iOS will zoom on focus if <16px */ color: var(--text-primary); font-family: var(--font-body); -webkit-appearance: none; appearance: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .auth-form input:focus { border: 2px solid var(--accent); outline: none; box-shadow: none; padding: 11px 13px; /* compensate for thicker border */ } .auth-form .btn-gold, .auth-form .btn-large { width: 100%; margin-top: 6px; min-height: 48px; } .auth-error { color: var(--red-strong); font-size: 14px; text-align: center; min-height: 18px; margin-top: 10px; font-weight: 500; } .auth-foot { color: var(--text-muted); font-size: 12px; font-style: italic; text-align: center; margin-top: 14px; line-height: 1.45; } /* ============ BUTTONS ============ */ .btn-gold, .btn-primary { background: var(--accent); color: #fffaf0; padding: 12px 20px; min-height: 44px; border-radius: var(--radius); font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; transition: background-color var(--t-fast) ease; } .btn-gold:hover, .btn-primary:hover { background: var(--accent-dim); } .btn-gold:active, .btn-primary:active { background: var(--accent-dim); } .btn-gold:disabled, .btn-primary:disabled { background: var(--border-strong); color: var(--text-muted); cursor: not-allowed; opacity: 0.6; } .btn-large { font-size: 15px; padding: 14px 24px; min-height: 48px; } .btn-text { background: transparent; color: var(--accent); padding: 10px 14px; min-height: 44px; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 14px; font-weight: 500; transition: background-color var(--t-fast); } .btn-text:hover { background: var(--accent-soft); } .btn-back { background: var(--bg-card); color: var(--text-secondary); padding: 10px 16px; min-height: 44px; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 14px; font-weight: 500; border: var(--hairline) solid var(--border); transition: background-color var(--t-fast), color var(--t-fast); } .btn-back:hover { background: var(--bg-card-hover); color: var(--text-primary); } .btn-skip, .btn-sound { background: var(--bg-card); color: var(--text-secondary); padding: 10px 14px; min-height: 44px; min-width: 44px; border-radius: var(--radius-pill); font-size: 13px; border: var(--hairline) solid var(--border); } .btn-skip:hover, .btn-sound:hover { background: var(--bg-card-hover); } .btn-action { padding: 12px 18px; min-height: 44px; border-radius: var(--radius); font-size: 15px; font-weight: 600; font-family: var(--font-display); border: var(--hairline) solid var(--border); background: var(--bg-card); color: var(--text-primary); transition: background-color var(--t-fast), border-color var(--t-fast); } @media (prefers-reduced-motion: no-preference) { .btn-action { transition: transform 100ms, background-color var(--t-fast), border-color var(--t-fast); } .btn-action:hover { transform: translateY(-1px); } } .btn-know { border-color: var(--green-strong); color: var(--green-strong); } .btn-know:hover { background: var(--green-dim); } .btn-miss { border-color: var(--red-strong); color: var(--red-strong); } .btn-miss:hover { background: var(--red-dim); } /* ============ APP HEADER ============ */ #app-header { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: var(--bg-card); border-bottom: var(--hairline) solid var(--border); position: sticky; top: 0; z-index: 100; } #header-title { font-family: var(--font-display); font-variation-settings: "opsz" 60, "SOFT" 40; font-size: 20px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; } #header-right { display: flex; align-items: center; gap: 8px; } .header-user, .header-lang, .header-base { background: transparent; color: var(--text-secondary); padding: 8px 12px; min-height: 44px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; font-weight: 500; border: var(--hairline) solid var(--border); transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .header-user:hover, .header-lang:hover, .header-base:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--border-strong); } .header-base-select { background: var(--bg-soft); color: var(--text-primary); padding: 8px 12px; min-height: 44px; border-radius: var(--radius-pill); font-size: 13px; border: var(--hairline) solid var(--border); font-family: var(--font-body); cursor: pointer; } /* ---- Theme toggle: sun/moon monogram in Fraunces, 44x44 target ---- */ #theme-toggle { background: transparent; color: var(--text-secondary); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 1; border-radius: var(--radius-pill); border: var(--hairline) solid var(--border); padding: 0; flex-shrink: 0; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); } #theme-toggle:hover { background: var(--bg-card-hover); color: var(--accent); border-color: var(--border-strong); } #theme-toggle .tt-icon { display: inline-block; line-height: 1; } @media (prefers-reduced-motion: no-preference) { #theme-toggle .tt-icon { transition: transform var(--t-slow) ease; } #theme-toggle:hover .tt-icon { transform: rotate(180deg); } #theme-toggle:active { transform: scale(0.96); } } /* ============ APP LAYOUT ============ */ /* #app is the grid 1fr child of body. */ #app { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; background: var(--bg-primary); } #main-content, .content-area { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--nav-height) + 16px); min-height: 0; } .view { padding: 22px 18px 28px; max-width: 720px; margin: 0 auto; } .view:not(.active) { display: none; } /* ============ BOTTOM NAV ============ */ #bottom-nav { height: calc(var(--nav-height) + env(safe-area-inset-bottom)); background: var(--bg-card); border-top: var(--hairline) solid var(--border); display: flex; justify-content: space-around; align-items: center; padding: 4px 6px env(safe-area-inset-bottom); z-index: 90; } .nav-btn { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; border-radius: var(--radius-sm); color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; font-weight: 500; position: relative; transition: color var(--t-fast), background-color var(--t-fast); } .nav-btn .nav-icon { font-size: 20px; line-height: 1; } .nav-btn .nav-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .nav-btn:hover { color: var(--text-secondary); } .nav-btn.active { color: var(--accent); background: var(--accent-soft); } .nav-btn[aria-current="page"] { color: var(--accent); background: var(--accent-soft); } .nav-badge { position: absolute; top: 4px; right: calc(50% - 22px); background: var(--accent); color: #fffaf0; font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: var(--radius-pill); min-width: 18px; text-align: center; } /* ============ WELCOME / LEARN ============ */ .welcome-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 22px 22px; margin-bottom: 18px; border: var(--hairline) solid var(--border); text-align: left; } .welcome-card h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; font-variation-settings: "opsz" 72, "SOFT" 50; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.015em; } .welcome-card p { color: var(--text-secondary); font-size: 15px; line-height: 1.6; font-family: var(--font-body); } .section-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; } .section-nav-part { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--accent); text-transform: uppercase; letter-spacing: 0.16em; padding: 16px 4px 6px; } .section-nav-part:first-child { padding-top: 4px; } .section-nav-item { background: transparent; border: var(--hairline) solid transparent; border-radius: var(--radius); padding: 12px 14px; min-height: 44px; color: var(--text-primary); font-family: var(--font-body); font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast); display: flex; align-items: center; gap: 10px; width: 100%; } .section-nav-item:hover { background: var(--bg-card-hover); border-color: var(--border); } .section-nav-item.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .section-dropdown { background: var(--bg-card); border: var(--hairline) solid var(--border-strong); border-radius: var(--radius); padding: 12px 36px 12px 16px; min-height: 44px; font-family: var(--font-body); font-size: 15px; color: var(--text-primary); font-weight: 500; cursor: pointer; width: 100%; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%237a6553' d='M3 5l4 4 4-4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .section-count { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 400; margin-left: 8px; letter-spacing: 0.06em; } .learn-list, .learn-content, .learn-body, .learn-header { display: flex; flex-direction: column; gap: 14px; } .learn-header { background: var(--bg-card); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; border: var(--hairline) solid var(--border); } .learn-list { gap: 10px; } /* Lesson cards use the .lesson-card-folio asymmetric layout below. The generic learn-list selector preserves background/border for misc children. */ .learn-list > *:not(.learn-list-header):not(.learn-level-group) { background: var(--bg-card); border: var(--hairline) solid var(--border); border-radius: var(--radius); transition: background-color var(--t-fast), border-color var(--t-fast); cursor: pointer; position: relative; overflow: hidden; } /* ---- learn-list header (rendered by js/learn.js) ---- */ .learn-list-header { background: transparent; border: 0; padding: 6px 4px 12px; cursor: default; } .learn-list-header:hover { background: transparent; border-color: transparent; transform: none; box-shadow: none; } .learn-list-title { font-family: var(--font-display); font-variation-settings: "opsz" 96, "SOFT" 70, "WONK" 0; font-size: 32px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; margin-bottom: 4px; line-height: 1.1; } .learn-list-subtitle { font-family: var(--font-body); color: var(--text-secondary); font-size: 14px; font-style: italic; } /* ---- level-group header — small-caps with ornament ---- */ .learn-level-group { background: transparent; border: 0; padding: 22px 2px 8px; cursor: default; display: flex; align-items: center; gap: 14px; } .learn-level-group:hover { background: transparent; border-color: transparent; } .learn-level-group:first-of-type { padding-top: 10px; } .learn-level-group-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); flex-shrink: 0; padding: 0; background: transparent; border: 0; display: inline-flex; align-items: center; gap: 8px; } .learn-level-group-tag::after { content: "❦"; display: inline-block; font-family: var(--font-display); color: var(--accent); opacity: 0.7; font-size: 14px; margin-left: 2px; } .learn-level-group-name { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); } .learn-level-group-rule { flex: 1; height: 1px; background: var(--border); } /* ---- CEFR badge — hand-stamped wax seal ---- */ .lesson-level-badge { display: inline-flex; align-items: center; padding: 2px 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius-sm); line-height: 1.5; margin-right: 8px; vertical-align: middle; border: 1px solid currentColor; background: var(--lvl-a1-bg); /* default; overridden by data-level below */ transform: rotate(0deg); } @media (prefers-reduced-motion: no-preference) { .lesson-level-badge { animation: stamp-wobble 400ms cubic-bezier(0.34, 1.56, 0.64, 1); } } @keyframes stamp-wobble { 0% { transform: rotate(-2deg); } 100% { transform: rotate(0deg); } } .lesson-level-badge[data-level="A1"] { color: var(--lvl-a1); background: var(--lvl-a1-bg); } .lesson-level-badge[data-level="A2"] { color: var(--lvl-a2); background: var(--lvl-a2-bg); } .lesson-level-badge[data-level="B1"] { color: var(--lvl-b1); background: var(--lvl-b1-bg); } .lesson-level-badge[data-level="B2"] { color: var(--lvl-b2); background: var(--lvl-b2-bg); } .lesson-level-badge[data-level="C1"] { color: var(--lvl-c1); background: var(--lvl-c1-bg); } .lesson-level-badge[data-level="C2"] { color: var(--lvl-c2); background: var(--lvl-c2-bg); } /* ---- lesson cards — asymmetric folio layout ---- 64px Roman-numeral folio gutter on the left, 1fr content. No box-shadow at rest. */ .lesson-card { display: grid; grid-template-columns: 64px 1fr auto; align-items: start; gap: 14px; padding: 16px 18px 18px; position: relative; } .lesson-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width var(--t-med) ease; } @media (prefers-reduced-motion: no-preference) { .lesson-card { transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-med); } .lesson-card:hover:not(.locked) { transform: translateY(-1px); } } .lesson-card:hover:not(.locked) { background: var(--bg-card-hover); } .lesson-card:hover:not(.locked)::before { width: 3px; } .lesson-card.locked { opacity: 0.55; cursor: not-allowed; } .lesson-card.locked::before { display: none; } .lesson-card.current { border-color: var(--accent); } .lesson-card.current::before { width: 3px; } .lesson-card.completed { border-color: var(--green-strong); } .lesson-folio { grid-column: 1; grid-row: 1 / span 2; font-family: var(--font-display); font-variation-settings: "opsz" 96, "SOFT" 80, "WONK" 0; font-size: 38px; font-weight: 300; color: var(--accent-soft); /* accent-soft is rgba so text shows as the accent tint — bump opacity via fallback */ color: var(--text-muted); opacity: 0.55; line-height: 0.9; text-align: right; padding-right: 4px; font-style: normal; user-select: none; letter-spacing: -0.02em; white-space: nowrap; } .lesson-card.current .lesson-folio { color: var(--accent); opacity: 0.85; } .lesson-card.completed .lesson-folio { color: var(--green-strong); opacity: 0.7; } .lesson-icon { font-size: 28px; line-height: 1; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .lesson-info { min-width: 0; } .lesson-number { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 4px; } .lesson-title { font-family: var(--font-display); font-variation-settings: "opsz" 36; font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; letter-spacing: -0.005em; line-height: 1.25; } .lesson-desc { font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); line-height: 1.5; } .lesson-progress-ring { width: 32px; height: 32px; flex-shrink: 0; } .lesson-progress-ring circle:first-child { stroke: var(--border-strong); } .lesson-progress-ring .progress-ring-circle { stroke: var(--accent); transition: stroke-dashoffset 300ms ease; } .lesson-check-mark { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--green-dim); color: var(--green-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; } /* ---- Section ornaments inside lesson body ---- */ .section-ornament { text-align: center; font-family: var(--font-display); color: var(--accent); opacity: 0.6; font-size: 16px; margin: 22px 0 6px; letter-spacing: 0.3em; user-select: none; } /* ---- Culture-block drop cap ---- */ .learn-culture { background: var(--bg-card); border: var(--hairline) solid var(--border); border-radius: var(--radius-lg); padding: 26px 26px 22px; margin-bottom: 16px; } .learn-culture-title { font-family: var(--font-display); font-variation-settings: "opsz" 72, "SOFT" 50; font-size: 22px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; letter-spacing: -0.015em; } .learn-culture-content { font-family: var(--font-body); font-size: 16px; line-height: 1.75; color: var(--text-primary); } .learn-culture-content::first-letter { font-family: var(--font-display); font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 0; font-size: 3.4em; line-height: 0.85; float: left; padding: 0.08em 0.1em 0 0; color: var(--accent); font-weight: 600; } .learn-tip { margin-top: 14px; padding: 12px 16px; background: var(--sun-soft); border-left: 3px solid var(--sun); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; color: var(--text-primary); line-height: 1.55; font-style: italic; } /* ---- Teach items: marginalia for romanization on desktop ---- */ .learn-teach { background: var(--bg-card); border: var(--hairline) solid var(--border); border-radius: var(--radius-lg); padding: 22px 22px 18px; } .learn-teach-title { font-family: var(--font-display); font-variation-settings: "opsz" 72, "SOFT" 50; font-size: 22px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; letter-spacing: -0.015em; } .teach-item { padding: 14px 0; border-bottom: 1px dashed var(--border); cursor: pointer; position: relative; } .teach-item:last-child { border-bottom: 0; } .teach-top-row { display: grid; grid-template-columns: 60% 1fr auto; column-gap: 5%; align-items: baseline; } .teach-text-col { min-width: 0; } .teach-target { font-family: var(--lang-font); font-size: 22px; font-weight: 500; color: var(--text-primary); line-height: 1.3; } /* Marginalia for romanization: aligned in right column on desktop, hairline divider via border-left. */ .teach-roman { grid-column: 2; grid-row: 1; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; padding-left: 14px; border-left: 1px solid var(--border); align-self: stretch; display: flex; align-items: center; } .teach-base { font-family: var(--font-body); color: var(--text-secondary); font-size: 15px; margin-top: 8px; font-style: italic; } .teach-note { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); margin-top: 4px; font-style: normal; } .teach-tap-hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 6px; text-align: right; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; } .teach-item.revealed .teach-tap-hint { display: none; } @media (max-width: 720px) { .teach-top-row { grid-template-columns: 1fr auto; } .teach-roman { grid-column: 1; grid-row: 2; border-left: 0; padding-left: 0; margin-top: 4px; } } /* ---- Dialogue ---- */ .learn-dialogue { background: var(--bg-card); border: var(--hairline) solid var(--border); border-radius: var(--radius-lg); padding: 22px; } .dialogue-context { font-family: var(--font-body); font-style: italic; color: var(--text-secondary); margin-bottom: 16px; font-size: 14px; line-height: 1.55; } .dialogue-line { display: flex; margin-bottom: 12px; } .dialogue-line.left { justify-content: flex-start; } .dialogue-line.right { justify-content: flex-end; } .dialogue-bubble { background: var(--bg-soft); padding: 12px 14px; border-radius: var(--radius); max-width: 80%; border: 1px solid var(--border); } .dialogue-line.right .dialogue-bubble { background: var(--accent-soft); border-color: var(--accent); } .dialogue-speaker { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 4px; } .dialogue-target { font-family: var(--lang-font); font-size: 17px; color: var(--text-primary); font-weight: 500; } .dialogue-roman { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 2px; } .dialogue-base { font-family: var(--font-body); font-size: 13px; color: var(--text-secondary); margin-top: 4px; font-style: italic; } .dialogue-speak { margin-top: 6px; } /* ---- Practice + Summary ---- */ .learn-practice, .learn-summary { background: var(--bg-card); border: var(--hairline) solid var(--border); border-radius: var(--radius-lg); padding: 22px; } .practice-counter { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; } .practice-question { font-family: var(--font-display); font-variation-settings: "opsz" 36; font-size: 19px; font-weight: 500; color: var(--text-primary); margin-bottom: 16px; line-height: 1.4; } .practice-options { display: flex; flex-direction: column; gap: 10px; } .practice-option { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; min-height: 44px; font-family: var(--font-body); font-size: 15px; color: var(--text-primary); text-align: left; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast); } .practice-option:hover:not(:disabled) { background: var(--bg-card-hover); border-color: var(--border-strong); } .practice-option.correct { background: var(--green-dim); border-color: var(--green-strong); color: var(--green-strong); } .practice-option.wrong { background: var(--red-dim); border-color: var(--red-strong); color: var(--red-strong); } .btn-continue { display: inline-block; background: var(--accent); color: #fffaf0; padding: 12px 22px; min-height: 44px; border-radius: var(--radius); font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-top: 16px; } .btn-continue:hover { background: var(--accent-dim); } .summary-celebration { font-size: 48px; text-align: center; margin-bottom: 8px; } .summary-title { font-family: var(--font-display); font-variation-settings: "opsz" 96, "SOFT" 70; font-size: 26px; font-weight: 600; text-align: center; color: var(--text-primary); margin-bottom: 12px; letter-spacing: -0.02em; } .summary-learned { background: var(--bg-soft); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0; } .summary-learned h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .summary-learned ul { list-style: none; padding: 0; } .summary-learned li { font-family: var(--font-body); padding: 4px 0; color: var(--text-primary); font-size: 14px; } .summary-cultural { margin-top: 12px; padding: 12px 14px; background: var(--sun-soft); border-radius: var(--radius); font-family: var(--font-body); font-size: 14px; color: var(--text-primary); font-style: italic; } .summary-score { margin-top: 12px; text-align: center; font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); letter-spacing: 0.04em; } .learn-toast { position: fixed; bottom: calc(var(--nav-height) + 20px); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--accent); color: #fffaf0; padding: 12px 22px; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: 14px; font-weight: 500; opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast); z-index: 150; box-shadow: var(--shadow-lg); } .learn-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Progress dots inside lesson */ .progress-dots { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; } .progress-dots > .progress-dot, .progress-dots > div { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); } .progress-dots > .progress-dot.done, .progress-dots > div.done { background: var(--accent); opacity: 0.5; } .progress-dots > .progress-dot.active { background: var(--accent); } /* ============ SEARCH ============ */ .search-bar { display: flex; gap: 8px; margin-bottom: 16px; } .search-bar input, #search-input { flex: 1; padding: 12px 16px; min-height: 44px; border: var(--hairline) solid var(--border-strong); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 16px; background: var(--bg-input); color: var(--text-primary); } .search-bar input:focus, #search-input:focus { border-color: var(--accent); outline: none; } .search-placeholder { color: var(--text-muted); text-align: center; padding: 36px 16px; font-family: var(--font-body); font-style: italic; font-size: 14px; } #search-filter { padding: 12px 16px; min-height: 44px; border: var(--hairline) solid var(--border); border-radius: var(--radius-pill); background: var(--bg-card); color: var(--text-primary); font-family: var(--font-body); font-size: 14px; cursor: pointer; } /* ============ QUIZ CONFIG ============ */ #view-quiz { padding-top: 6px; } .quiz-config { display: flex; flex-direction: column; gap: 20px; padding-bottom: 16px; } .quiz-config h2 { font-family: var(--font-display); font-variation-settings: "opsz" 96, "SOFT" 60; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; } .config-label { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; display: block; letter-spacing: 0.18em; text-transform: uppercase; } .config-note { font-size: 12px; color: var(--text-muted); font-style: italic; font-family: var(--font-body); } .chip-picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .picker-part-header { width: 100%; font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.16em; margin-top: 6px; margin-bottom: 2px; padding-left: 4px; } .picker-chip { background: var(--bg-card); color: var(--text-secondary); padding: 10px 16px; min-height: 44px; border-radius: var(--radius-pill); border: var(--hairline) solid var(--border); font-family: var(--font-body); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .picker-chip:hover { color: var(--text-primary); border-color: var(--border-strong); } .picker-chip.selected { background: var(--accent); color: #fffaf0; border-color: var(--accent); } .disabled-picker { opacity: 0.45; pointer-events: none; } #quiz-start { margin-top: 14px; width: 100%; background: var(--accent); color: #fffaf0; padding: 16px 24px; min-height: 48px; border-radius: var(--radius); font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; transition: background-color var(--t-fast); } #quiz-start:hover:not(:disabled) { background: var(--accent-dim); } #quiz-start:disabled { background: var(--border-strong); color: var(--text-muted); cursor: not-allowed; opacity: 0.6; } /* ============ QUIZ PLAYER ============ */ .quiz-player { display: flex; flex-direction: column; gap: 14px; } .quiz-header { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); padding: 12px 16px; border-radius: var(--radius); border: var(--hairline) solid var(--border); font-family: var(--font-mono); font-size: 13px; } #quiz-counter { font-weight: 500; color: var(--text-secondary); font-size: 13px; letter-spacing: 0.04em; } #quiz-score { font-weight: 600; color: var(--accent); font-size: 15px; } .quiz-topup-notice { background: var(--sun-soft); color: var(--text-primary); border: 1px solid var(--sun-dim); padding: 10px 16px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 13px; font-weight: 500; text-align: center; font-style: italic; } .quiz-progress, .quiz-timer-bar { height: 4px; background: var(--bg-card-hover); border-radius: var(--radius-pill); overflow: hidden; position: relative; } .quiz-progress-fill, .timer-fill, #quiz-timer-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width 250ms ease; } .timer-fill.urgent, #quiz-timer-fill.urgent { background: var(--red); } .quiz-question { background: var(--bg-card); border-radius: var(--radius-lg); padding: 32px 22px; text-align: center; border: var(--hairline) solid var(--border); min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .q-text { font-family: var(--lang-font); font-size: 32px; font-weight: 500; color: var(--text-primary); line-height: 1.3; letter-spacing: -0.01em; } .q-text-base { font-family: var(--font-display); font-variation-settings: "opsz" 60, "SOFT" 40; font-size: 26px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; } .q-romanization { color: var(--text-muted); font-family: var(--font-mono); font-size: 14px; font-style: normal; letter-spacing: 0.04em; } .q-speak { margin-top: 8px; } .btn-speak { background: var(--accent-soft); color: var(--accent); width: 44px; height: 44px; border-radius: var(--radius-pill); font-size: 20px; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--t-fast), color var(--t-fast); } .btn-speak:hover { background: var(--accent); color: #fffaf0; } @media (prefers-reduced-motion: no-preference) { .btn-speak { transition: background-color var(--t-fast), color var(--t-fast), transform 100ms; } .btn-speak:active { transform: scale(0.95); } } .btn-speak-large { width: 88px; height: 88px; font-size: 36px; box-shadow: var(--shadow-md); } .btn-speak-sm { width: 36px; height: 36px; font-size: 16px; min-height: 44px; min-width: 44px; } .quiz-answers { display: flex; flex-direction: column; gap: 10px; } .quiz-answer-btn { background: var(--bg-card); border: var(--hairline) solid var(--border); border-radius: var(--radius); padding: 14px 18px; min-height: 44px; font-family: var(--font-body); font-size: 16px; color: var(--text-primary); text-align: left; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); } .quiz-answer-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-card-hover); } .quiz-answer-btn:disabled { cursor: default; opacity: 0.9; } .quiz-answer-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--bg-card-hover); border: 1px solid var(--border); color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px; font-weight: 500; flex-shrink: 0; } .quiz-answer-btn.correct { background: var(--green-dim); border-color: var(--green-strong); color: var(--green-strong); } .quiz-answer-btn.correct .quiz-answer-num { background: var(--green-strong); color: #fffaf0; } .quiz-answer-btn.wrong { background: var(--red-dim); border-color: var(--red-strong); color: var(--red-strong); } .quiz-answer-btn.wrong .quiz-answer-num { background: var(--red-strong); color: #fffaf0; } .quiz-answer-thai .quiz-answer-num, .quiz-answer-thai { font-family: var(--lang-font); font-size: 18px; } .quiz-feedback { position: fixed; bottom: calc(var(--nav-height) + 24px); left: 50%; transform: translateX(-50%); padding: 14px 24px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 600; font-size: 16px; z-index: 80; box-shadow: var(--shadow-lg); } @media (prefers-reduced-motion: no-preference) { .quiz-feedback { animation: feedback-pop 200ms cubic-bezier(.34, 1.56, .64, 1); } } .quiz-feedback.correct-fb { background: var(--green-strong); color: #fffaf0; } .quiz-feedback.wrong-fb { background: var(--red-strong); color: #fffaf0; display: flex; flex-direction: column; gap: 4px; align-items: center; } .fb-correct-answer { font-weight: 500; font-size: 14px; opacity: 0.95; } @keyframes feedback-pop { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } .quiz-typing input, #quiz-type-input { width: 100%; padding: 14px 18px; min-height: 48px; font-size: 18px; font-family: var(--lang-font); border: var(--hairline) solid var(--border-strong); border-radius: var(--radius); background: var(--bg-card); color: var(--text-primary); } .quiz-typing input:focus, #quiz-type-input:focus { border: 2px solid var(--accent); outline: none; padding: 13px 17px; } #quiz-type-submit { margin-top: 10px; width: 100%; min-height: 48px; background: var(--accent); color: #fffaf0; padding: 14px 22px; border-radius: var(--radius); font-weight: 600; font-family: var(--font-display); } #quiz-type-submit:hover { background: var(--accent-dim); } .quiz-typing-result { padding: 14px; border-radius: var(--radius); font-family: var(--font-display); font-weight: 600; text-align: center; } .quiz-typing-result.correct { background: var(--green-dim); color: var(--green-strong); } .quiz-typing-result.wrong { background: var(--red-dim); color: var(--red-strong); } .quiz-typing-correct { padding: 10px 14px; color: var(--text-secondary); text-align: center; font-size: 14px; } .quiz-typing-correct strong { color: var(--text-primary); font-weight: 600; } .quiz-listening-prompt { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px; } .quiz-listening-hint { color: var(--text-secondary); font-family: var(--font-body); font-style: italic; font-size: 14px; } /* Flashcard */ .quiz-flashcard { perspective: 1000px; height: 200px; cursor: pointer; margin-bottom: 12px; } .quiz-fc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } @media (prefers-reduced-motion: no-preference) { .quiz-fc-inner { transition: transform 500ms cubic-bezier(.34, 1.2, .64, 1); } } .quiz-flashcard.flipped .quiz-fc-inner { transform: rotateY(180deg); } .quiz-fc-front, .quiz-fc-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--bg-card); border-radius: var(--radius-lg); border: var(--hairline) solid var(--border); box-shadow: var(--shadow-md); backface-visibility: hidden; padding: 20px; } .quiz-fc-back { transform: rotateY(180deg); background: var(--bg-soft); } .quiz-flashcard-actions { display: flex; gap: 12px; margin-top: 12px; } .quiz-flashcard-actions .btn-action { flex: 1; } .quiz-slide-in { animation: slide-in 280ms cubic-bezier(.34, 1.2, .64, 1); } @keyframes slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============ QUIZ RESULTS ============ */ .quiz-results { text-align: center; padding: 16px; } #quiz-result-title { font-family: var(--font-display); font-variation-settings: "opsz" 96, "SOFT" 60; font-size: 28px; font-weight: 600; color: var(--text-primary); margin-bottom: 18px; letter-spacing: -0.02em; } .result-score { background: var(--bg-card); border-radius: var(--radius-lg); padding: 26px; margin-bottom: 14px; border: var(--hairline) solid var(--border); } .result-pct, #result-percentage { font-family: var(--font-display); font-variation-settings: "opsz" 144, "SOFT" 80; font-size: 56px; font-weight: 600; color: var(--accent); display: block; line-height: 1; letter-spacing: -0.03em; } .result-frac, #result-fraction { color: var(--text-secondary); font-family: var(--font-mono); font-size: 14px; margin-top: 6px; font-weight: 500; letter-spacing: 0.04em; } .result-config, #result-config { color: var(--text-muted); font-family: var(--font-body); font-size: 13px; margin-top: 14px; font-style: italic; } .result-streak, #result-streak { display: inline-block; background: var(--sun-soft); color: var(--text-primary); padding: 8px 18px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 600; font-size: 14px; border: 1px solid var(--sun-dim); margin-top: 12px; } .xp-earned { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin: 12px 6px 0; padding: 8px 18px; background: var(--sun-soft); color: var(--sun); border: 1px solid var(--sun-dim); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 600; opacity: 0; transform: scale(0.9); transition: opacity 200ms, transform 200ms; } .xp-earned.show { opacity: 1; transform: scale(1); } .xp-amt { font-size: 18px; } .xp-bonus { font-size: 11px; font-weight: 500; opacity: 0.85; } .result-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; } .result-actions button { flex: 1; max-width: 220px; } .result-missed { background: var(--bg-card); border-radius: var(--radius); padding: 20px; margin-top: 18px; border: var(--hairline) solid var(--border); text-align: left; } .result-missed h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; } .missed-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border); gap: 12px; } .missed-item:last-child { border-bottom: none; } .mi-target { font-family: var(--lang-font); font-size: 18px; color: var(--text-primary); font-weight: 500; } .mi-right { display: flex; align-items: center; gap: 10px; } .mi-base { color: var(--text-secondary); font-family: var(--font-body); font-size: 14px; font-style: italic; } .mi-ratio { background: var(--bg-soft); color: var(--text-muted); padding: 2px 8px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; } /* ============ STATS ============ */ .stats-container { display: flex; flex-direction: column; gap: 18px; } .stats-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .stat-card { background: var(--bg-card); border-radius: var(--radius); padding: 18px 12px; border: var(--hairline) solid var(--border); text-align: center; } .stat-big { font-family: var(--font-display); font-variation-settings: "opsz" 72, "SOFT" 50; font-size: 30px; font-weight: 600; color: var(--text-primary); display: block; letter-spacing: -0.02em; } .stat-desc { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 6px; letter-spacing: 0.16em; text-transform: uppercase; } .stats-overall-bar { height: 6px; background: var(--bg-card-hover); border-radius: var(--radius-pill); overflow: hidden; margin: 4px 0 6px; } .stats-bar-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-muted); margin: 0 0 16px; letter-spacing: 0.1em; text-transform: uppercase; } .stats-bar-fill { height: 100%; width: 0; background: var(--accent); border-radius: var(--radius-pill); transition: width 400ms ease; } .stats-title { font-family: var(--font-display); font-variation-settings: "opsz" 72, "SOFT" 50; font-size: 22px; font-weight: 600; color: var(--text-primary); margin-bottom: 14px; letter-spacing: -0.02em; } .stats-sections { background: var(--bg-card); border-radius: var(--radius); padding: 8px 14px; border: var(--hairline) solid var(--border); display: flex; flex-direction: column; } .stats-section-row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px dashed var(--border); font-family: var(--font-body); font-size: 14px; } .stats-section-row:last-child { border-bottom: 0; } .stats-sec-name { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stats-sec-bar { height: 4px; background: var(--bg-card-hover); border-radius: var(--radius-pill); overflow: hidden; } .stats-sec-fill { height: 100%; width: 0; background: var(--accent); border-radius: var(--radius-pill); transition: width 300ms ease; } .stats-sec-pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); min-width: 38px; text-align: right; } /* ============ GAMIFY (XP / streak / daily goal) ============ */ #gamify-bar { display: inline-flex; align-items: center; gap: 6px; } .gm-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 36px; background: transparent; border: var(--hairline) solid var(--border); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--text-secondary); transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .gm-pill:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-card-hover); } .gm-flame { font-size: 13px; } .gm-level { color: var(--text-primary); font-weight: 600; } .gm-xp-val { color: var(--text-secondary); } .gm-ring-mini { display: block; } #gm-home-ring { display: flex; align-items: center; gap: 18px; background: var(--bg-card); border: var(--hairline) solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 18px; } .gm-ring-wrap { position: relative; width: 88px; height: 88px; flex-shrink: 0; } .gm-ring-svg { display: block; width: 88px; height: 88px; } .gm-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .gm-ring-today { font-family: var(--font-display); font-variation-settings: "opsz" 60, "SOFT" 40; font-size: 22px; font-weight: 600; color: var(--text-primary); line-height: 1; letter-spacing: -0.015em; } .gm-ring-goal { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.06em; } .gm-ring-side { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .gm-ring-stat { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 14px; color: var(--text-primary); } .gm-ring-stat b { font-weight: 600; } .gm-muted { color: var(--text-secondary); font-size: 13px; } .gm-btn-text { background: transparent; border: 0; padding: 8px 0; color: var(--text-secondary); font-family: var(--font-display); font-size: 13px; text-align: left; cursor: pointer; transition: color var(--t-fast); display: flex; align-items: center; gap: 6px; min-height: 44px; } .gm-btn-text:hover { color: var(--text-primary); } /* Modal (calendar + achievements) */ .gm-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .gm-modal.hidden { display: none; } .gm-modal-inner { background: var(--bg-card); border: var(--hairline) solid var(--border); border-radius: var(--radius-lg); padding: 22px; max-width: 440px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; } .gm-modal-close { position: absolute; top: 8px; right: 10px; background: transparent; border: 0; font-size: 24px; color: var(--text-muted); cursor: pointer; padding: 8px 10px; min-height: 44px; min-width: 44px; } .gm-modal-close:hover { color: var(--text-primary); } .gm-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .gm-cal-header h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text-primary); margin: 0; } .gm-cal-streak { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: var(--bg-card-hover); border-radius: var(--radius); margin-bottom: 14px; font-family: var(--font-body); font-size: 14px; } .gm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .gm-cal-grid > div { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; border-radius: var(--radius-sm); background: var(--bg-card-hover); color: var(--text-secondary); } .gm-cal-grid > div.done { background: var(--accent-soft); color: var(--accent); } .gm-cal-grid > div.today { border: 1px solid var(--accent); } .gm-page { display: flex; flex-direction: column; gap: 14px; } .gm-page-title { font-family: var(--font-display); font-variation-settings: "opsz" 72, "SOFT" 50; font-size: 24px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; margin: 4px 0 8px; } .gm-card { background: var(--bg-card); border: var(--hairline) solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; } .gm-card h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .gm-card p { color: var(--text-secondary); font-family: var(--font-body); font-size: 14px; margin-bottom: 12px; } .gm-level-banner { background: var(--bg-card); border: var(--hairline) solid var(--border); border-radius: var(--radius-lg); padding: 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; } .gm-level-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.14em; } .gm-level-big { font-family: var(--font-display); font-variation-settings: "opsz" 96, "SOFT" 70; font-size: 36px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; grid-column: 1; grid-row: 2; } .gm-level-bar { grid-column: 2; grid-row: 2; height: 6px; background: var(--bg-card-hover); border-radius: var(--radius-pill); overflow: hidden; } .gm-level-bar-fill { height: 100%; width: 0; background: var(--accent); border-radius: var(--radius-pill); transition: width 400ms ease; } .gm-level-xp { grid-column: 3; grid-row: 2; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); } .gm-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .gm-ach-card { background: var(--bg-card); border: var(--hairline) solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; gap: 10px; align-items: center; } .gm-ach-card.locked { opacity: 0.4; filter: grayscale(0.6); } .gm-ach-emoji { font-size: 22px; } .gm-ach-meta { font-family: var(--font-body); font-size: 12px; line-height: 1.4; min-width: 0; } .gm-ach-meta b { display: block; font-family: var(--font-display); color: var(--text-primary); font-weight: 600; } .gm-ach-meta .when { font-family: var(--font-mono); color: var(--text-muted); font-size: 10px; letter-spacing: 0.06em; } .gm-goal-picker { display: flex; flex-wrap: wrap; gap: 8px; } .gm-goal-chip { background: var(--bg-card-hover); color: var(--text-secondary); border: var(--hairline) solid var(--border); border-radius: var(--radius-pill); padding: 10px 16px; min-height: 44px; font-family: var(--font-body); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .gm-goal-chip:hover { color: var(--text-primary); border-color: var(--border-strong); } .gm-goal-chip.selected { background: var(--accent); color: #fffaf0; border-color: var(--accent); } .gm-saved { font-family: var(--font-mono); font-size: 11px; margin-top: 10px; opacity: 0; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-strong); transition: opacity 200ms; } .gm-saved.show { opacity: 1; } .gm-toast-container { position: fixed; bottom: calc(var(--nav-height) + 16px); left: 50%; transform: translateX(-50%); z-index: 150; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .gm-toast { background: var(--bg-card); border: var(--hairline) solid var(--border-strong); border-radius: var(--radius); padding: 12px 18px; color: var(--text-primary); font-family: var(--font-body); font-size: 14px; box-shadow: var(--shadow-lg); pointer-events: auto; } @media (prefers-reduced-motion: no-preference) { .gm-toast { animation: gm-toast-in 200ms ease; } } @keyframes gm-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ============ REVIEW ============ */ .review-container { display: flex; flex-direction: column; gap: 16px; } .review-header { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 12px; } .review-title { font-family: var(--font-display); font-variation-settings: "opsz" 72, "SOFT" 50; font-size: 24px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; margin: 0; } .review-stats-line { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; margin: 0; } .review-card-wrap { perspective: 1000px; } .review-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 36px 24px; text-align: center; border: var(--hairline) solid var(--border); min-height: 180px; cursor: pointer; } @media (prefers-reduced-motion: no-preference) { .review-card { transition: transform 200ms; } .review-card:hover { transform: translateY(-2px); } } .review-front { font-family: var(--lang-font); font-size: 34px; color: var(--text-primary); font-weight: 500; } .review-rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; } .review-rate-btn { padding: 14px 8px; min-height: 44px; border-radius: var(--radius); font-family: var(--font-display); font-weight: 600; font-size: 13px; border: 2px solid var(--border); background: var(--bg-card); color: var(--text-primary); cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); } @media (prefers-reduced-motion: no-preference) { .review-rate-btn { transition: transform 100ms, border-color var(--t-fast), background-color var(--t-fast); } .review-rate-btn:hover { transform: translateY(-1px); } } .review-rate-btn[data-rate="again"]:hover, .review-rate-btn[data-quality="1"]:hover { border-color: var(--red-strong); color: var(--red-strong); background: var(--red-dim); } .review-rate-btn[data-rate="hard"]:hover, .review-rate-btn[data-quality="3"]:hover { border-color: var(--sun-dim); color: var(--text-primary); background: var(--sun-soft); } .review-rate-btn[data-rate="good"]:hover, .review-rate-btn[data-quality="4"]:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .review-rate-btn[data-rate="easy"]:hover, .review-rate-btn[data-quality="5"]:hover { border-color: var(--green-strong); color: var(--green-strong); background: var(--green-dim); } .review-rate-btn small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; } .review-empty { text-align: center; padding: 52px 20px; background: var(--bg-card); border-radius: var(--radius-lg); border: var(--hairline) solid var(--border); } .review-empty-icon { font-size: 64px; margin-bottom: 14px; } .review-empty-next { color: var(--text-secondary); font-family: var(--font-body); font-style: italic; font-size: 14px; margin-top: 10px; } .review-back { position: absolute; inset: 0; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--radius-lg); font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text-primary); } /* ============ SIDEBAR ============ */ .sidebar { background: var(--bg-card); border-radius: var(--radius); padding: 14px; border: var(--hairline) solid var(--border); } /* ============ HEADER LOGOUT / INSTALL ============ */ .header-logout { background: transparent; color: var(--text-secondary); padding: 8px 14px; min-height: 44px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; border: var(--hairline) solid var(--border); transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .header-logout:hover { background: var(--red-dim); color: var(--red-strong); border-color: var(--red-strong); } .header-logout span { margin-right: 4px; } .header-install { background: var(--sun-soft); border: var(--hairline) solid var(--sun-dim); color: var(--text-primary); font-family: var(--font-display); font-weight: 600; min-height: 44px; } /* ============ MOBILE TWEAKS ============ */ /* Prevent iOS Safari from zooming inputs on focus. */ input, select, textarea { font-size: 16px; } @media (max-width: 480px) { .q-text { font-size: 30px; } .q-text-base { font-size: 24px; } #result-percentage { font-size: 48px; } .quiz-question { padding: 26px 18px; } #app-header { padding: 0 14px; } #header-title { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; } #header-right { gap: 6px; flex-wrap: nowrap; justify-content: flex-end; } .header-user, .header-lang, .header-base, .header-base-select, .header-logout, .header-install { font-size: 11px; padding: 6px 10px; min-height: 44px; } .header-user { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #gamify-bar { display: none; } .header-lang, .header-base, .header-base-select { display: none; } .header-lang:first-of-type { display: inline-flex; } .view { padding: 16px 12px 28px; } .content-area { padding-bottom: calc(var(--nav-height) + 12px); } .quiz-feedback { left: 8px; right: 8px; transform: none; bottom: calc(var(--nav-height) + 12px); } @keyframes feedback-pop { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .result-actions { flex-direction: column; align-items: stretch; } .result-actions button { max-width: none; } .review-rate { grid-template-columns: repeat(2, 1fr); } .stats-summary { grid-template-columns: 1fr; } .auth-card { padding: 26px 20px; } .auth-title { font-size: 26px; } .auth-logo { font-size: 42px; } .lesson-card { grid-template-columns: 50px 1fr auto; gap: 10px; padding: 14px 14px 16px; } .lesson-folio { font-size: 30px; } #section-list { display: none; } } /* ============ THAI TONE MATRIX (A3) ============ */ .tone-matrix-wrap { background: var(--bg-card); border-radius: var(--radius-lg); padding: 22px; margin: 18px 0; border: var(--hairline) solid var(--border); } .tone-matrix-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; } .tone-matrix-sub { color: var(--text-secondary); font-family: var(--font-body); font-size: 14px; line-height: 1.55; margin-bottom: 14px; font-style: italic; } .tone-matrix-table { width: 100%; border-collapse: separate; border-spacing: 6px; margin-bottom: 18px; } .tone-matrix-table th { padding: 10px 12px; font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--accent); text-align: center; background: var(--accent-soft); border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.16em; } .tone-matrix-table th:first-child, .tone-matrix-table tr > th:first-child { text-align: left; background: var(--bg-soft); color: var(--text-primary); } .tone-matrix-table td { padding: 0; vertical-align: top; } .tm-cell { display: block; padding: 14px; background: var(--bg-soft); border: var(--hairline) solid var(--border); border-radius: var(--radius-sm); cursor: pointer; text-align: center; min-height: 90px; transition: border-color var(--t-fast), background-color var(--t-fast); } @media (prefers-reduced-motion: no-preference) { .tm-cell { transition: transform 100ms, border-color var(--t-fast), background-color var(--t-fast); } .tm-cell:hover { transform: translateY(-2px); } } .tm-cell:hover { border-color: var(--accent); background: var(--bg-card); } .tm-tone { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 6px; } .tm-example { font-family: var(--lang-font); font-size: 22px; font-weight: 500; color: var(--text-primary); line-height: 1.2; margin-bottom: 4px; } .tm-rom { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; } .tm-gloss { color: var(--text-muted); font-family: var(--font-body); font-size: 12px; font-style: italic; margin-top: 2px; } .tone-matrix-table.tm-marks th, .tone-matrix-table.tm-marks td { padding: 10px 12px; background: var(--bg-soft); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 500; text-align: center; } .tone-matrix-table.tm-marks td { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); } /* ============ B8 — Reduced-motion override (applied last, wins) ============ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============ Section reveal on enter (lesson body) ============ */ .learn-section-enter { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .learn-section-enter { animation: section-fade-in 280ms ease-out; } @keyframes section-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } } /* ============ END ============ */