/* Source CRM — public listing. Full-bleed imagery, two-column copy, brand indigo #411b66. */ /* --------------------------------------------------------------------------- PERMANENT horizontal-shunt fix (scrollbar-safe full-bleed). Cause: the full-bleed breakout below used `calc(50% - 50vw)`. `50vw` counts the vertical scrollbar's width; `50%` does not. So on any browser with a classic (space-consuming) scrollbar, every full-bleed block ended up ~half a scrollbar too wide and poked past the viewport edge — a few px of horizontal scroll that lands on (which is why body{overflow-x:hidden} never caught it). Overlay-scrollbar browsers have S=0 so the bug was invisible in automated testing. Two independent guarantees: 1. Clip horizontal overflow at the ROOT so the page can never scroll sideways. `overflow-x: clip` (not hidden) creates no scroll container, so position: sticky / absolute (our transparent header) keep working, and the off-screen honeypot input is contained for free. 2. Measure the real scrollbar width as --sbw and correct the breakout math so the full-bleed blocks hit the visible viewport edge exactly — clip then never actually has to crop anything. :has() and overflow:clip are baseline in evergreen browsers (2023+). --sbw falls back to 0px where unsupported, reverting to the original behaviour, and the @supports block clips as a legacy safety net. */ html:has(body.single-vd_property) { --sbw: calc(100vw - 100%); /* real vertical-scrollbar width, no magic number */ overflow-x: clip; /* sticky-safe; kills the shunt for good */ } @supports not selector(:has(*)) { body.single-vd_property { overflow-x: clip; } } /* The whole listing breaks out of the theme's boxed container to full width; inner content is re-constrained by .vpd-container. Both-side negative margins are used (width:100vw alone gets overridden by some themes). The + --sbw/2 term compensates for the scrollbar so there is zero overshoot. */ .vpd-listing { color: #1f2430; margin-left: calc(50% - 50vw + (var(--sbw, 0px) / 2)); margin-right: calc(50% - 50vw + (var(--sbw, 0px) / 2)); } /* Kill Astra's right sidebar on listing pages and make the content column full width — otherwise the reserved sidebar shoves the full-bleed content left and leaves a big gap on the right. */ .single-vd_property #secondary, .single-vd_property .widget-area { display: none !important; } .single-vd_property #primary, .single-vd_property .content-area, .single-vd_property .site-main { width: 100% !important; max-width: 100% !important; } .vpd-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* Full-bleed children simply fill the now-full-width listing wrapper */ .vpd-fullbleed { width: 100%; } /* Hero — flush to the very top, tall, with the floating header sitting over it */ .vpd-listing { margin-top: 0; } .vpd-hero { margin: 0 0 56px; } .vpd-hero-img { width: 100%; height: min(94vh, 980px); object-fit: cover; display: block; } /* Float the site header transparently over the hero (listing pages only), and recolour the menu white so it reads over the photo — matches the homepage. */ .single-vd_property .site-header, .single-vd_property #masthead { position: absolute !important; top: 0; left: 0; right: 0; width: 100%; z-index: 999; box-shadow: none !important; } /* Astra's Header Footer Builder applies `margin:33px` to .site-header, which on a full-bleed listing page pushes it 33px past the right edge and creates a horizontal scroll (the "shunt" when scrolling). Neutralise the horizontal margin; keep vertical. */ .single-vd_property.ast-hfb-header .site-header, .single-vd_property .site-header { margin-left: 0 !important; margin-right: 0 !important; } .single-vd_property.admin-bar .site-header, .single-vd_property.admin-bar #masthead { top: 32px; } .single-vd_property .ast-primary-header-bar, .single-vd_property .main-header-bar, .single-vd_property .main-header-bar-wrap, .single-vd_property .ast-primary-header { background: transparent !important; border: 0 !important; box-shadow: none !important; } .single-vd_property .main-header-menu a, .single-vd_property .main-header-menu .menu-link, .single-vd_property .ast-header-navigation-arrow { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.4); } /* Mobile hamburger / toggle white over the hero */ .single-vd_property .menu-toggle, .single-vd_property .ast-mobile-menu-buttons .menu-toggle, .single-vd_property .menu-toggle .menu-toggle-icon { color: #fff !important; } .single-vd_property .menu-toggle svg, .single-vd_property .ast-mobile-menu-buttons svg, .single-vd_property .menu-toggle .ast-mobile-svg { fill: #fff !important; } .single-vd_property .site-content { padding-top: 0 !important; margin-top: 0 !important; } @media (max-width: 782px) { .single-vd_property.admin-bar .site-header, .single-vd_property.admin-bar #masthead { top: 46px; } } /* Lead */ .vpd-lead { padding-top: 8px; } .vpd-eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: 13px; color: #6b7280; margin: 0 0 10px; } .vpd-headline { font-family: "Roboto", sans-serif; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin: 0 0 22px; color: #411b66; font-weight: 400; letter-spacing: -1px; } .vpd-btn-outline { display: inline-block; border: 1.5px solid #411b66; color: #411b66 !important; background: transparent; text-decoration: none; padding: 13px 30px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; transition: background .15s ease, color .15s ease; } .vpd-btn-outline:hover { background: #411b66; color: #fff !important; } .vpd-rule { border: 0; border-top: 1px solid #e4e0ec; margin: 34px 0; } /* Two columns */ .vpd-cols { display: flex; gap: 56px; align-items: flex-start; } .vpd-col-main { flex: 1 1 62%; min-width: 0; } .vpd-col-side { flex: 0 0 300px; } .vpd-lead-para { font-size: 21px; line-height: 1.5; color: #2b3038; margin: 0 0 22px; } .vpd-desc { font-size: 17px; line-height: 1.75; color: #3a3f47; } .vpd-desc p { margin: 0 0 16px; } .vpd-side-block { margin-bottom: 26px; } .vpd-side-block h3 { font-family: "Roboto", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 16px; font-weight: 500; color: #411b66; margin: 0 0 10px; } .vpd-side-block p { margin: 0 0 5px; color: #4a4f57; font-size: 15px; } /* Second body paragraph — location & amenities */ .vpd-amenities { font-size: 17px; line-height: 1.75; color: #3a3f47; max-width: 760px; margin: 0 0 48px; } .vpd-amenities p { margin: 0 0 16px; } /* Full-width colour map */ .vpd-map { margin: 56px 0; line-height: 0; } .vpd-map iframe { display: block; width: 100%; height: 520px; border: 0; } @media (max-width: 782px) { .vpd-map iframe { height: 360px; } } /* Property details section */ .vpd-detailcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; margin: 8px 0 48px; } .vpd-detail { margin-bottom: 28px; } .vpd-detail h3 { font-family: "Roboto", sans-serif; color: #411b66; font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; } .vpd-detail ul { list-style: none; margin: 0; padding: 0; } .vpd-detail li { padding: 0; margin: 0 0 2px !important; font-size: 15px; line-height: 1.5; color: #4a4f57; } .vpd-detail p { font-size: 15px; line-height: 1.5; color: #4a4f57; margin: 0 0 8px; } /* 16-square photo grid; floorplan spans cols 3-4, rows 2-3 (middle-right) */ .vpd-photogrid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 15vw, 260px); gap: 8px; grid-auto-flow: row; margin: 8px 0 64px; } .vpd-photogrid .vpd-ph, .vpd-photogrid .vpd-fp { overflow: hidden; } .vpd-photogrid .vpd-ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .vpd-photogrid.has-floorplan .vpd-fp { grid-column: 3 / 5; grid-row: 2 / 4; } .vpd-photogrid .vpd-fp img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; } /* Mobile photo carousels (shown only on mobile; desktop grid hidden) */ .vpd-photomobile { display: none; } .vpd-carousel { position: relative; margin-bottom: 8px; } .vpd-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .vpd-carousel-track::-webkit-scrollbar { display: none; } .vpd-slide { flex: 0 0 100%; scroll-snap-align: center; } .vpd-slide img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .vpd-carousel-prev, .vpd-carousel-next { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(24,31,47,.5); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; } .vpd-carousel-prev { left: 12px; } .vpd-carousel-next { right: 12px; } .vpd-carousel-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; } .vpd-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,.55); padding: 0; cursor: pointer; } .vpd-dot.active { background: #fff; } .vpd-mfp img { width: 100%; height: auto; display: block; } @media (max-width: 782px) { .vpd-photogrid { display: none; } .vpd-photomobile { display: block; margin: 8px 0 40px; } } /* Enquiry form */ .vpd-enquire { max-width: 720px; margin: 0 auto 72px; text-align: center; } .vpd-enquire h2 { color: #411b66; font-size: 30px; margin: 0 0 6px; } .vpd-enquire-sub { color: #6b7280; margin: 0 0 26px; } .vpd-form-row { display: flex; gap: 14px; margin-bottom: 14px; } .vpd-form input[type="text"], .vpd-form input[type="email"], .vpd-form input[type="date"], .vpd-form textarea { width: 100%; padding: 12px 15px; border: 1px solid #c5cbd3; border-radius: 4px; font-size: 15px; background: #f9fafb; color: #1f2430; box-sizing: border-box; font-family: "DM Sans", sans-serif; } .vpd-form textarea { margin-bottom: 16px; resize: vertical; } .vpd-form-label { display: block; text-align: left; font-size: 13px; color: #6b7280; margin-bottom: 14px; } .vpd-form-label input { margin-top: 6px; } .vpd-form input:focus, .vpd-form textarea:focus { outline: none; border-color: #411b66; background: #fff; } .vpd-form .vpd-btn-outline { cursor: pointer; } .vpd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; } .vpd-form-msg { margin: 14px 0 0; font-size: 15px; min-height: 20px; } .vpd-form-msg.ok { color: #12776b; } .vpd-form-msg.err { color: #c0392b; } @media (max-width: 900px) { .vpd-cols { flex-direction: column; gap: 32px; } .vpd-col-side { flex-basis: auto; width: 100%; } .vpd-photogrid { grid-template-columns: repeat(2, 1fr); } .vpd-photogrid.has-floorplan .vpd-fp { grid-column: 1 / 3; grid-row: auto; } .vpd-form-row { flex-direction: column; gap: 14px; } } /* ------------------------------------------------------------- Grid --- */ .vpd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px; } .vpd-card { display: block; text-decoration: none; color: inherit; overflow: hidden; background: #fff; } .vpd-card-img img { width: 100%; height: 300px; object-fit: cover; display: block; transition: transform .5s ease; } .vpd-card:hover .vpd-card-img img { transform: scale(1.04); } .vpd-card-body { padding: 18px 6px 30px; display: flex; flex-direction: column; gap: 4px; } .vpd-card-addr { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: #6b7280; } .vpd-card-head { font-size: 20px; font-weight: 600; color: #411b66; line-height: 1.2; } .vpd-card-price { color: #12776b; font-weight: 600; } .vpd-grid-empty { color: #6b7280; } /* ========================================================================== 2.26.18 — Mobile listing hero (cinematic pan + badge reveal) & upgraded photo-carousel controls. All scoped to mobile; desktop is untouched. ========================================================================== */ .vpd-mhero { display: none; } @keyframes vpdmh-open { 0% { clip-path: polygon(43% 45%,57% 45%,64% 50%,57% 55%,43% 55%,36% 50%); } 100% { clip-path: polygon(-15% -12%,115% -12%,140% 50%,115% 112%,-15% 112%,-40% 50%); } } @keyframes vpdmh-pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @keyframes vpdmh-up { to { opacity: 1; transform: none; } } @keyframes vpdmh-logoin { to { opacity: 1; transform: none; } } @keyframes vpdmh-introout{ to { opacity: 0; } } @keyframes vpdmh-headerin{ from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { /* the mobile hero replaces the desktop hero image + lead */ .single-vd_property .vpd-hero { display: none; } .single-vd_property .vpd-lead { display: none; } .vpd-mhero { display: block; position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #160f28; } .vpd-mhero-plate { position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg,#160f28,#2a1642 60%,#3d1b4f); } .vpd-mhero-kb { position: absolute; inset: 0; z-index: 2; background-size: cover; background-position: 0% 50%; transform: scale(1.06); clip-path: polygon(-15% -12%,115% -12%,140% 50%,115% 112%,-15% 112%,-40% 50%); animation: vpdmh-open 1.5s .7s cubic-bezier(.65,0,.2,1) both, vpdmh-pan 17s 1.9s ease-in-out infinite alternate; } .vpd-mhero-grad { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg,rgba(20,12,34,.28) 0%,transparent 22%,transparent 46%,rgba(20,12,34,.35) 74%,rgba(20,12,34,.82) 100%); } .vpd-mhero-lead { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 22px calc(30px + env(safe-area-inset-bottom)); color: #fff; } .vpd-mhero-lead > * { opacity: 0; transform: translateY(20px); animation: vpdmh-up .8s both; } .vpd-mh-eyebrow { font-family: "Roboto", sans-serif; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; color: #ffe0b8; margin: 0 0 10px; animation-delay: 2.15s; } .vpd-mh-title { font-family: "Roboto", sans-serif; font-weight: 300; font-size: clamp(28px,8vw,38px); line-height: 1.06; letter-spacing: -.5px; color: #ffe0b8 !important; margin: 0 0 8px; text-shadow: 0 3px 24px rgba(0,0,0,.4); animation-delay: 2.28s; } .vpd-mh-strap { font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.95) !important; text-shadow: 0 1px 10px rgba(0,0,0,.45); margin: 0 0 14px; max-width: 520px; animation-delay: 2.36s; } .vpd-mh-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; animation-delay: 2.44s; } .vpd-mh-price .p { font-family: "Roboto", sans-serif; font-weight: 500; font-size: 19px; } .vpd-mh-price .d { font-size: 13px; color: rgba(255,255,255,.9); border-left: 1px solid rgba(255,255,255,.4); padding-left: 12px; } .vpd-mh-btns { display: flex; gap: 10px; animation-delay: 2.54s; } .vpd-mh-btns a { flex: 1; text-align: center; text-decoration: none; font-weight: 600; font-size: 13.5px; letter-spacing: .02em; border-radius: 10px; padding: 15px 10px; } .vpd-mh-bp { background: #E6007E; color: #fff !important; box-shadow: 0 10px 26px rgba(230,0,126,.4); } .vpd-mh-bg { background: rgba(255,255,255,.14); color: #fff !important; border: 1.5px solid rgba(255,255,255,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .vpd-mhero-intro { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: vpdmh-introout .45s 1.15s ease forwards; } .vpd-mhero-logo { width: 52vw; max-width: 280px; filter: brightness(0) invert(1) drop-shadow(0 6px 24px rgba(0,0,0,.5)); opacity: 0; transform: translateY(10px) scale(.86); animation: vpdmh-logoin .7s .15s cubic-bezier(.2,.8,.2,1) forwards; } /* header floats over the hero: whiten + enlarge the logo, reveal after the intro */ .single-vd_property .site-header, .single-vd_property #masthead { animation: vpdmh-headerin .6s 2.0s both; } .single-vd_property .custom-logo, .single-vd_property .site-logo-img .custom-logo, .single-vd_property .site-header img { width: calc(50vw - 27px) !important; height: auto !important; max-width: 230px; filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.5)); } } /* --- Upgraded photo-carousel controls (mobile only DOM) --- */ .vpd-carousel-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; z-index: 2; pointer-events: none; background: linear-gradient(180deg,transparent,rgba(8,5,15,.5)); } .vpd-carousel-count { position: absolute; top: 14px; right: 14px; z-index: 3; background: rgba(10,6,18,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .03em; padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,.18); } .vpd-carousel-dots { bottom: 14px; z-index: 3; } .vpd-carousel-dots .vpd-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; transition: width .25s ease, background .25s ease; } .vpd-carousel-dots .vpd-dot.active { background: #fff; width: 22px; border-radius: 5px; } @media (prefers-reduced-motion: reduce) { .vpd-mhero-kb { animation: none; clip-path: none; transform: none; } .vpd-mhero-lead > * { animation: none; opacity: 1; transform: none; } .vpd-mhero-intro { display: none; } .single-vd_property .site-header, .single-vd_property #masthead { animation: none; opacity: 1; transform: none; } } /* 2.26.20 — Mobile menu readability. The header menu links are forced white so they read over the hero on DESKTOP; on mobile they only ever appear inside the dropdown (a light panel), where white-on-white is unreadable. Re-colour them to the brand purple on mobile so the dropdown is legible. Desktop is unaffected. */ @media (max-width: 900px) { .single-vd_property .main-header-menu a, .single-vd_property .main-header-menu .menu-link, .single-vd_property .main-navigation a, .single-vd_property .ast-header-navigation-arrow { color: #411b66 !important; text-shadow: none !important; } }