/* ════════════════════════════════════════════════ LRT MobilityGIS · Map Page Light / Dark theme via [data-theme] on ════════════════════════════════════════════════ */ /* ── Light theme (default) ─────────────────────── */ :root, [data-theme="light"] { /* surface */ --bg: #F8FAFC; --bg2: #ffffff; --bg3: #EFF6FF; --card: #ffffff; --card2: #F1F5F9; /* text */ --ink: #1e293b; --ink2: #334155; --muted: #64748b; --muted2: #94a3b8; /* borders */ --border: #e2e8f0; --border2: #cbd5e1; /* brand */ --blue: #2563EB; --blue-dk: #1d4ed8; --blue-lt: #dbeafe; --dark: #0F172A; /* topbar */ --topbar-bg: rgba(255,255,255,0.92); --topbar-border: #e2e8f0; --topbar-shadow: 0 1px 12px rgba(15,23,42,.08); --brand-name-color: #2563EB; --brand-sub-color: #64748b; /* sidebar */ --sb-bg: #ffffff; --sb-border: #e2e8f0; --sb-stats-bg: #F8FAFC; --sb-stat-num: #1e293b; --sb-stat-lbl: #64748b; --sb-section-lbl: #94a3b8; --sb-showall-bg: #EFF6FF; --sb-showall-color: #2563EB; --sb-showall-border: #bfdbfe; --sb-showall-hover: #dbeafe; /* corridor cards */ --cc-bg: #ffffff; --cc-border: #e2e8f0; --cc-hover-bg: #F8FAFC; --cc-name: #1e293b; --cc-sub: #64748b; --cc-active-bg:#EFF6FF; --cc-active-border: #bfdbfe; /* legend */ --legend-text: #475569; /* map controls */ --ctrl-bg: rgba(255,255,255,0.95); --ctrl-border: rgba(0,0,0,0.08); --ctrl-color: #334155; --ctrl-hover: #EFF6FF; --ctrl-shadow: 0 2px 12px rgba(15,23,42,.10); /* map statsbar */ --msb-bg: rgba(255,255,255,0.92); --msb-border: rgba(0,0,0,0.06); --msb-num: #1e293b; --msb-lbl: #64748b; --msb-sep: #e2e8f0; /* layer picker */ --lp-bg: #ffffff; --lp-border: #e2e8f0; --lp-title: #94a3b8; --lp-opt: #334155; --lp-opt-hover:#EFF6FF; --lp-active-bg:#dbeafe; --lp-active: #2563EB; /* info panel */ --ip-bg: #ffffff; --ip-border: #e2e8f0; --ip-header: #F8FAFC; --ip-row-border:#f1f5f9; --ip-label: #94a3b8; --ip-value: #1e293b; /* search */ --search-bg: #F8FAFC; --search-border: #e2e8f0; --search-color: #1e293b; --search-placeholder: #94a3b8; --search-focus-border: #2563EB; --ac-bg: #ffffff; --ac-border: #e2e8f0; --ac-hover: #F8FAFC; --ac-name: #1e293b; --ac-koridor: #94a3b8; /* meta cards */ --meta-bg: #F8FAFC; --meta-border: #e2e8f0; --meta-color: #64748b; /* action buttons */ --action-bg: rgba(255,255,255,0.9); --action-border:#e2e8f0; --action-color: #334155; --action-hover: #EFF6FF; /* status bar */ --statusbar-bg: #ffffff; --statusbar-border: #e2e8f0; --statusbar-color: #64748b; --statusbar-online: #10b981; /* drawer overlay */ --overlay-bg: rgba(15,23,42,0.4); /* popups */ --popup-bg: #ffffff; --popup-header:#F8FAFC; --popup-border:#f1f5f9; --popup-label: #94a3b8; --popup-value: #1e293b; /* scrollbar */ --scroll-track:#F1F5F9; --scroll-thumb:#CBD5E1; /* theme toggle icon */ --theme-icon: "🌙"; /* zoom buttons */ --zoom-bg: #ffffff; --zoom-border: #e2e8f0; --zoom-color: #334155; --zoom-hover: #EFF6FF; /* footer / sb foot */ --foot-bg: #F8FAFC; --foot-border: #e2e8f0; --foot-color: #94a3b8; } /* ── Dark theme ────────────────────────────────── */ [data-theme="dark"] { --bg: #0F172A; --bg2: #1e293b; --bg3: #162032; --card: #1e293b; --card2: #263347; --ink: #f1f5f9; --ink2: #e2e8f0; --muted: #94a3b8; --muted2: #64748b; --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.12); --blue: #3B82F6; --blue-dk: #2563EB; --blue-lt: rgba(59,130,246,0.15); --dark: #f1f5f9; --topbar-bg: rgba(15,23,42,0.96); --topbar-border: rgba(255,255,255,0.07); --topbar-shadow: 0 1px 12px rgba(0,0,0,.4); --brand-name-color: #60a5fa; --brand-sub-color: #64748b; --sb-bg: #1e293b; --sb-border: rgba(255,255,255,0.07); --sb-stats-bg: rgba(255,255,255,0.04); --sb-stat-num: #f1f5f9; --sb-stat-lbl: #64748b; --sb-section-lbl: #475569; --sb-showall-bg: rgba(59,130,246,0.12); --sb-showall-color: #60a5fa; --sb-showall-border: rgba(59,130,246,0.25); --sb-showall-hover: rgba(59,130,246,0.2); --cc-bg: #1e293b; --cc-border: rgba(255,255,255,0.07); --cc-hover-bg: rgba(255,255,255,0.04); --cc-name: #f1f5f9; --cc-sub: #64748b; --cc-active-bg:rgba(59,130,246,0.12); --cc-active-border: rgba(59,130,246,0.35); --legend-text: #64748b; --ctrl-bg: rgba(30,41,59,0.96); --ctrl-border: rgba(255,255,255,0.08); --ctrl-color: #94a3b8; --ctrl-hover: rgba(59,130,246,0.12); --ctrl-shadow: 0 2px 12px rgba(0,0,0,.4); --msb-bg: rgba(15,23,42,0.92); --msb-border: rgba(255,255,255,0.05); --msb-num: #f1f5f9; --msb-lbl: #64748b; --msb-sep: rgba(255,255,255,0.07); --lp-bg: #1e293b; --lp-border: rgba(255,255,255,0.08); --lp-title: #475569; --lp-opt: #94a3b8; --lp-opt-hover:rgba(255,255,255,0.06); --lp-active-bg:rgba(59,130,246,0.18); --lp-active: #60a5fa; --ip-bg: #1e293b; --ip-border: rgba(255,255,255,0.07); --ip-header: rgba(255,255,255,0.04); --ip-row-border:rgba(255,255,255,0.05); --ip-label: #475569; --ip-value: #e2e8f0; --search-bg: rgba(30,41,59,0.9); --search-border: rgba(255,255,255,0.1); --search-color: #f1f5f9; --search-placeholder: #475569; --search-focus-border: #3B82F6; --ac-bg: #1e293b; --ac-border: rgba(255,255,255,0.08); --ac-hover: rgba(255,255,255,0.05); --ac-name: #f1f5f9; --ac-koridor: #475569; --meta-bg: rgba(30,41,59,0.8); --meta-border: rgba(255,255,255,0.08); --meta-color: #64748b; --action-bg: rgba(30,41,59,0.9); --action-border:rgba(255,255,255,0.1); --action-color: #94a3b8; --action-hover: rgba(59,130,246,0.15); --statusbar-bg: #0F172A; --statusbar-border: rgba(255,255,255,0.06); --statusbar-color: #475569; --statusbar-online: #10b981; --overlay-bg: rgba(0,0,0,0.6); --popup-bg: #1e293b; --popup-header:rgba(255,255,255,0.04); --popup-border:rgba(255,255,255,0.06); --popup-label: #475569; --popup-value: #e2e8f0; --scroll-track:#1e293b; --scroll-thumb:#334155; --theme-icon: "☀"; --zoom-bg: rgba(30,41,59,0.96); --zoom-border: rgba(255,255,255,0.08); --zoom-color: #94a3b8; --zoom-hover: rgba(59,130,246,0.15); --foot-bg: #1e293b; --foot-border: rgba(255,255,255,0.07); --foot-color: #475569; } /* ── Reset ─────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; height: 100vh; overflow: hidden; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ════════════════════════════════════════════════ TOPBAR ════════════════════════════════════════════════ */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 60px; background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--topbar-shadow); transition: background .25s, border-color .25s, box-shadow .25s; } .topbar-inner { display: flex; align-items: center; gap: 14px; height: 100%; padding: 0 18px; } /* Brand */ .brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; text-decoration: none; } .brand-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-name { font-size: 14px; font-weight: 800; color: var(--brand-name-color); transition: color .25s; } .brand-sub { font-size: 10px; color: var(--brand-sub-color); font-weight: 500; white-space: nowrap; transition: color .25s; } /* Search */ .searchbar-wrap { flex: 1; max-width: 420px; position: relative; } .searchbar { display: flex; align-items: center; gap: 8px; background: var(--search-bg); border: 1px solid var(--search-border); border-radius: 10px; padding: 0 12px; height: 38px; transition: border-color .18s, background .25s; } .searchbar:focus-within { border-color: var(--search-focus-border); box-shadow: 0 0 0 3px rgba(37,99,235,.1); } .search-ico { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; } #searchInput { flex: 1; border: none; background: transparent; font-size: 13px; font-family: inherit; color: var(--search-color); outline: none; } #searchInput::placeholder { color: var(--search-placeholder); } .search-kbd { font-size: 10px; color: var(--muted2); background: var(--card2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; } .search-clear { font-size: 12px; color: var(--muted); background: none; border: none; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s; padding: 2px 4px; } .search-clear.visible { opacity: 1; pointer-events: auto; } /* Autocomplete */ .autocomplete { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--ac-bg); border: 1px solid var(--ac-border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.12); z-index: 2000; overflow: hidden; max-height: 340px; overflow-y: auto; transition: background .25s; } .ac-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background .12s; } .ac-item:hover { background: var(--ac-hover); } .ac-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ac-name { font-size: 13px; color: var(--ac-name); flex: 1; } .ac-koridor { font-size: 11px; color: var(--ac-koridor); font-weight: 600; } .ac-empty { padding: 14px; font-size: 13px; color: var(--muted); text-align: center; } /* Meta cards */ .meta-cards { right : 0; display: flex; gap: 6px; flex-shrink: 0; } .meta-card { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--meta-color); background: var(--meta-bg); border: 1px solid var(--meta-border); border-radius: 999px; padding: 4px 10px; white-space: nowrap; transition: background .25s, border-color .25s, color .25s; } .meta-card svg { width: 13px; height: 13px; stroke: var(--muted); stroke-width: 1.6; fill: none; } /* Topbar right actions */ .topbar-actions { position: absolute; right: 0; display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .action-btn { width: 34px; height: 34px; border-radius: 9px; background: var(--action-bg); border: 1px solid var(--action-border); color: var(--action-color); display: grid; place-items: center; transition: background .18s, color .18s; cursor: pointer; text-decoration: none; } .action-btn svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6; fill: none; } .action-btn:hover { background: var(--action-hover); color: var(--blue); } /* Theme toggle button */ .action-btn.theme-toggle { font-size: 15px; line-height: 1; } /* ════════════════════════════════════════════════ APP SHELL ════════════════════════════════════════════════ */ .app { position: fixed; top: 60px; bottom: 36px; left: 0; right: 0; display: flex; overflow: hidden; transition: background .25s; } /* ════════════════════════════════════════════════ SIDEBAR ════════════════════════════════════════════════ */ .sidebar { width: 280px; flex-shrink: 0; background: var(--sb-bg); border-right: 1px solid var(--sb-border); display: flex; flex-direction: column; overflow: hidden; transition: background .25s, border-color .25s, transform .3s ease; z-index: 100; } /* Sidebar hidden state (desktop) */ .app.sidebar-hidden .sidebar { transform: translateX(-100%); width: 0; border: none; } .app.sidebar-hidden .mapwrap { width: 100%; } /* Stats header */ .sb-stats { display: flex; align-items: center; padding: 14px 16px; gap: 0; background: var(--sb-stats-bg); border-bottom: 1px solid var(--sb-border); flex-shrink: 0; transition: background .25s, border-color .25s; } .sb-stat { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .sb-stat-num { font-size: 22px; font-weight: 900; color: var(--sb-stat-num); line-height: 1; letter-spacing: -.02em; transition: color .25s; } .sb-stat-num small { font-size: 13px; color: var(--blue); } .sb-stat-lbl { font-size: 10px; color: var(--sb-stat-lbl); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; transition: color .25s; } .sb-stat-div { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; transition: background .25s; } /* Show all button */ .sb-showall { display: flex; align-items: center; gap: 8px; margin: 12px; padding: 9px 14px; border-radius: 10px; background: var(--sb-showall-bg); color: var(--sb-showall-color); border: 1px solid var(--sb-showall-border); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .18s, color .25s, border-color .25s; flex-shrink: 0; } .sb-showall:hover { background: var(--sb-showall-hover); } .sb-showall svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; flex-shrink: 0; } /* Section label */ .sb-section-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sb-section-lbl); padding: 0 16px 6px; flex-shrink: 0; transition: color .25s; } /* Corridor list */ .corridor-list { flex: 1; overflow-y: auto; padding: 4px 10px 8px; } .corridor-list::-webkit-scrollbar { width: 4px; } .corridor-list::-webkit-scrollbar-track { background: var(--scroll-track); } .corridor-list::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 2px; } /* Corridor cards */ .corr-card { --cc: #2563EB; border-radius: 10px; margin-bottom: 4px; background: var(--cc-bg); border: 1px solid var(--cc-border); cursor: pointer; transition: background .15s, border-color .15s, transform .12s; overflow: hidden; } .corr-card:hover { background: var(--cc-hover-bg); transform: translateX(2px); } .corr-card.active { background: var(--cc-active-bg); border-color: var(--cc-active-border); border-left: 3px solid var(--cc); } .corr-card-inner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; } .corr-num-badge { width: 34px; height: 34px; border-radius: 8px; background: var(--cc); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; letter-spacing: .02em; } .corr-info { flex: 1; min-width: 0; } .corr-name { font-size: 12.5px; font-weight: 700; color: var(--cc-name); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s; } .corr-sub { font-size: 10.5px; color: var(--cc-sub); margin-top: 1px; transition: color .25s; } .corr-arrow { color: var(--muted2); font-size: 16px; flex-shrink: 0; } /* Legend */ .sb-legend { padding: 12px 16px; border-top: 1px solid var(--sb-border); flex-shrink: 0; transition: border-color .25s; } .legend-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 6px; } .legend-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--legend-text); transition: color .25s; min-width: 0; } .legend-item span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .legend-lrt { width: 22px; height: 14px; background: #f59e0b; border-radius: 3px; font-size: 7px; font-weight: 900; color: #000; display: grid; place-items: center; flex-shrink: 0; } .legend-line { width: 22px; height: 3px; border-radius: 2px; flex-shrink: 0; } /* Sidebar footer */ .sb-foot { padding: 10px 16px; border-top: 1px solid var(--sb-border); display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--foot-color); background: var(--foot-bg); flex-shrink: 0; transition: background .25s, border-color .25s, color .25s; } .sb-logo { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; opacity: 0.7; } /* ════════════════════════════════════════════════ MAP WRAP ════════════════════════════════════════════════ */ .mapwrap { flex: 1; position: relative; overflow: hidden; transition: width .3s ease; } #map { position: absolute; inset: 0; z-index: 0; } /* Leaflet popup override */ .leaflet-popup-content-wrapper { background: var(--popup-bg) !important; border: 1px solid var(--ip-border) !important; border-radius: 14px !important; box-shadow: 0 8px 32px rgba(0,0,0,.15) !important; padding: 0 !important; transition: background .25s !important; } .leaflet-popup-tip { background: var(--popup-bg) !important; } .leaflet-popup-content { margin: 0 !important; } /* ── Map floating stats bar ───────────────────── */ .map-statsbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 0; background: var(--msb-bg); border: 1px solid var(--msb-border); border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 8px 18px; box-shadow: 0 2px 16px rgba(0,0,0,.10); transition: background .25s, border-color .25s; } .msb-item { display: flex; flex-direction: column; align-items: center; padding: 0 14px; } .msb-num { font-size: 18px; font-weight: 800; color: var(--msb-num); line-height: 1; letter-spacing: -.02em; transition: color .25s; } .msb-num small { font-size: 11px; color: var(--blue); } .msb-lbl { font-size: 10px; color: var(--msb-lbl); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; transition: color .25s; } .msb-sep { width: 1px; height: 28px; background: var(--msb-sep); flex-shrink: 0; transition: background .25s; } /* ── Map top-right controls ───────────────────── */ .map-top-controls { position: absolute; top: 12px; right: 12px; z-index: 400; display: flex; flex-direction: column; gap: 6px; } .map-ctrl-btn { width: 36px; height: 36px; border-radius: 9px; background: var(--ctrl-bg); border: 1px solid var(--ctrl-border); color: var(--ctrl-color); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ctrl-shadow); transition: background .18s, color .18s, border-color .25s; } .map-ctrl-btn:hover { background: var(--ctrl-hover); color: var(--blue); } .map-ctrl-btn svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6; fill: none; } /* ── Layer picker ─────────────────────────────── */ .layer-picker { position: absolute; top: 12px; right: 54px; z-index: 500; background: var(--lp-bg); border: 1px solid var(--lp-border); border-radius: 12px; padding: 8px; min-width: 170px; box-shadow: 0 8px 24px rgba(0,0,0,.15); transition: background .25s, border-color .25s; } .lp-title { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-title); padding: 4px 8px 8px; transition: color .25s; } .lp-opt { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--lp-opt); background: none; border: none; cursor: pointer; transition: background .15s, color .25s; font-family: inherit; } .lp-opt:hover { background: var(--lp-opt-hover); } .lp-opt.active { background: var(--lp-active-bg); color: var(--lp-active); font-weight: 600; } /* ── Info panel ───────────────────────────────── */ .info-panel { position: absolute; bottom: 16px; right: 12px; z-index: 400; background: var(--ip-bg); border: 1px solid var(--ip-border); border-radius: 14px; width: 280px; box-shadow: 0 8px 32px rgba(0,0,0,.15); overflow: hidden; transition: background .25s, border-color .25s; } .ip-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--ip-header); border-bottom: 1px solid var(--ip-row-border); transition: background .25s, border-color .25s; } .ip-type { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; } .ip-name { font-size: 14px; font-weight: 700; color: var(--ip-value); line-height: 1.3; transition: color .25s; } .ip-close { color: var(--muted); background: none; border: none; font-size: 14px; cursor: pointer; padding: 2px 4px; border-radius: 4px; flex-shrink: 0; transition: color .18s; } .ip-close:hover { color: var(--ink); } .ip-body { padding: 12px 16px; } .ip-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--ip-row-border); font-size: 12.5px; transition: border-color .25s; } .ip-row:last-child { border-bottom: none; } .ip-row span:first-child { color: var(--ip-label); font-weight: 500; transition: color .25s; } .ip-row span:last-child { color: var(--ip-value); font-weight: 600; text-align: right; transition: color .25s; } .ip-cta { display: block; margin: 0 12px 12px; padding: 9px 14px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; transition: background .18s; } .ip-cta:hover { background: var(--blue-dk); } /* ── Custom zoom ──────────────────────────────── */ .custom-zoom { position: absolute; bottom: 56px; right: 12px; z-index: 400; display: flex; flex-direction: column; gap: 2px; } .zoom-btn { width: 36px; height: 36px; border-radius: 9px; background: var(--zoom-bg); border: 1px solid var(--zoom-border); color: var(--zoom-color); font-size: 20px; font-weight: 300; display: grid; place-items: center; cursor: pointer; box-shadow: var(--ctrl-shadow); transition: background .18s, color .18s, border-color .25s; } .zoom-btn:hover { background: var(--zoom-hover); color: var(--blue); } /* ── Popup card ───────────────────────────────── */ .popup-card { background: var(--popup-bg); border-radius: 14px; overflow: hidden; min-width: 240px; transition: background .25s; } .popup-header { padding: 12px 16px; background: var(--popup-header); border-bottom: 1px solid var(--popup-border); transition: background .25s, border-color .25s; } .popup-type { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; } .popup-name { font-size: 14px; font-weight: 700; color: var(--ip-value); line-height: 1.3; transition: color .25s; } .popup-body { padding: 10px 16px; } .popup-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--popup-border); font-size: 12px; transition: border-color .25s; } .popup-row:last-child { border-bottom: none; } .popup-row span:first-child { color: var(--popup-label); font-weight: 500; transition: color .25s; } .popup-row span:last-child { color: var(--popup-value); font-weight: 600; text-align: right; transition: color .25s; } .popup-actions { display: flex; gap: 8px; padding: 10px 16px 14px; } .popup-btn { flex: 1; padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: background .15s, color .15s; } .popup-btn-primary { background: var(--blue); color: #fff; } .popup-btn-primary:hover { background: var(--blue-dk); } .popup-btn-secondary { background: var(--card2); color: var(--ink2); border-color: var(--border); transition: background .15s, color .25s, border-color .25s; } .popup-btn-secondary:hover { background: var(--border); } /* ════════════════════════════════════════════════ STATUS BAR ════════════════════════════════════════════════ */ .statusbar { position: fixed; bottom: 0; left: 0; right: 0; height: 36px; z-index: 1000; background: var(--statusbar-bg); border-top: 1px solid var(--statusbar-border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 11px; color: var(--statusbar-color); transition: background .25s, border-color .25s, color .25s; } .sb-left, .sb-right { display: flex; align-items: center; gap: 8px; } .sb-sep { color: var(--border2); } .sb-online { display: flex; align-items: center; gap: 5px; color: var(--statusbar-online); font-weight: 600; } .sb-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--statusbar-online); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.85); } } /* ════════════════════════════════════════════════ MOBILE DRAWER OVERLAY ════════════════════════════════════════════════ */ .drawer-overlay { display: none; position: fixed; inset: 0; z-index: 90; background: var(--overlay-bg); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .drawer-overlay.active { display: block; opacity: 1; pointer-events: auto; } /* Progress bar (OSRM) */ .corr-progress { padding: 6px 13px 10px; border-top: 1px solid var(--border); } .corr-progress-bar { height: 3px; border-radius: 2px; background: var(--cc, var(--blue)); transition: width 0.3s ease; width: 0%; margin-bottom: 5px; } .corr-progress-lbl { font-size: 10px; color: var(--muted); font-weight: 500; } /* ════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════ */ /* ── Tablet / small desktop (≤ 860px) ─────────── */ @media (max-width: 860px) { /* Sidebar becomes a slide-in drawer */ .sidebar { position: fixed; top: 60px; bottom: 36px; left: 0; transform: translateX(-100%); z-index: 200; width: 300px; box-shadow: 4px 0 24px rgba(0,0,0,.15); } .sidebar.open { transform: translateX(0); } /* Legend stays 2-col on tablet too — no change needed */ /* Hide things that don't fit */ .meta-cards { display: none; } .map-statsbar { display: none; } .brand-sub { display: none; } /* Info panel: full-width strip at bottom instead of floating */ .info-panel { position: fixed; bottom: 36px; left: 0; right: 0; width: 100%; border-radius: 16px 16px 0 0; border-left: none; border-right: none; border-bottom: none; z-index: 600; } /* Layer picker: anchor to top-left of map controls column */ .layer-picker { right: 54px; top: 12px; } /* Map controls: shrink slightly */ .map-ctrl-btn { width: 34px; height: 34px; } .zoom-btn { width: 34px; height: 34px; } } /* ── Mobile (≤ 600px) ──────────────────────────── */ @media (max-width: 600px) { .topbar { height: 56px; } .app { top: 56px; } .topbar-inner { padding: 0 10px; gap: 8px; /* Stop actions from being absolutely positioned & overflowing */ } /* Brand: just logo + name, no subtitle */ .brand-logo { width: 28px; height: 28px; border-radius: 6px; } .brand-name { font-size: 12.5px; } .brand-sub { display: none; } .brand-text { display: none; } /* hide text entirely if still tight */ /* Search: shrink but stay visible */ .searchbar-wrap { flex: 1; min-width: 0; max-width: none; } .search-kbd { display: none; } .searchbar { height: 34px; padding: 0 10px; gap: 6px; } #searchInput { font-size: 12px; } #searchInput::placeholder { content: "Cari…"; font-size: 12px; } /* Action buttons: shrink */ .topbar-actions { position: static; /* remove absolute positioning */ flex-shrink: 0; gap: 4px; } .action-btn { width: 32px; height: 32px; border-radius: 8px; } .action-btn svg { width: 15px; height: 15px; } /* Meta cards already hidden at 860px */ .statusbar { padding: 0 10px; overflow: hidden; } .sb-right { display: none; } .sb-left { gap: 5px; overflow: hidden; white-space: nowrap; min-width: 0; } /* Hide separators and all plain text spans, keep only .sb-online */ .sb-left .sb-sep, .sb-left > span:not(.sb-online) { display: none; } } @media (max-width: 380px) { /* Hide home button, keep only theme + sidebar toggle */ .topbar-actions a[href="home.html"] { display: none; } .brand-name { display: none; } /* logo only */ }