(no display:flex by
default), so flex:1 was being silently ignored. Map-only view then had
height:auto + a grid row sized to map-wrap's intrinsic height (0, since
all map-wrap children are position:absolute) = 0 tall map. Forcing the
section to be a flex column repairs the chain so the grid fills the
remaining space below the filter bar regardless of the bar's actual
height. */
.dw-search-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dw-search-results { height: auto; flex: 1; min-height: 0; }
.dw-search-results[data-view="split"] { grid-template-columns: 1fr !important; }
.dw-search-results[data-view="split"] .dw-results-map-wrap { display: none !important; }
/* Hide desktop split-view button on mobile (split doesn't make sense on phones) */
#dw-view-split { display: none; }
}
/* M-Mob-2: filter bar restructure on mobile.
Wrap chips into a horizontal-scroll strip and stack the search bar above
them so the bar takes 2 rows max instead of 3-4 from flex-wrap chaos. */
@media (max-width: 720px) {
.dw-filter-bar-inner {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px var(--dw-sp-4);
/* M-Mob-7.4: contain horizontal overflow from the chip strip so iOS
Safari's bounce gesture doesn't slide the whole page sideways. */
overflow-x: hidden;
}
.dw-filter-search {
max-width: none;
width: 100%;
min-width: 0;
}
.dw-filter-chips {
flex-wrap: nowrap;
overflow-x: auto;
/* M-Mob-7.4: removed the `margin: 0 -16px` extension. The fade-mask
still sells "more to scroll" without needing the chip strip to
extend past the parent's padding box (which was leaking horizontal
overflow to the body on iOS). */
padding: 2px 0;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
/* Soft fade-out on right edge so the user knows there's more to scroll. */
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.dw-filter-chips::-webkit-scrollbar { display: none; }
.dw-filter-chip,
.dw-filter-chip-reset,
.dw-filter-chip-save { flex-shrink: 0; }
/* Hide desktop view-toggle row on mobile — replaced by floating .dw-mob-view-pill.
Sort still useful on mobile but lower priority — collapse for now. */
.dw-filter-right { display: none; }
}
/* M-Mob-7.4: hide top header on /search mobile and slide the filter bar
up to the top. With the bottom nav handling navigation, the top dwello
bar was wasted real estate — 64px reclaimed for actual results.
The view-transition-name on .dw-header still works on other pages;
display:none here just means /search doesn't participate in the header
transition (clean disappear, no awkward animation). */
@media (max-width: 900px) {
body.dw-searchpage .dw-header { display: none; }
body.dw-searchpage .dw-filter-bar {
top: 0;
/* iOS notch clearance — without this the filter bar tucks under
the status bar on iPhone X+ */
padding-top: env(safe-area-inset-top);
}
/* Belt-and-suspenders against any future inner overflow leaking to body. */
body.dw-searchpage { overflow-x: hidden; }
}
/* M-Mob-7.6: For Rent locks Type filter — soft note in the locked slot. */
.dw-more-locked-note {
padding: 12px 14px;
background: var(--dw-mist);
border: 1px dashed var(--dw-outline-strong);
border-radius: 10px;
color: var(--dw-text-3);
font-size: 13px;
line-height: 1.5;
}
/* M-Mkt-PublicParity (2026-04-27): unified "Filters" pill is now the
primary control on BOTH desktop and mobile. The 6 per-filter chips
(price/beds/baths/type/status/more) are hidden everywhere — the
Filters sheet contains every section. Save + Clear stay visible at
the bar level on desktop; Clear hides on mobile (lives in sheet footer). */
body.dw-searchpage .dw-filter-chip-all {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--dw-slate);
color: #fff;
border-color: var(--dw-slate);
font-weight: 600;
}
body.dw-searchpage .dw-filter-chip-all svg { stroke: currentColor; }
body.dw-searchpage .dw-filter-chip-all.has-value {
background: var(--dw-sky);
border-color: var(--dw-sky);
}
body.dw-searchpage .dw-filter-chip-all .dw-filter-chip-val {
margin-left: 2px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(255,255,255,0.22);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
}
body.dw-searchpage .dw-filter-chip[data-filter="price"],
body.dw-searchpage .dw-filter-chip[data-filter="beds"],
body.dw-searchpage .dw-filter-chip[data-filter="baths"],
body.dw-searchpage .dw-filter-chip[data-filter="type"],
body.dw-searchpage .dw-filter-chip[data-filter="status"],
body.dw-searchpage .dw-filter-chip[data-filter="more"] {
display: none;
}
@media (max-width: 720px) {
/* M-Mob-7.7: hide the bar-level Clear chip on mobile — Clear lives only
inside the Filters sheet footer. Mobile bar minimal: Filters · Save. */
body.dw-searchpage .dw-filter-chip-reset {
display: none !important;
}
}
/* M-Mob-2: extra bottom padding on the list so the floating pill doesn't
overlay the last card. ~64px pill height + 16px breathing room + safe-area. */
@media (max-width: 900px) {
body.dw-searchpage .dw-results-list-wrap {
padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
}
/* M-Mob-5: touch targets — Apple HIG min is 44×44. Bump key tappable
chrome on mobile. Filter chips were ~30px tall, mobile menu btn 40×40,
side btn-chips ~32px. */
@media (max-width: 720px) {
.dw-filter-chip,
.dw-filter-chip-reset,
.dw-filter-chip-save {
min-height: 44px;
padding-top: 10px;
padding-bottom: 10px;
}
.dw-mobile-menu-btn { width: 44px; height: 44px; }
.dw-btn-chip { min-height: 44px; padding: 10px 14px; }
/* Listing card favorite/share-button sized targets are inside cards, but
the listing-cta-btn and mob-view-pill should also clear 44px. */
body.dw-listingpage .dw-listing-cta-btn { min-height: 44px; }
body.dw-searchpage .dw-mob-view-pill { min-height: 44px; }
}
/* M-Mob-5: listing detail page — entire body needs bottom padding so the
sticky CTA bar doesn't cover the last sections (collab + similar listings).
The earlier .dw-listing-main rule only padded the body+sidebar grid; the
sections AFTER it (REACTIONS+NOTES, Similar properties) extended below the
bar. Apply to the entire page on mobile non-Closed listings. */
@media (max-width: 900px) {
body.dw-listingpage {
padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
}
/* M-Mob-5: listing gallery on mobile — the 4-thumb side-grid below the
main photo is unusable at 375px (each thumb is ~90px tall). Hide it
entirely; the main photo + "View all photos" expand button is enough,
and the lightbox swipe gesture (already wired) lets the user browse
the full set. Existing 720px rules already collapse main to 1fr 4:3
so no other overrides needed. */
@media (max-width: 720px) {
.dw-gallery-side { display: none; }
}
/* M-Mob-2: floating list ↔ map toggle pill. Visible only on /search mobile.
Centered at the bottom of viewport, glassy pill shape, switches between
"List" and "Map" labels depending on current view. */
.dw-mob-view-pill {
display: none;
}
@media (max-width: 900px) {
body.dw-searchpage .dw-mob-view-pill {
display: inline-flex;
align-items: center;
gap: 8px;
position: fixed;
bottom: max(16px, env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
z-index: 60;
padding: 12px 22px;
background: var(--dw-text);
color: var(--dw-bg);
border: none;
border-radius: 999px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 20px rgba(20, 32, 50, 0.22), 0 1px 3px rgba(20, 32, 50, 0.10);
transition: transform 160ms var(--dw-ease), box-shadow 240ms var(--dw-ease);
-webkit-tap-highlight-color: transparent;
}
body.dw-searchpage .dw-mob-view-pill:active {
transform: translateX(-50%) scale(0.96);
}
body.dw-searchpage .dw-mob-view-pill svg {
width: 16px; height: 16px;
}
}
.dw-results-list-wrap {
overflow-y: auto;
padding: var(--dw-sp-4) var(--dw-sp-5);
position: relative; /* Ship 7n: needed for ::after progress bar anchoring */
}
/* Ship 7n: smooth map-pan → grid update.
Loading state — shows while a fetch is in flight. Grid dims + a thin
animated progress bar slides across the top. Applied only for
viewport refetches (non-append), not infinite scroll. */
.dw-results-list-wrap .dw-results-grid {
transition: opacity 140ms ease;
}
.dw-results-list-wrap.is-fetching .dw-results-grid {
opacity: 0.68;
pointer-events: none;
}
.dw-results-list-wrap.is-fetching::after {
content: "";
position: sticky; /* sticky so it stays at top of the scrollable area */
top: 0; left: 0; right: 0;
display: block;
height: 2px;
background: linear-gradient(
90deg,
transparent 0%, transparent 30%,
var(--dw-sky) 45%, var(--dw-sky) 55%,
transparent 70%, transparent 100%
);
background-size: 220% 100%;
animation: dw-progress-slide 1300ms linear infinite;
pointer-events: none;
margin-top: -2px; /* pull up so it hovers at the very top */
z-index: 5;
}
@keyframes dw-progress-slide {
0% { background-position: 100% 0; }
100% { background-position: -120% 0; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Ship 1C: card visual sync when pin is hovered. Subtle sky-blue accent
outline + slight lift so the pair feels like a unit. Transform scale
stays tiny (1.01) to avoid layout jank in the CSS grid.
═══════════════════════════════════════════════════════════════════════════ */
.dw-card.is-map-hovered {
outline: 2px solid var(--dw-sky);
outline-offset: 2px;
z-index: 2;
transform: scale(1.01);
transition:
outline-color 140ms cubic-bezier(0.4, 0, 0.2, 1),
transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ═══════════════════════════════════════════════════════════════════════════
Ship 7r: DOM-based map pins — brand-quality pill markers
═══════════════════════════════════════════════════════════════════════════
Individual listing pins are rendered as DOM elements via
mapboxgl.Marker (not WebGL symbol layers). This gives us real CSS
control: backdrop-filter blur, layered shadows, smooth transitions,
typography hierarchy. Clusters stay WebGL for scale; individual pins
are capped by viewport (<500 in practice after clusterMaxZoom=13).
Pill structure:
$450k
*/
.dw-map-pin {
--dw-pin-bg: var(--dw-surface);
--dw-pin-text: var(--dw-text);
--dw-pin-border: var(--dw-outline-strong);
--dw-pin-dot: #3FB876;
--dw-pin-shadow: 0 4px 14px rgba(20, 32, 50, 0.22), 0 1px 3px rgba(20, 32, 50, 0.10);
display: none; /* hidden until zoom threshold met */
position: relative; /* anchors the absolute price-drop chip */
align-items: center;
gap: 6px;
padding: 7px 12px 7px 10px;
background: var(--dw-pin-bg);
color: var(--dw-pin-text);
border: 1px solid var(--dw-pin-border);
border-radius: 999px;
font-family: var(--font-display, 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
font-weight: 700;
font-size: 12px;
line-height: 1;
white-space: nowrap;
cursor: pointer;
user-select: none;
text-decoration: none; /* Ship 1C:
element, strip default underline */
box-shadow: var(--dw-pin-shadow);
/* Perf-2026-04-28: backdrop-filter on every pin was the headline lag
source once clusters break — each visible pin requires a separate
GPU blur composite. With 100+ pins on screen it pegs paint cost.
Solid surface bg renders effectively instantly. */
/* (removed backdrop-filter: blur(8px)) */
transition:
background-color 140ms ease,
color 140ms ease,
border-color 140ms ease,
box-shadow 140ms ease;
}
/* Show the pin only when zoomed past the cluster threshold. This is
toggled by dwMapApplyZoomVisibility() on every zoom event. */
.dw-map-zoomed-in .dw-map-pin { display: inline-flex; }
.dw-map-pin-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--dw-pin-dot);
flex-shrink: 0;
box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
.dw-map-pin-price {
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
}
/* Status color variants — only the DOT changes by default. Pill stays
quiet/neutral so the map doesn't read as a highlighter-marker mess. */
.dw-map-pin[data-status="active"] { --dw-pin-dot: #3FB876; }
.dw-map-pin[data-status="soon"] { --dw-pin-dot: #0EA5A5; }
.dw-map-pin[data-status="pending"] { --dw-pin-dot: #F59E0B; }
/* Closed listings recede — muted background + lighter text + smaller dot */
.dw-map-pin[data-status="closed"] {
--dw-pin-bg: var(--dw-surface-subtle);
--dw-pin-text: var(--dw-text-2);
--dw-pin-dot: #64748B;
font-weight: 500;
opacity: 0.85;
}
/* Hover state — lift via shadow deepening, switch to dwello sky accent */
.dw-map-pin:hover,
.dw-map-pin.is-hovered,
.dw-map-pin.is-active {
--dw-pin-bg: var(--dw-sky);
--dw-pin-text: #ffffff;
--dw-pin-border: var(--dw-sky);
--dw-pin-shadow: 0 10px 28px rgba(110, 181, 233, 0.45), 0 2px 8px rgba(110, 181, 233, 0.25);
z-index: 10;
}
.dw-map-pin:hover .dw-map-pin-dot,
.dw-map-pin.is-hovered .dw-map-pin-dot,
.dw-map-pin.is-active .dw-map-pin-dot {
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.25);
}
/* Dark theme — pill adapts naturally via --dw-surface/--dw-text. Bump
shadow opacity since dark bg is very dark already. */
[data-theme="dark"] .dw-map-pin {
--dw-pin-bg: rgba(22, 31, 44, 0.92);
--dw-pin-border: rgba(255, 255, 255, 0.14);
--dw-pin-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .dw-map-pin-dot {
box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.4);
}
/* Ship 1C: just-listed pulse. Pins for listings ≤3 days old get a
gentle breathing animation on the status dot only (not the whole
pill — too loud). Pauses on hover so the pulse doesn't compete
with the hover accent (both would be attention-grabby). */
@keyframes dw-pin-dot-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.55); opacity: 0.65; }
}
.dw-map-pin[data-new="true"] .dw-map-pin-dot {
animation: dw-pin-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.dw-map-pin[data-new="true"]:hover .dw-map-pin-dot,
.dw-map-pin[data-new="true"].is-hovered .dw-map-pin-dot,
.dw-map-pin[data-new="true"]:focus-visible .dw-map-pin-dot {
animation: none;
}
/* Ship 1C price-drop chip on pins (green per Ship 1C+ to match the
.dw-card-badge-price-drop color on listing cards — visual consistency
across surfaces). Small green badge in the top-right corner of the
pill. Ring via surface-colored border so it reads as a separate
element floating above. */
.dw-map-pin-drop {
position: absolute;
top: -5px;
right: -5px;
min-width: 14px;
height: 14px;
padding: 0 3px;
background: rgba(63, 184, 118, 0.95); /* matches .dw-card-badge-price-drop */
color: #fff;
font-size: 9px;
font-weight: 700;
line-height: 14px;
text-align: center;
border-radius: 999px;
border: 1.5px solid var(--dw-surface);
pointer-events: none; /* don't shift click target from the pill */
}
[data-theme="dark"] .dw-map-pin-drop {
border-color: rgba(22, 31, 44, 1);
}
/* Ship 7o/1B → 1C: map pin popup card. Shown when user HOVERS an
unclustered pin (not click). Click on pin navigates — popup is info
preview only. Pointer-events remain interactive on popup so user can
rest mouse on it while reading (pauses the hide timer in JS). Close
button hidden since popups auto-dismiss on hover-out. */
.mapboxgl-popup.dw-map-popup-wrap .mapboxgl-popup-content {
padding: 0;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 28px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.14);
width: 280px;
background: var(--dw-surface);
}
.mapboxgl-popup.dw-map-popup-wrap .mapboxgl-popup-close-button {
display: none;
}
/* Ship 1C: fade-in + gentle rise when popup appears. The outer Mapbox
popup sets its own transform for positioning — we can't touch it
without breaking map-coordinate tracking. Instead we animate an
inner wrapper (.dw-map-popup-inner) built inside the popup content. */
.dw-map-popup-inner {
opacity: 0;
transform: translateY(6px) scale(0.985);
transform-origin: center bottom;
transition:
opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mapboxgl-popup.dw-map-popup-wrap.is-visible .dw-map-popup-inner {
opacity: 1;
transform: translateY(0) scale(1);
}
.dw-map-popup-photo {
display: block;
position: relative;
width: 100%;
height: 150px;
overflow: hidden;
}
.dw-map-popup-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 400ms ease;
}
.dw-map-popup-photo:hover img { transform: scale(1.03); }
.dw-map-popup-status {
position: absolute;
top: 10px; left: 10px;
font-size: 10px;
padding: 4px 9px;
}
.dw-map-popup-body {
padding: 12px 14px 14px;
}
.dw-map-popup-price {
font-family: var(--font-display, inherit);
font-size: 20px;
font-weight: 800;
color: var(--dw-text);
line-height: 1.15;
}
.dw-map-popup-specs {
font-size: 12px;
color: var(--dw-text-2);
margin-top: 3px;
}
.dw-map-popup-addr {
font-size: 13px;
color: var(--dw-text);
margin-top: 6px;
line-height: 1.35;
/* Keep single-line-ish — long addresses ellipsis */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Fade-in animation for newly-inserted cards during diff rendering.
Only applied to cards that didn't exist in the previous render —
existing cards stay untouched. Animation is class-gated so a re-fetch
that keeps the card doesn't re-trigger the entrance. */
@keyframes dw-card-enter {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.dw-card.dw-card-entering {
animation: dw-card-enter 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.dw-results-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--dw-sp-4);
}
.dw-results-count {
font-size: 14px;
color: var(--dw-text-2);
font-weight: 500;
}
.dw-results-count strong { color: var(--dw-text); font-weight: 700; }
.dw-results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--dw-sp-5);
}
.dw-search-results[data-view="list"] .dw-results-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.dw-results-map-wrap {
position: relative;
background: var(--dw-mist);
border-left: 0.5px solid var(--dw-outline);
}
.dw-map-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--dw-text-3);
gap: var(--dw-sp-4);
}
.dw-map-placeholder-text {
font-size: 14px;
text-align: center;
}
.dw-map-placeholder-text small {
font-size: 11px;
opacity: 0.7;
}
/* Ship 7c: main search Mapbox map.
Ship 7k FIX: switched from `position: absolute; inset: 0` to explicit
`width/height: 100%` + `position: relative`. Root cause of the
multi-day black-panel saga: Mapbox GL's own CSS (injected via JS at
runtime) declares `.mapboxgl-map { position: relative; }` with same
specificity as our rule. Loading order → Mapbox wins the cascade →
our position:absolute becomes relative → `inset: 0` no longer stretches
to parent → container collapses to 0 height (Mapbox's children are all
position:absolute, so intrinsic content height is 0) → canvas falls
back to HTML default 300px (visible as canvas=1001x300 in
the diag logs).
Using explicit 100% dims works regardless of position:relative vs
absolute + plays nicely with Mapbox setting the class. */
.dw-results-map {
position: relative;
width: 100%;
height: 100%;
}
.dw-results-map .mapboxgl-canvas { outline: none; }
/* Ship 7l/1A: "Search as I move the map" toggle + "Redo search here" CTA.
Floats above the map. Glass-morphism matches the status-pill treatment
used on listing cards over photos. Sits top-right so Mapbox's
NavigationControl (also top-right) moves down slightly but still has
its own column. */
.dw-map-toggle {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.92);
color: var(--dw-text);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--dw-radius-pill);
font-size: 12px;
font-weight: 600;
cursor: pointer;
user-select: none;
box-shadow: var(--dw-shadow-sm);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all var(--dw-dur-snap) var(--dw-ease);
}
.dw-map-toggle:hover { box-shadow: var(--dw-shadow-md); }
.dw-map-toggle input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px; height: 16px;
border: 1.5px solid var(--dw-outline-strong);
border-radius: 3px;
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: all var(--dw-dur-snap) var(--dw-ease);
}
.dw-map-toggle input[type="checkbox"]:checked {
background: var(--dw-sky);
border-color: var(--dw-sky);
}
.dw-map-toggle input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 4px; top: 1px;
width: 4px; height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
[data-theme="dark"] .dw-map-toggle {
background: rgba(15, 22, 33, 0.82);
color: #fff;
border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .dw-map-toggle input[type="checkbox"] {
border-color: rgba(255, 255, 255, 0.35);
}
/* "Redo search here" — appears above map center when toggle is OFF
AND user has panned since last search. */
.dw-map-redo {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: var(--dw-sky);
color: #fff;
border: none;
border-radius: var(--dw-radius-pill);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 14px rgba(110, 181, 233, 0.45);
animation: dw-fade-up 260ms var(--dw-ease) both;
transition: transform var(--dw-dur-snap) var(--dw-ease), box-shadow var(--dw-dur-snap) var(--dw-ease);
}
.dw-map-redo:hover {
transform: translateX(-50%) translateY(-1px);
box-shadow: 0 6px 18px rgba(110, 181, 233, 0.55);
}
.dw-map-redo[hidden] { display: none; }
/* ═══════════════════════════════════════════════════════════════════════════
Ship 2/Phase-2: Draw-to-search UI
═══════════════════════════════════════════════════════════════════════════
Draw chip (in filter bar) + toolbar overlay on map + apply bar at bottom.
When draw mode is active, .dw-draw-mode class gets added to the map-wrap.
That triggers: cursor change, pin click-through disabled, etc.
*/
/* "Draw area" button on the map (top-right, under the search-as-I-move
toggle). Icon-only by default; ✕ appears inline when a shape is
applied. Same glass-morphism treatment as the toggle for visual
unity of map-chrome controls. */
.dw-map-draw-btn {
position: absolute;
top: 58px; /* under the toggle (~46px toggle + 12px top + 10 gap) */
right: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 10px;
min-width: 36px;
min-height: 36px;
background: rgba(255, 255, 255, 0.92);
color: var(--dw-text);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--dw-radius-pill);
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 600;
box-shadow: var(--dw-shadow-sm);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all var(--dw-dur-snap) var(--dw-ease);
}
.dw-map-draw-btn:hover { box-shadow: var(--dw-shadow-md); }
.dw-map-draw-btn.is-active {
background: var(--dw-sky);
color: #fff;
border-color: var(--dw-sky);
box-shadow: 0 6px 18px rgba(110, 181, 233, 0.35);
}
.dw-map-draw-btn.is-drawing {
background: var(--dw-sky);
color: #fff;
border-color: var(--dw-sky);
}
.dw-map-draw-btn .dw-map-draw-remove {
display: none;
margin-left: 4px;
padding: 0 3px;
font-size: 13px;
font-weight: 600;
opacity: 0.92;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: opacity 120ms ease;
}
.dw-map-draw-btn .dw-map-draw-remove:hover { opacity: 1; }
.dw-map-draw-btn.is-active .dw-map-draw-remove { display: inline-flex; align-items: center; }
[data-theme="dark"] .dw-map-draw-btn {
background: rgba(15, 22, 33, 0.82);
color: #fff;
border-color: rgba(255, 255, 255, 0.14);
}
/* ─── Mobile: align bottom-map pills with the floating List pill ─
List pill is `position: fixed` (viewport-anchored). The grand-total
chip + Layers picker default to `position: absolute` (map-wrap-
anchored). Even with identical `bottom:` calcs the two reference
frames differ → vertical mis-alignment. Switch to `position: fixed`
on mobile so all three pills share the viewport reference and their
bottom edges line up exactly. */
@media (max-width: 900px) {
body:not(.dw-body-match) .dw-map-count-chip,
body:not(.dw-body-match) .dw-map-layers-btn {
position: fixed;
bottom: calc(56px + 16px + env(safe-area-inset-bottom));
}
body:not(.dw-body-match) .dw-map-count-chip { left: 12px; right: auto; }
body:not(.dw-body-match) .dw-map-layers-btn { right: 12px; left: auto; }
body:not(.dw-body-match) .dw-map-layers-popover {
position: fixed;
right: 12px; left: auto;
bottom: calc(56px + 16px + env(safe-area-inset-bottom) + 48px);
}
}
/* ─── Ship C 2026-04-27: bottom-left grand-total chip ──────────── */
.dw-map-count-chip {
position: absolute;
left: 12px;
bottom: 12px;
z-index: 2;
display: inline-flex;
align-items: baseline;
gap: 5px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.94);
color: var(--dw-text);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--dw-radius-pill);
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 500;
box-shadow: var(--dw-shadow-sm);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all var(--dw-dur-snap) var(--dw-ease);
}
.dw-map-count-chip:hover { box-shadow: var(--dw-shadow-md); transform: translateY(-1px); }
.dw-map-count-chip[hidden] { display: none; }
.dw-map-count-num {
font-family: var(--dw-font-display, inherit);
font-weight: 700;
font-size: 14px;
color: var(--dw-sky);
letter-spacing: -0.01em;
}
.dw-map-count-label { color: var(--dw-text-3); font-size: 11.5px; }
[data-theme="dark"] .dw-map-count-chip {
background: rgba(15, 22, 33, 0.85);
color: #fff;
border-color: rgba(255, 255, 255, 0.14);
}
/* ─── Ship C 2026-04-27: bottom-right Layers picker ────────────── */
.dw-map-layers-btn {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.94);
color: var(--dw-text);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--dw-radius-pill);
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 600;
box-shadow: var(--dw-shadow-sm);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all var(--dw-dur-snap) var(--dw-ease);
}
.dw-map-layers-btn:hover { box-shadow: var(--dw-shadow-md); }
.dw-map-layers-btn.is-open { background: var(--dw-sky); color: #fff; border-color: var(--dw-sky); }
.dw-map-layers-label { line-height: 1; }
[data-theme="dark"] .dw-map-layers-btn {
background: rgba(15, 22, 33, 0.85);
color: #fff;
border-color: rgba(255, 255, 255, 0.14);
}
.dw-map-layers-popover {
position: absolute;
right: 12px;
bottom: 56px;
z-index: 5;
display: flex;
flex-direction: column;
padding: 6px;
background: var(--dw-surface);
border: 1px solid var(--dw-outline-strong);
border-radius: 12px;
box-shadow: 0 10px 28px rgba(20, 32, 50, 0.22), 0 2px 6px rgba(20, 32, 50, 0.10);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
min-width: 140px;
animation: dw-fade-up 180ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.dw-map-layers-popover[hidden] { display: none; }
.dw-map-layer-opt {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
font-size: 13px;
color: var(--dw-text);
text-align: left;
transition: background var(--dw-dur-snap) var(--dw-ease);
}
.dw-map-layer-opt:hover { background: var(--dw-surface-2); }
.dw-map-layer-opt.is-active {
background: rgba(110, 181, 233, 0.14);
border-color: var(--dw-sky);
color: var(--dw-sky);
font-weight: 600;
}
.dw-map-layer-thumb {
width: 26px;
height: 26px;
border-radius: 6px;
border: 1px solid var(--dw-outline);
flex-shrink: 0;
background-size: cover;
background-position: center;
}
.dw-map-layer-thumb.dark { background: linear-gradient(135deg, #14253b 0%, #1d3252 60%, #233a5b 100%); }
.dw-map-layer-thumb.light { background: linear-gradient(135deg, #f3f5f8 0%, #e6ebf2 60%, #d2dae6 100%); }
.dw-map-layer-thumb.satellite { background: linear-gradient(135deg, #2d4f2a 0%, #4a6b3e 30%, #6b7c5a 60%, #8a8a72 100%); }
/* Auto: split light/dark gradient hints at the "follow theme" behavior */
.dw-map-layer-thumb.auto {
background: linear-gradient(135deg, #f3f5f8 0%, #e6ebf2 49%, #1d3252 51%, #14253b 100%);
}
/* Active-draw-mode adjustments on the map wrap */
.dw-results-map-wrap.dw-draw-mode .mapboxgl-canvas { cursor: crosshair !important; }
.dw-results-map-wrap.dw-draw-mode .dw-map-pin { pointer-events: none; opacity: 0.45; }
.dw-results-map-wrap.dw-draw-mode .dw-map-toggle,
.dw-results-map-wrap.dw-draw-mode .dw-map-redo,
.dw-results-map-wrap.dw-draw-mode .dw-map-count-chip,
.dw-results-map-wrap.dw-draw-mode .dw-map-layers-btn,
.dw-results-map-wrap.dw-draw-mode .dw-map-layers-popover { display: none; }
/* Toolbar at top-center of map during draw mode */
.dw-draw-toolbar {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 12px;
min-width: 320px;
max-width: min(92vw, 480px);
background: var(--dw-surface);
color: var(--dw-text);
border: 1px solid var(--dw-outline-strong);
border-radius: 14px;
box-shadow: 0 10px 28px rgba(20, 32, 50, 0.22), 0 2px 6px rgba(20, 32, 50, 0.10);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-size: 13px;
animation: dw-fade-up 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.dw-draw-toolbar[hidden] { display: none; }
[data-theme="dark"] .dw-draw-toolbar {
background: rgba(22, 31, 44, 0.96);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.dw-draw-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
padding: 3px;
background: var(--dw-surface-subtle);
border-radius: 10px;
}
.dw-draw-tab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 10px;
background: transparent;
border: none;
border-radius: 7px;
color: var(--dw-text-2);
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 140ms ease, color 140ms ease;
}
.dw-draw-tab:hover { color: var(--dw-text); }
.dw-draw-tab.is-active {
background: var(--dw-surface);
color: var(--dw-sky);
box-shadow: 0 1px 2px rgba(20, 32, 50, 0.08);
}
[data-theme="dark"] .dw-draw-tab.is-active {
background: rgba(255, 255, 255, 0.08);
color: var(--dw-sky);
}
.dw-draw-help {
font-size: 12px;
color: var(--dw-text-2);
text-align: center;
padding: 2px 4px;
min-height: 18px;
}
/* Address + miles sub-panel (only visible in radius-addr mode) */
.dw-draw-addr-panel {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 4px;
}
.dw-draw-addr-panel[hidden] { display: none; }
.dw-draw-addr-input {
width: 100%;
padding: 9px 12px;
background: var(--dw-surface-subtle);
border: 1px solid var(--dw-outline);
border-radius: 8px;
color: var(--dw-text);
font-family: inherit;
font-size: 13px;
outline: none;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.dw-draw-addr-input:focus {
border-color: var(--dw-sky);
box-shadow: 0 0 0 2px rgba(110, 181, 233, 0.28);
}
.dw-draw-miles-row {
display: flex;
align-items: center;
gap: 8px;
}
.dw-draw-miles-label {
font-size: 12px;
color: var(--dw-text-2);
font-weight: 500;
}
.dw-draw-miles {
width: 64px;
padding: 6px 8px;
background: var(--dw-surface-subtle);
border: 1px solid var(--dw-outline);
border-radius: 6px;
color: var(--dw-text);
font-family: inherit;
font-size: 13px;
font-weight: 600;
outline: none;
text-align: center;
}
.dw-draw-miles:focus {
border-color: var(--dw-sky);
box-shadow: 0 0 0 2px rgba(110, 181, 233, 0.28);
}
.dw-draw-miles-presets {
display: flex;
gap: 4px;
margin-left: auto;
}
.dw-draw-miles-presets button {
padding: 5px 8px;
min-width: 28px;
background: var(--dw-surface-subtle);
border: 1px solid var(--dw-outline);
border-radius: 6px;
color: var(--dw-text-2);
font-family: inherit;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 140ms ease;
}
.dw-draw-miles-presets button:hover {
border-color: var(--dw-sky);
color: var(--dw-sky);
}
.dw-draw-miles-presets button.is-active {
background: var(--dw-sky);
color: #fff;
border-color: var(--dw-sky);
}
.dw-draw-cancel {
background: none;
border: none;
color: var(--dw-text-3);
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
padding: 4px;
align-self: center;
transition: color 140ms ease;
}
.dw-draw-cancel:hover { color: var(--dw-text); }
/* Apply bar at bottom of map — appears when a shape has been drawn */
.dw-draw-applybar {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: var(--dw-surface);
border: 1px solid var(--dw-outline-strong);
border-radius: 999px;
box-shadow: 0 10px 28px rgba(20, 32, 50, 0.22), 0 2px 6px rgba(20, 32, 50, 0.10);
animation: dw-fade-up 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.dw-draw-applybar[hidden] { display: none; }
[data-theme="dark"] .dw-draw-applybar {
background: rgba(22, 31, 44, 0.96);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.dw-draw-applybar .dw-btn { padding: 8px 16px; font-size: 13px; }
/* Tier 1 (B): live in-shape count chip. Sits inside the apply bar at
the front; updates as user draws or refines the shape. */
.dw-draw-count {
font-size: 13px;
font-weight: 600;
color: var(--dw-sky);
padding: 0 6px 0 10px;
white-space: nowrap;
letter-spacing: -0.01em;
}
.dw-draw-count:empty { display: none; }
.dw-draw-applybar-sep {
width: 1px;
height: 18px;
background: var(--dw-outline);
margin: 0 4px;
}
.dw-draw-count:empty + .dw-draw-applybar-sep { display: none; }
/* Tier 1 (D): mode-specific cursor on the map canvas while drawing.
Crosshair signals "you're drawing now" — same affordance graphics
tools have used forever. Only applied while in draw mode AND the
relevant sub-mode is active (polygon-creation cursor changes back
to grab once the polygon closes and we drop to direct_select). */
.dw-results-map-wrap.dw-draw-mode.dw-draw-polygon .mapboxgl-canvas { cursor: crosshair; }
.dw-results-map-wrap.dw-draw-mode.dw-draw-polygon-freehand .mapboxgl-canvas { cursor: crosshair; }
.dw-results-map-wrap.dw-draw-mode.dw-draw-radius-drag .mapboxgl-canvas { cursor: crosshair; }
.dw-results-map-wrap.dw-draw-mode.dw-draw-radius-addr .mapboxgl-canvas { cursor: default; }
/* Per-shape × delete handle. One DOM marker per applied shape,
anchored to its centroid. Click → that shape removed from
_dwDrawState.shapes[]; everything else (other shapes, filters,
URL, saved-search criteria) re-syncs automatically. */
.dw-shape-delete-handle {
min-width: 26px;
height: 26px;
padding: 0 8px;
border-radius: var(--dw-radius-pill);
background: rgba(255, 255, 255, 0.92);
color: var(--dw-text);
border: 1px solid rgba(0, 0, 0, 0.08);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: var(--dw-shadow-sm);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-family: inherit;
font-size: 13px;
font-weight: 600;
line-height: 1;
opacity: 0.92;
transition: box-shadow 120ms ease, opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.dw-shape-delete-handle:hover {
opacity: 1;
box-shadow: var(--dw-shadow-md);
}
[data-theme="dark"] .dw-shape-delete-handle {
background: rgba(15, 22, 33, 0.82);
color: #fff;
border-color: rgba(255, 255, 255, 0.14);
}
/* Hide during active draw mode — they'd clutter the working area */
.dw-results-map-wrap.dw-draw-mode .dw-shape-delete-handle { display: none; }
/* Mobile: tighten the toolbar so it doesn't dominate the small map.
Single-row tabs are unchanged but padding shrinks; help text is
smaller; cancel button becomes a compact inline link. */
@media (max-width: 640px) {
.dw-draw-toolbar {
top: 8px;
/* Anchor BOTH edges to viewport (8px gutter each side) so the toolbar
can't escape horizontally regardless of parent width. The desktop
`left: 50%; transform: translateX(-50%)` centering breaks on mobile
when the map wrap is wider than viewport. */
left: 8px;
right: 8px;
transform: none;
min-width: 0;
width: auto;
max-width: none;
box-sizing: border-box;
padding: 8px;
gap: 6px;
}
.dw-draw-tabs { gap: 2px; padding: 2px; }
.dw-draw-tab { padding: 6px 8px; font-size: 11px; gap: 4px; }
.dw-draw-tab svg { width: 12px; height: 12px; }
/* Help text must wrap (long strings like "Adding to your selection ·
click corners to draw a new area" otherwise force toolbar wider). */
.dw-draw-help {
font-size: 11px;
min-height: 14px;
padding: 0;
white-space: normal;
word-break: break-word;
line-height: 1.35;
}
.dw-draw-cancel { padding: 4px 8px; font-size: 12px; }
/* Apply bar: viewport-anchored fixed position so it can't be displaced
by the map wrap's width. Centered horizontally above the List pill.
Stack: bottom-nav (56px + safe-area) + List pill row (~64px = 16 gap
+ 44 pill min-height + 4 gap) = ~136px + safe-area below the apply bar. */
.dw-draw-applybar {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(56px + 80px + env(safe-area-inset-bottom));
max-width: calc(100vw - 16px);
padding: 6px 8px;
gap: 4px;
flex-wrap: nowrap;
}
.dw-draw-applybar .dw-btn { padding: 7px 12px; font-size: 12px; }
.dw-draw-count { font-size: 12px; padding: 0 4px 0 8px; }
}
/* Shape overlay: Mapbox fills + outlines for the drawn shape itself.
Layer IDs: dw-shape-fill + dw-shape-outline (see dwello.js). */
/* Places-autocomplete dropdown (minimal styling) */
.dw-draw-places-dropdown {
position: absolute;
background: var(--dw-surface);
border: 1px solid var(--dw-outline-strong);
border-radius: 8px;
box-shadow: 0 8px 20px rgba(20, 32, 50, 0.18);
z-index: 20;
max-height: 220px;
overflow-y: auto;
min-width: 260px;
}
.dw-draw-places-dropdown .dw-draw-place {
padding: 8px 12px;
font-size: 13px;
cursor: pointer;
border-bottom: 1px solid var(--dw-outline);
color: var(--dw-text);
}
.dw-draw-places-dropdown .dw-draw-place:last-child { border-bottom: none; }
.dw-draw-places-dropdown .dw-draw-place:hover,
.dw-draw-places-dropdown .dw-draw-place.is-highlighted {
background: var(--dw-surface-subtle);
color: var(--dw-sky);
}
/* The circle-edit handles (DOM markers for radius modes) */
.dw-draw-handle {
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
border: 2.5px solid var(--dw-sky);
box-shadow: 0 2px 6px rgba(20, 32, 50, 0.35);
cursor: grab;
transition: transform 140ms ease, box-shadow 140ms ease;
}
.dw-draw-handle.dw-draw-handle-center {
background: var(--dw-sky);
cursor: move;
}
.dw-draw-handle.is-dragging { cursor: grabbing; transform: scale(1.15); box-shadow: 0 4px 12px rgba(20, 32, 50, 0.45); }
.dw-draw-handle:hover { transform: scale(1.1); }
/* Radius label floating above the circle while dragging */
.dw-draw-radius-label {
position: absolute;
padding: 4px 10px;
background: var(--dw-sky);
color: #fff;
font-size: 11px;
font-weight: 700;
border-radius: 999px;
pointer-events: none;
z-index: 6;
box-shadow: 0 2px 6px rgba(20, 32, 50, 0.35);
white-space: nowrap;
transform: translate(-50%, -100%);
margin-top: -6px;
}
.dw-results-map-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--dw-text-3);
font-size: 13px;
pointer-events: none;
}
.dw-results-map-marker {
cursor: pointer;
user-select: none;
transition: transform 0.14s var(--dw-ease);
}
.dw-results-map-marker-pin {
background: var(--dw-surface);
color: var(--dw-text);
border: 1.5px solid var(--dw-outline-strong);
padding: 4px 10px;
border-radius: var(--dw-radius-pill);
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
white-space: nowrap;
}
.dw-results-map-marker:hover { transform: scale(1.08); z-index: 5; }
.dw-results-map-marker:hover .dw-results-map-marker-pin {
background: var(--dw-sky);
color: #fff;
border-color: var(--dw-sky);
}
.dw-results-map-marker.is-active { transform: scale(1.12); z-index: 10; }
.dw-results-map-marker.is-active .dw-results-map-marker-pin {
background: var(--dw-sky);
color: #fff;
border-color: var(--dw-sky);
box-shadow: 0 4px 12px rgba(110, 181, 233, 0.45);
}
[data-theme="dark"] .dw-results-map-marker-pin {
background: #111821;
color: #E6E8EC;
border-color: rgba(255,255,255,0.2);
}
/* ═══════════════════════════════════════════════════════════════════════════
LISTING DETAIL PAGE
═══════════════════════════════════════════════════════════════════════════ */
.dw-listing-gallery {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4px;
max-width: var(--dw-container);
margin: 0 auto;
padding: var(--dw-sp-3) var(--dw-sp-3) 0;
}
@media (max-width: 720px) {
.dw-listing-gallery { grid-template-columns: 1fr; padding: 0; }
}
.dw-gallery-main {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--dw-radius-lg) 0 0 var(--dw-radius-lg);
cursor: pointer;
}
@media (max-width: 720px) {
.dw-gallery-main { border-radius: 0; aspect-ratio: 4/3; }
}
/* Landscape on phone-sized devices: gallery collapses to single column
(hero full-width, no side thumbs taking 1/3) and the hero ignores
its 4:3 aspect ratio in favor of filling the visible viewport.
User can swipe to other photos or tap to open the lightbox.
Phone landscape width is ~852px+ which is > 720px, so the existing
max-width:720 rule misses entirely — this rule does the work. */
@media (orientation: landscape) and (max-height: 540px) {
.dw-listing-gallery {
grid-template-columns: 1fr !important;
padding: 0 !important;
gap: 0;
}
.dw-gallery-main {
aspect-ratio: auto !important;
height: 85dvh !important;
border-radius: 0 !important;
}
}
.dw-gallery-main-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 800ms var(--dw-ease-smooth);
}
.dw-gallery-main:hover .dw-gallery-main-img { transform: scale(1.03); }
.dw-gallery-expand {
position: absolute;
bottom: var(--dw-sp-4);
right: var(--dw-sp-4);
padding: 10px 16px;
background: rgba(255, 255, 255, 0.95);
color: var(--dw-text);
border: none;
border-radius: var(--dw-radius);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
box-shadow: var(--dw-shadow-md);
transition: all var(--dw-dur-snap) var(--dw-ease);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.dw-gallery-expand:hover { transform: translateY(-1px); box-shadow: var(--dw-shadow-lg); }
/* Ship 7h: dark-mode override — the rgba(255,255,255,0.95) glass looked
washed out/almost invisible against dark listing photos. Swap to
dark-glass + brighter text + subtle white border for contrast. Same
pattern used for status pills over photos. */
[data-theme="dark"] .dw-gallery-expand {
background: rgba(10, 14, 22, 0.78);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .dw-gallery-expand:hover {
background: rgba(10, 14, 22, 0.88);
border-color: rgba(255, 255, 255, 0.22);
}
.dw-gallery-side {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 4px;
}
@media (max-width: 720px) {
.dw-gallery-side { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; padding: 4px; }
}
/* Hide the side-thumb strip in landscape on phone — vertical real
estate is precious. User taps hero to open the lightbox + full gallery.
Same media query bumps the in-map popup carousel so its photos read
much larger when the device is sideways. */
@media (orientation: landscape) and (max-height: 540px) {
.dw-gallery-side { display: none; }
.dw-popup-carousel { height: min(60dvh, 280px); }
}
.dw-gallery-side-img {
aspect-ratio: 1;
background-size: cover;
background-position: center;
cursor: pointer;
transition: transform 400ms var(--dw-ease-smooth);
}
.dw-gallery-side-img:hover { transform: scale(1.04); }
.dw-gallery-side-img:nth-child(2) { border-top-right-radius: var(--dw-radius-lg); }
.dw-gallery-side-img:nth-child(4) { border-bottom-right-radius: var(--dw-radius-lg); }
@media (max-width: 720px) {
.dw-gallery-side-img:nth-child(2), .dw-gallery-side-img:nth-child(4) { border-radius: 0; }
}
.dw-listing-main { padding: var(--dw-sp-10) var(--dw-sp-6) var(--dw-sp-20); }
.dw-listing-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: var(--dw-sp-10);
align-items: flex-start;
}
@media (max-width: 900px) {
.dw-listing-grid { grid-template-columns: 1fr; gap: var(--dw-sp-8); }
.dw-listing-sidebar { order: -1; }
}
.dw-listing-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--dw-sp-4);
margin-bottom: var(--dw-sp-5);
flex-wrap: wrap;
}
.dw-listing-head-text .dw-status-pill { margin-bottom: var(--dw-sp-2); }
.dw-listing-addr {
margin: 0 0 4px;
font-size: clamp(28px, 4vw, 40px);
line-height: 1.08;
}
.dw-listing-city {
font-size: 16px;
color: var(--dw-text-2);
}
.dw-listing-actions { display: flex; gap: 8px; flex-shrink: 0; }
.dw-listing-pricerow {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--dw-sp-6);
padding: var(--dw-sp-5) 0;
border-top: 1px solid var(--dw-outline);
border-bottom: 1px solid var(--dw-outline);
margin-bottom: var(--dw-sp-8);
flex-wrap: wrap;
}
.dw-listing-price {
font-size: clamp(32px, 4.5vw, 48px);
line-height: 1;
letter-spacing: -0.025em;
}
.dw-listing-specs {
display: flex;
align-items: center;
gap: var(--dw-sp-5);
}
.dw-listing-spec {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.dw-listing-spec strong {
font-family: var(--dw-font-display);
font-size: 22px;
font-weight: 700;
color: var(--dw-text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.dw-listing-spec span {
font-size: 12px;
color: var(--dw-text-3);
font-weight: 500;
}
.dw-listing-spec-sep {
width: 1px;
height: 32px;
background: var(--dw-outline);
}
/* Ask dwello section */
.dw-ask-section {
margin-bottom: var(--dw-sp-10);
padding: var(--dw-sp-6);
background: linear-gradient(135deg, var(--dw-sky-soft) 0%, rgba(110, 181, 233, 0.04) 100%);
border: 1px solid rgba(110, 181, 233, 0.25);
border-radius: var(--dw-radius-lg);
position: relative;
overflow: hidden;
}
.dw-ask-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(245, 166, 35, 0.10) 0%, transparent 70%);
pointer-events: none;
}
.dw-ask-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: var(--dw-sp-4);
position: relative;
}
.dw-ask-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--dw-surface);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--dw-shadow-sm);
flex-shrink: 0;
}
.dw-ask-avatar img { width: 28px; height: 28px; opacity: 0.85; }
.dw-ask-title {
font-family: var(--dw-font-display);
font-size: 18px;
font-weight: 600;
color: var(--dw-text);
letter-spacing: -0.01em;
}
.dw-ask-sub {
font-size: 13px;
color: var(--dw-text-2);
margin-top: 2px;
}
.dw-ask-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
position: relative;
}
.dw-ask-chip {
padding: 10px 16px;
background: var(--dw-surface);
border: 1px solid var(--dw-outline);
border-radius: var(--dw-radius-pill);
color: var(--dw-text);
font-family: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--dw-dur-snap) var(--dw-ease);
display: inline-flex;
align-items: center;
gap: 5px;
}
.dw-ask-chip:hover {
border-color: var(--dw-sky);
color: var(--dw-sky);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(110, 181, 233, 0.22);
}
.dw-ask-chip:focus-visible {
outline: 2px solid var(--dw-sky);
outline-offset: 2px;
border-color: var(--dw-sky);
}
.dw-ask-footer {
position: relative;
margin-top: var(--dw-sp-4);
font-size: 11px;
color: var(--dw-text-3);
font-style: italic;
}
.dw-ask-footer a { color: var(--dw-sky); font-style: normal; }
/* Compact collapsible variant (default initial state) */
.dw-ask-section:has(> .dw-ask-toggle) { padding: 0; margin-bottom: var(--dw-sp-6); }
.dw-ask-section:has(> .dw-ask-toggle):not(.is-open):not(.dw-ask-section-active)::before { display: none; }
.dw-ask-toggle {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 11px 14px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
position: relative;
z-index: 1;
border-radius: var(--dw-radius-lg);
transition: background var(--dw-dur-snap) var(--dw-ease);
}
.dw-ask-toggle:hover { background: rgba(110, 181, 233, 0.06); }
.dw-ask-toggle:focus-visible { outline: 2px solid var(--dw-sky); outline-offset: -2px; }
.dw-ask-avatar-sm {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--dw-surface);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: var(--dw-shadow-sm);
}
.dw-ask-avatar-sm img { width: 19px; height: 19px; opacity: 0.85; }
.dw-ask-title-inline {
font-family: var(--dw-font-display);
font-size: 15px;
font-weight: 600;
color: var(--dw-text);
letter-spacing: -0.01em;
flex: 1;
min-width: 0;
}
.dw-ask-chevron {
flex-shrink: 0;
color: var(--dw-text-2);
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.dw-ask-section.is-open .dw-ask-chevron { transform: rotate(180deg); }
.dw-ask-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.36s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 1;
}
.dw-ask-section.is-open .dw-ask-body { grid-template-rows: 1fr; }
.dw-ask-body-inner {
overflow: hidden;
min-height: 0;
padding: 0 14px;
display: flex;
flex-direction: column;
gap: 10px;
transition: padding 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}
.dw-ask-section.is-open .dw-ask-body-inner { padding: 2px 14px 14px; }
.dw-ask-sub-collapsed {
font-size: 13px;
color: var(--dw-text-2);
line-height: 1.4;
}
.dw-ask-footer-collapsed {
font-size: 11px;
color: var(--dw-text-3);
font-style: italic;
}
.dw-ask-footer-collapsed a { color: var(--dw-sky); font-style: normal; }
@media (max-width: 640px) {
.dw-ask-toggle { padding: 9px 12px; gap: 10px; }
.dw-ask-avatar-sm { width: 26px; height: 26px; }
.dw-ask-avatar-sm img { width: 16px; height: 16px; }
.dw-ask-title-inline { font-size: 14px; }
.dw-ask-body-inner { padding: 0 12px; gap: 8px; }
.dw-ask-section.is-open .dw-ask-body-inner { padding: 0 12px 12px; }
.dw-ask-section:has(> .dw-ask-toggle) .dw-ask-chip { padding: 8px 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.dw-ask-chevron, .dw-ask-body, .dw-ask-body-inner, .dw-ask-toggle { transition: none; }
}
/* Active (chat open) state */
.dw-ask-section-active {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 640px;
}
.dw-ask-section-active .dw-ask-header {
padding: var(--dw-sp-4) var(--dw-sp-5);
margin-bottom: 0;
border-bottom: 1px solid var(--dw-outline);
background: var(--dw-surface);
position: relative;
z-index: 2;
}
.dw-ask-min {
margin-left: auto;
background: var(--dw-mist);
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
color: var(--dw-text-2);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--dw-dur-snap) var(--dw-ease);
}
.dw-ask-min:hover { background: var(--dw-slate-soft); color: var(--dw-text); }
.dw-ask-thread {
flex: 1;
overflow-y: auto;
padding: var(--dw-sp-5);
display: flex;
flex-direction: column;
gap: var(--dw-sp-4);
background: var(--dw-surface);
min-height: 220px;
max-height: 440px;
scroll-behavior: smooth;
}
.dw-ask-msg {
display: flex;
gap: 10px;
animation: dw-msg-in 280ms var(--dw-ease-smooth);
}
@keyframes dw-msg-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.dw-ask-msg-user { justify-content: flex-end; }
.dw-ask-msg-assistant { justify-content: flex-start; }
.dw-ask-msg-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--dw-sky-soft);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.dw-ask-msg-avatar img { width: 20px; height: 20px; opacity: 0.85; }
.dw-ask-msg-bubble {
max-width: 78%;
padding: 10px 14px;
border-radius: var(--dw-radius-lg);
font-size: 14px;
line-height: 1.55;
}
.dw-ask-msg-bubble p { margin: 0 0 10px; }
.dw-ask-msg-bubble p:last-child { margin-bottom: 0; }
.dw-ask-msg-user .dw-ask-msg-bubble {
background: var(--dw-sky);
color: #fff;
border-bottom-right-radius: 6px;
}
.dw-ask-msg-assistant .dw-ask-msg-bubble {
background: var(--dw-mist);
color: var(--dw-text);
border-bottom-left-radius: 6px;
}
.dw-ask-typing {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 16px 16px;
}
.dw-typing-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--dw-text-3);
animation: dw-typing 1.2s var(--dw-ease-smooth) infinite;
}
.dw-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.dw-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes dw-typing {
0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
.dw-ask-inputbar {
display: flex;
gap: 8px;
padding: var(--dw-sp-4) var(--dw-sp-5);
background: var(--dw-surface);
border-top: 1px solid var(--dw-outline);
align-items: center;
}
.dw-ask-input {
flex: 1;
padding: 10px 14px;
background: var(--dw-mist);
border: 1px solid var(--dw-outline);
border-radius: var(--dw-radius-pill);
color: var(--dw-text);
font-family: inherit;
font-size: 14px;
outline: none;
transition: all var(--dw-dur-snap) var(--dw-ease);
}
.dw-ask-input:focus {
border-color: var(--dw-sky);
background: var(--dw-surface);
box-shadow: var(--dw-shadow-focus);
}
.dw-ask-send-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--dw-sky);
color: #fff;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--dw-dur-snap) var(--dw-ease);
box-shadow: 0 2px 6px rgba(110, 181, 233, 0.35);
}
.dw-ask-send-btn:hover {
background: var(--dw-sky-hover);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(110, 181, 233, 0.45);
}
.dw-ask-send-btn:active { transform: translateY(0) scale(0.96); }
.dw-ask-section-active .dw-ask-footer {
padding: var(--dw-sp-3) var(--dw-sp-5);
margin: 0;
border-top: 1px solid var(--dw-outline);
background: var(--dw-mist);
font-style: normal;
font-size: 10.5px;
text-align: center;
}
/* Section blocks on listing detail */
.dw-section-block {
padding-bottom: var(--dw-sp-10);
margin-bottom: var(--dw-sp-10);
border-bottom: 1px solid var(--dw-outline);
}
.dw-section-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.dw-listing-description {
font-size: 15px;
line-height: 1.65;
color: var(--dw-text-2);
margin-bottom: var(--dw-sp-3);
}
.dw-listing-description-attribution {
font-size: 11px;
color: var(--dw-text-3);
font-style: italic;
}
.dw-facts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--dw-sp-1) var(--dw-sp-6);
}
@media (max-width: 520px) { .dw-facts-grid { grid-template-columns: 1fr; } }
.dw-fact-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 0.5px solid var(--dw-outline);
}
.dw-fact-label { color: var(--dw-text-3); font-size: 13px; }
.dw-fact-val { color: var(--dw-text); font-size: 14px; font-weight: 500; text-align: right; }
/* Feature sections (cooling/heating/appliances/etc — multi-enum RESO fields) */
.dw-feature-group {
padding: 10px 0;
border-bottom: 0.5px solid var(--dw-outline);
}
.dw-feature-group:last-child { border-bottom: 0; }
.dw-feature-group-label {
font-size: 13px;
color: var(--dw-text-3);
margin-bottom: 6px;
}
.dw-feature-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dw-feature-chip {
display: inline-block;
padding: 4px 10px;
background: var(--dw-mist);
border: 1px solid var(--dw-outline);
border-radius: 14px;
font-size: 13px;
color: var(--dw-text);
white-space: nowrap;
}
.dw-attribution-block {
background: var(--dw-mist);
border: 1px solid var(--dw-outline);
border-radius: var(--dw-radius);
padding: var(--dw-sp-5) var(--dw-sp-5);
margin-top: var(--dw-sp-6);
}
.dw-attribution-brokerage { margin-bottom: var(--dw-sp-3); }
.dw-attribution-office {
font-size: 15px;
font-weight: 600;
color: var(--dw-text);
margin-top: 2px;
}
.dw-attribution-agent {
font-size: 13px;
color: var(--dw-text-2);
margin-top: 2px;
}
.dw-attribution-source {
font-size: 12px;
color: var(--dw-text-3);
line-height: 1.5;
border-top: 0.5px solid var(--dw-outline);
padding-top: var(--dw-sp-3);
}
.dw-attribution-source p { margin: 0 0 4px; }
/* Sticky contact sidebar */
.dw-listing-sidebar {
position: sticky;
top: calc(var(--dw-header-h) + 20px);
}
.dw-contact-card {
background: var(--dw-surface);
border: 1px solid var(--dw-outline);
border-radius: var(--dw-radius-lg);
padding: var(--dw-sp-5);
box-shadow: var(--dw-shadow-md);
}
.dw-contact-head {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: var(--dw-sp-4);
border-bottom: 1px solid var(--dw-outline);
margin-bottom: var(--dw-sp-4);
}
.dw-contact-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--dw-sky-soft);
padding: 7px;
}
.dw-contact-title {
font-size: 14px;
font-weight: 600;
color: var(--dw-text);
}
.dw-contact-sub {
font-size: 12px;
color: var(--dw-text-3);
margin-top: 2px;
}
.dw-contact-form {
display: flex;
flex-direction: column;
gap: 8px;
}
.dw-input {
padding: 10px 14px;
background: var(--dw-mist);
border: 1px solid var(--dw-outline);
border-radius: var(--dw-radius);
color: var(--dw-text);
font-family: inherit;
font-size: 14px;
outline: none;
transition: all var(--dw-dur-snap) var(--dw-ease);
width: 100%;
box-sizing: border-box;
}
.dw-input::placeholder { color: var(--dw-text-3); }
.dw-input:focus {
border-color: var(--dw-sky);
box-shadow: var(--dw-shadow-focus);
background: var(--dw-surface);
}
.dw-textarea { min-height: 72px; resize: vertical; font-family: inherit; }
/* ───────────── NOT FOUND ───────────── */
.dw-section-notfound { padding: var(--dw-sp-24) 0; text-align: center; }
.dw-notfound { max-width: 480px; margin: 0 auto; }
.dw-notfound-icon { width: 64px; height: 64px; margin: 0 auto var(--dw-sp-4); opacity: 0.75; }
/* ═══════════════════════════════════════════════════════════════════════════
HUB HEADER (shared by /neighborhoods, /agents, /home-value)
═══════════════════════════════════════════════════════════════════════════ */
.dw-hub-header {
padding: var(--dw-sp-16) var(--dw-sp-6) var(--dw-sp-10);
background:
radial-gradient(ellipse at 70% 20%, rgba(110, 181, 233, 0.12) 0%, transparent 55%),
radial-gradient(ellipse at 20% 80%, rgba(245, 166, 35, 0.08) 0%, transparent 45%),
linear-gradient(180deg, var(--dw-bg) 0%, var(--dw-mist) 100%);
}
.dw-hub-header .dw-container { max-width: 880px; }
.dw-hub-header .dw-eyebrow { margin-bottom: var(--dw-sp-3); color: var(--dw-sky); }
.dw-hub-header .dw-display { font-size: clamp(36px, 5.5vw, 64px); letter-spacing: -0.03em; }
.dw-hub-header .dw-lede { font-size: clamp(16px, 1.4vw, 20px); max-width: 640px; }
/* ═══════════════════════════════════════════════════════════════════════════
NEIGHBORHOOD PAGES
═══════════════════════════════════════════════════════════════════════════ */
.dw-nbhd-hub-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--dw-sp-5);
}
.dw-nbhd-hub-card {
display: block;
text-decoration: none;
color: inherit;
background: var(--dw-surface);
border: 1px solid var(--dw-outline);
border-radius: var(--dw-radius-lg);
overflow: hidden;
transition: transform var(--dw-dur) var(--dw-ease), box-shadow var(--dw-dur) var(--dw-ease), border-color var(--dw-dur) var(--dw-ease);
}
.dw-nbhd-hub-card:hover {
transform: translateY(-4px);
box-shadow: var(--dw-shadow-lg);
border-color: var(--dw-sky);
color: inherit;
}
.dw-nbhd-hub-card-photo {
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
background-color: var(--dw-mist);
transition: transform 600ms var(--dw-ease-smooth);
}
.dw-nbhd-hub-card:hover .dw-nbhd-hub-card-photo { transform: scale(1.05); }
.dw-nbhd-hub-card-body { padding: var(--dw-sp-5); }
.dw-nbhd-hub-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--dw-sp-2);
margin-bottom: var(--dw-sp-3);
}
.dw-nbhd-hub-card-name {
margin: 0;
font-family: var(--dw-font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--dw-text);
}
.dw-nbhd-hub-card-stats {
display: flex;
gap: var(--dw-sp-4);
}
.dw-nbhd-hub-stat {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.dw-nbhd-hub-stat strong {
font-size: 18px;
font-weight: 700;
color: var(--dw-text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.dw-nbhd-hub-stat span {
font-size: 11px;
color: var(--dw-text-3);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
/* ───────────── NEIGHBORHOOD HERO (individual page) ───────────── */
.dw-nbhd-hero {
position: relative;
padding: var(--dw-sp-20) var(--dw-sp-6) var(--dw-sp-16);
overflow: hidden;
min-height: 52dvh;
display: flex;
align-items: center;
}
.dw-nbhd-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: brightness(0.65) saturate(1.1);
z-index: 0;
transform: scale(1.05);
animation: dw-ken-burns 18s var(--dw-ease-smooth) infinite alternate;
}
@keyframes dw-ken-burns {
from { transform: scale(1.05); }
to { transform: scale(1.12) translate(-2%, -1%); }
}
.dw-nbhd-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
z-index: 1;
}
.dw-nbhd-hero-content {
position: relative;
z-index: 2;
color: #fff;
}
.dw-nbhd-eyebrow {
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--dw-sp-3);
}
.dw-nbhd-hero-title {
color: #fff;
font-size: clamp(48px, 8vw, 96px);
letter-spacing: -0.035em;
margin: 0 0 var(--dw-sp-4);
text-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.dw-nbhd-hero-lede {
color: rgba(255, 255, 255, 0.9);
font-size: clamp(16px, 1.5vw, 20px);
max-width: 560px;
margin: 0;
text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
/* ───────────── STATS GRID ───────────── */
.dw-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--dw-sp-4);
margin-top: var(--dw-sp-6);
}
@media (max-width: 720px) { .dw-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.dw-stat-card {
padding: var(--dw-sp-6) var(--dw-sp-5);
background: var(--dw-surface);
border: 1px solid var(--dw-outline);
border-radius: var(--dw-radius-lg);
transition: all var(--dw-dur) var(--dw-ease);
}
.dw-stat-card:hover {
border-color: var(--dw-outline-strong);
transform: translateY(-2px);
box-shadow: var(--dw-shadow-md);
}
.dw-stat-num {
font-family: var(--dw-font-display);
font-weight: 700;
font-size: clamp(28px, 3vw, 40px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--dw-text);
font-variant-numeric: tabular-nums;
margin-bottom: var(--dw-sp-2);
}
.dw-stat-label {
font-size: 12px;
color: var(--dw-text-3);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
/* ═══════════════════════════════════════════════════════════════════════════
AGENTS PAGES
═══════════════════════════════════════════════════════════════════════════ */
.dw-agents-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--dw-sp-6);
}
.dw-agent-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
background: var(--dw-surface);
border: 1px solid var(--dw-outline);
border-radius: var(--dw-radius-lg);
overflow: hidden;
transition: all var(--dw-dur) var(--dw-ease);
}
.dw-agent-card:hover {
transform: translateY(-4px);
box-shadow: var(--dw-shadow-lg);
border-color: var(--dw-sky);
color: inherit;
}
.dw-agent-photo {
aspect-ratio: 1 / 1;
background: linear-gradient(135deg, var(--dw-sky) 0%, var(--dw-slate-deep) 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
position: relative;
overflow: hidden;
}
.dw-agent-photo::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.25) 0%, transparent 60%);
}
.dw-agent-initials {
font-family: var(--dw-font-display);
font-weight: 700;
font-size: 72px;
letter-spacing: -0.03em;
z-index: 1;
text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.dw-agent-photo-lg {
width: 180px;
height: 180px;
border-radius: 50%;
flex-shrink: 0;
aspect-ratio: unset;
}
.dw-agent-photo-lg .dw-agent-initials { font-size: 54px; }
/* Photo-as-image variant — applied when the agent has a real photo uploaded
in Atlas. Suppresses the gradient background so the real photo shows, and
drops the overlay gradient on ::before (still there for the initials
fallback when no photo is uploaded). */
.dw-agent-photo.dw-agent-photo-img {
background: var(--dw-surface-2);
background-size: cover;
background-position: center center;
}
.dw-agent-photo.dw-agent-photo-img::before { content: none; }
.dw-agent-card-body { padding: var(--dw-sp-5); }
.dw-agent-name {
margin: 0 0 4px;
font-family: var(--dw-font-display);
font-size: 20px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--dw-text);
}
.dw-agent-title {
font-size: 13px;
color: var(--dw-sky);
font-weight: 600;
margin-bottom: var(--dw-sp-3);
}
.dw-agent-bio-preview {
font-size: 13px;
color: var(--dw-text-2);
line-height: 1.55;
margin-bottom: var(--dw-sp-4);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dw-agent-specialties {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* Individual agent page */
.dw-agent-hero {
padding: var(--dw-sp-16) var(--dw-sp-6) var(--dw-sp-10);
background:
radial-gradient(ellipse at 80% 30%, rgba(110, 181, 233, 0.10) 0%, transparent 50%),
var(--dw-bg);
}
.dw-agent-hero-inner {
display: flex;
gap: var(--dw-sp-10);
align-items: center;
max-width: 1080px;
}
@media (max-width: 720px) {
.dw-agent-hero-inner { flex-direction: column; text-align: center; gap: var(--dw-sp-6); }
.dw-agent-hero-text .dw-agent-specialties { justify-content: center; }
.dw-agent-contact { justify-content: center; }
}
.dw-agent-hero-name {
font-size: clamp(36px, 5.5vw, 64px);
letter-spacing: -0.035em;
margin: var(--dw-sp-2) 0 var(--dw-sp-4);
line-height: 1;
}
.dw-agent-contact {
display: flex;
gap: var(--dw-sp-3);
margin-top: var(--dw-sp-5);
flex-wrap: wrap;
}
.dw-agent-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: var(--dw-sp-10);
align-items: flex-start;
}
@media (max-width: 900px) {
.dw-agent-grid { grid-template-columns: 1fr; }
.dw-agent-side { order: -1; }
}
.dw-agent-main .dw-editorial {
margin: var(--dw-sp-3) 0 var(--dw-sp-8);
}
.dw-agent-facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--dw-sp-5);
padding: var(--dw-sp-5);
background: var(--dw-mist);
border-radius: var(--dw-radius-lg);
}
@media (max-width: 480px) { .dw-agent-facts { grid-template-columns: 1fr; } }
.dw-agent-fact .dw-eyebrow { margin-bottom: 4px; }
.dw-agent-fact-val { font-size: 15px; color: var(--dw-text); font-weight: 500; }
.dw-agent-fact-val a { color: var(--dw-sky); text-decoration: none; }
.dw-agent-side { position: sticky; top: calc(var(--dw-header-h) + 20px); }
/* ═══════════════════════════════════════════════════════════════════════════
HOME VALUATION PAGE
═══════════════════════════════════════════════════════════════════════════ */
.dw-hv-hero {
position: relative;
padding: var(--dw-sp-16) var(--dw-sp-6);
overflow: hidden;
}
.dw-hv-hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 10% 30%, rgba(110, 181, 233, 0.14) 0%, transparent 45%),
radial-gradient(ellipse at 90% 70%, rgba(245, 166, 35, 0.10) 0%, transparent 50%),
linear-gradient(180deg, var(--dw-bg) 0%, var(--dw-mist) 100%);
z-index: -1;
}
.dw-hv-hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--dw-sp-12);
align-items: center;
}
@media (max-width: 900px) {
.dw-hv-hero-inner { grid-template-columns: 1fr; gap: var(--dw-sp-8); }
}
.dw-hv-title {
font-size: clamp(36px, 5vw, 56px);
letter-spacing: -0.03em;
margin: var(--dw-sp-3) 0;
}
.dw-hv-checks {
list-style: none;
padding: 0;
margin: var(--dw-sp-6) 0 0;
display: flex;
flex-direction: column;
gap: var(--dw-sp-3);
}
.dw-hv-checks li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 15px;
color: var(--dw-text-2);
line-height: 1.5;
}
.dw-hv-checks li svg {
width: 20px;
height: 20px;
color: var(--dw-sky);
flex-shrink: 0;
margin-top: 2px;
}
.dw-hv-form-card {
background: var(--dw-surface);
border: 1px solid var(--dw-outline);
border-radius: var(--dw-radius-lg);
padding: var(--dw-sp-6);
box-shadow: var(--dw-shadow-lg);
}
.dw-hv-form-head { margin-bottom: var(--dw-sp-5); }
.dw-hv-form {
display: flex;
flex-direction: column;
gap: var(--dw-sp-4);
}
.dw-hv-field { display: flex; flex-direction: column; gap: 6px; }
.dw-hv-field label {
font-size: 11px;
font-weight: 600;
color: var(--dw-text-3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.dw-hv-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dw-sp-3); }
@media (max-width: 420px) { .dw-hv-field-row { grid-template-columns: 1fr; } }
.dw-hv-privacy {
text-align: center;
color: var(--dw-text-3);
font-size: 11px;
margin: var(--dw-sp-2) 0 0;
}
/* How it works steps */
.dw-hv-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--dw-sp-6);
}
@media (max-width: 800px) { .dw-hv-steps { grid-template-columns: 1fr; } }
.dw-hv-step {
padding: var(--dw-sp-6);
background: var(--dw-surface);
border: 1px solid var(--dw-outline);
border-radius: var(--dw-radius-lg);
position: relative;
}
.dw-hv-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--dw-sky) 0%, var(--dw-slate-deep) 100%);
color: #fff;
font-family: var(--dw-font-display);
font-weight: 700;
font-size: 16px;
margin-bottom: var(--dw-sp-4);
}
/* ═══════════════════════════════════════════════════════════════════════════
GALLERY LIGHTBOX
═══════════════════════════════════════════════════════════════════════════ */
.dw-lightbox {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(8, 12, 18, 0.96);
display: flex;
flex-direction: column;
animation: dw-lightbox-in 280ms var(--dw-ease-smooth);
}
@keyframes dw-lightbox-in {
from { opacity: 0; }
to { opacity: 1; }
}
.dw-lightbox-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--dw-sp-4) var(--dw-sp-6);
color: rgba(255, 255, 255, 0.9);
flex-shrink: 0;
}
.dw-lightbox-count {
font-variant-numeric: tabular-nums;
font-size: 14px;
font-weight: 600;
}
.dw-lightbox-close {
background: rgba(255, 255, 255, 0.12);
border: none;
color: #fff;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--dw-dur-snap) var(--dw-ease);
}
.dw-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.dw-lightbox-close svg { width: 20px; height: 20px; }
.dw-lightbox-stage {
flex: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--dw-sp-4) var(--dw-sp-4);
overflow: hidden;
}
.dw-lightbox-img-wrap {
max-width: min(100%, 1400px);
max-height: 100%;
position: relative;
animation: dw-lightbox-img-in 320ms var(--dw-ease-spring);
}
@keyframes dw-lightbox-img-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.dw-lightbox-img {
max-width: 100%;
max-height: calc(100dvh - 180px);
object-fit: contain;
border-radius: var(--dw-radius);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.dw-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
border: none;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--dw-dur-snap) var(--dw-ease);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.dw-lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-50%) scale(1.08); }
.dw-lightbox-nav:disabled { opacity: 0.3; cursor: default; transform: translateY(-50%); }
.dw-lightbox-nav svg { width: 22px; height: 22px; }
.dw-lightbox-prev { left: var(--dw-sp-5); }
.dw-lightbox-next { right: var(--dw-sp-5); }
.dw-lightbox-thumbs {
display: flex;
gap: 6px;
overflow-x: auto;
padding: var(--dw-sp-4) var(--dw-sp-6) var(--dw-sp-5);
scrollbar-width: thin;
flex-shrink: 0;
scroll-behavior: smooth;
}
.dw-lightbox-thumb {
width: 72px;
height: 54px;
border-radius: 6px;
background-size: cover;
background-position: center;
cursor: pointer;
flex-shrink: 0;
opacity: 0.5;
transition: opacity var(--dw-dur-snap) var(--dw-ease), transform var(--dw-dur-snap) var(--dw-ease);
border: 2px solid transparent;
}
.dw-lightbox-thumb:hover { opacity: 0.8; transform: translateY(-2px); }
.dw-lightbox-thumb.active { opacity: 1; border-color: var(--dw-sky); }
@media (max-width: 640px) {
.dw-lightbox-nav { width: 44px; height: 44px; }
.dw-lightbox-prev { left: var(--dw-sp-3); }
.dw-lightbox-next { right: var(--dw-sp-3); }
.dw-lightbox-thumbs { padding: var(--dw-sp-3) var(--dw-sp-3) var(--dw-sp-4); }
.dw-lightbox-thumb { width: 56px; height: 42px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
FILTER POPOVERS
═══════════════════════════════════════════════════════════════════════════ */
.dw-popover {
position: absolute;
top: calc(100% + 8px);
left: 0;
background: var(--dw-surface);
border: 1px solid var(--dw-outline-strong);
border-radius: var(--dw-radius);
box-shadow: var(--dw-shadow-lg);
padding: var(--dw-sp-5);
min-width: 280px;
z-index: 60;
animation: dw-popover-in 180ms var(--dw-ease-smooth);
}
@keyframes dw-popover-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.dw-popover-head {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--dw-text-3);
margin-bottom: var(--dw-sp-3);
}
.dw-popover-row {
display: flex;
gap: 8px;
margin-bottom: var(--dw-sp-3);
}
.dw-popover-input {
flex: 1;
padding: 10px 12px;
background: var(--dw-mist);
border: 1px solid var(--dw-outline);
border-radius: var(--dw-radius-sm);
color: var(--dw-text);
font-family: inherit;
font-size: 14px;
outline: none;
width: 100%;
box-sizing: border-box;
transition: all var(--dw-dur-snap) var(--dw-ease);
}
.dw-popover-input:focus { border-color: var(--dw-sky); background: var(--dw-surface); }
.dw-popover-input-prefix { position: relative; flex: 1; }
.dw-popover-input-prefix::before { content: '$'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--dw-text-3); font-size: 14px; pointer-events: none; z-index: 1; }
.dw-popover-input-prefix input { padding-left: 22px; }
.dw-popover-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.dw-popover-pill {
padding: 7px 14px;
background: var(--dw-mist);
border: 1px solid var(--dw-outline);
border-radius: var(--dw-radius-pill);
color: var(--dw-text-2);
font-family: inherit;
font-size: 13px;
cursor: pointer;
transition: all var(--dw-dur-snap) var(--dw-ease);
}
.dw-popover-pill:hover { border-color: var(--dw-sky); color: var(--dw-text); }
.dw-popover-pill.active {
background: var(--dw-sky);
border-color: var(--dw-sky);
color: #fff;
font-weight: 600;
}
/* Ship 7c: status filter options get row layout w/ count. Disabled state
when count is 0 (no listings in that status match the current filters). */
.dw-popover-status-opts {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: var(--dw-sp-2);
}
.dw-popover-status-opt {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--dw-radius-md);
color: var(--dw-text-2);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background var(--dw-dur-snap) var(--dw-ease);
text-align: left;
font-family: inherit;
width: 100%;
}
.dw-popover-status-opt:hover:not(.disabled) {
background: var(--dw-surface-2);
color: var(--dw-text);
}
.dw-popover-status-opt.active {
background: var(--dw-sky);
color: #fff;
}
.dw-popover-status-opt.active .dw-popover-status-count { color: rgba(255,255,255,0.8); }
.dw-popover-status-opt.disabled {
opacity: 0.4;
cursor: default;
}
.dw-popover-status-label { flex: 1; }
.dw-popover-status-count {
font-variant-numeric: tabular-nums;
color: var(--dw-text-3);
font-size: 12px;
font-weight: 600;
}
.dw-popover-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--dw-sp-4);
padding-top: var(--dw-sp-4);
border-top: 0.5px solid var(--dw-outline);
}
.dw-popover-clear {
background: none;
border: none;
color: var(--dw-text-3);
font-family: inherit;
font-size: 13px;
cursor: pointer;
padding: 6px;
}
.dw-popover-clear:hover { color: var(--dw-alert); }
/* Ship 5.2 — live count preview inside popover.
Shows "247 homes match" at the bottom-left of the footer, updating
as user toggles draft filters in the panel. The number re-fetches
debounced via /api/public/listings/count. */
.dw-popover-count {
font-size: 12px;
font-weight: 600;
color: var(--dw-text-2);
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
gap: 4px;
transition: opacity var(--dw-dur-snap) var(--dw-ease);
}
.dw-popover-count.is-loading { opacity: 0.5; }
.dw-popover-count-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--dw-sky);
box-shadow: 0 0 8px var(--dw-sky);
flex-shrink: 0;
}
/* Ship 5.2 — dual-handle price range slider.
Two overlapping