/* ============================================================ TIER 11A — DEEP PARENT/BUGGY MODE Travel Now traffic light, platform gap warnings, lift status. Integration: Add to All classes prefixed with t11a- ============================================================ */ /* ============================================================ CSS VARIABLES ============================================================ */ :root { --t11a-accent: #FF8C42; --t11a-accent-dim: rgba(255, 140, 66, 0.12); --t11a-accent-glow: rgba(255, 140, 66, 0.25); --t11a-green: #36B37E; --t11a-green-dim: rgba(54, 179, 126, 0.12); --t11a-green-glow: rgba(54, 179, 126, 0.25); --t11a-amber: #FFAB00; --t11a-amber-dim: rgba(255, 171, 0, 0.12); --t11a-amber-glow: rgba(255, 171, 0, 0.25); --t11a-red: #FF5630; --t11a-red-dim: rgba(255, 86, 48, 0.12); --t11a-red-glow: rgba(255, 86, 48, 0.25); --t11a-text: #E8EAED; --t11a-dim: #8B8FA3; --t11a-card: #141926; --t11a-bg: #0A0E1A; } /* ============================================================ 1. TRAVEL NOW TRAFFIC LIGHT BANNER (home screen) ============================================================ */ .t11a-travel-banner { margin: 12px 0; padding: 16px; border-radius: var(--radius, 14px); border: 1px solid var(--border, rgba(255,255,255,0.08)); background: var(--t11a-card); display: none; flex-direction: column; gap: 12px; animation: t11a-fadeIn 0.3s ease; } .t11a-travel-banner.t11a-visible { display: flex; } @keyframes t11a-fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Header row: icon + signal + label */ .t11a-travel-header { display: flex; align-items: center; gap: 12px; } .t11a-traffic-light { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background 0.4s, box-shadow 0.4s; } .t11a-traffic-light.t11a-signal-green { background: var(--t11a-green-dim); box-shadow: 0 0 16px var(--t11a-green-glow); border: 2px solid var(--t11a-green); } .t11a-traffic-light.t11a-signal-amber { background: var(--t11a-amber-dim); box-shadow: 0 0 16px var(--t11a-amber-glow); border: 2px solid var(--t11a-amber); } .t11a-traffic-light.t11a-signal-red { background: var(--t11a-red-dim); box-shadow: 0 0 16px var(--t11a-red-glow); border: 2px solid var(--t11a-red); } /* Pulsing dot inside the light */ .t11a-traffic-dot { width: 14px; height: 14px; border-radius: 50%; animation: t11a-pulse 2s ease-in-out infinite; } .t11a-signal-green .t11a-traffic-dot { background: var(--t11a-green); } .t11a-signal-amber .t11a-traffic-dot { background: var(--t11a-amber); } .t11a-signal-red .t11a-traffic-dot { background: var(--t11a-red); } @keyframes t11a-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } /* Text beside the light */ .t11a-travel-info { flex: 1; min-width: 0; } .t11a-travel-title { font-size: 14px; font-weight: 700; color: var(--t11a-text); line-height: 1.3; margin-bottom: 2px; } .t11a-travel-status { font-size: 13px; font-weight: 500; line-height: 1.3; } .t11a-travel-status.t11a-status-green { color: var(--t11a-green); } .t11a-travel-status.t11a-status-amber { color: var(--t11a-amber); } .t11a-travel-status.t11a-status-red { color: var(--t11a-red); } /* Sub-info: next window + day tip */ .t11a-travel-sub { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; } .t11a-travel-next { font-size: 12px; color: var(--t11a-dim); display: flex; align-items: center; gap: 6px; } .t11a-travel-next-icon { font-size: 14px; flex-shrink: 0; } .t11a-travel-tip { font-size: 11px; color: var(--t11a-dim); padding: 6px 10px; background: rgba(255,255,255,0.03); border-radius: 8px; border-left: 3px solid var(--t11a-accent); line-height: 1.4; } /* ============================================================ 2. PLATFORM GAP WARNING CARDS (result screen) ============================================================ */ .t11a-gap-card { margin: 12px 0; border-radius: var(--radius, 14px); overflow: hidden; animation: t11a-fadeIn 0.3s ease; } /* Severity levels */ .t11a-gap-card.t11a-gap-severe { border: 1px solid rgba(255, 86, 48, 0.3); background: var(--t11a-card); } .t11a-gap-card.t11a-gap-warning { border: 1px solid rgba(255, 171, 0, 0.2); background: var(--t11a-card); } .t11a-gap-card.t11a-gap-note { border: 1px solid var(--border, rgba(255,255,255,0.08)); background: var(--t11a-card); } /* Gap card header */ .t11a-gap-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; } .t11a-gap-severe .t11a-gap-header { background: var(--t11a-red-dim); border-bottom: 1px solid rgba(255, 86, 48, 0.2); } .t11a-gap-warning .t11a-gap-header { background: var(--t11a-amber-dim); border-bottom: 1px solid rgba(255, 171, 0, 0.15); } .t11a-gap-note .t11a-gap-header { background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); } .t11a-gap-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--t11a-text); } .t11a-gap-icon { font-size: 18px; flex-shrink: 0; } /* Badge: LARGE GAP / MIND THE GAP */ .t11a-gap-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; } .t11a-badge-red { background: var(--t11a-red-dim); color: var(--t11a-red); border: 1px solid rgba(255, 86, 48, 0.3); } .t11a-badge-amber { background: var(--t11a-amber-dim); color: var(--t11a-amber); border: 1px solid rgba(255, 171, 0, 0.25); } .t11a-badge-green { background: var(--t11a-green-dim); color: var(--t11a-green); border: 1px solid rgba(54, 179, 126, 0.25); } /* Gap body content */ .t11a-gap-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; } /* Gap measurement */ .t11a-gap-measurement { display: flex; align-items: center; gap: 12px; } .t11a-gap-number { font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .t11a-gap-severe .t11a-gap-number { color: var(--t11a-red); } .t11a-gap-warning .t11a-gap-number { color: var(--t11a-amber); } .t11a-gap-note .t11a-gap-number { color: var(--t11a-dim); } .t11a-gap-unit { font-size: 12px; color: var(--t11a-dim); line-height: 1.3; } .t11a-gap-unit strong { display: block; font-size: 13px; color: var(--t11a-text); font-weight: 600; } /* Gap visual bar */ .t11a-gap-visual { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06); overflow: hidden; position: relative; } .t11a-gap-visual-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; } .t11a-gap-severe .t11a-gap-visual-fill { background: var(--t11a-red); } .t11a-gap-warning .t11a-gap-visual-fill { background: var(--t11a-amber); } .t11a-gap-note .t11a-gap-visual-fill { background: var(--t11a-dim); } /* Warning text */ .t11a-gap-warning-text { font-size: 12px; color: var(--t11a-dim); line-height: 1.4; } .t11a-gap-severe .t11a-gap-warning-text { color: rgba(255, 86, 48, 0.8); } /* Buggy tip */ .t11a-gap-tip { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.4; color: var(--t11a-text); } .t11a-gap-tip-parent { background: rgba(255, 140, 66, 0.08); border: 1px solid rgba(255, 140, 66, 0.15); } .t11a-gap-tip-icon { font-size: 16px; flex-shrink: 0; line-height: 1.2; } /* Platform edge doors (safe stations) */ .t11a-ped-card { margin: 12px 0; padding: 12px 16px; border-radius: var(--radius, 14px); border: 1px solid rgba(54, 179, 126, 0.2); background: var(--t11a-green-dim); display: flex; align-items: center; gap: 12px; animation: t11a-fadeIn 0.3s ease; } .t11a-ped-icon { font-size: 24px; flex-shrink: 0; } .t11a-ped-text { flex: 1; min-width: 0; } .t11a-ped-title { font-size: 14px; font-weight: 700; color: var(--t11a-green); margin-bottom: 2px; } .t11a-ped-desc { font-size: 12px; color: var(--t11a-dim); line-height: 1.4; } /* ============================================================ 3. LIFT STATUS CARDS (result screen) ============================================================ */ .t11a-lift-card { margin: 12px 0; border-radius: var(--radius, 14px); overflow: hidden; animation: t11a-fadeIn 0.3s ease; } .t11a-lift-card.t11a-lift-ok { border: 1px solid rgba(54, 179, 126, 0.2); background: var(--t11a-card); } .t11a-lift-card.t11a-lift-down { border: 1px solid rgba(255, 86, 48, 0.3); background: var(--t11a-card); } .t11a-lift-card.t11a-lift-loading { border: 1px solid var(--border, rgba(255,255,255,0.08)); background: var(--t11a-card); } /* Lift header */ .t11a-lift-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; } .t11a-lift-ok .t11a-lift-header { background: var(--t11a-green-dim); border-bottom: 1px solid rgba(54, 179, 126, 0.15); } .t11a-lift-down .t11a-lift-header { background: var(--t11a-red-dim); border-bottom: 1px solid rgba(255, 86, 48, 0.2); } .t11a-lift-loading .t11a-lift-header { background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); } .t11a-lift-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--t11a-text); } .t11a-lift-icon { font-size: 18px; flex-shrink: 0; } /* Lift status badge */ .t11a-lift-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; } .t11a-lift-ok .t11a-lift-status-badge { background: var(--t11a-green-dim); color: var(--t11a-green); border: 1px solid rgba(54, 179, 126, 0.25); } .t11a-lift-down .t11a-lift-status-badge { background: var(--t11a-red-dim); color: var(--t11a-red); border: 1px solid rgba(255, 86, 48, 0.3); } /* Lift body */ .t11a-lift-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; } /* Disruption details */ .t11a-lift-disruption { padding: 10px 12px; border-radius: 10px; background: var(--t11a-red-dim); border: 1px solid rgba(255, 86, 48, 0.15); font-size: 13px; color: var(--t11a-text); line-height: 1.4; } .t11a-lift-disruption-title { font-weight: 700; color: var(--t11a-red); margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; } .t11a-lift-alternative { padding: 10px 12px; border-radius: 10px; background: rgba(255, 140, 66, 0.08); border: 1px solid rgba(255, 140, 66, 0.15); font-size: 12px; color: var(--t11a-text); line-height: 1.4; display: flex; align-items: flex-start; gap: 8px; } .t11a-lift-alt-icon { font-size: 16px; flex-shrink: 0; } /* Reliability indicator */ .t11a-lift-reliability { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t11a-dim); } .t11a-reliability-bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; } .t11a-reliability-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease; } .t11a-reliability-good .t11a-reliability-fill { background: var(--t11a-green); } .t11a-reliability-fair .t11a-reliability-fill { background: var(--t11a-amber); } .t11a-reliability-poor .t11a-reliability-fill { background: var(--t11a-red); } .t11a-reliability-label { font-size: 11px; font-weight: 600; white-space: nowrap; } .t11a-reliability-good .t11a-reliability-label { color: var(--t11a-green); } .t11a-reliability-fair .t11a-reliability-label { color: var(--t11a-amber); } .t11a-reliability-poor .t11a-reliability-label { color: var(--t11a-red); } /* Loading shimmer */ .t11a-lift-shimmer { padding: 16px; display: flex; align-items: center; gap: 12px; } .t11a-shimmer-block { height: 14px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: t11a-shimmer 1.5s infinite; } @keyframes t11a-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Lift last checked */ .t11a-lift-updated { font-size: 11px; color: var(--t11a-dim); text-align: right; padding-top: 4px; } /* ============================================================ 4. PARENT MODE PROMINENCE BOOST When parent mode is active, gap and lift cards are more prominent ============================================================ */ body.t9p-active .t11a-gap-card.t11a-gap-severe { border-color: rgba(255, 86, 48, 0.45); box-shadow: 0 0 20px rgba(255, 86, 48, 0.1); } body.t9p-active .t11a-gap-card.t11a-gap-warning { border-color: rgba(255, 171, 0, 0.35); box-shadow: 0 0 16px rgba(255, 171, 0, 0.08); } body.t9p-active .t11a-lift-card.t11a-lift-down { border-color: rgba(255, 86, 48, 0.45); box-shadow: 0 0 20px rgba(255, 86, 48, 0.1); } body.t9p-active .t11a-gap-tip-parent { display: flex; } /* Hide buggy tips when NOT in parent mode */ .t11a-gap-tip-parent { display: none; } /* ============================================================ 5. RESPONSIVE ============================================================ */ @media (min-width: 420px) { .t11a-gap-measurement { gap: 16px; } .t11a-gap-number { font-size: 32px; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .t11a-traffic-dot, .t11a-shimmer-block { animation: none; } .t11a-travel-banner, .t11a-gap-card, .t11a-ped-card, .t11a-lift-card { animation: none; } }