/* Anora Booking — native modal wrapper for homepage popup. Colours derive from the declared jade / cream / champagne system. */ .anora-modal { --abm-jade-700: oklch(42% 0.12 165); --abm-jade-900: oklch(25% 0.06 165); --abm-champagne: oklch(82% 0.10 88); --abm-paper: oklch(99% 0.008 88); --abm-ink: oklch(18% 0.01 240); --abm-ease: cubic-bezier(0.16, 1, 0.3, 1); padding: 0; border: 0; background: transparent; max-width: 1100px; width: calc(100% - 32px); max-height: 92vh; margin: auto; overflow: visible; color: var(--abm-ink); } /* Native backdrop: solid jade veil, NO blur. * A full-viewport backdrop-filter re-composites every frame over the heavy homepage * (Elementor) DOM, so every hover/select/scroll inside the open modal janks — not just * the open animation. Dropping the blur entirely removes that per-frame GPU cost; a * denser opaque veil keeps the same "dimmed background" separation cheaply. */ .anora-modal::backdrop { background: oklch(25% 0.06 165 / 0.72); } .anora-modal__sheet { background: var(--abm-paper); border-radius: 24px; box-shadow: 0 40px 80px -20px rgba(20, 53, 44, 0.4); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; font-family: 'Be Vietnam Pro', 'BeVietnam Fallback', system-ui, -apple-system, sans-serif; } .anora-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid oklch(90% 0.04 165); background: var(--abm-paper); flex-shrink: 0; } .anora-modal__title { font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--abm-jade-900); margin: 0; line-height: 1.1; } .anora-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid oklch(90% 0.04 165); background: var(--abm-paper); color: var(--abm-jade-900); font-size: 22px; line-height: 1; cursor: pointer; transition: background var(--abm-ease) 200ms, transform var(--abm-ease) 200ms; } .anora-modal__close:hover { background: oklch(96% 0.02 165); transform: rotate(90deg); } .anora-modal__close:focus-visible { outline: 2px solid var(--abm-champagne); outline-offset: 2px; } .anora-modal__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; } .anora-modal__body .anora-booking-widget { border-radius: 0; max-width: none; margin: 0; background: transparent; } /* Inside the modal the widget already sits in a sheet — trim its own hero padding. */ .anora-modal__body .anora-booking-widget .ab-hero { padding-top: 28px; } /* Scroll lock applied to by the JS controller. */ body.anora-modal-open { overflow: hidden; } /* ---- Open / close animation ---- */ .anora-modal[open] .anora-modal__sheet { animation: anora-modal-in 280ms var(--abm-ease) both; } /* Backdrop appears instantly — animating its opacity while a full-viewport blur is * active forces a per-frame re-rasterization of the blur and is the main source of * the laggy open. The sheet's own transform/opacity animation stays (cheap). */ @keyframes anora-modal-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ---- Mobile: full-screen slide-up sheet ---- */ @media (max-width: 767px) { .anora-modal { width: 100%; max-width: 100%; max-height: 100vh; height: 100vh; } .anora-modal__sheet { border-radius: 0; max-height: 100vh; height: 100vh; } .anora-modal[open] .anora-modal__sheet { animation: anora-sheet-up 300ms var(--abm-ease) both; } @keyframes anora-sheet-up { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } } @media (prefers-reduced-motion: reduce) { .anora-modal[open] .anora-modal__sheet, .anora-modal[open]::backdrop { animation-name: anora-fade-only; animation-duration: 200ms; } @keyframes anora-fade-only { from { opacity: 0; } to { opacity: 1; } } .anora-modal__close:hover { transform: none; } }