@charset "UTF-8"; /* The route planner at /route-planner: the whole page, since the planner module's layout registers no other stylesheet. Ported from the Claude Design page ("Weather Navigation redesign" › Route Planner), class for class, with three deliberate departures: - system-ui, not Poppins and not Outfit. The design specified Poppins from Google Fonts (the CSP's font-src is 'self'); the site's own Outfit was tried first and dropped on 17 September 2026: it is unhinted and its Medium stem is 1.2 px at 11 px, which Safari on a 1x display paints as grey fuzz across the timeline's captions. San Francisco / Segoe have optical sizes for small text and render sharply where Outfit did not, so the planner is the one page not in the brand face. The logo is an image and unaffected. The type scale is the design's (11 caption / 12 label / 13 body / 14 title / 18 headline / 22 display). No @font-face here on purpose -- the page downloads no font files at all. - MapLibre, not Leaflet, so the control selectors are .maplibregl-*. - The dark face is `html.dark`, set before first paint by an inline script in the layout and toggled by planner.js, rather than a class on . Compiled with `sass planner.scss planner.css` from this directory; the asset bundle names the plain .css. The colour tokens are the design's, and the three verdict colours here have to agree with WnPlanner.COLORS in planner.js. */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body.planner { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; font-weight: 500; color: #334155; background: #CBD5E1; overflow: hidden; } [hidden] { display: none !important; } a { color: #2F80ED; text-decoration: none; } a:hover { color: #1B64C8; } button { font-family: inherit; } #stage { position: fixed; inset: 0; overflow: hidden; background: #fff; } #map { position: absolute; inset: 0; z-index: 0; } /* ---------- top bar ---------- */ .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(18px + env(safe-area-inset-top, 0px)) 18px 0; pointer-events: none; } .topbar > * { pointer-events: auto; } .brand { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 7px 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12); } .brand img { height: 34px; width: auto; display: block; } .brand b { font-size: 18px; font-weight: 600; color: #0F172A; white-space: nowrap; } .legend { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 12px; padding: 9px 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12); font-size: 13px; font-weight: 500; color: #334155; } .legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: -1px; } .legend .dot-green { background: #22C55E; } .legend .dot-amber { background: #F59E0B; } .legend .dot-red { background: #EF4444; } .veh { display: flex; gap: 8px; flex: none; } .veh button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 99px; border: 1.5px solid #E2E8F0; background: #fff; color: #334155; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12); transition: border-color 0.12s, background 0.12s; } .veh button:hover { border-color: #93C5FD; } .veh button.on { border-color: #2F80ED; background: #2F80ED; color: #fff; font-weight: 600; box-shadow: 0 4px 14px rgba(47, 128, 237, 0.35); } /* ---------- left column ---------- */ .side { position: absolute; top: calc(88px + env(safe-area-inset-top, 0px)); left: 18px; z-index: 1000; width: 412px; max-height: calc(100% - 106px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 14px; padding: 2px 4px 8px 2px; } .side::-webkit-scrollbar { display: none; } .card { background: #fff; border-radius: 20px; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.16); flex: none; } .fields { position: relative; } .fbox { position: relative; margin: 0 14px 8px; padding: 10px 14px; background: #F8FAFC; border-radius: 12px; } .fbox label { display: block; font-size: 11px; color: #64748B; } .fbox input { flex: 1; width: 100%; min-width: 0; border: 0; outline: none; font: inherit; font-size: 14px; font-weight: 500; color: #0F172A; background: none; padding: 2px 0 0; } .fbox input::placeholder { color: #94A3B8; } .fbox.resolving input { color: #64748B; } #stops .fbox:first-child { margin-top: 14px; } .frow { display: flex; align-items: center; gap: 10px; } .clear-x { width: 20px; height: 20px; flex: none; border: 0; padding: 0; border-radius: 50%; background: #0F172A; color: #fff; font-size: 11px; line-height: 20px; text-align: center; cursor: pointer; transform: translateY(-5px); } .clear-x:hover { background: #EF4444; } .drag-h { cursor: grab; color: #CBD5E1; font-size: 14px; flex: none; user-select: none; } .swap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1.5px solid #BFDBFE; color: #2F80ED; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1); z-index: 5; } .swap:hover { background: #EFF6FF; } /* Candidates for a typed place, shown after the field is submitted rather than as it is typed -- geocoding spends the same allowance as routing. */ .ac { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid #E2E8F0; border-radius: 8px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14); z-index: 1200; overflow: hidden; } .ac div { padding: 8px 11px; font-size: 13px; cursor: pointer; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac div:hover, .ac div.on { background: #EFF6FF; } .ac .ac-note { font-size: 11px; color: #94A3B8; cursor: default; } .ac .ac-note:hover { background: none; } .add-row { padding: 0 18px 14px; } .add-stop { border: 0; background: none; color: #2F80ED; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; padding: 0; white-space: nowrap; } .add-stop:hover { color: #1B64C8; } .add-stop:disabled { color: #CBD5E1; cursor: default; } .when { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px; } .when > div { padding: 10px 14px; background: #F8FAFC; border-radius: 12px; } .when label { display: block; font-size: 11px; color: #64748B; } .when input { width: 100%; border: 0; outline: none; font: inherit; font-size: 14px; font-weight: 500; color: #0F172A; background: none; padding: 2px 0 0; } .cta-wrap { padding: 18px; } .go { width: 100%; padding: 14px; border: 0; border-radius: 99px; background: #2F80ED; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; transition: background 0.12s; box-shadow: 0 4px 14px rgba(47, 128, 237, 0.3); } .go:hover { background: #1B64C8; } .go:disabled { background: #93C5FD; cursor: default; } .go.share { background: #22C55E; box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35); } .go.share:hover { background: #16A34A; } .spin { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: wnspin 0.7s linear infinite; } @keyframes wnspin { to { transform: rotate(360deg); } } .try { padding: 0 18px 16px; margin: -6px 0 0; font-size: 12px; color: #94A3B8; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .try a { font-weight: 500; cursor: pointer; white-space: nowrap; } .msg { padding: 0 18px 14px; margin: -4px 0 0; font-size: 13px; color: #EF4444; line-height: 1.5; } .msg:empty { display: none; } .results { padding-bottom: 0; } .alert-banner { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #FEF2F2; border-bottom: 1px solid #FECACA; border-radius: 20px 20px 0 0; } .alert-banner .ab-ico { width: 22px; height: 22px; flex: none; border-radius: 50%; background: #EF4444; color: #fff; font-size: 13px; font-weight: 700; line-height: 22px; text-align: center; } .alert-banner .ab-txt { min-width: 0; } .alert-banner .ab-txt b { display: block; font-size: 13px; color: #B91C1C; } .alert-banner .ab-txt div { font-size: 12px; color: #7F1D1D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .alert-banner a { margin-left: auto; font-size: 12px; font-weight: 600; color: #B91C1C; cursor: pointer; flex: none; } .sum-sticky { position: sticky; top: 0; z-index: 5; background: #fff; padding: 14px 18px 12px; border-bottom: 1px solid #F1F5F9; border-radius: 20px 20px 0 0; } .row1 { display: flex; align-items: baseline; gap: 4px 10px; white-space: nowrap; flex-wrap: wrap; } .dur { font-size: 22px; font-weight: 600; color: #0F172A; } .dist { font-size: 13px; color: #64748B; } .arr { margin-left: auto; font-size: 12px; color: #94A3B8; font-weight: 500; } .cond { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 99px; white-space: nowrap; } .cond:empty { display: none; } .cond-green { background: #F0FDF4; color: #15803D; } .cond-amber { background: #FFFBEB; color: #B45309; } .cond-red { background: #FEF2F2; color: #B91C1C; } .cond-grey { background: #F1F5F9; color: #64748B; } .notice { margin: 0; padding: 10px 18px 0; font-size: 11px; line-height: 1.45; color: #94A3B8; } .alts { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; } .alts:empty { display: none; } .rt { padding: 10px 14px 12px; border: 1.5px solid #E2E8F0; border-radius: 12px; cursor: pointer; transition: border-color 0.12s; } .rt:hover { border-color: #93C5FD; } .rt.on { border-color: #2F80ED; background: #EFF6FF; } .rt .l1 { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; } .rt .nm { font-weight: 600; color: #0F172A; } .rt .chipf { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: #F0FDF4; color: #15803D; } .rt .via { font-size: 12px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .rt .sc { margin-left: auto; font-size: 11px; font-weight: 600; } .rt .l2 { display: flex; align-items: center; gap: 8px; white-space: nowrap; margin-top: 2px; font-size: 12px; color: #64748B; } .rt .delta { margin-left: auto; font-size: 11px; font-weight: 500; color: #94A3B8; } .rt .cstrip { display: flex; gap: 2px; margin-top: 8px; height: 5px; border-radius: 3px; overflow: hidden; } .rt .cstrip span { display: block; } #results details, #histBox { border-top: 1px solid #F1F5F9; } #results details summary, #histBox summary { padding: 12px 18px; font-size: 13px; font-weight: 600; color: #0F172A; cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 7px; white-space: nowrap; } #results details summary::-webkit-details-marker, #histBox summary::-webkit-details-marker { display: none; } #results details summary::after, #histBox summary::after { content: "▾"; margin-left: auto; color: #94A3B8; font-size: 11px; transition: transform 0.15s; } #results details[open] summary::after, #histBox[open] summary::after { transform: rotate(180deg); } #results details > *:not(summary), #histBox > *:not(summary) { margin: 0 18px 14px; } #results .dep-list { margin: 0 10px 12px; } .badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: #F1F5F9; color: #64748B; white-space: nowrap; flex: none; } .badge.red { background: #FEE2E2; color: #B91C1C; } .badge:empty { display: none; } .dep-list { display: flex; flex-direction: column; gap: 5px; } .dep { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; color: #334155; } .dep:hover { background: #F8FAFC; } .dep.on { background: #EFF6FF; } .dep .bar { flex: 1; height: 7px; border-radius: 4px; background: #F8FAFC; box-shadow: inset 0 0 0 1px #E2E8F0; overflow: hidden; } .dep .bar i { display: block; height: 100%; border-radius: 4px; } .dep .lbl { width: 64px; flex: none; font-weight: 500; } .dep .best { width: 52px; flex: none; text-align: right; font-size: 11px; font-weight: 600; color: #15803D; } .dep-note { font-size: 12px; color: #94A3B8; margin: 4px 8px 0; } .alert-item { margin-top: 8px; padding: 9px 11px; border-radius: 8px; background: #FEF2F2; border: 1px solid #FECACA; font-size: 12px; line-height: 1.45; } .alert-item b { color: #B91C1C; display: block; font-size: 13px; } .alert-item span { color: #7F1D1D; } .stop-item { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; border-bottom: 1px dashed #F1F5F9; } .stop-item:last-child { border-bottom: 0; } .stop-item .tm { color: #94A3B8; width: 88px; flex: none; font-size: 12px; } .stop-item .nm { font-weight: 500; color: #0F172A; flex: 1; } .stop-item .wx { font-weight: 500; white-space: nowrap; } .empty-note { font-size: 12px; color: #94A3B8; margin: 8px 0 0; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips a { border: 1px solid #BFDBFE; color: #1B64C8; padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 500; white-space: nowrap; } .chips a:hover { background: #2F80ED; border-color: #2F80ED; color: #fff; } .chips span { border: 1px solid #E2E8F0; color: #64748B; padding: 5px 12px; border-radius: 99px; font-size: 12px; } .chips-note { font-size: 12px; color: #94A3B8; margin: 8px 0 0; } .elev-wrap svg { display: block; width: 100%; height: auto; } .elev-meta { font-size: 12px; color: #64748B; margin-top: 6px; } .elev-meta b { color: #0F172A; } .share-row { display: flex; gap: 8px; padding: 14px 18px 12px; border-top: 1px solid #F1F5F9; position: relative; background: #fff; } .share-row button { flex: 1; padding: 10px; border: 1.5px solid #E2E8F0; border-radius: 99px; background: #fff; font: inherit; font-size: 13px; font-weight: 500; color: #334155; cursor: pointer; } .share-row button:hover { border-color: #2F80ED; color: #1B64C8; } .qr-pop { position: absolute; bottom: calc(100% + 8px); right: 0; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.22); padding: 14px; text-align: center; z-index: 1300; width: 190px; } .qr-pop .qr-code { width: 150px; height: 150px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .qr-pop .qr-code img, .qr-pop .qr-code svg { width: 150px; height: 150px; display: block; image-rendering: pixelated; } .qr-pop p { margin: 8px 0; font-size: 12px; color: #64748B; } .qr-pop .qr-open { display: inline-block; margin-top: 2px; padding: 7px 14px; border-radius: 99px; background: #2F80ED; color: #fff; font-size: 12px; font-weight: 600; } .qr-pop .qr-open:hover { background: #1B64C8; color: #fff; } .qr-pop .qr-note { font-size: 11px; color: #94A3B8; } .credits { margin: 0; padding: 0 18px 14px; font-size: 11px; color: #94A3B8; line-height: 1.5; } .hist-item { display: flex; align-items: center; gap: 8px; padding: 7px 4px; font-size: 13px; cursor: pointer; border-radius: 7px; } .hist-item:hover { background: #F8FAFC; } .hist-item .rt { flex: 1; font-weight: 500; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; border: 0; } .hist-item .dt { color: #94A3B8; font-size: 11px; flex: none; } /* ---------- timeline ---------- Centred by layout (left + right + auto margins), never by translateX(-50%): a transform is applied after layout without pixel snapping, so an odd viewport or a fractional width parks the whole card half a pixel off the grid and WebKit paints every 11 px label in it blurred. The same rule holds for .tl-pill, .vb and .ygut below. */ .timeline { position: absolute; left: 430px; right: 18px; margin: 0 auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 1000; width: clamp(560px, 100% - 470px, 880px); max-width: calc(100% - 36px); background: #fff; border-radius: 22px; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.16); padding: 18px; display: flex; flex-direction: column; gap: 14px; } .play { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: #2F80ED; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(47, 128, 237, 0.35); transition: background 0.12s; } .play:hover { background: #1B64C8; } .tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 8px; } .ev-pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; } .ev-pill:empty { display: none; } .ev-pill.ev-green { background: #F0FDF4; color: #15803D; } .ev-pill.ev-amber { background: #FFFBEB; color: #B45309; } .ev-pill.ev-red { background: #FEF2F2; color: #B91C1C; } .tl-ctrls { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .tl-grid { display: grid; grid-template-columns: 48px 1fr 150px; gap: 14px; align-items: start; } .lane-labels { display: flex; flex-direction: column; gap: 8px; } .lane-labels span { height: 26px; display: flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #94A3B8; } .lane-labels .rt-lb { height: 40px; align-items: flex-start; padding-top: 1px; } .lanes { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .lane { height: 26px; background-color: #F8FAFC; border-radius: 4px; background-size: 100% 100%; background-repeat: no-repeat; } .band-row { height: 40px; position: relative; } .strip { height: 6px; border-radius: 3px; background: #F1F5F9; background-size: 100% 100%; background-repeat: no-repeat; } .axis { display: flex; justify-content: flex-start; font-size: 11px; color: #94A3B8; font-weight: 500; margin-top: 4px; } .axis span { white-space: nowrap; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.1; flex: 1; } .axis span b { font-size: 12px; font-weight: 600; color: #64748B; } .axis span small { font-size: 11px; font-weight: 500; color: #B0BCCB; } .axis span:last-child { flex: none; } .strip-icons { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .stop-dot-tl, .wp-dot-tl { position: absolute; top: 3px; transform: translate(-50%, -50%); width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3); } .stop-dot-tl { background: #2F80ED; } .wp-dot-tl { background: #0F172A; } .sun-ico { position: absolute; top: 3px; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28); font-size: 8px; line-height: 14px; text-align: center; color: #B45309; } .lanes input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 34px); margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; z-index: 3; } .lanes input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 110px; background: transparent; border: 0; box-shadow: none; } .lanes input[type=range]::-moz-range-thumb { width: 16px; height: 110px; background: transparent; border: 0; box-shadow: none; } .lanes input[type=range]:focus-visible { outline: 2px solid #2F80ED; outline-offset: 2px; } .timeline.sz-s .lanes input[type=range] { height: 10px; } .timeline.sz-s .lanes input[type=range]::-webkit-slider-thumb { height: 18px; } .timeline.sz-s .lanes input[type=range]::-moz-range-thumb { height: 18px; } .timeline.sz-l .lanes input[type=range]::-webkit-slider-thumb { height: 480px; } .timeline.sz-l .lanes input[type=range]::-moz-range-thumb { height: 480px; } .timeline.sz-l .strip, .timeline.sz-f .strip { height: 9px; border-radius: 4px; } .timeline.sz-l .stop-dot-tl, .timeline.sz-l .wp-dot-tl, .timeline.sz-l .sun-ico, .timeline.sz-f .stop-dot-tl, .timeline.sz-f .wp-dot-tl, .timeline.sz-f .sun-ico { top: 4.5px; } .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } /* minmax(0, 1fr), not 1fr: a bare 1fr track cannot shrink below its content, so one long value ("Dry · 70°F est." in the system face) widened its column and pushed the other past the card's edge in Safari. The value ellipsises inside its tile instead. */ .tile { background: #F8FAFC; border-radius: 12px; padding: 7px 11px; min-width: 0; } .tile div { font-size: 11px; color: #94A3B8; font-weight: 500; letter-spacing: 0.03em; } .tile b { display: block; font-size: 13px; font-weight: 600; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile { /* "Dry · 71°F est." is the one value wider than a tile; the last tile takes the row. */ } .tile.road { grid-column: 1/-1; } .tl-btn { border: 1.5px solid #E2E8F0; background: #fff; border-radius: 99px; font: inherit; font-size: 11px; font-weight: 600; color: #334155; padding: 3px 10px; cursor: pointer; white-space: nowrap; } .tl-btn:hover { border-color: #93C5FD; color: #1B64C8; } .tl-pill { position: absolute; left: 0; right: 0; width: max-content; margin: 0 auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 1000; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 99px; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.16); padding: 8px 16px 8px 8px; cursor: pointer; } .tl-pill button { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; background: #2F80ED; color: #fff; font-size: 13px; cursor: pointer; box-shadow: 0 4px 14px rgba(47, 128, 237, 0.35); } .tl-pill span { font-size: 13px; font-weight: 600; color: #0F172A; white-space: nowrap; } .tl-pill .exp { color: #94A3B8; font-weight: 500; font-size: 11px; } .tl-time { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; white-space: nowrap; } .tl-time b { font-size: 16px; font-weight: 600; color: #0F172A; } .tl-time small { font-size: 12px; font-weight: 500; color: #94A3B8; } .tl-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748B; white-space: nowrap; cursor: pointer; user-select: none; } .tl-toggle #wxMode { color: #2F80ED; font-weight: 600; } .timeline.sz-l { left: 448px; width: auto; max-width: none; max-height: calc(100% - 140px); overflow-y: auto; scrollbar-width: none; } .timeline.sz-l::-webkit-scrollbar { display: none; } .timeline.sz-l .lane { height: 72px; } .timeline.sz-l .lane-labels { display: none; } .timeline.sz-l .tl-grid { grid-template-columns: 34px 1fr 180px; column-gap: 8px; } .timeline.sz-l .lanes .lane-cl { display: block !important; } .timeline.sz-l .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; } .timeline.sz-l .tile.xl { display: block; } .timeline.sz-l .band-row { position: sticky; bottom: -4px; background: #fff; z-index: 4; box-shadow: 0 -6px 8px -6px rgba(15, 23, 42, 0.12); } .timeline.sz-l .tl-head { position: sticky; top: -18px; background: #fff; z-index: 5; margin: -18px -4px 0; padding: 18px 4px 10px; } .timeline.sz-l .lanes .wx-dir { display: block; } .timeline.sz-l .lanes .wx-leg { display: flex !important; padding: 1px 0 3px; } .timeline.sz-l .lanes .wx-leg.lane-p { display: none !important; } .lane-cl { display: none !important; } .timeline.sz-s .lane, .timeline.sz-s .lane-labels, .timeline.sz-s .tiles, .timeline.sz-s .wx-leg, .timeline.sz-s .wx-dir, .timeline.sz-s .wx-ico-row { display: none !important; } .timeline.sz-s .tl-grid { grid-template-columns: 1fr; } .tile.xl { display: none; } .fl-sz { position: absolute; top: calc(88px + env(safe-area-inset-top, 0px)); right: 18px; z-index: 1100; display: flex; background: #fff; border-radius: 99px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.16); padding: 4px; gap: 2px; } .fl-sz button { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: #64748B; padding: 6px 14px; border-radius: 99px; cursor: pointer; } .fl-sz button:hover { color: #1B64C8; } .fl-sz button.on { background: #2F80ED; color: #fff; box-shadow: 0 3px 10px rgba(47, 128, 237, 0.35); } .wx-leg { display: none; justify-content: flex-start; gap: 14px; font-size: 11px; color: #4B5563; padding: 2px 0 6px; flex-wrap: wrap; } .wx-leg span { display: flex; align-items: center; gap: 5px; white-space: nowrap; } .wx-leg i { display: inline-block; } .wx-leg .ln { width: 16px; height: 0; border-top: 2.5px solid #878C94; } .wx-leg .ln-temp { border-top-color: #E8720C; } .wx-leg .ln-road { border-top-color: #E3C51C; border-top-style: dashed; } .wx-leg .ln-wind { border-top-color: #878C94; } .wx-leg .ln-cloud { border-top-color: #94A3B8; } .wx-leg .ln-pres { border-top-color: #4444CC; } .wx-leg .sw { width: 9px; height: 9px; } .wx-leg .sw-rain { background: #0E7C6F; } .wx-leg .sw-acc { background: rgba(124, 196, 31, 0.35); box-shadow: inset 0 0 0 1.5px #7CC41F; } .wx-dir { display: none; height: 14px; flex: none; background-size: 100% 100%; background-repeat: no-repeat; } .vb { position: absolute; z-index: 6; background: #fff; border-radius: 10px; box-shadow: 0 3px 12px rgba(15, 23, 42, 0.25); padding: 3px 12px; font-size: 16px; font-weight: 600; color: #0F172A; white-space: nowrap; pointer-events: none; display: none; /* left/top are whole pixels set by planner.js; no transform */ } .vbdot { position: absolute; z-index: 5; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(15, 23, 42, 0.35); transform: translate(-50%, -50%); pointer-events: none; display: none; } .ygut { position: relative; display: none; align-self: stretch; font-size: 11px; font-weight: 500; color: #8A93A0; } .ygut span { position: absolute; left: 0; line-height: 12px; margin-top: -6px; white-space: nowrap; } .timeline.sz-l .ygut, .timeline.sz-f .ygut { display: block; } .timeline.sz-f { left: auto; right: 18px; margin: 0; top: calc(140px + env(safe-area-inset-top, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 600px; max-width: calc(100% - 36px); overflow-y: auto; scrollbar-width: none; } .timeline.sz-f::-webkit-scrollbar { display: none; } .timeline.sz-f .tl-grid { grid-template-columns: 34px 1fr; column-gap: 8px; grid-template-rows: minmax(min-content, 1fr) auto; flex: 1; min-height: 0; align-items: stretch; } .timeline.sz-f .lane-labels { display: none; } .timeline.sz-f .lanes { gap: 4px; min-height: 0; } .timeline.sz-f .lane { height: auto; flex: 1; min-height: 84px; background-color: #F8FAFC; } .timeline.sz-f .lanes .lane-cl { display: block !important; } .timeline.sz-f .lanes .lane.lane-p { display: block !important; } .timeline.sz-f .lanes .wx-leg.lane-p { display: flex !important; } .timeline.sz-f .wx-leg { display: flex !important; padding: 2px 0 4px; } .timeline.sz-f .lanes .wx-dir { display: block; } .timeline.sz-f .tile.xl { display: block; } .timeline.sz-f .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1/-1; } .timeline.sz-f .band-row { margin-bottom: 8px; } .timeline.sz-f .lanes input[type=range]::-webkit-slider-thumb { height: 560px; } .timeline.sz-f .lanes input[type=range]::-moz-range-thumb { height: 560px; } .lane-p { display: none !important; } .wx-ico-row { position: relative; height: 34px; margin-bottom: -2px; } .wx-ico-row img { position: absolute; top: 0; transform: translateX(-50%); width: 34px; height: 34px; filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.22)); } .tile-cap { grid-column: 1/-1; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: #94A3B8; margin: 4px 2px -3px; } .tiles .tile-cap:first-child { margin-top: 0; } .tile[data-lane] { --acc: #2F80ED; position: relative; cursor: pointer; user-select: none; transition: opacity 0.12s, box-shadow 0.12s, background-color 0.12s; box-shadow: inset 0 0 0 1.5px var(--acc); background: color-mix(in srgb, var(--acc) 9%, transparent); } .tile[data-lane]::after { content: ""; position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); } .tile[data-lane][data-lane=temp] { --acc: #E8720C; } .tile[data-lane][data-lane=rain] { --acc: #0E7C6F; } .tile[data-lane][data-lane=wind] { --acc: #6B7280; } .tile[data-lane][data-lane=cl] { --acc: #64748B; } .tile[data-lane]:hover { box-shadow: inset 0 0 0 2px var(--acc); } .tile[data-lane].off { opacity: 0.55; box-shadow: inset 0 0 0 1.5px #E2E8F0; background: transparent; } .tile[data-lane].off::after { background: #CBD5E1; } .tile[data-lane].off b { color: #94A3B8 !important; } .tile[data-lane] b { color: var(--acc); } #tTemp { color: #E8720C; } #tRain { color: #0E7C6F; } #tWind { color: #6B7280; } #tCloud { color: #64748B; } .timeline.off-rain #laneRain, .timeline.off-rain .lanes .leg-rain, .timeline.off-rain .lb-rain, .timeline.off-rain #vbRain, .timeline.off-rain #vdRain { display: none !important; } .timeline.off-temp #laneTemp, .timeline.off-temp .lanes .leg-temp, .timeline.off-temp .lb-temp, .timeline.off-temp #vbTemp, .timeline.off-temp #vdTemp { display: none !important; } .timeline.off-wind #laneWind, .timeline.off-wind .lanes .leg-wind, .timeline.off-wind .lb-wind, .timeline.off-wind #dirRow, .timeline.off-wind #vbWind, .timeline.off-wind #vdWind { display: none !important; } .timeline.off-cl .lanes .lane-cl, .timeline.off-cl .lanes .leg-cl, .timeline.off-cl .lane-labels .lb-cl, .timeline.off-cl #vbCloud, .timeline.off-cl #vdCloud { display: none !important; } /* ---------- map furniture ---------- */ .wx-bubble { width: max-content; max-width: 250px; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18); padding: 8px 14px; font: 500 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #0F172A; white-space: nowrap; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: default; } .wx-bubble .bico { width: 44px; height: 44px; margin: -5px 0 -3px; display: block; } .wx-bubble .v { font-size: 22px; font-weight: 700; line-height: 1.1; } .wx-bubble .c { font-size: 14px; font-weight: 400; color: #475569; margin-bottom: 2px; } .wx-bubble .t { color: #64748B; font-size: 12px; font-weight: 500; } .wx-bubble .d { color: #5F6C7D; font-size: 12px; font-weight: 500; } .wx-bubble { /* No `position` here: MapLibre places the marker with its own `position: absolute` on this very element, and a `relative` on the class won -- every bubble then sat in document flow, stacked diagonally across Mexico. The tail below is absolute against the marker's own box either way. */ } .wx-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; box-shadow: 3px 3px 6px rgba(15, 23, 42, 0.08); } .wn-marker { cursor: default; } .car-ico { width: 26px; height: 26px; border-radius: 50%; background: #0F172A; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.4); display: flex; align-items: center; justify-content: center; } .car-ico svg { transform-origin: 50% 50%; display: block; } .end-dot { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 6px rgba(15, 23, 42, 0.35); } .warn-ico { width: 22px; height: 22px; border-radius: 50%; background: #EF4444; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35); color: #fff; font: 700 13px/18px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; cursor: pointer; /* The verdict's colour for a pavement run -- a damp stretch radar still calls green gets the green -- and an NWS alert stays red. */ } .warn-ico.warn-green { background: #22C55E; } .warn-ico.warn-yellow { background: #F59E0B; } .warn-ico.warn-red { background: #EF4444; } .warn-ico.warn-grey { background: #94A3B8; } .rest-ico { width: 18px; height: 18px; border-radius: 50%; background: #2F80ED; border: 2px solid #fff; box-shadow: 0 1px 6px rgba(15, 23, 42, 0.3); color: #fff; font: 600 11px/14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; cursor: default; } .hover-tip { position: fixed; z-index: 1500; pointer-events: none; background: #0F172A; color: #fff; border-radius: 8px; padding: 7px 10px; font-size: 12px; line-height: 1.5; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3); max-width: 260px; } .hover-tip b { font-size: 12px; } /* The condition and alert cards, as MapLibre popups. */ .wn-popup .maplibregl-popup-content { padding: 0; border-radius: 12px; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.22); overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-width: 220px; max-width: 280px; } .wn-popup .maplibregl-popup-close-button { font-size: 18px; color: #fff; right: 4px; top: 2px; padding: 0 6px; } .wn-card__head { padding: 10px 14px; color: #fff; display: flex; align-items: baseline; gap: 10px; } .wn-card__head strong { font-size: 14px; font-weight: 600; } .wn-card__head--green { background: #15803D; } .wn-card__head--yellow { background: #B45309; } .wn-card__head--red { background: #B91C1C; } .wn-card__head--grey { background: #475569; } .wn-card__extent { margin-left: auto; font-size: 11px; opacity: 0.9; white-space: nowrap; } .wn-card__body { padding: 10px 14px 12px; font-size: 12px; line-height: 1.5; color: #334155; } .wn-card__blurb { margin: 0 0 8px; } .wn-card__why { margin: 0; padding: 0 0 0 16px; } .wn-card__why li { margin: 0; } .wn-card__note { margin: 8px 0 0; font-size: 11px; color: #94A3B8; } .maplibregl-ctrl-bottom-right { margin-bottom: 250px; margin-right: 0; transition: margin-bottom 0.15s; } html.tl-l .maplibregl-ctrl-bottom-right { margin-bottom: 430px; } html.tl-f .maplibregl-ctrl-bottom-right { margin-bottom: 24px; margin-right: 618px; } html.tl-none .maplibregl-ctrl-bottom-right { margin-bottom: 70px; } .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 18px 10px 0; } .maplibregl-ctrl-group { box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12); border-radius: 99px; overflow: hidden; background: #fff; } .maplibregl-ctrl-group button { width: 34px; height: 34px; } .maplibregl-ctrl-group button + button { border-top: 1px solid #F1F5F9; } .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib { font: 500 9px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: rgba(255, 255, 255, 0.75); border-radius: 8px 8px 0 0; padding: 2px 8px; color: #64748B; } .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib a { color: #64748B; } .maplibregl-ctrl-bottom-left { margin-left: calc(434px); } /* Theme switch and style menu, as controls in the bottom-right stack. */ .vswitch { width: 34px; height: 66px; background: #fff; border-radius: 99px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.25); position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 0; color: #64748B; border: 1px solid rgba(15, 23, 42, 0.08); } .vswitch svg { position: relative; z-index: 2; } .vswitch .knob { position: absolute; left: 3px; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: #2F80ED; transition: top 0.18s; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3); z-index: 1; } html:not(.dark) .vswitch svg:first-child { color: #fff; } html.dark .vswitch .knob { top: 38px; } html.dark .vswitch svg:nth-of-type(2) { color: #fff; } .msw { width: 34px; height: 34px; background: #fff; border-radius: 99px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.25); display: flex; align-items: center; justify-content: center; color: #334155; cursor: pointer; position: relative; } .msw:hover { color: #2F80ED; } .msw .ms-pop { display: none; position: absolute; right: calc(100% + 8px); bottom: 0; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.22); padding: 6px; flex-direction: column; gap: 2px; min-width: 120px; } .msw .ms-pop button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: #334155; text-align: left; padding: 7px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; } .msw .ms-pop button:hover { background: #EFF6FF; } .msw .ms-pop button.on { background: #2F80ED; color: #fff; font-weight: 600; } .msw.open .ms-pop { display: flex; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- dark face ---------- */ html.dark body.planner { background: #0B1220; } html.dark #stage { background: #070D18; } html.dark input[type=date], html.dark input[type=time] { color-scheme: dark; } html.dark .brand, html.dark .legend, html.dark .card, html.dark .timeline, html.dark .fl-sz, html.dark .tl-pill, html.dark .qr-pop, html.dark .vswitch, html.dark .msw, html.dark .msw .ms-pop, html.dark .maplibregl-ctrl-group { background: #121A2A; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); } html.dark .vswitch, html.dark .msw { border-color: #26334A; color: #94A3B8; } html.dark .brand b, html.dark .dur, html.dark .fbox input, html.dark .when input, html.dark .tl-time b, html.dark .tile b, html.dark .rt .nm, html.dark #results details summary, html.dark #histBox summary, html.dark .stop-item .nm, html.dark .hist-item .rt, html.dark .tl-pill span, html.dark .vb, html.dark .wx-bubble, html.dark .elev-meta b { color: #F1F5F9; } html.dark .legend, html.dark .veh button, html.dark .tl-btn, html.dark .share-row button, html.dark .tl-toggle, html.dark .dep, html.dark .rt .l2, html.dark .ms-pop button, html.dark .credits, html.dark .chips span { color: #CBD5E1; } html.dark .fbox, html.dark .when > div, html.dark .tile, html.dark .lane, html.dark .dep .bar, html.dark .strip { background-color: #070D18; } html.dark .veh button, html.dark .tl-btn, html.dark .share-row button, html.dark .rt, html.dark .maplibregl-ctrl-group button { background: #121A2A; border-color: #26334A; } html.dark .maplibregl-ctrl-group button { filter: invert(1) hue-rotate(180deg); } html.dark .veh button.on { background: #2F80ED; border-color: #2F80ED; color: #fff; } html.dark .veh button:hover, html.dark .rt:hover { border-color: #2F80ED; } html.dark .rt.on, html.dark .dep.on { background: #12203A; } html.dark .rt.on { border-color: #2F80ED; } html.dark .sum-sticky, html.dark .share-row, html.dark .timeline.sz-l .band-row, html.dark .timeline.sz-l .tl-head { background: #121A2A; } html.dark .sum-sticky, html.dark .stop-item { border-bottom-color: #26334A; } html.dark #results details, html.dark #histBox, html.dark .share-row { border-top-color: #26334A; } html.dark .ac { background: #121A2A; border-color: #26334A; } html.dark .ac div { color: #CBD5E1; } html.dark .ac div:hover, html.dark .ac div.on, html.dark .dep:hover, html.dark .hist-item:hover, html.dark .swap:hover, html.dark .ms-pop button:hover { background: #070D18; } html.dark .badge { background: #070D18; color: #94A3B8; } html.dark .swap { background: #121A2A; border-color: #26334A; } html.dark .vb { background: #121A2A; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5); } html.dark .wx-bubble { background: #121A2A; } html.dark .wx-bubble .c { color: #E2E8F0; } html.dark .wx-bubble .t { color: #C3CDDB; } html.dark .wx-bubble .d { color: #93A1B5; } html.dark .fbox label, html.dark .when label, html.dark .tile-cap { color: #7C8BA3; } html.dark .clear-x, html.dark .drag-h { background: #475569; color: #fff; } html.dark .drag-h { background: none; color: #475569; } html.dark .axis span b, html.dark .wx-leg, html.dark .dist, html.dark .elev-meta, html.dark .notice, html.dark .dep-note, html.dark .chips-note, html.dark .empty-note { color: #94A3B8; } html.dark .maplibregl-ctrl-attrib { background: rgba(15, 23, 42, 0.75); color: #94A3B8; } html.dark .maplibregl-ctrl-attrib a { color: #94A3B8; } html.dark .alert-banner { background: rgba(239, 68, 68, 0.14); border-bottom-color: rgba(239, 68, 68, 0.35); } html.dark .alert-item { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); } html.dark .alert-item b, html.dark .ab-txt b, html.dark .alert-banner a { color: #FCA5A5; } html.dark .alert-item span, html.dark .ab-txt div { color: #EFB8B8; } html.dark .cond-green, html.dark .rt .chipf, html.dark .ev-pill.ev-green { background: rgba(34, 197, 94, 0.16); color: #4ADE80; } html.dark .cond-amber, html.dark .ev-pill.ev-amber { background: rgba(245, 158, 11, 0.16); color: #FBBF24; } html.dark .cond-red, html.dark .ev-pill.ev-red { background: rgba(239, 68, 68, 0.16); color: #FCA5A5; } html.dark .cond-grey { background: #070D18; color: #94A3B8; } html.dark .dep .bar { box-shadow: inset 0 0 0 1px #26334A; } html.dark .dep .best { color: #4ADE80; } html.dark .lane { background-color: #111B2E !important; } html.dark .tile[data-lane].off { box-shadow: inset 0 0 0 1.5px #26334A; } html.dark .chips a { border-color: #2A4A7A; color: #93C5FD; } html.dark .chips a:hover { background: #2F80ED; color: #fff; } html.dark .qr-pop p { color: #94A3B8; } html.dark .qr-code { background: #fff; border-radius: 8px; padding: 6px; } html.dark .wn-popup .maplibregl-popup-content { background: #121A2A; } html.dark .wn-popup .maplibregl-popup-tip { border-top-color: #121A2A; border-bottom-color: #121A2A; } html.dark .wn-card__body { color: #CBD5E1; } /* ---------- narrow screens ---------- */ @media (max-width: 1120px) { .timeline { left: 18px !important; width: calc(100% - 36px) !important; max-width: none !important; } .timeline.sz-f { left: auto !important; right: 18px; width: min(600px, 100% - 36px) !important; } html.tl-f .maplibregl-ctrl-bottom-right { margin-right: 0; margin-bottom: 250px; } } @media (max-width: 760px) { .topbar { flex-wrap: wrap; padding-left: 12px; padding-right: 12px; } .veh { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; } .veh::-webkit-scrollbar { display: none; } .veh button { padding: 8px 14px; font-size: 12px; } .legend { padding: 8px 10px; gap: 10px; font-size: 12px; } .brand b { font-size: 15px; } .brand img { height: 28px; } .side { left: 12px; width: calc(100% - 24px); top: calc(150px + env(safe-area-inset-top, 0px)); max-height: calc(100% - 170px - env(safe-area-inset-top, 0px)); } /* With a timeline on screen the panel stops above it: the two would otherwise stack in the same corner. The compact timeline is about 150 px tall, the wide one 330. */ html.tl-s .side { max-height: calc(100% - 340px - env(safe-area-inset-top, 0px)); } html.tl-l .side, html.tl-f .side { max-height: calc(100% - 520px - env(safe-area-inset-top, 0px)); } .timeline.sz-f { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); max-height: 60vh; } .timeline { padding: 14px; gap: 10px; } .timeline.sz-l .tl-grid { grid-template-columns: 28px 1fr; } .timeline.sz-l .tiles { grid-column: 1/-1; grid-template-columns: repeat(4, minmax(0, 1fr)); } .timeline.sz-l .lane { height: 48px; } .fl-sz { top: calc(112px + env(safe-area-inset-top, 0px)); right: 12px; padding: 3px; } .fl-sz button { padding: 5px 10px; font-size: 11px; } .side { top: calc(156px + env(safe-area-inset-top, 0px)); } .maplibregl-ctrl-bottom-left { margin-left: 0; } .maplibregl-ctrl-bottom-right { margin-bottom: 70px; } } /*# sourceMappingURL=planner.css.map */