/* ============================================================ TIER 9 — PARENTS MODE CSS "The feature that no other tube app has." Targets parents with buggies/pushchairs/prams. Integration: Add to All classes prefixed with t9p- ============================================================ */ /* ============================================================ PARENTS MODE ACCENT OVERRIDE When parents mode is active, body gets .t9p-active class and we shift the accent to warm orange. ============================================================ */ body.t9p-active { --t9p-accent: #FF8C42; --t9p-accent-dim: rgba(255, 140, 66, 0.15); --t9p-accent-glow: rgba(255, 140, 66, 0.25); --t9p-warm-bg: rgba(255, 140, 66, 0.04); --t9p-warm-border: rgba(255, 140, 66, 0.12); } /* ============================================================ 1. PARENTS MODE TOGGLE (home screen) ============================================================ */ .t9p-toggle-wrap { margin: 12px 0 16px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s, border-color 0.2s; } .t9p-toggle-wrap:active { background: var(--bg-card-hover); } .t9p-toggle-wrap.t9p-on { border-color: var(--t9p-accent, #FF8C42); background: var(--t9p-accent-dim, rgba(255, 140, 66, 0.15)); } .t9p-toggle-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .t9p-toggle-icon { font-size: 22px; flex-shrink: 0; line-height: 1; } .t9p-toggle-label { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; } .t9p-toggle-sub { font-size: 11px; font-weight: 400; color: var(--text-secondary); margin-top: 2px; } .t9p-toggle-switch { width: 44px; height: 26px; border-radius: 13px; background: rgba(255,255,255,0.12); position: relative; flex-shrink: 0; transition: background 0.25s; } .t9p-toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.25s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .t9p-on .t9p-toggle-switch { background: var(--t9p-accent, #FF8C42); } .t9p-on .t9p-toggle-switch::after { transform: translateX(18px); } /* ============================================================ 2. BUGGY REPORT CARD (result screen) ============================================================ */ .t9p-report { margin: 16px 0; padding: 0; border-radius: var(--radius); border: 1px solid var(--t9p-warm-border, rgba(255, 140, 66, 0.12)); background: var(--bg-card); overflow: hidden; } .t9p-report-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--t9p-accent-dim, rgba(255, 140, 66, 0.15)); border-bottom: 1px solid var(--t9p-warm-border, rgba(255, 140, 66, 0.12)); } .t9p-report-title { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; } .t9p-report-title-icon { font-size: 18px; } .t9p-score-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 14px; font-weight: 700; line-height: 1; } .t9p-score-1, .t9p-score-2 { background: rgba(255, 86, 48, 0.15); color: var(--red); } .t9p-score-3 { background: rgba(255, 171, 0, 0.15); color: var(--amber); } .t9p-score-4, .t9p-score-5 { background: rgba(54, 179, 126, 0.15); color: var(--green); } .t9p-score-stars { letter-spacing: 1px; } /* Report grid */ .t9p-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); } .t9p-report-item { padding: 12px 14px; background: var(--bg-card); display: flex; flex-direction: column; gap: 4px; } .t9p-report-item-label { font-size: 11px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .t9p-report-item-value { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; } .t9p-report-item-value .t9p-icon-ok { color: var(--green); } .t9p-report-item-value .t9p-icon-warn { color: var(--amber); } .t9p-report-item-value .t9p-icon-bad { color: var(--red); } /* Tip box */ .t9p-tip-box { margin: 0; padding: 12px 16px; background: var(--t9p-accent-dim, rgba(255, 140, 66, 0.15)); border-top: 1px solid var(--t9p-warm-border, rgba(255, 140, 66, 0.12)); display: flex; align-items: flex-start; gap: 8px; } .t9p-tip-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .t9p-tip-text { font-size: 13px; color: var(--text); line-height: 1.5; } /* ============================================================ 3. LINE COMPARISON (exits screen) ============================================================ */ .t9p-line-compare { margin: 12px 0; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--t9p-warm-border, rgba(255, 140, 66, 0.12)); background: var(--bg-card); } .t9p-line-compare-title { font-size: 13px; font-weight: 700; color: var(--t9p-accent, #FF8C42); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .t9p-line-compare-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .t9p-line-compare-row:last-child { border-bottom: none; padding-bottom: 0; } .t9p-line-compare-row.t9p-recommended { position: relative; } .t9p-line-pip { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .t9p-line-compare-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; } .t9p-line-compare-stars { font-size: 12px; flex-shrink: 0; letter-spacing: 1px; } .t9p-line-compare-rec { font-size: 10px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; padding: 2px 6px; background: rgba(54, 179, 126, 0.12); border-radius: 4px; } /* ============================================================ 4. BABY CHANGING FINDER ============================================================ */ .t9p-changing-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 16px; margin: 8px 0; border: 1px solid var(--t9p-warm-border, rgba(255, 140, 66, 0.12)); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--t9p-accent, #FF8C42); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s; } .t9p-changing-btn:active { background: var(--bg-card-hover); } .t9p-changing-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 var(--safe-bottom, 0px); background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.25s; } .t9p-changing-modal.t9p-open { opacity: 1; pointer-events: auto; } .t9p-changing-sheet { width: 100%; max-width: 480px; max-height: 80vh; background: var(--bg-elevated); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); } .t9p-changing-modal.t9p-open .t9p-changing-sheet { transform: translateY(0); } .t9p-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); margin: 10px auto 0; flex-shrink: 0; } .t9p-sheet-header { padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .t9p-sheet-title { font-size: 17px; font-weight: 700; color: var(--text); } .t9p-sheet-close { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .t9p-sheet-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 20px; } .t9p-changing-item { padding: 14px 0; border-bottom: 1px solid var(--border); } .t9p-changing-item:last-child { border-bottom: none; } .t9p-changing-station { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .t9p-changing-location { font-size: 12px; color: var(--text-secondary); line-height: 1.4; } .t9p-changing-quality { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; font-size: 11px; color: var(--t9p-accent, #FF8C42); } /* ============================================================ 5. NEARBY FAMILY SPOTS ============================================================ */ .t9p-family-spots { margin: 12px 0; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); overflow: hidden; } .t9p-spots-header { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s; } .t9p-spots-header:active { background: var(--bg-card-hover); } .t9p-spots-title { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; } .t9p-spots-chevron { font-size: 12px; color: var(--text-secondary); transition: transform 0.25s; } .t9p-family-spots.t9p-expanded .t9p-spots-chevron { transform: rotate(180deg); } .t9p-spots-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .t9p-family-spots.t9p-expanded .t9p-spots-body { max-height: 600px; } .t9p-spot-item { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; align-items: flex-start; gap: 10px; } .t9p-spot-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; } .t9p-spot-info { flex: 1; min-width: 0; } .t9p-spot-name { font-size: 14px; font-weight: 600; color: var(--text); } .t9p-spot-detail { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; } .t9p-spot-walk { font-size: 11px; font-weight: 600; color: var(--t9p-accent, #FF8C42); flex-shrink: 0; white-space: nowrap; } /* ============================================================ 6. BUGGY-FRIENDLY ROUTES (home screen) ============================================================ */ .t9p-routes-section { margin: 16px 0; } .t9p-routes-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .t9p-route-card { padding: 14px 16px; margin-bottom: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s, border-color 0.15s; } .t9p-route-card:active { background: var(--bg-card-hover); } .t9p-route-card.t9p-expanded { border-color: var(--t9p-warm-border, rgba(255, 140, 66, 0.12)); } .t9p-route-top { display: flex; align-items: center; gap: 10px; } .t9p-route-emoji { font-size: 22px; flex-shrink: 0; } .t9p-route-info { flex: 1; min-width: 0; } .t9p-route-name { font-size: 14px; font-weight: 600; color: var(--text); } .t9p-route-station { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .t9p-route-score { flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; } .t9p-route-detail { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .t9p-route-card.t9p-expanded .t9p-route-detail { max-height: 400px; } .t9p-route-detail-inner { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border); } .t9p-route-tip { font-size: 13px; color: var(--text); line-height: 1.5; margin-bottom: 6px; } .t9p-route-tip:last-child { margin-bottom: 0; } /* ============================================================ 7. PARENT TIPS CAROUSEL (home screen) ============================================================ */ .t9p-tips-carousel { margin: 12px 0; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--t9p-warm-border, rgba(255, 140, 66, 0.12)); background: var(--t9p-accent-dim, rgba(255, 140, 66, 0.15)); position: relative; min-height: 80px; } .t9p-tips-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--t9p-accent, #FF8C42); margin-bottom: 8px; } .t9p-tip-carousel-text { font-size: 14px; color: var(--text); line-height: 1.5; transition: opacity 0.3s; } .t9p-tips-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } .t9p-tips-dots { display: flex; gap: 4px; } .t9p-tips-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: background 0.2s; } .t9p-tips-dot.t9p-dot-active { background: var(--t9p-accent, #FF8C42); } .t9p-tips-more-btn { font-size: 12px; font-weight: 600; color: var(--t9p-accent, #FF8C42); background: none; border: none; padding: 4px 0; cursor: pointer; font-family: var(--font); -webkit-tap-highlight-color: transparent; } /* All tips expanded */ .t9p-all-tips { margin: 12px 0; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .t9p-all-tips.t9p-expanded { max-height: 2000px; } .t9p-all-tips-inner { padding: 16px; } .t9p-all-tips-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; } .t9p-all-tip-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; } .t9p-all-tip-item:last-child { border-bottom: none; padding-bottom: 0; } .t9p-all-tip-bullet { color: var(--t9p-accent, #FF8C42); flex-shrink: 0; font-size: 14px; } /* ============================================================ 8. QUIET TIMES INDICATOR (result screen) ============================================================ */ .t9p-quiet-time { margin: 8px 0; padding: 10px 14px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; line-height: 1.4; } .t9p-quiet-good { background: rgba(54, 179, 126, 0.1); border: 1px solid rgba(54, 179, 126, 0.15); color: var(--green); } .t9p-quiet-warn { background: rgba(255, 171, 0, 0.1); border: 1px solid rgba(255, 171, 0, 0.15); color: var(--amber); } .t9p-quiet-icon { font-size: 16px; flex-shrink: 0; } /* ============================================================ 9. EMERGENCY / ESSENTIALS CARD ============================================================ */ .t9p-essentials { margin: 12px 0; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); overflow: hidden; } .t9p-essentials-header { padding: 12px 16px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); background: var(--bg-elevated); } .t9p-essentials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); } .t9p-essential-item { padding: 10px 14px; background: var(--bg-card); } .t9p-essential-label { font-size: 10px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .t9p-essential-value { font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.3; } .t9p-essential-na { color: var(--text-secondary); font-style: italic; } /* ============================================================ 10. COMMUNITY NOTES (result screen) ============================================================ */ .t9p-notes-section { margin: 12px 0; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); overflow: hidden; } .t9p-notes-header { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; } .t9p-notes-title { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; } .t9p-add-note-btn { font-size: 12px; font-weight: 600; color: var(--t9p-accent, #FF8C42); background: none; border: 1px solid var(--t9p-warm-border, rgba(255, 140, 66, 0.12)); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-family: var(--font); -webkit-tap-highlight-color: transparent; } .t9p-note-item { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; align-items: flex-start; gap: 8px; } .t9p-note-icon { font-size: 14px; flex-shrink: 0; margin-top: 2px; } .t9p-note-text { font-size: 13px; color: var(--text); line-height: 1.5; flex: 1; } .t9p-note-meta { font-size: 11px; color: var(--text-secondary); margin-top: 3px; } /* Add note form */ .t9p-add-note-form { padding: 12px 16px; border-top: 1px solid var(--border); display: none; } .t9p-add-note-form.t9p-visible { display: block; } .t9p-note-textarea { width: 100%; min-height: 70px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-family: var(--font); font-size: 13px; resize: vertical; outline: none; transition: border-color 0.2s; } .t9p-note-textarea:focus { border-color: var(--t9p-accent, #FF8C42); } .t9p-note-textarea::placeholder { color: var(--text-secondary); } .t9p-note-submit { margin-top: 8px; padding: 8px 16px; border: none; border-radius: 8px; background: var(--t9p-accent, #FF8C42); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s; } .t9p-note-submit:active { opacity: 0.8; } /* ============================================================ 11. LINE RANKING SECTION (home screen) ============================================================ */ .t9p-line-ranking { margin: 16px 0; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); overflow: hidden; } .t9p-line-ranking-header { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; -webkit-tap-highlight-color: transparent; } .t9p-line-ranking-header:active { background: var(--bg-card-hover); } .t9p-line-ranking-title { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; } .t9p-line-ranking-chevron { font-size: 12px; color: var(--text-secondary); transition: transform 0.25s; } .t9p-line-ranking.t9p-expanded .t9p-line-ranking-chevron { transform: rotate(180deg); } .t9p-line-ranking-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .t9p-line-ranking.t9p-expanded .t9p-line-ranking-body { max-height: 800px; } .t9p-rank-item { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; } .t9p-rank-pos { font-size: 14px; font-weight: 800; color: var(--text-secondary); width: 22px; text-align: center; flex-shrink: 0; } .t9p-rank-pip { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .t9p-rank-info { flex: 1; min-width: 0; } .t9p-rank-name { font-size: 14px; font-weight: 600; color: var(--text); } .t9p-rank-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; } .t9p-rank-score { flex-shrink: 0; font-size: 13px; font-weight: 700; } /* ============================================================ RAIN SHELTER INDICATOR ============================================================ */ .t9p-rain { margin: 8px 0; padding: 10px 14px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text); } /* ============================================================ GENERAL HELPERS ============================================================ */ .t9p-hidden { display: none !important; } /* Slightly warmer card backgrounds when parents mode is active */ body.t9p-active .t9p-report, body.t9p-active .t9p-family-spots, body.t9p-active .t9p-notes-section, body.t9p-active .t9p-essentials { border-color: var(--t9p-warm-border); } /* Responsive: ensure cards don't break on narrow screens */ @media (max-width: 340px) { .t9p-report-grid { grid-template-columns: 1fr; } .t9p-essentials-grid { grid-template-columns: 1fr; } }