/* ── Fonts ─────────────────────────────────────────────────────────────────── No @import / @font-face here. Fonts are self-hosted and arrive via the per-tour theme.css (generated by src/tourTheme.ts, linked AFTER this file), which also overrides the :root tokens below. */ /* ── MetaTours — Neutral Design System ────────────────────────────────── Brand-agnostic warm-neutral palette so the same wrapper works for any listing agent without carrying a previous client's brand colours. Token names are kept (--tw-navy, --tw-gold) for backwards compatibility; the values inside are now neutrals. */ :root { /* Theme tokens — JSON semantic name in parens. applyTheme() in wrapper.js overrides BOTH the hex var and its -rgb triplet from published-tour.json; these defaults must stay equal to DEFAULT_THEME in src/tourTheme.ts. */ --tw-navy: #2A2A2D; /* surface — cards/pills (token: surface) */ --tw-navy-rgb: 42, 42, 45; --tw-navy-deep: #1A1A1C; /* deep background/overlays (token: surfaceDeep) */ --tw-navy-deep-rgb: 26, 26, 28; --tw-cream: #F4EDE5; /* primary text/icons (token: ink) */ --tw-cream-rgb: 244, 237, 229; --tw-gold: #B8AFA3; /* accents/active states (token: accent) */ --tw-gold-rgb: 184, 175, 163; --tw-line: #9A958F; /* hairlines/secondary text (token: line) */ --tw-line-rgb: 154, 149, 143; --tw-serif: 'Parkinsans', sans-serif; --tw-sans: 'Poppins', sans-serif; --tw-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ── SPLASH ──────────────────────────────────────────────────────────────── */ #tw-splash { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: var(--tw-navy-deep); transition: opacity 1.0s var(--tw-ease); overflow: hidden; } #tw-splash-pano { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; transform: scale(1); opacity: 0; animation: tw-fade 2.2s 0.1s ease-out forwards; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); background: var(--tw-navy-deep); } #tw-splash-pano canvas { display: block; } .tw-splash-overlay { position: absolute; inset: 0; background: rgba(var(--tw-navy-deep-rgb), 0.65); z-index: 1; transition: background 0.5s var(--tw-ease); } #tw-splash.tw-hiding { opacity: 0; pointer-events: none; } /* Cinematic exit: pano slowly pushes in and overlay seals to black */ #tw-splash.tw-hiding #tw-splash-pano { transform: scale(1.07); } #tw-splash.tw-hiding .tw-splash-overlay { background: rgba(var(--tw-navy-deep-rgb), 0.78); } #tw-splash.tw-gone { display: none; } .tw-splash-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 36px; width: 100%; max-width: 720px; position: relative; z-index: 2; } .tw-splash-wordmark-img { width: clamp(180px, 18vw, 290px); height: auto; margin-bottom: clamp(14px, 1.4vw, 22px); opacity: 0; transform: translateY(24px); animation: tw-rise 1.5s 0.45s var(--tw-ease) forwards; user-select: none; pointer-events: none; } /* Unbranded mode: property name shown in place of agent wordmark. Cormorant Garamond italic to match the brand serif tone of the wordmark. */ .tw-splash-headline-text { font-family: var(--tw-serif); font-weight: 300; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.1; letter-spacing: -0.01em; color: var(--tw-cream); text-align: center; max-width: 14ch; margin: 0 auto clamp(14px, 1.4vw, 22px); opacity: 0; transform: translateY(24px); animation: tw-rise 1.5s 0.45s var(--tw-ease) forwards; text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 2px 22px rgba(0,0,0,0.55); } /* Branded ↔ Unbranded toggle. The flag is set on by the wrapper based on the ?unbranded=1 URL param, so DOM stays consistent and the browser only paints what's needed. */ html.tw-unbranded .tw-branded-only { display: none !important; } html:not(.tw-unbranded) .tw-unbranded-only { display: none !important; } /* In unbranded mode, also hide the floating top-left agent logo and the top-right realtor button (and its popup). */ html.tw-unbranded #tw-logo-float, html.tw-unbranded #tw-realtor-btn, html.tw-unbranded #tw-realtor-popup { display: none !important; } /* MLS rule: no clickable links to external sites. The Mapbox GL JS library injects attribution + logo links to mapbox.com / openstreetmap.org even with attributionControl: false. Hide them entirely + neuter pointer events so a strict reviewer can't surface them. */ html.tw-unbranded .mapboxgl-ctrl, html.tw-unbranded .mapboxgl-ctrl-attrib, html.tw-unbranded .mapboxgl-ctrl-attrib-inner, html.tw-unbranded .mapboxgl-ctrl-logo { display: none !important; pointer-events: none !important; } /* ── Splash "Presented By" broker block — bottom of splash, outside .tw-splash-inner ── */ .tw-splash-broker { position: absolute; bottom: clamp(24px, 4vh, 48px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 2; opacity: 0; animation: tw-fade 1.1s 1.4s var(--tw-ease) forwards; } .tw-splash-presented-by { font-family: var(--tw-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.40); } .tw-splash-broker-logos { display: flex; align-items: center; justify-content: center; gap: 20px; } /* Greg Killip agent logo */ .tw-splash-broker-agent-logo { height: clamp(36px, 4.5vw, 60px); width: auto; max-width: 220px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.88; } /* Maxxam brokerage logo — coloured asset, show as-is */ .tw-splash-broker-bk-logo { height: clamp(30px, 3.5vw, 48px); width: auto; max-width: 180px; object-fit: contain; opacity: 0.88; } /* Vertical divider between logos */ .tw-splash-broker-divider { display: inline-block; width: 1px; height: clamp(28px, 3vw, 44px); background: rgba(var(--tw-cream-rgb), 0.22); flex-shrink: 0; } /* Text fallbacks when no logo images are set */ .tw-splash-broker-name { font-family: var(--tw-sans); font-size: clamp(15px, 1.4vw, 20px); font-weight: 500; letter-spacing: 0.04em; color: rgba(var(--tw-cream-rgb), 0.82); } .tw-splash-broker-bk-name { font-family: var(--tw-sans); font-size: clamp(12px, 1.1vw, 15px); font-weight: 400; letter-spacing: 0.06em; color: rgba(var(--tw-cream-rgb), 0.50); } .tw-splash-sub { font-family: var(--tw-sans); font-size: clamp(16.5px, 1.6vw, 24px); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.78); margin-top: 15px; opacity: 0; animation: tw-fade 0.8s 0.45s var(--tw-ease) forwards; } .tw-splash-rule { width: clamp(72px, 7vw, 108px); height: 1.5px; background: linear-gradient(90deg, transparent, var(--tw-gold), transparent); margin: clamp(18px, 1.8vw, 28px) auto; opacity: 0; animation: tw-fade 1.1s 0.9s var(--tw-ease) forwards; } /* ── FLOATING MAP CARD ───────────────────────────────────────────────────── */ #tw-map-card { position: fixed; bottom: 42px; right: 36px; z-index: 100; width: 340px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(var(--tw-line-rgb), 0.2); box-shadow: 0 12px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--tw-line-rgb), 0.06) inset; background: rgba(var(--tw-navy-deep-rgb), 0.9); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); transition-delay: 0.3s; } /* Map card header — acts as collapse toggle */ .tw-map-header { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16.5px 21px; background: transparent; border: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.18s; } .tw-map-header:hover { background: rgba(255, 255, 255, 0.04); } .tw-map-header:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: -2px; } .tw-map-header-icon { color: var(--tw-gold); flex-shrink: 0; display: flex; align-items: center; } .tw-map-header-text { font-family: var(--tw-sans); font-size: 16px; font-weight: 500; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.72); flex: 1; text-align: left; } .tw-map-chevron { color: rgba(var(--tw-cream-rgb), 0.25); flex-shrink: 0; transition: transform 0.28s var(--tw-ease), color 0.18s; } .tw-map-header:hover .tw-map-chevron { color: rgba(var(--tw-cream-rgb), 0.55); } /* Collapsible map body */ #tw-map-body { max-height: 450px; overflow: hidden; transition: max-height 0.3s var(--tw-ease); } #tw-map-card.tw-map-collapsed #tw-map-body { max-height: 0; } #tw-map-card.tw-map-collapsed .tw-map-chevron { transform: rotate(180deg); } #tw-map { width: 100%; height: 218px; display: block; background: var(--tw-navy-deep); border-top: 1px solid rgba(var(--tw-line-rgb), 0.08); } /* Light tonal adjustment only — keep roads, labels, and POIs readable. */ #tw-map .mapboxgl-canvas { filter: brightness(0.96) saturate(0.92); } /* Small-map zoom controls — same dark glass language as the modal map. */ #tw-map .mapboxgl-ctrl-top-right > .mapboxgl-ctrl { margin: 8px 8px 0 0 !important; } #tw-map .mapboxgl-ctrl-group { background: rgba(var(--tw-navy-deep-rgb), 0.88) !important; border: 1px solid rgba(var(--tw-gold-rgb), 0.28) !important; border-radius: 10px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #tw-map .mapboxgl-ctrl-group button { width: 30px !important; height: 30px !important; background: transparent !important; border: none !important; border-bottom: 1px solid rgba(var(--tw-gold-rgb), 0.18) !important; } #tw-map .mapboxgl-ctrl-group button:last-child { border-bottom: none !important; } #tw-map .mapboxgl-ctrl-group button:hover { background: rgba(var(--tw-gold-rgb), 0.14) !important; } #tw-map .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 18 18'%3E%3Cpath d='M9 3v12M3 9h12' stroke='%23F4EDE5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important; } #tw-map .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h12' stroke='%23F4EDE5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important; } /* Preview map — suppress all Mapbox attribution controls entirely. pointer-events:none on #tw-map-card (via .tw-ui-el) does NOT cascade to children in CSS, so Mapbox links inside remain clickable even when the card is opacity:0 pre-reveal, causing accidental ghost clicks. Full attribution is shown in the expanded modal — ToS requirement met there. */ #tw-map .mapboxgl-ctrl-logo { display: none !important; } #tw-map .mapboxgl-ctrl-attrib { display: none !important; } #tw-map .mapboxgl-ctrl-attrib-button { display: none !important; } #tw-map .mapboxgl-ctrl-attrib a, #tw-map .mapboxgl-ctrl-attrib button { pointer-events: none !important; display: none !important; } /* Snap controls to corner — override Mapbox's default 10px margin */ #tw-map .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl { margin: 0 8px 8px 0 !important; } /* Zoom controls — branded dark glass */ #tw-map .mapboxgl-ctrl-group { background: rgba(var(--tw-navy-deep-rgb), 0.88) !important; border: 1px solid rgba(var(--tw-line-rgb), 0.28) !important; border-radius: 10px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #tw-map .mapboxgl-ctrl-group button { width: 30px !important; height: 30px !important; background: transparent !important; border: none !important; border-bottom: 1px solid rgba(var(--tw-line-rgb), 0.18) !important; } #tw-map .mapboxgl-ctrl-group button:last-child { border-bottom: none !important; } #tw-map .mapboxgl-ctrl-group button:hover { background: rgba(var(--tw-line-rgb), 0.14) !important; } #tw-map .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 3v12M3 9h12' stroke='%23F4EDE5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important; } #tw-map .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h12' stroke='%23F4EDE5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important; } /* Gold location pin */ .tw-map-pin { width: 16.5px; height: 16.5px; border-radius: 50%; background: var(--tw-gold); border: 2px solid rgba(var(--tw-cream-rgb), 0.9); box-shadow: 0 0 0 6px rgba(var(--tw-line-rgb), 0.28), 0 3px 12px rgba(0,0,0,0.55); cursor: default; } /* Drone pin on map */ .tw-map-drone-pin { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(var(--tw-navy-deep-rgb), 0.82); border: 1.5px solid rgba(var(--tw-gold-rgb), 0.35); border-radius: 50%; color: var(--tw-gold); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.15s, border-color 0.15s; } .tw-map-drone-pin:hover { transform: scale(1.15); border-color: var(--tw-gold); } .tw-map-drone-pin svg { width: 13px; height: 13px; } .tw-map-drone-pin-lg { width: 36px; height: 36px; } .tw-map-drone-pin-lg svg { width: 17px; height: 17px; } /* Address popup on map */ .tw-map-popup .mapboxgl-popup-content { background: rgba(var(--tw-navy-deep-rgb), 0.88) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(var(--tw-gold-rgb), 0.25); border-radius: 10px !important; padding: 8px 14px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important; } .tw-map-popup .mapboxgl-popup-tip { border-top-color: rgba(var(--tw-navy-deep-rgb), 0.88) !important; } .tw-map-popup-text { font-family: var(--tw-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tw-cream); white-space: nowrap; } .tw-map-popup-lg .mapboxgl-popup-content { padding: 10px 18px !important; } .tw-map-popup-lg .tw-map-popup-text { font-size: 12px; } .tw-splash-location { font-family: var(--tw-sans); font-size: clamp(15px, 1.4vw, 21px); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.78); margin-top: 14px; opacity: 0; animation: tw-fade 1.0s 1.15s var(--tw-ease) forwards; } .tw-splash-enter { margin-top: clamp(24px, 2.4vw, 42px); font-family: var(--tw-sans); font-size: clamp(15px, 1.2vw, 18px); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tw-navy-deep); background: var(--tw-gold); border: none; border-radius: 150px; padding: clamp(18px, 1.8vw, 24px) clamp(42px, 4vw, 66px); min-height: 72px; min-width: 66px; cursor: pointer; display: inline-flex; align-items: center; gap: 18px; touch-action: manipulation; box-shadow: 0 4px 24px rgba(var(--tw-line-rgb), 0.40); transition: background 0.22s, box-shadow 0.22s, transform 0.18s var(--tw-ease); opacity: 0; animation: tw-rise 1.1s 1.4s var(--tw-ease) forwards; } .tw-splash-enter:hover { background: #a8917f; box-shadow: 0 6px 32px rgba(var(--tw-line-rgb), 0.55); transform: translateY(-1.5px); } .tw-splash-enter:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: 4px; } .tw-splash-arrow { width: 21px; height: 21px; transition: transform 0.18s var(--tw-ease); } .tw-splash-enter:hover .tw-splash-arrow { transform: translateX(4.5px); } /* Devon Properties — pinned to bottom of splash, with label */ .tw-splash-devon-wrap { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 11px; opacity: 0; animation: tw-fade 1.0s 1.65s var(--tw-ease) forwards; white-space: nowrap; } .tw-splash-devon-label { font-family: var(--tw-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.42); } .tw-splash-devon-img { width: clamp(120px, 10vw, 168px); height: auto; filter: drop-shadow(0 1px 10px rgba(0,0,0,0.45)); user-select: none; pointer-events: none; } /* ── ANIMATIONS ──────────────────────────────────────────────────────────── */ @keyframes tw-rise { from { opacity: 0; transform: translateY(21px); } to { opacity: 1; transform: translateY(0); } } @keyframes tw-fade { from { opacity: 0; } to { opacity: 1; } } /* ── VIGNETTES ───────────────────────────────────────────────────────────── */ #tw-vignette-top { position: fixed; top: 0; left: 0; right: 0; height: 195px; background: linear-gradient(to bottom, rgba(10, 16, 24, 0.45) 0%, rgba(10, 16, 24, 0.38) 20%, rgba(10, 16, 24, 0.24) 45%, rgba(10, 16, 24, 0.09) 72%, rgba(10, 16, 24, 0.02) 88%, transparent 100% ); z-index: 98; pointer-events: none; } #tw-vignette-bottom { position: fixed; bottom: 0; left: 0; right: 0; height: 270px; background: linear-gradient(to top, rgba(10, 16, 24, 0.40) 0%, rgba(10, 16, 24, 0.33) 20%, rgba(10, 16, 24, 0.21) 45%, rgba(10, 16, 24, 0.08) 72%, rgba(10, 16, 24, 0.02) 88%, transparent 100% ); z-index: 98; pointer-events: none; } /* Top-left vignette — kept very subtle so top darkness is consistent across the full width (the top linear vignette handles the primary coverage) */ #tw-vignette-tl { position: fixed; top: 0; left: 0; width: 480px; height: 280px; background: radial-gradient(ellipse at 0% 0%, rgba(10, 16, 24, 0.18) 0%, rgba(10, 16, 24, 0.12) 28%, rgba(10, 16, 24, 0.06) 48%, transparent 70% ); z-index: 98; pointer-events: none; } /* Bottom-left vignette — behind the "Now Viewing" toast */ #tw-vignette-toast { position: fixed; bottom: 0; left: 0; width: 800px; height: 620px; background: radial-gradient(ellipse at 0% 100%, rgba(10, 16, 24, 0.88) 0%, rgba(10, 16, 24, 0.68) 18%, rgba(10, 16, 24, 0.44) 36%, rgba(10, 16, 24, 0.20) 54%, rgba(10, 16, 24, 0.06) 65%, transparent 75% ); z-index: 98; pointer-events: none; } /* ── UI FLOAT VISIBILITY ─────────────────────────────────────────────────── */ .tw-ui-el { opacity: 0; pointer-events: none; transition: opacity 0.55s var(--tw-ease); } .tw-ui-el.tw-show { opacity: 1; pointer-events: all; } #tw-devon-logo-float { transition-delay: 0.04s; } #tw-property-info { transition-delay: 0.06s; } #tw-logo-float { transition-delay: 0.08s; } #tw-cta-btn { transition-delay: 0.12s; } #tw-menu-bar { transition-delay: 0.22s; } /* ── FLOATING LOGOS ────────────────────────────────────────────────────────── */ /* Devon Properties — top left (developer / brokerage mark) */ #tw-devon-logo-float { position: fixed; top: 30px; left: 36px; z-index: 100; } .tw-devon-logo-img { display: block; height: 52px; width: auto; filter: drop-shadow(0 2px 14px rgba(0,0,0,0.55)); } /* ── PROPERTY INFO (top-left listing identity) ──────────────────────────── Shown in both branded + unbranded modes — listing location ≠ branding. Glass pill matching the bottom map/floorplan cards. */ #tw-property-info { position: fixed; top: 30px; left: 36px; z-index: 100; background: rgba(var(--tw-navy-deep-rgb), 0.55); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(var(--tw-line-rgb), 0.18); border-radius: 16px; padding: 14px 22px 15px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); max-width: min(44vw, 420px); } .tw-property-name { font-family: var(--tw-serif); font-size: clamp(17px, 1.6vw, 22px); font-weight: 500; color: var(--tw-cream); letter-spacing: 0.005em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tw-property-city { font-family: var(--tw-sans); font-size: 11px; font-weight: 500; color: rgba(var(--tw-cream-rgb), 0.66); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Thera — horizontally centred at top, shifted slightly below the top edge */ #tw-logo-float { position: fixed; top: 38px; left: 50%; transform: translateX(-50%); z-index: 100; } .tw-logo-svg { display: block; height: 90px; width: auto; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.9)) drop-shadow(0 2px 22px rgba(0,0,0,0.65)); } /* ── FLOATING CTA ─────────────────────────────────────────────────────────── */ #tw-cta-btn { position: fixed; top: 27px; right: 30px; z-index: 100; font-family: var(--tw-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; color: var(--tw-navy-deep); background: var(--tw-gold); border-radius: 150px; padding: 0 33px; height: 66px; min-width: 66px; display: flex; align-items: center; white-space: nowrap; transition: opacity 0.55s var(--tw-ease), filter 0.2s; transition-delay: 0.12s, 0s; } #tw-cta-btn:hover { filter: brightness(1.1); } #tw-cta-btn:focus-visible { outline: 2px solid var(--tw-cream); outline-offset: 3px; } /* CTA shifts left when the realtor button shares the top-right corner */ #tw-cta-btn.tw-cta-offset { right: 84px; } /* ── Powered by MetaTours (theme.poweredBy) ──────────────────────────────── */ /* Muted line riding the property-info pill */ .tw-powered-line { display: block; margin-top: 7px; font-family: var(--tw-sans); font-size: 8.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: rgba(var(--tw-cream-rgb), 0.42); transition: color 0.2s; } .tw-powered-line:hover { color: rgba(var(--tw-cream-rgb), 0.75); } /* Standalone top-left badge (only when there is no property-info pill) */ #tw-powered { position: fixed; top: 27px; left: 30px; z-index: 100; font-family: var(--tw-sans); font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: rgba(var(--tw-cream-rgb), 0.55); background: rgba(var(--tw-navy-deep-rgb), 0.6); border: 1px solid rgba(var(--tw-cream-rgb), 0.12); border-radius: 100px; padding: 8px 14px; } #tw-powered:hover { color: rgba(var(--tw-cream-rgb), 0.85); } /* Splash badge — sits under the broker block */ .tw-splash-powered { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-family: var(--tw-sans); font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.45); z-index: 3; } .tw-splash-powered strong { font-weight: 700; color: rgba(var(--tw-cream-rgb), 0.7); } /* ── BOTTOM MENU BAR ─────────────────────────────────────────────────────── */ #tw-menu-bar { position: fixed; bottom: 42px; left: 50%; transform: translateX(-50%); z-index: 100; } .tw-menu-pill { display: flex; align-items: center; background: rgba(var(--tw-navy-deep-rgb), 0.84); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border: 1px solid rgba(var(--tw-line-rgb), 0.18); border-radius: 150px; padding: 0 9px; height: 78px; gap: 0; box-shadow: 0 12px 54px rgba(0, 0, 0, 0.4), 0 1.5px 0 rgba(var(--tw-line-rgb), 0.06) inset; } /* ── MENU TRIGGER BUTTONS ─────────────────────────────────────────────────── */ .tw-menu-group { position: relative; } .tw-menu-btn { display: flex; align-items: center; gap: 10.5px; font-family: var(--tw-sans); font-size: 16px; font-weight: 500; letter-spacing: 0.06em; color: rgba(var(--tw-cream-rgb), 0.52); background: transparent; border: none; padding: 0 25.5px; height: 60px; border-radius: 150px; cursor: pointer; white-space: nowrap; touch-action: manipulation; transition: color 0.18s, background 0.18s; } .tw-menu-btn:hover { color: rgba(var(--tw-cream-rgb), 0.88); background: rgba(255, 255, 255, 0.05); } .tw-menu-btn[aria-expanded="true"] { color: var(--tw-cream); background: rgba(255, 255, 255, 0.07); } .tw-menu-btn.tw-active { color: var(--tw-gold); } .tw-menu-btn:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: -2px; border-radius: 150px; } .tw-menu-chevron { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.4; transition: transform 0.22s var(--tw-ease), opacity 0.18s; } .tw-menu-btn:hover .tw-menu-chevron { opacity: 0.65; } .tw-menu-btn.tw-active .tw-menu-chevron { opacity: 0.65; } .tw-menu-btn[aria-expanded="true"] .tw-menu-chevron { transform: rotate(180deg); opacity: 0.9; } /* ── SEPARATOR ───────────────────────────────────────────────────────────── */ .tw-menu-sep { width: 1.5px; height: 27px; background: rgba(var(--tw-cream-rgb), 0.1); flex-shrink: 0; margin: 0 3px; } /* ── DRONE / AERIAL BUTTON ───────────────────────────────────────────────── */ #tw-aerial { display: flex; align-items: center; justify-content: center; background: transparent; border: none; width: 66px; height: 60px; border-radius: 150px; cursor: pointer; color: rgba(var(--tw-cream-rgb), 0.52); touch-action: manipulation; transition: color 0.18s, background 0.18s; margin: 0 3px; } #tw-aerial:hover { color: rgba(var(--tw-cream-rgb), 0.88); background: rgba(255, 255, 255, 0.05); } #tw-aerial.tw-active { color: var(--tw-gold); } #tw-aerial svg { width: 24px; height: 24px; } #tw-aerial:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: -2px; border-radius: 150px; } /* ── DROPDOWN CARDS ──────────────────────────────────────────────────────── */ .tw-dropdown { position: absolute; bottom: calc(100% + 24px); left: 50%; transform: translateX(-50%) translateY(12px); min-width: 277.5px; background: rgba(var(--tw-navy-deep-rgb), 0.92); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid rgba(var(--tw-line-rgb), 0.2); border-radius: 24px; padding: 9px; box-shadow: 0 30px 84px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--tw-line-rgb), 0.06); opacity: 0; pointer-events: none; transition: opacity 0.2s var(--tw-ease), transform 0.2s var(--tw-ease); } #tw-suites-dd { min-width: 290px; max-height: 62vh; overflow-y: auto; } .tw-dropdown.tw-open { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); } .tw-dropdown-label { font-family: var(--tw-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.25); padding: 9px 21px 12px; display: block; border-bottom: 1px solid rgba(var(--tw-line-rgb), 0.1); margin-bottom: 6px; } /* Group header inside suite dropdown */ /* Empty state — shown in amenities dropdown until panos are added */ .tw-dropdown-empty { display: block; font-family: var(--tw-sans); font-size: 13.5px; font-weight: 400; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.28); padding: 14px 21px 18px; text-align: center; } .tw-dropdown-group-label { display: block; font-family: var(--tw-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--tw-line-rgb), 0.65); padding: 14px 21px 5px; } .tw-dropdown-group-label:first-child { padding-top: 6px; } .tw-dropdown-item { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; font-family: var(--tw-sans); font-size: 17px; font-weight: 400; letter-spacing: 0.02em; color: rgba(var(--tw-cream-rgb), 0.55); background: transparent; border: none; padding: 11px 21px 11px 39px; border-radius: 15px; cursor: pointer; text-align: left; touch-action: manipulation; transition: color 0.15s, background 0.15s; position: relative; } /* Unit name — primary text in each suite item */ .tw-dd-unit-name { font-size: 17px; font-weight: 400; color: inherit; letter-spacing: 0.02em; } /* Metadata row: bed / bath / sqft */ .tw-dd-meta { display: flex; align-items: center; gap: 13px; opacity: 0.6; transition: opacity 0.15s; } .tw-dropdown-item:hover .tw-dd-meta { opacity: 0.85; } .tw-dropdown-item.tw-active .tw-dd-meta { opacity: 0.75; } .tw-dd-meta-item { display: inline-flex; align-items: center; gap: 5px; font-family: var(--tw-sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.75); } .tw-dropdown-item::before { content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 4.5px; height: 4.5px; border-radius: 50%; background: var(--tw-gold); opacity: 0; transition: opacity 0.15s; } .tw-dropdown-item:hover { color: var(--tw-cream); background: rgba(255, 255, 255, 0.05); } .tw-dropdown-item.tw-active { color: var(--tw-cream); font-weight: 500; } .tw-dropdown-item.tw-active::before { opacity: 1; } .tw-dropdown-item:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: -2px; border-radius: 15px; } /* ── ROOM NAME TOAST ─────────────────────────────────────────────────────── */ #tw-toast { position: fixed; bottom: 52px; left: 48px; z-index: 99; pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--tw-ease), transform 0.7s var(--tw-ease); max-width: 500px; } #tw-toast.tw-show { opacity: 1; transform: translateY(0); } .tw-toast-label { display: block; font-family: var(--tw-sans); font-size: clamp(22px, 1.6vw, 28px); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tw-gold); margin-bottom: 12px; text-shadow: 0 1.5px 15px rgba(0,0,0,0.6); } .tw-toast-room { display: block; font-family: var(--tw-serif); font-size: clamp(54px, 4.2vw, 86px); font-weight: 300; color: var(--tw-cream); line-height: 1.05; text-shadow: 0 3px 30px rgba(0,0,0,0.55); letter-spacing: 0.01em; } .tw-toast-meta { display: flex; align-items: center; gap: 24px; margin-top: 18px; font-family: var(--tw-sans); font-size: clamp(17px, 1.3vw, 22px); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.78); text-shadow: 0 1.5px 12px rgba(0,0,0,0.6); } .tw-toast-meta-item { display: inline-flex; align-items: flex-start; gap: 9px; } .tw-toast-meta-icon { color: var(--tw-gold); flex-shrink: 0; display: inline-flex; align-items: center; padding-top: 0.1em; /* optically align icon with cap height of first text line */ } .tw-toast-meta-icon svg { width: 30px; height: 30px; } /* ── RESPONSIVE ──────────────────────────────────────────────────────────── */ /* Tablet — fires earlier (≤1199px) so mid-size laptops and iPads get a properly scaled layout before things start overlapping. */ @media (max-width: 1199px) and (min-width: 769px) { #tw-devon-logo-float { top: 22px; left: 26px; } .tw-devon-logo-img { height: 42px; } #tw-logo-float { top: 28px; } .tw-logo-svg { height: 64px; } #tw-cta-btn { top: 22px; right: 22px; height: 56px; padding: 0 24px; font-size: 13.5px; } #tw-cta-btn.tw-cta-offset { right: 82px; } #tw-property-info { top: 22px; left: 22px; padding: 9px 16px 10px; max-width: min(34vw, 320px); } .tw-property-name { font-size: 15px; } .tw-property-city { font-size: 9.5px; letter-spacing: 0.16em; } #tw-menu-bar { bottom: calc(22px + env(safe-area-inset-bottom)); } .tw-menu-pill { height: 64px; padding: 0 6px; } .tw-menu-btn { padding: 0 18px; height: 50px; font-size: 14px; gap: 8px; } .tw-menu-sep { height: 24px; margin: 0 2px; } #tw-aerial { width: 56px; height: 50px; margin: 0 2px; } #tw-toast { bottom: calc(52px + env(safe-area-inset-bottom)); left: 24px; max-width: min(42vw, 420px); } .tw-toast-label { font-size: clamp(16px, 2vw, 20px); letter-spacing: 0.16em; margin-bottom: 9px; } .tw-toast-room { font-size: clamp(36px, 5vw, 54px); } .tw-toast-meta { gap: 16px; margin-top: 12px; font-size: clamp(13px, 1.4vw, 17px); } #tw-map-card { bottom: calc(52px + env(safe-area-inset-bottom)); right: 22px; width: 280px; } #tw-map { height: 200px; } } /* Mobile — all phones (portrait & landscape) and small tablets ≤768px. Radical layout: toast moves to top, map collapses to a circle FAB, menu pill goes full-width across the bottom. Minimum readable sizes enforced throughout — no text below 15px. */ @media (max-width: 768px) { /* Property info top-left, agent logo hidden in-tour on mobile (it's shown prominently in the splash, so there's no value in repeating it here at the cost of a cramped top bar). Realtor button stays top-right. Devon mark is hidden too — splash carries it. */ #tw-devon-logo-float { display: none; } #tw-logo-float { display: none; } /* Property info — top-left, sized so it never crowds the realtor button */ #tw-property-info { top: 14px; left: 14px; padding: 8px 13px 9px; border-radius: 12px; max-width: calc(100vw - 86px); /* leave room for top-right realtor btn */ } .tw-property-name { font-size: 14.5px; line-height: 1.18; } .tw-property-city { font-size: 9px; letter-spacing: 0.16em; margin-top: 3px; } /* CTA */ #tw-cta-btn { top: 16px; right: 16px; height: 52px; min-width: 0; padding: 0 24px; font-size: 14px; letter-spacing: 0.12em; } #tw-cta-btn.tw-cta-offset { right: 66px; } /* Menu pill — full-width, generous touch targets, readable text */ #tw-menu-bar { bottom: calc(16px + env(safe-area-inset-bottom)); width: calc(100vw - 28px); display: flex; justify-content: center; left: 14px; right: 14px; transform: none; } .tw-menu-pill { height: 66px; padding: 0 6px; max-width: 100%; } .tw-menu-btn { padding: 0 18px; height: 54px; font-size: 15px; gap: 7px; letter-spacing: 0.04em; } .tw-menu-sep { height: 24px; margin: 0 2px; } #tw-aerial { width: 56px; height: 54px; margin: 0 2px; } .tw-menu-chevron { width: 12px; height: 12px; } .tw-menu-pill::-webkit-scrollbar { display: none; } /* Toast — top of screen, below the logo/CTA bar. Min sizes: label ≥16px, room name ≥38px, meta ≥15px. */ #tw-toast { bottom: auto; top: calc(100px + env(safe-area-inset-top)); left: 18px; right: 18px; max-width: none; transform: translateY(-10px); } #tw-toast.tw-show { transform: translateY(0); } .tw-toast-label { font-size: 16px; letter-spacing: 0.16em; margin-bottom: 10px; } .tw-toast-room { font-size: clamp(38px, 10vw, 56px); line-height: 1.0; } .tw-toast-meta { flex-direction: row; align-items: flex-start; gap: 20px; margin-top: 12px; font-size: 15px; letter-spacing: 0.08em; } .tw-toast-meta-item { gap: 8px; align-items: flex-start; } .tw-toast-meta-icon svg { width: 24px !important; height: 24px !important; } /* Map card → circle FAB — tap opens fullscreen modal. Positioned above the pill (66px tall + 16px base + 12px gap = 94px) */ #tw-map-card { bottom: calc(94px + env(safe-area-inset-bottom)); right: 18px; left: auto; width: 62px; height: 62px; border-radius: 50%; padding: 0; overflow: hidden; /* clip any Mapbox overflow that could create ghost tap targets */ } .tw-map-header-row { width: 100%; height: 100%; } .tw-map-header { width: 100%; height: 100%; padding: 0; gap: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .tw-map-header-text { display: none; } #tw-map-expand { display: none; } .tw-map-header-icon { display: flex; align-items: center; justify-content: center; } .tw-map-header-icon svg { width: 24px !important; height: 24px !important; stroke-width: 2.2 !important; } /* Hide inline map body — circle tap opens modal */ #tw-map-body { display: none; } #tw-map-chevron-btn { display: none; } /* Kill all Mapbox ctrl elements inside the hidden preview map so they can't generate ghost tap targets that accidentally open Mapbox links */ #tw-map .mapboxgl-ctrl-container, #tw-map .mapboxgl-ctrl-attrib, #tw-map .mapboxgl-ctrl-logo { display: none !important; pointer-events: none !important; } /* Splash — readable minimums: subtext ≥17px, enter button ≥17px */ .tw-splash-inner { padding: 36px 30px; } .tw-splash-wordmark-img { width: clamp(170px, 46vw, 260px); margin-bottom: 14px; } .tw-splash-sub { font-size: 17px; letter-spacing: 0.16em; margin-top: 14px; } .tw-splash-location { font-size: 16px; letter-spacing: 0.12em; margin-top: 12px; } .tw-splash-enter { margin-top: 24px; font-size: 17px; padding: 20px 44px; min-height: 64px; gap: 18px; } .tw-splash-arrow { width: 22px; height: 22px; } .tw-splash-rule { margin: 16px auto; } .tw-splash-devon-wrap { bottom: 28px; gap: 9px; } .tw-splash-devon-img { width: clamp(100px, 28vw, 140px); } /* Vignettes — top vignette must cover full toast area (~280px). Holds opacity longer so the room name text stays readable even on bright white panorama backgrounds. Multi-stop for smooth falloff. */ #tw-vignette-top { height: 320px; background: linear-gradient(to bottom, rgba(10, 16, 24, 0.80) 0%, rgba(10, 16, 24, 0.72) 18%, rgba(10, 16, 24, 0.54) 38%, rgba(10, 16, 24, 0.28) 60%, rgba(10, 16, 24, 0.08) 80%, rgba(10, 16, 24, 0.01) 92%, transparent 100% ); } #tw-vignette-bottom { height: 200px; background: linear-gradient(to top, rgba(10, 16, 24, 0.40) 0%, rgba(10, 16, 24, 0.30) 22%, rgba(10, 16, 24, 0.16) 48%, rgba(10, 16, 24, 0.05) 74%, transparent 100% ); } /* Toast is at the top on mobile — bottom-left vignette not needed */ #tw-vignette-toast { display: none; } /* Dropdowns — fixed to viewport so they're always screen-centred and layer over the map FAB circle. position:fixed escapes the menu bar's stacking context (both elements are z-index:100, later DOM order wins otherwise). bottom value: 16px base + 66px pill height + 14px gap = 96px */ .tw-dropdown { position: fixed !important; left: 14px !important; right: 14px !important; bottom: calc(96px + env(safe-area-inset-bottom)) !important; top: auto !important; max-width: none; min-width: 0; width: auto; z-index: 200 !important; transform: translateY(12px) !important; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 20px; } .tw-dropdown.tw-open { transform: translateY(0) !important; } .tw-dropdown-item { padding: 14px 18px 14px 30px; font-size: 16px; } .tw-dropdown-item::before { left: 10px; } } /* Compact layout for very short screens (iPhone landscape, small phones) */ @media (max-height: 680px) { .tw-splash-wordmark-img { width: clamp(120px, 18vw, 180px); margin-bottom: 16px; } .tw-splash-rule { margin: 18px auto; } #tw-map { height: 135px; } .tw-splash-enter { margin-top: 24px; font-size: 15px; min-height: 54px; padding: 16px 36px; } /* Tighten menu bar on short landscape screens but keep text readable */ #tw-menu-bar { bottom: calc(10px + env(safe-area-inset-bottom)); } .tw-menu-pill { height: 58px; } .tw-menu-btn { height: 46px; font-size: 14px; } /* Reduce top vignette height in landscape so toast doesn't overlap panorama too much */ #tw-vignette-top { height: 220px; } } /* ── VIEWER TOUCH HANDLING ───────────────────────────────────────────────── */ /* Prevent browser from intercepting touch gestures before Marzipano handles them. touch-action: none tells the browser "don't scroll/zoom — the JS owns this" so the touch drag reaches Marzipano cleanly on real mobile devices. */ #viewer { touch-action: none; } /* ── HIDE NATIVE 3DVISTA LOAD BAR & PRELOADER ───────────────────────────── */ #viewer div[style*="height: 3px"][style*="z-index: 2"] { visibility: hidden !important; } #preloadContainer { display: none !important; } /* ── BRANDED LOAD INDICATOR ─────────────────────────────────────────────── */ #tw-loader { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none; opacity: 0; transition: opacity 0.25s var(--tw-ease); } #tw-loader.tw-loader-active { opacity: 1; } #tw-loader.tw-loader-done { opacity: 0; transition: opacity 0.3s var(--tw-ease) 0.15s; } .tw-loader-fill { width: 100%; height: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, rgba(var(--tw-gold-rgb), 0), var(--tw-gold) 30%, var(--tw-cream) 70%, rgba(var(--tw-cream-rgb),0)); box-shadow: 0 0 12px rgba(var(--tw-line-rgb), 0.5); } /* ── MAP CARD — HEADER ROW WITH ICON BUTTONS ─────────────────────────────── */ .tw-map-header-row { display: flex; align-items: center; } .tw-map-header { flex: 1; } .tw-map-iconbtn { flex-shrink: 0; width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: rgba(var(--tw-cream-rgb), 0.55); transition: color 0.18s, background 0.18s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .tw-map-iconbtn:hover { color: var(--tw-gold); background: rgba(255, 255, 255, 0.04); } .tw-map-iconbtn:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: -4px; } .tw-map-chevron-btn .tw-map-chevron { color: inherit; } #tw-map-card.tw-map-collapsed .tw-map-chevron-btn .tw-map-chevron { transform: rotate(180deg); } /* ── FULLSCREEN MAP MODAL ────────────────────────────────────────────────── */ #tw-map-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.2s var(--tw-ease); } #tw-map-modal.tw-map-modal-hidden { opacity: 0; pointer-events: none; } .tw-map-modal-backdrop { position: absolute; inset: 0; background: rgba(var(--tw-navy-deep-rgb), 0.72); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); cursor: pointer; } .tw-map-modal-card { position: relative; width: 92vw; height: 88vh; max-width: 2100px; background: rgba(var(--tw-navy-deep-rgb), 0.95); border: 1px solid rgba(var(--tw-line-rgb), 0.2); border-radius: 24px; box-shadow: 0 30px 120px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(var(--tw-line-rgb), 0.06) inset; overflow: hidden; display: flex; flex-direction: column; transform: scale(1); transition: transform 0.2s var(--tw-ease); } #tw-map-modal.tw-map-modal-hidden .tw-map-modal-card { transform: scale(0.96); } .tw-map-modal-topbar { display: flex; align-items: center; gap: 24px; padding: 21px 27px; border-bottom: 1px solid rgba(var(--tw-line-rgb), 0.12); background: rgba(var(--tw-navy-deep-rgb), 0.4); } .tw-map-modal-title { display: flex; align-items: center; gap: 12px; font-family: var(--tw-sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.55); flex-shrink: 0; } .tw-map-modal-title .tw-map-header-icon { color: var(--tw-gold); } .tw-map-filter { display: flex; gap: 3px; padding: 4.5px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(var(--tw-line-rgb), 0.1); border-radius: 15px; flex: 1; max-width: 630px; overflow-x: auto; } .tw-map-filter-btn { flex: 1; padding: 9px 21px; background: transparent; border: none; border-radius: 10.5px; font-family: var(--tw-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.5); cursor: pointer; touch-action: manipulation; transition: background 0.18s, color 0.18s; white-space: nowrap; } .tw-map-filter-btn:hover { color: rgba(var(--tw-cream-rgb), 0.85); } .tw-map-filter-btn.tw-active { background: rgba(var(--tw-line-rgb), 0.16); color: var(--tw-gold); } .tw-map-modal-close { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(var(--tw-line-rgb), 0.30); border-radius: 15px; cursor: pointer; color: var(--tw-gold); transition: background 0.18s, color 0.18s, border-color 0.18s; flex-shrink: 0; margin-left: auto; -webkit-tap-highlight-color: transparent; } .tw-map-modal-close:hover { color: var(--tw-cream); background: rgba(var(--tw-line-rgb), 0.12); border-color: rgba(var(--tw-line-rgb), 0.55); } .tw-map-modal-body { position: relative; flex: 1; min-height: 0; } #tw-map-modal-canvas { position: absolute; inset: 0; background: var(--tw-navy-deep); } #tw-map-modal-canvas .mapboxgl-ctrl-logo { opacity: 0.35; } #tw-map-modal-canvas .mapboxgl-ctrl-attrib { font-size: 13.5px; opacity: 0.35; } /* Modal map zoom controls — same branded dark glass as preview map */ #tw-map-modal-canvas .mapboxgl-ctrl-top-right > .mapboxgl-ctrl { margin: 8px 8px 0 0 !important; } #tw-map-modal-canvas .mapboxgl-ctrl-group { background: rgba(var(--tw-navy-deep-rgb), 0.88) !important; border: 1px solid rgba(var(--tw-line-rgb), 0.28) !important; border-radius: 10px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #tw-map-modal-canvas .mapboxgl-ctrl-group button { width: 34px !important; height: 34px !important; background: transparent !important; border: none !important; border-bottom: 1px solid rgba(var(--tw-line-rgb), 0.18) !important; } #tw-map-modal-canvas .mapboxgl-ctrl-group button:last-child { border-bottom: none !important; } #tw-map-modal-canvas .mapboxgl-ctrl-group button:hover { background: rgba(var(--tw-line-rgb), 0.14) !important; } #tw-map-modal-canvas .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 3v12M3 9h12' stroke='%23F4EDE5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important; } #tw-map-modal-canvas .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 9h12' stroke='%23F4EDE5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important; } .tw-map-layer-toggle { position: absolute; bottom: 27px; left: 27px; z-index: 5; display: flex; gap: 3px; padding: 4.5px; background: rgba(var(--tw-navy-deep-rgb), 0.88); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(var(--tw-line-rgb), 0.18); border-radius: 15px; box-shadow: 0 9px 36px rgba(0, 0, 0, 0.55); } .tw-map-layer-btn { padding: 9px 18px; background: transparent; border: none; border-radius: 10.5px; font-family: var(--tw-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.55); cursor: pointer; touch-action: manipulation; transition: background 0.18s, color 0.18s; } .tw-map-layer-btn:hover { color: rgba(var(--tw-cream-rgb), 0.85); } .tw-map-layer-btn.tw-active { background: rgba(var(--tw-line-rgb), 0.16); color: var(--tw-gold); } .tw-map-loading { position: absolute; top: 27px; left: 50%; transform: translateX(-50%); z-index: 5; padding: 12px 24px; background: rgba(var(--tw-navy-deep-rgb), 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(var(--tw-line-rgb), 0.2); border-radius: 1498.5px; font-family: var(--tw-sans); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.7); opacity: 0; pointer-events: none; transition: opacity 0.2s var(--tw-ease); } .tw-map-loading.tw-show { opacity: 1; } /* ── POI MARKERS + POPUP ─────────────────────────────────────────────────── */ .tw-map-poi-chip { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: rgba(var(--tw-navy-deep-rgb), 0.92); border: 1.5px solid rgba(var(--tw-line-rgb), 0.5); border-radius: 50%; color: var(--tw-cream); cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 1.5px rgba(255, 255, 255, 0.10); transition: transform 0.15s var(--tw-ease), border-color 0.18s, color 0.18s, background 0.18s; } .tw-map-poi-chip:hover { transform: scale(1.18); border-color: var(--tw-gold); background: rgba(var(--tw-navy-deep-rgb), 0.98); color: var(--tw-gold); } .tw-map-pin-large { width: 22px !important; height: 22px !important; border: 3px solid white !important; box-shadow: 0 0 0 6px rgba(var(--tw-line-rgb), 0.5), 0 0 0 12px rgba(var(--tw-line-rgb), 0.18), 0 4px 18px rgba(0, 0, 0, 0.45); animation: tw-pin-pulse 2.2s ease-in-out infinite; } /* Aerial (drone) pin — gold-filled square with drone icon + numeric badge */ .tw-map-aerial-pin { position: relative; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--tw-gold); border: 1.5px solid rgba(var(--tw-navy-deep-rgb), 0.9); border-radius: 12px; color: var(--tw-navy-deep, #0b1520); cursor: pointer; box-shadow: 0 6px 21px rgba(0, 0, 0, 0.7), 0 0 0 4.5px rgba(var(--tw-line-rgb), 0.18); transition: transform 0.18s var(--tw-ease), box-shadow 0.18s; } .tw-map-aerial-pin:hover { transform: scale(1.12); box-shadow: 0 9px 27px rgba(0, 0, 0, 0.75), 0 0 0 7.5px rgba(var(--tw-line-rgb), 0.32); } .tw-map-aerial-num { position: absolute; top: -9px; right: -9px; min-width: 24px; height: 24px; padding: 0 6px; font: 700 15px/24px var(--tw-sans); color: var(--tw-gold); background: rgba(var(--tw-navy-deep-rgb), 0.96); border: 1px solid var(--tw-gold); border-radius: 15px; text-align: center; box-sizing: border-box; } @keyframes tw-pin-pulse { 0%, 100% { box-shadow: 0 0 0 9px rgba(var(--tw-line-rgb), 0.28), 0 6px 24px rgba(0, 0, 0, 0.65); } 50% { box-shadow: 0 0 0 21px rgba(var(--tw-line-rgb), 0.05), 0 6px 24px rgba(0, 0, 0, 0.65); } } .tw-map-popup-wrap .mapboxgl-popup-content { background: rgba(var(--tw-navy-deep-rgb), 0.96); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(var(--tw-line-rgb), 0.25); border-radius: 15px; padding: 15px 21px; box-shadow: 0 15px 60px rgba(0, 0, 0, 0.6); color: var(--tw-cream); } .tw-map-popup-wrap .mapboxgl-popup-tip { display: none; } .tw-map-poi-popup .tw-map-poi-cat { font-family: var(--tw-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tw-gold); } .tw-map-poi-popup .tw-map-poi-name { font-family: var(--tw-serif); font-size: 24px; font-weight: 400; color: var(--tw-cream); margin-top: 3px; line-height: 1.25; max-width: 330px; } .tw-map-poi-popup .tw-map-poi-dist { font-family: var(--tw-sans); font-size: 15px; color: rgba(var(--tw-cream-rgb), 0.55); margin-top: 6px; } /* Prevent body scroll while modal is open */ body.tw-modal-open { overflow: hidden; } /* ── RESPONSIVE — MODAL ──────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Map modal — full bleed */ .tw-map-modal-card { width: 100vw; height: 100dvh; max-width: none; border-radius: 0; } .tw-map-modal-topbar { flex-wrap: wrap; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; } .tw-map-modal-title { order: 1; flex: 1; font-size: 12px; gap: 8px; min-width: 0; } .tw-map-modal-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tw-map-modal-close { order: 2; width: 44px; height: 44px; } .tw-map-filter { order: 3; flex-basis: 100%; max-width: none; } .tw-map-filter-btn { padding: 9px 14px; font-size: 12.5px; } .tw-map-layer-toggle { bottom: calc(18px + env(safe-area-inset-bottom)); left: 18px; padding: 4px; } .tw-map-layer-btn { padding: 8px 14px; font-size: 12.5px; } .tw-map-popup-wrap .mapboxgl-popup-content { max-width: calc(100vw - 60px); } .tw-map-poi-popup .tw-map-poi-name { font-size: 19px; max-width: 240px; } } /* ── PANO-ANCHORED HOTSPOT OVERLAY ───────────────────────────────────────── */ #tw-hotspot-layer { position: fixed; inset: 0; pointer-events: none; z-index: 120; overflow: hidden; } .tw-hotspot-pin { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: auto; cursor: default; opacity: 0; transition: opacity 0.18s var(--tw-ease); user-select: none; transform: translate(-14998.5px, -14998.5px); } .tw-hotspot-dot { width: 21px; height: 21px; border-radius: 50%; background: var(--tw-gold); border: 2px solid rgba(var(--tw-navy-deep-rgb), 0.92); box-shadow: 0 0 0 6px rgba(var(--tw-line-rgb), 0.22), 0 6px 18px rgba(0, 0, 0, 0.55); animation: tw-hotspot-pulse 2.6s ease-in-out infinite; } @keyframes tw-hotspot-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(var(--tw-line-rgb), 0.22), 0 6px 18px rgba(0, 0, 0, 0.55); } 50% { box-shadow: 0 0 0 12px rgba(var(--tw-line-rgb), 0.05), 0 6px 18px rgba(0, 0, 0, 0.55); } } .tw-hotspot-label { font-family: var(--tw-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tw-cream, #f4ece0); background: rgba(var(--tw-navy-deep-rgb), 0.78); border: 1px solid rgba(var(--tw-line-rgb), 0.32); padding: 6px 12px; border-radius: 6px; white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 21px rgba(0, 0, 0, 0.45); } /* ── REDUCED MOTION ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .tw-splash-wordmark-img, .tw-splash-sub, .tw-splash-rule, .tw-splash-location, .tw-splash-enter { animation: none; opacity: 1; transform: none; } .tw-ui-el, #tw-toast, .tw-dropdown, .tw-splash-enter, .tw-menu-chevron, #tw-map-body, .tw-map-chevron, #tw-loader, .tw-loader-fill, #tw-map-modal, .tw-map-modal-card, .tw-map-poi-chip, .tw-map-pin-large, .tw-map-aerial-pin, .tw-hotspot-pin, .tw-hotspot-dot { transition: none; animation: none; } .tw-loader-fill { transform: scaleX(1); } } /* ── Marzipano link hotspots ────────────────────────────────────────────── */ /* ── PANO ZOOM CONTROLS ──────────────────────────────────────────────────── */ .tw-pano-zoom-ctrl { position: fixed; top: 50%; right: 16px; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; background: rgba(var(--tw-navy-deep-rgb), 0.88); border: 1px solid rgba(var(--tw-gold-rgb), 0.28); border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .tw-pano-zoom-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; padding: 0; color: var(--tw-cream); /* zoom SVGs use currentColor */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .tw-pano-zoom-btn:first-child { border-bottom: 1px solid rgba(var(--tw-gold-rgb), 0.18); } .tw-pano-zoom-btn:hover { background: rgba(var(--tw-gold-rgb), 0.14); } .tw-pano-zoom-btn:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: -2px; } .tw-pano-zoom-btn:disabled { opacity: 0.3; cursor: not-allowed; } .tw-pano-zoom-btn:disabled:hover { background: transparent; } /* Modal floorplan zoom: always visible (not hover-gated) */ .tw-plan-zoom-ctrl-modal { opacity: 1 !important; pointer-events: auto !important; top: 12px; right: 12px; } /* Modal floorplan zoom layer needs overflow:hidden on parent */ .tw-plan-modal-stage { overflow: hidden; position: relative; } .tw-plan-modal-zoom-layer { width: 100%; height: 100%; transform-origin: center center; transition: transform 0.18s ease; } /* IMPORTANT: never put `transition: transform` on .tw-hs — Marzipano updates the element's `transform` style every frame to position the hotspot, and a CSS transition tweens those updates, which produces a trailing/laggy follow as the user drags the pano. Hover/scale effects live on inner elements (.tw-hs-ring etc.). will-change promotes the hotspot to its own compositor layer for smoother per-frame updates. */ .tw-hs { position: relative; width: 56px; height: 56px; background: transparent; border: 0; padding: 0; margin-left: -28px; margin-top: -28px; cursor: pointer; font: inherit; color: var(--tw-cream); pointer-events: auto; outline: none; will-change: transform; } .tw-hs:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: 4px; border-radius: 50%; } .tw-hs-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(var(--tw-cream-rgb), 0.78); background: rgba(var(--tw-navy-deep-rgb), 0.4); backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%); box-shadow: 0 6px 20px rgba(0,0,0,0.45); animation: tw-hs-pulse 2.6s ease-in-out infinite; transition: transform 0.25s var(--tw-ease); } .tw-hs:hover .tw-hs-ring, .tw-hs:focus-visible .tw-hs-ring { transform: scale(1.08); } .tw-hs-dot { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--tw-gold); transform: translate(-50%, -50%); box-shadow: 0 0 12px rgba(var(--tw-gold-rgb), 0.7); } .tw-hs-label { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); font-family: var(--tw-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tw-cream); background: rgba(var(--tw-navy-deep-rgb), 0.84); border: 1px solid rgba(var(--tw-gold-rgb), 0.2); padding: 5px 11px; border-radius: 100px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s var(--tw-ease); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Same-floor hotspots: hide labels entirely */ .tw-hs .tw-hs-label { display: none; } /* Cross-floor hotspots: show label on hover */ .tw-hs-xfloor .tw-hs-label { display: block; } .tw-hs-xfloor:hover .tw-hs-label { opacity: 1; } /* ── In-pano info/media hotspots (M6) ─────────────────────────────────────── Distinct from navigation links: cream rounded-square chip with a type glyph instead of the gold dot. Titles show on hover like cross-floor labels. */ a.tw-hs { display: block; text-decoration: none; } .tw-hs-media .tw-hs-dot { width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--tw-sans); font-size: 11px; font-weight: 700; line-height: 1; color: var(--tw-navy-deep); background: var(--tw-cream); box-shadow: 0 0 12px rgba(var(--tw-cream-rgb), 0.45); } .tw-hs-media .tw-hs-label { display: block; } .tw-hs-media:hover .tw-hs-label, .tw-hs-media:focus-visible .tw-hs-label { opacity: 1; } /* Belt-and-braces: link-type hotspots are already skipped at render time in unbranded mode (no anchor in the DOM source) — this guards future drift. */ .tw-unbranded .tw-hs-link { display: none !important; } /* The one global hotspot popup (wrapper.js owns it; above UI, below splash) */ #tw-hs-popup-wrap { position: fixed; inset: 0; z-index: 200; display: none; } #tw-hs-popup-wrap.tw-hs-popup-open { display: block; } #tw-hs-popup-backdrop { position: absolute; inset: 0; background: rgba(var(--tw-navy-deep-rgb), 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } #tw-hs-popup { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 92vw); max-height: 84vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--tw-navy); color: var(--tw-cream); border: 1px solid rgba(var(--tw-cream-rgb), 0.12); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); animation: tw-hs-popup-in 0.22s var(--tw-ease); } html.tw-v-cards-sharp #tw-hs-popup { border-radius: 4px; } @keyframes tw-hs-popup-in { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } } #tw-hs-popup-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(var(--tw-navy-deep-rgb), 0.75); color: var(--tw-cream); font: 400 20px/1 var(--tw-sans); cursor: pointer; } #tw-hs-popup-close:hover { background: rgba(var(--tw-navy-deep-rgb), 0.95); } #tw-hs-popup-media:empty { display: none; } #tw-hs-popup-media img, #tw-hs-popup-media video { display: block; width: 100%; max-height: 60vh; object-fit: contain; background: var(--tw-navy-deep); border-radius: 16px 16px 0 0; } html.tw-v-cards-sharp #tw-hs-popup-media img, html.tw-v-cards-sharp #tw-hs-popup-media video { border-radius: 4px 4px 0 0; } #tw-hs-popup-text { padding: 18px 22px 20px; } #tw-hs-popup-title { margin: 0 0 6px; font-family: var(--tw-serif); font-size: 19px; font-weight: 600; letter-spacing: 0.02em; } #tw-hs-popup-body { margin: 0; font-family: var(--tw-sans); font-size: 13.5px; line-height: 1.65; color: rgba(var(--tw-cream-rgb), 0.85); white-space: pre-wrap; } /* Cross-floor hotspot visual distinction */ .tw-hs-xfloor .tw-hs-ring { border-color: rgba(255, 255, 255, 0.55); background: rgba(var(--tw-navy-deep-rgb), 0.55); border-style: dashed; } .tw-hs-xfloor .tw-hs-dot { background: var(--tw-cream); box-shadow: 0 0 10px rgba(var(--tw-cream-rgb), 0.6); } .tw-hs-xfloor:hover .tw-hs-ring { border-color: rgba(255, 255, 255, 0.8); transform: scale(1.12); } @keyframes tw-hs-pulse { 0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 0 0 rgba(var(--tw-gold-rgb), 0); } 50% { box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 0 14px rgba(var(--tw-gold-rgb), 0); } } @media (prefers-reduced-motion: reduce) { .tw-hs-ring { animation: none; } } /* ── FLOATING FLOORPLAN CARD ─────────────────────────────────────────────── */ /* Floorplan card — sized + styled to mirror #tw-map-card exactly. */ #tw-plan-card { position: fixed; bottom: 42px; left: 36px; z-index: 100; width: 340px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(var(--tw-gold-rgb), 0.2); box-shadow: 0 12px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--tw-gold-rgb), 0.06) inset; background: rgba(var(--tw-navy-deep-rgb), 0.9); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); transition-delay: 0.3s; } .tw-plan-header-row { display: flex; align-items: center; } .tw-plan-header { display: flex; align-items: center; gap: 12px; flex: 1; padding: 16.5px 21px; background: transparent; border: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.18s; } .tw-plan-header:hover { background: rgba(255, 255, 255, 0.08); } .tw-plan-header:hover .tw-plan-header-text { color: rgba(var(--tw-cream-rgb), 0.95); } .tw-plan-header:hover .tw-plan-header-icon { filter: brightness(1.25); } .tw-plan-header:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: -2px; } .tw-plan-header-icon { color: var(--tw-gold); flex-shrink: 0; display: flex; align-items: center; transition: filter 0.18s; } .tw-plan-header-text { font-family: var(--tw-sans); font-size: 16px; font-weight: 500; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.72); flex: 1; text-align: left; transition: color 0.18s; } /* Icon buttons in the header row — same dims as .tw-map-iconbtn */ .tw-plan-iconbtn { flex-shrink: 0; width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: rgba(var(--tw-cream-rgb), 0.55); transition: color 0.18s, background 0.18s, transform 0.28s var(--tw-ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .tw-plan-iconbtn:hover { color: var(--tw-gold); background: rgba(255, 255, 255, 0.04); } .tw-plan-iconbtn:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: -4px; } .tw-plan-chevron-btn .tw-plan-chevron { color: inherit; transition: transform 0.28s var(--tw-ease); } #tw-plan-card.tw-plan-collapsed .tw-plan-chevron-btn .tw-plan-chevron { transform: rotate(180deg); } #tw-plan-body { max-height: 450px; overflow: hidden; transition: max-height 0.3s var(--tw-ease); border-top: 1px solid rgba(var(--tw-gold-rgb), 0.08); } #tw-plan-card.tw-plan-collapsed #tw-plan-body { max-height: 0; border-top-color: transparent; } .tw-plan-tabs { display: flex; gap: 2px; padding: 8px 8px 0; flex-wrap: wrap; } .tw-plan-tab { font-family: var(--tw-sans); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; border-radius: 100px; background: transparent; border: 1px solid rgba(var(--tw-gold-rgb), 0.15); color: rgba(var(--tw-cream-rgb), 0.55); cursor: pointer; transition: all 0.15s ease; } .tw-plan-tab:hover { color: var(--tw-cream); border-color: rgba(var(--tw-gold-rgb), 0.4); } .tw-plan-tab-active { background: rgba(var(--tw-gold-rgb), 0.18); border-color: rgba(var(--tw-gold-rgb), 0.55); color: var(--tw-cream); } .tw-plan-stage { position: relative; width: calc(100% - 24px); margin: 10px 12px 14px; background: rgba(var(--tw-cream-rgb), 0.04); border-radius: 8px; border: 1px solid rgba(var(--tw-gold-rgb), 0.08); overflow: hidden; } .tw-plan-img { width: 100%; height: auto; display: block; filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(0.95); opacity: 0.86; user-select: none; pointer-events: none; } .tw-plan-zoom-layer { position: relative; width: 100%; transform-origin: center center; transition: transform 0.2s var(--tw-ease); cursor: default; } .tw-plan-zoom-layer[data-scale]:not([data-scale="1"]) { cursor: grab; } .tw-plan-zoom-layer.tw-plan-panning { cursor: grabbing; transition: none; } .tw-plan-zoom-ctrl { position: absolute; top: 8px; right: 8px; z-index: 10; display: flex; flex-direction: column; background: rgba(var(--tw-navy-deep-rgb), 0.88); border: 1px solid rgba(var(--tw-gold-rgb), 0.28); border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 0.2s var(--tw-ease); } .tw-plan-stage:hover .tw-plan-zoom-ctrl, .tw-plan-zoom-ctrl:focus-within { opacity: 1; pointer-events: auto; } .tw-plan-zoom-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; padding: 0; color: var(--tw-cream); /* zoom SVGs use currentColor */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .tw-plan-zoom-btn:first-child { border-bottom: 1px solid rgba(var(--tw-gold-rgb), 0.18); } .tw-plan-zoom-btn:hover { background: rgba(var(--tw-gold-rgb), 0.14); } .tw-plan-zoom-btn:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: -2px; } .tw-plan-zoom-btn:disabled { opacity: 0.3; cursor: not-allowed; } .tw-plan-zoom-btn:disabled:hover { background: transparent; } .tw-plan-markers { position: absolute; inset: 0; pointer-events: none; } .tw-plan-marker { position: absolute; width: 0; height: 0; pointer-events: auto; background: transparent; border: 0; cursor: pointer; padding: 0; transition: left 0.35s var(--tw-ease), top 0.35s var(--tw-ease); } .tw-plan-dot { position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--tw-gold); border: 1.5px solid rgba(var(--tw-cream-rgb), 0.95); box-shadow: 0 0 0 3px rgba(var(--tw-gold-rgb), 0.18), 0 1px 4px rgba(0,0,0,0.55); transform: translate(-50%, -50%); transition: width 0.18s, height 0.18s, box-shadow 0.18s; } .tw-plan-marker:hover .tw-plan-dot { width: 15px; height: 15px; box-shadow: 0 0 0 5px rgba(var(--tw-gold-rgb), 0.28), 0 2px 6px rgba(0,0,0,0.6); } .tw-plan-marker-active .tw-plan-dot { width: 17px; height: 17px; background: var(--tw-cream); border-color: var(--tw-gold); box-shadow: 0 0 0 4px rgba(var(--tw-gold-rgb), 0.32), 0 2px 8px rgba(0,0,0,0.55); } .tw-plan-cone { position: absolute; top: 0; left: 0; width: 50px; height: 56px; background: radial-gradient(ellipse at 50% 100%, rgba(var(--tw-gold-rgb), 0.6) 0%, rgba(var(--tw-gold-rgb), 0.18) 40%, transparent 75%); clip-path: polygon(50% 100%, 0% 0%, 100% 0%); transform-origin: 50% 100%; transform: translate(-50%, -100%); pointer-events: none; } /* Tour Start marker — distinct green-tinted ring */ .tw-plan-marker-start .tw-plan-dot { background: #5cdb7e; border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 0 0 3px rgba(92, 219, 126, 0.25), 0 1px 4px rgba(0,0,0,0.55); } .tw-plan-marker-start.tw-plan-marker-active .tw-plan-dot { background: #5cdb7e; border-color: #fff; box-shadow: 0 0 0 4px rgba(92, 219, 126, 0.35), 0 2px 8px rgba(0,0,0,0.55); } .tw-plan-start-label { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-family: var(--tw-sans); font-size: 7px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #5cdb7e; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,0.8); } /* ── FULLSCREEN FLOORPLAN MODAL — mirrors #tw-map-modal ─────────────────── */ #tw-plan-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.2s var(--tw-ease); } #tw-plan-modal.tw-plan-modal-hidden { opacity: 0; pointer-events: none; } .tw-plan-modal-backdrop { position: absolute; inset: 0; background: rgba(var(--tw-navy-deep-rgb), 0.72); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); cursor: pointer; } .tw-plan-modal-card { position: relative; width: 92vw; height: 88vh; max-width: 2100px; background: rgba(var(--tw-navy-deep-rgb), 0.95); border: 1px solid rgba(var(--tw-gold-rgb), 0.2); border-radius: 24px; box-shadow: 0 30px 120px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(var(--tw-gold-rgb), 0.06) inset; overflow: hidden; display: flex; flex-direction: column; transform: scale(1); transition: transform 0.2s var(--tw-ease); } #tw-plan-modal.tw-plan-modal-hidden .tw-plan-modal-card { transform: scale(0.96); } .tw-plan-modal-topbar { display: flex; align-items: center; gap: 24px; padding: 21px 27px; border-bottom: 1px solid rgba(var(--tw-gold-rgb), 0.12); background: rgba(var(--tw-navy-deep-rgb), 0.4); } .tw-plan-modal-title { display: flex; align-items: center; gap: 12px; font-family: var(--tw-sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.55); flex-shrink: 0; } .tw-plan-modal-title .tw-plan-header-icon { color: var(--tw-gold); } /* Floor filter pills in modal — mirrors .tw-map-filter */ .tw-plan-filter { display: flex; gap: 3px; padding: 4.5px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(var(--tw-gold-rgb), 0.1); border-radius: 15px; flex: 1; max-width: 630px; overflow-x: auto; } .tw-plan-filter-btn { flex: 1; padding: 9px 21px; background: transparent; border: none; border-radius: 10.5px; font-family: var(--tw-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.5); cursor: pointer; touch-action: manipulation; transition: background 0.18s, color 0.18s; white-space: nowrap; } .tw-plan-filter-btn:hover { color: rgba(var(--tw-cream-rgb), 0.85); } .tw-plan-filter-btn.tw-active { background: rgba(var(--tw-gold-rgb), 0.16); color: var(--tw-gold); } .tw-plan-modal-close { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(var(--tw-gold-rgb), 0.30); border-radius: 15px; cursor: pointer; color: var(--tw-gold); transition: background 0.18s, color 0.18s, border-color 0.18s; flex-shrink: 0; margin-left: auto; -webkit-tap-highlight-color: transparent; } .tw-plan-modal-close:hover { color: var(--tw-cream); background: rgba(var(--tw-gold-rgb), 0.12); border-color: rgba(var(--tw-gold-rgb), 0.55); } .tw-plan-modal-body { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 36px; background: rgba(var(--tw-navy-deep-rgb), 0.55); } .tw-plan-modal-stage { position: relative; max-width: 100%; max-height: 100%; display: inline-block; } .tw-plan-modal-img { max-width: 100%; max-height: calc(88vh - 200px); width: auto; height: auto; display: block; filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(0.95); opacity: 0.92; user-select: none; pointer-events: none; } .tw-plan-modal-markers { position: absolute; inset: 0; pointer-events: none; } /* ── REALTOR BUTTON + POPUP ──────────────────────────────────────────────── */ #tw-realtor-btn { position: fixed; top: 22px; right: 22px; z-index: 110; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(var(--tw-gold-rgb), 0.35); background: rgba(var(--tw-navy-deep-rgb), 0.84); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); color: var(--tw-cream); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.45); transition: all 0.2s var(--tw-ease); } #tw-realtor-btn:hover { background: rgba(var(--tw-navy-deep-rgb), 0.92); border-color: var(--tw-gold); color: var(--tw-gold); transform: scale(1.05); } #tw-realtor-btn:focus-visible { outline: 2px solid var(--tw-gold); outline-offset: 3px; } #tw-realtor-popup { position: fixed; top: 78px; right: 22px; z-index: 111; width: 300px; padding: 22px 22px 18px; background: rgba(var(--tw-navy-deep-rgb), 0.94); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(var(--tw-gold-rgb), 0.22); border-radius: 16px; box-shadow: 0 12px 50px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(var(--tw-gold-rgb), 0.06) inset; color: var(--tw-cream); opacity: 1; transform: translateY(0); transition: opacity 0.22s var(--tw-ease), transform 0.22s var(--tw-ease); } #tw-realtor-popup.tw-realtor-hidden { opacity: 0; transform: translateY(-8px); pointer-events: none; } .tw-realtor-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: transparent; border: 0; border-radius: 50%; color: rgba(var(--tw-cream-rgb), 0.45); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .tw-realtor-close:hover { color: var(--tw-cream); background: rgba(255,255,255,0.04); } .tw-realtor-name { font-family: var(--tw-serif); font-size: clamp(22px, 1.6vw, 26px); font-weight: 400; margin-bottom: 16px; letter-spacing: 0.02em; } .tw-realtor-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; } .tw-realtor-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-family: var(--tw-sans); font-size: 12px; color: rgba(var(--tw-cream-rgb), 0.78); text-decoration: none; transition: all 0.15s; } .tw-realtor-row svg { color: var(--tw-gold); flex-shrink: 0; } .tw-realtor-row:hover { background: rgba(var(--tw-gold-rgb), 0.08); color: var(--tw-cream); } .tw-realtor-bk { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(var(--tw-gold-rgb), 0.12); } /* Agent (personal) logo at top of realtor card */ .tw-realtor-agent-logo-wrap { margin-bottom: 16px; } .tw-realtor-agent-logo { height: 36px; width: auto; max-width: 160px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.9; } /* Brokerage logo in footer of realtor card — coloured asset, show as-is */ .tw-realtor-bk-logo { height: 26px; width: auto; flex-shrink: 0; max-width: 100px; object-fit: contain; opacity: 0.85; } .tw-realtor-bk-name { font-family: var(--tw-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--tw-cream-rgb), 0.55); } /* ── Flat floor list dropdown ────────────────────────────────────────────── */ .tw-dd-floor-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; background: transparent; border: 0; border-radius: 12px; cursor: pointer; font-family: var(--tw-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: rgba(var(--tw-cream-rgb), 0.85); text-align: left; transition: background 0.15s; } .tw-dd-floor-btn:hover { background: rgba(255, 255, 255, 0.06); } .tw-dd-floor-btn.tw-active { background: rgba(var(--tw-gold-rgb), 0.14); color: var(--tw-cream); } .tw-dd-floor-btn .tw-dd-floor-label { flex: 1; } .tw-dd-floor-btn .tw-dd-floor-count { font-size: 9px; font-weight: 500; color: rgba(var(--tw-cream-rgb), 0.4); background: rgba(255, 255, 255, 0.05); border-radius: 100px; padding: 2px 8px; } /* ── Reveal-show for new elements ───────────────────────────────────────── */ #tw-realtor-btn.tw-show, #tw-plan-card.tw-show { opacity: 1; pointer-events: auto; } #tw-realtor-btn, #tw-plan-card { opacity: 0; pointer-events: none; transition: opacity 0.55s var(--tw-ease); } /* ── Responsive: floorplan card → circle FAB on mobile (mirrors map FAB) ──── */ @media (max-width: 768px) { #tw-plan-card { bottom: calc(94px + env(safe-area-inset-bottom)); left: 18px; right: auto; width: 62px; height: 62px; border-radius: 50%; padding: 0; overflow: hidden; } .tw-plan-header-row { width: 100%; height: 100%; } .tw-plan-header { width: 100%; height: 100%; padding: 0; gap: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .tw-plan-header-text { display: none; } #tw-plan-expand { display: none; } .tw-plan-header-icon { display: flex; align-items: center; justify-content: center; } .tw-plan-header-icon svg { width: 24px !important; height: 24px !important; stroke-width: 2.2 !important; } /* Hide inline plan body — circle tap opens modal */ #tw-plan-body { display: none; } #tw-plan-chevron-btn { display: none; } .tw-plan-zoom-ctrl { display: none; } /* Modal goes fullscreen on mobile and the topbar tightens up: title row gets the icon + close button, filter pills wrap onto their own row below so they're never clipped regardless of how many floors there are. */ .tw-plan-modal-card { width: 100vw; height: 100vh; border-radius: 0; } .tw-plan-modal-topbar { padding: 14px 16px; gap: 10px; flex-wrap: wrap; } .tw-plan-modal-title span:not(.tw-plan-header-icon) { display: none; } .tw-plan-modal-title { flex-shrink: 0; } .tw-plan-filter { order: 3; flex-basis: 100%; max-width: 100%; font-size: 13px; } .tw-plan-filter-btn { padding: 8px 14px; font-size: 13px; letter-spacing: 0.10em; } .tw-plan-modal-close { width: 44px; height: 44px; } .tw-plan-modal-body { padding: 14px; } .tw-plan-modal-img { max-height: calc(100vh - 180px); } #tw-realtor-popup { top: auto; bottom: 96px; right: 12px; left: 12px; width: auto; } #tw-realtor-btn { top: 14px; right: 14px; width: 42px; height: 42px; } } /* ══ LAYOUT VARIANTS (M4) ═══════════════════════════════════════════════════ Applied as html.tw-v-{component}-{name} classes by applyTheme() from theme.variants. The defaults (classic / pill / classic) have NO rules here — absence of a variant class IS the default look. nav + cards variants are CSS-only restyles (no DOM forks); splash `minimal` is CSS-only as well. QA: ?tw-debug=1&tw-variants=minimal,glass-bar,sharp on any preview URL. */ /* ── splash: minimal — lower-third, left-aligned, compact, no rule ───────── */ html.tw-v-splash-minimal #tw-splash { align-items: flex-end; justify-content: flex-start; } html.tw-v-splash-minimal .tw-splash-inner { align-items: flex-start; text-align: left; max-width: 600px; padding: 0 36px clamp(96px, 14vh, 160px) clamp(28px, 5vw, 72px); } html.tw-v-splash-minimal .tw-splash-headline-text { text-align: left; margin-left: 0; margin-right: 0; font-size: clamp(26px, 3.1vw, 40px); max-width: 20ch; } html.tw-v-splash-minimal .tw-splash-rule { display: none; } html.tw-v-splash-minimal .tw-splash-location { text-align: left; } /* ── nav: glass-bar — full-width slim bottom bar, squared corners ────────── */ html.tw-v-nav-glass-bar #tw-menu-bar { left: 24px; right: 24px; bottom: 24px; transform: none; display: flex; justify-content: center; } html.tw-v-nav-glass-bar .tw-menu-pill { width: 100%; justify-content: center; border-radius: 14px; height: 64px; } /* keep clear of the bottom corner cards — lift them above the bar */ html.tw-v-nav-glass-bar #tw-plan-card, html.tw-v-nav-glass-bar #tw-map-card { bottom: 110px; } /* ── cards: sharp — squared corners, slimmer headers, tighter caps labels ── */ html.tw-v-cards-sharp #tw-map-card, html.tw-v-cards-sharp #tw-plan-card { border-radius: 8px; } html.tw-v-cards-sharp .tw-map-modal-card, html.tw-v-cards-sharp .tw-plan-modal-card { border-radius: 10px; } html.tw-v-cards-sharp #tw-realtor-popup { border-radius: 8px; } html.tw-v-cards-sharp .tw-map-header, html.tw-v-cards-sharp .tw-plan-header { padding: 11px 16px; } html.tw-v-cards-sharp .tw-map-header-text, html.tw-v-cards-sharp .tw-plan-header-text { font-size: 9px; letter-spacing: 0.26em; } html.tw-v-cards-sharp #tw-hs-popup .tw-hsp-card { border-radius: 8px; } /* M6 hotspot popup */ /* ── Grouped nav (M5) — scene rows nested under group labels ─────────────── */ .tw-dropdown { max-height: min(62vh, 540px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .tw-dd-group-label { padding: 12px 16px 5px; font-family: var(--tw-sans); font-size: 8.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(var(--tw-line-rgb), 0.95); } .tw-dd-group-label:first-child { padding-top: 6px; } .tw-dd-scene-btn { display: flex; align-items: center; width: 100%; padding: 11px 16px 11px 24px; background: transparent; border: 0; border-radius: 12px; cursor: pointer; font-family: var(--tw-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: rgba(var(--tw-cream-rgb), 0.85); text-align: left; transition: background 0.15s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .tw-dd-scene-btn:hover { background: rgba(255, 255, 255, 0.06); } .tw-dd-scene-btn.tw-active { background: rgba(var(--tw-gold-rgb), 0.14); color: var(--tw-cream); font-weight: 600; }