/* ───────────────────────────────────────────────────────────── Langlets · Sprout mobile redesign design system Recreated from the "Langlets Mobile Redesign" handoff (Option 1 · Sprout). Nunito · fresh green (hue 150) · comfortable density · light + dark. Everything is scoped under `.sprout` so the rest of the app keeps its current dark theme untouched. Light is the default; dark follows the user's system preference. ──────────────────────────────────────────────────────────── */ /* Nunito is loaded via a in the application layout head. */ .sprout { /* dimensions (Sprout token set `d`) */ --pad: 20px; --gap: 16px; --card: 18px; --card-r: 22px; --btn-r: 16px; --chip-r: 13px; --btn-h: 54px; --thumb-r: 16px; /* hue + palette (light) */ --hue: 150; --bg: oklch(0.985 0.006 150); --surface: #ffffff; --surface2: oklch(0.967 0.009 150); --sunken: oklch(0.955 0.012 150); --text: oklch(0.24 0.02 150); --muted: oklch(0.52 0.02 150); --faint: oklch(0.7 0.015 150); --border: oklch(0.92 0.01 150); --accent: oklch(0.72 0.17 150); --accent-press: oklch(0.6 0.16 150); --accent-text: #fff; --accent-soft: oklch(0.95 0.05 150); --shadow: 0 6px 20px rgba(20, 20, 40, 0.06), 0 1px 3px rgba(20, 20, 40, 0.04); /* thumbnail stripe lightness/chroma (theme dependent) */ --thumb-l1: 0.9; --thumb-c1: 0.07; --thumb-l2: 0.95; --thumb-c2: 0.05; color-scheme: light; font-family: 'Nunito', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* Dark theme (Langlets Mobile Redesign · dark variant). Applied whenever the user has chosen dark — the layout sets `data-theme="dark"` on , which flips these tokens for all .sprout UI. */ [data-theme="dark"] .sprout { color-scheme: dark; --bg: oklch(0.165 0.012 150); --surface: oklch(0.215 0.014 150); --surface2: oklch(0.255 0.016 150); --sunken: oklch(0.19 0.012 150); --text: oklch(0.96 0.006 150); --muted: oklch(0.72 0.012 150); --faint: oklch(0.55 0.012 150); --border: oklch(0.31 0.016 150); --accent: oklch(0.78 0.16 150); --accent-press: oklch(0.6 0.16 150); --accent-soft: oklch(0.3 0.06 150); --shadow: 0 8px 24px rgba(0, 0, 0, 0.4); --thumb-l1: 0.34; --thumb-c1: 0.07; --thumb-l2: 0.3; --thumb-c2: 0.06; } /* dark surfaces get a hairline border (matches the mockup) */ [data-theme="dark"] .sprout .s-card, [data-theme="dark"] .sprout .s-row, [data-theme="dark"] .sprout .s-hero { border: 1px solid var(--border); } /* ── Layout helpers ─────────────────────────────────────────── */ .sprout * { box-sizing: border-box; } .s-screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); } /* viewport-locked variant: inner area scrolls, bottom bar stays pinned */ .s-screen--fixed { height: 100vh; height: 100dvh; max-height: 100dvh; min-height: 0; overflow: hidden; } .s-pad { padding-left: var(--pad); padding-right: var(--pad); } .s-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--gap); } /* ── Typography ─────────────────────────────────────────────── */ .s-h1 { margin: 0; font: 800 24px/1.1 'Nunito', sans-serif; letter-spacing: -0.4px; color: var(--text); } .s-h2 { margin: 0; font: 800 18px/1.15 'Nunito', sans-serif; letter-spacing: -0.2px; color: var(--text); } .s-body { font: 600 15.5px/1.4 'Nunito', sans-serif; color: var(--text); } .s-muted { color: var(--muted); } .s-faint { color: var(--faint); } .s-small { font: 600 12.5px/1.3 'Nunito', sans-serif; color: var(--muted); } .s-eyebrow { font: 800 11px/1 ui-monospace, monospace; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); } .s-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .s-section-head h2 { font-size: 18px; } .s-section-head a { font: 700 12.5px 'Nunito', sans-serif; color: var(--accent); text-decoration: none; } /* ── Cards ──────────────────────────────────────────────────── */ .s-card, .s-hero { background: var(--surface); border-radius: var(--card-r); padding: var(--card); box-shadow: var(--shadow); } .s-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: calc(var(--card-r) - 4px); padding: 9px; box-shadow: var(--shadow); text-decoration: none; color: inherit; } /* ── Buttons ────────────────────────────────────────────────── */ .s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h); padding: 0 22px; border: none; cursor: pointer; border-radius: var(--btn-r); background: var(--accent); color: var(--accent-text); font: 800 16.5px 'Nunito', sans-serif; letter-spacing: 0.2px; transition: background 0.2s ease; } .s-btn:hover { background: var(--accent-press); } .s-btn--full { width: 100%; padding: 0; } .s-btn--lg { height: calc(var(--btn-h) + 4px); } .s-btn--sm { height: 40px; padding: 0 16px; font-size: 14px; } .s-btn--soft { background: var(--accent-soft); color: var(--accent); } .s-btn--soft:hover { background: var(--accent-soft); filter: brightness(0.97); } /* ── Chips ──────────────────────────────────────────────────── */ .s-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; white-space: nowrap; font: 700 12.5px/1 'Nunito', sans-serif; background: var(--surface2); color: var(--muted); border: 1px solid var(--border); } .s-chip--active { background: var(--accent); color: #fff; border: none; } /* word-bank / answer tiles (the build-the-sentence activity) */ .s-tile { display: inline-flex; align-items: center; font: 800 16.5px 'Nunito', sans-serif; padding: 10px 15px; border-radius: calc(var(--chip-r) + 2px); background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); cursor: pointer; user-select: none; } .s-tile--ghost { background: transparent; border: 2px dashed var(--border); color: transparent; box-shadow: none; } /* ── Language badge ─────────────────────────────────────────── */ .s-badge { --lh: 150; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 7px; font: 800 11px/1 ui-monospace, monospace; letter-spacing: 0.6px; color: oklch(0.42 0.13 var(--lh)); background: oklch(0.93 0.06 var(--lh)); } .s-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: oklch(0.62 0.16 var(--lh)); } [data-theme="dark"] .s-badge { color: oklch(0.85 0.1 var(--lh)); background: oklch(0.3 0.07 var(--lh)); } /* ── Thumbnail (striped placeholder + real-image variant) ───── */ .s-thumb { --th: 150; position: relative; border-radius: var(--thumb-r); overflow: hidden; flex-shrink: 0; background: repeating-linear-gradient(135deg, oklch(var(--thumb-l1) var(--thumb-c1) var(--th)) 0 11px, oklch(var(--thumb-l2) var(--thumb-c2) var(--th)) 11px 22px); } .s-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .s-thumb__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); display: flex; align-items: center; justify-content: center; } .s-thumb__play svg { margin-left: 3px; } .s-thumb--big .s-thumb__play { width: 56px; height: 56px; } .s-thumb__tag { position: absolute; left: 8px; bottom: 8px; font: 600 10px/1 ui-monospace, monospace; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(40, 40, 60, 0.7); background: rgba(255, 255, 255, 0.7); padding: 3px 6px; border-radius: 6px; } [data-theme="dark"] .s-thumb__tag { color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.35); } /* ── Progress bars ──────────────────────────────────────────── */ .s-track { height: 9px; border-radius: 999px; background: var(--sunken); overflow: hidden; } .s-track__fill { height: 100%; border-radius: 999px; background: var(--accent); } /* ── Streak / avatar pills ──────────────────────────────────── */ .s-streak { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font: 800 14px 'Nunito', sans-serif; color: var(--text); } .s-avatar { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(135deg, oklch(0.78 0.13 var(--hue)), var(--accent)); display: flex; align-items: center; justify-content: center; font: 800 15px 'Nunito', sans-serif; color: #fff; object-fit: cover; } /* ── Bottom tab bar ─────────────────────────────────────────── */ .s-tabbar { display: flex; justify-content: space-around; align-items: flex-end; padding: 10px 14px calc(26px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); } .s-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; font: 600 10.5px 'Nunito', sans-serif; color: var(--faint); } .s-tab--active { color: var(--accent); font-weight: 800; } /* round control buttons (lesson player) */ .s-ctl { width: 44px; height: 44px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); color: var(--muted); cursor: pointer; flex-shrink: 0; } .s-ctl--primary { width: 64px; height: 64px; background: var(--accent); border: none; color: #fff; } /* safe-area top spacer (clears status bar / dynamic island) */ .s-safetop { height: env(safe-area-inset-top, 0px); flex-shrink: 0; } /* ── Lesson player: video hero + word breakdown ─────────────── */ .s-video-hero { position: relative; flex-shrink: 0; background: var(--sunken); } .s-hero-pill { width: 38px; height: 38px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; } /* word in the breakdown */ .s-token { cursor: pointer; border-radius: 6px; padding: 1px 2px; transition: background 0.12s ease; border-bottom: 2.5px dotted var(--faint); } .s-token:hover { background: var(--accent-soft); } /* the subtitle line currently playing (set by watch-video-activity controller) */ .s-line-active { background: var(--accent-soft) !important; } .s-phrase { display: block; cursor: pointer; border-radius: 14px; padding: 12px 14px; } .s-phrase:hover { background: var(--surface2); } .s-phrase__l1 { font: 800 21px/1.45 'Nunito', sans-serif; color: var(--text); } .s-phrase__l2 { margin-top: 4px; font: 600 15.5px/1.4 'Nunito', sans-serif; color: var(--muted); font-style: italic; } /* toggle (Show Translation) */ .s-toggle { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px 'Nunito', sans-serif; color: var(--muted); cursor: pointer; } /* ── Activity shell: step nav ───────────────────────────────── */ .s-stepnav { display: flex; align-items: center; gap: 10px; padding: 12px var(--pad); background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } .s-stepnav::-webkit-scrollbar { display: none; } .s-step { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font: 800 13px 'Nunito', sans-serif; text-decoration: none; flex-shrink: 0; transition: transform 0.12s ease; } .s-step--done { background: var(--accent); color: #fff; } .s-step--current { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; } .s-step--upcoming { background: var(--surface2); color: var(--faint); border: 1px solid var(--border); } .s-step--nav { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); } /* ── Activity body re-theme ───────────────────────────────────── Activity partials are authored against the legacy dark palette. Inside the Sprout shell we remap those utilities onto Sprout tokens so every activity type inherits the redesign without a full per-partial rewrite. Semantic red (errors) is left intact. */ .sprout .text-white { color: var(--text); } .sprout .text-gray-100, .sprout .text-gray-200, .sprout .text-slate-100, .sprout .text-slate-200 { color: var(--text); } .sprout .text-gray-300, .sprout .text-gray-400, .sprout .text-slate-300, .sprout .text-slate-400 { color: var(--muted); } .sprout .text-gray-500, .sprout .text-slate-500 { color: var(--faint); } .sprout .text-teal-400, .sprout .text-teal-300 { color: var(--muted); } .sprout .text-blue-400, .sprout .text-blue-300, .sprout .text-green-400, .sprout .text-green-300, .sprout .text-yellow-300 { color: var(--accent); } .sprout .bg-gray-900, .sprout .bg-slate-900 { background-color: var(--bg); } .sprout .bg-gray-800, .sprout .bg-slate-800, .sprout .bg-gray-800\/50, .sprout .bg-gray-800\/70, .sprout .bg-slate-800\/50, .sprout .bg-slate-800\/70 { background-color: var(--surface); } .sprout .bg-gray-700, .sprout .bg-slate-700, .sprout .bg-gray-600, .sprout .bg-slate-600, .sprout .bg-slate-700\/50, .sprout .bg-slate-700\/60 { background-color: var(--surface2); } .sprout .border-gray-700, .sprout .border-gray-600, .sprout .border-gray-500, .sprout .border-slate-700, .sprout .border-slate-600, .sprout .border-gray-700\/50, .sprout .border-slate-700\/50, .sprout .border-slate-700\/60, .sprout .border-blue-500\/30 { border-color: var(--border); } .sprout .bg-blue-600, .sprout .bg-blue-500, .sprout .bg-green-600, .sprout .bg-green-500 { background-color: var(--accent); } /* keep labels white on accent-filled elements (the text-white remap above would otherwise darken button text sitting on the green accent) */ .sprout .bg-blue-600.text-white, .sprout .bg-blue-500.text-white, .sprout .bg-green-600.text-white, .sprout .bg-green-500.text-white { color: #fff; } .sprout .hover\:bg-blue-700:hover, .sprout .hover\:bg-blue-600:hover, .sprout .hover\:bg-green-700:hover, .sprout .hover\:bg-green-600:hover { background-color: var(--accent-press); } .sprout .hover\:bg-gray-600:hover, .sprout .hover\:bg-gray-700:hover, .sprout .hover\:bg-slate-700:hover { background-color: var(--surface2); } /* rounded surfaces inside activities pick up the soft Sprout shadow */ .sprout .shadow-lg, .sprout .shadow-xl, .sprout .shadow-2xl { box-shadow: var(--shadow); } /* tinted info / alert boxes (admin + auth + legal pages) → soft light tints */ .sprout .bg-red-900\/50, .sprout .bg-red-900\/30, .sprout .bg-red-900 { background-color: oklch(0.95 0.04 25); } .sprout .bg-yellow-900\/50, .sprout .bg-yellow-900\/30 { background-color: oklch(0.96 0.05 85); } .sprout .bg-blue-900\/50, .sprout .bg-blue-900\/30 { background-color: var(--accent-soft); } .sprout .bg-green-900\/50, .sprout .bg-green-900\/30, .sprout .bg-green-900 { background-color: var(--accent-soft); } .sprout .bg-slate-900\/50, .sprout .bg-gray-900\/50 { background-color: var(--sunken); } .sprout .border-red-500, .sprout .border-red-500\/50 { border-color: oklch(0.72 0.16 25); } .sprout .border-yellow-500, .sprout .border-yellow-500\/50 { border-color: oklch(0.82 0.12 85); } .sprout .border-blue-500, .sprout .border-blue-500\/50, .sprout .border-green-500 { border-color: var(--accent); } .sprout .text-red-200, .sprout .text-red-300, .sprout .text-red-400 { color: oklch(0.52 0.2 25); } .sprout .text-yellow-200, .sprout .text-yellow-300 { color: oklch(0.5 0.12 75); } .sprout .text-blue-200, .sprout .text-blue-300 { color: var(--accent); } .sprout .text-orange-400 { color: oklch(0.62 0.18 45); } /* ── Auth: inputs + social buttons ──────────────────────────── */ .s-input { width: 100%; padding: 15px 16px; border-radius: var(--btn-r); background: var(--surface); border: 1px solid var(--border); color: var(--text); font: 600 16px 'Nunito', sans-serif; box-shadow: var(--shadow); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .s-input::placeholder { color: var(--faint); } .s-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .s-social { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; border-radius: var(--btn-r); background: var(--surface); border: 1px solid var(--border); color: var(--text); font: 700 14px 'Nunito', sans-serif; letter-spacing: 0.4px; cursor: pointer; box-shadow: var(--shadow); } .s-social:hover { background: var(--surface2); } .s-divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font: 700 12.5px 'Nunito', sans-serif; letter-spacing: 0.4px; } .s-divider::before, .s-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* control / popover surfaces */ .s-popover { position: absolute; z-index: 40; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 12px; box-shadow: var(--shadow); min-width: 180px; } /* ── Floating light/dark theme toggle ───────────────────────── */ /* Theme switcher — sits inline in a header/toolbar, with the green accent icon used across the app. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--accent); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease; } .theme-toggle:hover { background: var(--surface2); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle svg[hidden] { display: none; }