/* ============================================================ TapVocab — design tokens Light + dark via [data-theme] on . ============================================================ */ :root, [data-theme="light"] { /* Surfaces */ --bg: #fafaf7; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #f3f3ee; --surface-overlay: rgba(255, 255, 255, 0.96); /* Text */ --text: #1a1a1f; --text-muted: #6a6a75; --text-soft: #9a9aa3; --text-inverse: #ffffff; /* Borders + dividers */ --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.16); /* Brand (TapVocab coral) */ --brand: #ff5a36; --brand-hover: #e84a26; --brand-soft: rgba(255, 90, 54, 0.1); --brand-text: #ffffff; /* Accents */ --accent-blue: #3b82f6; --accent-green: #10b981; --accent-red: #ef4444; --accent-amber: #f59e0b; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04); --shadow-brand: 0 8px 24px rgba(255, 90, 54, 0.24); } [data-theme="dark"] { --bg: #0f0f12; --surface: #18181d; --surface-raised: #1f1f25; --surface-sunken: #0a0a0d; --surface-overlay: rgba(24, 24, 29, 0.96); --text: #f5f5f7; --text-muted: #a8a8b3; --text-soft: #6a6a75; --text-inverse: #0f0f12; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --brand: #ff7a55; --brand-hover: #ff8d6c; --brand-soft: rgba(255, 122, 85, 0.16); --brand-text: #0f0f12; --accent-blue: #60a5fa; --accent-green: #34d399; --accent-red: #f87171; --accent-amber: #fbbf24; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.5); --shadow-brand: 0 8px 24px rgba(255, 122, 85, 0.28); } /* ============================================================ Spacing, radius, type ============================================================ */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Hotspot tap target padding (used in JS to pad polygons on touch) */ --hotspot-touch-padding: 8px; --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================ Reset + base ============================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Smooth color transitions when toggling theme */ transition: background-color var(--transition-base); } body { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* iOS safe area on bottom */ padding-bottom: env(safe-area-inset-bottom, 0); } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* ============================================================ Page layout ============================================================ */ .page-shell { width: min(1400px, 100%); margin: 0 auto; padding: var(--space-5) var(--space-5) calc(var(--space-7) + env(safe-area-inset-bottom, 0)); } @media (max-width: 640px) { .page-shell { padding: var(--space-4) var(--space-4) calc(var(--space-7) + env(safe-area-inset-bottom, 0)); } } /* ============================================================ Typography utilities ============================================================ */ .eyebrow, .section-label { margin: 0 0 var(--space-2); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-soft); } .lede { color: var(--text-muted); font-size: 1.0625rem; line-height: 1.55; } /* ============================================================ Buttons ============================================================ */ .primary-button, .secondary-button, .ghost-link, .icon-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); cursor: pointer; text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast); white-space: nowrap; user-select: none; min-height: 44px; } .primary-button { background: var(--brand); color: var(--brand-text); box-shadow: var(--shadow-brand); touch-action: manipulation; } .primary-button:active:not(:disabled) { transform: translateY(0); } .primary-button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .secondary-button { background: var(--surface-raised); color: var(--text); border-color: var(--border); touch-action: manipulation; } .secondary-button:disabled { opacity: 0.45; cursor: not-allowed; } .ghost-link { background: transparent; color: var(--text-muted); border-color: transparent; padding: var(--space-2) var(--space-3); min-height: 36px; touch-action: manipulation; } .icon-button { width: 40px; height: 40px; min-height: 40px; padding: 0; background: var(--surface-raised); color: var(--text); border-color: var(--border); border-radius: var(--radius-pill); font-size: 1.1rem; touch-action: manipulation; } @media (hover: hover) { .primary-button:hover:not(:disabled) { background: var(--brand-hover); transform: translateY(-1px); } .secondary-button:hover:not(:disabled) { background: var(--surface-sunken); border-color: var(--border-strong); } .ghost-link:hover { color: var(--text); background: var(--surface-sunken); } .icon-button:hover { background: var(--surface-sunken); border-color: var(--border-strong); } } .disabled-link { pointer-events: none; opacity: 0.45; } /* ============================================================ Cards ============================================================ */ .card, .landing-hero, .landing-panel, .scene-choice-card, .scene-panel, .focus-card, .tip-card, .vocab-card, .editor-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .landing-hero, .landing-panel { padding: var(--space-6); } @media (max-width: 640px) { .landing-hero, .landing-panel { padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); } } /* ============================================================ Header / app top bar (used by AppHeader component) ============================================================ */ .app-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0 var(--space-5); flex-wrap: wrap; } .brand-mark { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--text); text-decoration: none; } .brand-mark::before { content: ""; width: 28px; height: 28px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--brand) 0%, #ff8a4a 100%); flex: 0 0 auto; box-shadow: var(--shadow-brand); } .app-header-actions { display: flex; align-items: center; gap: var(--space-3); } .admin-pill { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--brand); background: var(--brand-soft); border: 1px solid transparent; text-decoration: none; min-height: 36px; transition: background var(--transition-fast), color var(--transition-fast); } .admin-pill:hover { background: var(--brand); color: var(--brand-text); } /* User menu chip */ .user-menu { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); min-height: 40px; } .user-menu img { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; } .user-menu-name { font-size: 0.875rem; font-weight: 600; color: var(--text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-admin-tag { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 2px 6px; border-radius: var(--radius-pill); } .user-menu-logout { background: transparent; border: 0; cursor: pointer; color: var(--text-muted); font-size: 0.8125rem; padding: var(--space-2); border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; } .user-menu-logout:hover { color: var(--text); } @media (max-width: 640px) { .user-menu-name { display: none; } } /* ============================================================ Landing page ============================================================ */ .landing { display: grid; gap: var(--space-5); } .landing-hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: var(--space-3); } .landing-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; } .choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); } .choice-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-4); background: var(--surface); cursor: pointer; text-align: left; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); font-family: inherit; color: inherit; display: flex; flex-direction: column; gap: var(--space-1); min-height: 88px; touch-action: manipulation; } @media (hover: hover) { .choice-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } } .choice-card strong { font-size: 1.0625rem; font-weight: 700; } .choice-card span { font-size: 0.8125rem; color: var(--text-muted); letter-spacing: 0.05em; font-weight: 600; } .choice-card.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); } .choice-card.is-active span { color: var(--brand); } .landing-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .selection-note { color: var(--text-muted); font-size: 0.9375rem; } /* ============================================================ Scenes grid (clickable cards) ============================================================ */ .scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); } .scene-choice-card { display: flex; flex-direction: column; overflow: hidden; cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); text-decoration: none; color: inherit; position: relative; touch-action: manipulation; } @media (hover: hover) { .scene-choice-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); transform: translateY(-2px); } } .scene-choice-card:active { transform: translateY(0); } .scene-choice-image { width: 100%; height: auto; display: block; background: var(--surface-sunken); object-fit: cover; } .scene-choice-copy { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .scene-choice-copy h2 { font-size: 1.25rem; margin-bottom: var(--space-1); } .scene-choice-copy p { color: var(--text-muted); font-size: 0.875rem; } .scene-choice-cta { margin-top: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); color: var(--brand); font-weight: 600; font-size: 0.9375rem; } @media (max-width: 640px) { .scene-grid { grid-template-columns: 1fr; gap: var(--space-4); } } /* ============================================================ Lesson page ============================================================ */ .lesson-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) 0 var(--space-5); } .lesson-header h1 { margin: var(--space-1) 0 0; font-size: clamp(1.4rem, 3vw, 2rem); } .lesson-header-back { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); font-weight: 600; font-size: 0.875rem; text-decoration: none; padding: var(--space-2); margin-left: calc(var(--space-2) * -1); border-radius: var(--radius-md); min-height: 36px; } .lesson-header-back:hover { color: var(--text); background: var(--surface-sunken); } .lesson-controls { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .language-select-label { display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-soft); } .language-select-label select { padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.9375rem; font-weight: 500; cursor: pointer; min-height: 40px; } .lesson-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: var(--space-5); align-items: start; } .lesson-side { display: flex; flex-direction: column; gap: var(--space-4); } .scene { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-sunken); aspect-ratio: 1536 / 1024; box-shadow: var(--shadow-md); border: 1px solid var(--border); } .scene-art, .hotspots { position: absolute; inset: 0; width: 100%; height: 100%; } .scene-art { object-fit: cover; } .hotspots { pointer-events: none; } .hotspot-region { pointer-events: auto; cursor: pointer; fill: transparent; stroke: transparent; stroke-width: 16; stroke-linejoin: round; outline: none; transition: fill var(--transition-fast), stroke var(--transition-fast); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* Hover styles only on devices with a real hover capability (desktop) — on touch devices they cause the "tap-twice to activate" sticky-hover bug. */ @media (hover: hover) { .hotspot-region:hover { fill: rgba(255, 90, 54, 0.16); stroke: rgba(255, 90, 54, 0.5); stroke-width: 4; } } .hotspot-region:focus-visible { fill: rgba(255, 90, 54, 0.16); stroke: rgba(255, 90, 54, 0.5); stroke-width: 4; } .hotspot-region.is-active { fill: rgba(255, 90, 54, 0.22); stroke: var(--brand); stroke-width: 5; } .focus-card, .vocab-card { padding: var(--space-5); } .focus-card h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: var(--space-2) 0 var(--space-2); } .phonetic { margin: 0 0 var(--space-1); font-style: italic; color: var(--text-muted); } .native-word { margin: 0 0 var(--space-3); font-size: 0.9375rem; color: var(--text-soft); } .focus-actions { margin-top: var(--space-3); } .vocab-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } #progress-text { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); } .vocab-list { display: flex; flex-direction: column; gap: var(--space-2); } .vocab-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 0.9375rem; min-height: 48px; transition: background var(--transition-fast); } .vocab-item strong { color: var(--text); font-weight: 600; } .vocab-item span { color: var(--text-muted); font-size: 0.8125rem; } .vocab-item.is-seen { background: var(--brand-soft); } .vocab-item.is-seen strong { color: var(--brand); } @media (max-width: 920px) { .lesson-layout { grid-template-columns: 1fr; } } @media (max-width: 640px) { .lesson-header { padding: var(--space-3) 0; } .lesson-header h1 { font-size: 1.25rem; } .focus-card, .vocab-card { padding: var(--space-4); } .focus-card h2 { font-size: 1.875rem; } .vocab-item { padding: var(--space-3) var(--space-4); min-height: 52px; } } /* ============================================================ Admin section ============================================================ */ .admin-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0 var(--space-5); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); } .admin-header-left { display: flex; align-items: center; gap: var(--space-4); } .admin-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--brand); color: var(--brand-text); border-radius: var(--radius-pill); font-weight: 700; font-size: 0.875rem; text-decoration: none; } .admin-nav { display: flex; gap: var(--space-4); } .admin-nav a { color: var(--text-muted); font-weight: 500; font-size: 0.9375rem; text-decoration: none; } .admin-nav a:hover { color: var(--text); } /* ============================================================ Hotspot editor ============================================================ */ .editor-layout { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-5); padding: 0; } .editor-panel { padding: var(--space-5); } .editor-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-4); } .editor-item { width: 100%; text-align: left; background: var(--surface-sunken); border: 1px solid transparent; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); cursor: pointer; position: relative; font-family: inherit; color: inherit; font-size: 0.9375rem; transition: background var(--transition-fast), border-color var(--transition-fast); } .editor-item:hover { background: var(--surface); border-color: var(--border); } .editor-item.is-active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); } .editor-item-label { display: block; font-weight: 600; } .editor-item-id { font-size: 0.75rem; color: var(--text-soft); } .editor-item-flag { display: block; margin-top: var(--space-1); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-red); } .editor-item-row { display: flex; align-items: center; gap: var(--space-2); } .editor-item-label-wrap { flex: 1; min-width: 0; } .editor-item-review { flex-shrink: 0; background: transparent; border: 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--text-soft); transition: all var(--transition-fast); } .editor-item-review:hover { background: rgba(239, 68, 68, 0.16); color: var(--accent-red); } .editor-item.needs-review { border-left: 4px solid var(--accent-red); padding-left: calc(var(--space-4) - 4px); background: rgba(239, 68, 68, 0.08); } .editor-item.needs-review .editor-item-review { color: var(--accent-red); } .review-summary { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: rgba(239, 68, 68, 0.1); border-radius: var(--radius-md); color: var(--accent-red); font-size: 0.875rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); } .review-summary.empty { background: var(--surface-sunken); color: var(--text-muted); } .review-summary-clear { background: transparent; border: 1px solid currentColor; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; color: inherit; font-size: 0.75rem; font-weight: 700; } .editor-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); } .editor-output { width: 100%; min-height: 200px; resize: vertical; font: 12px/1.4 ui-monospace, "SF Mono", Menlo, monospace; border-radius: var(--radius-md); border: 1px solid var(--border); padding: var(--space-3); background: var(--surface-sunken); color: var(--text); margin-top: var(--space-3); } .editor-scene { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--border); } .editor-scene img, .editor-scene svg { display: block; width: 100%; height: auto; } .editor-overlay { position: absolute; inset: 0; } .editor-polygon { fill: rgba(255, 90, 54, 0.14); stroke: var(--brand); stroke-width: 3; cursor: move; } .editor-polygon.other { fill: rgba(154, 154, 163, 0.04); stroke: rgba(154, 154, 163, 0.2); pointer-events: none; } .editor-polygon.overlap { stroke: var(--accent-red); fill: rgba(239, 68, 68, 0.1); } .editor-handle { fill: var(--surface); stroke: var(--text); stroke-width: 2; cursor: move; } .editor-handle.overlap { stroke: var(--accent-red); stroke-width: 3; } .editor-hint { color: var(--text-muted); font-size: 0.875rem; margin: var(--space-3) 0 0; } .editor-overlaps { margin: var(--space-4) 0 0; display: flex; flex-direction: column; gap: var(--space-2); } .editor-overlap { padding: var(--space-3); border-radius: var(--radius-md); background: rgba(239, 68, 68, 0.08); color: var(--accent-red); font-size: 0.875rem; } .editor-overlap.none { background: var(--surface-sunken); color: var(--text-muted); } @media (max-width: 920px) { .editor-layout { grid-template-columns: 1fr; } } @media (max-width: 640px) { .editor-layout { padding: 0; } .editor-layout::before { content: "The hotspot editor is best used on a tablet or desktop."; display: block; padding: var(--space-4); border-radius: var(--radius-md); background: rgba(239, 68, 68, 0.1); color: var(--accent-red); font-weight: 600; margin-bottom: var(--space-3); } } /* ============================================================ Mobile bottom nav (only visible on phones) ============================================================ */ .bottom-nav { display: none; } @media (max-width: 640px) { .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: calc(64px + env(safe-area-inset-bottom, 0)); padding-bottom: env(safe-area-inset-bottom, 0); background: var(--surface-overlay); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); z-index: 100; align-items: stretch; justify-content: space-around; } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-muted); text-decoration: none; font-size: 0.6875rem; font-weight: 600; padding: var(--space-2); transition: color var(--transition-fast); } .bottom-nav-item.is-active { color: var(--brand); } .bottom-nav-item-icon { font-size: 1.4rem; line-height: 1; } /* Add bottom padding on body when bottom nav is visible to avoid content being hidden */ body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); } }