/* ============================================================ TIER 6A FEATURES CSS — First Out Pro Features: Fare Optimizer, Predictive Disruption, Commute Learning, Smart Last Train / Night Mode Integration: Add to the of index.html. ============================================================ */ /* ============================================================ SHARED: PRO Badge Small gold pill in top-right of premium feature cards ============================================================ */ .pro-badge-pill { display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #1a1400; background: linear-gradient(135deg, #FFD700 0%, #FFC107 50%, #FFB300 100%); padding: 3px 8px; border-radius: 10px; flex-shrink: 0; box-shadow: 0 1px 4px rgba(255, 215, 0, 0.25); } /* ============================================================ SHARED: Card patterns Common card header, layout, and animation patterns ============================================================ */ .t6a-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .t6a-card-title { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; } .t6a-card-icon { font-size: 15px; flex-shrink: 0; } /* Section spacing */ .t6a-fare-section, .t6a-disruption-section, .t6a-commute-section, .t6a-night-section { margin-bottom: 12px; } /* ============================================================ SHARED: Modal pattern ============================================================ */ .t6a-modal { position: fixed; inset: 0; background: rgba(10, 14, 26, 0.92); z-index: 900; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .t6a-modal.visible { opacity: 1; pointer-events: auto; } .t6a-modal-card { width: 100%; max-width: 520px; background: var(--bg-card); border-radius: 20px 20px 0 0; padding: 24px 20px calc(24px + var(--safe-bottom, 0px)); max-height: 80vh; overflow-y: auto; transform: translateY(20px); transition: transform 0.25s; } .t6a-modal.visible .t6a-modal-card { transform: translateY(0); } .t6a-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .t6a-modal-title { font-size: 18px; font-weight: 800; color: var(--text); } .t6a-modal-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } /* ============================================================ 1. FARE OPTIMIZER & SPENDING INTELLIGENCE Daily spend tracker, cap progress, journey modal, monthly graph ============================================================ */ .t6a-fare-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; } /* Spend counter */ .t6a-spend-counter { text-align: center; margin-bottom: 14px; } .t6a-spend-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-secondary); margin-bottom: 4px; } .t6a-spend-amount { font-size: 36px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 10px; } /* Cap progress bar */ .t6a-cap-bar { width: 100%; height: 6px; border-radius: 3px; background: var(--bg-elevated); overflow: hidden; margin-bottom: 6px; } .t6a-cap-fill { height: 100%; border-radius: 3px; background: var(--green); transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .t6a-cap-fill.high { background: var(--amber); } .t6a-cap-fill.capped { background: var(--green); animation: capPulse 1.5s ease-in-out 2; } @keyframes capPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .t6a-cap-label { font-size: 12px; color: var(--text-secondary); } .t6a-cap-hit { color: var(--green); font-weight: 700; } /* Off-peak alert */ .t6a-offpeak-alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; background: rgba(54, 179, 126, 0.06); border: 1px solid rgba(54, 179, 126, 0.15); border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 12px; color: var(--green); line-height: 1.4; } .t6a-offpeak-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; } /* Add journey button */ .t6a-add-journey-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px; border: 1.5px dashed var(--border); border-radius: var(--radius); background: transparent; font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif; color: var(--accent); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.15s; margin-bottom: 12px; } .t6a-add-journey-btn:active { background: rgba(76, 154, 255, 0.06); border-color: var(--accent); transform: scale(0.97); } /* Weekly comparison */ .t6a-week-comparison { padding: 10px 14px; background: var(--bg-elevated); border-radius: var(--radius-sm); } .t6a-week-spend { font-size: 12px; color: var(--text-secondary); margin-bottom: 3px; } .t6a-week-rec { font-size: 12px; color: var(--text-secondary); line-height: 1.4; } .t6a-week-rec.saving { color: var(--green); font-weight: 600; } /* Zone picker (in modal) */ .t6a-zone-picker { margin-bottom: 16px; } .t6a-zone-row { margin-bottom: 12px; } .t6a-zone-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-secondary); margin-bottom: 8px; display: block; } .t6a-zone-btns { display: flex; gap: 6px; } .t6a-zone-btn { flex: 1; padding: 12px 0; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); font-size: 16px; font-weight: 700; font-family: 'Inter', sans-serif; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.15s; } .t6a-zone-btn:active { transform: scale(0.95); } .t6a-zone-btn.selected { border-color: var(--accent); background: rgba(76, 154, 255, 0.12); color: var(--accent); } /* Fare preview */ .t6a-fare-preview { text-align: center; padding: 16px; background: var(--bg-elevated); border-radius: var(--radius-sm); margin-bottom: 16px; } .t6a-fare-amount { font-size: 28px; font-weight: 900; color: var(--text); } .t6a-fare-type { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } /* Confirm button */ .t6a-confirm-btn { width: 100%; padding: 14px; border: none; border-radius: var(--radius); background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; font-family: 'Inter', sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s; } .t6a-confirm-btn:active { opacity: 0.85; } /* Monthly card */ .t6a-monthly-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; } .t6a-monthly-total { font-size: 28px; font-weight: 900; color: var(--text); text-align: center; } .t6a-monthly-subtitle { font-size: 12px; color: var(--text-secondary); text-align: center; margin-bottom: 12px; } /* Monthly graph */ .t6a-monthly-graph { display: flex; align-items: flex-end; gap: 2px; height: 40px; } .t6a-month-bar { flex: 1; border-radius: 2px 2px 0 0; background: var(--accent); min-height: 3px; transition: height 0.3s; opacity: 0.6; } .t6a-month-bar.today { opacity: 1; background: var(--green); } .t6a-month-bar.future { opacity: 0.15; background: var(--text-secondary); } /* Pink reader tip */ .t6a-pink-reader { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; background: rgba(200, 100, 200, 0.06); border: 1px solid rgba(200, 100, 200, 0.18); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-secondary); line-height: 1.4; margin-top: 10px; } .t6a-pink-icon { font-size: 14px; flex-shrink: 0; } .t6a-pink-reader strong { color: #d580d5; } /* ============================================================ 2. PREDICTIVE DISRUPTION ENGINE Forecast cards, reliability scores, line disruption analysis ============================================================ */ .t6a-disruption-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; } /* Forecast line row */ .t6a-forecast-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .t6a-forecast-line + .t6a-forecast-line { border-top: 1px solid var(--border); } .t6a-forecast-line-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .t6a-forecast-line-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); } .t6a-forecast-score { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; } .t6a-forecast-score.green { color: var(--green); } .t6a-forecast-score.amber { color: var(--amber); } .t6a-forecast-score.red { color: var(--red); } /* Commute reliability */ .t6a-commute-reliability { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--bg-elevated); border-radius: var(--radius-sm); margin-top: 12px; font-size: 13px; color: var(--text-secondary); } .t6a-commute-score { font-size: 18px; font-weight: 900; } .t6a-commute-score.green { color: var(--green); } .t6a-commute-score.amber { color: var(--amber); } .t6a-commute-score.red { color: var(--red); } /* Advisory */ .t6a-disruption-advisory { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; background: rgba(255, 171, 0, 0.06); border: 1px solid rgba(255, 171, 0, 0.15); border-radius: var(--radius-sm); margin-top: 10px; font-size: 12px; color: var(--amber); line-height: 1.4; } /* Line disruption card (on result screen) */ .t6a-line-disruption { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-top: 12px; } .t6a-disruption-score-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .t6a-disruption-big-score { font-size: 36px; font-weight: 900; flex-shrink: 0; } .t6a-disruption-big-score.green { color: var(--green); } .t6a-disruption-big-score.amber { color: var(--amber); } .t6a-disruption-big-score.red { color: var(--red); } .t6a-disruption-chance { font-size: 13px; color: var(--text-secondary); line-height: 1.4; } /* Factors list */ .t6a-disruption-factors { margin-bottom: 10px; } .t6a-disruption-factor { font-size: 12px; color: var(--text-secondary); padding: 3px 0; line-height: 1.3; } /* Pattern insight */ .t6a-disruption-pattern { font-size: 12px; color: var(--text-secondary); padding: 6px 0; border-top: 1px solid var(--border); line-height: 1.4; } /* Exits screen reliability indicator */ .t6a-exits-reliability { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; } .t6a-exits-reliability-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .t6a-exits-reliability-dot.green { background: var(--green); } .t6a-exits-reliability-dot.amber { background: var(--amber); } .t6a-exits-reliability-dot.red { background: var(--red); } /* ============================================================ 3. COMMUTE LEARNING ENGINE Pattern card, insights, stats, onboarding, weekly report ============================================================ */ .t6a-commute-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; } .t6a-commute-onboarding { opacity: 0.85; } .t6a-commute-onboard-text { font-size: 13px; color: var(--text-secondary); text-align: center; margin-bottom: 12px; line-height: 1.4; } /* Onboarding progress bar */ .t6a-commute-progress { width: 100%; height: 4px; border-radius: 2px; background: var(--bg-elevated); overflow: hidden; margin-bottom: 6px; } .t6a-commute-progress-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .t6a-commute-progress-label { font-size: 11px; color: var(--text-secondary); text-align: center; } /* Pattern rows */ .t6a-commute-pattern { margin-bottom: 12px; } .t6a-pattern-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; } .t6a-pattern-row + .t6a-pattern-row { border-top: 1px solid var(--border); } .t6a-pattern-label { font-size: 12px; color: var(--text-secondary); } .t6a-pattern-value { font-size: 13px; font-weight: 700; color: var(--text); } /* Insights */ .t6a-commute-insights { margin-bottom: 12px; } .t6a-commute-insight { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; background: rgba(76, 154, 255, 0.06); border: 1px solid rgba(76, 154, 255, 0.12); border-radius: var(--radius-sm); margin-bottom: 6px; font-size: 12px; color: var(--text-secondary); line-height: 1.4; } .t6a-insight-icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; } /* Stats row */ .t6a-commute-stats { display: flex; justify-content: space-around; padding-top: 12px; border-top: 1px solid var(--border); } .t6a-stat { text-align: center; } .t6a-stat-value { font-size: 20px; font-weight: 900; color: var(--text); } .t6a-stat-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-top: 2px; } /* Weekly report */ .t6a-weekly-report { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; } .t6a-report-stats { display: flex; justify-content: space-around; margin-bottom: 12px; } .t6a-report-stat { text-align: center; } .t6a-report-stat-value { font-size: 22px; font-weight: 900; color: var(--accent); } .t6a-report-stat-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .t6a-report-stations { font-size: 12px; color: var(--text-secondary); text-align: center; } .t6a-report-stations-label { font-weight: 600; } /* ============================================================ 4. SMART LAST TRAIN / NIGHT OUT MODE Night toggle, last train countdown, night bus, first trains ============================================================ */ /* Night mode toggle button */ .t6a-night-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: all 0.2s; flex-shrink: 0; } .t6a-night-toggle:active { transform: scale(0.92); } .t6a-night-toggle.active { border-color: rgba(255, 215, 0, 0.4); background: rgba(255, 215, 0, 0.08); } .t6a-night-icon { font-size: 18px; line-height: 1; } /* Night Tube banner */ .t6a-night-tube-banner { background: linear-gradient(135deg, rgba(76, 154, 255, 0.08) 0%, rgba(76, 154, 255, 0.02) 100%); border: 1px solid rgba(76, 154, 255, 0.2); border-radius: var(--radius); padding: 16px; margin-top: 12px; } .t6a-night-tube-info { font-size: 14px; font-weight: 600; color: var(--accent); line-height: 1.4; } /* Last train banner */ .t6a-last-train-banner { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-top: 12px; transition: border-color 0.3s, background 0.3s; } .t6a-last-train-banner.green { border-color: rgba(54, 179, 126, 0.3); } .t6a-last-train-banner.amber { border-color: rgba(255, 171, 0, 0.3); background: rgba(255, 171, 0, 0.04); } .t6a-last-train-banner.red { border-color: rgba(255, 86, 48, 0.4); background: rgba(255, 86, 48, 0.04); } .t6a-last-train-banner.pulse { animation: t6aLastTrainPulse 1.2s ease-in-out infinite; } @keyframes t6aLastTrainPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 86, 48, 0.3); } 50% { box-shadow: 0 0 0 6px rgba(255, 86, 48, 0); } } .t6a-last-train-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .t6a-last-train-detail { flex: 1; } .t6a-last-train-line { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .t6a-last-train-time { font-size: 12px; color: var(--text-secondary); } /* Countdown number */ .t6a-last-train-countdown { text-align: center; flex-shrink: 0; margin-left: 16px; } .t6a-countdown-number { font-size: 36px; font-weight: 900; line-height: 1; } .t6a-last-train-countdown.green .t6a-countdown-number { color: var(--green); } .t6a-last-train-countdown.amber .t6a-countdown-number { color: var(--amber); } .t6a-last-train-countdown.red .t6a-countdown-number { color: var(--red); } .t6a-countdown-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); } /* Walk estimate */ .t6a-walk-estimate { font-size: 12px; color: var(--text-secondary); padding: 8px 12px; background: var(--bg-elevated); border-radius: var(--radius-sm); margin-bottom: 10px; text-align: center; } /* Set alarm button */ .t6a-set-alarm-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 11px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--bg-card); font-size: 13px; font-weight: 600; font-family: 'Inter', sans-serif; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.15s; margin-bottom: 8px; } .t6a-set-alarm-btn:active { background: var(--bg-card-hover); transform: scale(0.97); } .t6a-set-alarm-btn:disabled { opacity: 0.5; cursor: default; } /* Share journey button */ .t6a-share-journey-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 11px; border: 1.5px solid rgba(76, 154, 255, 0.3); border-radius: var(--radius); background: rgba(76, 154, 255, 0.06); font-size: 13px; font-weight: 600; font-family: 'Inter', sans-serif; color: var(--accent); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.15s; } .t6a-share-journey-btn:active { background: rgba(76, 154, 255, 0.12); transform: scale(0.97); } /* Missed train card */ .t6a-missed-train { background: var(--bg-card); border: 1px solid rgba(255, 86, 48, 0.3); border-radius: var(--radius); padding: 16px; margin-top: 12px; } .t6a-missed-message { font-size: 14px; color: var(--red); font-weight: 600; margin-bottom: 12px; } .t6a-backup-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-secondary); margin-bottom: 8px; } /* Night bus list */ .t6a-night-buses { margin-bottom: 12px; } .t6a-night-bus { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .t6a-night-bus + .t6a-night-bus { border-top: 1px solid var(--border); } .t6a-bus-route { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 4px 8px; border-radius: 6px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; text-align: center; flex-shrink: 0; } .t6a-bus-info { font-size: 12px; color: var(--text-secondary); } /* Uber estimate */ .t6a-uber-estimate { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-elevated); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; } /* First trains card */ .t6a-first-trains-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; } .t6a-first-train-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; } .t6a-first-train-row + .t6a-first-train-row { border-top: 1px solid var(--border); } .t6a-first-train-name { font-size: 13px; font-weight: 600; color: var(--text); } .t6a-first-train-time { font-size: 14px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; } /* Alarm notification (floating) */ .t6a-alarm-notification { position: fixed; top: calc(16px + var(--safe-top, 0px)); left: 16px; right: 16px; max-width: 520px; margin: 0 auto; z-index: 1000; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s, transform 0.3s; } .t6a-alarm-notification.visible { opacity: 1; transform: translateY(0); } .t6a-alarm-notification-content { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: var(--red); color: #fff; border-radius: var(--radius); font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(255, 86, 48, 0.3); } .t6a-alarm-dismiss { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }