/* ── Reset & base ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #e2e9f3; --surface: #ffffff; --border: #ccd4e0; --accent: #3a7bd5; --accent-dark: #2d62b3; --text: #1a2332; --muted: #6b7a8d; --shadow: 0 2px 12px rgba(0,0,0,0.09); --radius: 12px; } /* Dark theme — applied via [data-theme="dark"] on (manual toggle) or automatically when the OS is in dark mode. */ [data-theme="dark"] { --bg: #0f1923; --surface: #1c2c3e; --border: #2e4260; --text: #e0e8f0; --muted: #7a93ad; --shadow: 0 2px 12px rgba(0,0,0,0.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1923; --surface: #1c2c3e; --border: #2e4260; --text: #e0e8f0; --muted: #7a93ad; --shadow: 0 2px 12px rgba(0,0,0,0.4); } } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); height: 100vh; padding: 16px; color: var(--text); display: flex; flex-direction: column; gap: 16px; } /* ── App layout ─────────────────────────────────────────────────────── */ /* Body is a column: an optional top bar (Safe Route) then the app row, which flexes to fill the rest. Windward has no top bar, so #app is body's only child and simply fills the viewport — unchanged from before. */ #app { display: flex; gap: 16px; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1600px; margin: 0 auto; } /* ── Sidebar ─────────────────────────────────────────────────────────── */ #sidebar { width: 270px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } #header-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px; } .header-actions { display: flex; align-items: center; gap: 10px; } /* Small text link used in the header for cross-page navigation (Windward ↔ Safe Route). Shared across both pages. */ .nav-link { font-size: 0.78rem; color: var(--muted); text-decoration: none; padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); transition: color 0.15s, border-color 0.15s; } .nav-link:hover { color: var(--accent); border-color: var(--accent); } #sidebar h1 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.3px; } #dark-toggle { display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; } .toggle-icon { font-size: 0.75rem; line-height: 1; } .toggle-track { position: relative; width: 36px; height: 20px; background: var(--border); border-radius: 10px; transition: background 0.2s; flex-shrink: 0; } .toggle-knob { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--surface); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s; } [data-theme="dark"] .toggle-knob { transform: translateX(16px); } [data-theme="dark"] .toggle-track { background: var(--accent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toggle-knob { transform: translateX(16px); } :root:not([data-theme="light"]) .toggle-track { background: var(--accent); } } /* ── Cards ───────────────────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; } .card label, .card-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); } /* ── Inputs & buttons ────────────────────────────────────────────────── */ input[type="datetime-local"] { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 0.9rem; color: var(--text); background: var(--bg); outline: none; color-scheme: light dark; } input[type="datetime-local"]:focus { border-color: var(--accent); background: var(--bg); } button { width: 100%; padding: 9px; border: none; border-radius: 7px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.15s; } #calculate-btn, #wind-btn { background: var(--accent); color: #fff; } #calculate-btn:hover:not(:disabled), #wind-btn:hover:not(:disabled) { background: var(--accent-dark); } #calculate-btn:disabled, #wind-btn:disabled { background: #a8c0e8; cursor: not-allowed; } #reset-btn, #upload-btn, #undo-btn, #reverse-btn { background: var(--bg); color: var(--text); } #reset-btn:hover, #upload-btn:hover:not(:disabled), #undo-btn:hover:not(:disabled), #reverse-btn:hover { background: var(--border); } #upload-btn:disabled, #undo-btn:disabled { opacity: 0.4; cursor: not-allowed; } #export-btn { background: #f0fdf4; color: #166534; border: 1px solid #86efac; } #export-btn:hover { background: #dcfce7; } [data-theme="dark"] #export-btn { background: #052e16; color: #86efac; border-color: #166534; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #export-btn { background: #052e16; color: #86efac; border-color: #166534; } } #maps-btn { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; } #maps-btn:hover { background: #dbeafe; } [data-theme="dark"] #maps-btn { background: #0c1a2e; color: #93c5fd; border-color: #1d4ed8; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #maps-btn { background: #0c1a2e; color: #93c5fd; border-color: #1d4ed8; } } .secondary-btn-row { display: flex; gap: 6px; } /* ── Riding speed input ──────────────────────────────────────────────── */ .speed-row { display: flex; flex-direction: column; gap: 4px; } .speed-row label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); } .speed-input-wrap { display: flex; align-items: center; gap: 6px; } #speed-input { width: 72px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; font-size: 0.9rem; color: var(--text); background: var(--bg); outline: none; -moz-appearance: textfield; /* hide spin arrows in Firefox */ } #speed-input::-webkit-outer-spin-button, #speed-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #speed-input:focus { border-color: var(--accent); background: var(--bg); } .speed-unit { font-size: 0.85rem; color: var(--muted); } .speed-hint { font-size: 0.74rem; color: var(--muted); line-height: 1.4; } /* ── Address search ──────────────────────────────────────────────────── */ .address-search { position: relative; } #address-input { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 0.9rem; color: var(--text); background: var(--bg); outline: none; } #address-input:focus { border-color: var(--accent); background: var(--bg); } #address-results { position: fixed; /* fixed escapes overflow:auto clipping on the sidebar */ background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); list-style: none; z-index: 2000; overflow: hidden; /* Width and position are set via JS each time results are shown */ } #address-results li { padding: 8px 12px; font-size: 0.85rem; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--border); } #address-results li:last-child { border-bottom: none; } #address-results li:hover { background: var(--bg); } /* ── Plan / Upload tab panels ────────────────────────────────────────── */ #panel-plan, #panel-upload { display: flex; flex-direction: column; gap: 10px; } /* ── Tabs ────────────────────────────────────────────────────────────── */ .tab-row { display: flex; gap: 6px; } .tab { flex: 1; padding: 7px; border-radius: 6px; font-size: 0.82rem; background: #eef1f7; color: var(--muted); font-weight: 500; } .tab.active { background: var(--accent); color: #fff; } /* ── File upload ─────────────────────────────────────────────────────── */ .file-label { display: block; padding: 9px 12px; border: 1.5px dashed var(--border); border-radius: 7px; font-size: 0.85rem; color: var(--muted); cursor: pointer; text-align: center; transition: border-color 0.15s; } .file-label:hover { border-color: var(--accent); color: var(--accent); } .file-label input[type="file"] { display: none; } /* ── Wind overview widget ─────────────────────────────────────────────── */ #wind-overview { display: flex; align-items: center; gap: 10px; background: #1e293b; border-radius: 8px; padding: 10px 12px; } #wind-label { font-size: 0.85rem; color: #cbd5e1; line-height: 1.5; } #wind-label strong { display: block; font-size: 1.05rem; color: #f1f5f9; font-weight: 600; } #wind-date-note { font-size: 0.75rem; color: var(--accent); min-height: 16px; } #instructions { font-size: 0.85rem; color: var(--muted); line-height: 1.5; } #status { font-size: 0.8rem; color: var(--muted); padding: 0 2px; min-height: 20px; } /* ── Summary bar ──────────────────────────────────────────────────────── */ #summary-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; } #summary-tailwind { background: rgb(0,200,0); } #summary-cross { background: rgb(255,200,0); } #summary-headwind { background: rgb(255,0,0); } #summary-labels { display: flex; justify-content: space-between; font-size: 0.78rem; } #summary-labels .tail { color: #1a7a1a; } #summary-labels .cross { color: #9a7000; } #summary-labels .head { color: #b80000; } #wind-verdict { font-size: 0.82rem; color: var(--text); margin: 6px 0 2px; font-weight: 500; } /* ── Right column ─────────────────────────────────────────────────────── */ #right-col { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; } /* ── Map container ────────────────────────────────────────────────────── */ #map-container { flex: 1; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-height: 0; } #map { width: 100%; height: 100%; } /* Subtly dim the OSM tile layer in dark mode */ [data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.85) saturate(0.8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile-pane { filter: brightness(0.85) saturate(0.8); } } /* ── Legend ───────────────────────────────────────────────────────────── */ #legend { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); border-radius: 8px; padding: 8px 14px; box-shadow: 0 1px 6px rgba(0,0,0,0.15); z-index: 1000; min-width: 260px; } #legend-bar { height: 8px; border-radius: 4px; background: linear-gradient(to right, rgb(0,200,0), rgb(255,200,0), rgb(255,0,0)); margin-bottom: 4px; } #legend-labels, #legend-values { display: flex; justify-content: space-between; font-size: 0.72rem; } #legend-labels { color: #444; font-weight: 500; margin-bottom: 1px; } #legend-values { color: #888; } /* ── Elevation profile strip ──────────────────────────────────────────── */ #elevation-strip { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); height: 72px; padding: 6px 12px; overflow: hidden; } #elevation-svg { width: 100%; height: 100%; display: block; } /* ── Route info strip ─────────────────────────────────────────────────── */ #route-info { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 20px; display: flex; gap: 32px; align-items: center; flex-wrap: wrap; } .info-item { display: flex; align-items: baseline; gap: 5px; } .info-icon { font-size: 0.95rem; } .info-value { font-size: 0.92rem; color: var(--text); font-weight: 500; } .info-unit { font-size: 0.8rem; color: var(--muted); } /* ── Bike loading overlay ─────────────────────────────────────────────── */ #loading-overlay { position: absolute; inset: 0; background: rgba(226,233,243,0.75); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2000; gap: 12px; } #loading-overlay p { font-size: 0.95rem; color: var(--text); font-weight: 500; } #bike-loader { font-size: 3.2rem; animation: cycling 0.6s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); } @keyframes cycling { 0% { transform: translateY(0px) rotate(-3deg); } 25% { transform: translateY(-8px) rotate(0deg); } 50% { transform: translateY(0px) rotate(3deg); } 75% { transform: translateY(-4px) rotate(0deg); } 100% { transform: translateY(0px) rotate(-3deg); } } /* ── Plan waypoint markers ────────────────────────────────────────────── */ .plan-marker { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.35); cursor: pointer; } .plan-marker-start { background: #22c55e; } .plan-marker-end { background: #ef4444; } .plan-marker-via { background: #3a7bd5; } /* ── Marker popups ────────────────────────────────────────────────────── */ .marker-popup { text-align: center; min-width: 80px; } .marker-popup strong { display: block; margin-bottom: 6px; font-size: 0.9rem; } .popup-remove-btn { width: auto; padding: 4px 12px; background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; border-radius: 5px; font-size: 0.8rem; font-weight: 500; cursor: pointer; } .popup-remove-btn:hover { background: #fecaca; } /* ── Leaflet overrides ────────────────────────────────────────────────── */ .wind-arrow-icon { background: none !important; border: none !important; } /* ── Reroute bar ──────────────────────────────────────────────────────── */ #reroute-bar { position: absolute; bottom: 52px; /* just above the legend */ left: 50%; transform: translateX(-50%); background: #1e293b; color: #f1f5f9; border-radius: 10px; padding: 10px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.3); z-index: 1000; white-space: nowrap; } #reroute-bar-label { font-size: 0.88rem; font-weight: 500; } .reroute-bar-actions { display: flex; gap: 6px; } .reroute-btn { width: auto; padding: 5px 14px; border-radius: 6px; font-size: 0.82rem; font-weight: 600; border: none; cursor: pointer; } .reroute-accept { background: #22c55e; color: #fff; } .reroute-accept:hover { background: #16a34a; } .reroute-discard { background: #475569; color: #f1f5f9; } .reroute-discard:hover { background: #334155; } /* ── Road closure markers ─────────────────────────────────────────────── */ .closure-marker { width: 22px; height: 22px; background: #dc2626; color: #fff; font-size: 0.7rem; font-weight: 700; border-radius: 3px; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer; } .closure-popup { font-size: 0.85rem; min-width: 200px; } .closure-popup strong { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 0.9rem; color: #dc2626; } .closure-warning { font-weight: 600; color: var(--text); margin-bottom: 4px; } .closure-source { color: var(--muted); font-size: 0.78rem; margin-bottom: 4px; } .closure-project { color: var(--muted); font-size: 0.76rem; margin-bottom: 4px; font-style: italic; } .closure-url { margin-bottom: 4px; font-size: 0.8rem; } .closure-url a { color: var(--accent); text-decoration: none; } .closure-url a:hover { text-decoration: underline; } .closure-dates { font-size: 0.8rem; color: var(--muted); margin-bottom: 8px; } .closure-tag { font-size: 0.72rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; } .closure-tag-bike { background: #fef9c3; color: #854d0e; } .closure-action-btn { width: 100%; padding: 5px; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; border: none; } .closure-avoid-btn { background: #dc2626; color: #fff; } .closure-avoid-btn:hover { background: #b91c1c; } .closure-stop-btn { background: #eef1f7; color: var(--text); } .closure-stop-btn:hover { background: #e0e6f0; } #avoid-all-btn { background: #fef2f2; color: #b91c1c; border: 1px solid #fca5a5; } /* ── Spinner keyframe (shared) ────────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } /* ── Address search spinner ───────────────────────────────────────────── */ /* Shown while a geocode request is in flight. A small ring appears on the right side of the input; the input gets extra right padding so text doesn't overlap the spinner. */ .address-search.searching #address-input { padding-right: 32px; } .address-search.searching::after { content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; pointer-events: none; } /* ── Closure loading pill ─────────────────────────────────────────────── */ /* Small floating status badge in the bottom-right corner of the map, shown while closures are being fetched or filtered after a route loads. */ #closure-loading { position: absolute; bottom: 8px; right: 8px; background: rgba(30, 41, 59, 0.82); backdrop-filter: blur(3px); color: #e2e8f0; font-size: 0.72rem; padding: 4px 10px 4px 8px; border-radius: 99px; pointer-events: none; z-index: 1000; display: flex; align-items: center; gap: 6px; } #closure-loading::before { content: ''; width: 8px; height: 8px; border: 1.5px solid rgba(255,255,255,0.25); border-top-color: #e2e8f0; border-radius: 50%; animation: spin 0.6s linear infinite; flex-shrink: 0; } /* ── Departure time chart ─────────────────────────────────────────────── */ #departure-chart { display: flex; align-items: flex-end; gap: 3px; height: 64px; background: var(--bg); border-radius: 6px; padding: 6px 4px 0; } .dep-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; } .dep-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; } .dep-bar { width: 100%; border-radius: 3px 3px 0 0; transition: opacity 0.15s; min-height: 4px; } .dep-col:hover .dep-bar { opacity: 0.75; } .dep-col-active .dep-bar { outline: 2px solid var(--text); outline-offset: 1px; } .dep-label { font-size: 0.62rem; color: var(--muted); line-height: 1; } .dep-col-active .dep-label { color: var(--text); font-weight: 600; } .departure-hint { font-size: 0.78rem; color: var(--muted); text-align: center; } .departure-loading { font-size: 0.8rem; color: var(--muted); } /* ── Utility ──────────────────────────────────────────────────────────── */ .hidden { display: none !important; } /* ── Mobile layout ────────────────────────────────────────────────────── */ @media (max-width: 680px) { body { padding: 0; } #app { flex-direction: column; height: 100dvh; /* dvh accounts for the iOS Safari toolbar */ gap: 0; } /* Map column fills all remaining space above the sidebar */ #right-col { order: 1; flex: 1; gap: 0; min-height: 0; } #map-container { border-radius: 0; } /* Elevation strip is hidden on small screens to save vertical space */ #elevation-strip { display: none !important; } /* Route info strip becomes a compact scrolling row under the map */ #route-info { border-radius: 0; padding: 8px 14px; gap: 18px; font-size: 0.82rem; overflow-x: auto; white-space: nowrap; flex-wrap: nowrap; } /* Sidebar slides up from the bottom as a fixed-height panel */ #sidebar { order: 2; width: 100%; flex-direction: column; max-height: 44vh; overflow-y: auto; gap: 10px; padding: 12px 14px 20px; /* extra bottom padding for iOS home bar */ border-radius: 0; box-shadow: 0 -3px 16px rgba(0,0,0,0.12); /* small drag handle at the top to signal it's scrollable */ border-top: 3px solid var(--border); } #header-row { display: none; } /* Smaller wind arrows on mobile so they don't cover the route colours */ .wind-arrow-icon svg { width: 18px !important; height: 18px !important; } }