/* * Luxury Hotel Overrides — Phase 1 * Design System: Navy #1A2332 · Gold #C9A96E · Ivory #F8F5F0 * Fonts: Cormorant Garamond (headings) · Barlow (body) * * Load order: after destination-hotel-booking-style * MotoPress shortcodes and booking logic are untouched. */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { --lux-ink: #0F1923; --lux-navy: #1A2332; --lux-gold: #C9A96E; --lux-gold-light: #E8D5B0; --lux-ivory: #F8F5F0; --lux-stone: #E8E2D9; --lux-mist: #9E9589; --lux-white: #FFFFFF; --lux-overlay: rgba(15, 25, 35, 0.52); --lux-header-h: 88px; /* Override theme's salmon primary with gold */ --color-primary1: #C9A96E; } /* ============================================================ 2. BASE TYPOGRAPHY & RESET ============================================================ */ body { font-size: 16px; line-height: 1.75; color: #3D3731; font-family: "Barlow", sans-serif; font-weight: 300; } h1, h2, h3, h4, h5, h6 { font-family: "Cormorant Garamond", "Cormorant", serif; color: var(--lux-ink); line-height: 1.2; font-weight: 400; letter-spacing: 0.01em; } p { font-size: 16px; line-height: 1.75; font-family: "Barlow", sans-serif; font-weight: 300; } a { color: var(--lux-gold); transition: color 0.3s ease; } a:hover { color: var(--lux-ink); } /* ============================================================ 3. HEADER — Transparent on hero, solid on scroll / other pages ============================================================ */ /* Fix header to top of viewport */ header[role="banner"] { position: fixed; top: 0; left: 0; right: 0; z-index: 999; transition: background 0.4s ease; } /* Strip the floating white card */ .menubox .container { position: relative !important; left: auto !important; top: auto !important; right: auto !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 15px !important; } /* Natural-flow menubox with centred content */ .menubox { min-height: var(--lux-header-h); display: flex; align-items: center; width: 100%; transition: background 0.4s ease, backdrop-filter 0.4s ease; } .menubox .container .row { align-items: center; width: 100%; } /* ── Transparent state (homepage, before scroll) ── */ .main-header, .headerbox { background: transparent; } /* ── Solid state: scrolled OR non-hero pages (set by luxury-effects.js) ── */ header[role="banner"].lux-scrolled .menubox { background: rgba(15, 25, 35, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Non-hero pages: JS adds .lux-has-header to , we compensate layout */ body.lux-has-header { padding-top: var(--lux-header-h); } .admin-bar.lux-has-header { padding-top: calc(var(--lux-header-h) + 32px); } /* Also compensate admin bar for fixed header position */ .admin-bar header[role="banner"] { top: 32px; } /* ── Logo (top-left-logo.png) ── */ .logo-col { flex: 0 0 auto; width: auto; max-width: 38%; } .logo.lux-logo-image { display: flex; align-items: center; min-height: 68px; } .logo.lux-logo-image .lux-site-logo-wrap { margin: 0 !important; } .logo.lux-logo-image .lux-site-logo-link { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; max-width: 100%; } .logo.lux-logo-image .lux-header-logo { display: block; width: auto; height: auto; max-height: 68px; max-width: min(340px, 54vw); object-fit: contain; } header[role="banner"].lux-scrolled .logo.lux-logo-image .lux-header-logo { max-height: 64px; } @media (max-width: 992px) { :root { --lux-header-h: 80px; } .logo-col { max-width: 42%; } .logo.lux-logo-image .lux-header-logo { max-height: 52px; max-width: min(300px, 60vw); } header[role="banner"].lux-scrolled .logo.lux-logo-image .lux-header-logo { max-height: 50px; } } @media (max-width: 768px) { :root { --lux-header-h: 72px; } .logo-col { max-width: 55%; } .logo.lux-logo-image { min-height: 52px; } .logo.lux-logo-image .lux-header-logo { max-height: 38px; max-width: min(260px, 64vw); } header[role="banner"].lux-scrolled .logo.lux-logo-image .lux-header-logo { max-height: 36px; } } @media (max-width: 480px) { .logo.lux-logo-image .lux-header-logo { max-height: 36px; max-width: min(220px, 70vw); } } .logo p.site-title a, .logo h1 a { color: var(--lux-white); font-family: "Cormorant Garamond", "Cormorant", serif; font-size: 34px; transition: color 0.3s ease; } .logo p.site-title a:hover, .logo h1 a:hover { color: var(--lux-gold); } .logo p.site-description { color: rgba(255, 255, 255, 0.6); font-size: 12px; } /* ── Navigation links ── */ .main-navigation a { color: var(--lux-white) !important; font-family: "Barlow", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 16px; transition: color 0.3s ease; } .main-navigation a:hover { color: var(--lux-gold) !important; background: transparent !important; } /* Remove salmon pill on active item — use gold text instead */ .main-navigation ul .current_page_item > a, .main-navigation ul .current-menu-item > a { background: transparent !important; border-radius: 0 !important; color: var(--lux-gold) !important; } /* Dropdown menus */ .main-navigation ul ul { background: var(--lux-navy) !important; border-top: 2px solid var(--lux-gold); } .main-navigation ul ul a { color: rgba(255, 255, 255, 0.8) !important; font-size: 12px; letter-spacing: 0.08em; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } .main-navigation ul ul a:hover { color: var(--lux-gold) !important; background: rgba(255, 255, 255, 0.04) !important; } /* Dropdown chevron */ .main-navigation li.menu-item-has-children::after, .main-navigation li.page_item_has_children::after { color: var(--lux-white); } /* ── "Book A Room" CTA button ── */ .header-button a { background: transparent !important; color: var(--lux-gold) !important; border: 1px solid var(--lux-gold) !important; border-radius: 0 !important; font-family: "Barlow", sans-serif; font-size: 11px !important; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 10px 22px !important; transition: background 0.3s ease, color 0.3s ease; } .header-button a:hover, .header-button a:focus { background: var(--lux-gold) !important; color: var(--lux-ink) !important; border-color: var(--lux-gold) !important; } /* ── User icon ── */ .header-details a { background: transparent !important; color: var(--lux-white) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; transition: border-color 0.3s ease, color 0.3s ease; } .header-details a:hover { border-color: var(--lux-gold) !important; color: var(--lux-gold) !important; } /* ── Top bar ── */ .top-main { background: var(--lux-navy); border-bottom: 1px solid rgba(201, 169, 110, 0.2); } .top-main .top-text { color: rgba(255, 255, 255, 0.65); font-size: 12px; letter-spacing: 0.08em; } /* ── Mobile hamburger ── */ .toggle-nav button.responsivetoggle { background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: var(--lux-white); padding: 8px 12px; font-size: 15px; border-radius: 0; transition: border-color 0.3s ease; } .toggle-nav button.responsivetoggle:hover { border-color: var(--lux-gold); color: var(--lux-gold); } /* ── Mobile sidenav ── */ #mySidenav.nav.sidenav { background: var(--lux-ink); padding-top: 70px; } #mySidenav .main-navigation a { font-size: 14px; padding: 14px 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); text-transform: uppercase; letter-spacing: 0.1em; } a.closebtn { color: var(--lux-white) !important; font-size: 22px; top: 20px !important; right: 20px !important; } /* ============================================================ 4. HERO SECTION — Full-bleed, 100vh, photography-first ============================================================ */ /* Remove margin, radius, constrained height */ #slider { position: relative; margin: 0 !important; padding: 0; background: var(--lux-ink); height: 100vh; min-height: 620px; overflow: hidden; } /* Inner wrapper matches hero height */ #slider .main-sliders, .main-slider-inner-box { height: 100vh; min-height: 620px; position: relative; } /* Full-bleed image — override legacy style.css fixed height / border-radius */ #slider img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; border-radius: 0 !important; opacity: 1 !important; visibility: visible !important; display: block !important; } /* Dark scrim over image */ .main-slider-inner-box::before { content: ''; position: absolute; inset: 0; background: var(--lux-overlay); z-index: 1; pointer-events: none; } /* ── Hero text — bottom-left editorial placement ── */ #slider .main-inner-text { position: absolute !important; top: auto !important; left: 8% !important; right: auto !important; bottom: 24% !important; transform: none !important; text-align: left; z-index: 2; max-width: 680px; } /* Eyebrow line (slider sub-text / .slider-content) */ #slider .main-inner-text .slider-content { display: block; color: var(--lux-gold) !important; font-family: "Barlow", sans-serif; font-size: 11px !important; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 16px; margin-top: 0; opacity: 0.95; } /* Hero H1 */ #slider .main-inner-text h1 { color: var(--lux-white) !important; font-family: "Cormorant Garamond", "Cormorant", serif; font-size: clamp(42px, 5.5vw, 72px) !important; font-weight: 300 !important; line-height: 1.08; margin: 0; letter-spacing: 0.02em; } /* Thin gold rule below H1 */ #slider .main-inner-text h1::after { content: ''; display: block; width: 56px; height: 1px; background: var(--lux-gold); margin-top: 22px; } /* Fallback: when no slider image set, hero stays dark */ #slider .main-slider-content-box { position: relative; z-index: 2; } /* ============================================================ 5. BOOKING SEARCH PANEL — Full-width dark bar at hero bottom ============================================================ */ /* Reanchor to bottom of hero, full-width */ .main-form-div { position: absolute !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; width: 100%; z-index: 10; } /* Hero booking card uses its own layout — not the dark bar */ #lux-hero-slider .lux-hero-booking-form-slot .form-sec-slider { display: block; width: 100%; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; box-shadow: none !important; border-top: none !important; padding: 0 !important; } /* Dark frosted bar */ .form-sec-slider { display: block; width: 100%; background: rgba(15, 25, 35, 0.90) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 0 !important; box-shadow: none !important; outline: none !important; padding: 0 !important; border-top: 1px solid rgba(201, 169, 110, 0.2); } /* Horizontal flex layout for form fields */ .form-sec-slider .mphb_sc_search-form { display: flex !important; align-items: stretch; flex-wrap: nowrap; gap: 0 !important; max-width: 1200px; margin: 0 auto; } /* Each field column */ .form-sec-slider .mphb_sc_search-form__field { flex: 1; border-right: 1px solid rgba(255, 255, 255, 0.07) !important; padding: 20px 28px !important; position: relative; } /* Submit field — no flex-grow, right-anchored */ .form-sec-slider .mphb_sc_search-form__field:last-child { flex: 0 0 auto; border-right: none !important; padding: 0 !important; display: flex; align-items: stretch; } /* Gold uppercase field labels */ .form-sec-slider label { display: block; color: var(--lux-gold) !important; font-family: "Barlow", sans-serif; font-size: 9px !important; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 6px; } /* Hide required field asterisk */ .form-sec-slider label abbr[title] { display: none; } /* Input and select values — white Cormorant */ .form-sec-slider input[type="text"], .form-sec-slider select { background: transparent !important; border: none !important; outline: none !important; color: var(--lux-white) !important; font-family: "Cormorant Garamond", "Cormorant", serif; font-size: 18px !important; font-weight: 400; padding: 0 !important; width: 100%; cursor: pointer; } /* Dropdown option colors */ .form-sec-slider select option { background: var(--lux-navy); color: var(--lux-white); } /* Adults / children icon circles — remove */ .form-sec-slider .mphb_sc_search-check-in-date::before, .form-sec-slider .mphb_sc_search-check-out-date::before, .form-sec-slider p.mphb_sc_search-adults::before, .form-sec-slider p.mphb_sc_search-children::before { display: none !important; } /* Remove spacing offsets from icon circles */ .form-sec-slider p.mphb_sc_search-adults, .form-sec-slider p.mphb_sc_search-children { padding: 0 !important; position: static !important; } /* Hide required tip */ .form-sec-slider p.mphb-required-fields-tip { display: none !important; } /* Wrapper paragraph margin reset */ .mphb_sc_search-wrapper p { margin-bottom: 0; } .form-sec-slider br { display: none; } /* Submit button — gold fill */ .form-sec-slider p.mphb_sc_search-submit-button-wrapper { margin: 0; display: flex; align-items: stretch; } .form-sec-slider p.mphb_sc_search-submit-button-wrapper .button { background: var(--lux-gold) !important; color: var(--lux-ink) !important; border: none !important; border-radius: 0 !important; padding: 0 44px !important; font-family: "Barlow", sans-serif; font-size: 11px !important; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; white-space: nowrap; height: 100%; transition: background 0.3s ease, color 0.3s ease; } .form-sec-slider p.mphb_sc_search-submit-button-wrapper .button:hover { background: var(--lux-white) !important; color: var(--lux-ink) !important; } /* MotoPress datepicker — style to match dark theme */ .datepick-nav, .datepick-ctrl { background-color: var(--lux-navy) !important; } .mphb-calendar td .mphb-available-date { background: var(--lux-gold) !important; } /* ============================================================ 6. ACCOMMODATION SECTION — Ivory, editorial grid ============================================================ */ /* Section wrapper */ #category-section { background: var(--lux-ivory) !important; border-radius: 0 !important; margin: 0 !important; padding: 80px 0 100px; } /* Section heading block — reorder eyebrow above H2 via flex */ #category-section .heading-expert-wrap { text-align: center; margin-bottom: 56px; display: flex; flex-direction: column; align-items: center; } /* Eyebrow (the "small title" p.post-title) — order:1 puts it above H2 */ #category-section .heading-expert-wrap .post-title { order: 1; font-size: 11px !important; font-family: "Barlow", sans-serif; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--lux-gold) !important; margin-bottom: 12px; } /* Main section H2 — order:2 puts it below eyebrow */ #category-section .heading-expert-wrap h2 { order: 2; font-family: "Cormorant Garamond", "Cormorant", serif; font-size: 48px; font-weight: 300; color: var(--lux-ink); letter-spacing: 0.02em; margin: 0; line-height: 1.15; } /* Thin gold rule under heading */ #category-section .heading-expert-wrap h2::after { content: ''; display: block; width: 48px; height: 1px; background: var(--lux-gold); margin: 18px auto 0; } /* ── Card grid ── */ .house-villa-category-sec { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--lux-stone); } /* ── Individual card ── */ #category-section .property-item { background: var(--lux-white) !important; border-radius: 0 !important; box-shadow: none !important; border-right: 1px solid var(--lux-stone); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.45s ease; position: relative; } #category-section .property-item:last-child { border-right: none; } #category-section .property-item:hover { transform: translateY(-5px); z-index: 2; box-shadow: 0 12px 40px rgba(15, 25, 35, 0.12) !important; } /* ── Card image ── */ #category-section .img-box { border-radius: 0 !important; overflow: hidden; aspect-ratio: 4 / 3; height: auto; width: 100%; } #category-section .img-box img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; transition: transform 0.65s ease; display: block; } #category-section .property-item:hover .img-box img { transform: scale(1.05); } /* ── Card body ── */ #category-section .post-main-detail { padding: 22px 22px 0; flex: 1; display: flex; flex-direction: column; } /* Room title */ #category-section .property-title { font-size: 1rem; font-weight: 400; margin: 0 0 6px; } #category-section .property-title a { font-family: "Cormorant Garamond", "Cormorant", serif; font-size: 24px !important; font-weight: 400; color: var(--lux-ink) !important; letter-spacing: 0.01em; line-height: 1.25; transition: color 0.3s ease; } #category-section .property-title a:hover { color: var(--lux-gold) !important; } /* Location */ #category-section .property-location { color: var(--lux-mist) !important; font-size: 12px !important; font-weight: 400; letter-spacing: 0.06em; margin-bottom: 12px; } #category-section .property-location i { color: var(--lux-mist) !important; opacity: 0.5; font-size: 10px; } /* Specs row (adults, area, facilities) */ #category-section .two-col-post { background: var(--lux-ivory) !important; border-radius: 0 !important; border-top: 1px solid var(--lux-stone); border-bottom: 1px solid var(--lux-stone); margin-top: auto; padding: 12px 22px; } #category-section .two-col-post .main-post-detail span { color: var(--lux-mist) !important; font-size: 11px !important; letter-spacing: 0.04em; } #category-section .two-col-post .main-post-detail i { color: var(--lux-mist) !important; opacity: 0.45; font-size: 11px; } /* Facility tags */ #category-section .room-facility .facility-list span { font-size: 11px; color: var(--lux-mist); margin-right: 10px; } #category-section .room-facility .facility-list span i { color: var(--lux-gold); opacity: 0.8; } /* Price (rendered by mphb_tmpl_the_room_type_default_price) */ #category-section .price-meta { font-family: "Cormorant Garamond", "Cormorant", serif; font-size: 22px !important; color: var(--lux-gold) !important; font-weight: 500; letter-spacing: 0.02em; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; text-align: right; width: auto; } /* "View Details" button */ #category-section .room-btn { margin-top: 0; padding: 0 22px 22px; } #category-section .view-details-btn { display: block; width: 100%; text-align: center; padding: 13px 20px; background: transparent !important; color: var(--lux-ink) !important; border: 1px solid var(--lux-stone) !important; border-radius: 0 !important; font-family: "Barlow", sans-serif; font-size: 10px !important; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } #category-section .view-details-btn:hover, #category-section .view-details-btn:focus { background: var(--lux-ink) !important; color: var(--lux-white) !important; border-color: var(--lux-ink) !important; } /* ============================================================ 7. FOOTER — Dark, editorial ============================================================ */ #footer.site-footer { background: var(--lux-ink) !important; color: rgba(255, 255, 255, 0.65); padding: 72px 0 0; } #footer .widget-title { font-family: "Barlow", sans-serif; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--lux-gold); font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 14px; margin-bottom: 20px; } #footer .widget a { color: rgba(255, 255, 255, 0.55); text-decoration: none; font-size: 14px; line-height: 2.6; transition: color 0.3s ease; } #footer .widget a:hover { color: var(--lux-white); text-decoration: none; } #footer .widget li { list-style: none; border-bottom: none; } #footer .widget ul { padding-left: 0; margin: 0; } #footer p, #footer .widget p, #footer .textwidget p { color: rgba(255, 255, 255, 0.45); font-size: 14px; line-height: 1.9; } #footer .widget.widget_block.widget_text a { color: rgba(255, 255, 255, 0.55); text-decoration: underline; } .site-info { border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 20px 0; margin-top: 50px; background: var(--lux-ink) !important; } .site-info p { font-size: 11px !important; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.28) !important; text-align: center; margin: 0; } .site-info a { color: rgba(255, 255, 255, 0.35); text-decoration: none; } .site-info a:hover { color: var(--lux-gold); } /* Return-to-top button */ .return-to-header { background: var(--lux-ink); } #return-to-top { background: var(--lux-gold); color: var(--lux-ink); border-radius: 0; width: 44px; height: 44px; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; } #return-to-top:hover { background: var(--lux-gold-light); } /* ============================================================ 8. MOTOPRESS INTEGRATION — Style only, zero logic change ============================================================ */ /* Reserve button on single room page */ input.mphb-reserve-btn.button { background: var(--lux-gold) !important; border-color: var(--lux-gold) !important; border-radius: 0 !important; font-family: "Barlow", sans-serif; font-size: 11px !important; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 14px 40px !important; transition: background 0.3s ease, border-color 0.3s ease; } input.mphb-reserve-btn.button:hover { background: var(--lux-ink) !important; border-color: var(--lux-ink) !important; color: var(--lux-white) !important; } /* Available date highlight */ .mphb-calendar td .mphb-available-date { background: var(--lux-gold) !important; } /* Datepicker navigation */ .datepick-nav { background-color: var(--lux-navy) !important; } .datepick-ctrl { background-color: var(--lux-ink) !important; } /* Single room page price */ .room-price .mphb-regular-price, .room-price .mphb-price-period { font-family: "Cormorant Garamond", "Cormorant", serif; color: var(--lux-gold); font-size: 28px; font-weight: 500; letter-spacing: 0.02em; } /* ============================================================ 9. PRELOADER — Minimal dark ============================================================ */ .loader { background: var(--lux-ink); } .center { border-color: rgba(255, 255, 255, 0.08); } .center1 { border-left-color: var(--lux-gold); border-top-color: var(--lux-gold); } .center2 { border-left-color: var(--lux-gold); border-top-color: var(--lux-gold); } .center1 .ring::before, .center2 .ring::before { background: var(--lux-gold); } /* ============================================================ 10. ANIMATION SYSTEM ============================================================ */ @keyframes lux-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes lux-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Scroll-triggered elements — hidden until JS adds .is-visible */ .lux-animate { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--lux-delay, 0s); } .lux-animate.is-visible { opacity: 1; transform: translateY(0); } /* Stagger on card grid — nth-child within .house-villa-category-sec */ .house-villa-category-sec .lux-animate:nth-child(1) { --lux-delay: 0s; } .house-villa-category-sec .lux-animate:nth-child(2) { --lux-delay: 0.10s; } .house-villa-category-sec .lux-animate:nth-child(3) { --lux-delay: 0.20s; } .house-villa-category-sec .lux-animate:nth-child(4) { --lux-delay: 0s; } .house-villa-category-sec .lux-animate:nth-child(5) { --lux-delay: 0.10s; } .house-villa-category-sec .lux-animate:nth-child(6) { --lux-delay: 0.20s; } /* Hero text — immediate fade-in on page load */ .lux-hero-animate { animation: lux-fade-in 1.4s ease forwards; animation-delay: 0.4s; opacity: 0; } /* ============================================================ 11. RESPONSIVE ============================================================ */ /* ≤ 1200px — two-column cards */ @media (max-width: 1200px) { .house-villa-category-sec { grid-template-columns: repeat(2, 1fr) !important; } #category-section .property-item:nth-child(2) { border-right: none; } #category-section .property-item:nth-child(even) { border-right: none; } #category-section .property-item:nth-child(odd):not(:last-child) { border-right: 1px solid var(--lux-stone); } } /* ≤ 992px — booking panel wraps */ @media (max-width: 992px) { .form-sec-slider .mphb_sc_search-form { flex-wrap: wrap !important; } .form-sec-slider .mphb_sc_search-form__field { flex: 1 1 48%; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .form-sec-slider .mphb_sc_search-form__field:last-child { flex: 1 1 100% !important; padding: 0 !important; } .form-sec-slider p.mphb_sc_search-submit-button-wrapper .button { width: 100%; padding: 16px !important; } #slider .main-inner-text { left: 6% !important; right: 6% !important; bottom: 28% !important; } } /* ≤ 768px — single column cards, mobile hero */ @media (max-width: 768px) { :root { --lux-header-h: 72px; } /* Hero: shorter, let booking form sit below */ #slider { height: auto !important; overflow: visible !important; } #slider .main-sliders, .main-slider-inner-box { height: 70vh !important; min-height: 480px; } /* Booking panel: exit absolute flow, stack below hero */ .main-form-div { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; } .form-sec-slider .mphb_sc_search-form { flex-direction: column !important; } .form-sec-slider .mphb_sc_search-form__field { flex: 1 1 100%; border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } #slider .main-inner-text { left: 5% !important; right: 5% !important; bottom: 12% !important; } #slider .main-inner-text h1 { font-size: clamp(32px, 8vw, 48px) !important; } /* Cards: single column */ .house-villa-category-sec { grid-template-columns: 1fr !important; } #category-section .property-item { border-right: none !important; border-bottom: 1px solid var(--lux-stone); } #category-section { padding: 60px 0 80px; } #category-section .heading-expert-wrap h2 { font-size: 36px; } } /* ≤ 480px */ @media (max-width: 480px) { #slider .main-inner-text h1 { font-size: clamp(28px, 9vw, 38px) !important; } #slider .main-inner-text .slider-content { font-size: 10px !important; letter-spacing: 0.2em; } .header-button { display: none; /* hide CTA on very small screens, nav replaces it */ } } /* ============================================================ LUXURY HERO CAROUSEL Replaces the single-image hero with a 5-slide (n-slide) carousel. PHP auto-detects all JPGs in assets/images/hero-images/ at render time. JS (luxury-effects.js) manages sliding, clones, autoplay, and swipe. ============================================================ */ /* #slider base — ensure relative positioning for absolute children */ #slider.lux-hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; background: var(--lux-ink); margin: 0 !important; padding: 0; } /* Carousel wrapper fills #slider */ .lux-carousel-wrapper { position: relative; overflow: hidden; width: 100%; min-height: 100vh; height: 100vh; z-index: 0; } /* Fallback when folder has no images */ .lux-carousel-wrapper.lux-no-image { background: var(--lux-ink); } /* Sliding track — flex row; JS sets pixel widths + translateX */ .lux-carousel-track { display: flex; height: 100vh; min-height: 100vh; will-change: transform; } /* Individual slide */ .lux-carousel-slide, .lux-hero-slide, .hero-slide, .lux-slide { position: relative; flex-shrink: 0; min-width: 100%; width: 100%; height: 100vh !important; min-height: 100vh; overflow: hidden; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* Slide image — must sit above slide bg, below overlay */ .lux-carousel-slide img, .lux-hero-slide img, .hero-slide img, #slider .lux-carousel-slide img, #slider .lux-hero-slide-img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center !important; opacity: 1 !important; visibility: visible !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; border-radius: 0 !important; pointer-events: none; transform: none !important; } /* Per-slide dark luxury scrim */ .lux-slide-overlay { position: absolute; inset: 0; background: rgba(10, 15, 25, 0.45); z-index: 1 !important; pointer-events: none; opacity: 1 !important; visibility: visible !important; } /* Hero UI above overlay */ .lux-hero-content, .lux-arrow, .lux-carousel-dots { z-index: 5 !important; } /* ── Hero text (inside .lux-carousel-wrapper, above overlay) ── */ .lux-hero-content { position: absolute; bottom: 27%; left: 8%; right: auto; z-index: 5; max-width: 640px; text-align: left; } /* Eyebrow label */ .lux-eyebrow { display: block; color: var(--lux-gold); font-family: "Barlow", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; margin-top: 0; margin-bottom: 14px; opacity: 0.95; } /* Main headline */ .lux-hero-content h1 { color: var(--lux-white) !important; font-family: "Cormorant Garamond", "Cormorant", serif; font-size: clamp(40px, 5.5vw, 70px) !important; font-weight: 300 !important; line-height: 1.08; margin: 0; letter-spacing: 0.02em; text-shadow: 0 2px 24px rgba(10, 15, 25, 0.55); } /* Gold underline rule */ .lux-hero-content h1::after { content: ''; display: block; width: 52px; height: 1px; background: var(--lux-gold); margin-top: 20px; } /* ── Navigation dots ── */ .lux-carousel-dots { position: absolute; bottom: 112px; /* above booking panel */ left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; z-index: 5; padding: 0; } .lux-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); padding: 0; cursor: pointer; flex-shrink: 0; transition: background 0.35s ease, border-color 0.35s ease, width 0.35s ease, border-radius 0.35s ease; } .lux-dot.is-active { width: 24px; border-radius: 4px; background: var(--lux-gold); border-color: var(--lux-gold); } .lux-dot:hover:not(.is-active) { border-color: var(--lux-gold); background: rgba(201, 169, 110, 0.22); } /* ── Prev / Next arrows ── */ .lux-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(10, 15, 25, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(201, 169, 110, 0.35); border-radius: 50%; color: var(--lux-gold); cursor: pointer; font-size: 14px; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .lux-arrow--prev { left: 32px; } .lux-arrow--next { right: 32px; } .lux-arrow:hover { background: var(--lux-gold); border-color: var(--lux-gold); color: var(--lux-ink); transform: translateY(-50%) scale(1.08); } .lux-arrow:focus-visible { outline: 2px solid var(--lux-gold); outline-offset: 3px; } /* Booking panel on top of everything */ #slider .main-form-div { z-index: 10; } /* ── Responsive — carousel ── */ /* ≤ 768px: wrapper becomes a block so the booking form flows beneath */ @media (max-width: 768px) { #slider.lux-hero { height: auto !important; overflow: hidden !important; min-height: 440px !important; } .lux-carousel-wrapper { position: relative !important; inset: auto !important; width: 100% !important; height: 70svh !important; min-height: 440px !important; overflow: hidden !important; } .lux-carousel-track { height: 70svh !important; min-height: 440px !important; } .lux-carousel-slide, .lux-hero-slide, .hero-slide { height: 70svh !important; min-height: 440px !important; } /* Keep hero text inside the wrapper on mobile */ .lux-hero-content { bottom: 22%; left: 5%; right: 5%; max-width: 100%; } .lux-hero-content h1 { font-size: clamp(30px, 8vw, 48px) !important; } .lux-eyebrow { font-size: 10px; letter-spacing: 0.22em; } /* Dots closer to bottom of image area */ .lux-carousel-dots { bottom: 18px; } /* Smaller arrows on mobile */ .lux-arrow { width: 42px; height: 42px; font-size: 12px; } .lux-arrow--prev { left: 14px; } .lux-arrow--next { right: 14px; } /* Booking form flows normally below image */ #slider .main-form-div { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; width: 100%; } } /* ≤ 480px */ @media (max-width: 480px) { .lux-carousel-wrapper { height: 60svh !important; min-height: 360px !important; } .lux-carousel-track { height: 60svh !important; min-height: 360px !important; } .lux-carousel-slide, .lux-hero-slide, .hero-slide { height: 60svh !important; min-height: 360px !important; } .lux-hero-content h1 { font-size: clamp(26px, 9vw, 36px) !important; } .lux-arrow { display: none; /* arrows hidden on very small screens; swipe + dots suffice */ } .lux-carousel-dots { bottom: 12px; gap: 8px; } } /* ============================================================ ACCOMMODATION TYPES — Homepage section ============================================================ */ .lux-acc-section { padding: 100px 0 120px; background: var(--lux-ivory); } /* Section header */ .lux-acc-header { text-align: center; margin-bottom: 64px; padding: 0 24px; } .lux-acc-header .lux-eyebrow { margin-bottom: 10px; } .lux-acc-header h2 { font-family: "Cormorant Garamond", "Cormorant", serif; font-size: clamp(32px, 4vw, 52px); font-weight: 300; color: var(--lux-ink); letter-spacing: 0.02em; margin: 0; line-height: 1.1; } .lux-section-rule { width: 48px; height: 1px; background: var(--lux-gold); margin: 20px auto 0; } /* 3-column grid */ .lux-acc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1440px; margin: 0 auto; padding: 0 40px; } /* ── Individual card ── */ .lux-acc-card { height: 550px; border-radius: 24px; overflow: hidden; position: relative; box-shadow: 0 8px 40px rgba(10, 15, 25, 0.10); transition: transform 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.48s ease; /* Staggered entrance animation via CSS variable set in PHP */ transition-delay: var(--lux-stagger, 0s); } /* Card lift on hover */ .lux-acc-card:hover { transform: translateY(-12px); box-shadow: 0 28px 70px rgba(10, 15, 25, 0.20); } /* Anchor fills the full card */ .lux-acc-card-link { display: block; height: 100%; text-decoration: none; color: inherit; position: relative; } /* Image layer — fills card */ .lux-acc-card-image { position: absolute; inset: 0; overflow: hidden; } .lux-acc-card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.72s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: block; } /* Subtle image zoom on hover */ .lux-acc-card:hover .lux-acc-card-image img { transform: scale(1.07); } /* Dark gradient overlay */ .lux-acc-card-overlay { position: absolute; inset: 0; background: linear-gradient( 175deg, rgba(10, 15, 25, 0.02) 0%, rgba(10, 15, 25, 0.15) 40%, rgba(10, 15, 25, 0.70) 72%, rgba(10, 15, 25, 0.90) 100% ); } /* Text content — pinned to card bottom */ .lux-acc-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 36px; z-index: 2; } /* Numbered eyebrow */ .lux-acc-card-number { display: block; font-family: "Barlow", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.30em; color: var(--lux-gold); margin-bottom: 10px; } /* Card headline */ .lux-acc-card-content h3 { font-family: "Cormorant Garamond", "Cormorant", serif; font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; color: var(--lux-white) !important; margin: 0 0 12px; letter-spacing: 0.02em; line-height: 1.2; } /* Description */ .lux-acc-card-content p { font-family: "Barlow", sans-serif; font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.70) !important; margin: 0 0 24px; line-height: 1.65; max-width: 280px; } /* "Explore Collection →" button */ .lux-acc-card-btn { display: inline-flex; align-items: center; gap: 10px; font-family: "Barlow", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lux-gold); border-bottom: 1px solid rgba(201, 169, 110, 0.40); padding-bottom: 3px; transition: gap 0.30s ease, border-color 0.30s ease; } .lux-acc-card:hover .lux-acc-card-btn { gap: 18px; border-color: var(--lux-gold); } /* ── Responsive — accommodation grid ── */ /* Tablet: 2 columns */ @media (max-width: 1100px) { .lux-acc-grid { grid-template-columns: repeat(2, 1fr); padding: 0 28px; } .lux-acc-card { height: 480px; } } /* Mobile: 1 column */ @media (max-width: 768px) { .lux-acc-section { padding: 60px 0 80px; } .lux-acc-grid { grid-template-columns: 1fr; padding: 0 20px; } .lux-acc-card { height: 420px; } .lux-acc-header { margin-bottom: 44px; } .lux-acc-card-content { padding: 28px 24px; } } /* ============================================================ INTERNAL PAGE BANNER — About, Services, Pages, Contact ============================================================ */ .external-div.lux-internal-page-banner .featured-image { position: relative !important; width: 100% !important; opacity: 1 !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat; } .external-div.lux-internal-page-banner .featured-image::after { content: ''; position: absolute; inset: 0; background: rgba(10, 15, 25, 0.52); pointer-events: none; } .external-div.lux-internal-page-banner .box-text { z-index: 6; } .external-div.lux-internal-page-banner .box-text h2 { text-shadow: 0 2px 18px rgba(10, 15, 25, 0.55); } @media (max-width: 1000px) { .external-div.lux-internal-page-banner .featured-image { background-attachment: scroll !important; } } /* ============================================================ COLLECTION PAGE TEMPLATE ============================================================ */ /* Hero banner */ .lux-coll-hero { position: relative; height: 72vh; min-height: 520px; display: flex; align-items: flex-end; padding-bottom: 72px; overflow: hidden; background-color: var(--lux-ink); } /* CSS-variable-driven background image */ .lux-coll-hero::before { content: ''; position: absolute; inset: 0; background-image: var(--lux-coll-hero-bg, none); background-size: cover; background-position: center; z-index: 0; } /* Parallax subtle scale on scroll — JS-driven via lux-parallax class (future) */ .lux-coll-hero-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(10, 15, 25, 0.20) 0%, rgba(10, 15, 25, 0.55) 60%, rgba(10, 15, 25, 0.85) 100% ); z-index: 1; } .lux-coll-hero-content { position: relative; z-index: 2; width: 100%; text-align: center; padding: 0 32px; } .lux-coll-hero-content .lux-eyebrow { margin-bottom: 12px; } .lux-coll-hero-content h1 { color: var(--lux-white) !important; font-family: "Cormorant Garamond", "Cormorant", serif; font-size: clamp(40px, 6vw, 72px) !important; font-weight: 300 !important; line-height: 1.08; margin: 0; letter-spacing: 0.02em; } .lux-coll-hero-subtitle { font-family: "Barlow", sans-serif; font-size: 16px; font-weight: 300; color: rgba(255, 255, 255, 0.72) !important; margin: 18px auto 0; max-width: 540px; line-height: 1.6; } /* Availability search bar under hero */ .lux-coll-search-bar { background: var(--lux-ink); } .lux-coll-search-bar .form-sec-slider { border-top: none; } /* Rooms listing section */ .lux-coll-rooms-section { padding: 80px 0 120px; background: var(--lux-ivory); } /* Room grid — auto-fill, at least 340px per card */ .lux-coll-rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 36px; } /* ── Individual room card (collection page) ── */ .lux-room-card { background: var(--lux-white); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(10, 15, 25, 0.07); transition: transform 0.40s ease, box-shadow 0.40s ease; display: flex; flex-direction: column; } .lux-room-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(10, 15, 25, 0.14); } /* Card image */ .lux-room-card-image { overflow: hidden; height: 280px; flex-shrink: 0; } .lux-room-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.60s ease; display: block; } .lux-room-card:hover .lux-room-card-image img { transform: scale(1.05); } /* Card body */ .lux-room-card-body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; } .lux-room-card-location { font-family: "Barlow", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lux-gold) !important; margin: 0 0 10px; } .lux-room-card-title { font-family: "Cormorant Garamond", "Cormorant", serif; font-size: clamp(20px, 2vw, 26px); font-weight: 400; color: var(--lux-ink) !important; margin: 0 0 10px; line-height: 1.2; } .lux-room-card-title a { color: inherit !important; text-decoration: none; } .lux-room-card-title a:hover { color: var(--lux-gold) !important; } .lux-room-card-body .wp-post-image, .lux-room-card-body p { font-family: "Barlow", sans-serif; font-size: 14px; color: var(--lux-mist) !important; margin: 0 0 16px; line-height: 1.65; } /* Specs row (adults, children, area) */ .lux-room-card-specs { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; } .lux-room-card-specs span { font-family: "Barlow", sans-serif; font-size: 12px; color: var(--lux-mist) !important; letter-spacing: 0.04em; } .lux-room-card-specs i { color: var(--lux-gold); margin-right: 4px; } /* Facilities */ .lux-room-card-facilities { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px; padding: 12px 0; border-top: 1px solid var(--lux-stone); } .lux-room-card-facilities span { font-family: "Barlow", sans-serif; font-size: 12px; color: var(--lux-mist) !important; letter-spacing: 0.03em; } .lux-room-card-facilities i { color: var(--lux-gold); margin-right: 4px; } /* MotoPress price */ .lux-room-card-price { margin: 4px 0 12px; font-family: "Barlow", sans-serif; font-size: 13px; color: var(--lux-mist) !important; } .lux-room-card-price strong, .lux-room-card-price .price, .lux-room-card-price .mphb-price { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; color: var(--lux-ink) !important; } /* MotoPress availability calendar — keep default styles, just restrict width */ .lux-room-card-booking { margin: 0 0 18px; } /* "View Details & Book →" CTA */ .lux-room-card-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 24px; background: var(--lux-ink); color: var(--lux-white) !important; font-family: "Barlow", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--lux-ink); border-radius: 0; transition: background 0.30s ease, color 0.30s ease, gap 0.30s ease; align-self: flex-start; } .lux-room-card-cta:hover { background: var(--lux-gold); border-color: var(--lux-gold); color: var(--lux-ink) !important; gap: 16px; } /* Empty-state block */ .lux-coll-empty { text-align: center; padding: 80px 32px; max-width: 560px; margin: 0 auto; color: var(--lux-mist); } .lux-coll-empty i { font-size: 48px; color: var(--lux-gold); margin-bottom: 20px; opacity: 0.6; } .lux-coll-empty h3 { font-family: "Cormorant Garamond", serif; font-size: 28px; font-weight: 300; color: var(--lux-ink); margin: 0 0 12px; letter-spacing: 0.02em; } /* ── Responsive — collection page ── */ @media (max-width: 768px) { .lux-coll-hero { height: 62vh; min-height: 400px; padding-bottom: 40px; } .lux-coll-hero-content h1 { font-size: clamp(32px, 8vw, 48px) !important; } .lux-coll-rooms-section { padding: 48px 0 72px; } .lux-coll-rooms-grid { grid-template-columns: 1fr; } .lux-room-card-image { height: 220px; } } @media (max-width: 480px) { .lux-coll-hero { height: 56vh; } } /* ============================================================ SINGLE ACCOMMODATION UNIT — Luxury detail page ============================================================ */ /* ── Hero ── */ .lux-unit-hero { position: relative; height: 88vh; min-height: 580px; display: flex; align-items: flex-end; padding-bottom: 80px; overflow: hidden; background-color: var(--lux-ink); } .lux-unit-hero::before { content: ''; position: absolute; inset: 0; background-image: var(--lux-unit-hero-bg, none); background-size: cover; background-position: center; z-index: 0; /* Subtle Ken-Burns on load */ animation: lux-unit-kb 18s ease-in-out infinite alternate; } @keyframes lux-unit-kb { from { transform: scale(1.00); } to { transform: scale(1.04); } } .lux-unit-hero-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(10, 15, 25, 0.10) 0%, rgba(10, 15, 25, 0.50) 55%, rgba(10, 15, 25, 0.88) 100% ); z-index: 1; } .lux-unit-hero-content { position: relative; z-index: 2; width: 100%; text-align: center; padding: 0 40px; } .lux-unit-hero-content h1 { color: var(--lux-white) !important; font-family: "Cormorant Garamond", "Cormorant", serif; font-size: clamp(44px, 6.5vw, 80px) !important; font-weight: 300 !important; line-height: 1.06; margin: 12px 0 0; letter-spacing: 0.02em; } .lux-unit-hero-tagline { font-family: "Barlow", sans-serif; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.65) !important; letter-spacing: 0.18em; text-transform: uppercase; margin: 20px auto 0; max-width: 640px; } /* ── Shared section styles ── */ .lux-unit-section { padding: 88px 0 100px; } .lux-unit-section-header { text-align: center; margin-bottom: 52px; } .lux-unit-section-header--left { text-align: left; } .lux-unit-section-header h2 { font-family: "Cormorant Garamond", "Cormorant", serif; font-size: clamp(28px, 3.5vw, 44px); font-weight: 300; color: var(--lux-ink); letter-spacing: 0.02em; margin: 8px 0 0; line-height: 1.1; } .lux-section-rule--left { margin-left: 0; margin-right: auto; } /* ── Gallery section ── */ .lux-unit-gallery-section { background: var(--lux-ivory); } /* CSS masonry via columns */ .lux-gallery-grid { column-count: 3; column-gap: 14px; } .lux-gallery-item { break-inside: avoid; display: block; margin-bottom: 14px; overflow: hidden; border-radius: 10px; cursor: pointer; position: relative; } .lux-gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.50s ease, filter 0.50s ease; } .lux-gallery-item:hover img { transform: scale(1.04); filter: brightness(0.88); } /* Hover overlay hint */ .lux-gallery-item::after { content: '\f00e'; /* fa-search-plus */ font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; color: rgba(255, 255, 255, 0.80); background: rgba(10, 15, 25, 0.30); opacity: 0; transition: opacity 0.35s ease; border-radius: 10px; } .lux-gallery-item:hover::after { opacity: 1; } /* ── Description + details two-column ── */ .lux-unit-details-section { background: var(--lux-white); } .lux-unit-details-grid { display: grid; grid-template-columns: 1fr 380px; gap: 72px; align-items: start; } .lux-unit-description { font-family: "Barlow", sans-serif; font-size: 17px; font-weight: 300; color: var(--lux-mist) !important; line-height: 1.80; margin: 0 0 44px; max-width: 640px; } /* Amenities */ .lux-unit-amenities h3 { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 400; color: var(--lux-ink); letter-spacing: 0.02em; margin: 0 0 22px; } .lux-amenities-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; } .lux-amenities-list li { font-family: "Barlow", sans-serif; font-size: 14px; font-weight: 400; color: var(--lux-mist) !important; display: flex; align-items: center; gap: 10px; } .lux-amenities-list li i { color: var(--lux-gold); font-size: 13px; flex-shrink: 0; } /* Details card (aside) */ .lux-unit-info-card { background: var(--lux-ivory); border: 1px solid var(--lux-stone); border-radius: 16px; padding: 40px 36px; position: sticky; top: 100px; } .lux-unit-info-card .lux-eyebrow { color: var(--lux-gold); margin-bottom: 18px; } .lux-unit-info-list { list-style: none; padding: 0; margin: 0 0 24px; border-bottom: 1px solid var(--lux-stone); padding-bottom: 24px; } .lux-unit-info-list li { font-family: "Barlow", sans-serif; font-size: 15px; font-weight: 400; color: var(--lux-ink) !important; padding: 10px 0; border-top: 1px solid var(--lux-stone); letter-spacing: 0.01em; } .lux-unit-info-list li:first-child { border-top: none; } .lux-unit-info-specs { display: flex; flex-wrap: wrap; gap: 10px 20px; } .lux-unit-info-specs span { font-family: "Barlow", sans-serif; font-size: 12px; font-weight: 500; color: var(--lux-mist) !important; letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; } .lux-unit-info-specs i { color: var(--lux-gold); } /* ── Booking section ── */ .lux-unit-booking-section { background: var(--lux-ink); } .lux-unit-booking-section .lux-unit-section-header .lux-eyebrow { color: var(--lux-gold); } .lux-unit-booking-section .lux-unit-section-header h2 { color: var(--lux-white) !important; } .lux-unit-booking-section .lux-section-rule { background: var(--lux-gold); } .lux-unit-booking-inner { max-width: 840px; margin: 0 auto; } .lux-unit-price { text-align: center; margin-bottom: 36px; } .lux-unit-price .mphb-price, .lux-unit-price strong { font-family: "Cormorant Garamond", serif; font-size: 40px; font-weight: 300; color: var(--lux-white) !important; letter-spacing: 0.01em; } .lux-unit-price .mphb-price-label, .lux-unit-price .price-label { font-family: "Barlow", sans-serif; font-size: 12px; color: rgba(255, 255, 255, 0.55) !important; letter-spacing: 0.15em; text-transform: uppercase; display: block; margin-bottom: 6px; } /* MotoPress availability widget — keep original styles, just constrain width */ .lux-unit-availability { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 12px; padding: 36px; } /* ── Lightbox overlay ── */ .lux-lightbox { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; } .lux-lightbox.is-open { display: flex; } .lux-lightbox-bg { position: absolute; inset: 0; background: rgba(8, 12, 20, 0.96); cursor: pointer; } .lux-lightbox-stage { position: relative; z-index: 1; max-width: 90vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; } .lux-lightbox-img { max-width: 90vw; max-height: 88vh; object-fit: contain; display: block; border-radius: 6px; box-shadow: 0 24px 80px rgba(0,0,0,0.6); } .lux-lb-btn { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--lux-white); cursor: pointer; border-radius: 0; font-size: 20px; transition: background 0.25s, border-color 0.25s; } .lux-lb-btn:hover { background: var(--lux-gold); border-color: var(--lux-gold); color: var(--lux-ink); } .lux-lb-prev { left: 20px; } .lux-lb-next { right: 20px; } .lux-lb-close { position: fixed; top: 20px; right: 20px; z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--lux-white); cursor: pointer; font-size: 20px; border-radius: 0; transition: background 0.25s; } .lux-lb-close:hover { background: rgba(255,255,255,0.18); } .lux-lb-counter { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: "Barlow", sans-serif; font-size: 12px; letter-spacing: 0.18em; color: rgba(255,255,255,0.55); z-index: 2; } /* ── Responsive — single unit ── */ @media (max-width: 1100px) { .lux-unit-details-grid { grid-template-columns: 1fr; gap: 48px; } .lux-unit-info-card { position: static; } } @media (max-width: 768px) { .lux-unit-hero { height: 72vh; min-height: 420px; padding-bottom: 40px; } .lux-unit-hero-content h1 { font-size: clamp(34px, 8vw, 52px) !important; } .lux-gallery-grid { column-count: 2; } .lux-amenities-list { grid-template-columns: 1fr; } .lux-unit-section { padding: 56px 0 64px; } .lux-unit-availability { padding: 24px 18px; } .lux-lb-btn { width: 42px; height: 42px; } } @media (max-width: 480px) { .lux-unit-hero { height: 62vh; } .lux-gallery-grid { column-count: 1; } .lux-lb-prev { left: 8px; } .lux-lb-next { right: 8px; } } /* ============================================================ HOMEPAGE ACCOMMODATION GRID All MotoPress room-type cards — no collection routing. ============================================================ */ .lux-rooms-section { padding: 96px 0 112px; background: var(--lux-ivory); } /* Section header */ .lux-rooms-header { text-align: center; margin-bottom: 60px; } .lux-rooms-header .lux-eyebrow { margin-bottom: 10px; } .lux-rooms-header h2 { font-family: "Cormorant Garamond", "Cormorant", serif; font-size: clamp(32px, 4vw, 52px); font-weight: 300; color: var(--lux-ink); letter-spacing: 0.02em; margin: 0; line-height: 1.1; } .lux-rooms-subtitle { font-family: "Barlow", sans-serif; font-size: 15px; font-weight: 300; color: var(--lux-mist) !important; margin: 12px auto 0; max-width: 540px; line-height: 1.65; } .lux-rooms-empty { grid-column: 1 / -1; text-align: center; color: var(--lux-mist) !important; font-family: "Barlow", sans-serif; padding: 40px 0; } /* 3-column grid */ .lux-rooms-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 32px !important; width: 100% !important; list-style: none; padding: 0; margin: 0; } /* ── Individual room card ── */ .lux-room-card-home { background: var(--lux-white); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(10, 15, 25, 0.07); transition: transform 0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.40s ease; /* Staggered entrance: capped at 5 so later cards don't wait too long */ transition-delay: var(--lux-stagger, 0s); } .lux-room-card-home:hover { transform: translateY(-8px); box-shadow: 0 18px 48px rgba(10, 15, 25, 0.14); } /* Card image */ .lux-room-card-home-image { height: 260px; overflow: hidden; flex-shrink: 0; } .lux-room-card-home-image a { display: block; height: 100%; } .lux-room-card-home-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .lux-room-card-home:hover .lux-room-card-home-image img { transform: scale(1.06); } /* Card body */ .lux-room-card-home-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; } /* Location label */ .lux-room-card-home-location { font-family: "Barlow", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--lux-gold) !important; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; } .lux-room-card-home-location i { font-size: 10px; } /* Room title */ .lux-room-card-home-title { font-family: "Cormorant Garamond", "Cormorant", serif; font-size: clamp(18px, 1.8vw, 22px); font-weight: 400; color: var(--lux-ink) !important; margin: 0 0 14px; line-height: 1.2; letter-spacing: 0.01em; } .lux-room-card-home-title a { color: inherit !important; text-decoration: none; transition: color 0.25s; } .lux-room-card-home-title a:hover { color: var(--lux-gold) !important; } /* Specs row */ .lux-room-card-home-specs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 10px 0; border-top: 1px solid var(--lux-stone); border-bottom: 1px solid var(--lux-stone); } .lux-room-card-home-specs span { font-family: "Barlow", sans-serif; font-size: 12px; font-weight: 400; color: var(--lux-mist) !important; display: flex; align-items: center; gap: 5px; letter-spacing: 0.03em; } .lux-room-card-home-specs i { color: var(--lux-gold); font-size: 11px; } .lux-room-card-home-specs span + span::before, .lux-room-card-specs span + span::before, .lux-unit-info-specs span + span::before { content: '·'; margin-right: 10px; color: var(--lux-mist); opacity: 0.75; font-weight: 400; } /* Facility tags */ .lux-room-card-home-facilities { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 14px; } .lux-room-card-home-facilities span { font-family: "Barlow", sans-serif; font-size: 12px; color: var(--lux-mist) !important; display: flex; align-items: center; gap: 5px; } .lux-room-card-home-facilities i { color: var(--lux-gold); font-size: 11px; } /* MotoPress price */ .lux-room-card-home-price { margin-top: auto; padding-top: 14px; font-family: "Barlow", sans-serif; font-size: 12px; color: var(--lux-mist) !important; letter-spacing: 0.04em; } .lux-room-card-home-price strong, .lux-room-card-home-price .mphb-price, .lux-room-card-home-price .price { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; color: var(--lux-ink) !important; letter-spacing: 0; display: block; } .lux-room-price-contact, .lux-unit-price .lux-room-price-contact { font-family: "Cormorant Garamond", serif; font-size: 20px; font-weight: 500; color: var(--lux-ink) !important; letter-spacing: 0.02em; display: block; } /* "View Details →" CTA */ .lux-room-card-home-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 11px 22px; background: var(--lux-ink); color: var(--lux-white) !important; font-family: "Barlow", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--lux-ink); border-radius: 0; align-self: flex-start; transition: background 0.28s ease, border-color 0.28s ease, color 0.28s ease, gap 0.28s ease; } .lux-room-card-home-btn:hover { background: var(--lux-gold); border-color: var(--lux-gold); color: var(--lux-ink) !important; gap: 16px; } /* ── Responsive — homepage room grid ── */ /* Tablet: 2 columns — only below 900px to preserve 3-col on most laptops */ @media (max-width: 900px) { .lux-rooms-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; } } /* Mobile: 1 column */ @media (max-width: 640px) { .lux-rooms-section { padding: 56px 0 72px; } .lux-rooms-grid { grid-template-columns: 1fr; gap: 20px; } .lux-rooms-header { margin-bottom: 40px; } .lux-room-card-home-image { height: 220px; } } /* ============================================================ LUXE BOOKING BAR — Hero floating search bar ============================================================ */ .luxe-booking-bar { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; width: min(920px, calc(100% - 48px)); height: 76px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 8px 40px rgba(10, 15, 25, 0.22), 0 2px 12px rgba(10, 15, 25, 0.10); padding: 0 8px; } .luxe-booking-field { display: flex; align-items: center; gap: 10px; flex: 1; padding: 0 20px; height: 100%; cursor: pointer; transition: background 0.25s ease; border-radius: 14px; } .luxe-booking-field:hover { background: rgba(201, 169, 110, 0.07); } .luxe-booking-icon { color: var(--lux-gold); font-size: 17px; flex-shrink: 0; width: 22px; text-align: center; line-height: 1; } .luxe-booking-text { display: flex; flex-direction: column; gap: 3px; } .luxe-booking-label { font-family: "Barlow", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lux-ink); opacity: 0.55; line-height: 1; } .luxe-booking-value { font-family: "Barlow", sans-serif; font-size: 14px; font-weight: 400; color: var(--lux-ink); line-height: 1.2; } .luxe-booking-sep { width: 1px; height: 34px; background: rgba(10, 15, 25, 0.12); flex-shrink: 0; } .luxe-booking-button { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; margin-left: 8px; background: #C9956B; color: #fff !important; border-radius: 12px; font-family: "Barlow", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; transition: background 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease; } .luxe-booking-button:hover { background: #b37450; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201, 149, 107, 0.40); color: #fff !important; text-decoration: none !important; } /* * LUXE BOOKING BAR CSS — temporarily disabled. * HTML removed from slider.php to fix carousel stacking context conflict. * Re-enable alongside the PHP template part when ready to integrate. * * .luxe-booking-bar { ... } */ /* ── Hide MotoPress search form inside hero (form PHP is kept intact) ── */ #slider .main-form-div, #slider.lux-hero .main-form-div { display: none !important; } /* Ensure carousel arrows are always clickable above all hero layers */ .lux-arrow { pointer-events: auto !important; z-index: 20 !important; } /* ============================================================ HERO CAROUSEL FIX — final overrides (beats style.css + JS inline) Root cause: height:100% chain collapsed when wrapper was absolute without explicit min-height; legacy #slider img fixed heights ============================================================ */ #slider.lux-hero .lux-carousel-wrapper { position: relative !important; overflow: hidden !important; width: 100% !important; min-height: 100vh !important; height: 100vh !important; } #slider.lux-hero .lux-carousel-track { display: flex !important; height: 100vh !important; min-height: 100vh !important; } #slider.lux-hero .lux-carousel-slide, #slider.lux-hero .lux-hero-slide, #slider.lux-hero .hero-slide { position: relative !important; min-width: 100% !important; height: 100vh !important; min-height: 100vh !important; overflow: hidden !important; } #slider.lux-hero .lux-carousel-slide img, #slider.lux-hero .lux-hero-slide-img, #slider.lux-hero img, #slider.lux-hero .carousel img, .hero img, .carousel img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center !important; opacity: 1 !important; visibility: visible !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; border-radius: 0 !important; transform: none !important; } #slider.lux-hero .lux-slide-overlay { z-index: 1 !important; } #slider.lux-hero .lux-hero-content, #slider.lux-hero .lux-arrow, #slider.lux-hero .lux-carousel-dots { z-index: 5 !important; } @media (max-width: 768px) { #slider.lux-hero .lux-carousel-wrapper, #slider.lux-hero .lux-carousel-track, #slider.lux-hero .lux-carousel-slide, #slider.lux-hero .lux-hero-slide, #slider.lux-hero .hero-slide { height: 70svh !important; min-height: 440px !important; } } @media (max-width: 480px) { #slider.lux-hero .lux-carousel-wrapper, #slider.lux-hero .lux-carousel-track, #slider.lux-hero .lux-carousel-slide, #slider.lux-hero .lux-hero-slide, #slider.lux-hero .hero-slide { height: 60svh !important; min-height: 360px !important; } }