/* Styling for the runtime-hydrated islands. Cached alongside microsite-runtime.js, so every microsite shares one small stylesheet rather than inlining it per page. The page's own layout (positions, sizes, colours) comes from the document's generated CSS; this only styles the interactive chrome the runtime builds. */ /* --- Motion layer ------------------------------------------------------------------------------- * Scroll-in reveals, a staggered Facts grid, count-up numbers and a subtle hero parallax — added by * microsite-runtime.js (motionLayer). SAFETY: every initially-hidden state is gated behind `.mo` on * , which the runtime adds ONLY when it runs AND prefers-reduced-motion is off. So with JS * disabled, an old browser, or reduced-motion, `.mo` is absent and everything is fully visible — * motion can never hide content. */ .mo .mo-rise { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .mo .mo-rise.mo-in { opacity: 1; transform: none; } /* Facts & features cards stagger up when the grid scrolls in. */ .mo [class*="factgrid"] [class*="fact-"] { opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); } .mo [class*="factgrid"].mo-in [class*="fact-"] { opacity: 1; transform: none; } .mo [class*="factgrid"].mo-in [class*="fact-"]:nth-child(2) { transition-delay: .08s; } .mo [class*="factgrid"].mo-in [class*="fact-"]:nth-child(3) { transition-delay: .16s; } .mo [class*="factgrid"].mo-in [class*="fact-"]:nth-child(4) { transition-delay: .24s; } .mo [class*="factgrid"].mo-in [class*="fact-"]:nth-child(n+5) { transition-delay: .3s; } .mo .mono-hg-main img { will-change: transform; } /* Gallery — CAROUSEL (default): one photo at a time, flicked through with arrows/dots/swipe. The frame self-sizes from an aspect-ratio so slides never jump height and it never collapses inside a flow layout. */ .mono-gallery { position: relative; } .mono-gal-frame { display: block; width: 100%; height: auto; aspect-ratio: var(--gal-ratio, 3 / 2); border: 0; padding: 0; background: #eef0f2; cursor: zoom-in; overflow: hidden; border-radius: var(--gal-radius, 0); } .mono-gal-frame img { width: 100%; height: 100%; object-fit: var(--gal-fit, cover); display: block; } /* Photos fill in over a soft placeholder box rather than flashing blank while they load. Static (no animation) — the buyer page runs on phones and shouldn't shimmer behind every photo. */ .mono-gal-frame, .mono-hg-main, .mono-hg-thumb, .mono-gg-item { background-color: #eef1f5; } .mono-gal-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(230,230,235,0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .mono-gal-arrow svg, .mono-lb-nav svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)); } .mono-gal-prev { left: 12px; } .mono-gal-next { right: 12px; } .mono-gal-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 6px; justify-content: center; } .mono-gal-dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.55); cursor: pointer; padding: 0; } .mono-gal-dots button.is-on { background: #fff; } .mono-gal-count { position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,0.6); color: #fff; font-size: 13px; font-weight: 600; padding: 4px 11px; border-radius: 999px; } .mono-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(28,30,35,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; } .mono-lightbox img { max-width: 94vw; max-height: 94vh; object-fit: contain; } .mono-lb-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 10000; width: 48px; height: 48px; border: 0; border-radius: 999px; background: rgba(0,0,0,0.5); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; display: flex; align-items: center; justify-content: center; } .mono-lb-prev { left: 16px; } .mono-lb-next { right: 16px; } .mono-lb-close { position: fixed; top: 16px; right: 16px; z-index: 10001; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(0,0,0,0.5); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; display: flex; align-items: center; justify-content: center; } .mono-lb-close svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)); } img[data-zoom] { cursor: zoom-in; } /* Hero gallery grid: big image + thumbnail column + "view all". Flush by default — no frame, no background, no rounding — so a dark section can never ring the photos. Gap and radius are knobs. */ .mono-herogrid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--hg-gap, 8px); } .mono-hg-main, .mono-hg-thumb { border: 0; padding: 0; cursor: pointer; overflow: hidden; border-radius: var(--hg-radius, 0); background: #eef0f2; } .mono-hg-main { width: 100%; height: 100%; } .mono-hg-main img { width: 100%; height: 100%; object-fit: cover; display: block; } .mono-hg-col { display: grid; grid-template-columns: repeat(var(--hg-cols, 2), 1fr); grid-auto-rows: 1fr; gap: var(--hg-gap, 8px); min-height: 0; } .mono-hg-thumb { position: relative; width: 100%; height: 100%; } .mono-hg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .mono-hg-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(17,24,39,0.5); color: #fff; font-size: 15px; font-weight: 600; } @media (max-width: 640px) { /* A phone gets a single full-bleed lead photo — the two-column mosaic can't breathe at this width — and it goes edge-to-edge with square corners, the way a portal app shows it. */ .mono-herogrid { grid-template-columns: 1fr; grid-auto-rows: auto; } .mono-hg-main { aspect-ratio: 4/3; border-radius: 0; } .mono-hg-col { display: none; } } /* Gallery — columns across, wrap or single scrolling row, chosen shape and fit. No forced background, so nothing frames the photos unless the agent adds a fill. */ .mono-gallery-grid { display: flex; flex-wrap: wrap; gap: var(--gap, 8px); overflow-x: auto; } .mono-gg-item { flex: 0 0 calc((100% - (var(--cols, 3) - 1) * var(--gap, 8px)) / var(--cols, 3)); border: 0; padding: 0; background: transparent; border-radius: var(--gg-radius, 0); overflow: hidden; cursor: pointer; } .mono-gg-item.has-aspect { aspect-ratio: var(--gg-aspect, 4 / 3); } .mono-gg-item img { width: 100%; height: 100%; object-fit: var(--gg-fit, cover); display: block; } .mono-gg-item:not(.has-aspect) img { height: auto; } /* natural shape — real proportions */ @media (max-width: 640px) { /* Fewer columns on a phone so thumbnails stay usable (default 2; --cols-m is a per-element knob). */ .mono-gg-item { flex-basis: calc((100% - (var(--cols-m, 2) - 1) * var(--gap, 8px)) / var(--cols-m, 2)); } } /* Map with layer tabs */ .mono-map { position: relative; display: flex; flex-direction: column; } .mono-map-tabs { display: flex; gap: 6px; padding: 8px; background: rgba(255,255,255,0.9); flex-wrap: wrap; } .mono-tab { border: 1px solid #d6dbe2; background: #fff; color: #33404f; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; } .mono-tab.is-on { background: #111827; color: #fff; border-color: #111827; } /* Establish a compositor-level clipping boundary around the whole MapKit subtree — not just a border-radius, which doesn't clip MapKit's GPU-composited canvas/tile layers during scroll. The clip-path on this in-flow box + isolation forces the map's layers to be clipped to the rounded bottom corners; a second clip-path on MapKit's own root (.mk-map-view) contains its subtree. Deliberately NOT using transform: translateZ(0) / will-change (tried in PR #126, made it worse). */ .mono-map-canvas { flex: 1; position: relative; min-height: 0; overflow: hidden; overflow: clip; border-bottom-left-radius: var(--content-radius, 12px); border-bottom-right-radius: var(--content-radius, 12px); clip-path: inset(0 round 0 0 var(--content-radius, 12px) var(--content-radius, 12px)); isolation: isolate; } /* Cross-origin map iframe: sits where the canvas would (flex:1 child of .mono-map). Its own browsing context already isolates MapKit's composited layers, so a plain border-radius clips it cleanly — no clip-path needed (that isolation is exactly why the map moved into a frame). */ .mono-map-frame { flex: 1; min-height: 0; width: 100%; border: 0; display: block; border-bottom-left-radius: var(--content-radius, 12px); border-bottom-right-radius: var(--content-radius, 12px); } .mono-map-canvas .mk-map-view { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden; overflow: clip; clip-path: inset(0); } /* Apple MapKit sizes its own map view to fill this element; controls (Street View, zoom) are absolutely positioned children and must NOT be stretched — so no blanket child sizing here. */ .mono-map-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #48566a; text-align: center; padding: 12px; /* Explicit UI font so the placeholder matches the rest of the chrome in EVERY context — inline it inherits the microsite font, but standalone in the map frame it would otherwise fall back to serif. */ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } .mono-map-ph-ic { color: #9aa4b2; margin-bottom: 6px; } .mono-map-ph strong { font-size: 16px; font-weight: 600; color: #1f2937; } .mono-map-ph span { font-size: 13px; } /* Street View (Look Around) control + overlay */ /* Top-left: the bottom-left corner carries Apple's required Maps/Legal attribution (which must stay visible), and the bottom-right has the zoom controls. */ .mono-map-sv { position: absolute; left: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 7px 9px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.94); color: #1f2937; font: 600 12.5px/1 inherit; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.22); } .mono-map-sv:hover { background: #fff; } .mono-map-sv svg { display: block; } .mono-map-sv-overlay { position: absolute; inset: 0; z-index: 4; background: #000; } .mono-map-sv-stage { position: absolute; inset: 0; } .mono-map-sv-stage .mk-look-around, .mono-map-sv-stage > * { width: 100%; height: 100%; } .mono-map-sv-close { position: absolute; top: 10px; left: 10px; z-index: 5; width: 32px; height: 32px; border: 0; border-radius: 999px; background: rgba(0,0,0,0.55); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; } .mono-map-sv-close:hover { background: rgba(0,0,0,0.75); } .mono-map-sv-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 14px; } /* Read more — a clamped description with a fade and a toggle. The container's own class supplies the type; these add only the clip, the fade, and the link-style button. */ .rich.is-clamped { overflow: hidden; position: relative; } .rich.is-clamped::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; } .mono-readmore { display: inline-flex; align-items: center; margin-top: 12px; padding: 6px 0; background: none; border: 0; color: #1277e1; font: inherit; font-weight: 600; cursor: pointer; } .mono-readmore:hover { text-decoration: underline; } /* Chat */ .mono-chat { display: flex; flex-direction: column; } .mono-chat-launch { border: 0; background: #111827; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; align-self: flex-start; } .mono-chat-thread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 0; } .mono-msg { margin: 0; padding: 8px 12px; border-radius: 12px; max-width: 85%; font-size: 15px; line-height: 1.4; } .mono-msg-buyer { align-self: flex-end; background: #2563eb; color: #fff; } .mono-msg-agent { align-self: flex-start; background: #f1f3f6; color: #111827; } .mono-chat-form { display: flex; gap: 8px; } .mono-chat-form input { flex: 1; padding: 10px 12px; border: 1px solid #d6dbe2; border-radius: 10px; font-size: 15px; } .mono-chat-form button { border: 0; background: #111827; color: #fff; border-radius: 10px; padding: 0 16px; font-weight: 600; cursor: pointer; } /* Embedded AI chat: an always-open physical panel in the page flow (header + thread + input). */ .mono-chatpanel { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: var(--content-radius, 16px); overflow: hidden; background: #fff; min-height: 380px; max-height: 560px; } .mono-cp-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: #0b1220; color: #fff; } .mono-cp-mark { display: inline-flex; } .mono-cp-mark svg { width: 18px; height: 18px; } .mono-cp-head strong { font-size: 15px; font-weight: 700; } .mono-cp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 14px; } .mono-cp-body .mono-chat-thread { flex: 1; } /* Starter-question chips — tappable conversation openers shown until the buyer asks anything. */ .mono-chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 10px; } .mono-chat-chip { border: 1px solid #d6dbe2; background: #fff; color: #1f2937; border-radius: 999px; padding: 8px 14px; font-size: 14px; line-height: 1.2; cursor: pointer; } .mono-chat-chip:hover { background: #f1f3f6; border-color: #c3cbd6; } /* Platform footer — Locira attribution + privacy line, injected at publish (below the agency footer). */ /* One combined footer: the agency's identity on top, a hairline, then the quiet Locira attribution + privacy line — a single band rather than two stacked footers. */ .mono-platform { border-top: 1px solid #e6e9ee; background: #fafbfc; padding: 22px 20px; font-family: 'Helvetica Neue','Segoe UI',Roboto,Helvetica,Arial,sans-serif; } .mono-platform-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .mono-footer-agency { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; } .mono-footer-name { font-size: 14px; font-weight: 700; color: #102a43; letter-spacing: -0.01em; } .mono-footer-addr { font-size: 13px; color: #6b7480; } .mono-footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; } .mono-footer-agency + .mono-footer-meta { padding-top: 14px; border-top: 1px solid #eceef1; } .mono-platform-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #334155; font-size: 13px; white-space: nowrap; flex: 0 0 auto; } .mono-platform-brand img { display: block; } .mono-platform-brand strong { font-weight: 700; color: #102a43; } .mono-platform-privacy { margin: 0; font-size: 12px; line-height: 1.5; color: #6b7480; max-width: 720px; } .mono-platform-privacy a { color: #1277e1; } @media (max-width: 640px) { /* The Listing template has a position:fixed action bar at the bottom on mobile; give the footer room so its branding + privacy line aren't hidden under it (plus the iPhone home-indicator safe area). */ .mono-platform { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } /* Floor-plan images size to the image, not a fixed-height grey frame. A wide plan on a narrow (mobile) screen otherwise scales down inside a tall 520px box and floats in grey. Height:auto = the block hugs the image, no grey. Targets the standard "Floor plan image" block (stable slug) across all listings. */ [class*="floor-plan-image"] { height: auto !important; } /* Room features (Facts & features): keep the responsive grid (4-up desktop, 2-up mobile), just make the cards compact and lighter — less padding, a subtler grey, and a tighter icon→number gap. */ [class*="factgrid"] { gap: 10px !important; } [class*="factgrid"] > * { padding: 11px 13px !important; background: #f8f9fb !important; } [class*="factgrid"] [class*="value-"] { margin-top: 6px !important; }