/* ============================================================ TIER 10A — FEATURES CSS Station Ratings & Reviews, Reading Time Calculator, Multi-Language Station Announcements Integration: Add to All classes prefixed with t10a- ============================================================ */ /* ============================================================ CSS VARIABLES (scoped) ============================================================ */ :root { --t10a-bg: #0A0E1A; --t10a-card: #141926; --t10a-accent: #4C9AFF; --t10a-green: #36B37E; --t10a-amber: #FFAB00; --t10a-red: #FF5630; --t10a-text: #E8EAED; --t10a-dim: #8B8FA3; --t10a-border: rgba(255,255,255,0.08); --t10a-card-hover: #1C2137; --t10a-accent-dim: rgba(76, 154, 255, 0.12); --t10a-accent-glow: rgba(76, 154, 255, 0.25); } /* ============================================================ SHARED: CARD BASE ============================================================ */ .t10a-card { margin: 12px 0; padding: 0; background: var(--t10a-card); border: 1px solid var(--t10a-border); border-radius: 14px; overflow: hidden; } .t10a-card-header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--t10a-border); } .t10a-card-icon { font-size: 18px; line-height: 1; } .t10a-card-title { font-size: 14px; font-weight: 700; color: var(--t10a-text); flex: 1; } .t10a-card-badge { font-size: 11px; font-weight: 600; color: var(--t10a-dim); background: rgba(255,255,255,0.06); padding: 3px 8px; border-radius: 20px; } /* ============================================================ SHARED: BUTTONS ============================================================ */ .t10a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 10px; border: none; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .t10a-btn-accent { background: var(--t10a-accent); color: #fff; } .t10a-btn-accent:active { background: #3A88ED; transform: scale(0.97); } .t10a-btn-dim { background: rgba(255,255,255,0.06); color: var(--t10a-dim); } .t10a-btn-dim:active { background: rgba(255,255,255,0.1); } .t10a-btn-full { width: 100%; } .t10a-btn-home { width: 100%; background: var(--t10a-card); color: var(--t10a-text); border: 1px solid var(--t10a-border); padding: 14px 16px; border-radius: 14px; font-size: 14px; } .t10a-btn-home:active { background: var(--t10a-card-hover); } .t10a-home-btn-wrap { margin: 8px 0; } /* ============================================================ SHARED: OVERLAYS & MODALS ============================================================ */ .t10a-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); z-index: 9999; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.25s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .t10a-overlay-visible { opacity: 1; } .t10a-modal { background: var(--t10a-card); border-radius: 20px 20px 0 0; width: 100%; max-width: 480px; max-height: 85vh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); } .t10a-overlay-visible .t10a-modal { transform: translateY(0); } .t10a-modal-tall { max-height: 90vh; } .t10a-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--t10a-border); flex-shrink: 0; } .t10a-modal-title { font-size: 17px; font-weight: 700; color: var(--t10a-text); } .t10a-modal-close { width: 32px; height: 32px; border: none; background: rgba(255,255,255,0.06); color: var(--t10a-dim); border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .t10a-modal-close:active { background: rgba(255,255,255,0.12); } .t10a-modal-body { padding: 16px 20px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .t10a-modal-scroll { overflow-y: auto; flex: 1; min-height: 0; } /* ============================================================ SHARED: INPUTS & LABELS ============================================================ */ .t10a-input-label { display: block; font-size: 12px; font-weight: 600; color: var(--t10a-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .t10a-section-label { font-size: 12px; font-weight: 700; color: var(--t10a-dim); text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 10px; } .t10a-textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--t10a-border); border-radius: 10px; padding: 12px; color: var(--t10a-text); font-family: inherit; font-size: 14px; resize: none; transition: border-color 0.2s; } .t10a-textarea:focus { outline: none; border-color: var(--t10a-accent); } .t10a-char-count { text-align: right; font-size: 11px; color: var(--t10a-dim); margin-top: 4px; } .t10a-empty { text-align: center; color: var(--t10a-dim); font-size: 14px; padding: 32px 16px; } /* ============================================================ 1. STATION RATINGS & REVIEWS ============================================================ */ /* Star rating */ .t10a-stars { display: inline-flex; gap: 4px; } .t10a-star { font-size: 22px; color: var(--t10a-dim); transition: color 0.15s, transform 0.15s; -webkit-tap-highlight-color: transparent; } .t10a-star-filled { color: var(--t10a-amber); } .t10a-star:active { transform: scale(1.2); } /* Overall rating row */ .t10a-ratings-body { padding: 16px; } .t10a-overall-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .t10a-overall-score { font-size: 32px; font-weight: 800; color: var(--t10a-amber); line-height: 1; } .t10a-overall-stars-wrap { display: flex; align-items: center; } /* Category breakdown grid */ .t10a-cat-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .t10a-cat-item { display: grid; grid-template-columns: 120px 1fr 36px; align-items: center; gap: 8px; } .t10a-cat-label { font-size: 12px; font-weight: 600; color: var(--t10a-dim); white-space: nowrap; } .t10a-cat-bar-wrap { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; } .t10a-cat-bar { height: 100%; background: linear-gradient(90deg, var(--t10a-accent), var(--t10a-green)); border-radius: 3px; transition: width 0.5s ease; } .t10a-cat-val { font-size: 12px; font-weight: 700; color: var(--t10a-text); text-align: right; } /* Review cards */ .t10a-reviews-section { margin-top: 4px; } .t10a-review-card { padding: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--t10a-border); border-radius: 10px; margin-bottom: 8px; } .t10a-review-text { font-size: 13px; color: var(--t10a-text); line-height: 1.5; margin-bottom: 8px; } .t10a-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .t10a-review-badge { font-size: 10px; font-weight: 600; color: var(--t10a-accent); background: var(--t10a-accent-dim); padding: 2px 8px; border-radius: 20px; } .t10a-review-time { font-size: 10px; color: var(--t10a-dim); margin-left: auto; } /* Rating modal */ .t10a-rate-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--t10a-border); } .t10a-rate-row:last-of-type { border-bottom: none; } .t10a-rate-label { font-size: 14px; font-weight: 600; color: var(--t10a-text); } .t10a-rate-stars { display: flex; align-items: center; } .t10a-review-input-wrap { margin: 16px 0; } /* Leaderboard */ .t10a-leader-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--t10a-border); } .t10a-leader-row:last-child { border-bottom: none; } .t10a-leader-medal { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; } .t10a-rank { font-size: 14px; font-weight: 700; color: var(--t10a-dim); } .t10a-leader-info { flex: 1; min-width: 0; } .t10a-leader-name { font-size: 14px; font-weight: 700; color: var(--t10a-text); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .t10a-leader-cats { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; } .t10a-leader-cat-pill { font-size: 10px; color: var(--t10a-dim); background: rgba(255,255,255,0.04); padding: 1px 6px; border-radius: 10px; } .t10a-leader-score { text-align: right; flex-shrink: 0; } .t10a-leader-score-val { display: block; font-size: 18px; font-weight: 800; color: var(--t10a-amber); line-height: 1.2; } .t10a-leader-score-stars { display: block; font-size: 10px; color: var(--t10a-amber); letter-spacing: -1px; } /* Exit badge (inline on exits list) */ .t10a-exit-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--t10a-amber); background: rgba(255, 171, 0, 0.12); padding: 3px 10px; border-radius: 20px; margin-left: 8px; vertical-align: middle; } /* ============================================================ 2. READING TIME CALCULATOR ============================================================ */ .t10a-reading-body { padding: 16px; } .t10a-reading-controls { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; } .t10a-control-group { display: flex; flex-direction: column; } /* Speed toggle */ .t10a-speed-toggle { display: flex; gap: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--t10a-border); } .t10a-speed-btn { flex: 1; padding: 10px 8px; border: none; background: transparent; color: var(--t10a-dim); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent; } .t10a-speed-btn.t10a-active { background: var(--t10a-accent); color: #fff; } .t10a-speed-btn:not(.t10a-active):active { background: rgba(255,255,255,0.06); } /* Stops counter */ .t10a-stops-row { display: flex; align-items: center; gap: 16px; justify-content: center; } .t10a-stops-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--t10a-border); background: rgba(255,255,255,0.04); color: var(--t10a-text); font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; -webkit-tap-highlight-color: transparent; } .t10a-stops-btn:active { background: var(--t10a-accent-dim); border-color: var(--t10a-accent); } .t10a-stops-val { font-size: 28px; font-weight: 800; color: var(--t10a-text); min-width: 40px; text-align: center; } /* Results grid */ .t10a-reading-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } .t10a-reading-stat { text-align: center; padding: 12px 8px; background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px solid var(--t10a-border); } .t10a-reading-stat-val { font-size: 22px; font-weight: 800; color: var(--t10a-accent); line-height: 1.2; } .t10a-reading-stat-label { font-size: 10px; font-weight: 600; color: var(--t10a-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; } /* Progress bar */ .t10a-progress-wrap { margin-bottom: 16px; } .t10a-progress-label { font-size: 11px; font-weight: 600; color: var(--t10a-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .t10a-progress-bar { height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; } .t10a-progress-fill { height: 100%; background: linear-gradient(90deg, var(--t10a-green), var(--t10a-accent)); border-radius: 4px; transition: width 0.5s ease; } .t10a-progress-hint { font-size: 12px; color: var(--t10a-dim); margin-top: 6px; font-style: italic; } /* Reading Mode overlay */ .t10a-reading-overlay { background: rgba(0, 0, 0, 0.92); } .t10a-reading-screen { width: 100%; max-width: 400px; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; } .t10a-reading-screen-header { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 48px; font-size: 16px; font-weight: 700; color: var(--t10a-dim); } .t10a-reading-timer-wrap { text-align: center; margin-bottom: 32px; } .t10a-reading-timer { font-size: 64px; font-weight: 800; color: var(--t10a-text); font-variant-numeric: tabular-nums; letter-spacing: -2px; transition: color 0.3s; } .t10a-reading-timer.t10a-reading-done { color: var(--t10a-green); font-size: 48px; } .t10a-reading-timer-label { font-size: 14px; color: var(--t10a-dim); margin-top: 4px; } /* Circular progress */ .t10a-reading-circle-wrap { width: 140px; height: 140px; margin-bottom: 32px; } .t10a-reading-circle { width: 100%; height: 100%; transform: rotate(-90deg); } .t10a-circle-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 6; } .t10a-circle-fg { fill: none; stroke: var(--t10a-accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear; } .t10a-reading-hint { font-size: 14px; color: var(--t10a-dim); text-align: center; margin-bottom: 24px; } /* ============================================================ 3. MULTI-LANGUAGE ANNOUNCEMENTS ============================================================ */ /* Language selector on home screen */ .t10a-lang-selector-wrap { margin: 8px 0; padding: 14px 16px; background: var(--t10a-card); border: 1px solid var(--t10a-border); border-radius: 14px; display: flex; align-items: center; gap: 12px; } .t10a-lang-selector-label { font-size: 13px; font-weight: 600; color: var(--t10a-dim); white-space: nowrap; } .t10a-lang-flags { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; } .t10a-flag-btn { width: 40px; height: 36px; border: 2px solid transparent; background: rgba(255,255,255,0.04); border-radius: 8px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; -webkit-tap-highlight-color: transparent; } .t10a-flag-btn:active { transform: scale(0.92); } .t10a-flag-btn.t10a-flag-active { border-color: var(--t10a-accent); background: var(--t10a-accent-dim); } .t10a-flag-btn-lg { width: auto; padding: 6px 12px; flex-direction: column; gap: 2px; } .t10a-flag-label { font-size: 9px; font-weight: 600; color: var(--t10a-dim); } .t10a-flag-btn-lg.t10a-flag-active .t10a-flag-label { color: var(--t10a-accent); } .t10a-modal-lang-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--t10a-border); } /* Language card on result */ .t10a-lang-body { padding: 16px; } .t10a-lang-station { padding: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--t10a-border); border-radius: 12px; text-align: center; margin-bottom: 8px; } .t10a-lang-station-label { font-size: 11px; font-weight: 600; color: var(--t10a-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .t10a-lang-station-name { font-size: 24px; font-weight: 800; color: var(--t10a-text); line-height: 1.3; margin-bottom: 6px; } .t10a-lang-phonetic { font-size: 13px; color: var(--t10a-accent); font-style: italic; } /* Phrase groups */ .t10a-phrase-group { margin-bottom: 8px; } .t10a-phrase-card { padding: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--t10a-border); border-radius: 10px; margin-bottom: 6px; } .t10a-phrase-card-lg { padding: 14px; margin-bottom: 8px; } .t10a-phrase-en { font-size: 12px; font-weight: 600; color: var(--t10a-dim); margin-bottom: 4px; } .t10a-phrase-trans { font-size: 16px; font-weight: 700; color: var(--t10a-text); line-height: 1.4; } .t10a-phrase-card-lg .t10a-phrase-trans { font-size: 18px; } .t10a-phrase-phonetic { font-size: 12px; color: var(--t10a-accent); margin-top: 4px; font-style: italic; } /* ============================================================ RESPONSIVE / SAFE AREA ============================================================ */ @media (min-width: 480px) { .t10a-modal { border-radius: 20px; margin-bottom: 24px; } .t10a-overlay { align-items: center; } .t10a-reading-screen { min-height: auto; padding: 48px 32px; } } /* ============================================================ ANIMATIONS ============================================================ */ @keyframes t10a-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .t10a-card { animation: t10a-fadeIn 0.3s ease; } .t10a-leader-row { animation: t10a-fadeIn 0.3s ease backwards; } .t10a-leader-row:nth-child(2) { animation-delay: 0.05s; } .t10a-leader-row:nth-child(3) { animation-delay: 0.1s; } .t10a-leader-row:nth-child(4) { animation-delay: 0.15s; } .t10a-leader-row:nth-child(5) { animation-delay: 0.2s; }