/* ============================================================
TIER 5B FEATURES CSS — First Out App
Features: Signal/WiFi Dead Zone Map, Temperature by Line,
When to Leave Alerts, Near-Exit POI Discovery
Integration:
1. Add to
2. Add before
3. The JS will inject HTML as needed — no manual HTML insertion required.
4. CSS variables from the main app (--bg, --accent, etc.) are used.
============================================================ */
/* ============================================================
5. SIGNAL / WIFI DEAD ZONE MAP
Signal indicator on station results. Green phone = 4G/5G,
red crossed phone = no signal. Download reminder for dead zones.
============================================================ */
.signal-indicator {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 12px 0;
padding: 14px 16px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-card);
animation: signalFadeIn 0.3s ease-out;
}
@keyframes signalFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.signal-indicator.has-signal {
border-color: rgba(54, 179, 126, 0.3);
background: linear-gradient(135deg, rgba(54, 179, 126, 0.06) 0%, rgba(54, 179, 126, 0.02) 100%);
}
.signal-indicator.no-signal {
border-color: rgba(255, 86, 48, 0.25);
background: linear-gradient(135deg, rgba(255, 86, 48, 0.06) 0%, rgba(255, 86, 48, 0.02) 100%);
}
.signal-indicator.partial-signal {
border-color: rgba(255, 171, 0, 0.3);
background: linear-gradient(135deg, rgba(255, 171, 0, 0.06) 0%, rgba(255, 171, 0, 0.02) 100%);
}
.signal-icon {
font-size: 22px;
flex-shrink: 0;
line-height: 1;
margin-top: 1px;
}
.signal-content {
flex: 1;
min-width: 0;
}
.signal-status {
font-size: 14px;
font-weight: 700;
margin-bottom: 4px;
}
.signal-status.yes { color: var(--green); }
.signal-status.no { color: var(--red); }
.signal-status.partial { color: var(--amber); }
.signal-detail {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
.signal-download-reminder {
margin-top: 8px;
padding: 8px 12px;
border-radius: var(--radius-sm);
background: rgba(255, 86, 48, 0.08);
border-left: 3px solid var(--red);
font-size: 12px;
color: var(--text);
line-height: 1.4;
font-weight: 500;
}
.signal-operator-note {
margin-top: 8px;
font-size: 11px;
color: var(--text-muted);
line-height: 1.4;
font-style: italic;
}
.signal-tunnel-info {
margin-top: 8px;
padding: 8px 12px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.04);
font-size: 12px;
color: var(--text-secondary);
line-height: 1.4;
}
.signal-tunnel-info strong {
color: var(--text);
font-weight: 600;
}
/* ============================================================
6. TEMPERATURE BY LINE
Thermometer icon with temp estimate on station results.
Seasonal adjustments, heat warnings, cool route suggestions.
============================================================ */
.temp-indicator {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 12px 0;
padding: 14px 16px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-card);
animation: tempFadeIn 0.3s ease-out;
}
@keyframes tempFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.temp-indicator.cool {
border-color: rgba(54, 179, 126, 0.3);
background: linear-gradient(135deg, rgba(54, 179, 126, 0.06) 0%, rgba(54, 179, 126, 0.02) 100%);
}
.temp-indicator.warm {
border-color: rgba(255, 171, 0, 0.3);
background: linear-gradient(135deg, rgba(255, 171, 0, 0.06) 0%, rgba(255, 171, 0, 0.02) 100%);
}
.temp-indicator.hot {
border-color: rgba(255, 86, 48, 0.25);
background: linear-gradient(135deg, rgba(255, 86, 48, 0.06) 0%, rgba(255, 86, 48, 0.02) 100%);
}
.temp-icon {
font-size: 22px;
flex-shrink: 0;
line-height: 1;
margin-top: 1px;
}
.temp-content {
flex: 1;
min-width: 0;
}
.temp-header-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.temp-status {
font-size: 14px;
font-weight: 700;
}
.temp-status.cool { color: var(--green); }
.temp-status.warm { color: var(--amber); }
.temp-status.hot { color: var(--red); }
.temp-value {
font-size: 13px;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.08);
color: var(--text);
}
.temp-detail {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
.temp-aircon-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
margin-top: 6px;
}
.temp-aircon-badge.yes {
background: rgba(54, 179, 126, 0.15);
color: var(--green);
}
.temp-aircon-badge.no {
background: rgba(255, 86, 48, 0.12);
color: var(--red);
}
.temp-heat-warning {
margin-top: 8px;
padding: 8px 12px;
border-radius: var(--radius-sm);
background: rgba(255, 86, 48, 0.08);
border-left: 3px solid var(--red);
font-size: 12px;
color: var(--text);
line-height: 1.4;
font-weight: 500;
}
.temp-cool-route {
margin-top: 8px;
padding: 8px 12px;
border-radius: var(--radius-sm);
background: rgba(54, 179, 126, 0.08);
border-left: 3px solid var(--green);
font-size: 12px;
color: var(--text);
line-height: 1.4;
font-weight: 500;
}
.temp-cool-route strong {
color: var(--green);
}
/* ============================================================
7. WHEN TO LEAVE ALERTS
Home screen widget showing countdown to departure.
Colour-coded: green (plenty of time), amber (leave soon),
red (leave NOW).
============================================================ */
.wtl-widget {
margin: 12px 0;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-card);
overflow: hidden;
animation: wtlFadeIn 0.3s ease-out;
}
@keyframes wtlFadeIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.wtl-widget.urgency-green {
border-color: rgba(54, 179, 126, 0.3);
}
.wtl-widget.urgency-amber {
border-color: rgba(255, 171, 0, 0.3);
}
.wtl-widget.urgency-red {
border-color: rgba(255, 86, 48, 0.35);
animation: wtlPulse 1.5s ease-in-out infinite;
}
@keyframes wtlPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 86, 48, 0); }
50% { box-shadow: 0 0 0 4px rgba(255, 86, 48, 0.15); }
}
.wtl-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s;
}
.wtl-header:active {
background: var(--bg-card-hover);
}
.wtl-header-icon {
font-size: 20px;
flex-shrink: 0;
}
.wtl-header-content {
flex: 1;
min-width: 0;
}
.wtl-destination {
font-size: 12px;
color: var(--text-secondary);
font-weight: 500;
margin-bottom: 2px;
}
.wtl-countdown {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.3px;
}
.wtl-countdown.green { color: var(--green); }
.wtl-countdown.amber { color: var(--amber); }
.wtl-countdown.red { color: var(--red); }
.wtl-next-train {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
margin-top: 2px;
}
.wtl-edit-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--bg-elevated);
color: var(--text-secondary);
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.wtl-edit-btn:active {
background: var(--bg-card-hover);
}
/* Setup flow */
.wtl-setup {
margin: 12px 0;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-card);
overflow: hidden;
}
.wtl-setup-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s;
}
.wtl-setup-header:active {
background: var(--bg-card-hover);
}
.wtl-setup-icon {
font-size: 18px;
flex-shrink: 0;
}
.wtl-setup-title {
font-size: 14px;
font-weight: 600;
color: var(--accent);
flex: 1;
}
.wtl-setup-chevron {
font-size: 10px;
color: var(--text-muted);
transition: transform 0.2s;
}
.wtl-setup.expanded .wtl-setup-chevron {
transform: rotate(180deg);
}
.wtl-setup-body {
display: none;
padding: 0 16px 16px;
}
.wtl-setup.expanded .wtl-setup-body {
display: block;
}
.wtl-setup-field {
margin-bottom: 12px;
}
.wtl-setup-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted);
margin-bottom: 6px;
}
.wtl-setup-input {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
font-size: 14px;
font-family: var(--font);
font-weight: 500;
background: var(--bg-elevated);
color: var(--text);
outline: none;
transition: border-color 0.2s;
}
.wtl-setup-input:focus {
border-color: var(--accent);
}
.wtl-setup-input::placeholder {
color: var(--text-muted);
}
.wtl-autocomplete {
position: relative;
}
.wtl-autocomplete-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 180px;
overflow-y: auto;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
z-index: 10;
margin-top: 4px;
box-shadow: var(--shadow);
display: none;
}
.wtl-autocomplete-list.visible {
display: block;
}
.wtl-autocomplete-item {
padding: 10px 14px;
font-size: 14px;
font-weight: 500;
color: var(--text);
cursor: pointer;
border-bottom: 1px solid var(--border);
-webkit-tap-highlight-color: transparent;
transition: background 0.1s;
}
.wtl-autocomplete-item:last-child {
border-bottom: none;
}
.wtl-autocomplete-item:active,
.wtl-autocomplete-item:hover {
background: var(--bg-elevated);
}
.wtl-walk-time {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.04);
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 12px;
}
.wtl-walk-time-icon {
font-size: 14px;
}
.wtl-setup-actions {
display: flex;
gap: 8px;
}
.wtl-save-btn {
flex: 1;
padding: 10px 16px;
border: none;
border-radius: var(--radius-sm);
background: var(--accent);
color: #fff;
font-size: 14px;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: opacity 0.15s, transform 0.1s;
}
.wtl-save-btn:active {
opacity: 0.85;
transform: scale(0.98);
}
.wtl-clear-btn {
padding: 10px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-secondary);
font-size: 14px;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wtl-clear-btn:active {
background: var(--bg-elevated);
}
/* ============================================================
8. NEAR-EXIT POI DISCOVERY
Points of interest near tube exits. Category filter pills,
walking time, direction hints.
============================================================ */
.poi-section {
margin: 14px 0;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-card);
overflow: hidden;
animation: poiFadeIn 0.3s ease-out;
}
@keyframes poiFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.poi-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s;
}
.poi-header:active {
background: var(--bg-card-hover);
}
.poi-header-icon {
font-size: 16px;
flex-shrink: 0;
}
.poi-header-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
flex: 1;
}
.poi-header-count {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
background: var(--bg-elevated);
padding: 2px 8px;
border-radius: 10px;
}
.poi-chevron {
font-size: 10px;
color: var(--text-muted);
transition: transform 0.2s;
}
.poi-section.expanded .poi-chevron {
transform: rotate(180deg);
}
.poi-body {
display: none;
padding: 0 16px 16px;
}
.poi-section.expanded .poi-body {
display: block;
}
/* Category filter pills */
.poi-filters {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.poi-filter-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
border-radius: 20px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
font-family: var(--font);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: all 0.15s;
white-space: nowrap;
}
.poi-filter-pill:active {
transform: scale(0.96);
}
.poi-filter-pill.active {
background: rgba(76, 154, 255, 0.12);
border-color: var(--accent);
color: var(--accent);
}
.poi-filter-icon {
font-size: 13px;
}
/* POI list items */
.poi-list {
list-style: none;
}
.poi-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.poi-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.poi-item.hidden {
display: none;
}
.poi-item-icon {
font-size: 18px;
flex-shrink: 0;
width: 24px;
text-align: center;
margin-top: 1px;
}
.poi-item-info {
flex: 1;
min-width: 0;
}
.poi-item-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.poi-item-direction {
font-size: 12px;
color: var(--text-muted);
font-style: italic;
line-height: 1.3;
}
.poi-item-walk {
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
white-space: nowrap;
flex-shrink: 0;
padding: 3px 8px;
border-radius: 10px;
background: var(--bg-elevated);
margin-top: 2px;
}
.poi-item-walk.close {
color: var(--green);
background: rgba(54, 179, 126, 0.12);
}
.poi-empty {
text-align: center;
padding: 16px 0;
font-size: 13px;
color: var(--text-muted);
}