/* Suppress accidental horizontal scroll site-wide. Applied only to , NOT , so position:sticky elements keep working — putting overflow-x on the documentElement breaks sticky in Chrome/Safari. */ body { overflow-x: clip; } /* Bootstrap 5 Negative Margin Utilities */ /* Add negative margin classes for Bootstrap spacing scale */ .m-n1 { margin: -0.25rem !important; } .m-n2 { margin: -0.5rem !important; } .m-n3 { margin: -1rem !important; } .m-n4 { margin: -1.5rem !important; } .m-n5 { margin: -3rem !important; } .mt-n1 { margin-top: -0.25rem !important; } .mt-n2 { margin-top: -0.5rem !important; } .mt-n3 { margin-top: -1rem !important; } .mt-n4 { margin-top: -1.5rem !important; } .mt-n5 { margin-top: -3rem !important; } .mb-n1 { margin-bottom: -0.25rem !important; } .mb-n2 { margin-bottom: -0.5rem !important; } .mb-n3 { margin-bottom: -1rem !important; } .mb-n4 { margin-bottom: -1.5rem !important; } .mb-n5 { margin-bottom: -3rem !important; } .ms-n1 { margin-left: -0.25rem !important; } .ms-n2 { margin-left: -0.5rem !important; } .ms-n3 { margin-left: -1rem !important; } .ms-n4 { margin-left: -1.5rem !important; } .ms-n5 { margin-left: -3rem !important; } .me-n1 { margin-right: -0.25rem !important; } .me-n2 { margin-right: -0.5rem !important; } .me-n3 { margin-right: -1rem !important; } .me-n4 { margin-right: -1.5rem !important; } .me-n5 { margin-right: -3rem !important; } .mx-n1 { margin-left: -0.25rem !important; margin-right: -0.25rem !important; } .mx-n2 { margin-left: -0.5rem !important; margin-right: -0.5rem !important; } .mx-n3 { margin-left: -1rem !important; margin-right: -1rem !important; } .mx-n4 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; } .mx-n5 { margin-left: -3rem !important; margin-right: -3rem !important; } .my-n1 { margin-top: -0.25rem !important; margin-bottom: -0.25rem !important; } .my-n2 { margin-top: -0.5rem !important; margin-bottom: -0.5rem !important; } .my-n3 { margin-top: -1rem !important; margin-bottom: -1rem !important; } .my-n4 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; } .my-n5 { margin-top: -3rem !important; margin-bottom: -3rem !important; } /* Responsive Negative Margin Utilities - Small (sm) - 576px and up */ @media (min-width: 576px) { .m-sm-n1 { margin: -0.25rem !important; } .m-sm-n2 { margin: -0.5rem !important; } .m-sm-n3 { margin: -1rem !important; } .m-sm-n4 { margin: -1.5rem !important; } .m-sm-n5 { margin: -3rem !important; } .mt-sm-n1 { margin-top: -0.25rem !important; } .mt-sm-n2 { margin-top: -0.5rem !important; } .mt-sm-n3 { margin-top: -1rem !important; } .mt-sm-n4 { margin-top: -1.5rem !important; } .mt-sm-n5 { margin-top: -3rem !important; } .mb-sm-n1 { margin-bottom: -0.25rem !important; } .mb-sm-n2 { margin-bottom: -0.5rem !important; } .mb-sm-n3 { margin-bottom: -1rem !important; } .mb-sm-n4 { margin-bottom: -1.5rem !important; } .mb-sm-n5 { margin-bottom: -3rem !important; } .ms-sm-n1 { margin-left: -0.25rem !important; } .ms-sm-n2 { margin-left: -0.5rem !important; } .ms-sm-n3 { margin-left: -1rem !important; } .ms-sm-n4 { margin-left: -1.5rem !important; } .ms-sm-n5 { margin-left: -3rem !important; } .me-sm-n1 { margin-right: -0.25rem !important; } .me-sm-n2 { margin-right: -0.5rem !important; } .me-sm-n3 { margin-right: -1rem !important; } .me-sm-n4 { margin-right: -1.5rem !important; } .me-sm-n5 { margin-right: -3rem !important; } .mx-sm-n1 { margin-left: -0.25rem !important; margin-right: -0.25rem !important; } .mx-sm-n2 { margin-left: -0.5rem !important; margin-right: -0.5rem !important; } .mx-sm-n3 { margin-left: -1rem !important; margin-right: -1rem !important; } .mx-sm-n4 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; } .mx-sm-n5 { margin-left: -3rem !important; margin-right: -3rem !important; } .my-sm-n1 { margin-top: -0.25rem !important; margin-bottom: -0.25rem !important; } .my-sm-n2 { margin-top: -0.5rem !important; margin-bottom: -0.5rem !important; } .my-sm-n3 { margin-top: -1rem !important; margin-bottom: -1rem !important; } .my-sm-n4 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; } .my-sm-n5 { margin-top: -3rem !important; margin-bottom: -3rem !important; } } /* Responsive Negative Margin Utilities - Medium (md) - 768px and up */ @media (min-width: 768px) { .m-md-n1 { margin: -0.25rem !important; } .m-md-n2 { margin: -0.5rem !important; } .m-md-n3 { margin: -1rem !important; } .m-md-n4 { margin: -1.5rem !important; } .m-md-n5 { margin: -3rem !important; } .mt-md-n1 { margin-top: -0.25rem !important; } .mt-md-n2 { margin-top: -0.5rem !important; } .mt-md-n3 { margin-top: -1rem !important; } .mt-md-n4 { margin-top: -1.5rem !important; } .mt-md-n5 { margin-top: -3rem !important; } .mb-md-n1 { margin-bottom: -0.25rem !important; } .mb-md-n2 { margin-bottom: -0.5rem !important; } .mb-md-n3 { margin-bottom: -1rem !important; } .mb-md-n4 { margin-bottom: -1.5rem !important; } .mb-md-n5 { margin-bottom: -3rem !important; } .ms-md-n1 { margin-left: -0.25rem !important; } .ms-md-n2 { margin-left: -0.5rem !important; } .ms-md-n3 { margin-left: -1rem !important; } .ms-md-n4 { margin-left: -1.5rem !important; } .ms-md-n5 { margin-left: -3rem !important; } .me-md-n1 { margin-right: -0.25rem !important; } .me-md-n2 { margin-right: -0.5rem !important; } .me-md-n3 { margin-right: -1rem !important; } .me-md-n4 { margin-right: -1.5rem !important; } .me-md-n5 { margin-right: -3rem !important; } .mx-md-n1 { margin-left: -0.25rem !important; margin-right: -0.25rem !important; } .mx-md-n2 { margin-left: -0.5rem !important; margin-right: -0.5rem !important; } .mx-md-n3 { margin-left: -1rem !important; margin-right: -1rem !important; } .mx-md-n4 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; } .mx-md-n5 { margin-left: -3rem !important; margin-right: -3rem !important; } .my-md-n1 { margin-top: -0.25rem !important; margin-bottom: -0.25rem !important; } .my-md-n2 { margin-top: -0.5rem !important; margin-bottom: -0.5rem !important; } .my-md-n3 { margin-top: -1rem !important; margin-bottom: -1rem !important; } .my-md-n4 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; } .my-md-n5 { margin-top: -3rem !important; margin-bottom: -3rem !important; } } /* Responsive Negative Margin Utilities - Large (lg) - 992px and up */ @media (min-width: 992px) { .m-lg-n1 { margin: -0.25rem !important; } .m-lg-n2 { margin: -0.5rem !important; } .m-lg-n3 { margin: -1rem !important; } .m-lg-n4 { margin: -1.5rem !important; } .m-lg-n5 { margin: -3rem !important; } .mt-lg-n1 { margin-top: -0.25rem !important; } .mt-lg-n2 { margin-top: -0.5rem !important; } .mt-lg-n3 { margin-top: -1rem !important; } .mt-lg-n4 { margin-top: -1.5rem !important; } .mt-lg-n5 { margin-top: -3rem !important; } .mb-lg-n1 { margin-bottom: -0.25rem !important; } .mb-lg-n2 { margin-bottom: -0.5rem !important; } .mb-lg-n3 { margin-bottom: -1rem !important; } .mb-lg-n4 { margin-bottom: -1.5rem !important; } .mb-lg-n5 { margin-bottom: -3rem !important; } .ms-lg-n1 { margin-left: -0.25rem !important; } .ms-lg-n2 { margin-left: -0.5rem !important; } .ms-lg-n3 { margin-left: -1rem !important; } .ms-lg-n4 { margin-left: -1.5rem !important; } .ms-lg-n5 { margin-left: -3rem !important; } .me-lg-n1 { margin-right: -0.25rem !important; } .me-lg-n2 { margin-right: -0.5rem !important; } .me-lg-n3 { margin-right: -1rem !important; } .me-lg-n4 { margin-right: -1.5rem !important; } .me-lg-n5 { margin-right: -3rem !important; } .mx-lg-n1 { margin-left: -0.25rem !important; margin-right: -0.25rem !important; } .mx-lg-n2 { margin-left: -0.5rem !important; margin-right: -0.5rem !important; } .mx-lg-n3 { margin-left: -1rem !important; margin-right: -1rem !important; } .mx-lg-n4 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; } .mx-lg-n5 { margin-left: -3rem !important; margin-right: -3rem !important; } .my-lg-n1 { margin-top: -0.25rem !important; margin-bottom: -0.25rem !important; } .my-lg-n2 { margin-top: -0.5rem !important; margin-bottom: -0.5rem !important; } .my-lg-n3 { margin-top: -1rem !important; margin-bottom: -1rem !important; } .my-lg-n4 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; } .my-lg-n5 { margin-top: -3rem !important; margin-bottom: -3rem !important; } } /* Responsive Negative Margin Utilities - Extra Large (xl) - 1200px and up */ @media (min-width: 1200px) { .m-xl-n1 { margin: -0.25rem !important; } .m-xl-n2 { margin: -0.5rem !important; } .m-xl-n3 { margin: -1rem !important; } .m-xl-n4 { margin: -1.5rem !important; } .m-xl-n5 { margin: -3rem !important; } .mt-xl-n1 { margin-top: -0.25rem !important; } .mt-xl-n2 { margin-top: -0.5rem !important; } .mt-xl-n3 { margin-top: -1rem !important; } .mt-xl-n4 { margin-top: -1.5rem !important; } .mt-xl-n5 { margin-top: -3rem !important; } .mb-xl-n1 { margin-bottom: -0.25rem !important; } .mb-xl-n2 { margin-bottom: -0.5rem !important; } .mb-xl-n3 { margin-bottom: -1rem !important; } .mb-xl-n4 { margin-bottom: -1.5rem !important; } .mb-xl-n5 { margin-bottom: -3rem !important; } .ms-xl-n1 { margin-left: -0.25rem !important; } .ms-xl-n2 { margin-left: -0.5rem !important; } .ms-xl-n3 { margin-left: -1rem !important; } .ms-xl-n4 { margin-left: -1.5rem !important; } .ms-xl-n5 { margin-left: -3rem !important; } .me-xl-n1 { margin-right: -0.25rem !important; } .me-xl-n2 { margin-right: -0.5rem !important; } .me-xl-n3 { margin-right: -1rem !important; } .me-xl-n4 { margin-right: -1.5rem !important; } .me-xl-n5 { margin-right: -3rem !important; } .mx-xl-n1 { margin-left: -0.25rem !important; margin-right: -0.25rem !important; } .mx-xl-n2 { margin-left: -0.5rem !important; margin-right: -0.5rem !important; } .mx-xl-n3 { margin-left: -1rem !important; margin-right: -1rem !important; } .mx-xl-n4 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; } .mx-xl-n5 { margin-left: -3rem !important; margin-right: -3rem !important; } .my-xl-n1 { margin-top: -0.25rem !important; margin-bottom: -0.25rem !important; } .my-xl-n2 { margin-top: -0.5rem !important; margin-bottom: -0.5rem !important; } .my-xl-n3 { margin-top: -1rem !important; margin-bottom: -1rem !important; } .my-xl-n4 { margin-top: -1.5rem !important; margin-bottom: -1.5rem !important; } .my-xl-n5 { margin-top: -3rem !important; margin-bottom: -3rem !important; } } .main-font { font-family: Urbanist, sans-serif } .alt-font { font-family: Urbanist, sans-serif } .title-font { font-family: Rufina, serif; } html { margin: 0; padding: 0; } body { margin: 0; font-family: Urbanist, sans-serif; font-size: 1rem; color: #2b2b2b; font-weight: 200; line-height: 1.6; letter-spacing: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { margin-bottom: 5px; } a { color: inherit; text-decoration: none; } ::-webkit-scrollbar-track { background-color: #e9edf0; border-left: 1px solid #ededed } ::-webkit-scrollbar { width: 7px; background-color: #385aef } ::-webkit-scrollbar-thumb { background: #385aef } a:active, a:hover { text-decoration: none } a.default:hover { color: inherit !important; } strong, .strong{ font-weight: 600; } .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus, a:active, a:focus, button:active, button:focus { outline: 0; text-decoration: none } /* (Legacy .form-control radius/placeholder overrides removed — handled centrally below) */ .navbar, ::after, ::before, a, button, img, input, span { transition: ease-in-out .2s; -webkit-transition: ease-in-out .2s; -moz-transition: ease-in-out .2s; -ms-transition: ease-in-out .2s; -o-transition: ease-in-out .2s } ul { list-style: none; padding: 0; margin: 0 } .contentArea{ word-break: break-word; } .contentArea ul { list-style: disc; padding-left: 20px; } :focus { outline: 0 } .home-content-wrapper { display: flex; flex-direction: column; gap: 6rem; margin: 6rem 0; } .h1,.h2,.h3,.h4,.h5,.h6, h1,h2,h3,h4,h5,h6 { line-height: 1; font-family: Rufina, serif; } .btn.focus, .btn:focus { box-shadow: none } .no-transition * { transition-timing-function: initial; -moz-transition-timing-function: initial; -webkit-transition-timing-function: initial; -o-transition-timing-function: initial; -ms-transition-timing-function: initial; transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; -o-transition-duration: 0s; -ms-transition-duration: 0s } .opacity-full { opacity: 1 } .opacity-3 { opacity: .3 } .opacity-4 { opacity: .4 } .opacity-5 { opacity: .5 } .opacity-6 { opacity: .6 } .opacity-7 { opacity: .7 } .opacity-8 { opacity: .8 } .opacity-9 { opacity: .9 } .font-weight-100 { font-weight: 100 } .font-weight-300 { font-weight: 300 } .font-weight-500 { font-weight: 500 } .font-weight-600 { font-weight: 600 } .z-index-1 { z-index: 1 } .z-index-2 { z-index: 2 } .z-index-2 { z-index: 3 } .z-index-2 { z-index: 4 } .z-index-2 { z-index: 5 } .small, small { font-size: .650em !important; } .line { display: inline-block; width: 15px; height: 15px; border-radius: var(--radius-lg, 16px); background-color: #fff } .gap-md { gap: 12px; } .right-2 { right: 8px; } .top-0 { top: 0; } .top-2 { top: 8px; } /* Loader */ .lds-ellipsis { display: inline-block; position: relative; width: 64px; height: 64px; } .lds-ellipsis div { position: absolute; top: 27px; width: 11px; height: 11px; border-radius: var(--radius-circle, 50%); background: #fff; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .lds-ellipsis div:nth-child(1) { left: 6px; animation: lds-ellipsis1 0.6s infinite; } .lds-ellipsis div:nth-child(2) { left: 6px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(3) { left: 26px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(4) { left: 45px; animation: lds-ellipsis3 0.6s infinite; } @keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(19px, 0); } } .cursor_pointer { cursor: pointer!important } img.alignleft { float: left; margin: 8px 10px 10px 0; border-radius: var(--radius-xs, 4px) } img.alignright { float: right; margin: 8px 0 10px 8px; border-radius: var(--radius-xs, 4px) } .bg_cover { background-size: cover!important } .imgSlider { max-width: 700px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px } .videoContainer img { opacity: 0.6; } .videoContainer .playButton{ height: 100%; width: 100%; color: #fff; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .videoContainer .playButton svg{ border: 1px solid white; border-radius: var(--radius-circle, 50%); width: 70px; height: 70px; padding: 15px; } .imgGallery { margin-top: 10px; margin-bottom: 10px } /* ========================================== Messaging Hub - FAB + Options + Modal ========================================== */ /* --- FAB Container --- */ .messaging-hub { position: fixed; right: 16px; bottom: 16px; z-index: 9998; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 12px; pointer-events: none; } .messaging-hub > * { pointer-events: auto; } /* --- Backdrop --- */ .messaging-hub-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.18); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: -1; } .messaging-hub.is-open .messaging-hub-backdrop { opacity: 1; visibility: visible; } /* --- Main FAB Button --- */ .messaging-hub-fab { width: 56px; height: 56px; border-radius: var(--radius-lg, 16px); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--brand-pri-text, #fff); font: inherit; background: linear-gradient(135deg, var(--brand-pri, #3264f5), var(--brand-sec, #7202bb)); position: relative; box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--brand-pri, #3264f5) 60%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--brand-sec, #7202bb) 50%, transparent); transition: transform var(--duration-base, 0.3s) var(--ease-emphasized, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow var(--duration-base, 0.3s) ease, filter var(--duration-base, 0.3s) ease; z-index: var(--z-base, 2); -webkit-tap-highlight-color: transparent; } .messaging-hub-fab:hover { transform: scale(1.08); filter: brightness(1.08); box-shadow: 0 12px 32px -6px color-mix(in srgb, var(--brand-pri, #3264f5) 70%, transparent), 0 6px 14px -4px color-mix(in srgb, var(--brand-sec, #7202bb) 60%, transparent); } .messaging-hub-fab:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.8); outline-offset: 3px; } /* FAB icon transitions */ .messaging-hub-fab-icon { position: absolute; transition: transform 0.35s var(--ease-emphasized, cubic-bezier(0.34, 1.56, 0.64, 1)), opacity var(--duration-fast, 0.25s) ease; } .messaging-hub-fab-icon--chat { opacity: 1; transform: scale(1) rotate(0deg); } .messaging-hub-fab-icon--close { opacity: 0; transform: scale(0.3) rotate(-90deg); } .messaging-hub.is-open .messaging-hub-fab-icon--chat { opacity: 0; transform: scale(0.3) rotate(90deg); } .messaging-hub.is-open .messaging-hub-fab-icon--close { opacity: 1; transform: scale(1) rotate(0deg); } /* --- FAB Options (fly-out menu) --- */ .messaging-hub-options { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; pointer-events: none; } .messaging-hub.is-open .messaging-hub-options { pointer-events: auto; } /* --- Individual Option --- */ .messaging-hub-option { display: flex; align-items: center; gap: 10px; border: none; cursor: pointer; background: transparent; padding: 0; font: inherit; opacity: 0; transform: translateY(20px) scale(0.8); transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-tap-highlight-color: transparent; } /* Staggered entrance */ .messaging-hub.is-open .messaging-hub-option:nth-child(1) { transition-delay: 0.04s; } .messaging-hub.is-open .messaging-hub-option:nth-child(2) { transition-delay: 0.1s; } .messaging-hub.is-open .messaging-hub-option:nth-child(3) { transition-delay: 0.16s; } .messaging-hub.is-open .messaging-hub-option { opacity: 1; transform: translateY(0) scale(1); } /* Staggered exit (reverse order, faster) */ .messaging-hub-option:nth-child(3) { transition-delay: 0s; } .messaging-hub-option:nth-child(2) { transition-delay: 0.03s; } .messaging-hub-option:nth-child(1) { transition-delay: 0.06s; } /* Option icon circle */ .messaging-hub-option-icon { width: 46px; height: 46px; border-radius: var(--radius-circle, 50%); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease; flex-shrink: 0; } .messaging-hub-option:hover .messaging-hub-option-icon, .messaging-hub-option:focus-visible .messaging-hub-option-icon { transform: scale(1.12); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22); } .messaging-hub-option:focus-visible { outline: none; } .messaging-hub-option:focus-visible .messaging-hub-option-icon { outline: 3px solid rgba(255, 255, 255, 0.9); outline-offset: 2px; } /* Option label pill */ .messaging-hub-option-label { background: #fff; color: #333; font-family: inherit; font-size: 0.95rem; letter-spacing: .01em; padding: 6px 14px; border-radius: var(--radius-sm, 8px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(8px); transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s; } .messaging-hub.is-open .messaging-hub-option-label { opacity: 1; transform: translateX(0); } /* Option colors */ .messaging-hub-option--whatsapp .messaging-hub-option-icon { background: #25D366; } .messaging-hub-option--telegram .messaging-hub-option-icon { background: #0088cc; } .messaging-hub-option--contact .messaging-hub-option-icon { background: #6c63ff; } /* ========================================== Messaging Modal (shared WhatsApp/Telegram) ========================================== */ /* ============================================================ Modal — centralized ------------------------------------------------------------ Single source of truth for any modal in the theme. Markup: .hf-modal .hf-modal__overlay .hf-modal__panel .hf-modal__header (.hf-modal__close inside) .hf-modal__body .hf-modal__footer (optional) Behavior: - Desktop: centered card, soft shadow, scale-fade entry - Mobile (<640px): bottom-sheet — slides up from bottom, rounded top corners, full width, drag-friendly look - Locks horizontal scroll, allows internal vertical scroll ============================================================ */ .hf-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; pointer-events: auto; } .hf-modal[hidden], .hf-modal[aria-hidden="true"] { display: none; } .hf-modal__overlay { position: absolute; inset: 0; background: rgba(15, 15, 20, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: hfModalOverlayIn .3s ease forwards; } .hf-modal__panel { position: relative; z-index: 1; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: #fff; border-radius: var(--radius-xl, 20px); box-shadow: 0 30px 70px -20px rgba(15, 15, 25, .4), 0 8px 24px rgba(15, 15, 25, .14); overflow: hidden; display: flex; flex-direction: column; animation: hfModalIn .4s cubic-bezier(.22, 1.2, .36, 1) forwards; } .hf-modal__panel > * { min-width: 0; } .hf-modal__header { position: relative; display: flex; align-items: center; gap: 14px; padding: 1.1rem 1.4rem; border-bottom: 1px solid #f0ece4; flex-shrink: 0; } .hf-modal__header h1, .hf-modal__header h2, .hf-modal__header h3, .hf-modal__header h4 { flex: 1; margin: 0; font-size: 1.1rem; letter-spacing: -.005em; color: #1f1f1f; line-height: 1.3; min-width: 0; } .hf-modal__icon { width: 38px; height: 38px; border-radius: var(--radius-circle, 50%); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; background: var(--brand-pri, #3264f5); } .hf-modal__close { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-circle, 50%); border: 0; background: transparent; color: #8a8270; font-size: 1.4rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease, transform .25s ease; } .hf-modal__close:hover { background: #f4f1ea; color: #1f1f1f; transform: rotate(90deg); } .hf-modal__close:focus-visible { outline: 2px solid var(--brand-pri, #3264f5); outline-offset: 2px; } .hf-modal__body { padding: 1.5rem 1.4rem 1.6rem; overflow-y: auto; overflow-x: hidden; flex: 1; scrollbar-width: thin; scrollbar-color: #d8d0bf transparent; } .hf-modal__body::-webkit-scrollbar { width: 6px; } .hf-modal__body::-webkit-scrollbar-thumb { background: #d8d0bf; border-radius: var(--radius-2xs, 3px); } .hf-modal__body::-webkit-scrollbar-thumb:hover { background: #b9ad8e; } .hf-modal__footer { padding: 1rem 1.4rem 1.2rem; border-top: 1px solid #f0ece4; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } @keyframes hfModalOverlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes hfModalIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Mobile: bottom-sheet */ @media (max-width: 640px) { .hf-modal { align-items: flex-end; } .hf-modal__panel { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; animation: hfSheetIn .4s cubic-bezier(.22, 1.2, .36, 1) forwards; } .hf-modal__panel::before { content: ""; display: block; width: 42px; height: 4px; margin: 8px auto 0; background: #d8d0bf; border-radius: var(--radius-pill, 999px); flex-shrink: 0; } .hf-modal__header { padding: .9rem 1.2rem; } .hf-modal__body { padding: 1.2rem 1.2rem 1.4rem; } .hf-modal__footer { padding: .8rem 1.2rem 1.1rem; } } @keyframes hfSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hf-modal__overlay, .hf-modal__panel { animation-duration: .01s !important; } .hf-modal__close { transition: none; } } /* ---- Lock body scroll when any hf-modal is open ---- */ body.hf-modal-open { overflow: hidden; } /* ============================================================ .messaging-modal — visual layer over .hf-modal The PHP partial keeps its existing class names; we just add the .hf-modal* classes alongside. The rules below shape only what's specific to the messaging modal (mode tinting, close button alignment, etc.). ============================================================ */ /* (Layout handled centrally by .hf-modal — only mode tinting below) */ /* Mode tinting — header icon picks up platform color via tokens */ .messaging-modal[data-mode="whatsapp"] .hf-modal__icon { background: var(--color-whatsapp, #25D366); } .messaging-modal[data-mode="telegram"] .hf-modal__icon { background: var(--color-telegram, #0088cc); } .messaging-modal[data-mode="contact"] .hf-modal__icon { background: var(--brand-pri, #3264f5); } .messaging-form-group { margin-bottom: 1rem; } /* Messaging modal — inherit the centralized underline animation, but recolor it per active mode by re-binding --brand-pri locally so the input's background-image follows. */ .messaging-modal[data-mode="telegram"] .form-control { --brand-pri: var(--color-telegram, #0088cc); } .messaging-modal[data-mode="whatsapp"] .form-control { --brand-pri: var(--color-whatsapp, #25D366); } .messaging-modal .messaging-form-group { margin-bottom: 18px; } /* Submit button color overrides per mode — re-bind brand colors locally so the global .btn-gradient picks them up automatically without needing !important to fight the gradient. */ .messaging-modal[data-mode="whatsapp"] .btn-gradient { --brand-pri: var(--color-whatsapp, #25D366); --brand-sec: var(--color-whatsapp-hover, #1fb855); } .messaging-modal[data-mode="telegram"] .btn-gradient { --brand-pri: var(--color-telegram, #0088cc); --brand-sec: var(--color-telegram-hover, #006da3); } /* --- Toast notification --- */ .messaging-toast { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--color-fg-strong, #333); color: var(--color-white, #fff); padding: var(--space-3, 12px) var(--space-5, 20px); border-radius: var(--radius-md, 12px); font-size: 0.9rem; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; white-space: nowrap; z-index: 10003; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } .messaging-toast.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .messaging-toast .fa-check-circle { color: #25D366; } /* ========================================== Responsive ========================================== */ @media screen and (max-width: 768px) { .messaging-hub { right: 12px; bottom: 12px; } .messaging-hub-fab { width: 52px; height: 52px; font-size: 24px; } .messaging-hub-option-icon { width: 42px; height: 42px; font-size: 20px; } .messaging-hub-option-label { font-size: 0.8rem; padding: 5px 12px; } .messaging-toast { font-size: 0.8rem; padding: 10px 16px; } } /* Print: hide messaging hub */ @media print { .messaging-hub, .messaging-modal { display: none !important; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .messaging-hub-fab, .messaging-hub-fab-icon, .messaging-hub-option, .messaging-hub-option-icon, .messaging-hub-option-label, .messaging-hub-backdrop, .messaging-modal-content, .messaging-toast { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } .sticky{position: fixed;} .cc-message, .cc-revoke, .cc-window{font-family: Urbanist !important;} .h1Banner { padding-bottom: .5em; max-width: 20em; margin: 0 auto 1.5rem auto } .fontMid { font-size: 1.8rem; font-weight: 300 } #menuSearch { padding: 12px 12px 12px 52px; } p.rate { font-size: 1.25em; font-weight: 400; color: #000; padding: 1.5rem 0 0 0 } .tabTitle { font-size: 1.25em; font-weight: 400; color: #000 } .hoveryImg { position: relative; background-position: center center; width: 100%; background-size: cover; border-radius: var(--radius-xl, 20px); } .hoveryImg.medium { height: 280px; } .hoveryImg .info { position: absolute; width: calc(100% - 110px); height: calc(100% - 110px); left: 55px; top: 55px; text-align: center; border: 1px solid #fff; overflow: hidden; opacity: 0; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .hoveryImg:hover .info { opacity: 1 } .hoveryImg.medium .info { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 16px; border-radius: var(--radius-lg, 16px); } .hoveryImg .info h5 { letter-spacing: 2px; text-transform: uppercase; color: #fff; z-index: 9; position: relative; margin-bottom: 10px } .hoveryImg .info p { font-size: 14px; color: #fff; z-index: 9; position: relative } .hoveryImg .hoveryCap { position: absolute; width: 110%; height: 110%; left: -5%; top: -5%; -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); -webkit-filter: blur(20px); filter: blur(20px); background-position: center center; background-repeat: no-repeat; background-size: cover } @media screen and (max-width:1366px) { .hoveryImg .info { width: calc(100% - 40px); height: calc(100% - 40px); left: 20px; top: 20px; padding-top: 165px } } /* ============================================ Breadcrumbs — minimal, modern ---------------------------------------------- No backgrounds, no pills. Quiet text trail with thin slash separators. Active item carries the eye without shouting. ============================================ */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0; font-family: inherit; font-size: .78rem; font-weight: 400; letter-spacing: .02em; color: #9a9388; line-height: 1; } .breadcrumb-item { display: inline-flex; align-items: center; margin: 0; min-width: 0; } .breadcrumb-item a { position: relative; color: #9a9388; text-decoration: none; padding: 2px 0; transition: color .25s ease; display: inline-block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .breadcrumb-item a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .35s cubic-bezier(.22, 1, .36, 1); opacity: .5; } .breadcrumb-item a:hover, .breadcrumb-item a:focus-visible { color: #1a1a1a; outline: 0; } .breadcrumb-item a:hover::after, .breadcrumb-item a:focus-visible::after { transform: scaleX(1); transform-origin: left center; } /* Active (current page) */ .breadcrumb-item.active a, .breadcrumb li.active a { color: #1a1a1a; font-weight: 500; pointer-events: none; cursor: default; } .breadcrumb-item.active a::after, .breadcrumb li.active a::after { display: none; } /* Separator — thin slash between items */ .breadcrumb-item + .breadcrumb-item::before { content: "/"; margin: 0 .7em; color: #d8d0bf; font-weight: 300; } /* On dark surfaces (hero overlay, transparent forms) — NOT the white breadcrumb bar, which inherits the default dark text colors. */ .page-prominent .breadcrumb, .is-on-dark .breadcrumb { color: rgba(255, 255, 255, .55); } .page-prominent .breadcrumb-item a, .is-on-dark .breadcrumb-item a { color: rgba(255, 255, 255, .55); } .page-prominent .breadcrumb-item a:hover, .page-prominent .breadcrumb-item.active a, .is-on-dark .breadcrumb-item a:hover, .is-on-dark .breadcrumb-item.active a { color: #fff; } .page-prominent .breadcrumb-item + .breadcrumb-item::before, .is-on-dark .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .25); } @media (max-width: 576px) { .breadcrumb { font-size: .72rem; } .breadcrumb-item a { max-width: 14ch; } .breadcrumb-item + .breadcrumb-item::before { margin: 0 .55em; } } .bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .bg-black { background: var(--color-black, #000) } .bg-dark { background-color: var(--color-fg-strong, #1d1d21) !important } /* Map block — error/empty state when no coordinates are configured */ .wp-block-hotelface-map-error { padding: var(--space-5, 20px); background: var(--color-bg-muted, #f8fafc); border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-sm, 8px); text-align: center; color: var(--color-fg-subtle, #64748b); } .gradient-bg1 { background: var(--brand-pri, #3264f5); background: linear-gradient(to right, var(--brand-pri, #3264f5) 2%, var(--brand-sec, #7202bb) 82%); } .main-color { color: var(--brand-pri, #3264f5); } .alt-color { color: #7202bb } .gradient-text1 { background: #3264f5; background: -moz-linear-gradient(left, #3264f5 2%, #7202bb 82%); background: -webkit-linear-gradient(left, #3264f5 2%, #7202bb 82%); background: linear-gradient(to right, #3264f5 2%, #7202bb 82%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } /* Legacy .btn block removed — see centralized button system below (search "Buttons — centralized"). */ .social-icons-simple { margin-bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; } .social-icons-simple li { list-style: none; padding: 0; margin: 0; } /* Remove list style from social icons in Content Gallery block */ .wp-block-hotelface-content-gallery .social-icons-simple, .wp-block-hotelface-content-gallery .social-icons-simple li { list-style: none !important; padding: 0 !important; margin: 0 !important; } .social-icons-simple li a { display: block; font-size: 20px; height: 44px; line-height: 38px; display: flex; align-items: center; justify-content: center; width: 44px; position: relative; z-index: 1; overflow: hidden; -webkit-transition: background-color .5s ease; -o-transition: background-color .5s ease; transition: background-color .5s ease; background-color: #fff; border: 1px solid #ebebeb; transition: all .3s ease-in-out; border-radius: var(--radius-md, 12px); } .social-icons-simple li a svg { transition: all .3s ease-in-out; } .social-icons-simple li a:hover svg { transform: scale(1.1); } .social-youtube { color: #c4302b !important; } .social-youtube:hover { border: 1px solid #4267b2 !important; color: #c4302b !important; } .social-facebook { color: #4267b2 !important; } .social-facebook:hover { color: #4267b2 !important; border: 1px solid #4267b2 !important } .social-twitter { color: #1da1f2 !important; } .social-twitter:hover { color: #1da1f2 !important; border: 1px solid #1da1f2 !important; } .social-instagram { color: #c32aa3 !important; } .social-instagram:hover { color: #c32aa3 !important; border: 1px solid #c32aa3 !important } .social-google { color: #db4437 !important; } .social-google:hover { color: #db4437 !important; border: 1px solid #db4437 !important; } .social-linkedin { color: #0077b5 !important; } .social-linkedin:hover { color: #0077b5 !important; border: 1px solid #0077b5 !important; } .social-tripadvisor_account { color: #34e0a1 !important; } .social-tripadvisor_account:hover { color: #34e0a1 !important; border: 1px solid #34e0a1 !important; } /* Legacy navbar block removed (1455-1812) — see git history. Replaced by .site-header (centralized header). */ .wrapper { padding-left: 290px } .wrapper.right { padding-left: 0; padding-right: 290px } .side-right-social { width: 100%; display: block; text-align: center; position: absolute; bottom: 50px; left: 0 } .side-right-social a { height: 30px; width: 30px; display: inline-block; line-height: 30px; color: #fff; -webkit-border-radius: var(--radius-pill, 50px); -moz-border-radius: var(--radius-pill, 50px); border-radius: var(--radius-pill, 50px); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out } .slider-social { display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); right: 30px; z-index: 13 } .slider-social a { display: block; width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: var(--radius-pill, 50px); color: #fff; font-size: 17px; margin: 3px; border: 1px solid transparent; -webkit-transition: background-color .2s ease-in-out; -moz-transition: background-color .2s ease-in-out; -ms-transition: background-color .2s ease-in-out; -o-transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out } .slider-social a:hover { background-color: #fff } .scroll-down { display: inline-block; position: absolute; bottom: 30px; z-index: 13; left: 50%; transform: translateX(-50%); color: #fff!important } .scroll-down i { font-size: 12px; padding-left: 10px; color: #fff; -webkit-animation: mover 1s infinite alternate; animation: mover 1s infinite alternate } .scroll-down:hover i { color: #fff } @-webkit-keyframes mover { 0% { transform: translateY(2px) } 100% { transform: translateY(-2px) } } .fullscreen { height: 100vh!important; width: 100% } .fullscreen .center-col { position: absolute; top: 50%; transform: translateY(-50%); width: 100% } @-webkit-keyframes pulse_effect { 0% { -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, .9); box-shadow: 0 0 0 5px rgba(255, 255, 255, .9) } 25% { -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, .6); box-shadow: 0 0 0 10px rgba(255, 255, 255, .6) } 70% { -webkit-box-shadow: 0 0 0 15px rgba(255, 255, 255, .3); box-shadow: 0 0 0 15px rgba(255, 255, 255, .3) } 100% { -webkit-box-shadow: 0 0 0 60px rgba(255, 255, 255, .1); box-shadow: 0 0 0 20px rgba(255, 255, 255, .1) } } @-o-keyframes pulse_effect { 0% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .9) } 25% { box-shadow: 0 0 0 10px rgba(255, 255, 255, .6) } 70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, .3) } 100% { box-shadow: 0 0 0 20px rgba(100, 48, 148, .1) } } @keyframes pulse_effect { 0% { -webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, .9); box-shadow: 0 0 0 5px rgba(255, 255, 255, .9) } 25% { -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, .6); box-shadow: 0 0 0 10px rgba(255, 255, 255, .6) } 70% { -webkit-box-shadow: 0 0 0 15px rgba(255, 255, 255, .3); box-shadow: 0 0 0 15px rgba(255, 255, 255, .3) } 100% { -webkit-box-shadow: 0 0 0 60px rgba(255, 255, 255, .1); box-shadow: 0 0 0 20px rgba(255, 255, 255, .1) } } @-webkit-keyframes animationFade { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } to { opacity: 1; -webkit-transform: none; transform: none } } @-o-keyframes animationFade { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } @keyframes animationFade { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none } } .title { margin-bottom: 1rem } .title h2 { font-size: 3rem; line-height: 1.2; } .title p { max-width: 720px; margin: 0 auto } .overlay { position: absolute; left: 20px; top: 25px; right: 20px; bottom: 22px; opacity: 0; visibility: hidden; z-index: 1; -webkit-transition: all .5s ease-in .1s; -o-transition: all .5s ease-in .1s; transition: all .5s ease-in .1s } .bottom-text { display: table } .bottom-text p { font-size: 15px; margin-bottom: 0 } .content .title { margin-bottom: 0 } .content-image img { max-width: 685px; position: relative; margin-left: -50px } .bg-img3 { background: url(../images/slider-image3.jpg) } .bg-img5 { background: url(../images/bg-img2.jpg) } .bg-img6 { background: url(../images/bg-img3.jpg) } .bg-img7 { background: url(../images/bg-img4.jpg) } .bg-img8 { background: url(../images/bg-img5.jpg) } .bg-img9 { background: url(../images/bg-img6.jpg) } .bg-img10 { background: url(../images/bg-img7.jpg) } .bg-img11 { background: url(../images/bg-img8.jpg) } .bg-img12 { background: url(../images/bg-img9.jpg) } .bg-img-count1 { background: url(../images/countdown_bg1.jpg) } .bg-img-count2 { background: url(../images/countdown_bg2.jpg) } [class*=bg-img] { position: relative; background-size: cover; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; overflow: hidden } .bg-img2 { background: url(../images/slider-image3.jpg) } .side-menu { width: 40%; position: fixed; right: 0; top: 0; z-index: 1032; height: 100%; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition: -webkit-transform .5s ease; transition: -webkit-transform .5s ease; -o-transition: -o-transform .5s ease; transition: transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease, -o-transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease; overflow: hidden } .side-menu.left { left: 0; right: auto; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } .side-menu.side-menu-active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } #close_side_menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; -webkit-transition: opacity .3s cubic-bezier(.895, .03, .685, .22); -o-transition: opacity .3s cubic-bezier(.895, .03, .685, .22); transition: opacity .3s cubic-bezier(.895, .03, .685, .22); display: none; z-index: 1031; opacity: .4 } .side-menu .btn-close { height: 33px; width: 33px; display: inline-block; text-align: center; position: absolute; top: 30px; right: 15px; cursor: pointer } .side-menu .inner-wrapper { padding: 3.5rem 5rem; height: 100%; position: relative; overflow-y: auto; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; text-align: left; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .side-menu .side-nav { margin-bottom: 30px; display: block } .side-nav .navbar-nav .nav-item { display: block; margin: 10px 0; padding: 0!important; opacity: 0; -webkit-transition: all .8s ease .5s; -o-transition: all .8s ease .5s; transition: all .8s ease .5s; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px) } .side-nav .navbar-nav .nav-item:first-child { -webkit-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s } .side-nav .navbar-nav .nav-item:nth-child(2) { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s } .side-nav .navbar-nav .nav-item:nth-child(3) { -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s } .side-nav .navbar-nav .nav-item:nth-child(4) { -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s } .side-nav .navbar-nav .nav-item:nth-child(5) { -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s } .side-nav .navbar-nav .nav-item:nth-child(6) { -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s } .side-nav .navbar-nav .nav-item:nth-child(7) { -webkit-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s } .side-nav .navbar-nav .nav-item:nth-child(8) { -webkit-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s } .side-nav .navbar-nav .nav-item:nth-child(9) { -webkit-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s } .side-menu.side-menu-active .side-nav .navbar-nav .nav-item { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1 } .side-nav .navbar-nav .nav-link { display: inline-table; color: #fff; padding: 2px 0 3px 0!important; font-size: 1.5rem; font-weight: 300; line-height: normal; position: relative; -webkit-border-radius: 0; border-radius: 0 } .side-nav .navbar-nav .nav-link:hover { color: white !important; } .side-nav .navbar-nav .nav-link::after { content: ""; position: absolute; background: #fff; display: inline-block; width: 0; height: 3px; bottom: 0; left: 0; overflow: hidden; -webkit-transition: all .5s cubic-bezier(0, 0, .2, 1); -o-transition: all .5s cubic-bezier(0, 0, .2, 1); transition: all .5s cubic-bezier(0, 0, .2, 1) } .side-nav .navbar-nav .nav-link.active::after, .side-nav .navbar-nav .nav-link:focus::after, .side-nav .navbar-nav .nav-link:hover::after { width: 100% } .side-nav .navbar-nav .nav-link.active { background: 0 0 } .side-menu p { font-size: 16px; margin-top: 1rem; margin-bottom: 0 } .blog-image { max-width: 500px } .address-social li { display: inline-block } .address-social a { display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: var(--radius-pill, 50px); color: #fff; font-size: 17px; margin: 5px; border: 1px solid transparent; -webkit-transition: background-color .2s ease-in-out; -moz-transition: background-color .2s ease-in-out; -ms-transition: background-color .2s ease-in-out; -o-transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out } .address-social a:hover { background-color: #fff } .contact-map { height: 400px; width: 100%; overflow: hidden } .full-map { height: 500px; width: 100%; overflow: hidden } /* Full-width map wrapper for Gutenberg blocks */ .wp-block-hotelface-map-wrapper.is-full-width { margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; max-width: 100vw !important; width: 100vw !important; padding-left: 0 !important; padding-right: 0 !important; } /* Ensure map breaks out of container and gutenberg-content */ .container .wp-block-hotelface-map-wrapper.is-full-width, .gutenberg-content .wp-block-hotelface-map-wrapper.is-full-width, section .container .wp-block-hotelface-map-wrapper.is-full-width, section .container .gutenberg-content .wp-block-hotelface-map-wrapper.is-full-width { margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; max-width: 100vw !important; width: 100vw !important; padding-left: 0 !important; padding-right: 0 !important; } /* Fix Street View pegman icon visibility and centering */ .wp-block-hotelface-map .gm-style .gm-svpc, .wp-block-hotelface-map .gm-style-cc .gm-svpc { background-color: #fff !important; border: 1px solid rgba(0,0,0,0.1) !important; border-radius: var(--radius-2xs, 2px) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } /* Ensure Street View control icon is visible and centered */ .wp-block-hotelface-map .gm-style .gm-svpc div, .wp-block-hotelface-map .gm-style-cc .gm-svpc div { background-image: url('https://maps.gstatic.com/mapfiles/api-3/images/cb_scout5.png') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; width: 100% !important; height: 100% !important; opacity: 1 !important; visibility: visible !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Fallback: Use SVG icon if Google's sprite doesn't load */ .wp-block-hotelface-map .gm-style .gm-svpc div:not([style*="background-image"]), .wp-block-hotelface-map .gm-style-cc .gm-svpc div:not([style*="background-image"]) { background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="%23000" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/%3E%3C/svg%3E') !important; background-size: 20px 20px !important; } /* Ensure Street View control container is visible */ .wp-block-hotelface-map .gm-style-cc { display: block !important; visibility: visible !important; } .contact-form { display: block; text-align: center; margin: 0 auto } /* (Legacy .contact-form .form-control overrides removed — handled centrally below) */ .footer-social li { display: inline-block } .footer-social a { display: block; width: 45px; height: 45px; text-align: center; line-height: 45px; border-radius: var(--radius-pill, 50px); font-size: 17px; margin: 10px 5px; border: 1px solid transparent; -webkit-transition: background-color .2s ease-in-out; -moz-transition: background-color .2s ease-in-out; -ms-transition: background-color .2s ease-in-out; -o-transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out } .footer-social li a:hover { color: #fff } .form_placeholder1::-webkit-input-placeholder { color: #232323 } .form_placeholder1::-moz-placeholder { color: #232323 } .form_placeholder1:-ms-input-placeholder { color: #232323 } .form_placeholder1:-moz-placeholder { color: #232323 } .single-items { position: relative; width: 100%; height: 100vh; overflow: hidden; background-position: center center; -webkit-background-size: cover; background-size: cover; background-attachment: fixed } .single-items h3 { font-size: 3rem; margin-bottom: 1.3rem!important } .single-items h3 strong { text-shadow: 0 2px 2px rgba(0, 0, 0, .7) } .single-items p { margin-bottom: 0; color: #272727 } .single-items a:active, .single-items a:hover { color: inherit } .page-breadcrumb-bar { border-bottom: 1px solid #f0ece4; background: #fff; margin-bottom: 2.5rem; } .page_nav { padding: 14px 0; color: #7f7f7f; font-size: 1rem; } .blog-list-item { margin-bottom: 4rem } .blog-list-item:last-child { margin-bottom: 1rem } .blog-item-content h4 { margin-bottom: 2.5rem } .blog-item-content h4 a:hover { background: #3264f5; background: -moz-linear-gradient(left, #3264f5 2%, #7202bb 82%); background: -webkit-linear-gradient(left, #3264f5 2%, #7202bb 82%); background: linear-gradient(to right, #3264f5 2%, #7202bb 82%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .blog-comment { list-style: none; margin: 0; padding: 0; text-align: left } .blog-comment .comment-text { vertical-align: top } .blog-comment .date { font-size: 12px; margin-bottom: .5rem; color: #b3aeae } .blog-comment li { padding: 50px 0; border-bottom: 1px solid #ededed; position: relative } .blog-comment>li:first-child { padding-top: 0 } .blog-comment li:last-child { border-bottom: none; padding-bottom: 0 } .comment-form .form-control { -webkit-border-radius: var(--radius-xs, 4px); -moz-border-radius: var(--radius-xs, 4px); border-radius: var(--radius-xs, 4px); font-weight: 300 } .comment-form .form-control:focus { border-color: #ced4da; outline: 0; box-shadow: none } .comment-form textarea { margin-bottom: 1.2rem; resize: none } #cursor { position: fixed; transform: translate(-50%, -50%); width: 30px; height: 30px; border: 2px solid rgba(255, 255, 255, 1); border-radius: var(--radius-circle, 50%); pointer-events: none; opacity: 1; box-sizing: border-box } #cursor:before { font-family: FontAwesome; content: "\f053"; font-size: 6px; width: 4px; height: 8px; line-height: 8px; text-align: center; position: absolute; left: -12px; top: 9px; color: #fff; opacity: 0; transition: all .1s cubic-bezier(.215, .61, .355, 1) 0s } #cursor-loader { width: 40px; height: 40px; position: absolute; background-color: transparent; border-right: 2px solid transparent; border-bottom: 2px solid #fff; border-left: 2px solid transparent; border-top: 2px solid transparent; border-radius: var(--radius-pill, 50px); box-sizing: border-box; opacity: 0; transform: translate(-9px, -9px) rotate(0); -webkit-animation: rotating .8s ease-in-out infinite; animation: rotating .8s ease-in-out infinite; -webkit-transition: opacity 0s ease-in-out 0s; transition: opacity 0s ease-in-out 0s } #cursor:after { font-family: FontAwesome; content: "\f054"; font-size: 6px; width: 4px; height: 8px; line-height: 8px; text-align: center; position: absolute; right: -10px; top: 9px; color: #fff; opacity: 0; transition: all .2s cubic-bezier(.215, .61, .355, 1) 0s } @keyframes rotating { 0% { -webkit-transform: translate(-7px, -7px) rotate(0); transform: translate(-7px, -7px) rotate(0) } 95% { -webkit-transform: translate(-7px, -7px) rotate(350deg); transform: translate(-7px, -7px) rotate(350deg) } 100% { -webkit-transform: translate(-7px, -7px) rotate(360deg); transform: translate(-7px, -7px) rotate(360deg) } } .loader { bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 1111; overflow-x: hidden; background: #3264f5; background: -moz-linear-gradient(left, #3264f5 2%, #7202bb 82%); background: -webkit-linear-gradient(left, #3264f5 2%, #7202bb 82%); background: linear-gradient(to right, #3264f5 2%, #7202bb 82%) } .loader-inner { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center } .loader-inner>img { width: 120px; max-width: 120px; display: inline-block } .loader span { background: #fff; -webkit-border-radius: var(--radius-circle, 50%); border-radius: var(--radius-circle, 50%); display: block; height: 12px; opacity: 0; position: absolute; width: 12px; animation: load 4.6s ease-in-out infinite; -o-animation: load 4.6s ease-in-out infinite; -ms-animation: load 4.6s ease-in-out infinite; -webkit-animation: load 4.6s ease-in-out infinite; -moz-animation: load 4.6s ease-in-out infinite } .loader span.block-1 { animation-delay: 1.06s; -o-animation-delay: 1.06s; -ms-animation-delay: 1.06s; -webkit-animation-delay: 1.06s; -moz-animation-delay: 1.06s; left: 0; top: 0 } .loader span.block-2 { animation-delay: .97s; -o-animation-delay: .97s; -ms-animation-delay: .97s; -webkit-animation-delay: .97s; -moz-animation-delay: .97s; left: 16px; top: 0 } .loader span.block-3 { animation-delay: .87s; -o-animation-delay: .87s; -ms-animation-delay: .87s; -webkit-animation-delay: .87s; -moz-animation-delay: .87s; left: 31px; top: 0 } .loader span.block-4 { animation-delay: .78s; -o-animation-delay: .78s; -ms-animation-delay: .78s; -webkit-animation-delay: .78s; -moz-animation-delay: .78s; left: 47px; top: 0 } .loader span.block-5 { animation-delay: .69s; -o-animation-delay: .69s; -ms-animation-delay: .69s; -webkit-animation-delay: .69s; -moz-animation-delay: .69s; left: 0; top: 16px } .loader span.block-6 { animation-delay: .6s; -o-animation-delay: .6s; -ms-animation-delay: .6s; -webkit-animation-delay: .6s; -moz-animation-delay: .6s; left: 16px; top: 16px } .loader span.block-7 { animation-delay: .51s; -o-animation-delay: .51s; -ms-animation-delay: .51s; -webkit-animation-delay: .51s; -moz-animation-delay: .51s; left: 31px; top: 16px } .loader span.block-8 { animation-delay: .41s; -o-animation-delay: .41s; -ms-animation-delay: .41s; -webkit-animation-delay: .41s; -moz-animation-delay: .41s; left: 47px; top: 16px } .loader span.block-9 { animation-delay: .32s; -o-animation-delay: .32s; -ms-animation-delay: .32s; -webkit-animation-delay: .32s; -moz-animation-delay: .32s; left: 0; top: 31px } .loader span.block-10 { animation-delay: .23s; -o-animation-delay: .23s; -ms-animation-delay: .23s; -webkit-animation-delay: .23s; -moz-animation-delay: .23s; left: 16px; top: 31px } .loader span.block-11 { animation-delay: .14s; -o-animation-delay: .14s; -ms-animation-delay: .14s; -webkit-animation-delay: .14s; -moz-animation-delay: .14s; left: 31px; top: 31px } .loader span.block-12 { animation-delay: 50ms; -o-animation-delay: 50ms; -ms-animation-delay: 50ms; -webkit-animation-delay: 50ms; -moz-animation-delay: 50ms; left: 47px; top: 31px } .loader span.block-13 { animation-delay: -50ms; -o-animation-delay: -50ms; -ms-animation-delay: -50ms; -webkit-animation-delay: -50ms; -moz-animation-delay: -50ms; left: 0; top: 47px } .loader span.block-14 { animation-delay: -.14s; -o-animation-delay: -.14s; -ms-animation-delay: -.14s; -webkit-animation-delay: -.14s; -moz-animation-delay: -.14s; left: 16px; top: 47px } .loader span.block-15 { animation-delay: -.23s; -o-animation-delay: -.23s; -ms-animation-delay: -.23s; -webkit-animation-delay: -.23s; -moz-animation-delay: -.23s; left: 31px; top: 47px } .loader span.block-16 { animation-delay: -.32s; -o-animation-delay: -.32s; -ms-animation-delay: -.32s; -webkit-animation-delay: -.32s; -moz-animation-delay: -.32s; left: 47px; top: 47px } #singleSlider { border-radius: var(--radius-xl, 20px); overflow: hidden; } #singleSlider.carousel { padding: 0; margin: 0; } #singleSwiper { position: relative; border-radius: var(--radius-xl, 20px); overflow: hidden; line-height: 0; } #singleSwiper .swiper-wrapper { line-height: normal; } #singleSwiper .swiper-slide { height: 400px; } #singleSwiper .swiper-slide img { width: 100% !important; height: 100% !important; object-fit: cover; } #singleSwiper .swiper-pagination { position: absolute; bottom: 12px !important; left: 0 !important; right: 0 !important; width: 100% !important; text-align: center; display: flex; justify-content: center; transform: none !important; z-index: 10; } #singleSwiper .swiper-button-prev, #singleSwiper .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; } #singleSwiper .swiper-pagination-bullet { background: #fff; opacity: 0.7; } #singleSwiper .swiper-pagination-bullet-active { background: #fff; opacity: 1; } .sidebar_icon_button { width: 57px; height: 57px; min-width: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 26px; } @keyframes load { 0% { opacity: 0; -webkit-transform: translateY(-97px); -o-transform: translateY(-97px); transform: translateY(-97px) } 15% { opacity: 0; -webkit-transform: translateY(-97px); -o-transform: translateY(-97px); transform: translateY(-97px) } 30% { opacity: 1; -webkit-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } 70% { opacity: 1; -webkit-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } 85% { opacity: 0; -webkit-transform: translateY(97px); -o-transform: translateY(97px); transform: translateY(97px) } 100% { opacity: 0; -webkit-transform: translateY(97px); -o-transform: translateY(97px); transform: translateY(97px) } } @-o-keyframes load { 0% { opacity: 0; -o-transform: translateY(-97px) } 15% { opacity: 0; -o-transform: translateY(-97px) } 30% { opacity: 1; -o-transform: translateY(0) } 70% { opacity: 1; -o-transform: translateY(0) } 85% { opacity: 0; -o-transform: translateY(97px) } 100% { opacity: 0; -o-transform: translateY(97px) } } @-webkit-keyframes load { 0% { opacity: 0; -webkit-transform: translateY(-97px) } 15% { opacity: 0; -webkit-transform: translateY(-97px) } 30% { opacity: 1; -webkit-transform: translateY(0) } 70% { opacity: 1; -webkit-transform: translateY(0) } 85% { opacity: 0; -webkit-transform: translateY(97px) } 100% { opacity: 0; -webkit-transform: translateY(97px) } } .editor-content p:not(:has(+ p)) { margin-bottom: 20px; } @media screen and (max-width:1199px) { .fontMid { font-size: 26px } .content-image img { max-width: 100%; margin-left: 0 } .blog-image, .blog-image img { max-width: 100% } } @media screen and (max-width:991px) { .btn, .form-control { font-size: 16px; } .fontMid { font-size: 1.2rem; font-weight: 300 } .rateIcon { margin: 0 auto; width: 30px } .h1, h1 { font-size: 2rem } .h2, h2 { font-size: 1.5rem } .h3, h3 { font-size: 1.25rem } .h4, h4 { font-size: 1rem } .slider-social { display: none } .content .title { margin-bottom: 3rem } .wrapper { padding-left: 0 } .wrapper.right { padding-right: 0 } .content { text-align: center } } @media screen and (max-width:767px) { .home-content-wrapper { display: flex; flex-direction: column; gap: 2rem; margin: 3rem 0; } .title h2 { font-size: 2.2rem } .title { margin-bottom: 2rem } .side-menu { width: 380px } } @media screen and (max-width:576px) { img.alignleft, img.alignright { float: none; border-radius: var(--radius-xs, 4px); margin: 0 auto; width: 100% } .h1, h1 { font-size: 1.6rem } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { line-height: 1.4 } } @media screen and (max-width:466px) { .footer-social a { width: 35px; height: 35px; line-height: 35px; font-size: 15px } } /** Site Popup**/ #site-popup { position: fixed; width: 100%; height: 100%; z-index: 999; } #site-popup .site-popup-drop { background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; } #site-popup .site-popup-wrapper { width: 100%; height: 100%; max-width: 540px; height: fit-content; position: absolute; top: 50%; left: 50%; padding: 0 1.4rem; transform: translate(-50%, -50%); } #site-popup .site-popup-inner { position: relative; background-color: white; height: calc(100% - 25px); width: 100%; overflow: hidden; border-radius: var(--radius-xl, 20px); } #site-popup .close-button { color: white; font-size: 25px; cursor: pointer; height: 30px; width: 100%; display: flex; justify-content: end; } #site-popup .site-popup-title { height: 200px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; display: flex; justify-content: center; align-items: center; padding: 1.4rem; } #site-popup .site-popup-title::before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); background-repeat: no-repeat; background-size: cover; top: 0; left: 0; } #site-popup .site-popup-title .h2 { color: #fff; z-index: 1; font-size: 26px; font-weight: 700; display: block; text-align: center; line-height: 35px; } #site-popup .site-popup-content-wrapper { height: calc(100% - 200px); padding: 1.4rem; flex-direction: column; align-items: center; justify-content: center; display: flex; } #site-popup .site-popup-content { text-align: center; } #site-popup .site-popup-button { text-align: center; margin-top: 1.4rem; } @media screen and (max-width: 441px) { #site-popup .site-popup-title span { line-height: 35px; font-size: 25px; } } .reservation-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content iframe { width: 100%; height: 100vh; -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS Safari */ padding-top: 22px; } .close-btn { position: fixed; background: #fff; border: none; cursor: pointer; height: 25px; width: 100%; font-size: 12px; text-align: left; } body.modal-open { position: fixed; width: 100%; overflow: hidden; } .swiper-button-next, .swiper-button-prev { color: white; } .swiper-pagination-bullet-active { background: white; } /* ============================================ Page Header — title + secondary title hero ============================================ */ .page-header-wrapper { position: relative; } .page-header-wrapper.pb-3, .page-header-wrapper.pb-md-5 { padding-bottom: 0 !important; } .page-prominent { position: relative; padding: 200px 0 90px; overflow: hidden; background-color: #1a1a1a; background-position: center center; background-size: cover; isolation: isolate; } /* Slow Ken-Burns zoom on the featured image background */ .page-prominent.bg_cover { animation: pageHeadZoom 18s ease-out forwards; } @keyframes pageHeadZoom { from { background-size: 110% auto; background-position: center 45%; } to { background-size: 100% auto; background-position: center center; } } @media (prefers-reduced-motion: reduce) { .page-prominent.bg_cover { animation: none; } } .page-prominent .container { position: relative; z-index: 2; } /* Brand gradient overlay used by page.php */ .page-prominent .bg-overlay.gradient-bg1 { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-pri, #3264f5) 78%, transparent) 0%, color-mix(in srgb, var(--brand-sec, #7202bb) 78%, transparent) 100%); opacity: 1; } /* When there IS a featured image, lighten the gradient so the photo reads through; layer a darker bottom vignette for text legibility */ .page-prominent.bg_cover .bg-overlay.gradient-bg1 { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-pri, #3264f5) 45%, transparent) 0%, color-mix(in srgb, var(--brand-sec, #7202bb) 45%, transparent) 100%); } .page-prominent.bg_cover::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 30% 70%, rgba(0,0,0,.35) 0%, transparent 65%), linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%); pointer-events: none; } /* Without an image, gradient is fully opaque (no photo to reveal) */ .page-prominent:not(.bg_cover) .bg-overlay.gradient-bg1 { opacity: 1; } .page-prominent .bg-overlay.opacity-9 { opacity: .9; } .page-prominent .bg-overlay.opacity-8 { opacity: .8; } .page-prominent .cover-text { max-width: 760px; color: #fff; animation: pageHeadIn .8s cubic-bezier(.22, 1, .36, 1) both; } .page-prominent .cover-text h1 { margin: 0 0 .65rem; font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; color: #fff; } .page-prominent .cover-text h1::after { content: ""; display: block; width: 48px; height: 1px; background: rgba(255, 255, 255, .55); margin: 1rem 0 0; } .page-prominent .cover-text p { margin: 0; font-size: clamp(.95rem, 1.4vw, 1.1rem); font-weight: 300; color: rgba(255, 255, 255, .82); line-height: 1.55; letter-spacing: .01em; max-width: 60ch; } @keyframes pageHeadIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .page-prominent { padding: 130px 0 60px; } .page-prominent .cover-text h1::after { margin-top: .8rem; } } .restaurant-head { position: relative; padding-top: 90px; } .restaurant-hero { position: relative; width: 100%; height: 400px; overflow: hidden; background-position: center center; background-size: cover; } #rest-continue h2, #rest-continue h3 { margin-bottom: 1rem; } @media screen and (max-width: 576px) { .restaurant-head { padding-top: 60px; } } /* (Legacy .btn-white-bordered overrides removed — handled centrally below) */ /* ===== Hero Reservation Speech Bubble ===== */ .hero-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; } .hero-bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px) scale(.9); transform-origin: 50% 100%; background: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 60%, rgba(255, 255, 255, 0.04) 100%); color: #fff; padding: .75rem 1.15rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-lg, 16px); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 18px 40px rgba(0, 0, 0, 0.18), 0 0 28px rgba(255, 255, 255, 0.18); font-size: .8rem; font-weight: 300; line-height: 1.35; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); white-space: normal; max-width: min(170px, 60vw); width: max-content; text-align: center; pointer-events: none; opacity: 0; z-index: 5; animation: heroBubblePop .7s cubic-bezier(.34, 1.56, .64, 1) forwards, heroBubbleFloat 4.2s ease-in-out infinite, heroBubbleGlow 3.2s ease-in-out infinite; animation-delay: var(--hero-bubble-delay, 1500ms), calc(var(--hero-bubble-delay, 1500ms) + 700ms), calc(var(--hero-bubble-delay, 1500ms) + 700ms); } .hero-bubble::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, .45), transparent 45%); opacity: .6; pointer-events: none; mix-blend-mode: overlay; } .hero-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; width: 12px; height: 7px; margin-top: -1px; transform: translateX(-50%); background: rgba(255, 255, 255, 0.18); clip-path: polygon(0 0, 100% 0, 50% 100%); -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; } .hero-bubble__inner { display: block; position: relative; } .hero-bubble__inner :is(strong, b) { color: #fff; font-weight: 500; } .hero-bubble__inner a { color: #fff; text-decoration: underline; pointer-events: auto; } .hero-bubble__inner p { margin: 0; } .hero-bubble__inner p + p { margin-top: .25em; } @keyframes heroBubblePop { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.8); filter: blur(4px); } 60% { opacity: .9; transform: translate(-50%, -3px) scale(1.05); filter: blur(0); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); } } @keyframes heroBubbleFloat { 0%, 100% { transform: translate(-50%, 0) scale(1); } 50% { transform: translate(-50%, -6px) scale(1); } } @keyframes heroBubbleGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 18px 40px rgba(0, 0, 0, 0.18), 0 0 28px rgba(255, 255, 255, 0.18); } 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 22px 48px rgba(0, 0, 0, 0.22), 0 0 42px rgba(255, 255, 255, 0.32); } } @media (prefers-reduced-motion: reduce) { .hero-bubble { animation: heroBubblePop .01s linear forwards; animation-delay: var(--hero-bubble-delay, 0ms); } } @media screen and (max-width: 576px) { .hero-bubble { font-size: .72rem; padding: .5rem .8rem; max-width: min(150px, 60vw); bottom: calc(100% + 6px); } } /* =================================== Gutenberg Block Styles =================================== */ .gutenberg-content { max-width: 100%; } /* Typography */ .gutenberg-content p { margin-bottom: 1em; margin-top: 0; line-height: 1.4; } .gutenberg-content h1, .gutenberg-content h2, .gutenberg-content h3, .gutenberg-content h4, .gutenberg-content h5, .gutenberg-content h6 { margin-top: 0; line-height: 1.3; margin-bottom: 8px; } .gutenberg-content h1 { font-size: 2.5em; } .gutenberg-content h2 { font-size: 2em; } .gutenberg-content h3 { font-size: 1.75em; } .gutenberg-content h4 { font-size: 1.5em; } .gutenberg-content h5 { font-size: 1.25em; } .gutenberg-content h6 { font-size: 1em; } /* Lists */ .gutenberg-content ul, .gutenberg-content ol { list-style: disc; } .gutenberg-content ol { list-style: decimal; } .gutenberg-content ul ul { list-style: circle; } .gutenberg-content ul ul ul { list-style: square; } .gutenberg-content li { margin-bottom: 0.5em; } /* Block Quotes */ .gutenberg-content blockquote { border-left: 4px solid #385aef; padding-left: 1.5em; margin: 2em 0; font-style: italic; color: #666; } .gutenberg-content blockquote p { margin-bottom: 0.5em; } /* Code */ .gutenberg-content code { background: #f5f5f5; padding: 0.2em 0.4em; border-radius: var(--radius-2xs, 3px); font-size: 0.9em; } .gutenberg-content pre { background: #f5f5f5; padding: 1.5em; border-radius: var(--radius-xs, 4px); } /* Gutenberg Gallery Blocks */ .gutenberg-content .wp-block-gallery, .editor-content .wp-block-gallery { margin: 2em 0; } .gutenberg-content .wp-block-gallery .blocks-gallery-grid, .editor-content .wp-block-gallery .blocks-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1em; list-style: none; padding: 0; margin: 0; } /* Fix for Gutenberg gallery columns - ensure proper layout */ .gutenberg-content .wp-block-gallery.columns-2 .blocks-gallery-grid, .editor-content .wp-block-gallery.columns-2 .blocks-gallery-grid { grid-template-columns: repeat(2, 1fr); } .gutenberg-content .wp-block-gallery.columns-3 .blocks-gallery-grid, .editor-content .wp-block-gallery.columns-3 .blocks-gallery-grid { grid-template-columns: repeat(3, 1fr); } .gutenberg-content .wp-block-gallery.columns-4 .blocks-gallery-grid, .editor-content .wp-block-gallery.columns-4 .blocks-gallery-grid { grid-template-columns: repeat(4, 1fr); } .gutenberg-content .wp-block-gallery.columns-5 .blocks-gallery-grid, .editor-content .wp-block-gallery.columns-5 .blocks-gallery-grid { grid-template-columns: repeat(5, 1fr); } .gutenberg-content .wp-block-gallery.columns-6 .blocks-gallery-grid, .editor-content .wp-block-gallery.columns-6 .blocks-gallery-grid { grid-template-columns: repeat(6, 1fr); } /* Responsive columns */ @media (max-width: 768px) { .gutenberg-content .wp-block-gallery.columns-3 .blocks-gallery-grid, .editor-content .wp-block-gallery.columns-3 .blocks-gallery-grid, .gutenberg-content .wp-block-gallery.columns-4 .blocks-gallery-grid, .editor-content .wp-block-gallery.columns-4 .blocks-gallery-grid, .gutenberg-content .wp-block-gallery.columns-5 .blocks-gallery-grid, .editor-content .wp-block-gallery.columns-5 .blocks-gallery-grid, .gutenberg-content .wp-block-gallery.columns-6 .blocks-gallery-grid, .editor-content .wp-block-gallery.columns-6 .blocks-gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .gutenberg-content .wp-block-gallery .blocks-gallery-grid, .editor-content .wp-block-gallery .blocks-gallery-grid { grid-template-columns: 1fr; } } .gutenberg-content .wp-block-gallery .blocks-gallery-item, .editor-content .wp-block-gallery .blocks-gallery-item { margin: 0; padding: 0; } .gutenberg-content .wp-block-gallery .blocks-gallery-item figure, .editor-content .wp-block-gallery .blocks-gallery-item figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-xs, 4px); } .gutenberg-content .wp-block-gallery .blocks-gallery-item img, .editor-content .wp-block-gallery .blocks-gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; } .gutenberg-content .wp-block-gallery .blocks-gallery-item:hover img, .editor-content .wp-block-gallery .blocks-gallery-item:hover img { transform: scale(1.05); } .gutenberg-content .wp-block-gallery .blocks-gallery-item a, .editor-content .wp-block-gallery .blocks-gallery-item a { display: block; cursor: pointer; } .gutenberg-content .wp-block-gallery .blocks-gallery-item figcaption, .editor-content .wp-block-gallery .blocks-gallery-item figcaption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: #fff; padding: 1em; font-size: 0.9em; opacity: 0; transition: opacity 0.3s ease; } .gutenberg-content .wp-block-gallery .blocks-gallery-item:hover figcaption, .editor-content .wp-block-gallery .blocks-gallery-item:hover figcaption { opacity: 1; } /* FAQ Block Title */ .wp-block-hotelface-faq .faq-block-title { margin-bottom: 1.5rem; line-height: 1.3; } .wp-block-hotelface-faq h2.faq-block-title { font-size: 2em !important; } .wp-block-hotelface-faq h3.faq-block-title { font-size: 1.75em !important; } .wp-block-hotelface-faq h4.faq-block-title { font-size: 1.5em !important; } .wp-block-hotelface-faq h5.faq-block-title { font-size: 1.25em !important; } .wp-block-hotelface-faq h6.faq-block-title { font-size: 1em !important; } /* FAQ Side Layout (Two Columns) */ .wp-block-hotelface-faq.faq-layout-side { max-width: 960px; } .wp-block-hotelface-faq.faq-layout-side .faq-side-layout { display: flex; gap: 3rem; align-items: flex-start; } .wp-block-hotelface-faq.faq-layout-side .faq-side-title { flex: 0 0 33.333%; max-width: 33.333%; position: sticky; top: 100px; text-align: right; } .wp-block-hotelface-faq.faq-layout-side .faq-side-title .faq-block-title { margin-bottom: 0; } .wp-block-hotelface-faq.faq-layout-side .faq-side-items { flex: 1; min-width: 0; } @media (max-width: 767px) { .wp-block-hotelface-faq.faq-layout-side .faq-side-layout { flex-direction: column; gap: 1.5rem; } .wp-block-hotelface-faq.faq-layout-side .faq-side-title { flex: 0 0 100%; max-width: 100%; position: static; } .wp-block-hotelface-faq.faq-layout-side .faq-side-title .faq-block-title { margin-bottom: 0; } } /* FAQ Block Styles - Override general heading styles for FAQ question titles (not block title) */ .wp-block-hotelface-faq .wp-block-hotelface-faq-title, .gutenberg-content .wp-block-hotelface-faq .wp-block-hotelface-faq-title, .editor-content .wp-block-hotelface-faq .wp-block-hotelface-faq-title, .gutenberg-content [id^="accordion-"] .wp-block-hotelface-faq-title, .editor-content [id^="accordion-"] .wp-block-hotelface-faq-title { font-size: 1.05rem !important; font-weight: 500; line-height: 1.4; margin: 0; } /* ============================================ FAQ Accordion — minimal, editorial ---------------------------------------------- No cards. Hairline dividers between items, generous breathing space, a thin animated plus mark on the right. ============================================ */ .faq-accordion { display: flex; flex-direction: column; border-top: 1px solid #ece7dc; } .faq-item { border-bottom: 1px solid #ece7dc; transition: border-color .4s ease; } .faq-item[open] { border-bottom-color: #1a1a1a; } .faq-item__summary { list-style: none; cursor: pointer; padding: 22px 4px; display: flex; align-items: center; gap: 24px; user-select: none; transition: padding-left .4s cubic-bezier(.22, 1, .36, 1); } .faq-item__summary::-webkit-details-marker { display: none; } .faq-item__summary::marker { display: none; content: ""; } .faq-item:hover > .faq-item__summary { padding-left: 14px; } .faq-item__summary:focus-visible { outline: 0; } .faq-item__summary:focus-visible .faq-item__title { color: var(--brand-pri, #3264f5); } .faq-item__title { flex: 1; min-width: 0; color: #1a1a1a; font-weight: 400; letter-spacing: -.005em; transition: color .35s ease; } .faq-item:hover > .faq-item__summary > .faq-item__title { color: #000; } .faq-item[open] > .faq-item__summary > .faq-item__title { color: #000; font-weight: 500; } /* Plus mark — twin hairlines that morph into a single line on open */ .faq-item__icon { flex-shrink: 0; position: relative; width: 14px; height: 14px; } .faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #1a1a1a; transform-origin: center; transition: transform .45s cubic-bezier(.22, 1, .36, 1); } .faq-item__icon::after { transform: rotate(90deg); } .faq-item[open] > .faq-item__summary > .faq-item__icon::after { transform: rotate(180deg); } .faq-item__answer { padding: 0 30px 26px 4px; color: #555; font-weight: 300; line-height: 1.7; font-size: .95rem; max-width: 70ch; animation: faqAnswerIn .45s cubic-bezier(.22, 1, .36, 1); } .faq-item__answer p { margin: 0 0 .9em; } .faq-item__answer p:last-child { margin-bottom: 0; } .faq-item__answer ul, .faq-item__answer ol { margin: 0 0 .9em 1.1em; padding: 0; } .faq-item__answer ul li, .faq-item__answer ol li { margin-bottom: .35em; } .faq-item__answer a { color: #1a1a1a; text-decoration: none; border-bottom: 1px solid currentColor; transition: color .25s ease; } .faq-item__answer a:hover { color: var(--brand-pri, #3264f5); } @keyframes faqAnswerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .faq-item, .faq-item__summary, .faq-item__icon, .faq-item__icon::before, .faq-item__icon::after, .faq-item__title, .faq-item__answer { transition: none; animation: none; } .faq-item:hover > .faq-item__summary { padding-left: 4px; } } @media (max-width: 576px) { .faq-item__summary { padding: 18px 4px; gap: 16px; } .faq-item:hover > .faq-item__summary { padding-left: 8px; } .faq-item__answer { padding: 0 0 22px 4px; font-size: .9rem; } .wp-block-hotelface-faq .wp-block-hotelface-faq-title { font-size: .95rem !important; } } /* PhotoSwipe Caption Styles for Gutenberg Galleries */ .pswp__custom-caption { font-size: 16px; color: #fff; width: calc(100% - 30px); max-width: 800px; padding: 10px 15px; position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); text-align: center; border-radius: var(--radius-2xs, 2px); z-index: 1200; background: rgba(0, 0, 0, 0.5); } .pswp__caption--empty { display: none; } .gutenberg-content pre code { background: none; padding: 0; } /* Images */ .gutenberg-content img { max-width: 100%; height: auto; border-radius: var(--radius-2xl, 28px); } /* Override default image border for Featured Card block */ .gutenberg-content .wp-block-hotelface-featured-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; /* Padding is controlled via inline styles from block attributes - don't override */ min-width: 0 !important; } .gutenberg-content .wp-block-hotelface-featured-card-image, .gutenberg-content .wp-block-hotelface-featured-card-content { min-width: 0; box-sizing: border-box; } .gutenberg-content .wp-block-hotelface-featured-card img, .gutenberg-content .wp-block-hotelface-featured-card-image img { border: none !important; padding: 0 !important; } /* Override default image border for Content Gallery block */ .gutenberg-content .wp-block-hotelface-content-gallery img, .gutenberg-content .wp-block-hotelface-content-gallery .swiper-slide img, .gutenberg-content .wp-block-hotelface-content-gallery .swiper img { border: none !important; padding: 0 !important; box-sizing: border-box; } /* Override default image border for Ratings block */ .wp-block-hotelface-ratings img, .wp-block-hotelface-ratings .rateIcon, .gutenberg-content .wp-block-hotelface-ratings img, .gutenberg-content .wp-block-hotelface-ratings .rateIcon { border: none !important; padding: 0 !important; box-sizing: border-box; border-radius: 0 !important; } /* ===== Ratings / Reviews Block ===== */ #ratings.wp-block-hotelface-ratings, section#ratings { width: 100%; max-width: 1200px; margin: 3.5rem auto; padding: 0 1rem; box-sizing: border-box; } .ratings-block__inner { background: transparent; border: 0; border-radius: 0; padding: 2.5rem 0; box-shadow: none; } .ratings-block__title { width: 100%; text-align: center; margin: 0 0 2rem 0; font-size: clamp(1.5rem, 2.4vw, 2rem); color: #111; letter-spacing: -0.01em; } .ratings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; align-items: stretch; justify-content: center; } .rating-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem .5rem; background: transparent; border: 0; border-radius: 0; opacity: 0; transform: translateY(16px); animation: rcFadeUp .6s ease forwards; animation-delay: var(--rc-delay, 0ms); transition: transform .35s ease; } .rating-card + .rating-card { border-left: 1px solid #ececec; } .rating-card:hover { transform: translateY(-4px); } .rating-card__icon-wrap { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-circle, 50%); margin-bottom: 1.1rem; background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease; } .rating-card:hover .rating-card__icon-wrap { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1); } .rating-card--booking { --rc-accent: #003580; } .rating-card--tripadvisor { --rc-accent: #00aa6c; } .rating-card--google { --rc-accent: #4285f4; } .rating-card--expedia { --rc-accent: #fcd33b; } .rating-card__icon, .rating-card .rateIcon { width: 44px !important; height: 44px !important; object-fit: contain; margin: 0 !important; } .rating-card__value, p.rating-card__value.rate { position: relative; font-size: 2.4rem; color: #111; margin: 0 0 .5rem 0; padding: 0 0 .35rem 0; line-height: 1; letter-spacing: -0.03em; background: linear-gradient(180deg, #1a1a1a 0%, #444 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .rating-card__value::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 24px; height: 2px; background: var(--rc-accent, #d4af37); transform: translateX(-50%) scaleX(.4); transform-origin: center; transition: transform .4s ease, width .4s ease; border-radius: var(--radius-2xs, 2px); opacity: .85; } .rating-card:hover .rating-card__value::after { transform: translateX(-50%) scaleX(1); width: 40px; } .rating-card__label { font-size: .85rem; color: #888; margin: 0; font-weight: 400; letter-spacing: .02em; } @keyframes rcFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .rating-card { animation: none; opacity: 1; transform: none; } .rating-card, .rating-card__icon-wrap, .rating-card::before { transition: none; } } @media (max-width: 640px) { .ratings-block__inner { padding: 1.75rem 0; } .ratings-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; } .rating-card { padding: 1.25rem .5rem 1rem; } .rating-card + .rating-card { border-left: 0; } .rating-card:nth-child(even) { border-left: 1px solid #ececec; } .rating-card__icon-wrap { width: 64px; height: 64px; margin-bottom: .75rem; } .rating-card__icon, .rating-card .rateIcon { width: 36px !important; height: 36px !important; } .rating-card__value, p.rating-card__value.rate { font-size: 1.75rem; } } /* Contact Block Styles */ /* Ensure Bootstrap grid works properly */ .wp-block-hotelface-contact .row { display: flex !important; flex-wrap: wrap !important; } .wp-block-hotelface-contact .wp-block-hotelface-contact-info, .wp-block-hotelface-contact .wp-block-hotelface-contact-form { position: relative; width: 100%; } /* Desktop: side by side columns */ @media (min-width: 768px) { .wp-block-hotelface-contact .wp-block-hotelface-contact-info { flex: 0 0 50% !important; max-width: 50% !important; border-right: 1px solid #ebebeb; padding-right: 1.5rem; } .wp-block-hotelface-contact .wp-block-hotelface-contact-form { flex: 0 0 50% !important; max-width: 50% !important; padding-left: 1.5rem; } } /* Mobile/Tablet: stacked columns */ @media (max-width: 767.98px) { .wp-block-hotelface-contact .wp-block-hotelface-contact-info, .wp-block-hotelface-contact .wp-block-hotelface-contact-form { flex: 0 0 100% !important; max-width: 100% !important; } .wp-block-hotelface-contact .wp-block-hotelface-contact-info { border-right: none !important; border-bottom: 1px solid #ebebeb; padding-bottom: 2rem; margin-bottom: 2rem; padding-right: 15px; } .wp-block-hotelface-contact .wp-block-hotelface-contact-form { padding-left: 15px; } } /* Contact Form Captcha - Initially Hidden */ .wp-block-hotelface-contact .g-recaptcha-wrapper { display: none; opacity: 0; transition: opacity 0.3s ease-in-out; } .wp-block-hotelface-contact .g-recaptcha-wrapper.show { display: block; opacity: 1; } .gutenberg-content figure { margin: 2em 0; } .gutenberg-content figure img { border: 1px solid #1abc9c; padding: 12px; box-sizing: border-box; } /* Remove border and padding for gallery images */ .gutenberg-content .wp-block-gallery figure img, .gutenberg-content .wp-block-gallery .blocks-gallery-item img, .gutenberg-content .wp-block-gallery img, .editor-content .wp-block-gallery figure img, .editor-content .wp-block-gallery .blocks-gallery-item img, .editor-content .wp-block-gallery img { border: none !important; padding: 0 !important; box-sizing: border-box; } .gutenberg-content figcaption { font-size: 0.9em; color: #666; text-align: center; margin-top: 0.5em; } /* Alignments */ .gutenberg-content .alignleft { float: left; margin-right: 2em; margin-bottom: 1em; } .gutenberg-content .alignright { float: right; margin-left: 2em; margin-bottom: 1em; } .gutenberg-content .aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } .gutenberg-content .alignwide { margin-left: -10%; margin-right: -10%; max-width: 120%; } .gutenberg-content .alignfull { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: 100vw; width: 100vw; } /* Hero Section Block - Full Width */ .wp-block-hotelface-hero-section { margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; max-width: 100vw !important; width: 100vw !important; position: relative; display: block; } /* Ensure hero section breaks out of container and gutenberg-content */ .container .wp-block-hotelface-hero-section, .gutenberg-content .wp-block-hotelface-hero-section, section .container .wp-block-hotelface-hero-section, section .container .gutenberg-content .wp-block-hotelface-hero-section { margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; max-width: 100vw !important; width: 100vw !important; position: relative; display: block; } /* ============================================ Hero placement system ---------------------------------------------- Grid-based, 3x3 anchor matrix. The text block sits in one of nine cells based on the --v / --h modifiers, with safe-zone padding that always reserves space for the fixed header (top) and any sticky overlay (bottom). ============================================ */ .hero-section-content { /* IMPORTANT: relative (not absolute) so it participates in normal flow and the hero grows to fit tall content. Bg / overlay / video layers still cover the whole section because they're absolutely positioned relative to .wp-block-hotelface-hero-section. */ position: relative; z-index: 5; width: 100%; /* Safe zones — header above, breathing room below. Buttons can never sit closer than --hero-pad-bottom to the bottom edge. */ --hero-pad-top: 100px; --hero-pad-bottom: 80px; --hero-pad-x: 0px; padding: var(--hero-pad-top) var(--hero-pad-x) var(--hero-pad-bottom); box-sizing: border-box; /* Take at least the hero's min-height; grow if content needs more */ min-height: 600px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; /* Default anchor: middle/center */ place-items: center center; } /* Single grid item — fills the cell so place-items on the grid moves IT */ .hero-section-content > .container { width: 100%; } /* 3x3 anchor matrix — vertical (place-items first axis) */ .hero-section-content--v-top { place-items: start center; } .hero-section-content--v-middle { place-items: center center; } .hero-section-content--v-bottom { place-items: end center; } /* Horizontal axis */ .hero-section-content--h-left { place-items: center start; } .hero-section-content--h-right { place-items: center end; } /* All 9 explicit combinations override the single-axis rules above */ .hero-section-content--v-top.hero-section-content--h-left { place-items: start start; } .hero-section-content--v-top.hero-section-content--h-center { place-items: start center; } .hero-section-content--v-top.hero-section-content--h-right { place-items: start end; } .hero-section-content--v-middle.hero-section-content--h-left { place-items: center start; } .hero-section-content--v-middle.hero-section-content--h-center { place-items: center center; } .hero-section-content--v-middle.hero-section-content--h-right { place-items: center end; } .hero-section-content--v-bottom.hero-section-content--h-left { place-items: end start; } .hero-section-content--v-bottom.hero-section-content--h-center { place-items: end center; } .hero-section-content--v-bottom.hero-section-content--h-right { place-items: end end; } /* Text wrapper — flex column, sized to its content, capped at 820px */ .hero-section-text { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 820px; /* Offset variables — viewport-relative nudge from the chosen anchor */ --hero-offset-x: 0px; --hero-offset-y: 0px; transform: translate(var(--hero-offset-x), var(--hero-offset-y)); } /* Horizontal alignment of text inside the wrapper + side hug for the 720px promo card */ .hero-section-text--center { text-align: center; align-items: center; margin-left: auto; margin-right: auto; } .hero-section-text--left { text-align: left; align-items: flex-start; margin-right: auto; } .hero-section-text--right { text-align: right; align-items: flex-end; margin-left: auto; } /* Subtle entry animation — title, description, promo, and buttons fade-up in sequence */ .hero-section-text > * { opacity: 0; transform: translateY(14px); animation: heroFadeUp .7s cubic-bezier(.22, 1, .36, 1) forwards; } .hero-section-text > *:nth-child(1) { animation-delay: .15s; } .hero-section-text > *:nth-child(2) { animation-delay: .30s; } .hero-section-text > *:nth-child(3) { animation-delay: .45s; } .hero-section-text > *:nth-child(4) { animation-delay: .60s; } .hero-section-text > *:nth-child(5) { animation-delay: .75s; } @keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } } /* Buttons row — uses gap, no Bootstrap utilities needed */ .hero-buttons-wrapper { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; align-items: center; } .hero-section-text--center .hero-buttons-wrapper { justify-content: center; } .hero-section-text--left .hero-buttons-wrapper { justify-content: flex-start; } .hero-section-text--right .hero-buttons-wrapper { justify-content: flex-end; } /* Ensure search-bar stays above title/description */ .wp-block-hotelface-hero-section #search-bar { z-index: 99 !important; position: relative; width: 100%; } /* Hero Parallax Background */ .hero-parallax-bg { will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0); height: 150% !important; /* Make image taller to allow parallax movement */ top: -20% !important; /* Center the extra height */ min-height: 150% !important; background-size: cover !important; background-position: center center !important; background-attachment: scroll !important; } /* Keep overflow hidden to contain parallax within hero section */ .wp-block-hotelface-hero-section, .index-top { overflow: hidden; } /* Hero Overlay */ .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* Ensure background image always covers full height */ .wp-block-hotelface-hero-section .index-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; } /* Non-parallax images should be 100% height */ .wp-block-hotelface-hero-section .index-image:not(.hero-parallax-bg) { min-height: 100% !important; height: 100% !important; } /* Hero Section Styles (moved from index_top.css) .hero-section-content now flows naturally with min-height 600px and handles its own placement via grid. Bg / overlay / video layers stay absolutely positioned, covering whatever the hero grows to. */ .index-top { min-height: 600px; background: transparent; position: relative; width: 100%; overflow: hidden; } /* Fallback for browsers that don't support :has() - use class-based approach */ .wp-block-hotelface-hero-section.has-parallax, .index-top.has-parallax { overflow: visible; } .index-top .video-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .index-image { position: absolute; background-size: cover; width: 100%; height: 100%; background-position: center center; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; } #search-bar { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 100%; z-index: 99; } #cleaning-bar { width: 100%; position: absolute; bottom: 140px; left: 50%; transform: translateX(-50%); z-index: 99; } @media screen and (max-width: 991px) { .index-top { min-height: 100vh; } #cleaning-bar { bottom: 80px; } } .hero-section-title { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 .25em; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); } .hero-section-description { font-size: clamp(.85rem, 1.1vw, 1rem); line-height: 1.6; max-width: 720px; margin: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); opacity: .95; } .hero-section-description p { margin-bottom: 1em; } .hero-section-description p:last-child { margin-bottom: 0; } @media screen and (max-width: 768px) { .hero-section-title { font-size: 2rem; } .hero-section-description { font-size: .85rem; } /* Tighter safe zones on small screens — header is shorter, and we need every pixel for content. */ .hero-section-content { --hero-pad-top: 80px; --hero-pad-bottom: 56px; } /* Cap viewport-based offsets on small screens so content never escapes */ .hero-section-text { --hero-offset-x: clamp(-15vw, var(--hero-offset-x, 0px), 15vw); --hero-offset-y: clamp(-15vh, var(--hero-offset-y, 0px), 15vh); } .wp-block-hotelface-hero-section #search-bar { position: relative; } } /* Columns */ .gutenberg-content .wp-block-columns { display: flex; flex-wrap: wrap; gap: 2em; margin-bottom: 2em; } .gutenberg-content .wp-block-column { flex: 1; min-width: 0; } @media (max-width: 782px) { .gutenberg-content .wp-block-columns { flex-direction: column; } } /* Buttons */ .gutenberg-content .wp-block-button { margin-bottom: 1.5em; } .gutenberg-content .wp-block-button__link { display: inline-block; padding: 0.75em 1.5em; border-radius: var(--radius-xs, 4px); text-decoration: none; transition: all 0.3s ease; } /* Separator */ .gutenberg-content .wp-block-separator { margin: 2em auto; border: none; border-top: 2px solid #e0e0e0; } /* Spacer */ .gutenberg-content .wp-block-spacer { clear: both; } /* Responsive */ @media (max-width: 768px) { .gutenberg-content .alignwide, .gutenberg-content .alignfull { margin-left: 0; margin-right: 0; max-width: 100%; width: 100%; } .gutenberg-content h1 { font-size: 2em; } .gutenberg-content h2 { font-size: 1.75em; } .gutenberg-content h3 { font-size: 1.5em; } } /* Rooms Block in Gutenberg - Match Home Template Styling */ /* Remove all default WordPress block spacing */ .gutenberg-content .wp-block-hotelface-rooms, .gutenberg-content .wp-block-hotelface-rooms > section, .gutenberg-content section#rooms { margin: 0 !important; padding: 0 !important; --wp--style--block-gap: 0 !important; } /* Remove WordPress default block spacing classes */ .gutenberg-content .wp-block-hotelface-rooms[class*="has-"], .gutenberg-content .wp-block-hotelface-rooms[style*="padding"], .gutenberg-content .wp-block-hotelface-rooms[style*="margin"], .gutenberg-content .wp-block-hotelface-rooms[class*="spacing"] { padding: 0 !important; margin: 0 !important; } /* Remove spacing from block wrapper */ .gutenberg-content > .wp-block-hotelface-rooms, .gutenberg-content article > .wp-block-hotelface-rooms { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Rooms Swiper - Airbnb Style */ section#rooms .rooms-swiper-container, .wp-block-hotelface-rooms > h2, .wp-block-hotelface-rooms > .h5, .wp-block-hotelface-rooms > p { text-align: center; margin-left: auto; margin-right: auto; } .wp-block-hotelface-rooms .rooms-swiper-container { position: relative; padding: 0 0; margin: 30px 0; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; } .rooms-swiper { overflow: visible; width: 100%; max-width: 100%; } .rooms-swiper .swiper-wrapper { width: 100%; } .rooms-swiper .swiper-slide { height: auto; width: 100%; max-width: 100%; box-sizing: border-box; } .room-swiper-card { height: 100%; border-radius: var(--radius-xl, 20px); overflow: hidden; border: 1px solid #e5e5e5; transition: transform 0.3s ease, border-color 0.3s ease; background: #fff; display: flex; flex-direction: column; width: 100%; max-width: 100%; box-sizing: border-box; } .room-swiper-card:hover { transform: translateY(-4px); border-color: #d0d0d0; } .room-swiper-image-link { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; } .room-swiper-image { width: 100%; height: 280px; background-size: cover; background-position: center; position: relative; overflow: hidden; } .room-swiper-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 100%); transition: opacity 0.3s ease; } .room-swiper-card:hover .room-swiper-overlay { opacity: 0.8; } .room-swiper-content { padding: 20px; flex: 1; display: flex; flex-direction: column; } .room-swiper-title { font-size: 1.25rem; margin: 0; color: #2b2b2b; line-height: 1.4; } .room-swiper-pro { font-size: 20px; color: #666; margin: 0 0 12px 0; } .room-swiper-short { font-size: 20px; color: #777; margin: 0 0 16px 0; line-height: 1.4 !important; flex: 1; } .room-swiper-button { display: inline-flex; align-items: center; text-decoration: none; margin-top: auto; width: auto; align-self: flex-start; } .room-swiper-button i { transition: transform 0.3s ease; } .room-swiper-card:hover .room-swiper-button i { transform: translateX(4px); } /* Light Navigation Buttons - Airbnb Style */ .rooms-swiper .swiper-button-next, .rooms-swiper .swiper-button-prev { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); color: #2b2b2b; margin-top: 0; top: 50%; transform: translateY(-50%); transition: all 0.3s ease; border-radius: var(--radius-circle, 50%); } .rooms-swiper .swiper-button-next:hover, .rooms-swiper .swiper-button-prev:hover { background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transform: translateY(-50%) scale(1.1); } .rooms-swiper .swiper-button-next::after, .rooms-swiper .swiper-button-prev::after { font-size: 16px; font-weight: 700; } .rooms-swiper .swiper-button-next { right: 10px; } .rooms-swiper .swiper-button-prev { left: 10px; } /* Responsive */ @media screen and (max-width: 1024px) { .rooms-swiper-container { padding: 0 15px; margin: 20px 0; } .rooms-swiper { overflow: hidden; } } /* ============================================ Room Card — modern, conversion-focused Used by both grid (parts/room-list.php) and swiper (hotelface/rooms block) variants. IMPORTANT: .gutenberg-content sets aggressive typography on p/h3/ul/li (font-size: 1.75em on h3, list-style: disc, margins, etc.). Reset at the card scope so our own values win — selectors below use the .room-card prefix at high enough specificity (2 classes) to beat .gutenberg-content element selectors (1 class + 1 element). ============================================ */ .room-card, .room-card * { box-sizing: border-box; } .room-card p, .room-card ul, .room-card ol, .room-card li, .room-card h1, .room-card h2, .room-card h3, .room-card h4, .room-card h5, .room-card h6 { margin: 0; padding: 0; list-style: none; line-height: inherit; font-size: inherit; font-weight: inherit; } .room-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 30px 0; } @media (max-width: 991px) { .room-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 575px) { .room-cards-grid { grid-template-columns: 1fr; gap: 18px; } } .room-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #f0ece4; border-radius: var(--radius-md, 14px); overflow: hidden; transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease, border-color .5s ease; height: 100%; } .room-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(60, 50, 40, .18); border-color: #e6dfd2; } .room-card__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f4f0e9; line-height: 0; } .room-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .15) 100%); pointer-events: none; opacity: 0; transition: opacity .5s ease; z-index: 1; } .room-card:hover .room-card__media::after { opacity: 1; } .gutenberg-content .room-card__img, .room-card__img { width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover; display: block; border-radius: 0 !important; border: 0 !important; padding: 0 !important; margin: 0 !important; transition: transform .6s ease; } /* Only scale the visible/active image — scaling every slide in the gallery makes neighbouring slides leak past the media container's clipping bounds during the transform. */ .room-card:hover > .room-card__media > .room-card__slide-link > .room-card__img, .room-card:hover .swiper-slide-active .room-card__img { transform: scale(1.05); } .room-card__gallery, .room-card__gallery .swiper-wrapper, .room-card__gallery .swiper-slide { width: 100%; height: 100%; } .room-card__gallery { overflow: hidden; } .room-card__gallery .swiper-slide { overflow: hidden; } .room-card__slide-link { display: block; width: 100%; height: 100%; line-height: 0; } .room-card__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: var(--z-raised, 3); width: 32px; height: 32px; border-radius: var(--radius-pill, 50%); border: 0; background: color-mix(in srgb, var(--color-white, #fff) 92%, transparent); color: var(--color-fg-strong, #2b2b2b); font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.18)); opacity: 0; transition: opacity var(--duration-fast, .25s) ease, background var(--duration-fast, .2s) ease; } .room-card__nav--prev { left: var(--space-2, 10px); } .room-card__nav--next { right: var(--space-2, 10px); } .room-card:hover .room-card__nav { opacity: 1; } .room-card__nav:hover { background: var(--color-white, #fff); } .room-card__nav.swiper-button-disabled { opacity: 0 !important; pointer-events: none; } .room-card .room-card__pagination { position: absolute; bottom: 10px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 5px; pointer-events: auto; line-height: 0; padding: 0; margin: 0; } .room-card .room-card__pagination .swiper-pagination-bullet { width: 6px; height: 6px; border-radius: var(--radius-circle, 50%); background: #fff; opacity: .55; box-shadow: 0 0 0 1px rgba(0,0,0,.18); margin: 0 !important; padding: 0; border: 0; cursor: pointer; transition: width .25s ease, opacity .2s ease, background .2s ease; flex: 0 0 auto; } .room-card .room-card__pagination .swiper-pagination-bullet-active { opacity: 1; width: 18px; border-radius: var(--radius-2xs, 3px); background: #fff; } /* Fraction counter — used when galleries have many photos. Forced sizing via !important because Swiper's default .swiper-pagination-fraction sets width: 100% which combined with our border-radius would render as a giant oval. */ .room-card__pagination, .room-card__pagination--fraction, .room-card .room-card__pagination--fraction, div.room-card__pagination.room-card__pagination--fraction.swiper-pagination-fraction { position: absolute !important; bottom: auto !important; top: 10px !important; left: auto !important; right: 10px !important; width: auto !important; height: auto !important; max-width: max-content !important; transform: none !important; display: inline-flex !important; align-items: center; justify-content: flex-end; gap: 3px; padding: 4px 9px; background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: var(--radius-pill, 999px); font-size: .72rem; font-weight: 500; line-height: 1; letter-spacing: .02em; backdrop-filter: blur(2px); pointer-events: auto; } .room-card .room-card__pagination--fraction .swiper-pagination-current, .room-card .room-card__pagination--fraction .swiper-pagination-total { color: #fff; } .room-card .room-card__pagination-sep { opacity: .7; } @media (hover: none) { .room-card__nav { opacity: 1; background: rgba(255,255,255,0.85); } } .room-card__body { padding: 22px 22px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; } .room-card__title-link { text-decoration: none; color: inherit; } .room-card__title-link:hover { color: inherit; } .room-card .room-card__title { font-size: 1.15rem; font-weight: 400; color: #1f1f1f; margin: 0 0 6px; line-height: 1.3; letter-spacing: -.005em; transition: color .3s ease; } .room-card:hover .room-card__title { color: #000; } .room-card .room-card__pro { font-size: .82rem; color: #9a9a9a; margin: 0 0 16px; font-weight: 300; line-height: 1.4; letter-spacing: .02em; font-style: italic; } /* Decorative divider under subtitle */ .room-card .room-card__pro::after { content: ""; display: block; width: 28px; height: 1px; background: #d9cfb8; margin: 12px auto 0; } .room-card .room-card__meta { list-style: none; padding: 12px 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 14px; row-gap: 8px; border-top: 1px solid #f0ece4; border-bottom: 1px solid #f0ece4; text-align: center; width: 100%; } .room-card .room-card__meta li { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: #666; font-weight: 300; line-height: 1.2; position: relative; padding-right: 14px; margin: 0; letter-spacing: .01em; } .room-card .room-card__meta li:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: #e6dfd2; } .room-card .room-card__meta li:last-child { padding-right: 0; } .room-card .room-card__meta i { font-size: .8rem; color: #b8a983; width: 14px; text-align: center; } .room-card .room-card__desc { font-size: .85rem; color: #777; font-weight: 300; line-height: 1.6; margin: 0 0 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; } .room-card .room-card__cta { margin-top: auto; align-self: center; display: inline-flex; align-items: center; gap: var(--space-2, 8px); font-size: .78rem; font-weight: var(--weight-medium, 500); color: var(--color-fg-strong, #2b2b2b); text-decoration: none; padding: var(--btn-pad-y-sm, 9px) var(--btn-pad-x-sm, 18px); border: 1px solid var(--color-border, #d9cfb8); border-radius: var(--btn-radius-sm, 8px); letter-spacing: var(--btn-tracking, .06em); text-transform: uppercase; transition: color var(--btn-duration, .52s) var(--btn-ease, ease), border-color var(--btn-duration, .52s) var(--btn-ease, ease), background var(--btn-duration, .52s) var(--btn-ease, ease); } .room-card__cta i { font-size: .7rem; transition: transform .25s ease; } .room-card:hover .room-card__cta { background: var(--brand-pri, #3264f5); border-color: var(--brand-pri, #3264f5); color: #fff; } .room-card:hover .room-card__cta i { transform: translateX(3px); } /* Swiper variant: card already inside .swiper-slide */ .rooms-swiper .swiper-slide .room-card { height: 100%; } @media screen and (max-width: 768px) { .rooms-swiper-container { padding: 0 10px; margin: 15px 0; } .room-swiper-image { height: 220px; } .room-swiper-content { padding: 15px; } .rooms-swiper .swiper-button-next, .rooms-swiper .swiper-button-prev { width: 36px; height: 36px; } .rooms-swiper .swiper-button-next::after, .rooms-swiper .swiper-button-prev::after { font-size: 14px; } .rooms-swiper .swiper-button-next { right: 5px; } .rooms-swiper .swiper-button-prev { left: 5px; } } /* ============================================ Site Header — single source of truth. Used by every template via parts/nav.php. Default: fixed white bar with dark text. body.has-transparent-header — starts transparent over a hero, flips to white when scrolled. ============================================ */ :root { --header-h: 72px; /* ===== Centralized container widths & gutters ===== Used by .container, .site-header__inner, and any theme block that needs the standard page width. */ --container-max: 1280px; --container-pad: 28px; /* Header rhythm — single source of truth for inter-item spacing. Visual gap between two adjacent items = --header-item-pad (right of A) + --header-item-gap + --header-item-pad (left of B). */ --header-item-pad: 14px; --header-item-gap: 8px; } @media (max-width: 991px) { :root { --container-pad: 22px; } } @media (max-width: 575px) { :root { --container-pad: 16px; } } /* Centralized .container — replaces Bootstrap's container. Bootstrap-flavoured class used across ~20 templates. */ .container, .container-fluid { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-pad); padding-right: var(--container-pad); box-sizing: border-box; } .container-fluid { max-width: 100%; } /* Wider/narrower variants if templates use them */ .container-sm { max-width: 640px; } .container-md { max-width: 768px; } .container-lg { max-width: 1024px; } .container-xl { max-width: 1200px; } .container-xxl { max-width: 1400px; } /* ============================================ Minimal Bootstrap compatibility shim Bootstrap CSS is no longer enqueued — these rules keep the ~25 legacy templates that use .row / .col-* / common utility classes rendering correctly. Slim, no JS-bound classes. ============================================ */ :root { --gutter: 24px; } .row { display: flex; flex-wrap: wrap; margin-left: calc(var(--gutter) * -.5); margin-right: calc(var(--gutter) * -.5); } .row > [class*="col-"], .row > .col { box-sizing: border-box; flex: 0 0 auto; width: 100%; padding-left: calc(var(--gutter) * .5); padding-right: calc(var(--gutter) * .5); } .row > .col { flex: 1 1 0; } /* 12-col grid — matches Bootstrap 5 widths */ .col-1 { width: 8.3333%; } .col-2 { width: 16.6667%; } .col-3 { width: 25%; } .col-4 { width: 33.3333%; } .col-5 { width: 41.6667%; } .col-6 { width: 50%; } .col-7 { width: 58.3333%; } .col-8 { width: 66.6667%; } .col-9 { width: 75%; } .col-10 { width: 83.3333%; } .col-11 { width: 91.6667%; } .col-12 { width: 100%; } .col-auto { width: auto; flex: 0 0 auto; } @media (min-width: 576px) { .col-sm-1 { width: 8.3333%; } .col-sm-2 { width: 16.6667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.3333%; } .col-sm-5 { width: 41.6667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.3333%; } .col-sm-8 { width: 66.6667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.3333%; } .col-sm-11 { width: 91.6667%; } .col-sm-12 { width: 100%; } .col-sm-auto { width: auto; flex: 0 0 auto; } } @media (min-width: 768px) { .col-md-1 { width: 8.3333%; } .col-md-2 { width: 16.6667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.3333%; } .col-md-5 { width: 41.6667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.3333%; } .col-md-8 { width: 66.6667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.3333%; } .col-md-11 { width: 91.6667%; } .col-md-12 { width: 100%; } .col-md-auto { width: auto; flex: 0 0 auto; } } @media (min-width: 992px) { .col-lg-1 { width: 8.3333%; } .col-lg-2 { width: 16.6667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.3333%; } .col-lg-5 { width: 41.6667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.3333%; } .col-lg-8 { width: 66.6667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.3333%; } .col-lg-11 { width: 91.6667%; } .col-lg-12 { width: 100%; } .col-lg-auto { width: auto; flex: 0 0 auto; } } @media (min-width: 1200px) { .col-xl-1 { width: 8.3333%; } .col-xl-2 { width: 16.6667%; } .col-xl-3 { width: 25%; } .col-xl-4 { width: 33.3333%; } .col-xl-5 { width: 41.6667%; } .col-xl-6 { width: 50%; } .col-xl-7 { width: 58.3333%; } .col-xl-8 { width: 66.6667%; } .col-xl-9 { width: 75%; } .col-xl-10 { width: 83.3333%; } .col-xl-11 { width: 91.6667%; } .col-xl-12 { width: 100%; } .col-xl-auto { width: auto; flex: 0 0 auto; } } /* Display utilities */ .d-none { display: none !important; } .d-block { display: block !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .d-grid { display: grid !important; } @media (min-width: 576px) { .d-sm-none{display:none!important;}.d-sm-block{display:block!important;}.d-sm-flex{display:flex!important;}.d-sm-inline-block{display:inline-block!important;} } @media (min-width: 768px) { .d-md-none{display:none!important;}.d-md-block{display:block!important;}.d-md-flex{display:flex!important;}.d-md-inline-block{display:inline-block!important;} } @media (min-width: 992px) { .d-lg-none{display:none!important;}.d-lg-block{display:block!important;}.d-lg-flex{display:flex!important;}.d-lg-inline-block{display:inline-block!important;} } /* Flex utilities */ .flex-row { flex-direction: row !important; } .flex-column { flex-direction: column !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } .flex-grow-0 { flex-grow: 0 !important; } .flex-grow-1 { flex-grow: 1 !important; } .flex-shrink-0{ flex-shrink: 0 !important; } .justify-content-start { justify-content: flex-start !important; } .justify-content-end { justify-content: flex-end !important; } .justify-content-center { justify-content: center !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-around { justify-content: space-around !important; } .justify-content-evenly { justify-content: space-evenly !important; } .align-items-start { align-items: flex-start !important; } .align-items-end { align-items: flex-end !important; } .align-items-center { align-items: center !important; } .align-items-stretch { align-items: stretch !important; } .align-items-baseline { align-items: baseline !important; } .align-self-start { align-self: flex-start !important; } .align-self-end { align-self: flex-end !important; } .align-self-center { align-self: center !important; } /* Text utilities — tokenized */ .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-white { color: var(--color-white, #fff) !important; } .text-dark { color: var(--color-fg-strong, #2b2b2b) !important; } .text-muted { color: var(--color-fg-subtle, #6c757d) !important; } .text-success{ color: var(--color-success, #10b981) !important; } .text-danger { color: var(--color-danger, #ef4444) !important; } .text-uppercase { text-transform: uppercase !important; } .text-lowercase { text-transform: lowercase !important; } .text-capitalize{ text-transform: capitalize !important; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fw-light { font-weight: 300 !important; } .fw-normal { font-weight: 400 !important; } .fw-medium { font-weight: 500 !important; } .fw-semibold{ font-weight: 600 !important; } .fw-bold { font-weight: 700 !important; } /* Spacing utilities (m / p, with sides t/r/b/l/x/y; sizes 0-5 — 0/4/8/16/24/48px) */ .m-0{margin:0!important;}.m-1{margin:.25rem!important;}.m-2{margin:.5rem!important;}.m-3{margin:1rem!important;}.m-4{margin:1.5rem!important;}.m-5{margin:3rem!important;}.m-auto{margin:auto!important;} .mt-0{margin-top:0!important;}.mt-1{margin-top:.25rem!important;}.mt-2{margin-top:.5rem!important;}.mt-3{margin-top:1rem!important;}.mt-4{margin-top:1.5rem!important;}.mt-5{margin-top:3rem!important;}.mt-auto{margin-top:auto!important;} .mb-0{margin-bottom:0!important;}.mb-1{margin-bottom:.25rem!important;}.mb-2{margin-bottom:.5rem!important;}.mb-3{margin-bottom:1rem!important;}.mb-4{margin-bottom:1.5rem!important;}.mb-5{margin-bottom:3rem!important;}.mb-auto{margin-bottom:auto!important;} .ms-0{margin-left:0!important;}.ms-1{margin-left:.25rem!important;}.ms-2{margin-left:.5rem!important;}.ms-3{margin-left:1rem!important;}.ms-4{margin-left:1.5rem!important;}.ms-5{margin-left:3rem!important;}.ms-auto{margin-left:auto!important;} .me-0{margin-right:0!important;}.me-1{margin-right:.25rem!important;}.me-2{margin-right:.5rem!important;}.me-3{margin-right:1rem!important;}.me-4{margin-right:1.5rem!important;}.me-5{margin-right:3rem!important;}.me-auto{margin-right:auto!important;} .mx-0{margin-left:0!important;margin-right:0!important;}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important;}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important;}.mx-3{margin-left:1rem!important;margin-right:1rem!important;}.mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important;}.mx-5{margin-left:3rem!important;margin-right:3rem!important;}.mx-auto{margin-left:auto!important;margin-right:auto!important;} .my-0{margin-top:0!important;margin-bottom:0!important;}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important;}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important;}.my-3{margin-top:1rem!important;margin-bottom:1rem!important;}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important;}.my-5{margin-top:3rem!important;margin-bottom:3rem!important;} .p-0{padding:0!important;}.p-1{padding:.25rem!important;}.p-2{padding:.5rem!important;}.p-3{padding:1rem!important;}.p-4{padding:1.5rem!important;}.p-5{padding:3rem!important;} .pt-0{padding-top:0!important;}.pt-1{padding-top:.25rem!important;}.pt-2{padding-top:.5rem!important;}.pt-3{padding-top:1rem!important;}.pt-4{padding-top:1.5rem!important;}.pt-5{padding-top:3rem!important;} .pb-0{padding-bottom:0!important;}.pb-1{padding-bottom:.25rem!important;}.pb-2{padding-bottom:.5rem!important;}.pb-3{padding-bottom:1rem!important;}.pb-4{padding-bottom:1.5rem!important;}.pb-5{padding-bottom:3rem!important;} .ps-0{padding-left:0!important;}.ps-1{padding-left:.25rem!important;}.ps-2{padding-left:.5rem!important;}.ps-3{padding-left:1rem!important;}.ps-4{padding-left:1.5rem!important;}.ps-5{padding-left:3rem!important;} .pe-0{padding-right:0!important;}.pe-1{padding-right:.25rem!important;}.pe-2{padding-right:.5rem!important;}.pe-3{padding-right:1rem!important;}.pe-4{padding-right:1.5rem!important;}.pe-5{padding-right:3rem!important;} .px-0{padding-left:0!important;padding-right:0!important;}.px-1{padding-left:.25rem!important;padding-right:.25rem!important;}.px-2{padding-left:.5rem!important;padding-right:.5rem!important;}.px-3{padding-left:1rem!important;padding-right:1rem!important;}.px-4{padding-left:1.5rem!important;padding-right:1.5rem!important;}.px-5{padding-left:3rem!important;padding-right:3rem!important;} .py-0{padding-top:0!important;padding-bottom:0!important;}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important;}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important;}.py-3{padding-top:1rem!important;padding-bottom:1rem!important;}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important;}.py-5{padding-top:3rem!important;padding-bottom:3rem!important;} @media (min-width: 768px) { .py-md-5{padding-top:3rem!important;padding-bottom:3rem!important;}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important;}.my-md-0{margin-top:0!important;margin-bottom:0!important;}.mt-md-0{margin-top:0!important;}.mt-md-3{margin-top:1rem!important;} } /* Width utilities */ .w-100 { width: 100% !important; } .w-75 { width: 75% !important; } .w-50 { width: 50% !important; } .w-25 { width: 25% !important; } .w-auto{ width: auto !important; } .h-100 { height: 100% !important; } .h-auto{ height: auto !important; } .mw-100{ max-width: 100% !important; } /* Misc */ .position-relative { position: relative !important; } .position-absolute { position: absolute !important; } .position-fixed { position: fixed !important; } .position-sticky { position: sticky !important; } .shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; } .shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; } .shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; } .rounded { border-radius: .375rem !important; } .rounded-circle { border-radius: 50% !important; } .rounded-pill { border-radius: 50rem !important; } .border { border: 1px solid #dee2e6 !important; } .border-0 { border: 0 !important; } .border-bottom { border-bottom: 1px solid #dee2e6 !important; } .border-top { border-top: 1px solid #dee2e6 !important; } /* Common gap utilities (Bootstrap uses .gap-{n}) */ .gap-0 { gap: 0 !important; } .gap-1 { gap: .25rem !important; } .gap-2 { gap: .5rem !important; } .gap-3 { gap: 1rem !important; } .gap-4 { gap: 1.5rem !important; } .gap-5 { gap: 3rem !important; } .gap-md{ gap: 1rem !important; } /* Local reset — neutralise stray inheritance */ .site-header, .site-header * { box-sizing: border-box; } .site-header ul:not(.select-box__menu) { margin: 0; padding: 0; list-style: none; } .site-header ul.select-box__menu { list-style: none; } .site-header a { color: inherit; text-decoration: none; } .site-header button { font-family: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; line-height: 1; } .site-header img { display: block; border-radius: 0; border: 0; } /* Container */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: var(--header-h); background: #fff; color: #2b2b2b; box-shadow: none; transition: background .25s ease, box-shadow .25s ease, color .25s ease, transform .3s ease; } .site-header.is-hidden { transform: translateY(-100%); } /* When the side-nav is open, lift the entire header system above any FAB / messaging bubble (z-index ~9998) so it visually wins. */ .site-header.is-nav-open { z-index: 10001; } /* Header lays out its single .container as a flex row. Children: logo | nav (menu) | actions (lang + burger). Logo is flex-start; nav+actions cluster at flex-end so the menu items sit visually next to the language switcher as one cohesive group. */ .site-header > .container { height: 100%; display: flex; align-items: center; gap: 0; } /* Logo — stack both variants and crossfade between them */ .site-header__logo { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; height: 38px; line-height: 0; } .site-header__logo-img { position: absolute; top: 0; left: 0; max-height: 38px; width: auto; opacity: 0; transition: opacity .25s ease; pointer-events: none; } .site-header__logo-img--dark { opacity: 1; } /* default: dark on white nav */ .site-header__logo-img--light { opacity: 0; } /* hidden by default */ /* Reserve width — first image is in flow (relative) so the wrapper sizes correctly */ .site-header__logo-img:first-of-type { position: relative; } /* Nav — sits at the right of the inner row, immediately before actions. margin-left: auto pushes it (and the actions block that follows) to the right. */ .site-header__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; height: 100%; } .site-header__nav-close { display: none; font-size: 1.3rem; padding: 6px 10px; } .site-header__menu { display: flex; align-items: center; height: 100%; gap: var(--header-item-gap, 8px); } .site-header__menu > li { display: flex; align-items: center; height: 100%; } .site-header__menu a { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 var(--header-item-pad, 14px); font-size: .85rem; line-height: 1; transition: opacity .2s ease; } .site-header__menu a::after { content: ""; position: absolute; left: var(--header-item-pad, 14px); right: var(--header-item-pad, 14px); bottom: 4px; height: 2px; background: currentColor; border-radius: var(--radius-2xs, 2px); transform: scaleX(0); opacity: 0; transition: transform .25s ease, opacity .2s ease; } .site-header__menu a:hover { opacity: .85; } /* CTA-styled menu link — shares radius/padding/tracking/duration tokens with .room-card__cta and .btn-sm so every CTA in the theme reads as the same component family (same shape, same proportions). */ .site-header__menu a.cta-button, .site-header__menu .cta-button > a, .site-header__menu a[data-cta="true"], .site-header__menu li[data-cta="true"] > a { height: 36px; padding: 0 var(--btn-pad-x-sm, 18px); border-radius: var(--btn-radius-sm, 8px); border: 1px solid currentColor; letter-spacing: var(--btn-tracking, .06em); transition: background var(--btn-duration, .52s) var(--btn-ease, ease), color var(--btn-duration, .52s) var(--btn-ease, ease), transform var(--btn-duration, .52s) var(--btn-ease, ease); } .site-header__menu a.cta-button::after, .site-header__menu .cta-button > a::after, .site-header__menu a[data-cta="true"]::after, .site-header__menu li[data-cta="true"] > a::after { display: none; } .site-header__menu a.cta-button:hover, .site-header__menu .cta-button > a:hover, .site-header__menu a[data-cta="true"]:hover, .site-header__menu li[data-cta="true"] > a:hover { background: var(--brand-pri, #3264f5); border-color: var(--brand-pri, #3264f5); color: #fff; transform: translateY(-1px); opacity: 1; } .site-header__menu a:hover::after, .site-header__menu .current-menu-item > a::after, .site-header__menu .current_page_item > a::after, .site-header__menu .current-menu-ancestor > a::after { transform: scaleX(1); opacity: 1; } /* Active state shown via underline only — keep default weight */ /* Header language switcher — same underline hover treatment as menu items. Underline is anchored to the inner so it spans exactly the label width (excludes the caret icon and toggle padding). */ .site-header__lang--desktop .select-box__toggle { height: 36px; padding: 0 10px; font-size: 14px; gap: 6px; } .site-header__lang--desktop .select-box__caret { font-size: .55rem; } .site-header__lang--desktop .select-box__toggle > span { position: relative; display: inline-block; } .site-header__lang--desktop .select-box__toggle > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: currentColor; border-radius: var(--radius-2xs, 2px); transform: scaleX(0); opacity: 0; transition: transform .25s ease, opacity .2s ease; } .site-header__lang--desktop .select-box__toggle:hover > span::after, .site-header__lang--desktop .select-box__toggle[aria-expanded="true"] > span::after { transform: scaleX(1); opacity: 1; } /* Actions — sits immediately to the right of the nav menu. Only takes margin-left: auto when nav is hidden (mobile) so it slides to the far right next to the burger. */ .site-header__actions { display: flex; align-items: center; gap: var(--header-item-gap, 8px); flex-shrink: 0; /* Same rhythm between (last menu item — lang switcher) as between menu items themselves */ margin-left: var(--header-item-gap, 8px); } @media (max-width: 991px) { .site-header__actions { margin-left: auto; } } .site-header__lang { position: relative; display: inline-flex; align-items: center; } .site-header__lang--mobile { display: none; } /* Mobile-only slide-in blocks — hidden on desktop, shown via mobile @media */ .site-header__contact, .site-header__socials { display: none; } /* Stagger entry animation for mobile slide-in panel children */ @keyframes siteNavItemIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* Backdrop respects dark gradient + slight blur for premium feel */ @supports (backdrop-filter: blur(2px)) { .site-header__backdrop { backdrop-filter: blur(3px); } } /* Burger */ .site-header__burger { display: none; position: relative; width: 44px; height: 44px; border-radius: var(--radius-circle, 50%); border: 0; background: transparent; align-items: center; justify-content: center; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .25s ease, transform .25s ease; } .site-header__burger::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .25s ease; } .site-header__burger:hover::before { opacity: .08; transform: scale(1); } .site-header__burger:active { transform: scale(.94); } .site-header__burger:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .site-header__burger span { display: block; position: absolute; left: 50%; width: 22px; height: 2px; background: currentColor; border-radius: var(--radius-2xs, 2px); transform-origin: center; transition: transform .35s cubic-bezier(.65,.05,.36,1), width .3s ease, opacity .2s ease, top .35s cubic-bezier(.65,.05,.36,1); } .site-header__burger span:nth-child(1) { top: 16px; transform: translateX(-50%); } .site-header__burger span:nth-child(2) { top: 21px; width: 14px; transform: translateX(-50%); } .site-header__burger span:nth-child(3) { top: 26px; width: 18px; transform: translateX(-50%); } .site-header__burger:hover span:nth-child(2) { width: 22px; } .site-header__burger:hover span:nth-child(3) { width: 22px; } /* Backdrop */ .site-header__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.42); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 10000; } .site-header.is-nav-open .site-header__backdrop { opacity: 1; pointer-events: auto; } /* Body offset for fixed header */ body { padding-top: var(--header-h); } body.has-transparent-header { padding-top: 0; } /* Transparent variant (front-page hero) */ body.has-transparent-header .site-header:not(.is-scrolled) { background: transparent; box-shadow: none; color: #fff; } body.has-transparent-header .site-header:not(.is-scrolled) .site-header__logo-img--dark { opacity: 0; } body.has-transparent-header .site-header:not(.is-scrolled) .site-header__logo-img--light { opacity: 1; } /* Scrolled — same height, no shadow (kept clean) */ .site-header.is-scrolled { box-shadow: none; border-bottom: 1px solid #f0ece4; } /* ============================================ Select Box — reusable trigger + menu component ============================================ */ .select-box { position: relative; display: inline-flex; align-items: center; height: 44px; } /* Toggle — base typography matches .site-header__menu a exactly. */ .select-box__toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 var(--header-item-pad, 14px); /* match menu link padding */ border-radius: 0; font-family: inherit; font-size: .85rem; font-weight: inherit; line-height: 1; letter-spacing: 0; text-transform: none; color: inherit; transition: opacity .2s ease; } .select-box__toggle:hover { opacity: .85; } .select-box__toggle:focus-visible { outline: 2px solid var(--brand-pri, #3264f5); outline-offset: 2px; } .select-box__caret { font-size: .65rem; opacity: .55; transition: transform .2s ease; } .select-box__toggle[aria-expanded="true"] .select-box__caret { transform: rotate(180deg); } /* Shared menu surface — see --menu-* tokens in design-tokens.css. Same chrome powers .select-box__menu (lang switcher) and .room-detail__share-menu so every dropdown reads as the same component family. */ .select-box__menu { position: absolute; top: calc(100% + var(--menu-offset, 8px)); right: 0; min-width: var(--menu-min-width, 200px); background: var(--menu-bg, #fff); color: var(--menu-fg, #2b2b2b); border: var(--menu-border, 1px solid #ececec); border-radius: var(--menu-radius, 12px); box-shadow: var(--menu-shadow, 0 12px 28px rgba(0, 0, 0, .12)); padding: var(--menu-pad, 6px); list-style: none; margin: 0; z-index: var(--menu-z, 1000); opacity: 0; transform: translateY(var(--menu-enter-distance, -4px)); pointer-events: none; transition: opacity var(--menu-enter-duration, .2s) var(--menu-enter-ease, ease), transform var(--menu-enter-duration, .2s) var(--menu-enter-ease, ease); } .select-box__menu:not([hidden]) { opacity: 1; transform: translateY(0); pointer-events: auto; } .select-box__menu[hidden] { display: block; visibility: hidden; } .select-box__menu li { margin: 0; } .select-box__menu li + li { margin-top: 2px; } .select-box__menu a { display: flex; align-items: center; gap: var(--menu-item-gap, 10px); padding: var(--menu-item-pad-y, 9px) var(--menu-item-pad-x, 12px); border-radius: var(--menu-item-radius, 8px); font-size: var(--menu-item-font, .9rem); color: var(--menu-item-fg, #333); line-height: 1.2; text-decoration: none; transition: background var(--menu-enter-duration, .2s) var(--menu-enter-ease, ease), color var(--menu-enter-duration, .2s) var(--menu-enter-ease, ease); } .select-box__menu a:hover { background: var(--menu-item-bg-hover, #f5f5f5); color: var(--menu-item-fg-hover, #1a1a1a); } .select-box__menu a.is-active { background: var(--menu-item-bg-active, color-mix(in srgb, var(--brand-pri, #3264f5) 10%, #fff)); color: var(--menu-item-fg-active, var(--brand-pri, #3264f5)); } /* Hide the currently active language from the dropdown — the toggle button already shows it. Only show the *other* languages as choices. */ .select-box__menu li:has(> a.is-active) { display: none; } .select-box__menu i { width: var(--menu-item-icon-w, 16px); color: var(--menu-item-icon-fg, #777); } /* ---- Mobile (≤ 991px) ---- */ @media (max-width: 991px) { :root { --header-h: 64px; } .site-header__nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); /* Brand-tinted dark gradient — falls back to brand-pri solid if vars unset */ background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, .08), transparent 60%), linear-gradient(160deg, var(--brand-pri, #3264f5) 0%, var(--brand-sec, #1a2a6c) 60%, #0f1430 100%); color: #fff; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 72px 24px 32px; transform: translateX(101%); transition: transform .42s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, visibility 0s linear .42s; box-shadow: none; z-index: 10002; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; visibility: hidden; } .site-header.is-nav-open .site-header__nav { transform: translateX(0); box-shadow: -16px 0 48px rgba(0, 0, 0, .35); visibility: visible; transition: transform .42s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, visibility 0s; } /* Soft white-glow accent at the top of the panel */ .site-header__nav::before { content: ""; position: absolute; top: 60px; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); } .site-header__nav-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: var(--radius-circle, 50%); background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.15rem; transition: background .2s ease, transform .25s ease, color .2s ease; } .site-header__nav-close:hover { background: rgba(255, 255, 255, .18); color: #fff; transform: rotate(90deg); } /* Menu items animate in sequentially when the panel opens. */ .site-header__menu { flex-direction: column; align-items: stretch; gap: 4px; } .site-header__menu > li { display: block; height: auto; opacity: 0; transform: translateX(20px); } .site-header.is-nav-open .site-header__menu > li { animation: siteNavItemIn .45s cubic-bezier(.22, 1, .36, 1) forwards; } .site-header.is-nav-open .site-header__menu > li:nth-child(1) { animation-delay: .12s; } .site-header.is-nav-open .site-header__menu > li:nth-child(2) { animation-delay: .17s; } .site-header.is-nav-open .site-header__menu > li:nth-child(3) { animation-delay: .22s; } .site-header.is-nav-open .site-header__menu > li:nth-child(4) { animation-delay: .27s; } .site-header.is-nav-open .site-header__menu > li:nth-child(5) { animation-delay: .32s; } .site-header.is-nav-open .site-header__menu > li:nth-child(6) { animation-delay: .37s; } .site-header.is-nav-open .site-header__menu > li:nth-child(7) { animation-delay: .42s; } .site-header.is-nav-open .site-header__menu > li:nth-child(n+8) { animation-delay: .47s; } .site-header__menu a { position: relative; height: auto; padding: 14px 16px; font-size: .95rem; border-radius: var(--radius-md, 12px); transition: background .2s ease, color .2s ease, padding-left .25s ease; } .site-header__menu a { color: rgba(255, 255, 255, .92); } .site-header__menu a.cta-button, .site-header__menu .cta-button > a, .site-header__menu a[data-cta="true"], .site-header__menu li[data-cta="true"] > a { margin: var(--space-2, 8px) var(--space-1, 4px) 0; justify-content: center; text-align: center; height: auto; padding: var(--btn-pad-y, 13px) var(--btn-pad-x, 28px); border-radius: var(--btn-radius, 10px); border: 1px solid currentColor; background: transparent; } .site-header__menu a.cta-button:hover, .site-header__menu .cta-button > a:hover, .site-header__menu a[data-cta="true"]:hover, .site-header__menu li[data-cta="true"] > a:hover { background: rgba(255, 255, 255, .12); color: #fff; } .site-header__menu a:hover, .site-header__menu .current-menu-item > a, .site-header__menu .current_page_item > a { background: rgba(255, 255, 255, .10); color: #fff; padding-left: 22px; } .site-header__menu a::after { display: none; } /* Contact block — direct-action shortcuts */ .site-header__contact { display: flex !important; flex-direction: column; gap: 4px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); opacity: 0; transform: translateY(12px); } .site-header.is-nav-open .site-header__contact { animation: siteNavItemIn .5s cubic-bezier(.22, 1, .36, 1) .42s forwards; } .site-header__contact-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm, 10px); font-size: .95rem; color: rgba(255, 255, 255, .9); text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; } .site-header__contact-item:hover { background: rgba(255, 255, 255, .10); color: #fff; transform: translateX(2px); } .site-header__contact-item i { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-circle, 50%); background: rgba(255, 255, 255, .14); color: #fff; font-size: .9rem; flex-shrink: 0; } .site-header__contact-item span { word-break: break-all; } /* Socials row — circular icons with hover lift */ .site-header__socials { display: flex !important; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); flex-wrap: wrap; opacity: 0; transform: translateY(12px); } .site-header.is-nav-open .site-header__socials { animation: siteNavItemIn .5s cubic-bezier(.22, 1, .36, 1) .52s forwards; } .site-header__social-link { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-circle, 50%); background: rgba(255, 255, 255, .10); color: #fff; font-size: 1rem; text-decoration: none; transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; } .site-header__social-link:hover { background: #fff; color: var(--brand-pri, #3264f5); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .25); } /* Lang switcher stays visible in the header on mobile too, sitting just before the burger inside .site-header__actions. The duplicate inside the slide-in panel is hidden to avoid two switchers. */ .site-header__lang--mobile { display: none; } .site-header__lang--desktop .select-box__toggle { height: 40px; padding: 0 10px; font-size: .95rem; } .site-header__lang--desktop .select-box__toggle > span::after { display: none; } .site-header__burger { display: inline-flex; } .site-header.is-nav-open .site-header__burger span { width: 22px; } .site-header.is-nav-open .site-header__burger span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); } .site-header.is-nav-open .site-header__burger span:nth-child(2) { opacity: 0; transform: translateX(-50%) scaleX(0); } .site-header.is-nav-open .site-header__burger span:nth-child(3) { top: 21px; transform: translateX(-50%) rotate(-45deg); } } /* Single-room: padding handled globally now */ .room-detail { padding-top: 0; } /* Legacy page-prominent on non-hero pages — neutralise the old 120px top */ body:not(.has-transparent-header) .page-prominent { padding-top: 30px; } /* ============================================ Form Inputs — centralized ---------------------------------------------- Minimal-luxe: no fills, hairline underline, typographic weight. Focus expands a brand-color line beneath the hairline and an accent dot at left. ============================================ */ .form-control, input[type="text"].form-control, input[type="email"].form-control, input[type="tel"].form-control, input[type="number"].form-control, input[type="date"].form-control, input[type="password"].form-control, input[type="search"].form-control, input[type="url"].form-control, textarea.form-control, select.form-control { position: relative; display: block; width: 100%; height: 42px; padding: 12px 2px 8px; background-color: transparent; /* Two stacked underlines drawn as background-images: 1) permanent neutral hairline (full width) 2) brand-color line that grows from center on focus Drawing both as backgrounds avoids any double-border seam. */ background-image: linear-gradient(var(--brand-pri, #3264f5), var(--brand-pri, #3264f5)), linear-gradient(#e3dccb, #e3dccb); background-position: center bottom, left bottom; background-size: 0% 2px, 100% 1px; background-repeat: no-repeat, no-repeat; background-clip: padding-box, padding-box; background-origin: padding-box, padding-box; border: 0; border-radius: 0; box-sizing: border-box; color: #1a1a1a; font-family: inherit; font-size: .85rem; font-weight: 300; line-height: 1.4; letter-spacing: .015em; box-shadow: none; appearance: none; -webkit-appearance: none; transition: background-size .4s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, color .3s ease; } textarea.form-control { height: auto; min-height: 90px; padding: 12px 2px 8px; resize: vertical; line-height: 1.55; overflow-x: hidden; overflow-wrap: break-word; word-wrap: break-word; scrollbar-width: thin; scrollbar-color: #c9c0aa transparent; } textarea.form-control::-webkit-scrollbar { width: 6px; } textarea.form-control::-webkit-scrollbar-track { background: transparent; } textarea.form-control::-webkit-scrollbar-thumb { background: #d8d0bf; border-radius: var(--radius-2xs, 3px); } textarea.form-control::-webkit-scrollbar-thumb:hover { background: #b9ad8e; } select.form-control { /* Custom caret + the focus underline + neutral hairline */ background-image: linear-gradient(var(--brand-pri, #3264f5), var(--brand-pri, #3264f5)), linear-gradient(#e3dccb, #e3dccb), linear-gradient(45deg, transparent 50%, #9a907a 50%), linear-gradient(135deg, #9a907a 50%, transparent 50%); background-position: 50% 100%, 0 100%, calc(100% - 14px) calc(50% + 2px), calc(100% - 9px) calc(50% + 2px); background-size: 0 2px, 100% 1px, 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; cursor: pointer; } select.form-control:focus { background-size: 100% 2px, 100% 1px, 5px 5px, 5px 5px; } .form-control::placeholder { color: #b8b09a; font-weight: 300; letter-spacing: .015em; opacity: 1; transition: opacity .35s ease, color .35s ease; } .form-control:hover:not(:disabled):not([readonly]) { /* Darken the gray hairline on hover by re-coloring the second bg layer */ background-image: linear-gradient(var(--brand-pri, #3264f5), var(--brand-pri, #3264f5)), linear-gradient(#c9c0aa, #c9c0aa); } .form-control:focus, input.form-control:focus, textarea.form-control:focus { outline: 0; background-size: 100% 2px, 100% 1px; /* gray hairline stays — brand line overlays */ } .form-control:focus::placeholder { opacity: .45; color: #c9c0aa; } .form-control:not(:placeholder-shown):not(:focus) { color: #111; } .form-control:disabled, .form-control[readonly] { color: #9a907a; cursor: not-allowed; opacity: .65; } .form-control.is-invalid, .form-control:invalid:not(:placeholder-shown) { background-image: linear-gradient(#dd5a55, #dd5a55), linear-gradient(#dd5a55, #dd5a55); } .form-control.is-invalid:focus, .form-control:invalid:not(:placeholder-shown):focus { background-size: 100% 2px, 100% 1px; } /* Per-form spacing & layout */ .contact-form .form-control, .messaging-booking-form .form-control, .comment-form .form-control, .booking-form .form-control { margin-bottom: 16px; } .contact-form { text-align: left; max-width: 560px; } .contact-form textarea.form-control { min-height: 110px; } /* Two-column form grid — Bootstrap's .row/.col-md-6 stopped working when Bootstrap was removed, so we provide a scoped flex grid here. */ .contact-form > .row, .wp-block-hotelface-contact-form > form > .row, .messaging-booking-form > .row { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; } .contact-form > .row > [class*="col-"], .wp-block-hotelface-contact-form > form > .row > [class*="col-"], .messaging-booking-form > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding: 0; } @media (min-width: 576px) { .contact-form > .row > .col-sm-6, .messaging-booking-form > .row > .col-sm-6 { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); } } @media (min-width: 768px) { .contact-form > .row > .col-md-6, .wp-block-hotelface-contact-form > form > .row > .col-md-6, .messaging-booking-form > .row > .col-md-6 { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); } } /* Inline error helper */ .form-error { display: block; margin-top: -16px; margin-bottom: 18px; font-size: .72rem; color: #dd5a55; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease; } .form-error.is-visible, .form-control.is-invalid + .form-error { opacity: 1; transform: translateY(0); } /* Soften Chrome autofill yellow — keep transparent surface */ .form-control:-webkit-autofill, .form-control:-webkit-autofill:hover, .form-control:-webkit-autofill:focus { -webkit-text-fill-color: #1a1a1a; -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 1px 0 var(--brand-pri, #3264f5); transition: background-color 5000s ease-in-out 0s; } /* When the form sits on a darker / hero overlay surface */ .is-on-dark .form-control, .hero-section .form-control { color: #fff; border-bottom-color: rgba(255, 255, 255, .25); } .is-on-dark .form-control::placeholder, .hero-section .form-control::placeholder { color: rgba(255, 255, 255, .55); } .is-on-dark .form-control:focus, .hero-section .form-control:focus { border-bottom-color: rgba(255, 255, 255, .9); box-shadow: 0 1px 0 rgba(255, 255, 255, .9); } /* ============================================ Buttons — centralized ---------------------------------------------- ONE source of truth for every button in the theme. Theming flows from CSS variables set in functions.php (--brand-pri / --brand-sec / --brand-pri-text / --brand-sec-text), so anything the WP-admin color pickers emit propagates everywhere automatically. Variants: .btn-pri solid brand primary .btn-pri-light white card with brand border .btn-sec solid brand secondary .btn-gradient pri — sec linear gradient (CTA) .btn-white solid white .btn-white-bordered / .btn-transparent-white outlined white (hero) .btn-black solid dark .btn-transparent-black outlined dark .btn-ghost text + brand color, no fill Sizes: .btn-small / .btn-sm dense .btn-medium / .btn-md default .btn-large / .btn-lg hero CTA Animations (all variants): • Lift -2px + deepen shadow on :hover • Scale 0.97 on :active for press feedback • Shine sweep across the surface on :hover • Icon (i.fa*) translates 4px on :hover for arrow CTAs ============================================ */ /* Component tokens — hotel-grade refinement. Keep all variants brand-color driven via --brand-pri / --brand-sec. */ :root { --btn-radius: 12px; /* slightly tighter, more refined */ --btn-radius-lg: 20px; --btn-radius-sm: 16px; --btn-radius-pill: 999px; /* for .btn-pill / .btn-luxe */ --btn-pad-y: 13px; /* more vertical breathing */ --btn-pad-x: 28px; /* generous horizontal */ --btn-pad-y-sm: 9px; --btn-pad-x-sm: 18px; --btn-pad-y-lg: 17px; --btn-pad-x-lg: 36px; --btn-pad-top-bias: 0px; --btn-font: .82rem; --btn-font-sm: .72rem; --btn-font-lg: .92rem; --btn-weight: 500; /* medium weight reads more substantial */ --btn-tracking: .06em; /* wider tracking — hospitality feel */ --btn-tracking-lg: .08em; /* even wider for hero CTAs */ /* Layered atmospheric shadows — softer than a single drop shadow, gives the button presence without harshness. */ --btn-shadow: 0 1px 1px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .03); --btn-shadow-hover: 0 14px 34px -12px color-mix(in srgb, var(--brand-pri, #3264f5) 32%, transparent), 0 6px 16px -6px rgba(15, 23, 42, .12), 0 1px 2px rgba(15, 23, 42, .04); --btn-shadow-hover-neutral: 0 14px 34px -12px rgba(15, 23, 42, .22), 0 6px 16px -6px rgba(15, 23, 42, .14); /* Long, gentle motion — matches the new reveal language. */ --btn-ease: cubic-bezier(.16, 1, .3, 1); --btn-ease-press: cubic-bezier(.4, 0, .2, 1); --btn-duration: 520ms; --btn-duration-fast: 220ms; } .btn, button.btn, a.btn, input[type="submit"].btn { position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; padding: calc(var(--btn-pad-y) + var(--btn-pad-top-bias)) var(--btn-pad-x) calc(var(--btn-pad-y) - var(--btn-pad-top-bias)); font-family: inherit; font-size: var(--btn-font); font-weight: var(--btn-weight); line-height: 1 !important; letter-spacing: var(--btn-tracking); text-transform: none; text-decoration: none; border: 1px solid transparent; border-radius: var(--btn-radius); cursor: pointer; user-select: none; overflow: hidden; isolation: isolate; white-space: nowrap; vertical-align: middle; transition: background-color var(--btn-duration) var(--btn-ease), background-position var(--btn-duration) var(--btn-ease), color var(--btn-duration) var(--btn-ease), border-color var(--btn-duration) var(--btn-ease), box-shadow var(--btn-duration) var(--btn-ease), transform var(--btn-duration) var(--btn-ease), opacity var(--btn-duration-fast) var(--btn-ease) !important; } /* Soft inner top highlight — barely-there gradient from white at the top edge to transparent. Always-on at low opacity, deepens slightly on hover. Gives buttons that "lit from above" hospitality feel. */ .btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 55%); pointer-events: none; opacity: .55; transition: opacity var(--btn-duration) var(--btn-ease); z-index: 1; } /* Slow ambient sheen — one wide diagonal pass on hover. Feels like light catching brushed metal, not a flashlight sweep. */ .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .14) 50%, transparent 100%); transform: skewX(-18deg); pointer-events: none; opacity: 0; transition: left 1100ms var(--btn-ease), opacity 200ms var(--btn-ease); z-index: 1; } .btn > * { position: relative; z-index: 2; } .btn:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); } .btn:hover::before { opacity: 1; } .btn:hover::after { left: 110%; opacity: 1; } .btn:active { transform: translateY(0) scale(.985); transition: transform 120ms var(--btn-ease-press), box-shadow 200ms var(--btn-ease-press) !important; } .btn:focus { outline: 0; } .btn:focus-visible { outline: 0; box-shadow: var(--btn-shadow-hover), 0 0 0 4px color-mix(in srgb, var(--brand-pri, #3264f5) 18%, transparent); } .btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .btn:disabled::before, .btn[disabled]::before, .btn:disabled::after, .btn[disabled]::after { display: none; } /* Icon micro-interaction — slow, subtle slide */ .btn i, .btn .fas, .btn .far, .btn .fab { transition: transform var(--btn-duration) var(--btn-ease), opacity var(--btn-duration-fast) var(--btn-ease); } .btn:hover i:last-child, .btn:hover .fas:last-child, .btn:hover .far:last-child, .btn:hover .fab:last-child { transform: translateX(3px); } .btn:hover i:first-child, .btn:hover .fas:first-child, .btn:hover .far:first-child, .btn:hover .fab:first-child { transform: translateX(-2px); } /* ---- Sizes — token-driven for proportional scaling ---- */ .btn.btn-small, .btn.btn-sm { padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm); font-size: var(--btn-font-sm); border-radius: var(--btn-radius-sm); letter-spacing: var(--btn-tracking); gap: 6px; } .btn.btn-medium, .btn.btn-md { /* default size — uses base padding/font */ } .btn.btn-large, .btn.btn-lg { padding: var(--btn-pad-y-lg) var(--btn-pad-x-lg); font-size: var(--btn-font-lg); letter-spacing: var(--btn-tracking-lg); border-radius: var(--btn-radius-lg); gap: 12px; } /* ---- Variants — every one driven by --brand-pri / --brand-sec ---- */ /* Primary — solid brand primary, refined hover deepens via color-mix */ .btn.btn-pri { background: var(--brand-pri, #3264f5); color: var(--brand-pri-text, #fff); border-color: var(--brand-pri, #3264f5); box-shadow: var(--btn-shadow), inset 0 1px 0 0 color-mix(in srgb, var(--brand-pri-text, #fff) 18%, transparent); } .btn.btn-pri:hover { background: color-mix(in srgb, var(--brand-pri, #3264f5) 92%, #000); border-color: color-mix(in srgb, var(--brand-pri, #3264f5) 92%, #000); color: var(--brand-pri-text, #fff); } /* Secondary — solid brand secondary */ .btn.btn-sec { background: var(--brand-sec, #7202bb); color: var(--brand-sec-text, #fff); border-color: var(--brand-sec, #7202bb); box-shadow: var(--btn-shadow), inset 0 1px 0 0 color-mix(in srgb, var(--brand-sec-text, #fff) 18%, transparent); } .btn.btn-sec:hover { background: color-mix(in srgb, var(--brand-sec, #7202bb) 92%, #000); border-color: color-mix(in srgb, var(--brand-sec, #7202bb) 92%, #000); color: var(--brand-sec-text, #fff); } /* Light primary — white card with brand-colored border, fills on hover */ .btn.btn-pri-light { background: var(--color-white, #fff); color: var(--color-fg-strong, #1f1f1f); border-color: color-mix(in srgb, var(--brand-pri, #3264f5) 24%, var(--color-border, #e2e8f0)); box-shadow: var(--btn-shadow); } .btn.btn-pri-light:hover { background: color-mix(in srgb, var(--brand-pri, #3264f5) 6%, var(--color-white, #fff)); color: var(--brand-pri, #3264f5); border-color: var(--brand-pri, #3264f5); } /* Gradient — flagship CTA. The background-position drift creates a slow "warm light moves across the surface" effect at hover. */ .btn.btn-gradient { background-image: linear-gradient(115deg, var(--brand-pri, #3264f5) 0%, var(--brand-sec, #7202bb) 50%, var(--brand-pri, #3264f5) 100%); background-size: 220% 100%; background-position: 0% 50%; color: var(--brand-pri-text, #fff); border-color: transparent; box-shadow: var(--btn-shadow), inset 0 1px 0 0 color-mix(in srgb, var(--brand-pri-text, #fff) 22%, transparent); } .btn.btn-gradient:hover { background-position: 100% 50%; color: var(--brand-pri-text, #fff); box-shadow: var(--btn-shadow-hover), inset 0 1px 0 0 color-mix(in srgb, var(--brand-pri-text, #fff) 22%, transparent); } /* Solid white — pristine, with elevated shadow on hover */ .btn.btn-white { background: var(--color-white, #fff); color: var(--color-fg-strong, #1f1f1f); border-color: var(--color-white, #fff); box-shadow: var(--btn-shadow); } .btn.btn-white:hover { background: var(--color-white, #fff); color: var(--brand-pri, #3264f5); border-color: color-mix(in srgb, var(--brand-pri, #3264f5) 30%, var(--color-white, #fff)); box-shadow: var(--btn-shadow-hover); } /* Outlined white — sits on hero/dark backgrounds. Glass-fill on hover. */ .btn.btn-white-bordered, .btn.btn-transparent-white { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .50); color: var(--color-white, #fff); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .btn.btn-white-bordered:hover, .btn.btn-transparent-white:hover { background: rgba(255, 255, 255, .14); color: var(--color-white, #fff); border-color: rgba(255, 255, 255, .95); box-shadow: var(--btn-shadow-hover-neutral); } /* Sheen on dark variants is white-tinted */ .btn.btn-white-bordered::after, .btn.btn-transparent-white::after { background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .22) 50%, transparent 100%); } /* Solid black — deep, with warm subtle inner highlight */ .btn.btn-black { background: var(--color-fg-strong, #1a1a1a); color: var(--color-white, #fff); border-color: var(--color-fg-strong, #1a1a1a); box-shadow: var(--btn-shadow), inset 0 1px 0 0 rgba(255, 255, 255, .08); } .btn.btn-black:hover { background: var(--color-black, #000); border-color: var(--color-black, #000); color: var(--color-white, #fff); box-shadow: var(--btn-shadow-hover-neutral); } /* Outlined dark — fills with brand on hover for elegant transition */ .btn.btn-transparent-black { background: transparent; color: var(--color-fg-strong, #1a1a1a); border-color: color-mix(in srgb, var(--color-fg-strong, #1a1a1a) 18%, transparent); } .btn.btn-transparent-black:hover { background: var(--color-fg-strong, #1a1a1a); color: var(--color-white, #fff); border-color: var(--color-fg-strong, #1a1a1a); } /* Ghost — text-only with subtle underline that grows on hover. The most refined tertiary action — appropriate for "Read more". */ .btn.btn-ghost { background: transparent; color: var(--brand-pri, #3264f5); border-color: transparent; box-shadow: none; padding-left: var(--space-3, 12px); padding-right: var(--space-3, 12px); } .btn.btn-ghost::before, .btn.btn-ghost::after { display: none; } .btn.btn-ghost:hover { background: color-mix(in srgb, var(--brand-pri, #3264f5) 8%, transparent); color: var(--brand-pri, #3264f5); box-shadow: none; } /* ---- Premium variants — for hero/booking CTAs ---- */ /* Pill — fully rounded, hospitality-classic. Pair with any color variant. */ .btn.btn-pill { border-radius: var(--btn-radius-pill, 999px); } /* Luxe — pill + gradient + serif-friendly tracking. The flagship hero CTA. */ .btn.btn-luxe { border-radius: var(--btn-radius-pill, 999px); padding: var(--btn-pad-y-lg) calc(var(--btn-pad-x-lg) + 8px); letter-spacing: var(--tracking-wider, .08em); text-transform: uppercase; font-size: var(--btn-font-lg); font-weight: var(--weight-semibold, 600); background-image: linear-gradient(115deg, var(--brand-pri, #3264f5) 0%, var(--brand-sec, #7202bb) 50%, var(--brand-pri, #3264f5) 100%); background-size: 240% 100%; background-position: 0% 50%; color: var(--brand-pri-text, #fff); border-color: transparent; box-shadow: var(--btn-shadow), inset 0 1px 0 0 color-mix(in srgb, var(--brand-pri-text, #fff) 22%, transparent), 0 12px 32px -10px color-mix(in srgb, var(--brand-pri, #3264f5) 35%, transparent); } .btn.btn-luxe:hover { background-position: 100% 50%; color: var(--brand-pri-text, #fff); box-shadow: var(--btn-shadow-hover), inset 0 1px 0 0 color-mix(in srgb, var(--brand-pri-text, #fff) 22%, transparent), 0 18px 42px -12px color-mix(in srgb, var(--brand-pri, #3264f5) 50%, transparent); } /* Soft — low-contrast brand-tinted button for elegant secondary actions on light cards. Brand color but never shouts. */ .btn.btn-soft { background: color-mix(in srgb, var(--brand-pri, #3264f5) 10%, var(--color-white, #fff)); color: var(--brand-pri, #3264f5); border-color: color-mix(in srgb, var(--brand-pri, #3264f5) 18%, transparent); box-shadow: none; } .btn.btn-soft:hover { background: color-mix(in srgb, var(--brand-pri, #3264f5) 16%, var(--color-white, #fff)); color: var(--brand-pri, #3264f5); border-color: color-mix(in srgb, var(--brand-pri, #3264f5) 36%, transparent); } /* Hover-to-white shorthand — kept for backward compatibility */ .btn.btn-hvr-white:hover { background: var(--color-white, #fff); color: var(--brand-pri, #2b2b2b); border-color: var(--color-white, #fff); } /* Icon-only square button (sidebar share/whatsapp/phone) */ .btn.sidebar_icon_button { width: 48px; height: 48px; padding: 0; border-radius: var(--btn-radius); gap: 0; } .btn.sidebar_icon_button::before, .btn.sidebar_icon_button::after { display: none; } /* Tighten side-by-side spacing — flex parents handle it via gap */ .btn + .btn { margin-left: 0; } .room-detail *, .room-detail *::before, .room-detail *::after { box-sizing: border-box; } .room-detail h1, .room-detail h2, .room-detail h3 { margin: 0; line-height: 1.25; font-weight: 700; color: #1c1c1c; } .room-detail p { margin: 0; line-height: 1.6; color: #555; } .room-detail a { color: inherit; } /* room-detail uses the global .container — no separate width rule. */ /* Breadcrumbs — sits below the gallery now */ .room-detail__breadcrumbs { background: transparent; border-bottom: none; padding: 18px 0 6px; font-size: .85rem; } /* Header */ .room-detail__header { padding: 8px 0 24px; } .room-detail__title { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 6px; letter-spacing: -.01em; } .room-detail__pro { font-size: 1rem; color: #6a6a6a; margin-bottom: 14px; } .room-detail__quick { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; font-size: .92rem; color: #444; } .room-detail__quick li { display: inline-flex; align-items: center; gap: 8px; } .room-detail__quick i { color: #999; font-size: .95rem; } /* Hero gallery — full-bleed Airbnb-style collage at the very top of the page */ .room-detail__hero { padding: 0; margin-top: 0; position: relative; } /* Airbnb-style 2-col collage: 1 large + 4 small */ .room-gallery { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "main thumb1 thumb2" "main thumb3 thumb4"; gap: 8px; width: 100%; max-width: none; margin: 0; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 0; } .room-gallery__cell { position: relative; display: block; overflow: hidden; background: #f0ece4; line-height: 0; transition: filter .35s ease; } .room-gallery__cell--main { grid-area: main; } .room-gallery__cell:nth-of-type(2) { grid-area: thumb1; } .room-gallery__cell:nth-of-type(3) { grid-area: thumb2; } .room-gallery__cell:nth-of-type(4) { grid-area: thumb3; } .room-gallery__cell:nth-of-type(5) { grid-area: thumb4; } .room-gallery__cell--hidden { display: none; } .room-gallery__cell img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22, 1, .36, 1); border-radius: 0 !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } .room-gallery__cell:hover img { transform: scale(1.04); } .room-gallery__cell:hover { filter: brightness(.95); } .room-gallery__cell--video::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .15); pointer-events: none; } .room-gallery__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; border-radius: var(--radius-circle, 50%); font-size: 1.3rem; pointer-events: none; z-index: 2; } /* "Show all photos" button — frosted glass overlay */ .room-gallery__show-all { position: absolute; right: 24px; bottom: 24px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius-pill, 999px); font-family: inherit; font-size: .82rem; font-weight: 400; letter-spacing: .02em; cursor: pointer; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 24px rgba(0, 0, 0, .18), 0 0 0 0 rgba(255, 255, 255, 0); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, background .35s ease, border-color .35s ease; } .room-gallery__show-all i { font-size: .82rem; transition: transform .35s ease; } .room-gallery__show-all:hover { background: rgba(255, 255, 255, .32); border-color: rgba(255, 255, 255, .55); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 14px 32px rgba(0, 0, 0, .25), 0 0 0 6px rgba(255, 255, 255, .06); } .room-gallery__show-all:hover i { transform: scale(1.08); } .room-gallery__show-all:active { transform: translateY(0); } .room-gallery__show-all:focus-visible { outline: 0; border-color: rgba(255, 255, 255, .9); box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 14px 32px rgba(0, 0, 0, .28), 0 0 0 4px rgba(255, 255, 255, .25); } /* Mobile swiper — hidden on desktop, edge-to-edge on mobile */ .room-gallery__swiper { display: none; width: 100%; height: auto; aspect-ratio: 4 / 3; background: #f0ece4; overflow: hidden; /* Defensive — strip any inherited mask/filter/backdrop that might cause a vignette or oval shape over the image. */ -webkit-mask: none !important; mask: none !important; filter: none !important; backdrop-filter: none !important; } .room-gallery__swiper .swiper-wrapper { height: 100%; } .room-gallery__swiper .swiper-slide { position: relative; width: 100%; height: 100%; line-height: 0; background: #f0ece4; -webkit-mask: none !important; mask: none !important; filter: none !important; box-shadow: none !important; opacity: 1 !important; } .room-gallery__swiper .swiper-slide::before, .room-gallery__swiper .swiper-slide::after { display: none !important; } .room-gallery__swiper .swiper-slide img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover; object-position: center center; display: block; border-radius: 0 !important; border: 0 !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; filter: none !important; -webkit-mask: none !important; mask: none !important; clip-path: none !important; transform: none !important; opacity: 1 !important; } /* Legacy alias kept so older selectors still match */ .room-detail__gallery { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-xl, 20px); overflow: hidden; background: #f0f0f0; } /* Fallback for browsers without aspect-ratio support — use padding hack via ::before */ @supports not (aspect-ratio: 16 / 9) { .room-detail__gallery::before { content: ""; display: block; padding-top: 56.25%; } .room-detail__gallery > .swiper-wrapper { position: absolute; inset: 0; } } .room-detail__gallery .swiper-wrapper { height: 100%; } .room-detail__slide, .room-detail__slide-link { width: 100%; height: 100%; display: block; line-height: 0; } .room-detail__slide-link img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 0 !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } .room-detail__slide--video { position: relative; } .room-detail__play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; border-radius: var(--radius-circle, 50%); font-size: 1.5rem; pointer-events: none; } .room-detail__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: var(--z-raised, 3); width: 40px; height: 40px; border-radius: var(--radius-pill, 50%); border: 0; background: color-mix(in srgb, var(--color-white, #fff) 95%, transparent); color: var(--color-fg-strong, #2b2b2b); cursor: pointer; box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,.18)); display: inline-flex; align-items: center; justify-content: center; transition: background var(--duration-fast, .2s) ease, transform var(--duration-fast, .2s) ease; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; isolation: isolate; } .room-detail__nav:hover { background: var(--color-white, #fff); transform: translateY(-50%) scale(1.05); } .room-detail__nav--prev { left: var(--space-4, 14px); } .room-detail__nav--next { right: var(--space-4, 14px); } .room-detail__counter { position: absolute !important; top: 14px !important; right: 14px !important; bottom: auto !important; left: auto !important; width: auto !important; height: auto !important; max-width: max-content !important; transform: none !important; z-index: 3; background: rgba(0,0,0,.6); color: #fff; border-radius: var(--radius-pill, 999px); padding: 5px 11px; font-size: .78rem; line-height: 1; letter-spacing: .02em; backdrop-filter: blur(2px); display: inline-flex !important; align-items: center; gap: 3px; } .room-detail__counter-sep { opacity: .65; } /* Hard cap — any swiper pagination/fraction inside the room gallery must remain a small badge, never a full-width overlay. */ .room-gallery__swiper .swiper-pagination, .room-gallery__swiper .swiper-pagination-fraction { width: auto !important; height: auto !important; max-width: max-content !important; bottom: auto !important; left: auto !important; } /* Layout: content + sticky sidebar */ .room-detail__main { padding: 10px 0 50px; } .room-detail__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; } .room-detail__content { display: flex; flex-direction: column; gap: 36px; } /* Section */ .room-detail__section h2 { font-size: 1.35rem; margin-bottom: 14px; } .room-detail__section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; position: relative; } .room-detail__section-head h2 { margin: 0; flex: 1; } /* Share */ .room-detail__share { display: inline-flex; align-items: center; gap: var(--space-2, 8px); padding: var(--space-2, 8px) var(--space-4, 14px); border: 1px solid var(--color-border, #e2e2e2); background: var(--color-white, #fff); border-radius: var(--btn-radius, 16px); cursor: pointer; font-size: .85rem; color: var(--color-fg-strong, #333); transition: border-color var(--duration-fast, .2s) ease, background var(--duration-fast, .2s) ease; } .room-detail__share:hover { border-color: var(--color-border-strong, #c5c5c5); background: var(--color-bg-alt, #fafafa); } /* Share menu — consumes the same --menu-* tokens as .select-box__menu (header language switcher) so every dropdown in the theme reads as the same component family. Includes the same fade-slide entrance. */ .room-detail__share-menu { position: absolute; top: calc(100% + var(--menu-offset, 8px)); right: 0; z-index: var(--menu-z, 1000); min-width: var(--menu-min-width, 200px); background: var(--menu-bg, #fff); color: var(--menu-fg, #2b2b2b); border: var(--menu-border, 1px solid #ececec); border-radius: var(--menu-radius, 12px); box-shadow: var(--menu-shadow, 0 12px 28px rgba(0,0,0,.12)); padding: var(--menu-pad, 6px); list-style: none; margin: 0; opacity: 0; transform: translateY(var(--menu-enter-distance, -4px)); pointer-events: none; transition: opacity var(--menu-enter-duration, .2s) var(--menu-enter-ease, ease), transform var(--menu-enter-duration, .2s) var(--menu-enter-ease, ease); } .room-detail__share-menu:not([hidden]) { opacity: 1; transform: translateY(0); pointer-events: auto; } .room-detail__share-menu[hidden] { display: block; visibility: hidden; } .room-detail__share-menu li { margin: 0; } .room-detail__share-menu li + li { margin-top: 2px; } .room-detail__share-menu a { display: flex; align-items: center; gap: var(--menu-item-gap, 10px); padding: var(--menu-item-pad-y, 9px) var(--menu-item-pad-x, 12px); border-radius: var(--menu-item-radius, 8px); font-size: var(--menu-item-font, .9rem); color: var(--menu-item-fg, #333); line-height: 1.2; text-decoration: none; transition: background var(--menu-enter-duration, .2s) var(--menu-enter-ease, ease), color var(--menu-enter-duration, .2s) var(--menu-enter-ease, ease); } .room-detail__share-menu a:hover { background: var(--menu-item-bg-hover, #f5f5f5); color: var(--menu-item-fg-hover, #1a1a1a); } .room-detail__share-menu i { width: var(--menu-item-icon-w, 16px); color: var(--menu-item-icon-fg, #777); } /* Description prose */ .room-detail__prose { font-size: .98rem; color: #444; line-height: 1.7; } .room-detail__prose p { margin-bottom: 1em; } .room-detail__prose p:last-child { margin-bottom: 0; } /* Features (amenities / promos) */ .room-detail__features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; } .room-detail__features li { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: #444; padding: 4px 0; } .room-detail__features i { width: 22px; height: 22px; background: color-mix(in srgb, var(--brand-pri, #3264f5) 12%, #fff); color: var(--brand-pri, #3264f5); border-radius: var(--radius-circle, 50%); display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; flex-shrink: 0; } .room-detail__features--promo i { background: color-mix(in srgb, var(--brand-sec, #7202bb) 12%, #fff); color: var(--brand-sec, #7202bb); } /* Beds */ .room-detail__beds { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .room-detail__bed-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #ececec; border-radius: var(--radius-md, 12px); background: #fff; } .room-detail__bed-card i { width: 40px; height: 40px; border-radius: var(--radius-sm, 10px); background: #f6f6f6; color: #555; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; } .room-detail__bed-card > div { display: flex; flex-direction: column; gap: 2px; } .room-detail__bed-type { font-weight: 600; color: #2b2b2b; font-size: .95rem; } .room-detail__bed-count { color: #777; font-size: .82rem; } /* Booking sidebar */ .room-detail__aside { position: relative; } .room-detail__booking { background: #fff; border: 1px solid #ececec; border-radius: var(--radius-xl, 20px); padding: 22px; box-shadow: 0 6px 24px rgba(0,0,0,.06); } .room-detail__booking-eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-pri, #3264f5); margin-bottom: 6px; } .room-detail__booking-title { font-size: 1.15rem; margin-bottom: 6px; } .room-detail__booking-desc { font-size: .88rem; color: #666; margin-bottom: 14px; } .room-detail__booking-meta { list-style: none; margin: 0 0 18px; padding: 12px 0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; display: flex; flex-wrap: wrap; gap: 18px; font-size: .9rem; color: #444; } .room-detail__booking-meta li { display: inline-flex; align-items: center; gap: 8px; } .room-detail__booking-meta i { color: #aaa; } .room-detail__booking-actions { display: flex; flex-direction: column; gap: 10px; } .room-detail__booking-actions .btn { width: 100%; } .room-detail__booking-contact { display: flex; gap: 10px; } .room-detail__booking-contact .btn { flex: 1 1 0; min-width: 0; width: 50%; } /* Related rooms */ .room-detail__related { background: #fafafa; padding: 50px 0 70px; border-top: 1px solid #efefef; } .room-detail__related-head { margin-bottom: 22px; } .room-detail__related-head h2 { font-size: 1.6rem; margin-bottom: 4px; } .room-detail__related-head p { color: #777; font-size: .95rem; } /* Mobile sticky CTA */ .room-detail__mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; padding: 10px 14px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid #ececec; box-shadow: 0 -4px 18px rgba(0,0,0,.08); gap: 10px; } .room-detail__mobile-cta .btn { flex: 1; } .room-detail__mobile-cta .room-detail__mobile-cta__icon { flex: 0 0 auto; aspect-ratio: 1; padding-left: 0 !important; padding-right: 0 !important; width: auto; } /* Responsive */ @media (max-width: 1023px) { .room-detail__layout { grid-template-columns: 1fr; gap: 28px; } .room-detail__aside { order: -1; } .room-detail__booking { padding: 18px; } } @media (max-width: 767px) { .room-detail__header { padding: 20px 0 12px; } .room-detail__hero { padding: 0 0 22px; margin-top: 0; } .room-gallery { display: none; } .room-gallery__swiper { display: block; } .room-detail__gallery { aspect-ratio: 4 / 3; border-radius: var(--radius-md, 14px); } .room-detail__main { padding: 6px 0 90px; } .room-detail__features { grid-template-columns: 1fr; } .room-detail__nav { width: 36px; height: 36px; } .room-detail__nav--prev { left: 8px; } .room-detail__nav--next { right: 8px; } .room-detail__related { padding: 36px 0 90px; } .room-detail__mobile-cta { display: flex; } .room-detail__aside { display: none; } } /* Content Gallery Block - Same Navigation Button Style as Rooms Swiper */ /* (legacy .wp-block-hotelface-content-gallery swiper overrides removed — the block now ships its own .cg-slider + .content-gallery__arrow/__pagination) */ /* Content gallery — mobile arrow sizing */ @media screen and (max-width: 768px) { .content-gallery__arrow { width: 38px; height: 38px; bottom: 16px; } .content-gallery__arrow svg { width: 16px; height: 16px; } .content-gallery__arrow--prev { right: 70px; left: auto; } .content-gallery__arrow--next { right: 16px; left: auto; } .content-gallery--media-left .content-gallery__arrow--prev { right: auto; left: 16px; } .content-gallery--media-left .content-gallery__arrow--next { right: auto; left: 70px; } .content-gallery { --swiper-pagination-bottom: 70px; } .content-gallery--media-left .content-gallery__pagination { left: 134px; right: 16px; } } .gutenberg-content section#rooms .container { padding-left: var(--container-pad); padding-right: var(--container-pad); margin-left: auto; margin-right: auto; max-width: var(--container-max); } .gutenberg-content section#rooms h2 { margin-bottom: 0.5rem; margin-top: 0; } .gutenberg-content section#rooms .color-sec { margin-bottom: 1rem; margin-top: 0; } /* Override general Gutenberg typography styles for rooms section */ .gutenberg-content section#rooms p { margin-bottom: 0.5em !important; } .gutenberg-content section#rooms h3 { margin-top: 0 !important; margin-bottom: 0 !important; font-size: 1.5em !important; } .gutenberg-content section#rooms h4, .gutenberg-content section#rooms h5, .gutenberg-content section#rooms h6 { margin-top: 0 !important; margin-bottom: 0.5em !important; } /* Override for room-list content specifically */ .gutenberg-content section#rooms .row p { margin-bottom: 0.2em !important; } .gutenberg-content section#rooms .row h3 { margin-top: 0 !important; margin-bottom: 0.3rem !important; } .gutenberg-content section#rooms .row h5 { margin-top: 0 !important; margin-bottom: 0.5em !important; } /* Remove spacing between title container and room-list container */ .gutenberg-content section#rooms .container + .container { margin-top: 0; padding-top: 0; } /* Ensure no spacing from parent Gutenberg content wrapper */ .gutenberg-content > .wp-block-hotelface-rooms:first-child { margin-top: 0 !important; } .gutenberg-content > .wp-block-hotelface-rooms:last-child { margin-bottom: 0 !important; } /* Match home template exactly - no extra spacing */ .gutenberg-content .wp-block-hotelface-rooms section#rooms { display: block; width: 100%; } /* Image full-width on mobile (under 728px) */ @media (max-width: 728px) { .gutenberg-content figure img { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; } .gutenberg-content .alignleft, .gutenberg-content .alignright { float: none !important; margin-left: 0 !important; margin-right: 0 !important; } .gutenberg-content figure { margin-left: 0 !important; margin-right: 0 !important; } } /* Featured Card Block Styles */ .wp-block-hotelface-featured-card { display: flex; gap: 2em; align-items: stretch; margin-bottom: 2em; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; /* Padding is controlled via inline styles from block attributes */ /* Only set default padding if not set via inline styles */ } /* Ensure flex items can shrink and don't overflow */ .wp-block-hotelface-featured-card:not(.full-width-stack) .wp-block-hotelface-featured-card-image, .wp-block-hotelface-featured-card:not(.full-width-stack) .wp-block-hotelface-featured-card-content { flex-shrink: 1; min-width: 0; max-width: 100%; } .wp-block-hotelface-featured-card.image-position-right { flex-direction: row-reverse; } .wp-block-hotelface-featured-card.full-width-stack { flex-direction: column !important; } .wp-block-hotelface-featured-card.full-width-stack .wp-block-hotelface-featured-card-image, .wp-block-hotelface-featured-card.full-width-stack .wp-block-hotelface-featured-card-content { width: 100% !important; flex: 0 0 100% !important; } /* ============================================ Featured Cards — multi-column grid wrapper ---------------------------------------------- Wrap multiple .wp-block-hotelface-featured-card blocks in a Group block with one of these classes (Block — Advanced — Additional CSS class): .featured-cards-grid auto-fit, min 240px .featured-cards-grid--2 2 cols on desktop .featured-cards-grid--3 3 cols on desktop .featured-cards-grid--4 4 cols on desktop Each child card flips to a vertical stack (image on top, content below) so it fits compact widths. ============================================ */ /* Apply grid to the wrapper itself OR to its inner container. WP Group block markup nests children inside .wp-block-group__inner-container. */ .featured-cards-grid, .featured-cards-grid--2, .featured-cards-grid--3, .featured-cards-grid--4, .featured-cards-grid > .wp-block-group__inner-container, .featured-cards-grid--2 > .wp-block-group__inner-container, .featured-cards-grid--3 > .wp-block-group__inner-container, .featured-cards-grid--4 > .wp-block-group__inner-container { display: grid; gap: 24px; width: 100%; margin-bottom: 2em; } .featured-cards-grid, .featured-cards-grid > .wp-block-group__inner-container { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .featured-cards-grid--2, .featured-cards-grid--2 > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } .featured-cards-grid--3, .featured-cards-grid--3 > .wp-block-group__inner-container { grid-template-columns: repeat(3, minmax(0, 1fr)); } .featured-cards-grid--4, .featured-cards-grid--4 > .wp-block-group__inner-container { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 991px) { .featured-cards-grid--3, .featured-cards-grid--4, .featured-cards-grid--3 > .wp-block-group__inner-container, .featured-cards-grid--4 > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 576px) { .featured-cards-grid, .featured-cards-grid--2, .featured-cards-grid--3, .featured-cards-grid--4, .featured-cards-grid > .wp-block-group__inner-container, .featured-cards-grid--2 > .wp-block-group__inner-container, .featured-cards-grid--3 > .wp-block-group__inner-container, .featured-cards-grid--4 > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 18px; } } /* When inside a multi-col grid, force each card vertical */ .featured-cards-grid .wp-block-hotelface-featured-card, .featured-cards-grid--2 .wp-block-hotelface-featured-card, .featured-cards-grid--3 .wp-block-hotelface-featured-card, .featured-cards-grid--4 .wp-block-hotelface-featured-card { flex-direction: column !important; margin-bottom: 0; gap: 1.25em; height: 100%; min-width: 0; } .featured-cards-grid .wp-block-hotelface-featured-card-image, .featured-cards-grid--2 .wp-block-hotelface-featured-card-image, .featured-cards-grid--3 .wp-block-hotelface-featured-card-image, .featured-cards-grid--4 .wp-block-hotelface-featured-card-image { width: 100% !important; flex: 0 0 auto !important; aspect-ratio: 4 / 3; } .featured-cards-grid .wp-block-hotelface-featured-card-image img, .featured-cards-grid--2 .wp-block-hotelface-featured-card-image img, .featured-cards-grid--3 .wp-block-hotelface-featured-card-image img, .featured-cards-grid--4 .wp-block-hotelface-featured-card-image img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .featured-cards-grid .wp-block-hotelface-featured-card-content, .featured-cards-grid--2 .wp-block-hotelface-featured-card-content, .featured-cards-grid--3 .wp-block-hotelface-featured-card-content, .featured-cards-grid--4 .wp-block-hotelface-featured-card-content { width: 100% !important; flex: 1 1 auto !important; display: flex; flex-direction: column; } /* Prevent FOUC: Apply responsive styles via CSS for immediate rendering */ /* JavaScript will fine-tune these based on breakpoint-specific settings */ /* Tablet breakpoint (768px - 1023px) - maintain desktop layout by default */ @media (min-width: 768px) and (max-width: 1023px) { .wp-block-hotelface-featured-card[data-tablet] { /* JavaScript will apply tablet-specific overrides */ /* Initial styles from PHP (desktop) will show, then JS updates if needed */ } } /* Mobile breakpoint (< 768px) - stack by default if mobile data exists */ @media (max-width: 767px) { .wp-block-hotelface-featured-card[data-mobile]:not([data-mobile="{}"]) { /* If mobile data exists, JavaScript will apply mobile-specific styles */ /* Initial styles from PHP (desktop) will show briefly, then JS updates */ } } .wp-block-hotelface-featured-card-image { display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 0; } .wp-block-hotelface-featured-card-image.image-align-top { align-items: flex-start; } .wp-block-hotelface-featured-card-image.image-align-center { align-items: center; } .wp-block-hotelface-featured-card-image.image-align-bottom { align-items: flex-end; } .wp-block-hotelface-featured-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; border: none !important; padding: 0 !important; box-sizing: border-box; } .wp-block-hotelface-featured-card-image { min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; } .wp-block-hotelface-featured-card-content { display: flex; flex-direction: column; justify-content: center; min-width: 0; max-width: 100%; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word; } .wp-block-hotelface-featured-card-content .featured-card-title { margin-top: 0; font-size: 1.5em; } .wp-block-hotelface-featured-card-content .featured-card-secondary-title { color: #666; font-size: 1.1em; margin: 0; } .wp-block-hotelface-featured-card-content .featured-card-description { margin-bottom: 1.5em; line-height: 1.6; } .wp-block-hotelface-featured-card-content .featured-card-description p { margin-bottom: 1em; } .wp-block-hotelface-featured-card-content .featured-card-description p:last-child { margin-bottom: 0; } /* Prevent button from stretching to full width */ .wp-block-hotelface-featured-card-content .btn { width: auto !important; display: inline-block !important; align-self: flex-start; } /* Responsive - Mobile (< 768px) - Only apply if not controlled by JavaScript */ @media (max-width: 767px) { .wp-block-hotelface-featured-card:not([data-desktop]):not([data-tablet]):not([data-mobile]) { flex-direction: column !important; gap: 1.5em; } .wp-block-hotelface-featured-card:not([data-desktop]):not([data-tablet]):not([data-mobile]).image-position-right { flex-direction: column !important; } .wp-block-hotelface-featured-card:not([data-desktop]):not([data-tablet]):not([data-mobile]) .wp-block-hotelface-featured-card-image { width: 100%; flex: 1 1 auto; } .wp-block-hotelface-featured-card:not([data-desktop]):not([data-tablet]):not([data-mobile]) .wp-block-hotelface-featured-card-content { width: 100%; } .wp-block-hotelface-featured-card:not([data-desktop]):not([data-tablet]):not([data-mobile]) .wp-block-hotelface-featured-card-content .featured-card-title { font-size: 1.3em; } } /* ======================================================================== Feature List Block ======================================================================== */ .wp-block-hotelface-feature-list { padding: 40px 0; } .wp-block-hotelface-feature-list .feature-list-header { text-align: center; margin-bottom: 32px; } .wp-block-hotelface-feature-list .feature-list-title { margin: 0 0 12px; font-size: 1.75em; font-weight: 700; } .wp-block-hotelface-feature-list .feature-list-description { max-width: 680px; margin: 0 auto; color: #666; font-size: 1rem; line-height: 1.6; } .wp-block-hotelface-feature-list .feature-list-description p:last-child { margin-bottom: 0; } .wp-block-hotelface-feature-list .feature-list-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; justify-items: center; } /* Optional explicit column counts via Block — Advanced — Additional CSS class: features-cols-2 / features-cols-3 / features-cols-4 */ .wp-block-hotelface-feature-list.features-cols-2 .feature-list-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wp-block-hotelface-feature-list.features-cols-3 .feature-list-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wp-block-hotelface-feature-list.features-cols-4 .feature-list-items { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 991px) { .wp-block-hotelface-feature-list.features-cols-3 .feature-list-items, .wp-block-hotelface-feature-list.features-cols-4 .feature-list-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Narrow viewports — switch from grid to a horizontal flex slider with scroll-snap. The mobile block below depends on this so DON'T re-force grid-template-columns: 1fr here (that's what stacked it vertically). */ .wp-block-hotelface-feature-list .feature-list-item { width: 100%; max-width: 280px; text-align: center; padding: 24px 16px; border-radius: var(--radius-md, 12px); background: transparent; transition: box-shadow 0.2s ease, transform 0.2s ease; } .wp-block-hotelface-feature-list .feature-list-item:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .wp-block-hotelface-feature-list .feature-list-item-icon { margin-bottom: 14px; } .wp-block-hotelface-feature-list .feature-list-item-icon img { width: 52px; height: 52px; object-fit: contain; display: block; margin: 0 auto; } .wp-block-hotelface-feature-list .feature-list-item-icon--text { display: flex; align-items: center; justify-content: center; } .wp-block-hotelface-feature-list .feature-list-item-icon-text { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: var(--radius-circle, 50%); background: rgba(0, 0, 0, 0.04); font-size: 48px; line-height: 1; } @media (max-width: 767px) { .wp-block-hotelface-feature-list .feature-list-item-icon-text { width: 72px; height: 72px; font-size: 40px; } } .wp-block-hotelface-feature-list .feature-list-item-title { font-size: 16px; margin: 0 0 6px; color: #222; } .wp-block-hotelface-feature-list .feature-list-item-desc { font-size: 14px; color: #777; margin: 0; line-height: 1.5; } /* Tablet */ @media (max-width: 991px) { .wp-block-hotelface-feature-list .feature-list-items { gap: 16px; } .wp-block-hotelface-feature-list .feature-list-item { width: 220px; padding: 20px 12px; } } /* Narrow viewports — horizontal slider with scroll-snap. Switches container from grid → flex, full-bleed left/right, hidden scrollbar (consistent with .hf-gallery). */ @media (max-width: 767px) { .wp-block-hotelface-feature-list { padding: var(--space-7, 28px) 0; } .wp-block-hotelface-feature-list .feature-list-items, .wp-block-hotelface-feature-list.features-cols-2 .feature-list-items, .wp-block-hotelface-feature-list.features-cols-3 .feature-list-items, .wp-block-hotelface-feature-list.features-cols-4 .feature-list-items { display: flex; grid-template-columns: none; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: var(--space-4, 16px); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--container-pad, 16px); scrollbar-width: none; -ms-overflow-style: none; /* Edge-bleed: pull out to viewport edges so first/last item can snap flush at the screen edges. */ margin-inline: calc(var(--container-pad, 16px) * -1); padding-inline: var(--container-pad, 16px); } .wp-block-hotelface-feature-list .feature-list-items::-webkit-scrollbar { display: none; } .wp-block-hotelface-feature-list .feature-list-item { flex: 0 0 auto; width: clamp(180px, 62vw, 240px); min-width: 0; max-width: none; scroll-snap-align: start; scroll-snap-stop: always; padding: var(--space-5, 18px) var(--space-3, 12px); } .wp-block-hotelface-feature-list .feature-list-title { font-size: 1.4em; } } /* ======================================================================== Todo List Block ======================================================================== */ .wp-block-hotelface-todo-list { padding: 40px 0; } .wp-block-hotelface-todo-list .todo-list-title { font-size: 1.6em; font-weight: 700; margin: 0 0 12px; text-align: center; } .wp-block-hotelface-todo-list .todo-list-title + .todo-list-subtitle { margin-top: -4px; } .wp-block-hotelface-todo-list .todo-list-subtitle { font-size: 1.15rem; line-height: 1.6; color: #666; text-align: center; max-width: 640px; margin: 0 auto 28px; } .wp-block-hotelface-todo-list .todo-list-timeline { position: relative; max-width: 640px; margin: 0 auto; } .wp-block-hotelface-todo-list .todo-list-item { display: flex; align-items: stretch; position: relative; } .wp-block-hotelface-todo-list .todo-list-marker { display: flex; flex-direction: column; align-items: center; width: 28px; flex-shrink: 0; padding-top: 4px; } .wp-block-hotelface-todo-list .todo-list-dot { width: 14px; height: 14px; border-radius: var(--radius-circle, 50%); flex-shrink: 0; position: relative; z-index: 1; opacity: 0.85; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06); } .wp-block-hotelface-todo-list .todo-list-line { width: 2px; flex: 1; background: #e0e0e0; min-height: 16px; } .wp-block-hotelface-todo-list .todo-list-content { flex: 1; padding: 0 0 24px 16px; display: flex; flex-direction: column; gap: 2px; } .wp-block-hotelface-todo-list .todo-list-item:last-child .todo-list-content { padding-bottom: 0; } .wp-block-hotelface-todo-list .todo-list-label { font-weight: 700; letter-spacing: 0.01em; } .wp-block-hotelface-todo-list .todo-list-item-title { font-size: 1.4rem; color: #222; line-height: 1.4; margin: 0; display: block; } .wp-block-hotelface-todo-list .todo-list-text { color: #666; line-height: 1.55; } /* Hover effect on items */ .wp-block-hotelface-todo-list .todo-list-item:hover .todo-list-dot { transform: scale(1.25); transition: transform 0.2s ease; } /* Note box */ .wp-block-hotelface-todo-list .todo-list-note { display: flex; align-items: flex-start; gap: 14px; max-width: 640px; margin: 28px auto 0; padding: 16px 20px; background: rgba(255, 193, 7, 0.08); border-left: 3px solid #f0b429; border-radius: var(--radius-sm, 8px); } .wp-block-hotelface-todo-list .todo-list-note-icon { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: #f0b429; color: #fff; border-radius: var(--radius-circle, 50%); font-size: 0.95rem; line-height: 1; } .wp-block-hotelface-todo-list .todo-list-note-text { margin: 0; font-size: 1.15rem; line-height: 1.6; color: #5a4a1f; } /* Tablet */ @media (max-width: 991px) { .wp-block-hotelface-todo-list .todo-list-timeline { max-width: 520px; } } /* Mobile */ @media (max-width: 767px) { .wp-block-hotelface-todo-list { padding: 28px 0; } .wp-block-hotelface-todo-list .todo-list-title { font-size: 1.3em; margin-bottom: 10px; } .wp-block-hotelface-todo-list .todo-list-subtitle { font-size: 1rem; margin-bottom: 20px; } .wp-block-hotelface-todo-list .todo-list-note { margin-top: 20px; padding: 12px 14px; gap: 10px; } .wp-block-hotelface-todo-list .todo-list-note-icon { width: 26px; height: 26px; font-size: 0.85rem; } .wp-block-hotelface-todo-list .todo-list-note-text { font-size: 1rem; } .wp-block-hotelface-todo-list .todo-list-content { padding-bottom: 20px; padding-left: 12px; } .wp-block-hotelface-todo-list .todo-list-item-title { font-size: 1rem; } .wp-block-hotelface-todo-list .todo-list-text { font-size: 0.9rem; } } /* ============================================ Site footer — modern, animated, responsive Driven by --brand-pri / --brand-sec from admin. ============================================ */ .site-footer { --footer-bg: color-mix(in srgb, var(--brand-pri, #3264f5) 14%, #14161b); --footer-bg-2: color-mix(in srgb, var(--brand-sec, #7202bb) 12%, #0e1014); --footer-fg: #f3f4f7; --footer-muted: color-mix(in srgb, var(--footer-fg) 70%, transparent); --footer-line: color-mix(in srgb, var(--footer-fg) 14%, transparent); position: relative; background: radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--brand-pri, #3264f5) 30%, transparent) 0%, transparent 60%), radial-gradient(70% 60% at 100% 100%, color-mix(in srgb, var(--brand-sec, #7202bb) 28%, transparent) 0%, transparent 60%), var(--footer-bg); color: var(--footer-fg); padding-block: clamp(56px, 8vw, 96px) 0; overflow: hidden; isolation: isolate; margin-top: 60px; } .site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-pri, #3264f5), var(--brand-sec, #7202bb), transparent); opacity: .9; z-index: 1; } .site-footer__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(40px, 6vw, 72px); } /* Column reveal on scroll */ .site-footer__col { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); } .site-footer.is-in-view .site-footer__col { opacity: 1; transform: none; } .site-footer.is-in-view .site-footer__col:nth-child(1) { transition-delay: 0ms; } .site-footer.is-in-view .site-footer__col:nth-child(2) { transition-delay: 80ms; } .site-footer.is-in-view .site-footer__col:nth-child(3) { transition-delay: 160ms; } .site-footer.is-in-view .site-footer__col:nth-child(4) { transition-delay: 240ms; } /* Headings */ .site-footer__heading { position: relative; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--footer-fg); margin: 0 0 22px; padding-bottom: 12px; } .site-footer__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; border-radius: var(--radius-2xs, 2px); background: linear-gradient(90deg, var(--brand-pri, #3264f5), var(--brand-sec, #7202bb)); transition: width .35s ease; } .site-footer__col:hover .site-footer__heading::after { width: 56px; } /* Brand */ .site-footer__logo { display: inline-block; margin-bottom: 18px; transition: transform .3s ease, opacity .3s ease; } .site-footer__logo:hover { transform: translateY(-2px); opacity: .9; } .site-footer__logo img { max-width: 180px; height: auto; display: block; } .site-footer__brand-name { font-size: 1.25rem; margin: 0 0 14px; } .site-footer__slogan { color: var(--footer-muted); line-height: 1.6; margin: 0 0 18px; max-width: 36ch; } .site-footer__address { display: flex; gap: 12px; align-items: center; color: var(--footer-muted); line-height: 1.55; margin: 0; } .site-footer__address i { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-circle, 50%); border: 1px solid var(--footer-line); background: rgba(255,255,255,.04); color: var(--brand-pri, #3264f5); font-size: .85rem; transition: background .3s ease, color .3s ease, border-color .3s ease; } .site-footer__address:hover i { background: linear-gradient(135deg, var(--brand-pri, #3264f5), var(--brand-sec, #7202bb)); color: var(--brand-pri-text, #fff); border-color: transparent; } .site-footer__address span { flex: 1 1 auto; } /* Menu */ .site-footer__menu-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .site-footer__menu-link { display: inline-block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: max-content; color: var(--footer-muted); font-size: .95rem; line-height: 1.5; padding: 2px 0; text-decoration: none; background-image: linear-gradient(var(--brand-pri, #3264f5), var(--brand-pri, #3264f5)); background-repeat: no-repeat; background-position: 0 calc(100% - 2px); background-size: 0% 1px; transition: color .35s ease, background-size .4s cubic-bezier(.22, 1, .36, 1); } .site-footer__menu-link:hover, .site-footer__menu-link:focus-visible { color: var(--footer-fg); background-size: 100% 1px; } /* Contact */ .site-footer__contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .site-footer__contact-item { display: flex; align-items: center; gap: 14px; color: var(--footer-fg); text-decoration: none; transition: transform .25s ease; } .site-footer__contact-item:hover { text-decoration: none; transform: translateX(3px); } .site-footer__contact-item--static { cursor: default; } .site-footer__contact-item--static:hover { transform: none; } .site-footer__contact-icon { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-circle, 50%); border: 1px solid color-mix(in srgb, var(--brand-pri, #3264f5) 45%, transparent); color: var(--brand-pri-text, #fff); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-pri, #3264f5) 65%, transparent), color-mix(in srgb, var(--brand-sec, #7202bb) 55%, transparent)); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--brand-pri, #3264f5) 70%, transparent); transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; } .site-footer__contact-item:hover .site-footer__contact-icon { background: linear-gradient(135deg, var(--brand-pri, #3264f5), var(--brand-sec, #7202bb)); border-color: transparent; color: var(--brand-pri-text, #fff); transform: rotate(-6deg) scale(1.05); box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--brand-sec, #7202bb) 70%, transparent); } .site-footer__contact-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .site-footer__contact-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--footer-muted); } .site-footer__contact-value { font-size: .95rem; color: var(--footer-fg); word-break: break-word; } /* Socials */ .site-footer__socials { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; } .site-footer__social-link { position: relative; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-circle, 50%); border: 1px solid var(--footer-line); color: var(--footer-fg); text-decoration: none; background: transparent; overflow: hidden; isolation: isolate; transition: color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .site-footer__social-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, var(--brand-pri, #3264f5), var(--brand-sec, #7202bb)); clip-path: circle(0% at 50% 100%); transition: clip-path .45s cubic-bezier(.2,.7,.2,1); z-index: -1; } .site-footer__social-link i { position: relative; z-index: 1; color: inherit; font-size: 1rem; line-height: 1; transition: transform .3s ease; } .site-footer__social-link:hover, .site-footer__social-link:focus-visible { color: #fff; border-color: transparent; transform: translateY(-3px); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand-pri, #3264f5) 70%, transparent); } .site-footer__social-link:hover::before, .site-footer__social-link:focus-visible::before { clip-path: circle(120% at 50% 100%); } .site-footer__social-link:hover i, .site-footer__social-link:focus-visible i { color: #fff; transform: scale(1.1); text-shadow: 0 1px 2px rgba(0,0,0,.25); } /* Bottom bar */ .site-footer__bottom { position: relative; z-index: 1; border-top: 1px solid var(--footer-line); background: var(--footer-bg-2); padding-block: 18px; } .site-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; } .site-footer__copy { margin: 0; color: var(--footer-muted); font-size: .85rem; text-align: center; } /* Responsive */ @media (max-width: 1024px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .site-footer { padding-top: clamp(40px, 10vw, 64px); } .site-footer__inner { grid-template-columns: 1fr; gap: 36px; } .site-footer__heading { margin-bottom: 16px; } } @media (prefers-reduced-motion: reduce) { .site-footer__col, .site-footer__heading::after, .site-footer__menu-link, .site-footer__contact-item, .site-footer__contact-icon, .site-footer__social-link, .site-footer__social-link::before, .site-footer__social-link i, .site-footer__logo { transition: none !important; transform: none !important; } .site-footer__col { opacity: 1; } } /* ============================================ Content Gallery — modern, minimal, calm Bootstrap-free; layout via CSS Grid. Column ratio comes from inline --cg-content/--cg-media so editor-set sizes still drive the layout. ============================================ */ .content-gallery { --cg-radius: 22px; --cg-pad-x: clamp(28px, 6vw, 96px); --cg-pad-y: clamp(56px, 8vw, 120px); position: relative; padding: 0; color: #fff; isolation: isolate; } .content-gallery__inner { position: relative; display: grid; grid-template-columns: 1fr; min-height: clamp(540px, 70vh, 760px); border-radius: var(--cg-radius); overflow: hidden; isolation: isolate; box-shadow: 0 18px 40px -24px rgba(0,0,0,.22); } /* Body — full-height strip; blur/gradient applied via ::before so the text stays crisp */ .content-gallery__body { position: relative; z-index: 3; align-self: stretch; justify-self: start; width: clamp(320px, 50%, 640px); padding: var(--cg-pad-y) var(--cg-pad-x); display: flex; flex-direction: column; justify-content: center; } .content-gallery__body::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15,15,22,.62) 0%, rgba(15,15,22,.38) 55%, rgba(15,15,22,0) 100%); backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%); pointer-events: none; } .content-gallery--media-left .content-gallery__body { justify-self: end; } .content-gallery--media-left .content-gallery__body::before { background: linear-gradient(270deg, rgba(15,15,22,.62) 0%, rgba(15,15,22,.38) 55%, rgba(15,15,22,0) 100%); -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(270deg, #000 0%, #000 55%, transparent 100%); } .content-gallery--media-left .content-gallery__body { justify-self: end; text-align: right; } .content-gallery--media-left .content-gallery__eyebrow { flex-direction: row-reverse; } .content-gallery--media-left .content-gallery__cta, .content-gallery--media-left .content-gallery__socials { justify-content: flex-end; } .content-gallery--media-left .content-gallery__description { margin-left: auto; } .content-gallery--no-media .content-gallery__inner { background: linear-gradient(135deg, var(--brand-pri, #3264f5), var(--brand-sec, #7202bb)); min-height: clamp(360px, 50vh, 520px); } .content-gallery--no-media .content-gallery__inner::after { display: none; } .content-gallery--media-left .content-gallery__body { order: 2; } .content-gallery--media-left .content-gallery__media { order: 1; } /* Reveal-on-view — text drifts in horizontally toward the gallery side */ .content-gallery { --cg-text-from: -32px; } .content-gallery--media-left { --cg-text-from: 32px; } .content-gallery__eyebrow, .content-gallery__title, .content-gallery__description, .content-gallery__cta, .content-gallery__socials { opacity: 0; transform: translateX(var(--cg-text-from)); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); } .content-gallery__media { opacity: 0; transform: scale(.985); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); } .content-gallery.is-in-view .content-gallery__eyebrow { opacity: 1; transform: none; transition-delay: 0ms; } .content-gallery.is-in-view .content-gallery__title { opacity: 1; transform: none; transition-delay: 100ms; } .content-gallery.is-in-view .content-gallery__description { opacity: 1; transform: none; transition-delay: 200ms; } .content-gallery.is-in-view .content-gallery__cta { opacity: 1; transform: none; transition-delay: 300ms; } .content-gallery.is-in-view .content-gallery__socials { opacity: 1; transform: none; transition-delay: 400ms; } .content-gallery.is-in-view .content-gallery__media { opacity: 1; transform: scale(1); transition-delay: 60ms; } .content-gallery__eyebrow { position: relative; display: inline-flex; align-items: center; gap: 16px; margin: 0 0 22px; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.92); } .content-gallery__eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .85; } .content-gallery__title { margin: 0 0 24px; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.012em; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); } .content-gallery__title em, .content-gallery__title i { font-style: italic; color: color-mix(in srgb, var(--brand-pri, #3264f5) 70%, #fff); } .content-gallery__description { color: rgba(255,255,255,.88); line-height: 1.75; font-size: 1rem; text-shadow: 0 1px 12px rgba(0,0,0,.35); max-width: 52ch; } .content-gallery__description p { margin: 0 0 1em; } .content-gallery__description p:last-child { margin-bottom: 0; } .content-gallery__cta { margin-top: 28px; } ul.content-gallery__socials, .content-gallery__socials { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; } .content-gallery__socials li { list-style: none; } .content-gallery__socials li::marker { content: ""; } /* On-image socials — light variant */ .content-gallery__social-link { border-color: rgba(255,255,255,.45) !important; color: #fff !important; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .content-gallery__social-link { position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-circle, 50%); border: 1px solid rgba(0,0,0,.14); color: #2b2b2b; text-decoration: none; overflow: hidden; isolation: isolate; transition: color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .content-gallery__social-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, var(--brand-pri, #3264f5), var(--brand-sec, #7202bb)); clip-path: circle(0% at 50% 100%); transition: clip-path .45s cubic-bezier(.2,.7,.2,1); z-index: -1; } .content-gallery__social-link i { font-size: .95rem; transition: transform .3s ease; } .content-gallery__social-link:hover, .content-gallery__social-link:focus-visible { color: #fff; border-color: transparent; transform: translateY(-3px); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand-pri, #3264f5) 60%, transparent); } .content-gallery__social-link:hover::before, .content-gallery__social-link:focus-visible::before { clip-path: circle(120% at 50% 100%); } .content-gallery__social-link:hover i { transform: scale(1.08); } /* Media — fills section as the background */ .content-gallery__media { position: absolute; inset: 0; z-index: 1; grid-column: 1; grid-row: 1; } .content-gallery__media, .content-gallery__media > *, .content-gallery__media .swiper, .content-gallery__media .swiper-wrapper, .content-gallery__media .swiper-slide { width: 100% !important; height: 100% !important; } .content-gallery__media .swiper-slide a, .content-gallery__media .gallery-item { display: block; width: 100%; height: 100%; } .content-gallery__media img, .content-gallery__media .swiper-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block; } /* Image overlay disabled — glass card behind text handles legibility, keeps the photo clean and the arrows fully visible. */ .content-gallery__media::after { display: none; } /* Dedicated cg-slider arrows + pagination — bottom-right corner stack */ .content-gallery__arrow { position: absolute; bottom: 24px; z-index: 10; -webkit-tap-highlight-color: transparent; appearance: none; -webkit-appearance: none; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-circle, 50%); background: #fff; color: #1a1a1a; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(0,0,0,.3); padding: 0; transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; } .content-gallery__arrow:hover, .content-gallery__arrow:focus-visible { background: linear-gradient(135deg, var(--brand-pri, #3264f5), var(--brand-sec, #7202bb)); color: #fff; transform: scale(1.06); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand-pri, #3264f5) 60%, transparent); outline: 0; } .content-gallery__arrow:active { transform: scale(.96); outline: 0; } .content-gallery__arrow:focus { outline: 0; } .content-gallery__arrow--prev { right: 86px; } .content-gallery__arrow--next { right: 24px; } .content-gallery--media-left .content-gallery__arrow--prev { right: auto; left: 24px; } .content-gallery--media-left .content-gallery__arrow--next { right: auto; left: 86px; } .content-gallery__arrow svg { display: block; } .content-gallery__arrow.swiper-button-disabled { opacity: .35; pointer-events: none; } .content-gallery { --swiper-pagination-bottom: 32px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-horizontal-gap: 5px; --swiper-pagination-color: var(--brand-pri, #3264f5); --swiper-pagination-bullet-inactive-color: #fff; --swiper-pagination-bullet-inactive-opacity: .55; } .content-gallery__pagination { position: absolute; left: auto; right: 24px; bottom: var(--swiper-pagination-bottom, 88px); width: auto; text-align: right; z-index: 20; pointer-events: auto; } .content-gallery__pagination .swiper-pagination-bullet { pointer-events: auto !important; cursor: pointer; } .content-gallery--media-left .content-gallery__pagination { left: 24px; right: auto; text-align: left; } .content-gallery__pagination .swiper-pagination-bullet { transition: background-color .25s ease, opacity .25s ease, transform .25s ease; } /* Slider fills the rounded media frame, sits at the base layer */ .content-gallery__media .cg-slider { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 1; border-radius: inherit; } .cg-slider .swiper-wrapper, .cg-slider .swiper-slide { width: 100% !important; height: 100% !important; } .cg-slider .swiper-slide { display: flex !important; } .cg-slider .swiper-slide img { width: 100% !important; height: 100% !important; min-height: 100%; object-fit: cover; object-position: center; display: block; border-radius: inherit; } @media (max-width: 900px) { .content-gallery { --cg-pad-x: 20px; --cg-pad-y: 28px; --cg-radius: 16px; --swiper-pagination-bottom: 14px; padding: 0 6px; color: #1a1a1a; /* text now sits on light panel below image */ } /* Stacked layout — text panel on top, image after */ .content-gallery__inner { display: flex; flex-direction: column; gap: 0; min-height: 0; background: #fff; } .content-gallery__media { position: relative; inset: auto; order: 2; /* image after text */ flex: 0 0 auto; width: 100%; height: 78vw; max-height: 540px; min-height: 320px; border-radius: 0 0 var(--cg-radius) var(--cg-radius); overflow: hidden; } .content-gallery__media::after { display: none; } .cg-slider, .cg-slider .swiper-wrapper, .cg-slider .swiper-slide { border-radius: 0; } .content-gallery__body, .content-gallery--media-left .content-gallery__body { position: relative; order: 1; /* text panel on top */ align-self: stretch; justify-self: stretch; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 28px 24px 32px; text-align: left; display: block; color: #2b2b2b; word-wrap: break-word; overflow-wrap: break-word; } .content-gallery__body * { max-width: 100%; box-sizing: border-box; } /* Disable glass + blur on the text panel — it's a solid section now */ .content-gallery__body::before, .content-gallery--media-left .content-gallery__body::before { display: none; } /* Reset typography to the dark-on-light scheme */ .content-gallery__title { font-size: clamp(1.6rem, 7vw, 2.2rem); margin-bottom: 14px; color: #1a1a1a; text-shadow: none; } .content-gallery__eyebrow { color: var(--brand-pri, #3264f5); margin-bottom: 14px; } .content-gallery__description { color: #4a4a4a; font-size: .95rem; line-height: 1.6; text-shadow: none; } .content-gallery__cta { margin-top: 20px; } .content-gallery__socials { margin-top: 20px; } /* Sociallinks: light variant */ .content-gallery__social-link { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(0,0,0,.18) !important; color: #2b2b2b !important; } /* Reset CTA visibility on light bg */ .content-gallery__body .btn.btn-transparent-white { color: #1a1a1a; border-color: #1a1a1a; } .content-gallery__body .btn.btn-transparent-white:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; } .content-gallery--media-left .content-gallery__eyebrow { flex-direction: row; } .content-gallery--media-left .content-gallery__cta, .content-gallery--media-left .content-gallery__socials { justify-content: flex-start; } .content-gallery--media-left .content-gallery__description { margin-left: 0; } /* Image is at the bottom — anchor arrows + dots from the bottom */ .content-gallery__arrow { top: auto; bottom: 12px; width: 36px; height: 36px; } .content-gallery__arrow svg { width: 14px; height: 14px; } .content-gallery__arrow--prev, .content-gallery--media-left .content-gallery__arrow--prev { left: auto; right: 56px; } .content-gallery__arrow--next, .content-gallery--media-left .content-gallery__arrow--next { left: auto; right: 12px; } .content-gallery__pagination { top: auto; bottom: 18px !important; left: 0; right: 0; text-align: center; } } @media (max-width: 540px) { .content-gallery { padding: 0 4px; } .content-gallery { --cg-pad-x: 18px; --cg-pad-y: 22px; --cg-radius: 14px; } .content-gallery__media { height: 88vw; max-height: 460px; min-height: 300px; } .content-gallery__arrow { width: 34px; height: 34px; bottom: 10px; } .content-gallery__arrow svg { width: 14px; height: 14px; } .content-gallery__arrow--prev, .content-gallery--media-left .content-gallery__arrow--prev { right: 52px; } .content-gallery__arrow--next, .content-gallery--media-left .content-gallery__arrow--next { right: 10px; } .content-gallery__pagination { bottom: 14px !important; } } @media (prefers-reduced-motion: reduce) { .content-gallery__eyebrow, .content-gallery__title, .content-gallery__description, .content-gallery__cta, .content-gallery__socials, .content-gallery__media, .content-gallery__social-link, .content-gallery__social-link i { transition: none !important; transform: none !important; opacity: 1 !important; } }