/** * Reservation Page — Version 4 (Figma: The House of Legends — node 1271:15065) * https://www.figma.com/design/RgNVpZ3TrlxEWXWB9QrQjD/The-House-of-Legends?node-id=1271-15065 */ /* ---------- Base ---------- */ .reservation-v4 { font-family: "Mulish", sans-serif; background-color: #1a1a1a; color: #e6e6e6; min-height: 100vh; --booking-v5-nav-gap: 96px; } .reservation-v4 * { box-sizing: border-box; } /* * Mobile nav menu: locking scroll with body { overflow: hidden } removes the scrollbar * and widens the viewport — fixed/sticky elements jump horizontally (looks "broken"). * Reserve gutter space so width stays stable when scroll locks (supported browsers). */ html.reservation-v4 { scrollbar-gutter: stable; } /* Lock background scroll when mobile nav is open (class toggled from JS on ) */ html.rv4-nav-menu-open, html.rv4-nav-menu-open body { overflow: hidden; overscroll-behavior: none; } /* ---------- Top navigation ---------- */ .reservation-v4 .rv4-nav { background: #1a1a1a; padding: 16px 120px; display: flex; align-items: center; justify-content: space-between; gap: 80px; max-width: 1440px; margin: 0 auto; } .reservation-v4 .rv4-nav-logo { width: 80px; height: 80px; flex-shrink: 0; } .reservation-v4 .rv4-nav-logo img { width: 100%; height: 100%; object-fit: contain; } .reservation-v4 .rv4-nav-menu { flex: 1; display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 400; line-height: 28px; color: #e6e6e6; } .reservation-v4 .rv4-nav-menu a, .reservation-v4 .rv4-nav-menu .rv4-nav-link--disabled { color: inherit; text-decoration: none; } .reservation-v4 .rv4-nav-menu a:hover { color: #c5a059; } .reservation-v4 .rv4-nav-menu .rv4-nav-link--disabled { opacity: 0.42; cursor: not-allowed; pointer-events: none; user-select: none; } /* Mobile hamburger (Figma 1339:7200) — hidden on desktop */ .reservation-v4 .rv4-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 24px; height: 24px; padding: 0; border: none; background: transparent; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .reservation-v4 .rv4-hamburger-line { display: block; width: 18px; height: 2px; background: #e6e6e6; border-radius: 1px; margin: 0 auto; transition: transform 0.2s, opacity 0.2s; } .reservation-v4 .rv4-hamburger.active .rv4-hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .reservation-v4 .rv4-hamburger.active .rv4-hamburger-line:nth-child(2) { opacity: 0; } .reservation-v4 .rv4-hamburger.active .rv4-hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .reservation-v4 .rv4-mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 999; display: flex; align-items: flex-start; justify-content: flex-start; padding: 16px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .reservation-v4 .rv4-mobile-menu-overlay.active { opacity: 1; visibility: visible; } .reservation-v4 .rv4-mobile-menu-content { background: #2e2e2e; border-radius: 12px; padding: 20px; min-width: 280px; max-width: 320px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; gap: 16px; margin-top: 60px; position: relative; transform: translateX(20px) translateY(-10px) scale(0.95); opacity: 0; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; } .reservation-v4 .rv4-mobile-menu-overlay.active .rv4-mobile-menu-content { transform: translateX(0) translateY(0) scale(1); opacity: 1; } .reservation-v4 .rv4-mobile-menu-link { color: #e6e6e6; font-family: "Mulish", sans-serif; font-size: 16px; line-height: 24px; text-decoration: none; padding: 10px 0; border-bottom: 1px solid rgba(230, 230, 230, 0.1); text-align: left; } .reservation-v4 .rv4-mobile-menu-link:last-child { border-bottom: none; } .reservation-v4 .rv4-mobile-menu-link:hover, .reservation-v4 .rv4-mobile-menu-link:active { color: #c5a059; } .reservation-v4 .rv4-mobile-menu-link--disabled { opacity: 0.42; cursor: not-allowed; pointer-events: none; user-select: none; } .reservation-v4 .rv4-mobile-menu-link--disabled:hover, .reservation-v4 .rv4-mobile-menu-link--disabled:active { color: #e6e6e6; } .reservation-v4 .rv4-lang-toggle { display: flex; align-items: center; gap: 2px; background: #4d4d4d; padding: 2px; border-radius: 800px; } .reservation-v4 .rv4-lang-item { padding: 2px; border-radius: 800px; opacity: 0.4; cursor: pointer; } .reservation-v4 .rv4-lang-item.active { background: #e6e6e6; opacity: 1; } .reservation-v4 .rv4-flag-icon { width: 30px; height: 20px; display: block; } /* ---------- Stepper ---------- */ .reservation-v4 .rv4-stepper { display: flex; align-items: center; gap: 8px; padding: 40px 120px 0; max-width: 1440px; margin: var(--booking-v5-nav-gap) auto 0; } .reservation-v4 .rv4-stepper-item { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; line-height: 24px; } .reservation-v4 .rv4-stepper-item.active .rv4-stepper-dot { background: #c5a059; } .reservation-v4 .rv4-stepper-item.active .rv4-stepper-label { color: #c5a059; } .reservation-v4 .rv4-stepper-item:not(.active) .rv4-stepper-label { color: #808080; } .reservation-v4 .rv4-stepper-dot { width: 24px; height: 24px; border-radius: 50%; background: #4d4d4d; flex-shrink: 0; } .reservation-v4 .rv4-stepper-line { width: 64px; height: 1px; background: #4d4d4d; flex-shrink: 0; } /* ---------- Main content ---------- */ .reservation-v4 .rv4-main { display: flex; align-items: flex-start; gap: 64px; padding: 80px 120px 80px; max-width: 1440px; margin: 0 auto; } .reservation-v4 .rv4-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 40px; } .reservation-v4 .se4-sidebar[hidden] { display: none !important; } /* ---------- Choose Number of tickets ---------- */ .reservation-v4 .rv4-section-title { font-family: "Philosopher", serif; font-size: 24px; line-height: 36px; color: #c5a059; margin: 0 0 16px; } .reservation-v4 .rv4-ticket-counter { display: flex; align-items: baseline; gap: 8px; } .reservation-v4 .rv4-ticket-btn { width: 24px; height: 24px; border: none; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; } .reservation-v4 .rv4-ticket-btn-minus { background: #4d4d4d; color: #e6e6e6; } .reservation-v4 .rv4-ticket-btn-plus { background: #c5a059; color: #1a1a1a; } .reservation-v4 .rv4-ticket-btn:hover { opacity: 0.9; } .reservation-v4 .rv4-ticket-value { font-size: 18px; font-weight: 700; line-height: 28px; color: #e6e6e6; min-width: 24px; text-align: center; } /* ---------- Choose date ---------- */ .reservation-v4 .rv4-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 12px; } .reservation-v4 .rv4-calendar-nav { display: flex; align-items: center; gap: 12px; } .reservation-v4 .rv4-calendar-month { font-size: 18px; font-weight: 700; line-height: 28px; color: #fff; } .reservation-v4 .rv4-calendar-arrow { width: 24px; height: 24px; border: none; background: transparent; color: #e6e6e6; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .reservation-v4 .rv4-availability { display: flex; align-items: center; gap: 17px; font-size: 16px; font-weight: 700; color: #808080; } .reservation-v4 .rv4-availability-item { display: flex; align-items: center; gap: 8px; } .reservation-v4 .rv4-availability-item span:last-child { color: #fff; } .reservation-v4 .rv4-dot { width: 8px; height: 8px; border-radius: 50%; } .reservation-v4 .rv4-dot-limited { background: #c5a059; } .reservation-v4 .rv4-dot-soldout { background: #c45652; } /* ---------- Calendar grid ---------- */ .reservation-v4 .rv4-calendar-grid { display: flex; gap: 8px; } .reservation-v4 .rv4-calendar-col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .reservation-v4 .rv4-calendar-day-name { font-size: 16px; font-weight: 700; line-height: 24px; color: #e6e6e6; text-align: center; padding: 8px 0; } .reservation-v4 .rv4-day-short { display: none; } .reservation-v4 .rv4-calendar-cell { background: #2e2e2e; border-radius: 8px; padding: 8px; /* Uniform cell size (column layout: same height for every day cell) */ height: 148px; min-height: 148px; max-height: 148px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; box-sizing: border-box; position: relative; } .reservation-v4 .rv4-calendar-cell.available { background: #4d4d4d; } .reservation-v4 .rv4-calendar-cell .rv4-cell-date { font-size: 18px; font-weight: 700; line-height: 28px; color: #4d4d4d; } .reservation-v4 .rv4-calendar-cell.available .rv4-cell-date { color: #e6e6e6; } .reservation-v4 .rv4-time-slot { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: 700; line-height: 20px; cursor: pointer; border: 1px solid #808080; color: #fff; background: transparent; width: 100%; text-align: center; position: relative; z-index: 1; pointer-events: auto; -webkit-tap-highlight-color: rgba(197, 160, 89, 0.3); } .reservation-v4 .rv4-time-slot.rv4-time-slot-selected { border-color: #c5a059; color: #c5a059; background: rgba(197, 160, 89, 0.12); } .reservation-v4 .rv4-time-slot:hover { border-color: #c5a059; color: #c5a059; } .reservation-v4 .rv4-time-slot.sold-out { border: none; color: #c45652; } .reservation-v4 .rv4-time-slot.sold-out:hover { cursor: not-allowed; color: #c45652; } /* Mobile-only: session block (Figma 1339:8422) — markup present; hidden on desktop via media */ .reservation-v4 .rv4-mobile-session { display: none; } /* ---------- Footer CTA (full viewport width bar; inner aligns with main) ---------- */ .reservation-v4 .rv4-footer { width: 100%; max-width: none; margin: 0; padding: 24px 0; background: #2e2e2e; display: flex; justify-content: center; box-sizing: border-box; } .reservation-v4 .rv4-footer-inner { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 120px; display: flex; justify-content: flex-end; align-items: center; box-sizing: border-box; } .reservation-v4 .rv4-btn-continue { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 8px 24px; border-radius: 800px; border: none; font-family: "Mulish", sans-serif; font-size: 18px; font-weight: 700; line-height: 28px; text-transform: capitalize; cursor: pointer; transition: background 0.2s, color 0.2s; } .reservation-v4 .rv4-btn-continue:disabled { background: #4d4d4d; color: #808080; cursor: not-allowed; } .reservation-v4 .rv4-btn-continue:not(:disabled) { background: #c5a059; color: #1a1a1a; } .reservation-v4 .rv4-btn-continue:not(:disabled):hover { background: #d4b068; } .reservation-v4 .rv4-btn-continue svg { width: 24px; height: 24px; flex-shrink: 0; } /* ---------- Sticky CTA footer (shared across v4 booking flow) ---------- */ .v4-cta-fixed { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; } /* ---------- Responsive ---------- */ @media (max-width: 1200px) { .reservation-v4 .rv4-nav, .reservation-v4 .rv4-stepper, .reservation-v4 .rv4-main, .reservation-v4 .rv4-footer-inner { padding-left: 24px; padding-right: 24px; } .reservation-v4 .rv4-main { flex-direction: column; } .reservation-v4 .se4-sidebar { width: 100%; max-width: 240px; } } @media (max-width: 768px) { .reservation-v4 { --booking-v5-nav-gap: 72px; } /* Top bar: hamburger + language only (Figma 1339:7200) */ .reservation-v4 .rv4-hamburger { display: flex; } .reservation-v4 .rv4-nav-logo, .reservation-v4 .rv4-nav-menu { display: none !important; } .reservation-v4 .rv4-nav { padding: 16px 20px; gap: 0; flex-wrap: nowrap; justify-content: space-between; align-items: center; max-width: none; position: relative; z-index: 200; } /* Blur on full-screen overlay can cause compositor glitches on mobile; dim only */ .reservation-v4 .rv4-mobile-menu-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Stepper: only active step label (Figma) */ .reservation-v4 .rv4-stepper { padding: 40px 16px 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; gap: 4px; align-items: center; } .reservation-v4 .rv4-stepper-item:not(.active) .rv4-stepper-label { display: none; } .reservation-v4 .rv4-stepper-item.active { flex-shrink: 0; } .reservation-v4 .rv4-stepper-line { flex: 1 1 0; min-width: 8px; width: auto; max-width: 48px; } .reservation-v4 .rv4-stepper-item .rv4-stepper-label { white-space: nowrap; font-size: 14px; line-height: 20px; } .reservation-v4 .rv4-main { padding: 40px 16px 32px; gap: 24px; } .reservation-v4 .rv4-left { gap: 24px; } .reservation-v4 .rv4-section-title { font-size: 18px; line-height: 28px; margin-bottom: 16px; } .reservation-v4 .rv4-day-full { display: none; } .reservation-v4 .rv4-day-short { display: block; } .reservation-v4 .rv4-calendar-day-name { font-size: 14px; line-height: 20px; padding: 4px 0 8px; } /* Calendar fits viewport — no horizontal scroll */ .reservation-v4 .rv4-calendar-grid { overflow-x: visible; gap: 4px; } .reservation-v4 .rv4-calendar-col { min-width: 0; gap: 4px; } .reservation-v4 .rv4-calendar-cell { height: auto; min-height: 40px; max-height: none; padding: 4px 3px; border: 1px solid #a6a6a6; /* Allow the selected checkmark circle to overflow corners */ overflow: visible; align-items: center; justify-content: center; cursor: default; } .reservation-v4 .rv4-calendar-cell.available { cursor: pointer; -webkit-tap-highlight-color: rgba(197, 160, 89, 0.25); } .reservation-v4 .rv4-calendar-cell .rv4-cell-date { font-size: 14px; line-height: 20px; font-weight: 700; } /* Slots live in mobile "Choose session" panel */ .reservation-v4 .rv4-calendar-cell .rv4-time-slot { display: none !important; } .reservation-v4 .rv4-calendar-cell.rv4-date-selected { background: #c5a059; border: 1px solid #c5a059; } .reservation-v4 .rv4-calendar-cell.rv4-date-selected .rv4-cell-date { color: #1a1a1a; } .reservation-v4 .rv4-calendar-cell.rv4-date-selected::after { content: ""; position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; z-index: 2; background: #c5a059; border: 2px solid #1a1a1a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: center; background-size: 10px 8px; background-repeat: no-repeat; } /* Choose session — pills (Figma 1339:8422) */ .reservation-v4 .rv4-mobile-session { display: block; width: 100%; } .reservation-v4 .rv4-mobile-session[hidden] { display: none !important; } .reservation-v4 .rv4-mobile-session-slots { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .reservation-v4 .rv4-mobile-session .rv4-time-slot { display: inline-flex !important; flex: 0 1 calc(50% - 12px); min-height: 38px; min-width: 0; padding: 6px 8px; border-radius: 10px; font-size: 13px; line-height: 18px; position: relative; border: 1px solid #a6a6a6; align-items: center; justify-content: center; } .reservation-v4 .rv4-mobile-session .rv4-time-slot.rv4-time-slot-selected { background: #c5a059; border-color: #c5a059; color: #1a1a1a; padding-right: 24px; } .reservation-v4 .rv4-mobile-session .rv4-time-slot.rv4-time-slot-selected::after { content: ""; position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; z-index: 2; background: #c5a059; border: 2px solid #1a1a1a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: center; background-size: 10px 8px; background-repeat: no-repeat; } .reservation-v4 .rv4-mobile-session .rv4-time-slot.sold-out { border-color: #808080; opacity: 0.85; } /* Show card full width under form (Figma); align with select-experience-v4 mobile sidebar */ .reservation-v4 .se4-sidebar { width: 100%; max-width: none; margin: 0; display: flex; flex-direction: column; align-items: center; } .reservation-v4 .se4-sidebar-poster { width: 100%; max-width: 200px; height: auto; aspect-ratio: 160 / 237; margin: 0 auto; align-self: center; } .reservation-v4 .se4-sidebar-title { font-size: 28px; line-height: 36px; text-align: center; width: 100%; box-sizing: border-box; } .reservation-v4 .se4-sidebar-details { align-items: flex-start; width: 100%; align-self: stretch; box-sizing: border-box; } .reservation-v4 .se4-sidebar-summary { width: 100%; max-width: 100%; align-self: stretch; box-sizing: border-box; } .reservation-v4 .rv4-footer-inner { padding-left: 16px; padding-right: 16px; justify-content: stretch; } .reservation-v4 .rv4-btn-continue { width: 100%; min-height: 48px; font-size: 16px; line-height: 24px; } } @media (min-width: 769px) { .reservation-v4 .rv4-mobile-session { display: none !important; } }