/* app.css — v2 renderer stylesheet (S3b1 + S3b2 landing). Body is a verbatim port of the map_css block in src/build_map.py (the live map's custom styles), with the metrocard cursor PNGs baked in as data URIs. Only the "v2 base" block below is new — folium provided these rules before. The landing block sits ABOVE the ported styles on purpose: the live page injects landing_css into before map_css lands in , and several selectors (e.g. #map-title's transition) rely on map_css winning the same-specificity cascade. Keep that order. */ /* ── v2 base (replaces folium's page scaffolding) ─────────────────────── */ html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } /* ── Landing (verbatim port of landing_css in src/build_map.py) ───────── */ /* Hide map chrome until Explore */ .leaflet-control-scale, .leaflet-control-attribution { opacity: 0; pointer-events: none; transition: opacity 0.85s ease; } body.map-open .leaflet-control-scale, body.map-open .leaflet-control-attribution { opacity: 1; pointer-events: auto; } #map-title, #right-top-panel { opacity: 0; pointer-events: none; transition: opacity 0.85s ease; } body.map-open #map-title, body.map-open #right-top-panel { opacity: 1; pointer-events: auto; } /* Landing overlay */ #landing-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); background: transparent; transition: opacity 1s cubic-bezier(.25,1,.5,1); } #landing-overlay.dismissed { opacity: 0; pointer-events: none; } #landing-nav { position: absolute; top: 0; left: 0; right: 0; padding: 20px 28px; display: flex; justify-content: space-between; align-items: center; } #privacy-bubble { position: absolute; bottom: 22px; right: 22px; width: 300px; border-radius: 5px; padding: 20px 22px; opacity: 0; transition: opacity 0.5s ease; background: rgba(255,255,255,0.15); backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.13), 0 24px 48px rgba(0,0,0,0.06); overflow: hidden; transform: translateZ(0); } #privacy-bubble h2 { margin: 0 0 8px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; color: #1a1a1a; } #privacy-bubble p { margin: 0 0 10px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 24px; color: #555; } #privacy-bubble a { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; color: #1a1a1a; text-decoration: underline; } #privacy-close-btn { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 18px; cursor: pointer; color: #aaa; } #explore-btn { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; padding: 12px 18px; color: #1a1a1a; border: 2px solid rgba(160,160,160,0.7); border-radius: 0; cursor: pointer; background: rgba(255,255,255,0.75); backdrop-filter: blur(5px) saturate(100%); -webkit-backdrop-filter: blur(5px) saturate(100%); box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.13), 0 24px 48px rgba(0,0,0,0.06); transform: translateZ(0); } /* ── ported live-map styles ───────────────────────────────────────────── */ :root { --glass-blur: 0px; --glass-saturate: 100%; --glass-bg: rgba(255,255,255,0.70); --glass-border: rgba(160,160,160,0.7); --glass-radius: 0px; --glass-specular: rgba(255,255,255,0.30); --glass-prism-opacity: 0.00; --glass-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.13), 0 24px 48px rgba(0,0,0,0.06); --badge-blur: 0px; --badge-saturate: 180%; --badge-color-mix: 100%; --badge-radius: 50%; --badge-glow-close: 30%; --badge-glow-far: 11%; --search-blur: 0px; --search-bg: rgba(255,255,255,0.00); --search-border: rgba(255,255,255,0.00); --search-radius: 0px; --search-fg: #ffffff; --search-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 8px 20px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.70); --drawer-header-bg: rgba(20,20,28,0.97); --drawer-header-blur: 0px; --drawer-body-bg: rgba(255,255,255,0.70); --drawer-body-blur: 2px; --drawer-edge-shadow: -4px 0 16px rgba(0,0,0,0.10), -1px 0 0 rgba(255,255,255,0.010); --drawer-slide-dur: 1.1s; } .glass { position: relative; width: 300px; padding: 16px 18px; box-sizing: border-box; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); border-radius: var(--glass-radius); box-shadow: var(--glass-shadow); overflow: hidden; transform: translateZ(0); font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; } .glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--glass-specular) 0%, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.00) 55%); pointer-events: none; z-index: 1; } .glass::after { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1.5px; background: linear-gradient(90deg, rgba(255,80,80,var(--glass-prism-opacity)), rgba(255,165,50,var(--glass-prism-opacity)), rgba(240,230,60,var(--glass-prism-opacity)), rgba(80,210,100,var(--glass-prism-opacity)), rgba(60,150,255,var(--glass-prism-opacity)), rgba(160,70,255,var(--glass-prism-opacity))); pointer-events: none; z-index: 2; } .glass > * { position: relative; z-index: 3; } html, body { background: #fbfbfa; } .leaflet-container { background: #fbfbfa; } .leaflet-silk-pane { z-index: 320; pointer-events: none; mix-blend-mode: multiply; opacity: 0.34; } .leaflet-silk-pane canvas { display: block; width: 100%; height: 100%; } .leaflet-tile-pane { opacity: 1; filter: brightness(1) contrast(0.95) grayscale(1); } .leaflet-subway-pane path { transition: stroke 180ms ease-out, stroke-opacity 180ms ease-out; } .leaflet-control-scale-line { border: 1px solid rgba(0,0,0,.09) !important; box-shadow: 0 2px 12px rgba(0,0,0,.08) !important; } /* U3 (S3c): was 8px at 48% opacity (≈2.4:1). Links get an AA-passing blue. */ .leaflet-control-attribution { opacity: 1; font-size: 9px; color: #595959; } .leaflet-control-attribution a { color: #20627e; } /* U1 (S3c): the live map's blanket focus-outline suppression is removed. Mouse clicks stay outline-free via :focus-visible; keyboard focus shows a visible ring everywhere, plus the hover halo on markers (JS). */ :focus-visible { outline: 2px solid #0f62d6; outline-offset: 2px; } .leaflet-interactive:focus:not(:focus-visible), .leaflet-marker-icon:focus:not(:focus-visible) { outline: none; } .leaflet-interactive:focus-visible, .leaflet-marker-icon:focus-visible { outline: 2px solid #0f62d6; outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* U4 (S3c): honor reduced-motion — collapse every CSS transition/animation. The silk shader + Leaflet flyTo are gated in app.js. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* Leaflet Search creates a persistent result circle with this exact stroke. */ .leaflet-overlay-pane path[stroke="#e03"] { display: none; } .marker-hover-halo { filter: drop-shadow(0 0 1px rgba(255,255,255,1)) drop-shadow(0 0 3px rgba(255,255,255,1)) drop-shadow(0 0 4px rgba(45,55,72,.72)); transform-origin: center; transform-box: fill-box; scale: 1.5; } .high-risk-triangle { overflow: visible !important; } .high-risk-triangle svg { overflow: visible; transform: scale(var(--marker-zoom-scale, 1)); transform-origin: center; transform-box: fill-box; } .high-risk-triangle svg.marker-hover-halo { transform: scale(calc(var(--marker-zoom-scale, 1) * 1.5)); scale: none; } .leaflet-elevator-pane .leaflet-marker-icon, .leaflet-elevator-pane path { transition: opacity 180ms ease-out, filter 180ms ease-out, transform 180ms ease-out; } .marker-is-dimmed { opacity: 0.32 !important; } .sq-square { transform-box: fill-box; transform-origin: center; transform: scale(var(--marker-zoom-scale, 1)); } .sq-diamond { transform-box: fill-box; transform-origin: center; transform: rotate(45deg) scale(var(--marker-zoom-scale, 1)); } .marker-tooltip-box { min-width: 140px; padding: 6px 9px; border: 0; border-radius: 0; background: rgba(255,255,255,0.70); backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.13), 0 24px 48px rgba(0,0,0,0.06); color: #444; font: normal 10px/1.35 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; letter-spacing: .04em; overflow: hidden; transform: translateZ(0); position: relative; } .marker-tooltip-box::before { display: none; } .marker-tooltip-box::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.026) 30%, rgba(255,255,255,0.00) 55%); pointer-events: none; z-index: 1; } .marker-tooltip-box .marker-tooltip-content { white-space: normal; position: relative; z-index: 2; } .marker-tooltip-box.leaflet-tooltip-right { margin-left: var(--tooltip-offset, 8px); } .marker-tooltip-box.leaflet-tooltip-left { margin-right: var(--tooltip-offset, 8px); } #station-search-slot { position: relative; width: 250px; height: 34px; z-index: 10000; } #station-search-slot .leaflet-control-search { position: relative !important; width: 250px; height: 34px; margin: 0 !important; float: none !important; overflow: visible; background: transparent; border: 0; box-shadow: none; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; } #station-search-slot .leaflet-control-search label.search-input { display: none !important; } #station-search-slot .leaflet-control-search input.search-input { display: block !important; box-sizing: border-box; width: 250px !important; max-width: none !important; height: 36px; margin: 0; padding: 0 30px 0 31px; border: 1px solid var(--search-border); border-radius: var(--search-radius); outline: none; background-color: var(--search-bg); backdrop-filter: blur(var(--search-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--search-blur)) saturate(140%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23595959' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.65' y1='16.65' x2='21' y2='21'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px center; background-size: 12px 12px; box-shadow: var(--search-shadow); color: #3a3a3a; font: 600 11px/1.4 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; transition: box-shadow .2s, background .2s; } #station-search-slot .leaflet-control-search input.search-input::placeholder { color: #595959; opacity: 1; } #station-search-slot .leaflet-control-search input.search-input:focus { background-color: rgba(255,255,255,0.28); box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 8px 28px rgba(0,0,0,0.13), inset 0 1px 0 rgba(255,255,255,0.80), 0 0 0 1.5px rgba(255,255,255,0.45); } /* Animated fake placeholder — hidden when input has value or is focused */ #station-search-slot .search-placeholder { position: absolute; left: 31px; right: 30px; top: 50%; transform: translateY(-50%); pointer-events: none; overflow: hidden; z-index: 3; } #station-search-slot input.search-input:not(:placeholder-shown) ~ .search-placeholder, #station-search-slot input.search-input:focus ~ .search-placeholder { display: none; } #station-search-slot .search-placeholder span { display: inline-block; white-space: nowrap; color: #595959; font: 600 11px/1.4 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; } #station-search-slot .leaflet-control-search .search-button { display: none !important; } #station-search-slot .leaflet-control-search .search-cancel { position: absolute; /* was in leaflet-search.css; hand-rolled control needs it here */ top: 50%; right: 2px; width: 30px; height: 30px; display: grid; place-items: center; transform: translateY(-50%); margin: 0; padding: 0; border: 0; /* it's a real