/* * Kalon Popup — native styles * * 2026-04-10 Phase 5 (C-1) of the kalon-theme refactor: * The popup was migrated from a CSS :target mechanism to a native * element opened via dialog.showModal(). This gives us: * - Native focus trap (no custom JS) * - Native Esc-to-close * - Native backdrop via the ::backdrop pseudo-element * - Implicit aria-modal + role="dialog" * - Native scroll lock on the body * Browser support: Chrome 37+, Firefox 98+, Safari 15.4+ — universal in 2026. * * Class names match the previous markup so non-popup styles applied to * .kalon-popup__close / __title / __subtitle / __form / __contact still work. */ /* ════════════════════════════════════════════════════════════ reset + positioning ════════════════════════════════════════════════════════════ */ dialog.kalon-popup { /* Strip the browser's default chrome — we provide our own. */ border: 0; padding: 0; background: transparent; color: inherit; max-width: calc(100vw - 40px); /* dvh = dynamic viewport height — accounts for iOS Safari's collapsing URL bar so the dialog never overflows the visible viewport. Same Safari 15.4+ baseline as native , so the gate is identical. */ max-height: calc(100dvh - 40px); overflow: visible; /* Browser centers via margin: auto on the inset box. Re-stating for older builds + clarity. */ margin: auto; } /* The native backdrop replaces the old .kalon-popup__overlay anchor. */ dialog.kalon-popup::backdrop { background: rgba(0, 0, 0, 0.6); } /* Body scroll lock while the dialog is open. Chrome/Firefox/Safari do NOT add overflow:hidden to or when showModal() runs — only the top-layer dialog itself becomes interactive. Without this rule the page behind the modal can still scroll on wheel/touch/keyboard input. The :has() selector is supported on every browser that supports (Chrome 105+, Safari 15.4+, Firefox 121+), so the gate is the same as the dialog migration itself. */ html:has(dialog.kalon-popup[open]), body:has(dialog.kalon-popup[open]) { overflow: hidden; } /* When closed (no [open] attribute), is display:none by default, so no opacity/visibility transition is needed. The fade-in is just the inner content sliding up. */ dialog.kalon-popup[open] .kalon-popup__content { transform: translateY(0); } /* ════════════════════════════════════════════════════════════ Inner card ════════════════════════════════════════════════════════════ */ .kalon-popup__content { position: relative; /* Cream warm-panel background — matches the bottom form's background so the popup looks like the same branded element rendered in a different surface. Form inputs inside still render white via kalon-form.css's `.kalon-form input/select/textarea { background: #fff }` rules, which is the desired contrast against the cream panel. */ background: #f7f4ef; /* Stable width — explicit, not content-driven. Without this, selecting a guest count (which reveals room cards with longer labels like "Two Ocean View Rooms" and "Ocean View + Junior Suite Combination") made the popup grow wider mid-interaction. With an explicit width the cards wrap inside the fixed panel and the popup only grows taller, never wider. */ width: 520px; max-width: calc(100vw - 32px); border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); transform: translateY(20px); transition: transform 0.3s ease; margin: auto; max-height: calc(100dvh - 40px); min-height: min(680px, calc(100dvh - 40px)); overflow-y: auto; /* iOS momentum scroll for the inner card. */ -webkit-overflow-scrolling: touch; /* Prevent scroll-chaining: when the user reaches the top or bottom of the form, further swipes do not scroll the page behind the modal. */ overscroll-behavior: contain; } /* Brand gradient strip at the top of the panel */ .kalon-popup__content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, rgb(0, 179, 219) 0%, rgb(88, 214, 82) 100%); border-radius: 10px 10px 0 0; } /* Close button — clean transparent circular hit area with an inline SVG X icon (markup in kalon-popup.php). Dark navy stroke matches the nav + body type. The button is the click target; the SVG is purely visual. Hover lifts a subtle dark navy fill to confirm interactivity without competing with the cream panel background. */ .kalon-popup__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: #2a3f4a; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; z-index: 10; } .kalon-popup__close:hover { background: rgba(42, 63, 74, 0.08); color: #1a2332; } .kalon-popup__close:focus-visible { outline: 2px solid #00B3DB; outline-offset: 2px; } .kalon-popup__close-icon { width: 16px; height: 16px; display: block; } .kalon-popup__title { margin: 0; padding: 36px 32px 6px; font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 600; color: #333; text-transform: uppercase; letter-spacing: 2px; } .kalon-popup__subtitle { margin: 0; padding: 0 32px 24px; font-family: 'Montserrat', sans-serif; font-size: 15px; color: #666; line-height: 1.5; } .kalon-popup__form { padding: 0 32px 12px; } .kalon-popup__contact { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 32px 32px; margin-top: 20px; border-top: 1px solid #eee; } .kalon-popup__contact a { font-family: 'Montserrat', sans-serif; font-size: 14px; color: #666; text-decoration: none; transition: color 0.2s ease; } .kalon-popup__contact a:hover { color: #00b3db; } /* Bottom close button — hidden by default, mobile-only via media query below. Helps one-handed users on large phones who can't reach the top-right close button with their thumb. */ .kalon-popup__close-bottom { display: none; } @media (max-width: 640px) { /* WCAG 2.5.5 + Apple HIG: 44×44 minimum touch target on mobile. */ .kalon-popup__close { width: 44px; height: 44px; top: 12px; right: 12px; } .kalon-popup__close-icon { width: 18px; height: 18px; } .kalon-popup__close-bottom { display: block; width: 100%; padding: 18px 24px; margin: 0; background: transparent; border: 0; border-top: 1px solid #eee; font-family: 'Montserrat', -apple-system, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #666; cursor: pointer; } .kalon-popup__close-bottom:hover { color: #333; } } @media (max-width: 480px) { dialog.kalon-popup { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } /* Override the desktop fixed 520px so the popup nearly fills the viewport on phones, where every horizontal pixel matters. */ .kalon-popup__content { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); } .kalon-popup__title { padding: 20px 20px 4px; font-size: 20px; } .kalon-popup__subtitle { padding: 0 20px 12px; font-size: 14px; } .kalon-popup__form { padding: 0 20px 8px; } .kalon-popup__contact { padding: 12px 20px 16px; gap: 10px; flex-direction: column; align-items: flex-start; } .kalon-popup__contact a { font-size: 13px; } }