/* ========================================================================== Footer ========================================================================== */ .app-footer-info { display: flex; justify-content: center; padding: 1rem; font-size: 0.7rem; color: var(--text-dim); } /* Hidden by default (desktop) — shown as a fixed bottom bar only in the ≤768px query below. Base rule lives outside any @media so it always wins over the plain .app-tabs flex display it inherits from css/03-header.css. */ .app-tabs-bottom { display: none; } /* ========================================================================== Responsive Adaptations ========================================================================== */ @media (max-width: 1024px) { .weather-grid { grid-template-columns: 1fr; } .map-layout { grid-template-columns: 1fr; /* 47vh, not the old 240px: an expanded card carries the meta strip plus the raw text that used to live in the map popup, and 240px is shorter than that popup was. Measured on a 390x844 phone: 397px sidebar, 267px map. dvh (with vh fallback) because iOS Safari's vh is the URL-bar-HIDDEN height — taller than what's visible while the toolbar shows — which pushed the map bottom (and its Leaflet attribution) down under the fixed nav bar. Same fix the Windy card already uses. */ grid-template-rows: 47vh 1fr; grid-template-rows: 47dvh 1fr; } .tab-panel.flex-panel { height: calc(100vh - 120px); height: calc(100dvh - 120px); } .map-sidebar { height: 47vh; height: 47dvh; } } @media (max-width: 768px) { .app-header { background: rgba(8, 10, 15, 0.85) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } body.light-theme .app-header { background: rgba(255, 255, 255, 0.9) !important; } .header-inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "left right"; gap: 1rem; align-items: center; padding: 0 1.25rem; } .app-main { padding: 1.5rem 0.75rem calc(1.5rem + 46px + env(safe-area-inset-bottom)); } /* Map tab is height-locked (calc(100dvh - Npx), not natural flow), so app-main's padding-bottom above doesn't shrink it — subtract the fixed bottom bar's own height (46px) directly, or the map/sidebar's bottom edge renders underneath it. 78px is everything ABOVE the panel: 70px header + 0.5rem app-main padding-top (see the .tab-map override below — the Info tab runs a tighter top gap than the Weather tab, which keeps 1.5rem). It was 120px, which was 26px more than anything occupied — measured as a dead strip between the map's bottom edge and the nav bar — then 94px once that strip was removed, and now 78px after the top gap was tightened too (2026-07-25). dvh, not vh: on iOS Safari vh is the URL-bar-HIDDEN (taller) height, so a vh-only map overflows under the fixed nav bar whenever the toolbar is showing — the exact bug this rule is meant to prevent. vh line kept first as the fallback. */ .tab-panel.flex-panel { height: calc(100vh - 78px - 46px - env(safe-area-inset-bottom)); height: calc(100dvh - 78px - 46px - env(safe-area-inset-bottom)); } /* Info tab must not scroll at all — the panel is sized to exactly fill the viewport between header and nav bar. Two things made it scroll anyway, both entirely below the fold and therefore invisible: - app-main's bottom padding, which exists to clear the fixed nav on the Weather tab, but here the panel already ends at the bar; - the credits footer, measured at 810–876px on an 812px screen, i.e. sitting behind the nav bar. Together they gave the Info tab 64px of phantom scroll, so it could open showing nothing but empty space. Footer is kept on Weather and on desktop. .tab-map is set on by the activeTab watcher in js/use-app-shell.js — a :class binding on the #app mount root is a silent no-op in Vue 3. */ .tab-map .app-main { /* 1.5rem → 0.5rem. On the Weather tab that top gap separates the header from free-scrolling cards and earns its place; on the Info tab it is pure headroom above a height-locked panel, and every pixel of it is a pixel of NOTAM text. The 16px recovered is handed to the SIDEBAR, not the map — see .map-layout below, where the sidebar's constant absorbs exactly this amount so the map stays the size it already was. */ padding-top: 0.5rem; padding-bottom: 0; } .tab-map .app-footer-info { display: none; } /* +29px on top of the sidebar's established 47dvh share, from two separate reclaims (both 2026-07-25, both Leonard's call): +13px — half of the 26px dead strip that used to sit under the map; the map took the other half. +16px — ALL of the top headroom recovered in .tab-map .app-main above. It goes to the sidebar rather than being shared because the ask was explicitly for NOTAM content; the map is already at the size the first split gave it and holds there (the grid's 1fr row simply gets what is left). See the 1024px block for why the share is dvh and not a fixed pixel height. */ .map-layout { grid-template-rows: calc(47vh + 29px) 1fr; grid-template-rows: calc(47dvh + 29px) 1fr; } .map-sidebar { height: calc(47vh + 29px); height: calc(47dvh + 29px); } .clocks { padding-right: 0; } .clocks .clock-divider { display: none; } .clocks.time-mode-L .clock-item-utc { display: none; } .clocks.time-mode-Z .clock-item-hkt { display: none; } .header-left { grid-area: left; width: auto; display: flex; justify-content: flex-start; align-items: center; } .brand-title { display: none; } /* Nudge the version/last-refreshed corner stamps clear of the new fixed bottom bar (~46px + safe-area) — both are position:fixed at bottom:1rem/2.2rem by default, which now lands underneath it. */ .last-refreshed { bottom: calc(1rem + 46px + env(safe-area-inset-bottom)); } .app-version { bottom: calc(2.2rem + 46px + env(safe-area-inset-bottom)); } /* On the Info (map) tab the map fills the lower viewport, so these bottom-right fixed stamps land on top of it — illegible over the tiles, especially in light theme. Hide them there; the Weather tab (natural scroll, they sit over the footer) keeps them. The NOTAM panel header already shows its own fetch timestamp, so no info is lost on the map tab. */ .tab-map .app-version, .tab-map .last-refreshed { display: none; } /* Bottom tab bar (2026-07-22) — the header's nav (nested inside .app-header, whose backdrop-filter makes it the containing block for any position:fixed descendant) is hidden; the duplicate copy rendered as a sibling of
in index.html (.app-tabs-bottom) is shown instead, fixed to the real viewport bottom, ForeFlight/iOS-style. Desktop is untouched — both this hide and the fixed bar are inside the ≤768px query only. */ .header-inner .app-tabs { display: none; } .app-tabs-bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; width: 100%; display: flex; margin: 0; padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom)); border-radius: 0; border: none; border-top: 1px solid var(--glass-border); background: rgba(8, 10, 15, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } body.light-theme .app-tabs-bottom { background: rgba(255, 255, 255, 0.92); } .app-tabs-bottom .tab-btn { flex: 1; justify-content: center; } .app-tabs-bottom .tab-text { display: none; } .header-right { grid-area: right; width: auto; display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; padding: 0; box-sizing: border-box; } /* 3+ HKO severe-weather badges in .header-alerts (header-left) push the clock out of the header-right column on narrow screens. Drop mute + refresh in that case to give the timestamp room back; theme toggle stays (only two buttons left, still reachable via the pull-to-refresh gesture and the bottom nav). */ .controls-row.controls-crowded .sound-toggle-btn, .controls-row.controls-crowded .refresh-btn { display: none; } .atis-vector-layout { flex-direction: column; align-items: center; gap: 1rem; } .vector-widget { order: 1; /* Helipad SVG on top */ } .atis-decoded-indicators:first-of-type { order: 2; /* Wind, VIS, QNH row directly below SVG */ } .atis-decoded-indicators:last-of-type { order: 3; /* Cloud, WX row at the bottom */ } .atis-decoded-indicators { width: 100%; flex-direction: row; gap: 0.5rem; } .atis-decoded-indicators .d-ind { flex: 1; border-radius: 6px !important; border: 1px solid var(--glass-border) !important; } .wind-telemetry { grid-template-columns: 1fr; } .vector-widget { flex-direction: column; } /* NOTAM header row trim (2026-07-22, revised 2026-07-25) — status dot, title, the NOW/TODAY/ALL scope segments, the A/C series pills and the AIS link all sit in one row (see .notam-meta-row) at every width; the status dot and AIS link are icon-only throughout. Mobile has ~82px less room than desktop, so the scope segments give up horizontal padding here. Measured, not guessed — see the maintenance log. Vertical padding is trimmed here too (0.6rem base → 0.45rem): once the filters became 38px-tall dropdowns (css/16-notam-filter-mobile.css) the control, not the padding, sets this row's height, so the padding is pure overhead on a sidebar where every pixel is a line of NOTAM text. Desktop keeps 0.6rem — its segments are short enough that the padding is what gives the row its shape. */ .notam-meta-row { gap: 0.35rem; padding: 0.45rem 1rem; } .notam-seg { padding: 0.25rem 0.4rem; } }