/* ===================================================================== Expoverse — Hall-menu (floorplan) glassmorphism restyle --------------------------------------------------------------------- Additive override for the stock app.js "hall menu" (the reception's floorplan/sector picker). Loads AFTER app.css, so these rules win at equal specificity (selectors mirror the stock chains on purpose). IMPORTANT: this ONLY restyles the menu CHROME (backdrop, glass panel, the framed plan stage, the Sectors list, Enter-Hall button, close + open triggers). It does NOT touch the per-hall `Plan` SVG that app.js injects into `.plan` (that is hand-made DB content, served by GET /hall/:id) — we only frame it. Reception-only in practice (the hall menu is a LOBBY feature). Delete this file + its in index.php to revert to the stock look. ===================================================================== */ /* ---- full-screen blurred backdrop -------------------------------- */ .app .hall-menu .hall-menu-background { background: radial-gradient(130% 130% at 50% 0%, rgba(20, 24, 45, .55), rgba(6, 8, 16, .80)); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); } /* ---- the panel becomes a floating glass card --------------------- */ .app .hall-menu .hall-menu-panel { top: clamp(16px, 3.2vh, 40px); right: clamp(16px, 3vw, 46px); bottom: clamp(16px, 3.2vh, 40px); left: clamp(16px, 3vw, 46px); gap: clamp(16px, 2.4vw, 32px); padding: clamp(16px, 2vw, 26px); background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045)); border: 1px solid rgba(255, 255, 255, .20); border-radius: 26px; -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%); box-shadow: 0 40px 100px rgba(0, 0, 0, .60), inset 0 1px 0 rgba(255, 255, 255, .28); color: #f4f7ff; font-family: var(--expo-font, 'Inter', system-ui, sans-serif); } /* ---- preview pane: a subtle lit "stage" for the floorplan -------- */ .app .hall-menu .hall-menu-panel .preview-panel { border-radius: 18px; background: radial-gradient(120% 85% at 50% 38%, rgba(129, 140, 248, .14), rgba(94, 234, 212, .05) 55%, rgba(255, 255, 255, 0) 75%); overflow: hidden; } /* lift the hand-made plan SVG off the stage (does not alter the SVG) */ .app .hall-menu .hall-menu-panel .preview-panel .swiper .swiper-wrapper .swiper-slide .plan { filter: drop-shadow(0 26px 42px rgba(0, 0, 0, .50)); } /* ---- disable the per-booth links on the floorplan ----------------- */ /* Each booth on the plan is an SVG wrapping a transparent hit-target (injected by api .../space/hall/get.php). We make the WHOLE plan subtree inert so a company logo on the plan is no longer a shortcut into that booth — the user must use the "Enter Hall" pill, which lives in .controls (a sibling of .plan) and is unaffected. NB: it is not enough to set pointer-events:none on just the — the stock stylesheet explicitly forces the inner back to pointer-events:auto, so the (transparent) polygon stays a live hit-target inside the anchor and the link still fires. We therefore kill pointer-events on .plan AND every descendant with !important, which is mechanism-agnostic (works whether the app follows the native SVG link or runs its own delegated click handler). Logos stay fully visible; only the click is removed. */ .app .hall-menu .hall-menu-panel .preview-panel .swiper .swiper-wrapper .swiper-slide .plan, .app .hall-menu .hall-menu-panel .preview-panel .swiper .swiper-wrapper .swiper-slide .plan * { pointer-events: none !important; cursor: default !important; } /* ---- "Enter Hall" -> accent pill --------------------------------- */ .app .hall-menu .hall-menu-panel .preview-panel .swiper .swiper-wrapper .swiper-slide .controls a { height: 44px; padding: 0 30px; border-radius: 999px; background: linear-gradient(135deg, var(--expo-accent-1, #5eead4), var(--expo-accent-2, #818cf8)); color: #06121f; font-family: var(--expo-font, 'Inter', system-ui, sans-serif); font-size: 14.5px; font-weight: 700; letter-spacing: .02em; border: 0; box-shadow: 0 14px 30px rgba(95, 90, 220, .42), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; } .app .hall-menu .hall-menu-panel .preview-panel .swiper .swiper-wrapper .swiper-slide .controls a:hover { background: linear-gradient(135deg, var(--expo-accent-1, #5eead4), var(--expo-accent-2, #818cf8)); color: #06121f; transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 18px 38px rgba(95, 90, 220, .5), inset 0 1px 0 rgba(255, 255, 255, .5); } .app .hall-menu .hall-menu-panel .preview-panel .swiper .swiper-wrapper .swiper-slide .controls a:after { content: ""; width: 16px; height: 16px; margin-left: 9px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---- Sectors list ------------------------------------------------ */ .app .hall-menu .hall-menu-panel .list-panel .panel-header { height: auto; font-family: var(--expo-font-display, 'Sora', var(--expo-font, sans-serif)); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--expo-accent-1, #5eead4); } .app .hall-menu .hall-menu-panel .list-panel .list { top: 40px; } .app .hall-menu .hall-menu-panel .list-panel .list ul { gap: 10px; } .app .hall-menu .hall-menu-panel .list-panel .list ul li { gap: 12px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 12px 14px; font-family: var(--expo-font, 'Inter', system-ui, sans-serif); font-size: 15px; transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .app .hall-menu .hall-menu-panel .list-panel .list ul li:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .26); transform: translateX(3px); } .app .hall-menu .hall-menu-panel .list-panel .list ul li.active { background: linear-gradient(135deg, rgba(94, 234, 212, .30), rgba(129, 140, 248, .26)), rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .42); box-shadow: 0 12px 30px rgba(95, 90, 220, .30), inset 0 1px 0 rgba(255, 255, 255, .30); } .app .hall-menu .hall-menu-panel .list-panel .list ul li .number { width: 30px; height: 30px; flex: 0 0 30px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px; color: #f4f7ff; font-size: 14px; font-weight: 700; } .app .hall-menu .hall-menu-panel .list-panel .list ul li.active .number { background: linear-gradient(135deg, var(--expo-accent-1, #5eead4), var(--expo-accent-2, #818cf8)); border-color: transparent; color: #06121f; } .app .hall-menu .hall-menu-panel .list-panel .list ul li .title { font-weight: 600; } /* ---- close button (X) -> glass circle ---------------------------- */ .app .hall-menu .hall-menu-panel .close-button { top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26); transition: background .15s ease, transform .15s ease, border-color .15s ease; } .app .hall-menu .hall-menu-panel .close-button:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); transform: scale(1.07); } /* ---- the open trigger (top-right grid) -> glass button ----------- */ .app .page-space .hall-menu-button { top: 14px; right: 14px; width: 52px; height: 52px; border-radius: 15px; background: radial-gradient(120% 120% at 30% 25%, rgba(255, 255, 255, .18), rgba(10, 14, 26, .55)); border: 1px solid rgba(255, 255, 255, .26); box-shadow: 0 10px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .30); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); transition: transform .16s ease, background .16s ease, border-color .16s ease; } .app .page-space .hall-menu-button:hover { transform: scale(1.06); border-color: rgba(255, 255, 255, .45); } /* swap the stock 2x2 grid for a friendlier floor-plan/venue-map glyph (white walls + one accent-highlighted stand) */ .app .page-space .hall-menu-button:after { width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='2.6' fill='none' stroke='%23ffffff' stroke-width='1.7'/%3E%3Cpath d='M13 3v18M3 13h18' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' fill='none'/%3E%3Crect x='5.6' y='5.6' width='5' height='5' rx='1' fill='%235eead4'/%3E%3C/svg%3E"); } /* ---- mobile: stack the floorplan + bring back the Sectors list --- */ /* (stock hides .list-panel below 640px, leaving no way to switch halls) */ @media (max-width: 640px) { .app .hall-menu .hall-menu-panel { flex-flow: column nowrap; gap: 12px; padding: 14px; border-radius: 20px; } .app .hall-menu .hall-menu-panel .preview-panel { flex: 1 1 auto; min-height: 0; } /* room for the Enter Hall pill under the plan on the narrow layout */ .app .hall-menu .hall-menu-panel .preview-panel .swiper .swiper-wrapper .swiper-slide .plan { bottom: 52px; } /* re-show the Sectors list as a scrollable bottom drawer */ .app .hall-menu .hall-menu-panel .list-panel { display: block !important; flex: 0 0 36vh; min-height: 0; } .app .hall-menu .hall-menu-panel .list-panel .panel-header { font-size: 12px; } .app .hall-menu .hall-menu-panel .list-panel .list { top: 30px; } }