/* flex:1 + min-height:0 fills whatever space is left under the header — a fixed calc() assumed a 1-line 52px header, but on narrow screens the nav wraps to 2 lines and the real header is taller, which pushed .explore past the viewport and made the whole page scrollable instead of just the map filling the screen. See body--fill on . overflow:clip (not just hidden) — confirmed live on mobile 2026-08-23: .explore__panel's closed (translateY(100%)) mobile sheet is out-of-flow (position:absolute) but still counts toward .explore's *scrollable* overflow because it's the sheet's containing block, so .explore's scrollHeight ends up taller than its viewport. overflow:hidden still allows that phantom area to be scrolled into programmatically (a tap/focus near the sheet was enough to set .explore's scrollTop to ~518px), which silently shifted .explore__map and everything nested in it (the group-panel sheet) upward by that same amount, making the group-panel render mostly off-screen. overflow:clip additionally disables all scrolling (programmatic included) on a box that was never meant to scroll in the first place — the fix is at the container, not the sheet, since anything absolutely positioned inside .explore could trigger the same class of bug. Kept the `hidden` line above it as a fallback for the handful of browsers that don't understand `clip`; the later declaration wins where supported. */ .explore { display: flex; flex: 1; min-height: 0; position: relative; overflow: hidden; overflow: clip; /* Desktop sidebar (list) width — roughly a half-and-half split with the map so more announcements are visible at once, and the results grid (minmax auto-fill) naturally lands 2–3 cards per row (user feedback 2026-09-02). Mobile ignores this (the panel is off-canvas full-width below). One var so the .group-panel offset stays in sync. */ --sidebar-w: clamp(420px, 50vw, 900px); } .explore__panel { width: var(--sidebar-w); flex-shrink: 0; padding: .85rem 1rem 1.25rem; border-right: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; gap: .65rem; /* Anchors .filters-drawer below. No longer the scroll container itself (see .explore__list-section) — user feedback 2026-08-23: filters and results used to share one continuously-scrolling column, so opening filters could shove the results out of view. Filters is now a drawer over this whole panel; results get their own independent scroll region below whatever stays fixed (the filters trigger + active chips). */ position: relative; } /* The one thing that actually scrolls in the sidebar now — everything above it (filters trigger, active-filter chips) stays put via flex's default (no flex-shrink needed, block children don't shrink below content size by default). min-height:0 is required for flex:1 to actually constrain height instead of just growing to fit content — same pattern already used for .explore__map's own flex:1 sibling and body.body--fill main. */ .explore__list-section { flex: 1; min-height: 0; overflow-y: auto; /* .65rem -> .4rem — user feedback 2026-08-24: too much empty space between the chart card and the results list below it. */ display: flex; flex-direction: column; gap: .4rem; } /* Full-panel overlay (not just the map, not just the results) — desktop only; reset back to normal in-flow behavior for mobile below, where #filters-form already has its own working tab-based show/hide via mobileTab/openMobileTab and doesn't need a second overlay mechanism layered on top. */ .filters-drawer { position: absolute; inset: 0; z-index: 20; overflow-y: auto; background: var(--panel); border-radius: inherit; /* Top padding clears the floating .panel-tabs strip (which overlays this at z-index 21) so the segmento toggle (Todos/Comprar/Alugar) isn't hidden behind it — 3.35rem was short of the strip's real height (~4rem: .85rem panel pad + ~2.6rem tab + .55rem strip pad), so the toggle's top was cut off (user report 2026-09-02). The drawer scrolls, so the extra space is free. Sides/bottom unchanged from the old .85/1/1.25rem. */ padding: 4.6rem 1rem 1.25rem; } .explore__map { flex: 1; position: relative; min-width: 0; } #mappia-frame { width: 100%; height: 100%; border: 0; display: block; } .map-loading-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 45; overflow: hidden; background: rgba(38,96,224,.15); } .map-loading-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: var(--accent); border-radius: 2px; animation: map-loading-sweep 1.1s ease-in-out infinite; } @keyframes map-loading-sweep { 0% { left: -30%; } 100% { left: 100%; } } /* Small circular spinner echoing the map's own loading bar. Lives on the Lista button (moved there from Filtros — user feedback 2026-08-17: mapLoading means listings are loading, which is what "Lista" opens to, not the filter form). Uses currentColor so it reads correctly on both buttons' different backgrounds without a separate variant. */ .explore__mobile-toggle-spinner { width: 14px; height: 14px; border-radius: 999px; flex-shrink: 0; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; animation: explore-toggle-spin .7s linear infinite; } @keyframes explore-toggle-spin { to { transform: rotate(360deg); } } .panel-heading { font-size: .72rem; margin: 0; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; } /* Filter form redesign, loosely inspired by QuintoAndar's mobile filter sheet (2026-08-14 reference): stacked labeled sections with big, obvious tap targets instead of a dense unlabeled 2-column grid of bare selects/inputs. */ .filters { display: flex; flex-direction: column; gap: .95rem; } .filters select, .filters input { width: 100%; padding: .62rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1rem; } .filter-section__label { font-size: .74rem; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .4rem; } .segmento-toggle { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: .2rem; gap: .2rem; } .segmento-toggle button { flex: 1; border: none; background: none; padding: .55rem .4rem; border-radius: 999px; font-size: .86rem; font-weight: 700; color: var(--muted); cursor: pointer; } .segmento-toggle button.is-active { background: var(--accent); color: var(--accent-contrast); } .chip-toggle-row { display: flex; flex-wrap: wrap; gap: .4rem; } .chip-toggle { border: 1.5px solid var(--border); background: var(--bg); border-radius: 999px; padding: .42rem .85rem; font-size: .84rem; font-weight: 650; color: var(--text); cursor: pointer; } .chip-toggle.is-active { border-color: var(--accent); background: rgba(38,96,224,.1); color: var(--accent); } .range-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .range-pair label { font-size: .72rem; color: var(--muted); margin-bottom: .25rem; display: block; } .ac-wrap { position: relative; } .ac-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin: 0; padding: .25rem 0; list-style: none; background: var(--panel); border: 1px solid var(--border); border-radius: 0 0 8px 8px; max-height: 200px; overflow-y: auto; box-shadow: 0 8px 20px var(--shadow-color); } .ac-list li { padding: .45rem .65rem; cursor: pointer; font-size: .88rem; } .ac-list li:hover, .ac-list li[aria-selected="true"] { background: rgba(38,96,224,.12); color: var(--accent); } /* These
  • s are keyboard-operable (tabindex+role=button, see the HTML) but not natively focusable elements, so browsers don't give them a default focus ring the way a real