/* ═══════════════════════════════════════════════════════════════ RESPONSIVE AUDIT FIXES — CSS / layout only Loaded at end of so these beat head-injected module CSS. Desktop (≥1280px): no visual changes. No JS / hotspot / tower coordinate / viewer changes. ═══════════════════════════════════════════════════════════════ */ /* ── Global: no horizontal scroll on small viewports ── */ @media (max-width: 1279px) { html { max-width: 100%; overflow-x: hidden; } #fp-overlay, #gallery-overlay, #map-overlay, #gmap-embed-overlay, #unit-viewer-overlay, #unit-row, #landing-screen, #bottom-panel { max-width: 100%; box-sizing: border-box; } } /* ── Loader: long letter-spacing overflows at 320–390 ── */ @media (max-width: 480px) { .loader-title { font-size: clamp(1.15rem, 5.5vw, 1.85rem); letter-spacing: 0.22em; padding: 0 16px; text-align: center; max-width: 100%; } .loader-sub { font-size: 0.55rem; letter-spacing: 0.18em; padding: 0 12px; text-align: center; } } /* ═══════════════════════════════════════════════════════════════ FLOOR PLAN — Amenities desktop-only + map fill ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1279px) { #fp-sitemap-legend { display: none !important; } } @media (max-width: 767px) { /* Reclaim chrome: float SITE PLAN + compass over the map (like desktop) */ #fp-overlay:has(#fp-card.fp-topbar--sitemap) { padding: 2px !important; } #fp-card.fp-topbar--sitemap #fp-topbar { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 22 !important; background: transparent !important; border-bottom-color: transparent !important; pointer-events: none !important; min-height: 0 !important; height: 0 !important; padding: 0 !important; overflow: visible !important; } #fp-panel-sitemap { display: grid !important; grid-template-rows: minmax(0, 1fr) !important; gap: 0 !important; padding: 0 !important; background: var(--fp-sp-map-tone, #e8e4dc) !important; overflow: visible !important; } /* NO CSS transform:scale here — that fought fitSitemapImageToPanel() and broke tower/leader alignment. Mobile map size comes from the taller Cloudinary crop in floorplan.js + contain fit to the full stage. */ #fp-sitemap-stage { position: relative !important; inset: auto !important; width: 100% !important; height: 100% !important; min-height: 0 !important; background-image: none !important; background-size: auto !important; background-color: #e6e3dc !important; /* visible so tower pills + SVG leader lines are never clipped */ overflow: visible !important; } #fp-sitemap-wrap { transform: none !important; overflow: visible !important; } #fp-sitemap-img { object-fit: contain !important; } #fp-sitemap-leader-svg { overflow: visible !important; } #fp-sitemap-hint { display: none !important; } } /* ── Tower pills: scale down on tablet/phone; desktop clamp untouched ── */ @media (max-width: 1279px) { .fp-glb-tag { --fp-tag-pad-y: clamp(0.34rem, 0.55vw + 0.24rem, 0.55rem) !important; --fp-tag-pad-x: clamp(0.6rem, 0.85vw + 0.4rem, 1.05rem) !important; --fp-tag-font: clamp(0.65rem, 0.45vw + 0.5rem, 0.875rem) !important; --fp-tag-min-h: clamp(1.75rem, 1vw + 1.35rem, 2.35rem) !important; --fp-tag-tracking: clamp(0.15px, 0.02vw, 0.3px) !important; } .fp-glb-leader { height: clamp(1.4rem, 3.2vw, 2.4rem) !important; } } @media (max-width: 1024px) { .fp-glb-tag { --fp-tag-pad-y: clamp(0.3rem, 0.7vw + 0.2rem, 0.48rem) !important; --fp-tag-pad-x: clamp(0.55rem, 1.1vw + 0.32rem, 0.9rem) !important; --fp-tag-font: clamp(0.625rem, 0.7vw + 0.42rem, 0.8125rem) !important; --fp-tag-min-h: clamp(1.7rem, 1.4vw + 1.2rem, 2.15rem) !important; } } @media (max-width: 767px) { .fp-glb-tag { --fp-tag-pad-y: clamp(0.28rem, 1vw + 0.18rem, 0.4rem) !important; --fp-tag-pad-x: clamp(0.48rem, 1.8vw + 0.28rem, 0.72rem) !important; --fp-tag-font: clamp(0.6rem, 1.6vw + 0.38rem, 0.72rem) !important; --fp-tag-min-h: clamp(1.625rem, 2.5vw + 1.05rem, 1.95rem) !important; --fp-tag-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.14) !important; --fp-tag-shadow-active: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.18) !important; } .fp-glb-leader { height: clamp(1.15rem, 3vw, 1.85rem) !important; } /* Keep hover lift subtle so pills stay inside the map stage */ .fp-glb-label:hover .fp-glb-tag, .fp-glb-label.fp-glb-label--hover .fp-glb-tag { transform: translateY(-1px) !important; } } @media (max-width: 390px) { .fp-glb-tag { --fp-tag-pad-y: 0.26rem !important; --fp-tag-pad-x: 0.48rem !important; --fp-tag-font: 0.6rem !important; --fp-tag-min-h: 1.55rem !important; } } /* Site Plan chrome — stronger heading + compact compass on phones */ @media (max-width: 767px) { #fp-card.fp-topbar--sitemap #fp-sitemap-label { display: block !important; position: absolute !important; left: 50% !important; top: max(10px, env(safe-area-inset-top, 0px)) !important; transform: translateX(-50%) !important; z-index: 12 !important; pointer-events: none !important; font-size: clamp(1.05rem, 4.2vw, 1.35rem) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; padding: 10px 18px !important; max-width: min(70vw, 280px) !important; border-radius: 16px !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14) !important; } #fp-card.fp-topbar--sitemap #fp-sitemap-compass { display: block !important; position: absolute !important; top: max(10px, env(safe-area-inset-top, 0px)) !important; right: max(10px, env(safe-area-inset-right, 0px)) !important; margin: 0 !important; z-index: 13 !important; height: clamp(44px, 12vw, 56px) !important; max-height: 56px !important; max-width: min(24vw, 88px) !important; padding: 6px !important; border-radius: 14px !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14) !important; } #fp-cluster-hint { font-size: clamp(9px, 2.8vw, 11px) !important; max-width: calc(100% - 16px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } @media (max-width: 360px) { #fp-card.fp-topbar--sitemap #fp-sitemap-label { font-size: 1rem !important; padding: 9px 16px !important; } #fp-parity-toggle, #fp-view-toggle { max-width: calc(100vw - 120px); } } /* Tablet Site Plan (768–1279): fuller map after amenities hide */ @media (min-width: 768px) and (max-width: 1279px) { #fp-overlay:has(#fp-card.fp-topbar--sitemap) { --fp-sp-inset: clamp(12px, 1.4vw, 18px); padding: clamp(8px, 1vw, 12px) !important; } #fp-card.fp-topbar--sitemap #fp-sitemap-label { font-size: clamp(1.1rem, 1.6vw + 0.6rem, 1.75rem) !important; padding: clamp(10px, 1.1vw, 16px) clamp(18px, 2vw, 32px) !important; max-width: min(46vw, 380px) !important; } #fp-card.fp-topbar--sitemap #fp-sitemap-compass { height: clamp(72px, 10vh, 120px) !important; max-height: 120px !important; max-width: min(18vw, 120px) !important; } } /* Cluster / unit plan images — stay contained */ @media (max-width: 1279px) { #fp-cluster-img, #fp-plan-img { max-width: 100% !important; } #fp-cluster-wrap, #fp-sitemap-wrap { max-width: 100% !important; } } /* ═══════════════════════════════════════════════════════════════ HOME — Landing cards + unit picker ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1279px) { #landing-screen { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; } } /* Tablets: 2×2 grid (4-col is too tight at 768–1024) */ @media (min-width: 641px) and (max-width: 1024px) { #landing-cards { grid-template-columns: repeat(2, 1fr) !important; max-width: min(520px, 92vw) !important; gap: clamp(14px, 2vw, 20px) !important; padding: 0 clamp(16px, 3vw, 24px) !important; } .landing-card { height: clamp(180px, 28vh, 240px) !important; gap: 14px !important; } #landing-tagline { font-size: clamp(18px, 2.4vw, 24px) !important; letter-spacing: 0.16em !important; margin-top: -16px !important; margin-bottom: clamp(20px, 3vh, 32px) !important; } .landing-card-label { font-size: clamp(14px, 1.6vw, 16px) !important; } } @media (max-width: 640px) { #landing-tagline { font-size: clamp(16px, 4.8vw, 22px) !important; letter-spacing: 0.12em !important; margin-top: clamp(-40px, -8vh, -20px) !important; margin-bottom: clamp(16px, 3vh, 26px) !important; padding: 0 12px !important; } #landing-cards { max-width: min(452px, calc(100vw - 24px)) !important; gap: clamp(12px, 3vw, 18px) !important; padding: 0 12px !important; } .landing-card { height: clamp(160px, 28vh, 216px) !important; min-height: 140px; } } @media (max-width: 360px) { .landing-card { height: clamp(148px, 26vh, 188px) !important; } .landing-card .panel-slot-icon { width: 40px !important; height: 40px !important; } .landing-card-label { font-size: 13px !important; } } /* 360 unit picker — tighter on phones / short tablets */ @media (max-width: 640px) { #unit-row { padding: clamp(10px, 2.5vw, 16px) !important; margin: clamp(8px, 2vw, 12px) !important; gap: clamp(8px, 2vw, 12px) !important; border-radius: 16px !important; } } @media (min-width: 641px) and (max-width: 1024px) { #unit-row { gap: clamp(16px, 2.5vw, 28px) !important; padding: clamp(20px, 3vw, 36px) !important; } .unit-btn { flex: 0 1 min(260px, 42vw) !important; max-width: min(300px, 44vw) !important; } } /* ═══════════════════════════════════════════════════════════════ NAV + AI CHAT — icon + label tabs; "Chat With AI" two-line CTA ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { :root { --launcher-right: 8px !important; --launcher-width: 72px !important; --launcher-height: auto !important; --launcher-footer-pad: 6px !important; --launcher-footer-reserve: calc(72px + 8px + 8px) !important; } #bottom-panel { padding-right: calc(var(--launcher-footer-reserve) + env(safe-area-inset-right, 0px)) !important; overflow: hidden !important; } #panel-nav-group { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; justify-content: space-evenly !important; align-items: stretch !important; overflow: hidden !important; } .panel-slot { flex: 1 1 0 !important; flex-direction: column !important; min-width: 0 !important; padding: 4px 2px !important; gap: 3px !important; overflow: hidden !important; } .panel-slot.active { margin: 6px 1px !important; } .panel-slot-icon { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; } .panel-slot-label { display: block !important; font-size: 12px !important; letter-spacing: 0.03em !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; max-width: 100% !important; line-height: 1.15 !important; text-align: center !important; } .panel-slot + .panel-slot::before { display: none !important; } /* Two-line "Chat With AI" pill — landing + footer */ #ai-chat-launcher { width: var(--launcher-width) !important; min-width: 64px !important; max-width: var(--launcher-width) !important; height: auto !important; min-height: 40px !important; padding: 6px 8px !important; gap: 0 !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; right: max(var(--launcher-right), env(safe-area-inset-right, 0px)) !important; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--launcher-footer-pad)) !important; border-radius: 14px !important; } #ai-chat-launcher-label { font-size: 0 !important; letter-spacing: 0 !important; line-height: 0 !important; width: 100% !important; text-align: center !important; } #ai-chat-launcher-label::after { content: 'Chat\A With AI'; white-space: pre-line; display: block; font-family: 'Syne', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #2b2b2b; line-height: 1.2; text-align: center; } #ai-chat-launcher-arrow { display: none !important; } } @media (max-width: 767px) { :root { --launcher-right: 6px !important; --launcher-width: 64px !important; --launcher-footer-reserve: calc(64px + 6px + 6px) !important; } .panel-slot { padding: 3px 1px !important; gap: 2px !important; } .panel-slot-icon { width: 12px !important; height: 12px !important; } .panel-slot-label { font-size: 12px !important; letter-spacing: 0.02em !important; } .panel-slot.active { margin: 5px 0 !important; } #ai-chat-launcher { min-height: 38px !important; padding: 5px 6px !important; } #ai-chat-launcher-label::after { font-size: 7.5px; } } @media (max-width: 430px) { :root { --launcher-width: 58px !important; --launcher-right: 5px !important; --launcher-footer-reserve: calc(58px + 5px + 4px) !important; } .panel-slot-label { font-size: 11px !important; } .panel-slot-icon { width: 11px !important; height: 11px !important; } #ai-chat-launcher-label::after { font-size: 7px; } } @media (max-width: 360px) { :root { --launcher-width: 54px !important; --launcher-right: 4px !important; --launcher-footer-reserve: calc(54px + 4px + 3px) !important; } .panel-slot { padding: 2px 0 !important; gap: 1px !important; min-height: 44px; } .panel-slot-label { display: block !important; font-size: 10px !important; letter-spacing: 0 !important; } .panel-slot-icon { width: 11px !important; height: 11px !important; } #ai-chat-launcher { min-height: 36px !important; padding: 4px 5px !important; } #ai-chat-launcher-label::after { content: 'Chat\A With AI'; font-size: 6.5px; } } @media (max-width: 320px) { :root { --launcher-width: 50px !important; --launcher-footer-reserve: calc(50px + 4px + 2px) !important; --launcher-right: 4px !important; } .panel-slot-label { font-size: 9px !important; } #ai-chat-launcher-label::after { font-size: 6px; } } /* Chat popup — fill space ABOVE the bottom nav. IMPORTANT: do NOT force height:auto while the shell still transitions height from 0 — that left the panel unopenable on some mobile browsers. */ @media (max-width: 767px) { :root { --chat-edge: 10px !important; --chat-bottom-gap: 8px !important; --chat-top-gap: 8px !important; } #ai-chat-launcher { z-index: 5000 !important; pointer-events: auto !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent; } #ai-chat-panel.chat-window { /* Closed: stay truly collapsed — never stretch with left/right */ left: auto !important; right: max(var(--chat-edge), env(safe-area-inset-right, 0px)) !important; width: 0 !important; height: 0 !important; max-width: none !important; max-height: none !important; border-radius: 18px !important; /* Opacity/transform only — height/width transitions break open on mobile */ transition: opacity .25s ease, transform .32s cubic-bezier(0.22,1,0.36,1) !important; z-index: 4990 !important; } #ai-chat-panel.chat-window.open { left: max(var(--chat-edge), env(safe-area-inset-left, 0px)) !important; right: max(var(--chat-edge), env(safe-area-inset-right, 0px)) !important; top: max(var(--chat-top-gap), env(safe-area-inset-top, 0px)) !important; bottom: auto !important; width: auto !important; height: calc( 100dvh - var(--nav-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--chat-top-gap) - var(--chat-bottom-gap) ) !important; max-height: calc( 100dvh - var(--nav-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--chat-top-gap) - var(--chat-bottom-gap) ) !important; min-height: 220px !important; pointer-events: auto !important; opacity: 1 !important; transform: scale(1) !important; } @supports not (height: 100dvh) { #ai-chat-panel.chat-window.open { height: calc( 100vh - var(--nav-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--chat-top-gap) - var(--chat-bottom-gap) ) !important; max-height: calc( 100vh - var(--nav-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--chat-top-gap) - var(--chat-bottom-gap) ) !important; } } /* Keyboard / visualViewport mode — JS sets data-vv="1" + inline top/height */ #ai-chat-panel.chat-window.open[data-vv='1'] { bottom: auto !important; left: max(var(--chat-edge), env(safe-area-inset-left, 0px)) !important; right: max(var(--chat-edge), env(safe-area-inset-right, 0px)) !important; } #ai-chat-close { width: 36px !important; height: 36px !important; top: 8px !important; right: 8px !important; z-index: 5 !important; pointer-events: auto !important; } .chat-iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: auto !important; } /* Tower 1: slightly tighter pill so it clears the compass more easily */ .fp-glb-label[data-tower-id='tower-A'] .fp-glb-tag { --fp-tag-pad-y: 0.24rem !important; --fp-tag-pad-x: 0.45rem !important; --fp-tag-font: 0.58rem !important; --fp-tag-min-h: 1.45rem !important; } /* Keep compass below tower labels in the paint order within the topbar */ #fp-card.fp-topbar--sitemap #fp-sitemap-compass { z-index: 11 !important; } #fp-sitemap-wrap .fp-glb-label { z-index: 30 !important; } } /* ═══════════════════════════════════════════════════════════════ GALLERY / LOCATION ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { #gallery-overlay { --gl-pad-x: calc(14px + env(safe-area-inset-left, 0px)); --gl-pad-x-end: calc(14px + env(safe-area-inset-right, 0px)); } #map-overlay, #gmap-embed-overlay { padding: clamp(10px, 1.5vw, 18px) !important; } } @media (max-width: 640px) { #map-gmaps-btn { width: min(190px, calc(100vw - 48px)) !important; right: max(12px, env(safe-area-inset-right, 0px)) !important; bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important; } #gl-thumbs-wrap, #gl-thumbs-track { max-width: 100% !important; } } @media (max-width: 390px) { .gl-arrow { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } .gl-thumb { width: 54px !important; height: 38px !important; } } /* ═══════════════════════════════════════════════════════════════ LANDSCAPE (phones / short tablets) ═══════════════════════════════════════════════════════════════ */ @media (orientation: landscape) and (max-height: 500px) { #landing-tagline { font-size: 13px !important; letter-spacing: 0.12em !important; margin: 4px 0 10px !important; } #landing-cards { grid-template-columns: repeat(4, 1fr) !important; max-width: min(720px, 94vw) !important; gap: 10px !important; padding: 0 12px !important; } .landing-card { height: clamp(88px, 42vh, 130px) !important; gap: 8px !important; border-radius: 12px !important; } .landing-card .panel-slot-icon { width: 28px !important; height: 28px !important; } .landing-card-label { font-size: 11px !important; min-height: auto !important; } #fp-sitemap-wrap { transform: none !important; } #fp-card.fp-topbar--sitemap #fp-sitemap-compass { height: 36px !important; max-height: 36px !important; top: 6px !important; right: 8px !important; } #fp-card.fp-topbar--sitemap #fp-sitemap-label { font-size: 0.85rem !important; padding: 6px 12px !important; top: 6px !important; } .fp-glb-tag { --fp-tag-pad-y: 0.22rem !important; --fp-tag-pad-x: 0.42rem !important; --fp-tag-font: 0.55rem !important; --fp-tag-min-h: 1.35rem !important; } #unit-row { padding: 8px !important; margin: 6px !important; gap: 8px !important; } .panel-slot { flex-direction: row !important; gap: 4px !important; } .panel-slot-label { font-size: 10px !important; } } @media (orientation: landscape) and (max-height: 420px) { #landing-cards { max-width: 96vw !important; } .landing-card { height: 78px !important; } }