/* =================================================================== RENTALS HUB — DESKTOP LAYER (desktop.css) =================================================================== Source of truth: the owner's desktop design package ("veranda market desktop.zip" -> design_handoff_desktop_adaptation). HOW THIS FILE FITS THE CASCADE ------------------------------ Load order on every rentals page is: app.css -> .css (if any) -> desktop.css desktop.css loads LAST on purpose. @media adds no specificity, so a min-width rule loses to a same-specificity base rule declared later in the cascade (the repo's documented cascade-order trap). Loading this file last means the desktop layer can override the mobile base without a single !important and without specificity games. Per-PAGE desktop rules do NOT live here. They are appended to the end of that page's own stylesheet (listing.css, wizard.css, ...) using the page's own class prefixes, which collide with nothing below. The one exception is the home page: rentals/index.html loads only app.css, so its desktop rules live here in section 8. BREAKPOINTS (the design speaks in max-width collapse; we invert it into additive min-width layers over an untouched mobile base) ------------------------------------------------------------------ <= 900px the shipped mobile hub, byte-frozen. Nothing here applies. >= 901px desktop layer: site header, no bottom nav, wide layouts. >= 1120px sidebars and rails appear (filters, booking card, step rail, account rail, contents rail, chat context pane). >= 1240px secondary nav links and the wizard live preview appear. Z-INDEX LADDER (whole hub, for reference before you add anything) ------------------------------------------------------------------ 10 chat composer 20 sticky filter bar / subpage bar 30 safety topbar 40 mobile bottom nav 45 DESKTOP HEADER 50 listing mobile action bar 60/61 filter sheet backdrop/panel 80/90 toasts 120 wizard + bookings sheets RESPONSIVE GATING IS BY CLASS, NEVER BY THE hidden ATTRIBUTE. app.css declares [hidden]{display:none!important} as a hard guard, and JS toggles `hidden` for STATE. Using it for width-based visibility would collide with both. Use .vm-dt-only / .vm-mb-only. =================================================================== */ /* ---------------------------------------------------------------- 1. DESKTOP-ONLY TOKENS The design palette is a superset of app.css's --vm-* tokens. Only the genuinely new values live here; everything else reuses --vm-*. ---------------------------------------------------------------- */ :root { --vm-dt-header-h: 72px; --vm-dt-wrap: 1320px; --vm-dt-pad: 28px; --vm-dt-canvas-alt: #f4f6f7; /* page bg on bookings / messages / account */ --vm-dt-tint-soft: #f2f9f2; /* "What we do" card */ --vm-dt-icon-bg: #f3f4f6; /* header icon buttons */ --vm-dt-ink-2: #4b5563; /* nav links, long-form body */ --vm-dt-shadow-card: 0 1px 2px rgba(16, 24, 40, .03), 0 8px 22px rgba(16, 24, 40, .06); --vm-dt-shadow-raised: 0 1px 3px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .05); --vm-dt-shadow-header: 0 4px 20px rgba(16, 24, 40, .06); --vm-dt-shadow-green: 0 6px 16px rgba(26, 137, 23, .35); } /* ---------------------------------------------------------------- 2. VISIBILITY UTILITIES Base (mobile) state lives outside the media query so the desktop shell markup costs nothing on a phone. ---------------------------------------------------------------- */ .vm-dt-only { display: none; } /* ---------------------------------------------------------------- 3. DESKTOP HEADER — base state Markup is static and duplicated per page (the same convention the mobile bottom nav already uses: no build step, no runtime injection, no auth.js). Hidden below 901px. ---------------------------------------------------------------- */ .vm-dt-header { display: none; } /* ================================================================ 4. THE DESKTOP LAYER — >= 901px ================================================================ */ @media (min-width: 901px) { /* --- 4.1 utilities ------------------------------------------------ */ .vm-dt-only { display: revert; } .vm-mb-only { display: none; } /* --- 4.2 unwind the 480px app frame ------------------------------ Only pages that have received their full desktop treatment opt in with `vm-dt-shell` on .vm-app. Un-adapted pages keep the shipped 480px column under the new header, which is exactly how they look today: incremental, with no interim breakage. Drop the class name in as each per-screen unit lands. ---------------------------------------------------------------- */ .vm-app.vm-dt-shell { max-width: none; box-shadow: none; min-height: calc(100vh - var(--vm-dt-header-h)); } body:has(.vm-app.vm-dt-shell) { background: var(--vm-canvas); } /* The mobile bottom nav is replaced by the header on desktop. Pages that reserved clearance for it get that padding back. */ .vm-bottom-nav { display: none; } /* Sticky bars inside the page must clear the sticky header. */ .vm-filter-bar { top: var(--vm-dt-header-h); } /* --- 4.3 content container --------------------------------------- */ .vm-dt-wrap { max-width: var(--vm-dt-wrap); margin: 0 auto; padding: 0 var(--vm-dt-pad); } .vm-dt-wrap--wide { max-width: 1440px; } .vm-dt-wrap--narrow { max-width: 1080px; } /* --- 4.4 header shell -------------------------------------------- */ .vm-dt-header { display: block; position: sticky; top: 0; z-index: 45; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--vm-border-2); } /* Home only: floats over the hero photo, then solidifies on scroll. Fixed (not sticky) so it can overlap the hero rather than sit above it in the flow. home.js toggles .is-solid past scrollY 120. */ .vm-dt-header--float { position: fixed; left: 0; right: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, -webkit-backdrop-filter .28s ease, backdrop-filter .28s ease; } .vm-dt-header--float.is-solid { background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--vm-border-2); box-shadow: var(--vm-dt-shadow-header); } .vm-dt-header-in { max-width: var(--vm-dt-wrap); margin: 0 auto; padding: 0 var(--vm-dt-pad); height: var(--vm-dt-header-h); display: flex; align-items: center; gap: 18px; } /* --- 4.5 brand lockup -------------------------------------------- */ .vm-dt-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; text-decoration: none; } .vm-dt-brand:hover { color: inherit; } .vm-dt-brand-logo { width: 38px; height: 38px; border-radius: 10px; background: #fff; padding: 3px; display: block; } .vm-dt-brand-text { line-height: 1; } .vm-dt-brand-word { display: block; font-family: var(--vm-font-display); font-weight: 700; font-size: 18px; letter-spacing: -.3px; color: var(--vm-text); transition: color .28s ease; } .vm-dt-brand-word span { color: var(--vm-primary); transition: color .28s ease; } .vm-dt-brand-strap { display: block; margin-top: 3px; font-size: 10.5px; color: var(--vm-muted-2); transition: color .28s ease; } /* --- 4.6 nav ------------------------------------------------------ The two secondary links hide below 1240px; "Explore" and "How it works" are on at every desktop width. The row used to hide entirely below 1120px, on the reasoning that the icons + CTA carried navigation from there down. That stopped being true when .vm-dt-brand was repointed at the site home page: "Explore" is now the only link back to the rentals hub, so hiding it would strand a visitor at 901-1119px on any sub-page. There is room for it: see the note in section 7 about the dead space this row carries once the search field drops out. ---------------------------------------------------------------- */ .vm-dt-nav { display: flex; align-items: center; gap: 2px; } .vm-dt-navlink { font-size: 13.5px; font-weight: 500; color: var(--vm-dt-ink-2); padding: 8px 12px; border-radius: 999px; white-space: nowrap; text-decoration: none; transition: color .28s ease, background .28s ease; } .vm-dt-navlink:hover { color: var(--vm-primary-dark); background: var(--vm-tint); } .vm-dt-navlink.is-active { font-weight: 600; color: var(--vm-primary-dark); background: var(--vm-tint); } /* --- 4.7 header search ------------------------------------------- A plain GET form: no JS, lands on index.html?search=… which home.js reads at boot. Hidden below 901px with the rest of the header, and again below 1000px where the row gets tight. ---------------------------------------------------------------- */ .vm-dt-search { flex: 1; max-width: 340px; margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--vm-canvas); border: 1px solid var(--vm-border); border-radius: 999px; padding: 6px 6px 6px 14px; } .vm-dt-search-i { font-size: 12.5px; color: var(--vm-muted-2); flex-shrink: 0; } .vm-dt-search-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: 13.5px; color: var(--vm-text); } .vm-dt-search-input::placeholder { color: var(--vm-muted-2); } .vm-dt-search-input::-webkit-search-cancel-button { display: none; } .vm-dt-search-go { width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; background: var(--vm-primary); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; } .vm-dt-search-go:hover { background: var(--vm-primary-dark); } /* --- 4.8 icon buttons + CTA --------------------------------------- */ .vm-dt-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .vm-dt-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--vm-dt-icon-bg); border: 1px solid var(--vm-border); color: var(--vm-text-2); font-size: 15px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background .28s ease, border-color .28s ease, color .28s ease; } .vm-dt-icon:hover { background: var(--vm-tint); border-color: var(--vm-primary); color: var(--vm-primary-dark); } .vm-dt-icon.is-active { background: var(--vm-tint); border-color: #cfe9cd; color: var(--vm-primary-dark); } .vm-dt-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--vm-primary); color: #fff; font-size: 13.5px; font-weight: 700; padding: 11px 18px; border-radius: 999px; white-space: nowrap; text-decoration: none; box-shadow: var(--vm-dt-shadow-green); transition: background .2s ease; } .vm-dt-cta:hover { background: var(--vm-primary-dark); color: #fff; } .vm-dt-cta i { font-size: 11px; } /* --- 4.9 glass (transparent-over-hero) variant, home only --------- */ .vm-dt-header--float:not(.is-solid) .vm-dt-brand-word { color: #fff; } .vm-dt-header--float:not(.is-solid) .vm-dt-brand-word span { color: var(--vm-accent); } .vm-dt-header--float:not(.is-solid) .vm-dt-brand-strap { color: rgba(255, 255, 255, .8); } .vm-dt-header--float:not(.is-solid) .vm-dt-navlink { color: rgba(255, 255, 255, .9); } .vm-dt-header--float:not(.is-solid) .vm-dt-navlink:hover, .vm-dt-header--float:not(.is-solid) .vm-dt-navlink.is-active { color: #fff; background: rgba(255, 255, 255, .18); } .vm-dt-header--float:not(.is-solid) .vm-dt-icon { background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, .28); color: #fff; } .vm-dt-header--float:not(.is-solid) .vm-dt-icon:hover { background: rgba(255, 255, 255, .28); color: #fff; } /* The compact header search is redundant while the hero search pill is on screen; it fades in with the solid header. */ .vm-dt-header--float .vm-dt-search { opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .28s ease, transform .28s ease; } .vm-dt-header--float.is-solid .vm-dt-search { opacity: 1; transform: none; pointer-events: auto; } /* --- 4.10 slim footer (bookings) ---------------------------------- */ .vm-dt-footslim { border-top: 1px solid var(--vm-border-2); margin-top: 40px; padding: 22px 0 34px; } .vm-dt-footslim-in { max-width: var(--vm-dt-wrap); margin: 0 auto; padding: 0 var(--vm-dt-pad); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .vm-dt-footslim-copy { font-size: 12.5px; color: var(--vm-muted); } .vm-dt-footslim-links { display: flex; gap: 20px; flex-wrap: wrap; } .vm-dt-footslim-links a { font-size: 12.5px; color: var(--vm-muted); text-decoration: none; } .vm-dt-footslim-links a:hover { color: var(--vm-primary-dark); } /* --- 4.11 shared desktop primitives ------------------------------ Small pieces several screens reuse. Page-specific composition stays in the page's own stylesheet. ---------------------------------------------------------------- */ .vm-dt-h1 { margin: 0; font-family: var(--vm-font-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.8px; line-height: 1.14; color: var(--vm-text); } .vm-dt-h2 { margin: 0; font-family: var(--vm-font-display); font-weight: 700; font-size: 21px; letter-spacing: -.5px; color: var(--vm-text); } .vm-dt-card { background: #fff; border: 1px solid var(--vm-border-2); border-radius: 18px; box-shadow: var(--vm-dt-shadow-card); } .vm-dt-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--vm-muted); } .vm-dt-crumb a { color: var(--vm-muted); text-decoration: none; } .vm-dt-crumb a:hover { color: var(--vm-primary-dark); } .vm-dt-crumb-sep { color: var(--vm-muted-2); } } /* end >= 901px */ /* ================================================================ 5. RAIL / SIDEBAR TIER — >= 1120px Intentionally empty at header level: .vm-dt-nav used to switch on here and now runs from 901px (see 4.6). The rail and the filter sidebar still key off 1120px, in section 8. ================================================================ */ /* ================================================================ 6. FULL TIER — >= 1240px The two least important nav links and the wizard live preview. ================================================================ */ @media (max-width: 1239px) { .vm-dt-navlink--2nd { display: none; } } /* ================================================================ 7. TIGHT-ROW GUARD Between 901 and 999px the header row (brand + nav + search + 3 icons + CTA) runs out of room. Drop the search field first, exactly as the design's <=900 rule does one step later. ================================================================ */ @media (min-width: 901px) and (max-width: 999px) { .vm-dt-search { display: none; } /* The search field's own margin-left:auto was the only thing pushing the right-hand cluster to the far edge. Hiding it stranded the icons and the CTA against the brand lockup with ~450px of dead space beside them (found at 950px on every page carrying the shared header). The auto margin has to move to the next element in the row, and it has to live HERE rather than unconditionally on .vm-dt-actions, which would shift the >=1000px layout where .vm-dt-search is still doing that job. */ .vm-dt-actions { margin-left: auto; } } /* ================================================================ 8. HOME — rentals/index.html ================================================================ The hub home is the one page whose desktop rules live in this file: it loads app.css and desktop.css and nothing else (see the header comment at the top of this file). Everything below is either inside a min-width media query or a base `display:none` for markup that only the desktop layer ever reveals, so the shipped <=900px hub is untouched. Selectors are scoped to #vm-hub (the home root) wherever the class is shared with another page — .vm-feed-grid, .vm-carousel, .vm-load-more, .vm-agents-track and .vm-filter-bar all appear on other rentals screens that other units own. DELIBERATE OMISSIONS from the design (RENTALS_HUB.md 2.7): - the chip bar's "Nearest first" sort -> no geo sort in the API - the sidebar's "Available this week" -> no availability param - the hero's "240+ nearby" and the how-it-works "12,400 / 6 / 4.8" stat trio -> the shipped nodes read pagination.total at runtime ================================================================ */ /* The desktop filter sidebar ships in the markup on every width but only ever paints at >=1120px. Class gating, never the hidden attribute. Scoped like the rest of section 8 so a same-named class on another screen (another unit's rail) can never inherit this. */ #vm-hub .vm-dt-sidebar { display: none; } @media (min-width: 901px) { /* --- 8.1 hero ------------------------------------------------------ Same nodes the phone uses. The mobile brand/account top bar is the only thing that goes: the site header now carries both. ------------------------------------------------------------------ */ #vm-hub .vm-hero-topbar { display: none; } #vm-hub .vm-hero-frame { height: auto; min-height: 660px; padding: 132px 0 0; } #vm-hub .vm-hero-head { max-width: var(--vm-dt-wrap); margin: 0 auto; /* the bottom pad reserves the absolutely-positioned tile row, so the hero grows instead of letting copy slide under the tiles */ padding: 0 var(--vm-dt-pad) 190px; } #vm-hub .vm-hero-eyebrow { font-size: 11.5px; margin-bottom: 16px; } #vm-hub .vm-hero-title { max-width: 760px; font-size: clamp(31px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -1.4px; text-shadow: 0 2px 20px rgba(0, 0, 0, .36); } /* Search pill: city | category | query | Search */ #vm-hub .vm-searchbar { max-width: 840px; margin-top: 28px; padding: 7px 7px 7px 8px; box-shadow: 0 20px 46px rgba(6, 38, 6, .34); } #vm-hub .vm-searchbar-city { padding: 11px 14px; font-size: 13.5px; } #vm-hub .vm-searchbar-city .vm-searchbar-city-i { font-size: 13px; } #vm-hub .vm-searchbar-divider { display: block; height: 24px; } #vm-hub .vm-searchbar-cat { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-radius: 999px; color: var(--vm-text-2); font-weight: 600; font-size: 13.5px; white-space: nowrap; } #vm-hub .vm-searchbar-cat-caret { font-size: 9px; opacity: .55; } #vm-hub .vm-searchbar-input { font-size: 14.5px; padding: 0 14px; } #vm-hub .vm-searchbar-go { width: auto; height: 46px; padding: 0 24px; gap: 9px; font-size: 14.5px; font-weight: 700; box-shadow: 0 6px 16px rgba(26, 137, 23, .5); } #vm-hub .vm-searchbar-go i { font-size: 14px; } /* Trust row — capability claims, no counts. */ #vm-hub .vm-hero-trust { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; color: rgba(255, 255, 255, .86); font-size: 13px; font-weight: 500; } #vm-hub .vm-hero-trust span { display: inline-flex; align-items: center; gap: 8px; } #vm-hub .vm-hero-trust i { color: var(--vm-accent); font-size: 13px; } /* Category tiles: 6-up equal-flex row pinned to the hero bottom. The vmSlide marquee is a mobile affordance only — there is nothing to scroll once every tile is on screen. */ #vm-hub .vm-cat-strip { bottom: 26px; overflow: visible; } #vm-hub .vm-cat-track { animation: none; width: auto; max-width: var(--vm-dt-wrap); margin: 0 auto; padding: 0 var(--vm-dt-pad); gap: 14px; } #vm-hub .vm-cat-tile { flex: 1 1 0; width: auto; height: 132px; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; } /* These tiles are buttons, and on a phone the press state is the feedback. A pointer needs its own: the marquee is off up here (nothing to reveal once all six are on screen), so without this the row is inert under the cursor. Lift the tile, deepen its shadow, and let the photo drift in slightly behind the fixed frame. */ #vm-hub .vm-cat-tile:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); } #vm-hub .vm-cat-img { transition: transform .45s cubic-bezier(.2, .8, .2, 1); } #vm-hub .vm-cat-tile:hover .vm-cat-img { transform: scale(1.07); } #vm-hub .vm-cat-tile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { #vm-hub .vm-cat-tile, #vm-hub .vm-cat-img { transition: none; } #vm-hub .vm-cat-tile:hover { transform: none; } #vm-hub .vm-cat-tile:hover .vm-cat-img { transform: none; } } #vm-hub .vm-cat-label { left: 10px; bottom: 10px; padding: 6px 12px; gap: 7px; } #vm-hub .vm-cat-label span { font-size: 11.5px; } /* --- 8.2 sticky chip bar ------------------------------------------ Full-bleed background, 1320px content. The max() padding centres the row without a wrapper element (adding one would change the phone's DOM for no reason). ------------------------------------------------------------------ */ #vm-hub .vm-filter-bar { display: flex; align-items: center; gap: 12px; padding: 0 max(var(--vm-dt-pad), calc((100% - var(--vm-dt-wrap)) / 2)); } #vm-hub .vm-filter-bar-track { flex: 1; min-width: 0; padding: 12px 0; } #vm-hub .vm-filter-bar .vm-chip { padding: 9px 16px; } #vm-hub .vm-dt-barcount { flex-shrink: 0; font-size: 12.5px; color: var(--vm-muted); white-space: nowrap; } /* --- 8.3 browse shell -------------------------------------------- .vm-dt-browse / .vm-dt-browse-main are bare wrapper divs: inert on a phone, the grid container here. ------------------------------------------------------------------ */ #vm-hub .vm-dt-browse { max-width: var(--vm-dt-wrap); margin: 0 auto; padding: 26px var(--vm-dt-pad) 8px; } #vm-hub .vm-dt-browse-main { min-width: 0; } #vm-hub .vm-sec-title { font-size: 21px; letter-spacing: -.5px; } #vm-hub .vm-sec-note { font-size: 11.5px; } /* Featured: 3-up grid, carousel scroll + dots off. */ #vm-hub .vm-sec--featured { padding: 0 0 34px; } #vm-hub .vm-sec--featured .vm-sec-head { padding: 0; margin-bottom: 14px; } #vm-hub .vm-carousel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; scroll-snap-type: none; padding: 0; } /* A hard 3-up puts the featured card at 245px between 1120 and ~1180, where the 268px sidebar has taken its cut. Measured: that footer needs 256px for a 5-figure price and 272px for a 6-figure one, and below it the price breaks off "/day" and "Rent now" wraps inside its own pill. Rather than drop to 2-up (which orphans the third sponsored card beside a hole), let the row wrap as a ROW: each half stays on one line and the button simply moves under the price. Grid stretches the three cards to a shared height either way, so the strip still reads as one row. */ #vm-hub .vm-feat-card .vm-card-foot { flex-wrap: wrap; row-gap: 10px; } #vm-hub .vm-feat-card .vm-card-foot > * { white-space: nowrap; } #vm-hub .vm-feat-card .vm-card-media { height: 196px; } #vm-hub .vm-dots { display: none; } /* Feed */ #vm-hub .vm-sec--feed { padding: 0; } #vm-hub .vm-sec--feed .vm-sec-head { margin-bottom: 14px; } /* The chip bar already carries this exact string a few hundred pixels up ([data-dt-count] is its mirror), and the design puts the count in the bar only. Hide the duplicate rather than print it twice on one screen. The node itself stays in the DOM and keeps being written: it is still the single source [data-dt-count] copies from. */ #vm-hub .vm-sec--feed .vm-sec-note--count { display: none; } #vm-hub .vm-feed-grid { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; } #vm-hub .vm-feed-card .vm-card-media { height: 152px; } #vm-hub .vm-load-more { display: flex; align-items: center; gap: 9px; width: max-content; margin: 26px auto 0; font-size: 14px; font-weight: 700; color: var(--vm-primary-dark); border-color: #cfe9cd; padding: 13px 28px; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); } #vm-hub .vm-load-more::after { content: "\f063"; /* fa-arrow-down */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; } /* --- 8.4 desktop filter sidebar (revealed at 1120, styled here) ---- */ #vm-hub .vm-dt-sidebar { position: sticky; top: 144px; background: #fff; border: 1px solid var(--vm-border-2); border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); padding: 18px 18px 20px; } #vm-hub .vm-dt-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } #vm-hub .vm-dt-side-title { margin: 0; font-family: var(--vm-font-display); font-weight: 700; font-size: 16px; color: var(--vm-text); } #vm-hub .vm-dt-side-reset { font-size: 12.5px; font-weight: 600; color: var(--vm-muted); } #vm-hub .vm-dt-side-reset:hover { color: var(--vm-primary-dark); } #vm-hub .vm-dt-side-label { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; color: var(--vm-text); } #vm-hub .vm-dt-side-label--flush { margin: 0; } #vm-hub .vm-dt-side-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; } #vm-hub .vm-chip--side { font-size: 12px; padding: 7px 12px; } #vm-hub .vm-dt-side-rule { height: 1px; background: #f0f2f4; margin: 0 0 18px; } #vm-hub .vm-dt-side-pricerow { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } #vm-hub .vm-dt-side-price { font-size: 12px; font-weight: 600; color: var(--vm-primary); } #vm-hub .vm-dt-side-range { width: 100%; accent-color: var(--vm-primary); margin: 0 0 20px; } #vm-hub .vm-dt-side-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #vm-hub .vm-dt-side-toggle-title { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--vm-text); } #vm-hub .vm-dt-side-toggle-sub { margin: 2px 0 0; font-size: 11px; line-height: 1.4; color: var(--vm-muted-2); } /* --- 8.5 how it works --------------------------------------------- Left rail (copy + tabs + stats) and a card grid on the right. The panels are placed explicitly instead of being wrapped in a new div — a wrapper would have to be inert on mobile anyway. ------------------------------------------------------------------ */ #vm-hub .vm-hiw { padding: 0; margin-top: 44px; } #vm-hub .vm-hiw-glow--a { top: -160px; right: -90px; width: 520px; height: 520px; } #vm-hub .vm-hiw-glow--b { bottom: -200px; left: -140px; width: 480px; height: 480px; } #vm-hub .vm-hiw-inner { max-width: var(--vm-dt-wrap); margin: 0 auto; padding: 64px var(--vm-dt-pad) 60px; display: grid; grid-template-columns: minmax(0, 440px) 1fr; /* the trailing 1fr row soaks up any slack the (taller) card grid creates, so the left rail never gets stretched apart */ grid-template-rows: auto auto auto auto auto auto 1fr; column-gap: 64px; align-items: start; } #vm-hub .vm-hiw-overline { grid-column: 1; grid-row: 1; margin-bottom: 14px; } #vm-hub .vm-hiw-title { grid-column: 1; grid-row: 2; margin-bottom: 14px; font-size: clamp(25px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -.8px; } #vm-hub .vm-hiw-lede { grid-column: 1; grid-row: 3; margin-bottom: 26px; font-size: 14.5px; line-height: 1.65; } #vm-hub .vm-hiw-tabs { grid-column: 1; grid-row: 4; max-width: 360px; margin-bottom: 32px; } #vm-hub .vm-hiw-tab { padding: 11px 0; font-size: 13.5px; } #vm-hub .vm-hiw-stats { grid-column: 1; grid-row: 5; margin-top: 0; padding-top: 24px; } #vm-hub .vm-hiw-stat { text-align: left; } #vm-hub .vm-hiw-stat + .vm-hiw-stat { padding-left: 20px; } #vm-hub .vm-hiw-stat-n { font-size: 26px; } #vm-hub .vm-hiw-stat-l { font-size: 11.5px; margin-top: 3px; } #vm-hub .vm-hiw-link { grid-column: 1; grid-row: 6; margin-top: 24px; font-size: 13.5px; } #vm-hub .vm-hiw-panel { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; /* no align-items: the cards stretch to a shared height, as in the design */ } #vm-hub .vm-hiw-step { display: block; padding: 22px 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; } #vm-hub .vm-hiw-rail { display: block; align-self: auto; margin-bottom: 16px; } #vm-hub .vm-hiw-line { display: none; } #vm-hub .vm-hiw-num { width: 42px; height: 42px; font-size: 16px; } #vm-hub .vm-hiw-main { padding-top: 0; } #vm-hub .vm-hiw-main h3 { font-size: 17px; margin-bottom: 7px; } #vm-hub .vm-hiw-main p { font-size: 13px; line-height: 1.6; margin-bottom: 14px; } #vm-hub .vm-hiw-tag { padding: 5px 11px; } /* --- 8.6 trusted agents ------------------------------------------- */ #vm-hub .vm-sec--agents { max-width: var(--vm-dt-wrap); margin: 0 auto; padding: 48px var(--vm-dt-pad) 8px; } #vm-hub .vm-sec--agents .vm-sec-head { padding: 0; margin-bottom: 16px; } #vm-hub .vm-agents-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; overflow: visible; padding: 0; } #vm-hub .vm-agent-card { width: auto; flex-shrink: 1; padding: 20px 16px; } #vm-hub .vm-agent-card .vm-avatar--56 { width: 60px; height: 60px; } #vm-hub .vm-agent-card .vm-agent-name { font-size: 14px; } /* --- 8.7 earn CTA -------------------------------------------------- */ #vm-hub .vm-sec--earn { max-width: var(--vm-dt-wrap); margin: 0 auto; padding: 36px var(--vm-dt-pad) 44px; } #vm-hub .vm-earn-panel { border-radius: 20px; padding: 38px 40px; box-shadow: 0 12px 30px rgba(26, 137, 23, .28); } #vm-hub .vm-earn-blob--a { right: -40px; top: -60px; width: 260px; height: 260px; } #vm-hub .vm-earn-blob--b { right: 180px; bottom: -90px; width: 180px; height: 180px; } #vm-hub .vm-earn-inner { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 12px; } #vm-hub .vm-earn-title { grid-column: 1; grid-row: 1; align-self: end; margin: 0 0 9px; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.18; letter-spacing: -.5px; } #vm-hub .vm-earn-copy { grid-column: 1; grid-row: 2; align-self: start; margin: 0; max-width: 520px; font-size: 14.5px; line-height: 1.55; } #vm-hub .vm-earn-btn { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-left: 16px; font-size: 14.5px; padding: 14px 24px; white-space: nowrap; } #vm-hub .vm-earn-btn2 { grid-column: 3; grid-row: 1 / 3; align-self: center; display: inline-flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 14.5px; font-weight: 600; padding: 13px 22px; border-radius: 999px; white-space: nowrap; } #vm-hub .vm-earn-btn2:hover { color: #fff; background: rgba(255, 255, 255, .22); } /* --- 8.8 footer ---------------------------------------------------- The shipped .vm-foot markup reflowed into the design's 4-column grid. .vm-foot-cols becomes display:contents so its two link columns join the SAME grid as the brand block and Get-in-touch — no new wrapper, and nothing changes below 901px. (NEVER link css/footer.css here: it is a desktop grid AND leaks an unscoped .form-group{display:flex}.) The design's <=600px collapse needs no rule: below 901px this whole block is off and the shipped mobile footer already stacks. THE ONE DESKTOP FOOTER. Keyed off `.vm-dt-shell .vm-foot`, not off a page id, because two pages carry this footer: rentals/index.html and rentals/listing.html. Their