/* ============================================================================ VENUE EXPLORER — deep-dive floor plans inside #floorEvents Loaded after venue.css. Reuses venue.css's .fd-stat / .fd-stats-grid (big serif number + small-caps label, already established elsewhere on this page) for the stat row; everything region/plan/ledger-specific is new here, prefixed .vx-. ============================================================================ */ /* anti-flash: paired with the inline script + style in venue.html's . Kept here too so a cached/serve-order edge case can't lose the rule. */ html.v-jump body{ visibility:hidden; } .fe-panels{ position:relative; } .v-anchor{ display:block; height:0; overflow:hidden; } .vx{ margin-bottom:clamp(40px,5vw,60px); } /* keep the base rule's breathing room above the numerals: the shorthand used to zero the top padding, so the serif figures sat flush on the top rule */ .vx-stats .fd-stats-grid{ padding:clamp(26px,3vw,36px) 0 clamp(30px,4vw,44px); border-bottom:1px solid rgba(36,42,47,.12); margin-bottom:clamp(30px,4vw,44px); } .vx-body{ display:grid; grid-template-columns:1fr 380px; gap:clamp(20px,3vw,32px); align-items:start; } /* --------------------------------------------------------------------------- PLAN — real flat plan + traced SVG overlay, identical box, identical normalised 0..1000 coordinate system stretched with preserveAspectRatio "none" so raster and vector always line up regardless of the source image's own aspect ratio. --------------------------------------------------------------------------- */ .vx-plan-col{ min-width:0; } .vx-plan{ position:relative; width:100%; border-radius:18px; overflow:hidden; background:rgba(36,42,47,.05); } .vx-img{ display:block; width:100%; height:100%; object-fit:cover; transition:filter .4s ease; } .vx-plan.is-focused .vx-img{ filter:brightness(.92) saturate(.86); } @media (prefers-reduced-motion: reduce){ .vx-img{ transition:none; } } .vx-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; } .vx-room{ cursor:pointer; outline:none; } .vx-hit{ fill:transparent; pointer-events:all; } .vx-shape{ pointer-events:all; } .vx-shape{ fill:var(--room-color); fill-opacity:0; stroke:var(--room-color); stroke-opacity:0; stroke-width:2.4px; stroke-linejoin:round; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center; transition:fill-opacity .3s ease, stroke-opacity .3s ease, transform .3s cubic-bezier(.2,.6,.2,1), filter .3s ease; filter:drop-shadow(0 0 0 rgba(36,42,47,0)); } /* The category colour for event halls IS the artwork's own fill (#FFB71B on #FFB71B), so a category-coloured outline was invisible on the biggest room of every floor. Pinned rooms get an ink outline plus a cream halo, which reads on any fill, and the rest of the plan stays dimmed while a room is pinned. */ .vx-room.is-selected .vx-shape{ stroke:var(--ink); stroke-opacity:1; stroke-width:3px; fill:var(--room-color); fill-opacity:.16; paint-order:stroke; } .vx-plan.has-selection .vx-img{ filter:brightness(.92) saturate(.86); } .vx-room.is-hover .vx-shape{ fill-opacity:.26; stroke-opacity:1; transform:scale(1.014); filter:drop-shadow(0 6px 14px rgba(36,42,47,.28)); } .vx-room.is-hover.is-selected .vx-shape{ fill-opacity:.3; } .vx-room:focus-visible .vx-shape{ stroke-opacity:1; fill-opacity:.26; } @media (prefers-reduced-motion: reduce){ .vx-shape{ transition:fill-opacity .15s linear, stroke-opacity .15s linear; } .vx-room.is-hover .vx-shape{ transform:none; } } /* floating callout: name + SF, tracks the hovered/focused room */ .vx-tip{ position:absolute; z-index:6; pointer-events:none; transform:translate(-50%,-14px); background:var(--ink); color:var(--cream); font-family:var(--label); font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; padding:9px 14px; border-radius:8px; white-space:nowrap; box-shadow:0 14px 28px rgba(36,42,47,.32); opacity:0; transition:opacity .18s ease; } .vx-tip-sf{ color:var(--yellow); margin-left:9px; } .vx-tip.is-on{ opacity:1; } @media (prefers-reduced-motion: reduce){ .vx-tip{ transition:none; } } /* the tip is a mouse/keyboard preview aid -- touch has no hover to preview, and its position math isn't meaningful without a pointer, so hide it */ @media (hover:none){ .vx-tip{ display:none; } } /* --------------------------------------------------------------------------- LEGEND --------------------------------------------------------------------------- */ .vx-legend{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; } .vx-legend-item{ display:inline-flex; align-items:center; gap:8px; font-family:var(--cond); font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:rgba(36,42,47,.68); border:1px solid rgba(36,42,47,.16); border-radius:100px; padding:7px 13px; transition:opacity .25s ease; } .vx-legend-item i{ width:10px; height:10px; border-radius:3px; flex-shrink:0; } .vx-legend-item.is-dim{ opacity:.42; } .vx-legend-item.is-inert{ opacity:.6; border-style:dashed; } /* --------------------------------------------------------------------------- LEDGER + CALLOUT --------------------------------------------------------------------------- */ .vx-ledger-col{ display:flex; flex-direction:column; min-width:0; } .vx-ledger{ list-style:none; margin:0; padding:0; } .vx-ledger-item{ border-top:1px solid rgba(36,42,47,.14); } .vx-ledger-item:last-child{ border-bottom:1px solid rgba(36,42,47,.14); } .vx-ledger-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:14px 10px; border-radius:10px; font:inherit; -webkit-tap-highlight-color:transparent; transition:background-color .2s ease, padding .2s ease; } .vx-ledger-item.is-hint .vx-ledger-row{ background:rgba(255,183,27,.14); } .vx-ledger-item.is-selected .vx-ledger-row{ background:rgba(255,183,27,.22); padding-left:14px; padding-right:14px; } .vx-room-name{ font-family:var(--serif); font-weight:400; font-size:18px; color:var(--ink); } .vx-room-sf{ font-family:var(--label); font-weight:700; font-size:10.5px; letter-spacing:.14em; color:rgba(36,42,47,.55); white-space:nowrap; } .vx-ledger-item.is-selected .vx-room-sf{ color:var(--burgundy); } .vx-callout{ border:1px solid var(--yellow); border-radius:16px; padding:18px 22px; margin-top:18px; } .vx-callout .eyebrow{ font-size:10px; letter-spacing:.22em; margin-bottom:10px; display:block; } .vx-callout p{ font-family:var(--cond); font-size:13px; line-height:1.6; color:rgba(36,42,47,.68); } /* --------------------------------------------------------------------------- RESPONSIVE --------------------------------------------------------------------------- */ @media (max-width:900px){ .vx-body{ grid-template-columns:1fr; } .vx-ledger-col{ margin-top:8px; } } @media (max-width:520px){ .vx-stats .fd-stats-grid{ grid-template-columns:1fr 1fr; row-gap:24px; } .vx-room-name{ font-size:16px; } } /* phone legibility floor (site.css section 19): this sheet loads after site.css, so the callout label needs its own mobile rule */ @media (max-width:900px){ .vx-callout .eyebrow{ font-size:11px; } }