/*
* style.css — RailRadar Unified Stylesheet
*
* Theme: Clean light — white, grey, black, blue (#3b82f6), orange (#c2590a)
* No gradients. Flat, crisp, minimal. WCAG AA contrast compliant.
*
* Contrast-safe palette decisions:
* --accent #9a3d00 (deep burnt orange — 7.0:1 on white ✓)
* --accent-bg #b84500 (button fill — white text = 5.5:1 ✓)
* --muted #595959 (darkened from #888 — 7:1 on white ✓)
* --green #166534 (dark green — 7:1 on light green bg ✓)
* --red #991b1b (dark red — 7:1 on light red bg ✓)
* --yellow #854d0e (dark amber — 7:1 on light yellow bg ✓)
* --blue #1d4ed8 (dark blue — 7:1 on light blue bg ✓)
*
* Fonts:
* Display/UI → Rajdhani
* Mono/body → JetBrains Mono
*
* Import in every page :
*
*
*/
/* ══════════════════════════════════════════════════════════════════════════
DESIGN TOKENS
══════════════════════════════════════════════════════════════════════════ */
:root {
/* Backgrounds */
--bg: #ffffff;
--surface: #f5f5f5;
--surface2: #eeeeee;
--surface3: #e5e5e5;
/* Accent — #c2590a is #f97316 darkened enough for 4.6:1 on white (AA ✓) */
--accent: #9a3d00; /* text/icon on white — 7.0:1 ✓ */
--accent-bg: #b84500; /* button/fill bg — white text = 5.5:1 ✓ */
--accent2: #8a3600; /* hover on fills — white text = 6.2:1 ✓ */
/* Semantic colors — all AA-safe on their respective light tint backgrounds */
--blue: #1d4ed8; /* on #eff6ff — 7.2:1 ✓ */
--green: #166534; /* on #f0fdf4 — 7.5:1 ✓ */
--red: #991b1b; /* on #fef2f2 — 7.2:1 ✓ */
--yellow: #854d0e; /* on #fefce8 — 6.6:1 ✓ */
/* Text */
--text: #111111; /* 18.1:1 on white ✓ */
--text2: #3a3a3a; /* 11.5:1 on white ✓ */
--muted: #595959; /* 7.0:1 on white ✓ */
/* Borders */
--border: #d4d4d4;
--border2: #b5b5b5;
/* Typography */
--font-display: 'Rajdhani', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Radius scale */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 18px;
--r-2xl: 24px;
}
/* ══════════════════════════════════════════════════════════════════════════
RESET & BASE
══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-mono);
font-size: 15px;
line-height: 1.55;
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Subtle rail track decoration */
body::before {
content: '';
position: fixed;
top: 0; left: 50%;
transform: translateX(-50%);
width: 2px; height: 100vh;
background: repeating-linear-gradient(
to bottom,
var(--border) 0px, var(--border) 28px,
transparent 28px, transparent 48px
);
opacity: 0.6;
z-index: 0;
pointer-events: none;
}
/* ══════════════════════════════════════════════════════════════════════════
LAYOUT
══════════════════════════════════════════════════════════════════════════ */
.container {
max-width: 900px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 1;
}
.page {
max-width: 960px;
margin: 0 auto;
padding: 0 20px 60px;
position: relative;
z-index: 1;
}
/* ══════════════════════════════════════════════════════════════════════════
SESSION BAR
Contrast targets: text on tinted background, all AA ✓
active: --green #166534 on #f0fdf4 — 7.5:1 ✓
refreshing: --accent #c2590a on #fff7ed — 5.8:1 ✓
initializing: --yellow #854d0e on #fefce8 — 6.6:1 ✓
error: --red #991b1b on #fef2f2 — 7.2:1 ✓
══════════════════════════════════════════════════════════════════════════ */
#sessionBar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
padding: 7px 20px;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
transition: transform 0.3s ease, background 0.3s;
transform: translateY(-100%);
}
#sessionBar.show { transform: translateY(0); }
#sessionBar.initializing { background: #fefce8; border-bottom: 1px solid #ca8a04; color: var(--yellow); }
#sessionBar.active { background: #f0fdf4; border-bottom: 1px solid #4ade80; color: #000000; }
#sessionBar.refreshing { background: #fff7ed; border-bottom: 1px solid #fb923c; color: var(--accent); }
#sessionBar.error { background: #fef2f2; border-bottom: 1px solid #f87171; color: var(--red); }
.session-dot, .sbar-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
animation: pulse 1.8s infinite;
}
/* No opacity reduction — keep full contrast on expiry text */
#sessionExpiry {
margin-left: auto;
font-size: 0.68rem;
/* removed opacity:0.6 — caused contrast failure */
}
/* ══════════════════════════════════════════════════════════════════════════
SESSION EXPIRED OVERLAY
══════════════════════════════════════════════════════════════════════════ */
#expiredOverlay {
display: none;
position: fixed; inset: 0;
background: rgba(255,255,255,0.94);
backdrop-filter: blur(6px);
z-index: 9000;
align-items: center; justify-content: center;
}
#expiredOverlay.show { display: flex; }
.expired-box {
background: var(--bg);
border: 1px solid var(--border2);
border-radius: 20px;
padding: 44px 52px;
text-align: center;
max-width: 420px;
box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
.expired-box h2 {
font-family: var(--font-display);
font-size: 1.8rem; font-weight: 700;
letter-spacing: 0.02em;
margin: 14px 0 10px;
color: var(--text);
}
.expired-box p {
color: var(--text2);
font-size: 0.84rem;
line-height: 1.65;
margin-bottom: 24px;
}
/* ══════════════════════════════════════════════════════════════════════════
LOADING SCREEN
══════════════════════════════════════════════════════════════════════════ */
#loadingScreen {
position: fixed; inset: 0;
background: var(--bg);
z-index: 500;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 18px;
transition: opacity 0.4s;
}
#loadingScreen.hidden { opacity: 0; pointer-events: none; }
.loading-icon { font-size: 3rem; animation: rock 1s ease-in-out infinite alternate; }
@keyframes rock { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.loading-text {
font-family: var(--font-display);
font-size: 1.15rem; font-weight: 600;
letter-spacing: 0.04em;
color: var(--text2); /* 11.5:1 ✓ */
}
.loading-bar {
width: 200px; height: 3px;
background: var(--border);
border-radius: 2px; overflow: hidden;
}
.loading-bar-fill {
height: 100%; background: var(--accent-bg); border-radius: 2px;
animation: loadbar 1.4s ease-in-out infinite;
}
@keyframes loadbar {
0% { width: 0%; margin-left: 0; }
50% { width: 60%; margin-left: 20%; }
100% { width: 0%; margin-left: 100%; }
}
/* ══════════════════════════════════════════════════════════════════════════
HEADER / LOGO
══════════════════════════════════════════════════════════════════════════ */
header { padding: 68px 0 32px; text-align: center; }
.logo-icon {
width: 54px; height: 54px;
background: var(--accent-bg);
border-radius: 13px;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
margin: 0 auto 16px;
box-shadow: 0 4px 16px rgba(249,115,22,0.25);
}
h1 {
font-family: var(--font-display);
font-size: clamp(2.6rem, 6vw, 4.2rem);
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1;
color: var(--text);
}
/* "Radar" span — --accent (#c2590a) on white = 4.6:1 ✓ */
h1 span { color: var(--accent); }
/* Subtitle — darkened muted (#595959) on white = 7:1 ✓ */
.subtitle {
font-family: var(--font-mono);
color: var(--muted);
font-size: 0.72rem;
letter-spacing: 0.12em;
margin-top: 10px;
text-transform: uppercase;
}
/* ══════════════════════════════════════════════════════════════════════════
TOPBAR (results.php)
══════════════════════════════════════════════════════════════════════════ */
.topbar {
display: flex; align-items: center; gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--border);
}
.back-btn {
display: flex; align-items: center; gap: 6px;
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--r-md); padding: 8px 16px;
color: var(--text2); text-decoration: none;
font-family: var(--font-mono);
font-size: 0.78rem; letter-spacing: 0.02em;
transition: border-color 0.2s, color 0.2s;
white-space: nowrap;
}
.back-btn:hover { border-color: var(--accent); color: var(--accent); }
.topbar-logo {
font-family: var(--font-display);
font-weight: 700; font-size: 1.25rem;
letter-spacing: 0.02em;
text-decoration: none; color: var(--text);
display: flex; align-items: center; gap: 8px;
}
.topbar-logo span { color: var(--accent); }
/* ══════════════════════════════════════════════════════════════════════════
TAB BAR
Inactive tab: --muted #595959 on --surface #f5f5f5 = 7.0:1 ✓
Active tab: #ffffff on --accent-bg #b84500 = 5.5:1 ✓
══════════════════════════════════════════════════════════════════════════ */
.tab-bar {
display: flex; gap: 4px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 13px;
padding: 4px;
margin-top: 32px;
}
.tab-btn {
flex: 1;
padding: 12px 20px;
background: transparent; border: none;
color: var(--muted); /* 7:1 on #f5f5f5 ✓ */
font-family: var(--font-display);
font-size: 1rem; font-weight: 700; letter-spacing: 0.03em;
cursor: pointer; border-radius: 10px;
transition: all 0.2s;
}
/* Active: white on #c2590a = 4.6:1 ✓ */
.tab-btn.active { color: #ffffff; background: var(--accent-bg); }
.tab-btn:not(.active):hover { color: var(--text); background: var(--surface2); }
/* ══════════════════════════════════════════════════════════════════════════
PANELS
══════════════════════════════════════════════════════════════════════════ */
.tab-panel { display: none; animation: fadeUp 0.25s ease; }
.tab-panel.active { display: block; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ══════════════════════════════════════════════════════════════════════════
CARD
══════════════════════════════════════════════════════════════════════════ */
.card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 18px;
padding: 32px;
margin-top: 24px;
}
/* Card title: --accent #9a3d00 on white = 7.0:1 ✓ */
.card-title {
font-family: var(--font-display);
font-size: 1.1rem; font-weight: 700;
color: var(--accent);
letter-spacing: 0.06em; text-transform: uppercase;
margin-bottom: 24px;
display: flex; align-items: center; gap: 10px;
}
.card-title::before {
content: ''; display: block;
width: 4px; height: 20px;
background: var(--accent-bg); border-radius: 2px;
}
/* ══════════════════════════════════════════════════════════════════════════
FORM FIELDS
field-label: --muted #595959 on white = 7:1 ✓
══════════════════════════════════════════════════════════════════════════ */
.field-label {
font-family: var(--font-mono);
font-size: 0.7rem; color: var(--muted);
letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px;
}
.search-wrap { position: relative; }
.search-icon {
position: absolute; left: 14px; top: 50%;
transform: translateY(-50%); font-size: 16px;
pointer-events: none; z-index: 1;
}
.search-input {
width: 100%;
padding: 13px 44px 13px 44px;
background: var(--bg);
border: 1.5px solid var(--border2);
border-radius: 10px;
color: var(--text);
font-family: var(--font-mono);
font-size: 0.88rem;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(194,89,10,0.12);
}
/* Placeholder: --muted #595959 on white = 7:1 ✓ */
.search-input::placeholder { color: var(--muted); }
.search-input:disabled { opacity: 0.45; cursor: not-allowed; }
.input-spinner {
position: absolute; right: 14px; top: 50%;
transform: translateY(-50%);
width: 15px; height: 15px;
border: 2px solid var(--border2);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.65s linear infinite;
display: none;
}
.input-spinner.show { display: block; }
/* ══════════════════════════════════════════════════════════════════════════
DROPDOWN
══════════════════════════════════════════════════════════════════════════ */
.dropdown {
position: absolute;
top: calc(100% + 6px); left: 0; right: 0;
background: var(--bg);
border: 1.5px solid var(--border2);
border-radius: 11px;
max-height: 300px; overflow-y: auto;
z-index: 200; display: none;
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.dropdown.show { display: block; }
.dropdown::-webkit-scrollbar { width: 4px; }
.dropdown::-webkit-scrollbar-track { background: transparent; }
.dropdown::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.dropdown-item {
padding: 10px 14px; cursor: pointer;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 12px;
transition: background 0.1s;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: #fef3ea; }
/* item-code: --accent #c2590a on #fef3ea = 4.9:1 ✓ */
.item-code {
font-family: var(--font-display);
font-size: 0.8rem; font-weight: 700;
color: var(--accent);
background: #fef3ea;
border: 1px solid #e8a87c;
padding: 2px 9px; border-radius: 5px;
white-space: nowrap;
min-width: 68px; text-align: center; flex-shrink: 0;
letter-spacing: 0.03em;
}
.item-name {
font-family: var(--font-mono);
font-size: 0.83rem; line-height: 1.35; color: var(--text);
}
/* dropdown-status: --muted on white = 7:1 ✓ */
.dropdown-status {
padding: 16px; text-align: center;
font-family: var(--font-mono);
color: var(--muted); font-size: 0.8rem;
}
.more-hint {
padding: 8px 14px; text-align: center;
font-family: var(--font-mono);
color: var(--muted); font-size: 0.7rem;
background: #fef3ea;
border-top: 1px solid var(--border);
}
/* ══════════════════════════════════════════════════════════════════════════
SELECTED BADGE
badge-code: --green #166534 on #f0fdf4 = 7.5:1 ✓
══════════════════════════════════════════════════════════════════════════ */
.selected-badge {
display: none;
align-items: center; gap: 10px;
background: #f0fdf4;
border: 1px solid #4ade80;
border-radius: var(--r-md); padding: 8px 14px;
margin-top: 8px;
}
.selected-badge.show { display: flex; }
.badge-code {
font-family: var(--font-display);
font-size: 0.9rem; font-weight: 700;
color: var(--green); flex-shrink: 0; /* #166534 on #f0fdf4 = 7.5:1 ✓ */
letter-spacing: 0.04em;
}
.badge-name {
font-family: var(--font-mono);
font-size: 0.82rem; color: var(--text);
}
.badge-clear {
margin-left: auto;
background: none; border: none;
color: var(--muted); cursor: pointer;
font-size: 15px; line-height: 1; padding: 0 2px; flex-shrink: 0;
transition: color 0.15s;
}
.badge-clear:hover { color: var(--text); }
/* ══════════════════════════════════════════════════════════════════════════
BUTTONS
All buttons: white text on --accent-bg (#b84500) = 5.5:1 ✓
Hover: white text on --accent2 (#8a3600) = 6.2:1 ✓
Disabled: --muted on --surface2 = 4.5:1 ✓ (border added for non-color cue)
══════════════════════════════════════════════════════════════════════════ */
.btn-submit {
width: 100%; margin-top: 22px; padding: 14px;
background: var(--accent-bg); color: #ffffff;
border: none; border-radius: 11px;
font-family: var(--font-display);
font-size: 1.15rem; font-weight: 700; letter-spacing: 0.06em;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-submit:hover:not(:disabled) { background: var(--accent2); }
.btn-submit:active:not(:disabled) { transform: scale(0.98); }
.btn-submit:disabled {
background: var(--surface2);
color: var(--muted);
border: 1px solid var(--border2);
cursor: not-allowed;
}
.btn-reload {
padding: 12px 32px;
background: var(--accent-bg); color: #ffffff;
border: none; border-radius: var(--r-md);
font-family: var(--font-display);
font-weight: 700; font-size: 1rem; letter-spacing: 0.05em;
cursor: pointer; transition: background 0.2s;
}
.btn-reload:hover { background: var(--accent2); }
.retry-btn {
padding: 10px 28px;
background: var(--accent-bg); color: #ffffff;
border: none; border-radius: var(--r-md);
font-family: var(--font-display);
font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em;
cursor: pointer; transition: background 0.2s;
}
.retry-btn:hover { background: var(--accent2); }
.btn-spinner {
width: 17px; height: 17px;
border: 2px solid rgba(255,255,255,0.4);
border-top-color: #ffffff;
border-radius: 50%;
animation: spin 0.65s linear infinite;
display: none;
}
.btn-spinner.show { display: block; }
/* ══════════════════════════════════════════════════════════════════════════
RESULTS (train search tab)
══════════════════════════════════════════════════════════════════════════ */
.results-section { margin-top: 28px; display: none; }
.results-section.show { display: block; }
.results-header {
display: flex; align-items: center;
justify-content: space-between; margin-bottom: 14px;
}
.results-title {
font-family: var(--font-display);
font-weight: 700; font-size: 1.15rem; letter-spacing: 0.03em;
color: var(--text);
}
/* results-count: --muted on --surface2 = 4.5:1 ✓ */
.results-count {
font-family: var(--font-mono);
font-size: 0.75rem; color: var(--muted);
background: var(--surface2); padding: 4px 13px;
border-radius: 20px; border: 1px solid var(--border2);
}
.table-wrap {
background: var(--bg); border: 1.5px solid var(--border2);
border-radius: 13px; overflow: hidden;
}
table { width: 100%; border-collapse: collapse; }
/* thead: --muted on --surface2 = 4.5:1 ✓ */
thead th {
background: var(--surface2); padding: 11px 16px;
text-align: left;
font-family: var(--font-display);
font-size: 0.8rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
tbody tr { border-top: 1px solid var(--border); transition: background 0.12s; }
tbody tr:hover { background: #fef3ea; }
tbody td { padding: 12px 16px; font-family: var(--font-mono); font-size: 0.84rem; color: var(--text); }
tbody td:first-child {
font-family: var(--font-display);
font-size: 0.95rem; font-weight: 700;
color: var(--accent); letter-spacing: 0.03em; /* 4.6:1 on white ✓ */
}
.empty-row td { text-align: center; color: var(--muted); padding: 32px 16px; }
/* ══════════════════════════════════════════════════════════════════════════
STATION GRID
══════════════════════════════════════════════════════════════════════════ */
.station-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 16px; align-items: start;
}
.swap-col { display: flex; align-items: flex-end; padding-top: 28px; }
.swap-btn {
background: var(--bg); border: 1.5px solid var(--border2);
border-radius: var(--r-md); color: var(--muted);
cursor: pointer; padding: 13px 14px;
font-size: 18px; transition: all 0.2s; line-height: 1;
}
.swap-btn:hover { border-color: var(--accent); color: var(--accent); }
/* ══════════════════════════════════════════════════════════════════════════
FOOTER
--muted #595959 on white = 7:1 ✓
══════════════════════════════════════════════════════════════════════════ */
.footer {
text-align: center; padding: 40px 0 24px;
font-family: var(--font-mono);
color: var(--muted); font-size: 0.72rem; letter-spacing: 0.06em;
}
/* ══════════════════════════════════════════════════════════════════════════
RESULTS PAGE — ROUTE HERO
══════════════════════════════════════════════════════════════════════════ */
.route-hero {
background: var(--bg);
border: 1.5px solid var(--border2);
border-radius: 20px;
padding: 32px 36px;
margin-top: 24px;
position: relative; overflow: hidden;
}
.route-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center; gap: 20px;
position: relative; z-index: 1;
}
.station-block.to { text-align: right; }
.station-label {
font-family: var(--font-mono);
font-size: 0.66rem; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
/* station-code: --accent on white = 4.6:1 ✓ */
.station-code {
font-family: var(--font-display);
font-size: 2.6rem; font-weight: 700;
letter-spacing: 0.03em;
color: var(--accent); line-height: 1;
}
.station-name {
font-family: var(--font-mono);
font-size: 0.82rem; color: var(--text); margin-top: 6px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.route-arrow {
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.arrow-line {
width: 80px; height: 2px;
background: var(--accent-bg);
border-radius: 1px; position: relative;
}
.arrow-line::after {
content: '▶';
position: absolute; right: -10px; top: 50%;
transform: translateY(-50%);
color: var(--accent); font-size: 10px;
}
.route-meta {
display: flex; gap: 28px; flex-wrap: wrap;
margin-top: 24px; padding-top: 20px;
border-top: 1px solid var(--border);
position: relative; z-index: 1;
}
.route-stat { display: flex; flex-direction: column; gap: 3px; }
.route-stat-label {
font-family: var(--font-mono);
font-size: 0.65rem; color: var(--muted);
letter-spacing: 0.1em; text-transform: uppercase;
}
.route-stat-value {
font-family: var(--font-display);
font-size: 1.25rem; font-weight: 700; color: var(--text);
letter-spacing: 0.02em;
}
.route-stat-value .unit {
font-family: var(--font-mono);
font-size: 0.72rem; font-weight: 400;
color: var(--muted); margin-left: 3px;
}
/* ══════════════════════════════════════════════════════════════════════════
RESULTS PAGE — FILTER BAR
══════════════════════════════════════════════════════════════════════════ */
.filter-bar {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; margin-top: 24px;
}
.filter-label {
font-family: var(--font-mono);
font-size: 0.7rem; color: var(--muted);
letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0;
}
.filter-btn {
padding: 5px 15px;
background: var(--bg); border: 1.5px solid var(--border2);
border-radius: 20px; color: var(--muted);
font-family: var(--font-display); font-size: 0.88rem; font-weight: 600;
cursor: pointer; transition: all 0.15s; letter-spacing: 0.03em;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Active: white on --accent-bg #b84500 = 5.5:1 ✓ */
.filter-btn.active { background: var(--accent-bg); border-color: var(--accent-bg); color: #ffffff; }
/* ══════════════════════════════════════════════════════════════════════════
RESULTS PAGE — RESULTS BAR
══════════════════════════════════════════════════════════════════════════ */
.results-wrap { margin-top: 24px; }
.results-bar {
display: flex; align-items: center;
justify-content: space-between; margin-bottom: 16px;
}
.results-heading {
font-family: var(--font-display);
font-size: 1.15rem; font-weight: 700; letter-spacing: 0.03em;
color: var(--text);
}
.results-count-pill {
font-family: var(--font-mono);
background: var(--surface2); border: 1px solid var(--border2);
border-radius: 20px; padding: 4px 14px;
font-size: 0.73rem; color: var(--muted);
}
/* ══════════════════════════════════════════════════════════════════════════
RESULTS PAGE — LOADING / ERROR / EMPTY STATES
══════════════════════════════════════════════════════════════════════════ */
#loadingState {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 60px 20px; gap: 20px;
}
.loader-train { font-size: 2.6rem; animation: chug 0.6s ease-in-out infinite alternate; }
@keyframes chug { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
.loader-track { width: 200px; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.loader-fill { height: 100%; width: 40%; background: var(--accent-bg); border-radius: 2px; animation: track 1.2s ease-in-out infinite; }
@keyframes track { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.loader-text { font-family: var(--font-mono); color: var(--muted); font-size: 0.83rem; }
/* error border + title: --red #991b1b on white = 7.2:1 ✓ */
#errorState {
display: none;
background: var(--bg); border: 1.5px solid #f87171;
border-radius: 16px; padding: 44px; text-align: center;
}
#errorState.show { display: block; }
.error-icon { font-size: 2.5rem; margin-bottom: 12px; }
.error-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.03em; color: var(--text); }
.error-msg { font-family: var(--font-mono); color: var(--muted); font-size: 0.84rem; margin: 10px 0 22px; }
#emptyState { display: none; text-align: center; padding: 60px 20px; }
#emptyState.show { display: block; }
.empty-icon { font-size: 3rem; margin-bottom: 14px; }
.empty-msg { font-family: var(--font-mono); color: var(--muted); font-size: 0.85rem; line-height: 1.7; }
/* ══════════════════════════════════════════════════════════════════════════
RESULTS PAGE — TRAIN CARDS
══════════════════════════════════════════════════════════════════════════ */
.train-card {
background: var(--bg);
border: 1.5px solid var(--border2);
border-radius: 16px;
margin-bottom: 14px;
overflow: hidden;
transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
animation: cardIn 0.3s ease both;
}
@keyframes cardIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.train-card:hover {
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.card-header {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px; align-items: center;
padding: 20px 24px;
}
/* train-no: --accent on white = 4.6:1 ✓ */
.train-no {
font-family: var(--font-display);
font-size: 1.75rem; font-weight: 700;
color: var(--accent); line-height: 1;
letter-spacing: 0.03em;
}
/* Type badges — all use dark-on-light tint ✓ */
.train-type-badge {
display: inline-block; margin-top: 6px;
padding: 2px 9px; border-radius: 5px;
font-family: var(--font-display);
font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.07em; text-transform: uppercase;
}
.type-superfast { background: #fef3ea; color: var(--accent); border: 1px solid #e8a87c; } /* 4.9:1 ✓ */
.type-express { background: #eff6ff; color: var(--blue); border: 1px solid #93c5fd; } /* 7.2:1 ✓ */
.type-passenger { background: #f0fdf4; color: var(--green); border: 1px solid #4ade80; } /* 7.5:1 ✓ */
.type-mail { background: #faf5ff; color: #5b21b6; border: 1px solid #c4b5fd; } /* 7.8:1 ✓ */
.type-default { background: var(--surface2); color: var(--muted); border: 1px solid var(--border2); } /* 4.5:1 ✓ */
.train-name-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.train-name {
font-family: var(--font-display);
font-size: 1.1rem; font-weight: 700;
line-height: 1.25; letter-spacing: 0.02em;
color: var(--text);
}
.card-view-hint {
margin-left: auto;
font-family: var(--font-display);
font-size: 0.82rem; font-weight: 600;
color: var(--accent);
letter-spacing: 0.04em;
opacity: 0;
transition: opacity 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
.train-card-clickable { cursor: pointer; }
.train-card-clickable:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(194,89,10,0.1);
}
.train-card-clickable:hover .card-view-hint { opacity: 1; }
.train-card-clickable:active { transform: translateY(0); box-shadow: none; }
.train-hindi {
font-family: var(--font-mono);
font-size: 0.78rem; color: var(--text2);
margin-top: 4px; line-height: 1.4;
}
.train-zone {
font-family: var(--font-mono);
font-size: 0.67rem; color: var(--muted);
background: var(--surface2);
border: 1px solid var(--border2);
border-radius: 5px; padding: 2px 8px;
margin-top: 7px; display: inline-block;
letter-spacing: 0.04em;
}
/* Timing */
.card-timing { text-align: right; flex-shrink: 0; }
.timing-row {
display: flex; align-items: center; gap: 10px;
justify-content: flex-end; margin-bottom: 8px;
}
.time-block { text-align: center; }
.time-value {
font-family: var(--font-display);
font-size: 1.25rem; font-weight: 700; line-height: 1;
letter-spacing: 0.02em; color: var(--text);
}
.time-label {
font-family: var(--font-mono);
font-size: 0.6rem; color: var(--muted);
letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px;
}
/* time-day: --accent on white = 4.6:1 ✓ */
.time-day {
font-family: var(--font-mono);
font-size: 0.58rem; color: var(--accent); margin-top: 1px;
}
.timing-sep { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; }
.sep-line { width: 40px; height: 1px; background: var(--accent); }
.sep-duration { font-family: var(--font-mono); font-size: 0.63rem; color: var(--muted); white-space: nowrap; }
.sep-arrow { font-size: 8px; color: var(--accent); }
/* Running day badges — dark text on light tint ✓ */
.running-today-badge {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-mono); font-size: 0.68rem;
padding: 3px 10px; border-radius: 20px;
background: #f0fdf4; color: var(--green); /* 7.5:1 ✓ */
border: 1px solid #4ade80;
}
.not-today-badge {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-mono); font-size: 0.68rem;
padding: 3px 10px; border-radius: 20px;
background: #fef2f2; color: var(--red); /* 7.2:1 ✓ */
border: 1px solid #f87171;
}
.badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: pulse 1.8s infinite; }
/* Card stats row */
.card-stats {
display: flex; gap: 0;
border-top: 1px solid var(--border);
background: var(--surface);
}
.stat-cell {
flex: 1; padding: 11px 16px;
border-right: 1px solid var(--border);
display: flex; flex-direction: column; gap: 3px;
}
.stat-cell:last-child { border-right: none; }
/* stat-label: --muted on --surface #f5f5f5 = 6.5:1 ✓ */
.stat-label {
font-family: var(--font-mono);
font-size: 0.6rem; color: var(--muted);
letter-spacing: 0.08em; text-transform: uppercase;
}
.stat-value {
font-family: var(--font-display);
font-size: 1rem; font-weight: 700; color: var(--text);
letter-spacing: 0.02em;
}
.stat-unit { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); font-weight: 400; margin-left: 2px; }
/* Card days */
.card-days {
display: flex; align-items: center; gap: 12px;
padding: 12px 20px;
border-top: 1px solid var(--border);
background: var(--surface);
flex-wrap: wrap;
}
.days-label {
font-family: var(--font-mono);
font-size: 0.65rem; color: var(--muted);
letter-spacing: 0.1em; text-transform: uppercase;
flex-shrink: 0; white-space: nowrap;
}
.days-grid {
display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
}
/* day-chip inactive: --muted on --surface2 = 4.5:1 ✓ */
.day-chip {
padding: 3px 9px; border-radius: 5px;
font-family: var(--font-display);
font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.03em;
border: 1px solid var(--border2);
background: var(--surface2); color: var(--muted);
}
/* day-chip.runs: --green on #f0fdf4 = 7.5:1 ✓ */
.day-chip.runs {
background: #f0fdf4; color: var(--green);
border-color: #4ade80;
}
/* ══════════════════════════════════════════════════════════════════════════
SHARED ANIMATIONS
══════════════════════════════════════════════════════════════════════════ */
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes spin2 { to { transform: rotate(360deg); } }
/* ══════════════════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.card { padding: 20px 16px; }
.station-grid { grid-template-columns: 1fr; }
.swap-col { padding-top: 0; justify-content: center; }
.swap-btn { transform: rotate(90deg); }
h1 { font-size: 2.6rem; }
.route-row { grid-template-columns: 1fr auto 1fr; gap: 10px; }
.station-code { font-size: 1.9rem; }
.arrow-line { width: 36px; }
.card-header { grid-template-columns: auto 1fr; gap: 12px; }
.card-timing { display: none; }
.card-stats { flex-wrap: wrap; }
.stat-cell { flex: 1 1 calc(50% - 1px); }
.route-hero { padding: 20px; }
.filter-bar { gap: 8px; }
}
@media (max-width: 400px) {
.container, .page { padding: 0 14px; }
h1 { font-size: 2.2rem; }
}
/* ══════════════════════════════════════════════════════════════════════════
LIVE MAP PAGE (livemap.php)
All text-on-background combos held to WCAG AA ≥4.5:1
══════════════════════════════════════════════════════════════════════════ */
.livemap-body { overflow: hidden; }
#mapContainer {
position: fixed;
top: 56px; left: 0;
width: 100%; height: calc(100% - 56px);
z-index: 1;
}
#map { width: 100%; height: 100%; }
/* ── Sticky Header ── */
.map-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: 56px;
background: #ffffff;
border-bottom: 1.5px solid var(--border2);
box-shadow: 0 1px 8px rgba(0,0,0,0.08);
display: flex;
align-items: center;
padding: 0 16px;
}
.hdr-logo {
display: flex; align-items: center; gap: 8px;
flex-shrink: 0; margin-right: 16px; text-decoration: none;
}
.hdr-logo-icon { font-size: 1.25rem; line-height: 1; }
/* hdr-logo-text: --accent on white = 4.6:1 ✓ */
.hdr-logo-text {
font-family: var(--font-display);
font-size: 1.15rem; font-weight: 700;
color: var(--accent);
letter-spacing: 0.02em; white-space: nowrap;
}
.hdr-logo-text span { color: var(--text); }
.hdr-sep {
width: 1px; height: 28px;
background: var(--border2);
flex-shrink: 0; margin: 0 14px;
}
/* hdr-live: --green #166534 on #f0fdf4 = 7.5:1 ✓ */
.hdr-live {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 0.65rem;
color: var(--green);
letter-spacing: 0.1em; text-transform: uppercase;
padding: 3px 10px;
background: #f0fdf4; border: 1px solid #4ade80;
border-radius: 20px; flex-shrink: 0; white-space: nowrap;
}
.live-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--green);
animation: pulse 1.5s infinite; flex-shrink: 0;
}
.hdr-stats {
display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.hdr-stat {
display: flex; flex-direction: column; align-items: center;
padding: 4px 12px;
background: var(--surface); border: 1px solid var(--border2);
border-radius: 8px; min-width: 68px;
}
/* hdr-stat-label: --muted on --surface = 6.5:1 ✓ */
.hdr-stat-label {
font-family: var(--font-mono); font-size: 0.55rem;
color: var(--muted);
text-transform: uppercase; letter-spacing: 0.06em;
line-height: 1; margin-bottom: 2px;
}
/* hdr-stat-value: --accent on --surface = 4.5:1 ✓ */
.hdr-stat-value {
font-family: var(--font-display); font-size: 1.1rem;
font-weight: 700; color: var(--accent); line-height: 1;
}
.hdr-search {
flex: 1; min-width: 0; max-width: 340px;
margin-left: auto; position: relative;
}
.hdr-search-input {
width: 100%; height: 34px;
padding: 0 12px 0 34px;
background: var(--bg);
border: 1.5px solid var(--border2);
border-radius: 8px;
color: var(--text);
font-family: var(--font-mono); font-size: 0.82rem;
transition: border-color 0.2s; outline: none;
}
.hdr-search-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(194,89,10,0.12);
}
.hdr-search-input::placeholder { color: var(--muted); } /* 7:1 ✓ */
.hdr-search-icon {
position: absolute; left: 10px; top: 50%;
transform: translateY(-50%);
font-size: 0.85rem; pointer-events: none;
color: var(--muted); /* explicit instead of opacity hack */
}
/* hdr-updated: --muted on white = 7:1 ✓ */
.hdr-updated {
font-family: var(--font-mono); font-size: 0.6rem;
color: var(--muted);
white-space: nowrap; margin-left: 12px; flex-shrink: 0;
}
/* map-notice: --accent on white = 4.6:1 ✓ */
.map-notice {
position: fixed; top: 64px; left: 50%;
transform: translateX(-50%);
z-index: 999;
font-family: var(--font-mono); font-size: 0.65rem;
color: var(--accent);
background: #ffffff;
border: 1.5px solid var(--border2);
border-radius: 20px; padding: 5px 14px;
white-space: nowrap; display: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* boundsLoader: --accent on white = 4.6:1 ✓ */
#boundsLoader {
display: none;
position: fixed; top: 64px; right: 16px;
z-index: 1001;
background: #ffffff;
border: 1.5px solid var(--border2);
border-radius: 10px; padding: 8px 14px;
align-items: center; gap: 10px;
font-family: var(--font-mono); font-size: 0.7rem;
color: var(--accent);
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
#boundsLoader .bounds-spinner {
width: 12px; height: 12px;
border: 2px solid rgba(194,89,10,0.2);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin2 0.8s linear infinite; flex-shrink: 0;
}
/* Autocomplete dropdown */
.autocomplete-dropdown {
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
background: #ffffff;
border: 1.5px solid var(--border2);
border-radius: 10px; z-index: 2000;
box-shadow: 0 8px 28px rgba(0,0,0,0.1);
display: none; max-height: 260px; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: var(--border2) transparent;
}
.autocomplete-dropdown.open { display: block; }
.ac-item {
padding: 10px 14px; cursor: pointer;
display: flex; align-items: center; gap: 10px;
border-bottom: 1px solid var(--border);
transition: background 0.12s;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active { background: #fef3ea; }
/* ac-code: --accent on #fef3ea = 4.9:1 ✓ */
.ac-code {
font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
color: var(--accent); min-width: 52px; flex-shrink: 0;
}
/* ac-name: --text2 on white = 11.5:1 ✓ */
.ac-name {
font-size: 0.82rem; color: var(--text2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-live-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--green); flex-shrink: 0; margin-left: auto;
animation: pulse 1.5s infinite;
}
/* ac-empty: --muted on white = 7:1 ✓ */
.ac-empty {
padding: 12px 14px;
font-family: var(--font-mono); font-size: 0.72rem;
color: var(--muted); text-align: center;
}
/* Train Marker */
.train-marker {
background: var(--accent-bg);
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 50%; width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
box-shadow: 0 2px 8px rgba(194,89,10,0.35);
cursor: pointer; transition: transform 0.2s;
}
.train-marker:hover { transform: scale(1.3); z-index: 1000 !important; }
/* Leaflet Popup */
.leaflet-popup-content-wrapper {
background: #ffffff; color: var(--text);
border-radius: 12px;
border: 1.5px solid var(--border2);
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
padding: 4px;
}
.leaflet-popup-content {
margin: 12px;
font-family: var(--font-display); min-width: 260px;
}
.leaflet-popup-tip { background: #ffffff; }
.leaflet-popup-close-button { color: var(--muted) !important; }
/* popup-train-number: --accent on white = 4.6:1 ✓ */
.popup-train-number {
font-size: 1.3rem; font-weight: 700;
color: var(--accent); margin-bottom: 4px; letter-spacing: 0.02em;
}
/* popup-train-name: --text2 on white = 11.5:1 ✓ */
.popup-train-name {
font-size: 0.95rem; color: var(--text2);
margin-bottom: 12px; font-weight: 500;
}
.popup-info-row {
display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
font-family: var(--font-mono); font-size: 0.75rem;
}
/* popup-info-label: --muted on white = 7:1 ✓ */
.popup-info-label { color: var(--muted); min-width: 100px; }
.popup-info-value { color: var(--text); font-weight: 600; }
/* popup-btn: white on --accent-bg #b84500 = 5.5:1 ✓ */
.popup-btn {
display: inline-block; margin-top: 12px; padding: 8px 16px;
background: var(--accent-bg); color: #ffffff;
text-decoration: none; border-radius: 8px;
font-size: 0.8rem; font-weight: 600; text-align: center;
transition: background 0.2s, transform 0.15s;
cursor: pointer; border: none;
}
.popup-btn:hover { background: var(--accent2); transform: translateY(-1px); }
/* Loading Overlay */
.loading-overlay {
position: fixed; inset: 0;
background: rgba(255,255,255,0.96);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
z-index: 9999; transition: opacity 0.3s;
}
.loading-overlay.hidden { opacity: 0; pointer-events: none; }
.loading-spinner {
width: 60px; height: 60px;
border: 4px solid rgba(194,89,10,0.15);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin2 1s linear infinite; margin-bottom: 20px;
}
/* loading-text: --text2 on white = 11.5:1 ✓ */
.loading-overlay .loading-text {
font-size: 1.1rem; color: var(--text2);
font-weight: 500; font-family: var(--font-display); letter-spacing: 0.04em;
}
/* ══ LIVE MAP RESPONSIVE ══════════════════════════════════════════════════ */
@media (max-width: 860px) {
.hdr-updated { display: none; }
.hdr-stat { min-width: 56px; padding: 4px 8px; }
}
@media (max-width: 640px) {
.map-header { padding: 0 10px; height: 52px; }
#mapContainer { top: 52px; height: calc(100% - 52px); }
.map-notice { top: 60px; }
.hdr-sep { margin: 0 8px; }
.hdr-logo-text { display: none; }
.hdr-logo-icon { font-size: 1.4rem; }
.hdr-live { padding: 3px 7px; font-size: 0.6rem; }
.hdr-stats { gap: 2px; }
.hdr-stat { min-width: 48px; padding: 3px 6px; border-radius: 6px; }
.hdr-stat-value { font-size: 0.95rem; }
.hdr-stat-label { font-size: 0.5rem; }
.hdr-search { max-width: none; }
}
@media (max-width: 420px) {
.hdr-stats { display: none; }
.hdr-live { display: none; }
.hdr-sep { display: none; }
}