/*
* Hospitality Luxe — Frontend CSS (Module 16)
* Premium luxury hotel website styles
* ──────────────────────────────────────────
*/
/* ══ CUSTOM PROPERTIES ══════════════════════════════════════════════════════ */
:root {
/* Brand — Aurelia Luxe v3 "Costa Serena": warm ivory + terracotta/bronze, editorial */
--hl-gold: #B16A4C; /* primary accent — terracotta clay */
--hl-gold-light: #D89A7C;
--hl-gold-dark: #8C4E34;
--hl-gold-deep: #5E3522;
--hl-dark: #241C16; /* deep espresso, not pure black */
--hl-dark-2: #2E251E;
--hl-dark-3: #3A2F26;
--hl-mid: #6B5A4C;
--hl-light: #FBF7F0;
--hl-white: #FFFFFF;
--hl-subtle: #F4ECE0; /* warm sand */
--hl-cream: #EFE3D2;
--hl-gradient-gold: linear-gradient(120deg, #D89A7C 0%, #B16A4C 50%, #8C4E34 100%);
--hl-gradient-noir: linear-gradient(160deg, #3A2F26 0%, #241C16 100%);
/* Text */
--hl-text-primary: #2B2218;
--hl-text-secondary:#6A5C4E;
--hl-text-muted: #9C8C7C;
--hl-text-light: #FBF7F0E6;
/* UI */
--hl-border: #E6DAC8;
--hl-border-dark:#4A3D31;
--hl-radius: 0.85rem;
--hl-radius-lg: 1.5rem;
--hl-radius-xl: 2.25rem;
--hl-shadow-sm: 0 2px 8px rgba(94,53,34,.06);
--hl-shadow: 0 10px 34px rgba(94,53,34,.10);
--hl-shadow-lg: 0 22px 60px rgba(94,53,34,.14);
--hl-shadow-xl: 0 40px 100px rgba(94,53,34,.20);
--hl-shadow-gold: 0 22px 55px -14px rgba(177,106,76,.42);
--hl-transition: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
/* Layout */
--hl-max-w: 1320px;
--hl-max-w-n: 820px;
--hl-pad: clamp(1.5rem, 5vw, 5.5rem);
--hl-section-v: clamp(4rem, 10vw, 9rem);
/* Typography */
--font-serif: 'Cormorant Garamond', 'Georgia', serif;
--font-display: 'Cormorant Garamond', 'Georgia', serif;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ══ RESET & BASE ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body {
font-family: var(--font-sans);
color: var(--hl-text-primary);
background: var(--hl-white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden; /* prevents horizontal drift when swiping the mobile carousel */
overscroll-behavior-x: none;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }
/* ══ CONTAINER ══════════════════════════════════════════════════════════════ */
.hl-container {
width: 100%;
max-width: var(--hl-max-w);
margin-inline: auto;
padding-inline: var(--hl-pad);
}
.hl-container--narrow {
max-width: var(--hl-max-w-n);
}
/* ══ SECTION SPACING ════════════════════════════════════════════════════════ */
.section-pad { padding-block: var(--hl-section-v); }
.section-pad-top { padding-top: var(--hl-section-v); }
.section-pad-bottom { padding-bottom: var(--hl-section-v); }
.bg-dark { background: var(--hl-dark-2); }
.bg-subtle { background: var(--hl-subtle); }
/* ══ TYPOGRAPHY ═════════════════════════════════════════════════════════════ */
.hl-eyebrow {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--hl-gold);
margin-bottom: 0.75rem;
}
.hl-eyebrow--gold { color: var(--hl-gold); }
.hl-heading {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 500;
line-height: 1.15;
color: var(--hl-dark);
margin-bottom: 1rem;
}
.hl-heading--light { color: var(--hl-white); }
.hl-section-header {
text-align: center;
max-width: 620px;
margin-inline: auto;
margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.hl-section-header--left { text-align: left; margin-inline: 0; }
.hl-section-header--light .hl-heading { color: var(--hl-white); }
.hl-section-header__desc {
color: var(--hl-text-secondary);
font-size: 1.05rem;
margin-top: 0.5rem;
}
.hl-text-muted { color: var(--hl-text-muted); }
.hl-text-sm { font-size: 0.875rem; }
.hl-body-text { color: var(--hl-text-secondary); line-height: 1.8; }
.hl-body-text p { margin-bottom: 1rem; }
/* ══ BUTTONS ═════════════════════════════════════════════════════════════════ */
.hl-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: var(--hl-radius);
transition: all var(--hl-transition);
white-space: nowrap;
cursor: pointer;
border: 2px solid transparent;
}
.hl-btn--primary {
background: var(--hl-dark);
color: var(--hl-white);
border-color: var(--hl-dark);
}
.hl-btn--primary:hover { background: var(--hl-mid); border-color: var(--hl-mid); }
.hl-btn--gold {
background: var(--hl-gold);
color: var(--hl-dark);
border-color: var(--hl-gold);
}
.hl-btn--gold:hover { background: var(--hl-gold-dark); border-color: var(--hl-gold-dark); }
.hl-btn--ghost {
background: transparent;
color: var(--hl-dark);
border-color: var(--hl-dark);
}
.hl-btn--ghost:hover { background: var(--hl-dark); color: var(--hl-white); }
.hl-btn--ghost-light {
background: transparent;
color: var(--hl-white);
border-color: rgba(255,255,255,0.5);
}
.hl-btn--ghost-light:hover { background: rgba(255,255,255,0.1); border-color: var(--hl-white); }
.hl-btn--outline {
background: transparent;
color: var(--hl-dark);
border-color: var(--hl-border-dark);
}
.hl-btn--outline:hover { background: var(--hl-dark); color: var(--hl-white); border-color: var(--hl-dark); }
.hl-btn--sm { padding: 0.5rem 1.25rem; font-size: 0.75rem; }
.hl-btn--lg { padding: 1rem 2.5rem; font-size: 0.875rem; }
.hl-btn--full,
.hl-btn--block { width: 100%; justify-content: center; }
.hl-btn:disabled,
.hl-btn--disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
background: var(--hl-subtle);
color: var(--hl-text-muted);
border-color: var(--hl-border);
}
/* ══ FORMS ═══════════════════════════════════════════════════════════════════ */
.hl-form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.hl-form-group label {
font-size: 0.8rem;
font-weight: 500;
color: var(--hl-text-secondary);
display: flex;
justify-content: space-between;
}
.hl-form-group input,
.hl-form-group select,
.hl-form-group textarea {
padding: 0.75rem 1rem;
border: 1.5px solid var(--hl-border);
border-radius: var(--hl-radius);
background: var(--hl-white);
color: var(--hl-text-primary);
transition: border-color var(--hl-transition);
width: 100%;
}
.hl-form-group input:focus,
.hl-form-group select:focus,
.hl-form-group textarea:focus {
outline: none;
border-color: var(--hl-gold);
box-shadow: 0 0 0 3px rgba(201,169,110,.12);
}
.hl-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.hl-form-group--full { grid-column: 1 / -1; }
.hl-form-group--inline { flex-direction: row; align-items: center; }
.hl-form-hint { font-size: 0.75rem; color: var(--hl-text-muted); margin-top: 0.2rem; }
.hl-input-password-wrap { position: relative; }
.hl-input-password-wrap input { padding-right: 2.75rem; }
.hl-input-password-toggle {
position: absolute;
right: 0.75rem; top: 50%;
transform: translateY(-50%);
color: var(--hl-text-muted);
background: none; border: none; padding: 0;
}
.hl-checkbox-label {
display: flex; align-items: flex-start; gap: 0.6rem;
font-size: 0.875rem; color: var(--hl-text-secondary);
cursor: pointer;
}
.hl-checkbox-label input[type="checkbox"] { margin-top: 0.15rem; accent-color: var(--hl-gold); }
.hl-checkbox-label a { color: var(--hl-gold); }
/* ══ ALERTS ═════════════════════════════════════════════════════════════════ */
.hl-alert {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.875rem 1rem;
border-radius: var(--hl-radius);
font-size: 0.875rem;
margin-bottom: 1rem;
}
.hl-alert--error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.hl-alert--success { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.hl-alert--info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
/* ══ SPINNER ═════════════════════════════════════════════════════════════════ */
.hl-spinner {
width: 24px; height: 24px;
border: 2.5px solid var(--hl-border);
border-top-color: var(--hl-gold);
border-radius: 50%;
animation: hl-spin 0.7s linear infinite;
display: inline-block;
}
.hl-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.hl-spinner--white { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
@keyframes hl-spin { to { transform: rotate(360deg); } }
/* ══ LOADING STATE ══════════════════════════════════════════════════════════ */
.hl-loading-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 3rem;
color: var(--hl-text-muted);
}
/* ══ EMPTY STATE ════════════════════════════════════════════════════════════ */
.hl-empty-state {
text-align: center;
padding: 4rem 2rem;
color: var(--hl-text-muted);
}
.hl-empty-state svg { margin: 0 auto 1rem; opacity: .4; }
.hl-empty-state h3 { color: var(--hl-text-primary); margin-bottom: .5rem; font-size: 1.2rem; }
/* ══ BREADCRUMB ═════════════════════════════════════════════════════════════ */
.hl-breadcrumb {
position: absolute;
bottom: 1.5rem;
left: 0; right: 0;
}
.hl-breadcrumb .hl-container {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
color: rgba(255,255,255,.6);
}
.hl-breadcrumb a { color: rgba(255,255,255,.7); transition: color var(--hl-transition); }
.hl-breadcrumb a:hover { color: var(--hl-gold); }
.hl-breadcrumb span:last-child { color: rgba(255,255,255,.9); }
/* ══ PAGE HERO ══════════════════════════════════════════════════════════════ */
.hl-page-hero {
position: relative;
min-height: 55vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--hl-dark-2);
}
.hl-page-hero--short { min-height: 38vh; }
.hl-page-hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.05);
transition: transform 8s ease;
}
.hl-page-hero:hover .hl-page-hero__bg { transform: scale(1); }
.hl-page-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 100%);
z-index: 1;
}
.hl-page-hero__content {
position: relative;
z-index: 2;
text-align: center;
padding: 4rem var(--hl-pad) 5rem;
}
.hl-page-hero__title {
font-family: var(--font-serif);
font-size: clamp(2rem, 6vw, 4rem);
font-weight: 400;
color: var(--hl-white);
line-height: 1.1;
margin-bottom: 0.75rem;
}
.hl-page-hero__sub {
color: rgba(255,255,255,.75);
font-size: 1.05rem;
max-width: 500px;
margin: 0 auto;
}
/* ══ HERO (HOMEPAGE) ════════════════════════════════════════════════════════ */
.hl-hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--hl-dark-2);
}
.hl-hero__video,
.hl-hero__bg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.hl-hero__bg {
background-size: cover;
background-position: center;
}
.hl-hero__bg--default {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2419 50%, #1a1a1a 100%);
}
.hl-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(0,0,0,.2) 0%,
rgba(0,0,0,.55) 50%,
rgba(0,0,0,.7) 100%);
z-index: 1;
}
.hl-hero__content {
position: relative;
z-index: 2;
text-align: center;
padding: 2rem var(--hl-pad);
width: 100%;
max-width: 960px;
}
.hl-hero__eyebrow {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--hl-gold-light);
margin-bottom: 1rem;
}
.hl-hero__title {
font-family: var(--font-serif);
font-size: clamp(2.5rem, 8vw, 5.5rem);
font-weight: 400;
color: var(--hl-white);
line-height: 1.05;
margin-bottom: 1rem;
}
.hl-hero__subtitle {
color: rgba(255,255,255,.8);
font-size: clamp(1rem, 2vw, 1.2rem);
max-width: 560px;
margin: 0 auto 2.5rem;
}
/* HERO SCROLL INDICATOR */
.hl-hero__scroll {
position: absolute;
z-index: 2;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
color: rgba(255,255,255,.5);
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
animation: hl-scroll-bounce 2s ease-in-out infinite;
}
.hl-hero__scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.5));
}
@keyframes hl-scroll-bounce {
0%,100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
/* ══ SEARCH BAR ══════════════════════════════════════════════════════════════ */
.hl-search-bar {
max-width: 780px;
margin: 0 auto;
}
.hl-search-bar__inner {
display: flex;
align-items: stretch;
background: rgba(255,255,255,.95);
backdrop-filter: blur(10px);
border-radius: var(--hl-radius-lg);
box-shadow: var(--hl-shadow-xl);
overflow: hidden;
}
.hl-search-bar__field {
flex: 1;
display: flex;
flex-direction: column;
padding: 1rem 1.25rem;
}
.hl-search-bar__field label {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--hl-text-muted);
margin-bottom: 0.3rem;
}
.hl-search-bar__field input,
.hl-search-bar__field select {
border: none;
background: none;
padding: 0;
font-size: 0.9rem;
font-weight: 500;
color: var(--hl-dark);
outline: none;
}
.hl-search-bar__divider {
width: 1px;
background: var(--hl-border);
margin-block: 0.75rem;
}
.hl-search-bar__btn {
background: var(--hl-gold);
color: var(--hl-dark);
padding: 1rem 1.75rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
transition: background var(--hl-transition);
border: none;
cursor: pointer;
}
.hl-search-bar__btn:hover { background: var(--hl-gold-dark); }
/* ══ INTRO STRIP ══════════════════════════════════════════════════════════════ */
.hl-intro-strip { padding-block: 2.5rem; border-bottom: 1px solid var(--hl-border); }
.hl-intro-strip__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
text-align: center;
}
.hl-intro-strip__item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.hl-intro-strip__value {
font-family: var(--font-serif);
font-size: 1.9rem;
font-weight: 500;
color: var(--hl-dark);
line-height: 1;
}
.hl-intro-strip__label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--hl-text-muted);
}
/* ══ ABOUT SECTION ══════════════════════════════════════════════════════════ */
.hl-about-section__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
.hl-about-section__grid--reverse { direction: rtl; }
.hl-about-section__grid--reverse > * { direction: ltr; }
.hl-about-section__media { position: relative; }
.hl-about-section__media img {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
border-radius: var(--hl-radius-xl);
}
.hl-about-section__media::after {
content: '';
position: absolute;
bottom: -1rem;
right: -1rem;
width: 60%;
height: 60%;
border: 2px solid var(--hl-gold);
border-radius: var(--hl-radius-xl);
pointer-events: none;
}
.hl-about-section__copy { display: flex; flex-direction: column; gap: 1rem; }
.hl-about-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }
.hl-about-list li {
display: flex; align-items: center; gap: 0.6rem;
font-size: 0.9rem; color: var(--hl-text-secondary);
}
.hl-about-list li::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--hl-gold);
flex-shrink: 0;
}
/* ══ ROOM CARDS ══════════════════════════════════════════════════════════════ */
.hl-rooms-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
}
.hl-room-card {
background: var(--hl-white);
border-radius: var(--hl-radius-xl);
overflow: hidden;
box-shadow: var(--hl-shadow);
transition: transform var(--hl-transition), box-shadow var(--hl-transition);
}
.hl-room-card:hover { transform: translateY(-4px); box-shadow: var(--hl-shadow-lg); }
.hl-room-card__media-wrap {
display: block;
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
}
.hl-room-card__img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.hl-room-card:hover .hl-room-card__img { transform: scale(1.05); }
.hl-room-card__img--placeholder {
background: var(--hl-subtle);
}
.hl-room-card__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.35);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--hl-transition);
}
.hl-room-card:hover .hl-room-card__overlay { opacity: 1; }
.hl-room-card__view-label {
color: var(--hl-white);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid rgba(255,255,255,.6);
padding: 0.4rem 0.9rem;
border-radius: 2rem;
}
.hl-room-card__badge {
position: absolute;
top: 1rem; left: 1rem;
background: var(--hl-gold);
color: var(--hl-dark);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.25rem 0.75rem;
border-radius: 2rem;
}
.hl-room-card__body { padding: 1.5rem; }
.hl-room-card__name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; margin-bottom: 0.75rem; }
.hl-room-card__name a { color: var(--hl-dark); transition: color var(--hl-transition); }
.hl-room-card__name a:hover { color: var(--hl-gold-dark); }
.hl-room-card__meta {
display: flex; gap: 1rem; flex-wrap: wrap;
color: var(--hl-text-muted); font-size: 0.8rem;
margin-bottom: 1rem;
}
.hl-room-card__meta span { display: flex; align-items: center; gap: 0.3rem; }
.hl-room-card__amenities {
display: flex; flex-wrap: wrap; gap: 0.4rem;
margin-bottom: 1.25rem;
}
.hl-room-card__amenities li {
background: var(--hl-subtle);
color: var(--hl-text-secondary);
font-size: 0.72rem;
padding: 0.2rem 0.6rem;
border-radius: 2rem;
}
.hl-room-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
border-top: 1px solid var(--hl-border);
}
.hl-room-card__price { display: flex; align-items: baseline; gap: 0.2rem; }
.hl-room-card__price-label { font-size: 0.72rem; color: var(--hl-text-muted); }
.hl-room-card__price-amount { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 600; color: var(--hl-dark); }
.hl-room-card__price-per { font-size: 0.72rem; color: var(--hl-text-muted); }
/* ══ ROOM DETAIL ════════════════════════════════════════════════════════════ */
.hl-room-detail-layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 3rem;
align-items: start;
}
.hl-room-gallery__main {
aspect-ratio: 16/10;
overflow: hidden;
border-radius: var(--hl-radius-xl);
margin-bottom: 1rem;
}
.hl-room-gallery__main img {
width: 100%; height: 100%;
object-fit: cover;
}
.hl-room-gallery__thumbs {
display: flex;
gap: 0.75rem;
overflow-x: auto;
scrollbar-width: none;
}
.hl-room-gallery__thumb {
width: 90px;
height: 65px;
flex-shrink: 0;
overflow: hidden;
border-radius: 0.4rem;
cursor: pointer;
border: 2px solid transparent;
transition: border-color var(--hl-transition);
}
.hl-room-gallery__thumb.active { border-color: var(--hl-gold); }
.hl-room-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hl-room-info { display: flex; flex-direction: column; gap: 1.5rem; }
.hl-room-info__type { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--hl-gold); }
.hl-room-info__title { font-family: var(--font-serif); font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--hl-dark); }
.hl-room-info__meta { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.hl-room-info__meta-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--hl-text-secondary); }
.hl-room-info__desc { color: var(--hl-text-secondary); line-height: 1.85; }
.hl-room-amenities-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.6rem;
}
.hl-room-amenity-item {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.82rem; color: var(--hl-text-secondary);
background: var(--hl-subtle);
padding: 0.5rem 0.75rem;
border-radius: var(--hl-radius);
}
/* BOOKING SIDEBAR (Room Detail) */
.hl-room-booking-card {
background: var(--hl-white);
border: 1.5px solid var(--hl-border);
border-radius: var(--hl-radius-xl);
padding: 1.75rem;
position: sticky;
top: 2rem;
box-shadow: var(--hl-shadow);
}
.hl-room-booking-card__price { display: flex; align-items: baseline; gap: 0.3rem; margin-bottom: 1.25rem; }
.hl-room-booking-card__amount { font-family: var(--font-serif); font-size: 2rem; font-weight: 600; color: var(--hl-dark); }
.hl-room-booking-card__per { font-size: 0.82rem; color: var(--hl-text-muted); }
.hl-availability-msg { font-size: 0.8rem; text-align: center; margin-top: 0.75rem; }
.hl-availability-msg--avail { color: #16A34A; }
.hl-availability-msg--na { color: #DC2626; }
/* ══ GALLERY — FEATURED-IMAGE CAROUSEL ════════════════════════════════════
Homepage "A Glimpse of Paradise" gallery (markup: front-page.php GALLERY
TEASER + hluxe_render_gallery_stage() in inc/frontend-functions.php).
This is NOT three equal-width cards with a gap between them. It is one
dominant featured photo (70%) with two small cropped previews (15% each)
tucked in BEHIND it — negative margins pull the previews under the
featured card's edges, so the composition reads as one hero photograph
with the next/previous images peeking out from underneath, not a row of
separate gallery tiles. Hierarchy comes entirely from size, height and
z-index/overlap — never from opacity, blur or a filter on the previews;
they stay full-color and sharp, matching the reference sketch exactly.
Navigation (initGalleryCarousel() in main.js) is a real slide: it
grows/shrinks the actual slot elements' flex-basis (width) in place —
the previously-featured slot shrinks into a preview, the incoming
preview grows into the featured slot — rather than crossfading an
![]()
src. Exactly one new slot is created off-stage (0% width) per
step and exactly one old slot is discarded after it has shrunk away;
nothing fades, flashes, or changes opacity mid-slide.
Height never animates. .hl-gallery-stage is pinned to a fixed height
(--hl-gallery-stage-h) regardless of which role each slot holds, and
every .hl-gallery-slot is height:100% of that fixed row no matter its
role — so the row's own box can never grow or shrink and nothing below
the carousel (dots, counter, CTA, the next section) can ever be pushed
around. The "featured is bigger" read comes entirely from
transform: scale() per role (1 for featured, 0.87 for prev/next/edge),
a paint-only effect that never touches layout — this is also the
"pop" the slot visibly does as it becomes featured.
Each slot is a plain, undecorated box (.hl-gallery-slot) that owns the
box-shadow and hover-lift; the actual photo lives one layer deeper in
.hl-gallery-slot__frame, an absolutely-positioned, exactly-inset child
that alone carries overflow:hidden + the rounded-corner clip. Keeping the
clip and the transform/shadow on two different layers is what stops the
corner-rounding from glitching mid hover-zoom — a single element doing
both at once is what breaks that in Chrome/Safari.
Slots sit apart with a real gap (not a negative-margin overlap), and
every slot — prev, featured, next, edge, placeholder — shares the exact
same all-corners radius on .hl-gallery-slot__frame. That radius is never
role-specific, so setSlotRole() swapping a slot's role class mid-slide
(main.js) never changes what shape its frame clips to — nothing to snap
to square while a slide is in flight. */
.hl-gallery-teaser .hl-container { max-width: 1600px; }
.hl-gallery-slider {
position: relative;
display: flex;
align-items: center;
gap: 1.25rem;
}
.hl-gallery-stage {
position: relative; /* anchors the absolutely-pinned outgoing slot during a slide */
touch-action: pan-y; /* horizontal swipes are consumed by the carousel; vertical still scrolls the page */
overscroll-behavior-x: contain;
--hl-gallery-gap: clamp(16px, 2vw, 24px);
/* Fixed, explicit row height — NOT derived from the tallest child. Slots
used to carry their own per-role height (featured taller than prev/
next), which made this flex row's own box implicitly grow/shrink as
roles swapped mid-slide, pushing the dots/counter/CTA below it (and
everything after) up and down. Pinning the row itself here means the
row's box can never change size again, no matter what its children do
— the "featured is bigger" read now comes entirely from transform:
scale() on the slots (see .hl-gallery-slot below), which is paint-only
and never touches this height. */
--hl-gallery-stage-h: clamp(420px, 56vh, 640px);
height: var(--hl-gallery-stage-h);
flex: 1 1 0%;
min-width: 0;
display: flex;
align-items: center;
gap: var(--hl-gallery-gap);
}
/* ── Slot base — shared by prev / featured / next, and by the empty-state
placeholders. No overflow/clip here: this element only ever lifts on
hover and casts the shadow, so its rounded corners never fight a
simultaneous clip during the zoom transform. flex-basis is what
initGalleryCarousel() animates to slide the stage — grow/shrink only,
no track to translate — so it lives in this shared transition alongside
the hover effects. flex-shrink is allowed (rather than pinned to 0) so
the trio scales down together to make room for the gap instead of
overflowing the stage — proportions stay effectively the same since all
three shrink by the same factor. */
.hl-gallery-slot {
position: relative;
display: block;
overflow: visible;
flex-grow: 0;
flex-shrink: 1;
/* Always the full (fixed) stage height — identical for every role, so
reassigning a slot's role never touches its height, only its width
(flex-basis, still a layout property but confined to this row — see
.hl-gallery-stage) and its transform (compositor-only, see roles
below). */
height: 100%;
border: none;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
border-radius: var(--hl-radius-xl);
/* flex-basis and transform are NOT transitioned here. Navigating changes
both instantly (see initGalleryCarousel() in main.js), then JS masks
that instant layout jump behind a single compositor-only transform
animation (translate + scale, computed via FLIP) applied as an inline
style — one synchronized timeline driving every slot at once, rather
than the browser trying to animate flex-basis (layout, slow, prone to
desync) and transform (paint) on two separate schedules. Only
box-shadow still transitions declaratively here since it's a pure
hover/lift polish effect, unrelated to the slide itself. */
transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
/* ── The clipping layer: fills the slot exactly, owns overflow:hidden +
the rounded mask, never transforms or casts a shadow itself. The radius
is fixed here on the shared base rule — identical for every role — so
it never has to change (and therefore never flashes square) when a slot
is reassigned from one role to another mid-transition. */
.hl-gallery-slot__frame {
position: absolute;
inset: 0;
display: block;
overflow: hidden;
isolation: isolate;
background: var(--hl-subtle);
border-radius: var(--hl-radius-xl);
clip-path: inset(0 round var(--hl-radius-xl));
}
.hl-gallery-slot__frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ── FEATURED slot: 70% on desktop, full height, rounded on all four
corners, elevated above the previews — the one frame that zooms and
lifts and always dominates the composition. */
.hl-gallery-slot--featured {
flex-basis: 70%;
transform: translate3d(0, 0, 0) scale(1);
transform-origin: center;
z-index: 3;
box-shadow: 0 20px 50px -16px rgba(36,28,22,.28), 0 5px 16px rgba(36,28,22,.1);
}
.hl-gallery-slot--featured:hover,
.hl-gallery-slot--featured:focus-visible {
/* Tile stays perfectly still — no translate, no scale, no shadow bump
— so the card/border/spacing/shadow do NOT animate. The zoom below
is applied only to the ![]()
inside the frame. */
transform: translate3d(0, 0, 0) scale(1);
}
.hl-gallery-slot--featured:hover .hl-gallery-slot__frame img,
.hl-gallery-slot--featured:focus-visible .hl-gallery-slot__frame img {
transform: scale(1.08);
}
/* ── PREVIEW slots (prev/next): 15% each on desktop, shorter than the
featured slot and set apart from it by the stage's regular gap — a
clearly separate card, not a sliver tucked underneath. Full color, full
sharpness, no filter, same all-corners radius as the featured frame
(set once on .hl-gallery-slot__frame): the only differences from the
featured slot are size and height. */
.hl-gallery-slot--prev,
.hl-gallery-slot--next {
flex-basis: 15%;
/* ~360/420 to ~560/640 of the featured height, as a single scale ratio
instead of a shorter box — keeps the card visually smaller without
ever changing its layout height. */
transform: translate3d(0, 0, 0) scale(0.87);
transform-origin: center;
align-self: center;
z-index: 1;
box-shadow: 0 10px 26px -14px rgba(36,28,22,.22);
}
.hl-gallery-slot--prev:hover,
.hl-gallery-slot--prev:focus-visible,
.hl-gallery-slot--next:hover,
.hl-gallery-slot--next:focus-visible {
/* Tile stays still on hover — image zoom below is the only motion. */
}
.hl-gallery-slot--prev:hover .hl-gallery-slot__frame img,
.hl-gallery-slot--prev:focus-visible .hl-gallery-slot__frame img,
.hl-gallery-slot--next:hover .hl-gallery-slot__frame img,
.hl-gallery-slot--next:focus-visible .hl-gallery-slot__frame img {
transform: scale(1.05);
}
/* ── The one transient state used while a slot is sliding in or out: pinned
to 0% width so it neither shows a card nor leaves a gap. */
.hl-gallery-slot--edge {
/* Not literally 0%: a hairline nonzero basis (imperceptible on screen)
so the slot always has a real native layout width for main.js's FLIP
transform math to scale from/to — a true 0% would make that division
undefined right as a slot finishes exiting. */
flex-basis: 0.01%;
transform: translate3d(0, 0, 0) scale(0.87);
transform-origin: center;
align-self: center;
box-shadow: none;
pointer-events: none;
}
/* ── Tablet (640–899px): featured reads only "slightly larger" than the
previews, not fully dominant the way it is on desktop; the stage gap
(--hl-gallery-gap, via clamp()) already scales itself down for the
narrower viewport. */
@media (min-width: 640px) and (max-width: 899px) {
.hl-gallery-slot--featured { flex-basis: 56%; }
.hl-gallery-slot--prev,
.hl-gallery-slot--next { flex-basis: 22%; }
}
/* ── Mobile: one full-width featured image only, no side previews. */
@media (max-width: 639px) {
.hl-gallery-slider { gap: 0; }
.hl-gallery-stage { --hl-gallery-stage-h: clamp(440px, 70vh, 620px); }
.hl-gallery-slot--prev,
.hl-gallery-slot--next { display: none; }
.hl-gallery-slot--featured { flex-basis: 100%; }
}
/* Empty-state placeholders (no gallery items curated yet) reuse the same
3-slot proportions so the section never collapses or looks broken. */
.hl-gallery-slot--placeholder .hl-gallery-slot__frame {
background: linear-gradient(135deg, #e8ddd0 0%, #d4c4a8 33%, #c8b08a 66%, #b89870 100%);
animation: shimmerPulse 2.5s ease-in-out infinite alternate;
}
@keyframes shimmerPulse { 0% { opacity: 0.6; } 100% { opacity: 1; } }
/* Navigation arrows sit outside the stage, never overlapping the preview
photography. */
.hl-gallery-slider__nav {
flex: 0 0 auto;
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid var(--hl-border);
background: var(--hl-white);
color: var(--hl-text-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--hl-shadow-sm);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
background-color 0.3s ease, color 0.3s ease,
border-color 0.3s ease, box-shadow 0.3s ease;
}
.hl-gallery-slider__nav:hover:not(.is-disabled),
.hl-gallery-slider__nav:focus-visible {
background: var(--hl-gold);
color: var(--hl-white);
border-color: var(--hl-gold);
transform: scale(1.08);
box-shadow: 0 12px 28px -8px rgba(177,106,76,.45);
}
.hl-gallery-slider__nav:focus-visible { outline: 2px solid var(--hl-gold); outline-offset: 2px; }
.hl-gallery-slider__nav.is-disabled { opacity: 0.3; pointer-events: none; }
@media (max-width: 900px) and (min-width: 640px) {
.hl-gallery-slider__nav { display: none; } /* tablets: swipe only */
}
/* Mobile (≤639px): the arrows return as small, elegant, semi-transparent
overlay pills anchored inside the stage so users discover the carousel
is swipeable. They idle at low opacity, brighten on touch/hover, never
block the photo, and coexist with swipe navigation (which is untouched). */
@media (max-width: 639px) {
.hl-gallery-slider { position: relative; }
.hl-gallery-slider__nav {
display: flex;
position: absolute;
top: 50%;
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.42);
-webkit-backdrop-filter: blur(10px) saturate(140%);
backdrop-filter: blur(10px) saturate(140%);
color: var(--hl-text-primary);
box-shadow: 0 6px 18px -6px rgba(36, 28, 22, 0.28);
opacity: 0.55;
z-index: 5;
transform: translateY(-50%) translateZ(0);
transition: opacity 0.35s ease, background-color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-gallery-slider__nav svg { width: 18px; height: 18px; }
.hl-gallery-slider__nav--prev { left: 12px; }
.hl-gallery-slider__nav--next { right: 12px; }
.hl-gallery-slider__nav:hover:not(.is-disabled),
.hl-gallery-slider__nav:active:not(.is-disabled),
.hl-gallery-slider__nav:focus-visible {
opacity: 1;
background: rgba(255, 255, 255, 0.82);
color: var(--hl-text-primary);
border-color: rgba(255, 255, 255, 0.9);
transform: translateY(-50%) scale(1.05);
box-shadow: 0 10px 24px -8px rgba(36, 28, 22, 0.35);
}
}
/* Pagination row: dots (primary) + editorial counter (secondary detail) */
.hl-gallery-nav-row {
display: flex;
align-items: center;
justify-content: center;
gap: 1.1rem;
margin-top: 1.75rem;
}
.hl-gallery-slider__dots { display: flex; gap: 0.5rem; }
.hl-gallery-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--hl-border);
border: none;
padding: 0;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-gallery-dot:hover:not(.active) { background: var(--hl-gold-light); }
.hl-gallery-dot.active { background: var(--hl-gold); width: 22px; border-radius: 4px; }
.hl-gallery-counter {
font-family: var(--font-serif);
font-size: 0.85rem;
letter-spacing: 0.04em;
color: var(--hl-text-muted);
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-variant-numeric: tabular-nums;
}
.hl-gallery-counter #gallery-current { color: var(--hl-gold-dark); font-weight: 600; }
.hl-gallery-counter__sep { opacity: 0.5; }
.hl-gallery-teaser__cta { text-align: center; margin-top: 3rem; }
/* ══ GALLERY PAGE ═══════════════════════════════════════════════════════════ */
.hl-gallery-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 2.5rem;
}
.hl-gallery-filter-btn {
padding: 0.5rem 1.25rem;
border-radius: 2rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--hl-subtle);
color: var(--hl-text-secondary);
border: 1.5px solid transparent;
transition: all var(--hl-transition);
cursor: pointer;
}
.hl-gallery-filter-btn.active,
.hl-gallery-filter-btn:hover {
background: var(--hl-dark);
color: var(--hl-white);
border-color: var(--hl-dark);
}
.hl-gallery-masonry {
columns: 3;
column-gap: 1rem;
}
.hl-gallery-item {
break-inside: avoid;
margin-bottom: 1rem;
position: relative;
overflow: hidden;
border-radius: var(--hl-radius);
cursor: pointer;
}
.hl-gallery-item.hidden { display: none; }
.hl-gallery-item__media {
position: relative;
overflow: hidden;
}
.hl-gallery-item__media img {
width: 100%;
transition: transform 0.5s ease;
}
.hl-gallery-item:hover .hl-gallery-item__media img { transform: scale(1.04); }
.hl-gallery-item__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.4);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--hl-transition);
color: var(--hl-white);
}
.hl-gallery-item:hover .hl-gallery-item__overlay { opacity: 1; }
.hl-gallery-item__caption {
font-size: 0.75rem;
color: var(--hl-text-muted);
padding: 0.4rem 0.5rem;
}
.hl-gallery-item__media--video video { width: 100%; display: block; }
.hl-gallery-item__play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.4);
color: var(--hl-white);
border: none;
cursor: pointer;
}
/* ══ LIGHTBOX ═══════════════════════════════════════════════════════════════ */
.hl-lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,.95);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity var(--hl-transition);
}
.hl-lightbox.active { opacity: 1; pointer-events: all; }
.hl-lightbox__stage { max-width: 90vw; max-height: 80vh; }
.hl-lightbox__stage img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.hl-lightbox__close {
position: absolute;
top: 1.5rem; right: 1.5rem;
color: rgba(255,255,255,.7);
font-size: 1.5rem;
background: rgba(255,255,255,.1);
border-radius: 50%;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
transition: all var(--hl-transition);
}
.hl-lightbox__close:hover { background: rgba(255,255,255,.2); color: #fff; }
.hl-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: rgba(255,255,255,.7);
background: rgba(255,255,255,.1);
border-radius: 50%;
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
transition: all var(--hl-transition);
}
.hl-lightbox__nav:hover { background: rgba(255,255,255,.2); color: #fff; }
.hl-lightbox__nav--prev { left: 1.5rem; }
.hl-lightbox__nav--next { right: 1.5rem; }
.hl-lightbox__caption {
position: absolute;
bottom: 4rem;
color: rgba(255,255,255,.6);
font-size: 0.85rem;
}
.hl-lightbox__counter {
position: absolute;
bottom: 1.5rem;
color: rgba(255,255,255,.4);
font-size: 0.75rem;
}
.hl-video-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.95);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity var(--hl-transition);
}
.hl-video-overlay.active { opacity: 1; pointer-events: all; }
.hl-video-overlay video { max-width: 90vw; max-height: 85vh; }
.hl-video-overlay__close {
position: absolute;
top: 1.5rem; right: 1.5rem;
color: rgba(255,255,255,.7);
background: rgba(255,255,255,.1);
border-radius: 50%;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
transition: all var(--hl-transition);
}
/* ══ TESTIMONIALS ════════════════════════════════════════════════════════════ */
.hl-testimonials__slider { overflow: hidden; }
.hl-testi-track { display: flex; transition: transform 0.5s ease; }
.hl-testi-slide {
min-width: 100%;
display: flex;
justify-content: center;
}
.hl-testi-card {
max-width: 680px;
text-align: center;
padding: 2rem;
}
.hl-testi-card__stars { color: var(--hl-gold); font-size: 1.1rem; margin-bottom: 1rem; }
.hl-testi-card__quote {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 2.5vw, 1.7rem);
font-weight: 400;
color: var(--hl-white);
line-height: 1.5;
margin-bottom: 1.5rem;
font-style: italic;
}
.hl-testi-card__quote::before { content: '\201C'; }
.hl-testi-card__quote::after { content: '\201D'; }
.hl-testi-card__author {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.hl-testi-card__avatar {
width: 44px; height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--hl-gold);
}
.hl-testi-card__name { font-weight: 600; color: var(--hl-white); font-size: 0.9rem; }
.hl-testi-card__origin { font-size: 0.78rem; color: rgba(255,255,255,.5); }
.hl-testimonials__nav {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin-top: 2rem;
}
.hl-testi-nav {
color: rgba(255,255,255,.5);
background: rgba(255,255,255,.1);
border-radius: 50%;
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
transition: all var(--hl-transition);
}
.hl-testi-nav:hover { background: rgba(255,255,255,.2); color: #fff; }
.hl-testi-dots { display: flex; gap: 0.5rem; }
.hl-testi-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,.3);
border: none;
cursor: pointer;
transition: all var(--hl-transition);
}
.hl-testi-dot.active { background: var(--hl-gold); width: 20px; border-radius: 3px; }
/* ══ SPECIAL OFFERS ══════════════════════════════════════════════════════════ */
.hl-offers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.hl-offer-card {
position: relative;
border-radius: var(--hl-radius-xl);
overflow: hidden;
aspect-ratio: 4/3;
cursor: pointer;
}
.hl-offer-card img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.hl-offer-card:hover img { transform: scale(1.06); }
.hl-offer-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.1) 60%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
}
.hl-offer-card__badge {
background: var(--hl-gold);
color: var(--hl-dark);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.2rem 0.6rem;
border-radius: 2rem;
width: fit-content;
margin-bottom: 0.5rem;
}
.hl-offer-card__title {
font-family: var(--font-serif);
font-size: 1.25rem;
color: var(--hl-white);
margin-bottom: 0.3rem;
}
.hl-offer-card__desc { font-size: 0.8rem; color: rgba(255,255,255,.7); }
/* ══ CTA BANNER ════════════════════════════════════════════════════════════ */
.hl-cta-banner {
position: relative;
padding-block: var(--hl-section-v);
text-align: center;
overflow: hidden;
}
.hl-cta-banner__bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--hl-dark-2) 0%, #2a1f0e 100%);
background-size: cover;
background-position: center;
}
.hl-cta-banner__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.55);
}
.hl-cta-banner__content {
position: relative;
z-index: 1;
}
.hl-cta-banner__sub {
color: rgba(255,255,255,.7);
max-width: 520px;
margin: 0 auto 2rem;
font-size: 1rem;
}
.hl-cta-banner__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* ══ BLOG GRID ════════════════════════════════════════════════════════════ */
.hl-blog-grid,
.hl-blog-archive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.hl-blog-card {
background: var(--hl-white);
border-radius: var(--hl-radius-xl);
overflow: hidden;
box-shadow: var(--hl-shadow-sm);
transition: box-shadow var(--hl-transition), transform var(--hl-transition);
}
.hl-blog-card:hover { box-shadow: var(--hl-shadow); transform: translateY(-3px); }
.hl-blog-card__media { display: block; aspect-ratio: 16/10; overflow: hidden; }
.hl-blog-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hl-blog-card:hover .hl-blog-card__img { transform: scale(1.04); }
.hl-blog-card__body { padding: 1.5rem; }
.hl-blog-card__meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.hl-blog-card__date { font-size: 0.75rem; color: var(--hl-text-muted); }
.hl-blog-card__cat {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hl-gold-dark);
background: rgba(201,169,110,.12);
padding: 0.2rem 0.6rem;
border-radius: 2rem;
}
.hl-blog-card__title { font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: 0.5rem; }
.hl-blog-card__title a { color: var(--hl-dark); transition: color var(--hl-transition); }
.hl-blog-card__title a:hover { color: var(--hl-gold-dark); }
.hl-blog-card__excerpt { font-size: 0.875rem; color: var(--hl-text-muted); margin-bottom: 1rem; line-height: 1.6; }
.hl-blog-card__read {
display: inline-flex; align-items: center; gap: 0.4rem;
font-size: 0.75rem; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--hl-dark);
transition: gap var(--hl-transition);
}
.hl-blog-card__read:hover { gap: 0.7rem; color: var(--hl-gold-dark); }
/* SINGLE POST */
.hl-single-post .hl-container { padding-top: 3rem; padding-bottom: 3rem; }
.hl-post-body {
color: var(--hl-text-secondary);
line-height: 1.9;
font-size: 1.05rem;
}
.hl-post-body h2 { font-family: var(--font-serif); font-size: 1.7rem; color: var(--hl-dark); margin-block: 1.75rem 0.75rem; }
.hl-post-body h3 { font-size: 1.25rem; color: var(--hl-dark); margin-block: 1.5rem 0.5rem; }
.hl-post-body p { margin-bottom: 1.25rem; }
.hl-post-body img { border-radius: var(--hl-radius-lg); margin-block: 1.5rem; }
.hl-post-body a { color: var(--hl-gold-dark); text-decoration: underline; }
.hl-post-body blockquote {
border-left: 3px solid var(--hl-gold);
padding-left: 1.5rem;
margin-block: 1.5rem;
font-family: var(--font-serif);
font-size: 1.2rem;
color: var(--hl-dark);
font-style: italic;
}
.hl-post-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--hl-border); }
.hl-post-tags > span { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hl-text-muted); }
.hl-tag {
font-size: 0.75rem;
padding: 0.25rem 0.75rem;
border-radius: 2rem;
background: var(--hl-subtle);
color: var(--hl-text-secondary);
transition: all var(--hl-transition);
}
.hl-tag:hover { background: var(--hl-dark); color: var(--hl-white); }
.hl-post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--hl-border);
}
.hl-post-nav a {
display: flex; align-items: center; gap: 0.75rem;
font-size: 0.875rem; color: var(--hl-text-secondary);
padding: 1rem;
border: 1.5px solid var(--hl-border);
border-radius: var(--hl-radius);
transition: all var(--hl-transition);
}
.hl-post-nav a:hover { border-color: var(--hl-dark); color: var(--hl-dark); }
.hl-post-nav a small { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hl-text-muted); margin-bottom: 0.2rem; }
.hl-post-nav__next a { flex-direction: row-reverse; text-align: right; }
.hl-related-posts { margin-top: 3rem; }
.hl-related-posts__title { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 1.5rem; }
/* ══ PAGINATION ═════════════════════════════════════════════════════════════ */
.hl-pagination { display: flex; justify-content: center; margin-top: 3rem; }
.hl-pagination ul { display: flex; gap: 0.4rem; list-style: none; }
.hl-pagination li a,
.hl-pagination li span {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: var(--hl-radius);
font-size: 0.85rem;
color: var(--hl-text-secondary);
background: var(--hl-subtle);
transition: all var(--hl-transition);
}
.hl-pagination li a:hover { background: var(--hl-dark); color: var(--hl-white); }
.hl-pagination li.current span { background: var(--hl-dark); color: var(--hl-white); }
/* ══ CONTACT PAGE ═══════════════════════════════════════════════════════════ */
.hl-contact__layout {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 4rem;
align-items: start;
}
.hl-contact-info { display: flex; flex-direction: column; gap: 2rem; }
.hl-contact-info__item { display: flex; gap: 1rem; }
.hl-contact-info__icon {
width: 44px; height: 44px;
background: var(--hl-subtle);
border-radius: var(--hl-radius);
display: flex; align-items: center; justify-content: center;
color: var(--hl-gold-dark);
flex-shrink: 0;
}
.hl-contact-info__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hl-text-muted); margin-bottom: 0.25rem; }
.hl-contact-info__value { font-size: 0.95rem; color: var(--hl-dark); }
.hl-contact-form { background: var(--hl-white); border-radius: var(--hl-radius-xl); border: 1.5px solid var(--hl-border); padding: 2rem; }
.hl-contact-form h3 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: 1.5rem; }
.hl-contact__map { border-radius: var(--hl-radius-xl); overflow: hidden; margin-top: 3rem; }
.hl-contact__map iframe { width: 100%; height: 400px; border: none; display: block; }
/* ══ ABOUT PAGE ═════════════════════════════════════════════════════════════ */
.hl-team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}
.hl-team-card { text-align: center; }
.hl-team-card__photo {
width: 120px; height: 120px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 1rem;
border: 3px solid var(--hl-border);
}
.hl-team-card__name { font-weight: 600; color: var(--hl-dark); }
.hl-team-card__role { font-size: 0.8rem; color: var(--hl-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.hl-values-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.5rem;
}
.hl-value-card {
text-align: center;
padding: 2rem 1.5rem;
background: var(--hl-white);
border-radius: var(--hl-radius-xl);
border: 1.5px solid var(--hl-border);
transition: all var(--hl-transition);
}
.hl-value-card:hover { border-color: var(--hl-gold); transform: translateY(-3px); box-shadow: var(--hl-shadow); }
.hl-value-card__icon { font-size: 1.75rem; color: var(--hl-gold); margin-bottom: 1rem; display: block; }
.hl-value-card h3 { font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: 0.5rem; }
.hl-value-card p { font-size: 0.875rem; color: var(--hl-text-muted); }
/* ══ EXPERIENCES PAGE ════════════════════════════════════════════════════════ */
.hl-exp-feature__banner {
height: 420px;
border-radius: var(--hl-radius-xl);
overflow: hidden;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: flex-end;
}
.hl-exp-feature__content {
position: relative;
z-index: 1;
padding: 2.5rem;
background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
width: 100%;
}
.hl-exp-feature__banner::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0,0,0,.2);
}
.hl-exp-feature__content h3 { font-family: var(--font-serif); font-size: 1.7rem; color: #fff; margin-block: 0.5rem; }
.hl-exp-feature__content p { color: rgba(255,255,255,.7); margin-bottom: 1rem; }
.hl-exp-category-title {
font-family: var(--font-serif);
font-size: 1.5rem;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--hl-border);
}
.hl-exp-category-section { margin-bottom: 4rem; }
.hl-exp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.hl-exp-card {
background: var(--hl-white);
border-radius: var(--hl-radius-xl);
overflow: hidden;
border: 1.5px solid var(--hl-border);
transition: all var(--hl-transition);
}
.hl-exp-card:hover { border-color: var(--hl-gold); box-shadow: var(--hl-shadow); transform: translateY(-3px); }
.hl-exp-card__media { aspect-ratio: 16/10; overflow: hidden; }
.hl-exp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.hl-exp-card:hover .hl-exp-card__media img { transform: scale(1.05); }
.hl-exp-card__media--placeholder {
background: var(--hl-subtle);
display: flex;
align-items: center;
justify-content: center;
color: var(--hl-text-muted);
}
.hl-exp-card__body { padding: 1.25rem; }
.hl-exp-card__name { font-family: var(--font-serif); font-size: 1.1rem; margin-bottom: 0.4rem; }
.hl-exp-card__desc { font-size: 0.85rem; color: var(--hl-text-muted); margin-bottom: 1rem; line-height: 1.6; }
.hl-exp-card__footer { display: flex; align-items: center; justify-content: space-between; }
.hl-exp-card__price { font-family: var(--font-serif); font-size: 1.1rem; color: var(--hl-dark); }
.hl-exp-card__price--comp { color: #16A34A; font-size: 0.85rem; font-family: var(--font-sans); font-weight: 600; }
.hl-exp-card__price-type { font-size: 0.75rem; color: var(--hl-text-muted); font-family: var(--font-sans); }
.hl-highlights-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}
.hl-highlight-card { text-align: center; padding: 2rem 1.25rem; }
.hl-highlight-card__icon {
width: 52px; height: 52px;
background: rgba(201,169,110,.12);
border-radius: var(--hl-radius);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1rem;
color: var(--hl-gold-dark);
}
.hl-highlight-card h4 { font-weight: 600; margin-bottom: 0.4rem; }
.hl-highlight-card p { font-size: 0.85rem; color: var(--hl-text-muted); line-height: 1.6; }
/* ══ BOOKING PAGE ═══════════════════════════════════════════════════════════ */
.hl-booking-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 3rem;
}
.hl-booking-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
min-width: 80px;
}
.hl-booking-step__num {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--hl-subtle);
color: var(--hl-text-muted);
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
font-weight: 600;
transition: all var(--hl-transition);
border: 2px solid var(--hl-border);
}
.hl-booking-step.active .hl-booking-step__num,
.hl-booking-step.done .hl-booking-step__num {
background: var(--hl-gold);
color: var(--hl-dark);
border-color: var(--hl-gold);
}
.hl-booking-step__label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--hl-text-muted);
}
.hl-booking-step.active .hl-booking-step__label { color: var(--hl-dark); }
.hl-booking-step__line {
flex: 1;
height: 2px;
background: var(--hl-border);
min-width: 40px;
margin-bottom: 1.1rem;
}
.hl-booking-panel {
background: var(--hl-white);
border: 1.5px solid var(--hl-border);
border-radius: var(--hl-radius-xl);
padding: 2.5rem;
margin-bottom: 1.5rem;
}
.hl-booking-panel--hidden { display: none; }
.hl-booking-panel--success { text-align: center; border-color: #BBF7D0; background: #F0FDF4; }
.hl-booking-panel__header { margin-bottom: 2rem; }
.hl-booking-panel__header h2 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 0.35rem; }
.hl-booking-panel__header p { color: var(--hl-text-muted); font-size: 0.9rem; }
.hl-booking-search-form .hl-bsf__grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1.25rem;
margin-bottom: 1.5rem;
}
.hl-bsf__field label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--hl-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.4rem; }
.hl-bsf__field input,
.hl-bsf__field select {
width: 100%;
padding: 0.75rem 1rem;
border: 1.5px solid var(--hl-border);
border-radius: var(--hl-radius);
background: var(--hl-subtle);
font-size: 0.95rem;
font-weight: 500;
}
.hl-bsf__field input:focus,
.hl-bsf__field select:focus { outline: none; border-color: var(--hl-gold); background: var(--hl-white); }
.hl-rooms-results { display: flex; flex-direction: column; gap: 1.25rem; }
.hl-room-result-card {
display: grid;
grid-template-columns: 200px 1fr auto;
gap: 1.5rem;
background: var(--hl-white);
border: 1.5px solid var(--hl-border);
border-radius: var(--hl-radius-xl);
overflow: hidden;
transition: border-color var(--hl-transition), box-shadow var(--hl-transition);
}
.hl-room-result-card:hover { border-color: var(--hl-gold-light); box-shadow: var(--hl-shadow); }
.hl-room-result-card.selected { border-color: var(--hl-gold); background: rgba(201,169,110,.04); }
.hl-room-result-card__img { height: 100%; min-height: 160px; object-fit: cover; }
.hl-room-result-card__body { padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.hl-room-result-card__name { font-family: var(--font-serif); font-size: 1.15rem; }
.hl-room-result-card__meta { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--hl-text-muted); font-size: 0.8rem; }
.hl-room-result-card__meta span { display: flex; align-items: center; gap: 0.3rem; }
.hl-room-result-card__amenities { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hl-room-result-card__amenity { background: var(--hl-subtle); color: var(--hl-text-secondary); font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 2rem; }
.hl-room-result-card__action { padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.75rem; border-left: 1px solid var(--hl-border); }
.hl-room-result-card__price { text-align: right; }
.hl-room-result-card__price .amount { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; }
.hl-room-result-card__price .per { font-size: 0.75rem; color: var(--hl-text-muted); }
.hl-room-result-card__price .total { font-size: 0.8rem; color: var(--hl-gold-dark); font-weight: 500; }
.hl-booking-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 2rem;
align-items: start;
}
.hl-booking-auth-notice {
background: rgba(201,169,110,.08);
border: 1px solid rgba(201,169,110,.3);
border-radius: var(--hl-radius);
padding: 0.75rem 1rem;
font-size: 0.85rem;
color: var(--hl-text-secondary);
display: flex; align-items: flex-start; gap: 0.5rem;
margin-bottom: 1.25rem;
}
.hl-booking-auth-notice a { color: var(--hl-gold-dark); }
.hl-booking-summary {
background: var(--hl-subtle);
border-radius: var(--hl-radius-xl);
padding: 1.5rem;
position: sticky;
top: 1.5rem;
}
.hl-booking-summary h3 { font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--hl-border); }
.hl-summary-row { display: flex; justify-content: space-between; font-size: 0.875rem; padding: 0.4rem 0; }
.hl-summary-row--total { font-weight: 700; font-size: 1rem; border-top: 1px solid var(--hl-border); padding-top: 0.75rem; margin-top: 0.5rem; }
.hl-summary-row label { color: var(--hl-text-muted); }
.hl-booking-form-actions { display: flex; gap: 1rem; margin-top: 2rem; justify-content: flex-end; }
/* ADDONS */
.hl-addons-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--hl-border); }
.hl-addons-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.hl-addons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; }
.hl-addon-item {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.875rem;
background: var(--hl-subtle);
border-radius: var(--hl-radius);
border: 1.5px solid transparent;
cursor: pointer;
transition: all var(--hl-transition);
}
.hl-addon-item.selected { border-color: var(--hl-gold); background: rgba(201,169,110,.08); }
.hl-addon-item input { accent-color: var(--hl-gold); }
.hl-addon-item__info { flex: 1; }
.hl-addon-item__name { font-size: 0.875rem; font-weight: 500; }
.hl-addon-item__price { font-size: 0.75rem; color: var(--hl-text-muted); }
/* BOOKING SUCCESS */
.hl-booking-success { padding: 3rem 2rem; }
.hl-booking-success__icon { color: #16A34A; margin: 0 auto 1.5rem; width: fit-content; }
.hl-booking-success h2 { font-family: var(--font-serif); font-size: 1.75rem; margin-bottom: 0.75rem; }
.hl-booking-success p { color: var(--hl-text-muted); margin-bottom: 1.5rem; }
.hl-booking-success__ref {
display: inline-block;
background: var(--hl-subtle);
border: 1.5px dashed var(--hl-gold);
padding: 0.75rem 2rem;
border-radius: var(--hl-radius-lg);
font-weight: 700;
color: var(--hl-dark);
margin-bottom: 2rem;
}
.hl-booking-success__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* BOOKING CONFIRM */
.hl-confirm-details { margin-bottom: 1.5rem; }
.hl-confirm-policy {
background: var(--hl-subtle);
border-radius: var(--hl-radius);
padding: 1.25rem;
margin-bottom: 1.5rem;
}
.hl-confirm-policy h4 { font-weight: 600; margin-bottom: 0.5rem; font-size: 0.9rem; }
.hl-confirm-policy__text { font-size: 0.85rem; color: var(--hl-text-muted); line-height: 1.7; margin-bottom: 1rem; }
/* ══ AUTH PAGES ════════════════════════════════════════════════════════════ */
.hl-auth-page {
min-height: 100svh;
display: grid;
grid-template-columns: 1fr 1fr;
}
.hl-auth-page__brand {
position: fixed;
top: 2rem;
left: 2rem;
z-index: 10;
}
.hl-auth-logo { max-height: 40px; }
.hl-auth-logo-text {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 500;
color: var(--hl-dark);
}
.hl-auth-card {
display: flex;
flex-direction: column;
justify-content: center;
padding: 4rem 3rem;
background: var(--hl-white);
max-width: 520px;
width: 100%;
margin: auto;
}
.hl-auth-card--wide { max-width: 640px; }
.hl-auth-card__header { margin-bottom: 2rem; }
.hl-auth-card__header h1 { font-family: var(--font-serif); font-size: 2rem; margin-bottom: 0.35rem; }
.hl-auth-card__header p { color: var(--hl-text-muted); }
.hl-auth-form { display: flex; flex-direction: column; gap: 1.25rem; }
.hl-auth-form__forgot { font-size: 0.75rem; font-weight: 500; color: var(--hl-gold-dark); }
.hl-auth-card__switch {
text-align: center;
font-size: 0.875rem;
color: var(--hl-text-muted);
margin-top: 1.5rem;
}
.hl-auth-card__switch a { color: var(--hl-gold-dark); font-weight: 600; }
.hl-auth-card__home {
text-align: center;
font-size: 0.8rem;
color: var(--hl-text-muted);
margin-top: 0.75rem;
}
.hl-auth-card__home a {
display: inline-flex; align-items: center; gap: 0.3rem;
color: var(--hl-text-muted);
transition: color var(--hl-transition);
}
.hl-auth-card__home a:hover { color: var(--hl-dark); }
.hl-auth-page__bg {
position: sticky;
top: 0;
height: 100svh;
overflow: hidden;
background: var(--hl-dark-2);
}
.hl-auth-page__bg > div {
width: 100%; height: 100%;
background-size: cover;
background-position: center;
}
/* ══ 404 PAGE ═══════════════════════════════════════════════════════════════ */
.hl-404-page {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--hl-section-v) var(--hl-pad);
}
.hl-404-content { max-width: 500px; }
.hl-404-code {
font-family: var(--font-serif);
font-size: clamp(5rem, 15vw, 9rem);
font-weight: 300;
color: var(--hl-gold-light);
line-height: 1;
margin-bottom: 0.5rem;
}
.hl-404-page h1 { font-family: var(--font-serif); font-size: 1.75rem; margin-bottom: 0.75rem; }
.hl-404-desc { color: var(--hl-text-muted); margin-bottom: 2rem; }
.hl-404-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
/* ══ FLOATING CONTACT BUTTONS ══════════════════════════════════════════════
Single source of truth for the Call + WhatsApp floating buttons
(markup: template-parts/floating-buttons.php, which renders at most one
of each — never more). Fixed 24px from the right and bottom edges at
every viewport width. A real 22px gap (not a margin trick) separates the
two circles, and the shadow is kept soft enough — plus hover is scale-
only, no vertical lift — that neither the resting nor the hovered shadow
can ever bridge that gap and read as touching the neighbouring icon. ── */
.hl-floating-btns {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9000;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 22px;
pointer-events: none; /* the container itself is never clickable */
}
.hl-float-btn {
pointer-events: auto;
position: relative;
isolation: isolate;
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border: none;
box-shadow: 0 8px 20px -6px rgba(36,28,22,.28), 0 2px 6px rgba(36,28,22,.14);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease;
animation: hlFloatBtnIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hl-float-btn::before,
.hl-float-btn::after { content: none; display: none; }
.hl-float-btn svg { position: relative; z-index: 1; }
.hl-float-btn--call { background: var(--hl-gold); color: var(--hl-white); animation-delay: 0.15s; }
.hl-float-btn--wa { background: #25D366; color: #fff; animation-delay: 0.3s; }
/* Hover/focus: subtle scale only — no translateY. A vertical lift would
pull the bottom button's shadow up toward the top one (or vice versa),
eating into the 22px gap; scale-in-place never does. */
.hl-float-btn:hover,
.hl-float-btn:focus-visible {
transform: scale(1.05);
box-shadow: 0 10px 24px -6px rgba(36,28,22,.32), 0 3px 8px rgba(36,28,22,.16);
}
.hl-float-btn:focus-visible { outline: 2px solid var(--hl-gold-light); outline-offset: 3px; }
@keyframes hlFloatBtnIn {
from { opacity: 0; transform: translateY(16px) scale(0.9); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Tooltip — a desktop hover affordance only; hidden on touch, where there's
no hover and no room for it anyway. */
.hl-float-btn__tooltip {
position: absolute;
right: calc(100% + 0.85rem);
top: 50%;
transform: translateY(-50%) translateX(4px);
background: var(--hl-dark);
color: var(--hl-white);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.03em;
padding: 0.35rem 0.8rem;
border-radius: 0.4rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.hl-float-btn__tooltip::after {
content: '';
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-left-color: var(--hl-dark);
}
@media (hover: hover) and (pointer: fine) {
.hl-float-btn:hover .hl-float-btn__tooltip,
.hl-float-btn:focus-visible .hl-float-btn__tooltip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
}
@media (max-width: 640px) {
.hl-float-btn__tooltip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hl-float-btn { animation: none; }
.hl-float-btn:hover, .hl-float-btn:focus-visible { transform: none; }
}
/* ══ REVEAL ANIMATIONS ══════════════════════════════════════════════════════ */
.reveal-up,
.reveal-left,
.reveal-right {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-left { transform: translateX(-24px); }
.reveal-right { transform: translateX(24px); }
.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed {
opacity: 1;
transform: none;
}
/* ══ MEDIA QUERIES ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.hl-room-detail-layout { grid-template-columns: 1fr; }
.hl-room-booking-card { position: static; }
.hl-about-section__grid { grid-template-columns: 1fr; }
.hl-contact__layout { grid-template-columns: 1fr; }
.hl-booking-layout { grid-template-columns: 1fr; }
.hl-booking-summary { position: static; }
.hl-room-result-card { grid-template-columns: 140px 1fr; }
.hl-room-result-card__action { grid-column: 1/-1; flex-direction: row; align-items: center; border-left: none; border-top: 1px solid var(--hl-border); justify-content: space-between; }
}
@media (max-width: 768px) {
.hl-search-bar__inner { flex-direction: column; border-radius: var(--hl-radius-lg); }
.hl-search-bar__divider { width: 100%; height: 1px; margin: 0; }
.hl-search-bar__btn { border-radius: 0 0 var(--hl-radius-lg) var(--hl-radius-lg); justify-content: center; }
.hl-gallery-masonry { columns: 2; }
.hl-booking-steps { gap: 0; flex-wrap: nowrap; overflow-x: auto; }
.hl-booking-step__line { min-width: 24px; }
.hl-booking-search-form .hl-bsf__grid { grid-template-columns: 1fr; }
.hl-form-grid { grid-template-columns: 1fr; }
.hl-auth-page { grid-template-columns: 1fr; }
.hl-auth-page__bg { display: none; }
.hl-auth-card { padding: 2rem 1.25rem; margin: 5rem auto 2rem; }
.hl-addons-grid { grid-template-columns: 1fr; }
.hl-room-result-card { grid-template-columns: 1fr; }
.hl-room-result-card__img { height: 180px; width: 100%; }
}
@media (max-width: 480px) {
.hl-gallery-masonry { columns: 1; }
.hl-rooms-grid { grid-template-columns: 1fr; }
}
/* ══ HEADER & NAVIGATION (BUG-002 fix) ═══════════════════════════════════════ */
/* Announcement bar */
.hl-announce {
background: var(--hl-gold);
color: var(--hl-dark);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.04em;
text-align: center;
padding: 0.55rem 3rem;
position: relative;
z-index: 1001;
}
.hl-announce .hl-container { position: relative; }
.hl-announce p { margin: 0; }
.hl-announce__close {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--hl-dark);
padding: 0.25rem;
display: flex;
align-items: center;
opacity: 0.7;
transition: opacity var(--hl-transition);
}
.hl-announce__close:hover { opacity: 1; }
/* Main header */
.hl-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(15, 15, 15, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.06);
transition: background var(--hl-transition), box-shadow var(--hl-transition);
}
.hl-header.scrolled {
background: var(--hl-dark);
box-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hl-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
max-width: var(--hl-max-w);
margin-inline: auto;
padding-inline: var(--hl-pad);
height: 72px;
}
/* Logo */
.hl-logo {
flex-shrink: 0;
display: flex;
align-items: center;
text-decoration: none;
}
.hl-logo__img {
height: 44px;
width: auto;
object-fit: contain;
}
.hl-logo__text {
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 500;
color: var(--hl-white);
letter-spacing: 0.04em;
white-space: nowrap;
}
/* Primary desktop nav */
.hl-nav { display: flex; align-items: center; flex: 1; }
.hl-nav__menu {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.hl-nav__menu li { position: relative; }
.hl-nav__menu a {
display: block;
padding: 0.5rem 0.85rem;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgba(255,255,255,0.8);
text-decoration: none;
border-radius: var(--hl-radius);
transition: color var(--hl-transition), background var(--hl-transition);
position: relative;
}
.hl-nav__menu a::after {
content: '';
position: absolute;
bottom: 2px;
left: 0.85rem;
right: 0.85rem;
height: 1px;
background: var(--hl-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--hl-transition);
}
.hl-nav__menu a:hover,
.hl-nav__menu .current-menu-item > a,
.hl-nav__menu .current_page_item > a {
color: var(--hl-white);
}
.hl-nav__menu a:hover::after,
.hl-nav__menu .current-menu-item > a::after,
.hl-nav__menu .current_page_item > a::after {
transform: scaleX(1);
}
/* Header action buttons */
.hl-header__actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.hl-header__action {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
font-weight: 500;
color: rgba(255,255,255,0.75);
text-decoration: none;
transition: color var(--hl-transition);
letter-spacing: 0.03em;
}
.hl-header__action:hover { color: var(--hl-white); }
.hl-header__action-label { display: none; }
@media (min-width: 1100px) {
.hl-header__action-label { display: inline; }
}
/* Hamburger */
.hl-hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--hl-radius);
cursor: pointer;
transition: border-color var(--hl-transition);
}
.hl-hamburger:hover { border-color: rgba(255,255,255,0.5); }
.hl-hamburger__line {
display: block;
width: 20px;
height: 1.5px;
background: var(--hl-white);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
transform-origin: center;
}
/* Open state */
.hl-hamburger.is-open .hl-hamburger__line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hl-hamburger.is-open .hl-hamburger__line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hl-hamburger.is-open .hl-hamburger__line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Mobile menu drawer */
.hl-mobile-menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(320px, 85vw);
background: var(--hl-dark-2);
z-index: 999;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.hl-mobile-menu.is-open { transform: translateX(0); }
.hl-mobile-menu__inner {
display: flex;
flex-direction: column;
padding: 5rem 1.5rem 2rem;
min-height: 100%;
gap: 0;
}
.hl-mobile-nav {
list-style: none;
margin: 0 0 2rem;
padding: 0;
}
.hl-mobile-nav li + li { border-top: 1px solid rgba(255,255,255,0.06); }
.hl-mobile-nav a {
display: block;
padding: 0.9rem 0;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
text-decoration: none;
transition: color var(--hl-transition), padding-left var(--hl-transition);
}
.hl-mobile-nav a:hover,
.hl-mobile-nav .current-menu-item > a { color: var(--hl-gold); padding-left: 0.5rem; }
.hl-mobile-menu__actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: auto;
}
.hl-mobile-menu__phone {
display: flex;
align-items: center;
gap: 0.5rem;
color: rgba(255,255,255,0.5);
font-size: 0.85rem;
margin-top: 1rem;
text-decoration: none;
}
/* Overlay behind drawer */
.hl-mobile-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 998;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
backdrop-filter: blur(2px);
}
.hl-mobile-overlay.is-open {
opacity: 1;
pointer-events: all;
}
/* Main content offset for fixed header */
.hl-main { padding-top: 72px; }
.hl-announce ~ * .hl-main,
body:has(.hl-announce) .hl-main { padding-top: 108px; }
/* Responsive: show hamburger, hide desktop nav */
@media (max-width: 900px) {
.hl-nav { display: none; }
.hl-hamburger { display: flex; }
.hl-header__action--phone { display: none; }
.hl-header__action--login { display: none; }
/* Hide the desktop Book Now / My Account on mobile — they're in the drawer */
.hl-header__actions .hl-btn--gold,
.hl-header__actions .hl-btn--outline { display: none; }
/* Show hamburger last */
.hl-hamburger { order: 10; }
}
/* ══ FIX: Experience card overlay variant (used in front-page.php) ════════ */
.hl-exp-card__image {
position: relative;
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
background-color: var(--hl-subtle);
border-radius: var(--hl-radius-xl) var(--hl-radius-xl) 0 0;
overflow: hidden;
}
.hl-exp-card--no-image .hl-exp-card__image {
background: linear-gradient(135deg, var(--hl-subtle) 0%, var(--hl-border) 100%);
min-height: 160px;
display: flex;
align-items: center;
justify-content: center;
}
.hl-exp-card__overlay {
padding: 1.25rem;
}
.hl-exp-card__content {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.hl-exp-card__icon {
font-size: 2rem;
line-height: 1;
margin-bottom: 0.25rem;
display: block;
}
.hl-exp-card__title {
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--hl-dark);
margin: 0 0 0.25rem;
}
.hl-exp-card__desc {
font-size: 0.85rem;
color: var(--hl-text-muted);
line-height: 1.6;
margin: 0;
}
/* ══ FIX: About section image placeholder ══════════════════════════════════ */
.hl-about-section__placeholder {
width: 100%;
aspect-ratio: 4/3;
background: linear-gradient(135deg, #e8e4dc 0%, #c8b99a 100%);
border-radius: var(--hl-radius-xl);
position: relative;
overflow: hidden;
}
.hl-about-section__placeholder::after {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23b8a882' stroke-width='1' opacity='0.4'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E") center/80px no-repeat;
}
/* ══════════════════════════════════════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════════════════════════════════════ */
.hl-footer {
background: #0F0F0F;
color: rgba(255,255,255,0.65);
font-size: 0.875rem;
}
.hl-footer__top {
padding: 4rem 0 3rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hl-footer__grid {
display: grid;
grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
gap: 3rem;
}
@media (max-width: 900px) {
.hl-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
.hl-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
}
/* Brand column */
.hl-footer__logo { max-width: 150px; height: auto; margin-bottom: 1rem; }
.hl-footer__logo-text {
font-family: var(--font-serif);
font-size: 1.4rem;
color: var(--hl-white);
display: block;
margin-bottom: 1rem;
letter-spacing: 0.05em;
}
.hl-footer__tagline {
font-size: 0.82rem;
line-height: 1.6;
color: rgba(255,255,255,0.45);
max-width: 220px;
margin-bottom: 1.5rem;
}
.hl-footer__social {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.hl-footer__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.55);
transition: all 0.25s ease;
text-decoration: none;
}
.hl-footer__social-link:hover {
border-color: var(--hl-gold);
color: var(--hl-gold);
background: rgba(201,169,110,0.08);
}
/* Link columns */
.hl-footer__col-title {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--hl-white);
margin-bottom: 1.25rem;
}
.hl-footer__links {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.hl-footer__links a {
color: rgba(255,255,255,0.55);
text-decoration: none;
transition: color 0.2s ease;
font-size: 0.875rem;
}
.hl-footer__links a:hover { color: var(--hl-gold); }
/* Contact column */
.hl-footer__contact {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.hl-footer__contact li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
color: rgba(255,255,255,0.55);
font-size: 0.875rem;
line-height: 1.5;
}
.hl-footer__contact svg { flex-shrink: 0; margin-top: 2px; color: var(--hl-gold); }
.hl-footer__contact a {
color: rgba(255,255,255,0.55);
text-decoration: none;
transition: color 0.2s;
}
.hl-footer__contact a:hover { color: var(--hl-gold); }
/* Bottom bar */
.hl-footer__bottom {
padding: 1.25rem 0;
}
.hl-footer__bottom .hl-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.hl-footer__copy {
font-size: 0.78rem;
color: rgba(255,255,255,0.3);
margin: 0;
}
.hl-footer__legal-menu {
list-style: none;
margin: 0; padding: 0;
display: flex;
gap: 1.25rem;
}
.hl-footer__legal-menu a {
font-size: 0.78rem;
color: rgba(255,255,255,0.3);
text-decoration: none;
transition: color 0.2s;
}
.hl-footer__legal-menu a:hover { color: rgba(255,255,255,0.65); }
/* ══ FIX: About section badge (Est. year) ═════════════════════════════════ */
.hl-about-section__badge {
position: absolute;
bottom: -1rem;
right: -1rem;
background: var(--hl-gold);
color: var(--hl-dark);
padding: 1rem 1.25rem;
border-radius: var(--hl-radius);
text-align: center;
z-index: 2;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.hl-about-section__badge-num {
display: block;
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 600;
line-height: 1;
}
.hl-about-section__badge-label {
display: block;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: 0.2rem;
opacity: 0.75;
}
/* ══ FIX: About copy section missing title/body styles ════════════════════ */
.hl-about-section__copy .hl-heading {
font-size: clamp(1.6rem, 3.5vw, 2.5rem);
line-height: 1.15;
margin: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
HOSPITALITY LUXE — V3 FIX PATCH
Fixes: logo display, hero placeholder, floating buttons overlap,
gallery/room/experience placeholders with Unsplash images,
header improvements, footer enhancements, animations
═══════════════════════════════════════════════════════════════════════════ */
/* ── LOGO: Better fallback text when no image is set ─────────────────── */
.hl-logo__text {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 500;
color: var(--hl-white);
letter-spacing: 0.05em;
white-space: nowrap;
background: linear-gradient(135deg, var(--hl-gold-light), var(--hl-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hl-logo__img { filter: brightness(1.05); }
/* ── HEADER: Improved glass effect & visual hierarchy ────────────────── */
.hl-header {
background: rgba(10, 9, 8, 0.88) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-bottom: 1px solid rgba(201, 169, 110, 0.12) !important;
}
.hl-header.scrolled {
background: rgba(10, 9, 8, 0.97) !important;
border-bottom-color: rgba(201, 169, 110, 0.2) !important;
box-shadow: 0 4px 32px rgba(0,0,0,0.5) !important;
}
/* ── ANNOUNCEMENT BAR ─────────────────────────────────────────────────── */
.hl-announce {
background: linear-gradient(90deg, var(--hl-gold-dark), var(--hl-gold), var(--hl-gold-dark));
color: var(--hl-dark);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.6rem 0;
text-align: center;
}
/* ── HERO: Premium default background with animated gradient ─────────── */
.hl-hero__bg--default {
background:
linear-gradient(160deg,
#0a0907 0%,
#1a120a 25%,
#241810 50%,
#1a120a 75%,
#0a0907 100%),
repeating-linear-gradient(
45deg,
transparent,
transparent 60px,
rgba(201,169,110,0.02) 60px,
rgba(201,169,110,0.02) 61px
);
animation: heroGradient 8s ease-in-out infinite alternate;
}
@keyframes heroGradient {
0% { filter: brightness(1); }
100% { filter: brightness(1.15); }
}
/* ── HERO: Text & search bar polishing ───────────────────────────────── */
.hl-hero__title {
text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}
.hl-hero__eyebrow {
letter-spacing: 0.3em;
}
/* Floating Call/WhatsApp buttons — see the single consolidated
"FLOATING CONTACT BUTTONS" block earlier in this file. */
/* ── PLACEHOLDER IMAGES: Use Unsplash-style gradient art ─────────────── */
/* Room card placeholder — warm amber luxury feel */
.hl-room-card__img--placeholder,
.hl-room-card__image--placeholder {
background:
linear-gradient(160deg, #c9a96e22 0%, #8b5e3c44 100%),
repeating-linear-gradient(135deg,
#e8ddd0 0px, #e8ddd0 2px,
#f0e8dc 2px, #f0e8dc 20px
) !important;
position: relative;
overflow: hidden;
}
.hl-room-card__img--placeholder::after,
.hl-room-card__image--placeholder::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 40%, rgba(201,169,110,0.25) 0%, transparent 60%),
radial-gradient(ellipse at 70% 60%, rgba(139,94,60,0.15) 0%, transparent 50%);
}
/* Experience card placeholder — lush nature tones */
.hl-exp-card--no-image .hl-exp-card__image {
background:
linear-gradient(160deg, #2d4a2a 0%, #4a7c59 40%, #6b9c7a 70%, #3d5c3a 100%);
position: relative;
}
/* About section image placeholder */
.hl-about-section__placeholder {
background:
linear-gradient(160deg, #c9a96e33 0%, #8b5e3c44 100%),
linear-gradient(135deg, #e0d5c5 0%, #c9b898 50%, #b8a07a 100%) !important;
}
/* Blog card image placeholder */
.hl-blog-card__image-placeholder {
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(135deg, #e8e4dc 0%, #c9b898 50%, #b8a07a 100%);
position: relative;
overflow: hidden;
}
.hl-blog-card__image-placeholder::after {
content: '✦';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: rgba(201,169,110,0.3);
}
/* ── BLOG CARD FIX ─────────────────────────────────────────────────────── */
.hl-blog-card__image-wrap {
display: block;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--hl-radius-xl) var(--hl-radius-xl) 0 0;
}
.hl-blog-card__image-wrap img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.hl-blog-card:hover .hl-blog-card__image-wrap img { transform: scale(1.05); }
/* ── FOOTER ENHANCEMENTS ─────────────────────────────────────────────── */
.hl-footer {
background: #090807 !important;
}
.hl-footer__top {
padding-block: 4rem;
border-bottom: 1px solid rgba(201,169,110,0.12);
}
.hl-footer__grid {
grid-template-columns: 1.8fr 1fr 1fr 1.4fr !important;
}
@media (max-width: 900px) {
.hl-footer__grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
.hl-footer__grid { grid-template-columns: 1fr !important; }
}
.hl-footer__brand { padding-right: 2rem; }
.hl-footer__logo-text {
font-family: var(--font-serif) !important;
font-size: 1.6rem !important;
font-weight: 500 !important;
background: linear-gradient(135deg, var(--hl-gold-light), var(--hl-gold)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
display: inline-block !important;
margin-bottom: 1rem !important;
}
.hl-footer__tagline {
color: rgba(255,255,255,0.45) !important;
line-height: 1.7 !important;
max-width: 260px;
}
.hl-footer__social {
margin-top: 1.5rem;
display: flex;
gap: 0.75rem;
}
.hl-footer__social-link {
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid rgba(201,169,110,0.25);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.5);
transition: all 0.3s ease;
}
.hl-footer__social-link:hover {
border-color: var(--hl-gold);
color: var(--hl-gold);
background: rgba(201,169,110,0.1);
transform: translateY(-2px);
}
.hl-footer__col-title {
color: var(--hl-gold) !important;
font-size: 0.65rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
margin-bottom: 1.25rem !important;
}
.hl-footer__links a {
color: rgba(255,255,255,0.5) !important;
font-size: 0.88rem !important;
line-height: 2 !important;
transition: color 0.2s, padding-left 0.2s !important;
display: block;
}
.hl-footer__links a:hover {
color: var(--hl-gold-light) !important;
padding-left: 6px !important;
}
.hl-footer__contact li {
color: rgba(255,255,255,0.5) !important;
font-size: 0.88rem !important;
line-height: 1.7 !important;
}
.hl-footer__contact a {
color: rgba(255,255,255,0.5) !important;
transition: color 0.2s !important;
}
.hl-footer__contact a:hover { color: var(--hl-gold-light) !important; }
.hl-footer__bottom {
padding-block: 1.25rem;
background: rgba(0,0,0,0.3);
}
.hl-footer__copy {
color: rgba(255,255,255,0.3) !important;
font-size: 0.8rem !important;
}
/* ── REVEAL ANIMATIONS: Enhanced ────────────────────────────────────── */
.reveal-up {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left {
opacity: 0;
transform: translateX(-32px);
transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right {
opacity: 0;
transform: translateX(32px);
transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.revealed {
opacity: 1 !important;
transform: none !important;
}
/* ── EXPERIENCES SECTION: Cards get beautiful placeholder gradient ──── */
.hl-exp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.5rem;
}
.hl-exp-card {
background: var(--hl-white);
border-radius: var(--hl-radius-xl);
overflow: hidden;
box-shadow: var(--hl-shadow);
transition: transform var(--hl-transition), box-shadow var(--hl-transition);
}
.hl-exp-card:hover { transform: translateY(-6px); box-shadow: var(--hl-shadow-lg); }
/* nth-child gradient placeholders removed — they overrode admin-picked
background-image URLs on cards 1-4 with !important. Placeholder
fallback for cards without an image is handled by .hl-exp-card--no-image. */
.hl-exp-card--no-image.hl-tone-1 .hl-exp-card__image,
.hl-exp-card--no-image.hl-tone-1 {
background: linear-gradient(160deg, #c0392b 0%, #8b1a14 50%, #6b1010 100%);
}
.hl-exp-card--no-image.hl-tone-2 .hl-exp-card__image,
.hl-exp-card--no-image.hl-tone-2 {
background: linear-gradient(160deg, #1a6b5a 0%, #0d4a3a 50%, #083328 100%);
}
.hl-exp-card--no-image.hl-tone-3 .hl-exp-card__image,
.hl-exp-card--no-image.hl-tone-3 {
background: linear-gradient(160deg, #2c3e6b 0%, #1a2850 50%, #0f1a38 100%);
}
.hl-exp-card--no-image.hl-tone-4 .hl-exp-card__image,
.hl-exp-card--no-image.hl-tone-4 {
background: linear-gradient(160deg, #2d6b2e 0%, #1a4a1a 50%, #0f3010 100%);
}
/* ── SEARCH BAR: Fix on dark hero ───────────────────────────────────── */
.hl-search-bar {
margin-top: 2.5rem;
}
.hl-search-bar__inner {
background: rgba(255,255,255,0.97) !important;
border-radius: var(--hl-radius-lg) !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.35) !important;
}
.hl-search-bar__btn {
background: var(--hl-gold) !important;
color: var(--hl-dark) !important;
font-weight: 700 !important;
border-radius: 0 var(--hl-radius-lg) var(--hl-radius-lg) 0 !important;
transition: background 0.2s ease, transform 0.15s ease !important;
}
.hl-search-bar__btn:hover {
background: var(--hl-gold-dark) !important;
transform: none !important;
}
/* ── BTN IMPROVEMENTS ─────────────────────────────────────────────────── */
.hl-btn--gold {
background: linear-gradient(135deg, var(--hl-gold), var(--hl-gold-dark)) !important;
color: var(--hl-dark) !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
transition: all 0.25s ease !important;
box-shadow: 0 4px 16px rgba(201,169,110,0.3) !important;
}
.hl-btn--gold:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 28px rgba(201,169,110,0.4) !important;
}
/* ── SECTION HEADER ──────────────────────────────────────────────────── */
.hl-section-header {
text-align: center;
max-width: 600px;
margin-inline: auto;
margin-bottom: 3rem;
}
/* ── TESTIMONIALS: Dark background fix ──────────────────────────────── */
.hl-testi-card {
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(201,169,110,0.15) !important;
border-radius: var(--hl-radius-xl) !important;
padding: 2rem !important;
}
.hl-testi-card__stars { color: var(--hl-gold) !important; font-size: 1rem !important; margin-bottom: 1rem !important; }
.hl-testi-card__quote { color: rgba(255,255,255,0.8) !important; font-family: var(--font-serif) !important; font-size: 1.05rem !important; line-height: 1.7 !important; font-style: italic !important; }
.hl-testi-card__name { color: var(--hl-gold-light) !important; font-size: 0.85rem !important; font-weight: 600 !important; letter-spacing: 0.05em !important; margin-top: 1rem !important; display: block; }
/* ── ROOMS GRID ──────────────────────────────────────────────────────── */
.hl-rooms-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
/* ── BLOG GRID ───────────────────────────────────────────────────────── */
.hl-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.hl-blog-card {
background: var(--hl-white);
border-radius: var(--hl-radius-xl);
overflow: hidden;
box-shadow: var(--hl-shadow);
transition: transform var(--hl-transition), box-shadow var(--hl-transition);
}
.hl-blog-card:hover { transform: translateY(-4px); box-shadow: var(--hl-shadow-lg); }
.hl-blog-card__body { padding: 1.5rem; }
.hl-blog-card__cat { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--hl-gold); margin-bottom: 0.5rem; display: block; }
.hl-blog-card__title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; margin-bottom: 0.75rem; line-height: 1.3; }
.hl-blog-card__title a { color: var(--hl-dark); transition: color 0.2s; }
.hl-blog-card__title a:hover { color: var(--hl-gold-dark); }
.hl-blog-card__excerpt { font-size: 0.88rem; color: var(--hl-text-secondary); line-height: 1.6; margin-bottom: 1rem; }
.hl-blog-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--hl-border); }
.hl-blog-card__date { font-size: 0.75rem; color: var(--hl-text-muted); }
.hl-blog-card__read { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hl-gold-dark); display: flex; align-items: center; gap: 0.3rem; transition: gap 0.2s; }
.hl-blog-card__read:hover { gap: 0.6rem; }
/* ── CTA BANNER ──────────────────────────────────────────────────────── */
.hl-cta-banner {
position: relative;
padding-block: 6rem;
overflow: hidden;
}
.hl-cta-banner__bg {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, #1a120a 0%, #2d1e0f 50%, #1a120a 100%);
background-size: cover;
background-position: center;
}
.hl-cta-banner__overlay {
position: absolute;
inset: 0;
background: rgba(10,9,8,0.65);
}
.hl-cta-banner__content {
position: relative;
z-index: 1;
text-align: center;
}
.hl-cta-banner__sub {
color: rgba(255,255,255,0.65);
max-width: 480px;
margin-inline: auto;
margin-bottom: 2rem;
}
.hl-cta-banner__actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ── INTRO STRIP ─────────────────────────────────────────────────────── */
.hl-intro-strip {
background: var(--hl-dark-2);
padding-block: 2.5rem;
border-bottom: 1px solid rgba(201,169,110,0.12);
}
.hl-intro-strip__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
@media (max-width: 640px) {
.hl-intro-strip__grid { grid-template-columns: repeat(2, 1fr); }
}
.hl-intro-strip__value {
display: block;
font-family: var(--font-serif);
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 500;
color: var(--hl-gold);
margin-bottom: 0.25rem;
}
.hl-intro-strip__label {
display: block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
}
/* ── ABOUT SECTION ───────────────────────────────────────────────────── */
.hl-about-section__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
@media (max-width: 768px) {
.hl-about-section__grid { grid-template-columns: 1fr; gap: 3rem; }
}
.hl-about-section__media { position: relative; }
.hl-about-section__media img,
.hl-about-section__placeholder {
width: 100%;
border-radius: var(--hl-radius-xl);
box-shadow: var(--hl-shadow-xl);
}
.hl-about-section__badge {
position: absolute;
bottom: -1.5rem;
right: -1.5rem;
width: 90px;
height: 90px;
background: var(--hl-gold);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
box-shadow: 0 8px 24px rgba(201,169,110,0.4);
}
.hl-about-section__badge-num {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 600;
color: var(--hl-dark);
line-height: 1;
}
.hl-about-section__badge-label {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(15,15,15,0.65);
}
.hl-about-section__copy { }
.hl-body-text {
font-size: 1rem;
line-height: 1.8;
color: var(--hl-text-secondary);
margin-block: 1.25rem;
}
/* ── AVAILABILITY BADGES ─────────────────────────────────────────────── */
.hl-availability-msg--avail {
color: #16a34a !important;
background: #dcfce7 !important;
padding: 0.15rem 0.6rem !important;
border-radius: 2rem !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
}
.hl-availability-msg--na {
color: #dc2626 !important;
background: #fee2e2 !important;
padding: 0.15rem 0.6rem !important;
border-radius: 2rem !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
}
/* ── HERO SCROLL INDICATOR ───────────────────────────────────────────── */
.hl-hero__scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
color: rgba(255,255,255,0.5);
text-decoration: none;
animation: scrollBounce 2s ease-in-out infinite;
}
.hl-hero__scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, rgba(201,169,110,0.8), transparent);
}
.hl-hero__scroll-label {
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(201,169,110,0.6);
}
@keyframes scrollBounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
/* ── MOBILE MENU ─────────────────────────────────────────────────────── */
.hl-hamburger { display: none; }
@media (max-width: 900px) {
.hl-nav { display: none; }
.hl-hamburger {
display: flex;
flex-direction: column;
gap: 5px;
padding: 0.5rem;
border-radius: 0.4rem;
transition: background 0.2s;
}
.hl-hamburger:hover { background: rgba(255,255,255,0.08); }
.hl-hamburger__line {
width: 22px;
height: 2px;
background: rgba(255,255,255,0.8);
border-radius: 2px;
transition: all 0.3s ease;
display: block;
}
}
.hl-mobile-menu {
display: none;
position: fixed;
top: 72px; left: 0; right: 0;
background: rgba(10,9,8,0.98);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(201,169,110,0.15);
z-index: 999;
max-height: calc(100svh - 72px);
overflow-y: auto;
}
.hl-mobile-menu[aria-hidden="false"],
.hl-mobile-menu.is-open { display: block; }
.hl-mobile-menu__inner { padding: 1.5rem var(--hl-pad) 2rem; }
.hl-mobile-nav { list-style: none; }
.hl-mobile-nav li { border-bottom: 1px solid rgba(255,255,255,0.06); }
.hl-mobile-nav a {
display: block;
padding: 0.85rem 0;
color: rgba(255,255,255,0.75);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.05em;
transition: color 0.2s, padding-left 0.2s;
}
.hl-mobile-nav a:hover { color: var(--hl-gold-light); padding-left: 8px; }
.hl-mobile-menu__actions {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.hl-btn--block { display: block; text-align: center; width: 100%; }
.hl-mobile-menu__phone {
display: flex;
align-items: center;
gap: 0.6rem;
color: rgba(255,255,255,0.5);
font-size: 0.85rem;
margin-top: 0.5rem;
justify-content: center;
}
.hl-mobile-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 998;
backdrop-filter: blur(2px);
}
.hl-mobile-overlay[aria-hidden="false"],
.hl-mobile-overlay.is-open { display: block; }
/* ── ROOM CARD CLASS ALIASES (frontend-functions.php uses different class names) ── */
.hl-room-card__image-wrap { display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; }
.hl-room-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; display: block; }
.hl-room-card:hover .hl-room-card__image { transform: scale(1.05); }
.hl-room-card__image.hl-room-card__image--placeholder,
.hl-room-card__image--placeholder {
background: linear-gradient(160deg, #e8ddd0 0%, #c9b898 50%, #b8a07a 100%);
min-height: 220px;
}
.hl-room-card__overlay-badge {
position: absolute;
top: 1rem; left: 1rem;
background: rgba(10,9,8,0.75);
color: var(--hl-gold-light);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.25rem 0.75rem;
border-radius: 2rem;
backdrop-filter: blur(8px);
}
.hl-room-card__title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; margin-bottom: 0.6rem; line-height: 1.3; color: var(--hl-dark); }
.hl-room-card__title a { color: inherit; transition: color 0.2s; }
.hl-room-card__title a:hover { color: var(--hl-gold-dark); }
.hl-room-card__desc { font-size: 0.88rem; color: var(--hl-text-secondary); margin-bottom: 1rem; line-height: 1.6; }
.hl-room-card__price-from { font-size: 0.72rem; color: var(--hl-text-muted); }
.hl-room-card__price-night { font-size: 0.72rem; color: var(--hl-text-muted); }
/* PMS Dashboard admin improvements */
.hluxe-admin-settings .nav-tab-wrapper { margin-bottom: 1.5rem; }
/* ═══════════════════════════════════════════════════════════════════════════
V3.1 CRITICAL FIXES
═══════════════════════════════════════════════════════════════════════════ */
/* ── HERO: Full viewport coverage, content always visible ────────────── */
.hl-hero {
min-height: 100svh !important;
min-height: 100svh !important;
margin-top: -72px !important;
padding-top: 72px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
/* Pull hero up to sit behind header */
body:has(.hl-announce) .hl-hero {
margin-top: -108px !important;
padding-top: 108px !important;
}
/* Hero text — force visibility, never hidden */
.hl-hero__eyebrow,
.hl-hero__title,
.hl-hero__subtitle {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
.hl-hero__eyebrow {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--hl-gold-light) !important;
margin-bottom: 1.25rem;
display: block;
}
.hl-hero__title {
font-family: var(--font-serif) !important;
font-size: clamp(2.8rem, 8vw, 5.5rem) !important;
font-weight: 400 !important;
color: #ffffff !important;
line-height: 1.05 !important;
margin-bottom: 1rem !important;
text-shadow: 0 2px 40px rgba(0,0,0,0.6) !important;
}
.hl-hero__subtitle {
color: rgba(255,255,255,0.82) !important;
font-size: clamp(1rem, 2vw, 1.2rem) !important;
max-width: 560px;
margin: 0 auto 2.5rem !important;
line-height: 1.7 !important;
}
.hl-hero__content {
position: relative !important;
z-index: 10 !important;
text-align: center !important;
padding: 2rem var(--hl-pad) !important;
width: 100% !important;
max-width: 960px !important;
opacity: 1 !important;
}
/* The bg and overlay must cover the full hero including negative margin */
.hl-hero__bg,
.hl-hero__video {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.hl-hero__overlay {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.25) 0%,
rgba(0,0,0,0.5) 40%,
rgba(0,0,0,0.65) 100%
) !important;
}
.hl-hero__bg--default {
background: linear-gradient(
160deg,
#0c0a08 0%,
#1e140a 30%,
#261a0e 60%,
#1e140a 80%,
#0c0a08 100%
) !important;
}
/* ── ABOUT: Fix badge position & ensure content visible ─────────────── */
.hl-about-section__badge {
position: absolute !important;
bottom: -1.5rem !important;
right: -1.5rem !important;
z-index: 5 !important;
}
/* Content side — ensure heading and text show */
.hl-about-section__copy .hl-eyebrow,
.hl-about-section__copy .hl-heading,
.hl-about-section__copy .hl-body-text,
.hl-about-section__copy .hl-btn {
opacity: 1 !important;
transform: none !important;
}
/* Force the heading to be visible even before reveal triggers */
.hl-heading {
font-family: var(--font-serif) !important;
font-size: clamp(1.8rem, 4vw, 3rem) !important;
font-weight: 500 !important;
line-height: 1.15 !important;
color: var(--hl-text-primary) !important;
margin-bottom: 1rem !important;
}
.hl-heading--light { color: var(--hl-white) !important; }
/* ── BLOG CARD: Fix ✦ symbol showing as text ─────────────────────────── */
.hl-blog-card__image-placeholder {
display: block !important;
width: 100% !important;
aspect-ratio: 16/9 !important;
background: linear-gradient(135deg, #e8e4dc 0%, #c9b898 50%, #b8a07a 100%) !important;
position: relative !important;
overflow: hidden !important;
}
.hl-blog-card__image-placeholder::after {
content: '' !important; /* Remove the ✦ text */
position: absolute !important;
inset: 0 !important;
background:
radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 60%),
radial-gradient(ellipse at 70% 70%, rgba(0,0,0,0.1) 0%, transparent 50%) !important;
}
/* ── INTRO STRIP: On dark background ────────────────────────────────── */
.hl-intro-strip {
background: var(--hl-dark-2) !important;
padding-block: 2.5rem !important;
border-bottom: 1px solid rgba(201,169,110,0.12) !important;
}
.hl-intro-strip__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
/* ── REVEAL: Hero elements should never start hidden ─────────────────── */
.hl-hero .reveal-up,
.hl-hero .reveal-left,
.hl-hero .reveal-right {
opacity: 1 !important;
transform: none !important;
}
/* ── SEARCH BAR: Position properly within hero ──────────────────────── */
.hl-search-bar {
max-width: 780px !important;
margin: 0 auto !important;
width: 100% !important;
}
.hl-search-bar__inner {
background: rgba(255,255,255,0.97) !important;
border-radius: var(--hl-radius-lg) !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.2) !important;
display: flex !important;
align-items: stretch !important;
overflow: hidden !important;
}
/* ── HERO SCROLL: position correctly within flex column hero ─────────── */
.hl-hero__scroll {
position: relative !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
margin-top: 3rem !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.5rem !important;
color: rgba(255,255,255,0.5) !important;
animation: hl-scroll-bounce 2s ease-in-out infinite !important;
text-decoration: none !important;
}
/* ── MAIN CONTENT: Don't add extra top padding for hero page ─────────── */
body.hluxe-homepage .hl-main {
padding-top: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════
V3.2 HOMEPAGE HERO ADDITIONAL FIX
═══════════════════════════════════════════════════════════════════════ */
/* Homepage: hero goes edge-to-edge behind fixed header */
body.hluxe-homepage .hl-main {
padding-top: 0 !important;
}
body.hluxe-homepage .hl-hero {
padding-top: 72px !important;
min-height: 100svh !important;
min-height: 100svh !important;
}
/* When announcement bar is present add its height too */
body.hluxe-homepage:has(.hl-announce) .hl-hero {
padding-top: 108px !important;
}
/* Make sure hero text is ALWAYS visible white */
.hl-hero .hl-hero__eyebrow { color: var(--hl-gold-light) !important; opacity: 1 !important; }
.hl-hero .hl-hero__title { color: #ffffff !important; opacity: 1 !important; }
.hl-hero .hl-hero__subtitle{ color: rgba(255,255,255,0.82) !important; opacity: 1 !important; }
/* Scroll bounce animation for inline scroll indicator */
.hl-hero__scroll-indicator {
animation: hl-scroll-bounce 2.5s ease-in-out 1.5s infinite !important;
}
@keyframes hl-scroll-bounce {
0%,100% { transform: translateY(0); }
50% { transform: translateY(7px); }
}
/* ══ SOCIAL LINKS (contact page) ══════════════════════════════════════════ */
.hl-contact__socials {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
flex-wrap: wrap;
}
.hl-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(201,169,110,.12);
color: var(--hl-gold-dark);
transition: background 0.2s, color 0.2s;
text-decoration: none;
}
.hl-social-link:hover {
background: var(--hl-gold-dark);
color: #fff;
}
/* ══ TEAM CARD ADDITIONS ══════════════════════════════════════════════════ */
.hl-team-card__photo--placeholder {
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(201,169,110,.12);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
color: var(--hl-gold-dark);
}
.hl-team-card__bio {
font-size: 0.85rem;
color: var(--hl-text-muted);
line-height: 1.6;
margin-top: 0.4rem;
}
/* ══ ROOMS PAGE — FILTER BAR ══════════════════════════════════════════════ */
.hl-rooms-filter-bar {
background: var(--hl-white);
border-bottom: 1px solid var(--hl-border);
padding: 1.25rem 0 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.hl-rooms-filter-bar__inner {
display: flex;
align-items: flex-end;
gap: 1rem;
flex-wrap: wrap;
padding-bottom: 1rem;
}
.hl-filter-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.hl-filter-group label {
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--hl-text-muted);
}
.hl-filter-group input,
.hl-filter-group select {
border: 1.5px solid var(--hl-border);
border-radius: var(--hl-radius);
padding: .55rem .8rem;
font-size: .875rem;
font-family: var(--font-sans);
color: var(--hl-dark);
background: var(--hl-bg);
min-width: 140px;
transition: border-color .2s;
}
.hl-filter-group input:focus,
.hl-filter-group select:focus {
outline: none;
border-color: var(--hl-gold-dark);
}
.hl-room-type-tabs {
display: flex;
gap: .5rem;
overflow-x: auto;
padding-bottom: .75rem;
scrollbar-width: none;
}
.hl-room-type-tabs::-webkit-scrollbar { display: none; }
.hl-type-tab {
padding: .4rem 1rem;
border-radius: 999px;
border: 1.5px solid var(--hl-border);
background: transparent;
font-size: .8rem;
font-family: var(--font-sans);
color: var(--hl-text-muted);
cursor: pointer;
white-space: nowrap;
transition: all .2s;
}
.hl-type-tab:hover { border-color: var(--hl-gold); color: var(--hl-gold-dark); }
.hl-type-tab.active {
background: var(--hl-gold-dark);
border-color: var(--hl-gold-dark);
color: var(--hl-white);
}
/* Rooms listing grid */
.hl-rooms-listing { background: var(--hl-bg); }
.hl-rooms-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
}
.hl-rooms-grid__empty {
grid-column: 1/-1;
text-align: center;
padding: 4rem 2rem;
color: var(--hl-text-muted);
}
.hl-rooms-grid__empty svg { margin: 0 auto 1rem; opacity: .3; display: block; }
/* ══ ABOUT PAGE — MISSING ADDITIONS ═══════════════════════════════════════ */
.hl-about-story { background: var(--hl-white); }
.hl-about-section__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
@media(max-width:768px) {
.hl-about-section__grid { grid-template-columns: 1fr; gap: 2rem; }
.hl-rooms-filter-bar__inner { flex-direction: column; align-items: stretch; }
.hl-filter-group input, .hl-filter-group select { min-width: auto; }
}
.hl-about-section__media img {
width: 100%; border-radius: var(--hl-radius-xl);
aspect-ratio: 4/3; object-fit: cover;
box-shadow: var(--hl-shadow-lg);
}
.hl-about-values {
background: var(--hl-bg);
}
.hl-values-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.hl-value-card {
background: var(--hl-white);
border-radius: var(--hl-radius-xl);
border: 1px solid var(--hl-border);
padding: 2rem 1.5rem;
text-align: center;
transition: box-shadow .3s, transform .3s;
}
.hl-value-card:hover {
transform: translateY(-4px);
box-shadow: var(--hl-shadow);
}
.hl-value-card__icon {
width: 56px; height: 56px; border-radius: 50%;
background: rgba(201,169,110,.1);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1rem;
color: var(--hl-gold-dark);
}
.hl-value-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.hl-value-card p { font-size: .875rem; color: var(--hl-text-muted); line-height: 1.6; }
/* ══ AMENITIES PAGE ════════════════════════════════════════════════════════ */
.hl-amenities-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.hl-amenity-group {
background: var(--hl-white);
border-radius: var(--hl-radius-xl);
border: 1px solid var(--hl-border);
padding: 2rem;
transition: box-shadow .3s;
}
.hl-amenity-group:hover { box-shadow: var(--hl-shadow); }
.hl-amenity-group__header {
display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;
padding-bottom: 1rem; border-bottom: 1px solid var(--hl-border);
}
.hl-amenity-group__icon { color: var(--hl-gold-dark); flex-shrink: 0; }
.hl-amenity-group__title { font-family: var(--font-serif); font-size: 1.15rem; }
.hl-amenity-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.hl-amenity-list li {
font-size: .875rem; color: var(--hl-dark-2);
display: flex; align-items: center; gap: .6rem;
}
.hl-amenity-list li::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: var(--hl-gold-dark); flex-shrink: 0;
}
/* ══ EXPERIENCES PAGE ══════════════════════════════════════════════════════ */
.hl-exp-feature {
position: relative; overflow: hidden;
border-radius: var(--hl-radius-xl);
min-height: 380px;
display: flex; align-items: flex-end;
background: var(--hl-dark-2);
margin-bottom: 4rem;
}
.hl-exp-feature__banner {
position: absolute; inset: 0;
background-size: cover; background-position: center;
}
.hl-exp-feature__banner::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 60%);
}
.hl-exp-feature__content {
position: relative; z-index: 2;
padding: 2.5rem; max-width: 560px;
}
.hl-exp-feature__content h3 {
font-family: var(--font-serif); font-size: 1.7rem; color: #fff; margin-block: .5rem;
}
.hl-exp-feature__content p { color: rgba(255,255,255,.75); margin-bottom: 1rem; }
.hl-exp-category-title {
font-family: var(--font-serif); font-size: 1.3rem;
border-left: 3px solid var(--hl-gold); padding-left: 1rem;
margin-bottom: 1.5rem; color: var(--hl-dark);
}
.hl-exp-category-section { margin-bottom: 4rem; }
.hl-exp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.5rem;
}
.hl-exp-card {
border-radius: var(--hl-radius-xl);
border: 1px solid var(--hl-border);
background: var(--hl-white);
overflow: hidden;
transition: all .3s;
}
.hl-exp-card:hover { border-color: var(--hl-gold); box-shadow: var(--hl-shadow); transform: translateY(-3px); }
.hl-exp-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--hl-bg); }
.hl-exp-card__media img { width:100%; height:100%; object-fit:cover; transition: transform .5s; }
.hl-exp-card:hover .hl-exp-card__media img { transform: scale(1.05); }
.hl-exp-card__media--placeholder {
width:100%; height:100%; display:flex; align-items:center; justify-content:center;
color: var(--hl-gold-dark); opacity: .4;
}
.hl-exp-card__body { padding: 1.25rem; }
.hl-exp-card__name { font-family: var(--font-serif); font-size: 1.1rem; margin-bottom: .4rem; }
.hl-exp-card__desc { font-size: .85rem; color: var(--hl-text-muted); margin-bottom: 1rem; line-height: 1.6; }
.hl-exp-card__footer { display: flex; align-items: center; justify-content: space-between; }
.hl-exp-card__price { font-family: var(--font-serif); font-size: 1.1rem; color: var(--hl-dark); }
.hl-exp-card__price--comp { color: #16A34A; font-size: .85rem; font-family: var(--font-sans); font-weight: 600; }
.hl-exp-card__price-type { font-size: .75rem; color: var(--hl-text-muted); }
.hl-exp-empty { text-align: center; padding: 4rem; color: var(--hl-text-muted); }
/* ══ GALLERY PAGE ══════════════════════════════════════════════════════════ */
.hl-gallery-page { background: var(--hl-bg); }
.hl-gallery-filters {
display: flex; gap: .5rem; flex-wrap: wrap;
padding: 1.5rem 0; justify-content: center;
}
.hl-gallery-filter-btn {
padding: .45rem 1.2rem; border-radius: 999px;
border: 1.5px solid var(--hl-border);
background: transparent; font-size: .8rem;
font-family: var(--font-sans); cursor: pointer;
color: var(--hl-text-muted); transition: all .2s;
}
.hl-gallery-filter-btn:hover { border-color: var(--hl-gold); color: var(--hl-gold-dark); }
.hl-gallery-filter-btn.active {
background: var(--hl-gold-dark); border-color: var(--hl-gold-dark); color: var(--hl-white);
}
.hl-gallery-masonry {
columns: 3; gap: 1rem;
}
@media(max-width:900px) { .hl-gallery-masonry { columns: 2; } }
@media(max-width:540px) { .hl-gallery-masonry { columns: 1; } }
.hl-gallery-item {
break-inside: avoid;
margin-bottom: 1rem;
border-radius: var(--hl-radius);
overflow: hidden;
cursor: pointer;
position: relative;
}
.hl-gallery-item.hidden { display: none; }
.hl-gallery-item__media { display: block; width: 100%; }
.hl-gallery-item__media img {
width: 100%; height: auto; display: block;
transition: transform .5s; border-radius: var(--hl-radius);
}
.hl-gallery-item:hover .hl-gallery-item__media img { transform: scale(1.04); }
.hl-gallery-item__overlay {
position: absolute; inset: 0; background: rgba(0,0,0,0);
display: flex; align-items: center; justify-content: center;
transition: background .3s; border-radius: var(--hl-radius);
}
.hl-gallery-item:hover .hl-gallery-item__overlay { background: rgba(0,0,0,.3); }
.hl-gallery-item__play {
width: 52px; height: 52px; border-radius: 50%;
background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center;
color: var(--hl-dark);
}
.hl-gallery-empty { text-align: center; padding: 4rem; color: var(--hl-text-muted); }
/* ══ GALLERY LIGHTBOX ══════════════════════════════════════════════════════ */
.hl-lightbox {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,.92);
display: flex; align-items: center; justify-content: center;
}
.hl-lightbox.hidden { display: none; }
.hl-lightbox__inner {
position: relative; max-width: 90vw; max-height: 90vh;
}
.hl-lightbox__img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--hl-radius); }
.hl-lightbox__close {
position: fixed; top: 1.5rem; right: 1.5rem;
background: rgba(255,255,255,.15); border: none; border-radius: 50%;
width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
cursor: pointer; color: #fff; font-size: 1.4rem; line-height: 1;
transition: background .2s; z-index: 1;
}
.hl-lightbox__close:hover { background: rgba(255,255,255,.3); }
.hl-lightbox__nav {
position: fixed; top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,.15); border: none; border-radius: 50%;
width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
cursor: pointer; color: #fff; font-size: 1.5rem; line-height: 1; transition: background .2s;
}
.hl-lightbox__nav:hover { background: rgba(255,255,255,.3); }
.hl-lightbox__prev { left: 1.5rem; }
.hl-lightbox__next { right: 1.5rem; }
/* ══ ROOM DETAIL PAGE ══════════════════════════════════════════════════════ */
.hl-room-detail { background: var(--hl-white); }
.hl-room-detail__layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 3rem;
align-items: start;
}
@media(max-width:900px) { .hl-room-detail__layout { grid-template-columns: 1fr; } }
.hl-room-detail__gallery { margin-bottom: 2rem; }
.hl-room-detail__hero-img {
width: 100%; aspect-ratio: 16/9; object-fit: cover;
border-radius: var(--hl-radius-xl); margin-bottom: 1rem;
}
.hl-room-detail__thumbs {
display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
}
.hl-room-detail__thumbs::-webkit-scrollbar { display: none; }
.hl-room-detail__thumb {
flex-shrink: 0; width: 88px; height: 66px; object-fit: cover;
border-radius: var(--hl-radius); cursor: pointer; opacity: .7; transition: opacity .2s;
}
.hl-room-detail__thumb:hover,
.hl-room-detail__thumb.active { opacity: 1; }
.hl-room-detail__sidebar {
position: sticky; top: 80px;
background: var(--hl-white);
border: 1.5px solid var(--hl-border);
border-radius: var(--hl-radius-xl);
padding: 1.75rem;
}
.hl-room-detail__price {
font-family: var(--font-serif); font-size: 2rem;
font-weight: 600; color: var(--hl-dark);
margin-bottom: 1.5rem;
}
.hl-room-detail__price span { font-size: .85rem; font-family: var(--font-sans); color: var(--hl-text-muted); }
.hl-room-detail__amenity-tags {
display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.25rem 0;
}
.hl-amenity-tag {
display: inline-flex; align-items: center; gap: .35rem;
padding: .3rem .7rem; border-radius: 999px;
background: rgba(201,169,110,.1); color: var(--hl-gold-dark);
font-size: .78rem; border: 1px solid rgba(201,169,110,.3);
}
/* ══ BLOG / ARCHIVE ════════════════════════════════════════════════════════ */
.hl-blog-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 3rem;
align-items: start;
}
@media(max-width:900px) { .hl-blog-layout { grid-template-columns: 1fr; } }
.hl-post-grid { display: flex; flex-direction: column; gap: 2.5rem; }
.hl-post-card {
display: grid;
grid-template-columns: 280px 1fr;
gap: 2rem;
border: 1px solid var(--hl-border);
border-radius: var(--hl-radius-xl);
overflow: hidden;
background: var(--hl-white);
transition: box-shadow .3s, transform .3s;
}
.hl-post-card:hover { transform: translateY(-3px); box-shadow: var(--hl-shadow); }
.hl-post-card__img {
width: 100%; height: 100%; object-fit: cover;
aspect-ratio: 4/3;
}
.hl-post-card__img--placeholder {
width:100%;height:100%;min-height:180px;
background: var(--hl-bg); display:flex; align-items:center; justify-content:center;
color: var(--hl-gold-dark); opacity: .3;
}
.hl-post-card__body { padding: 1.75rem 1.75rem 1.75rem 0; }
.hl-post-card__date { font-size: .78rem; color: var(--hl-text-muted); margin-bottom: .5rem; }
.hl-post-card__title { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: .75rem; }
.hl-post-card__title a { color: var(--hl-dark); transition: color .2s; }
.hl-post-card__title a:hover { color: var(--hl-gold-dark); }
.hl-post-card__excerpt { font-size: .875rem; color: var(--hl-text-muted); line-height: 1.7; }
@media(max-width:640px) {
.hl-post-card { grid-template-columns: 1fr; }
.hl-post-card__body { padding: 1.25rem; }
}
.hl-blog-sidebar__widget {
background: var(--hl-white); border: 1px solid var(--hl-border);
border-radius: var(--hl-radius-xl); padding: 1.5rem; margin-bottom: 1.5rem;
}
.hl-blog-sidebar__widget h3 {
font-family: var(--font-serif); font-size: 1.05rem; margin-bottom: 1rem;
padding-bottom: .75rem; border-bottom: 1px solid var(--hl-border);
}
/* ══ LOGIN / REGISTER PAGES ════════════════════════════════════════════════ */
.hl-auth-page {
min-height: 100svh;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--hl-bg);
}
@media(max-width:768px) {
.hl-auth-page { grid-template-columns: 1fr; }
.hl-auth-page__media { display: none; }
}
.hl-auth-page__media {
background: var(--hl-dark-2);
position: relative; overflow: hidden;
}
.hl-auth-page__media-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: .6;
}
.hl-auth-page__media-content {
position: relative; z-index: 2; padding: 3rem;
display: flex; flex-direction: column; justify-content: flex-end; height: 100%;
}
.hl-auth-page__media-content h2 {
font-family: var(--font-serif); font-size: 2.5rem; color: #fff;
font-weight: 400; line-height: 1.2; margin-bottom: .75rem;
}
.hl-auth-page__media-content p { color: rgba(255,255,255,.7); }
.hl-auth-page__form {
display: flex; flex-direction: column;
justify-content: center; align-items: center;
padding: 3rem 2rem;
}
.hl-auth-card {
width: 100%; max-width: 420px;
}
.hl-auth-page__brand { margin-bottom: 2rem; }
.hl-auth-logo { max-height: 40px; }
.hl-auth-logo-text {
font-family: var(--font-serif); font-size: 1.5rem;
font-weight: 400; color: var(--hl-dark);
}
.hl-auth-card h1 { font-family: var(--font-serif); font-size: 1.7rem; margin-bottom: .25rem; }
.hl-auth-card .hl-auth-sub { font-size: .875rem; color: var(--hl-text-muted); margin-bottom: 2rem; }
.hl-auth-form-group {
margin-bottom: 1.25rem;
}
.hl-auth-form-group label {
display: block; font-size: .8rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em;
color: var(--hl-dark-2); margin-bottom: .4rem;
}
.hl-auth-form-group input {
width: 100%; padding: .75rem 1rem;
border: 1.5px solid var(--hl-border); border-radius: var(--hl-radius);
font-size: .9rem; font-family: var(--font-sans); color: var(--hl-dark);
background: var(--hl-white); transition: border-color .2s; box-sizing: border-box;
}
.hl-auth-form-group input:focus {
outline: none; border-color: var(--hl-gold-dark);
box-shadow: 0 0 0 3px rgba(201,169,110,.15);
}
.hl-auth-error {
background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
border-radius: var(--hl-radius); padding: .75rem 1rem;
font-size: .875rem; margin-bottom: 1.25rem;
}
.hl-auth-success {
background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0;
border-radius: var(--hl-radius); padding: .75rem 1rem;
font-size: .875rem; margin-bottom: 1.25rem;
}
.hl-auth-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 1.5rem; font-size: .875rem;
}
.hl-auth-row label { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.hl-auth-forgot { color: var(--hl-gold-dark); text-decoration: none; font-size: .875rem; }
.hl-auth-forgot:hover { text-decoration: underline; }
.hl-auth-divider {
text-align: center; margin: 1.5rem 0;
position: relative; font-size: .8rem; color: var(--hl-text-muted);
}
.hl-auth-divider::before {
content: ''; position: absolute; left: 0; top: 50%;
width: 100%; height: 1px; background: var(--hl-border);
}
.hl-auth-divider span {
position: relative; background: var(--hl-bg); padding: 0 .75rem;
}
.hl-auth-switch { text-align: center; margin-top: 1.5rem; font-size: .875rem; color: var(--hl-text-muted); }
.hl-auth-switch a { color: var(--hl-gold-dark); font-weight: 600; text-decoration: none; }
.hl-auth-switch a:hover { text-decoration: underline; }
/* ══ SINGLE POST / PAGE ════════════════════════════════════════════════════ */
.hl-single-post { background: var(--hl-white); }
.hl-single-post__layout {
display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: start;
}
@media(max-width:900px) { .hl-single-post__layout { grid-template-columns: 1fr; } }
.hl-single-post__hero { width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:var(--hl-radius-xl); margin-bottom:2rem; }
.hl-single-post__meta { font-size:.8rem; color:var(--hl-text-muted); margin-bottom:1rem; display:flex; gap:1rem; }
.hl-single-post__title { font-family:var(--font-serif); font-size:clamp(1.6rem,4vw,2.5rem); margin-bottom:2rem; line-height:1.2; }
.hl-single-post__content { font-size:.95rem; line-height:1.85; color:var(--hl-dark-2); }
.hl-single-post__content h2,h3,h4 { font-family:var(--font-serif); margin-block:1.5rem .75rem; }
.hl-single-post__content p { margin-bottom:1.25rem; }
.hl-single-post__content img { max-width:100%; border-radius:var(--hl-radius); margin-block:1rem; }
.hl-single-post__content blockquote {
border-left:3px solid var(--hl-gold); margin:2rem 0;
padding:1rem 1.5rem; background:var(--hl-bg); border-radius:0 var(--hl-radius) var(--hl-radius) 0;
font-family:var(--font-serif); font-size:1.1rem; color:var(--hl-dark-2);
}
/* ══ PAGE HERO — BACKGROUND FALLBACK ══════════════════════════════════════ */
/* When no hero image is set, show a premium dark gradient */
.hl-page-hero:not(:has(.hl-page-hero__bg)) {
background: linear-gradient(135deg, var(--hl-dark) 0%, var(--hl-dark-2) 100%);
}
/* Fallback for browsers that don't support :has() */
.hl-page-hero { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
/* ══ SECTION HEADINGS ══════════════════════════════════════════════════════ */
.hl-section-head { text-align: center; margin-bottom: 3rem; }
.hl-section-head .hl-eyebrow { margin-bottom: .5rem; }
.hl-section-head .hl-heading { margin-bottom: .75rem; }
.hl-section-head .hl-body { max-width: 600px; margin: 0 auto; color: var(--hl-text-muted); }
/* ══ UTILITY ════════════════════════════════════════════════════════════════ */
.hl-text-center { text-align: center; }
.hl-mt-3 { margin-top: 3rem; }
.hl-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
@media(max-width:540px) { .hl-cta-row { flex-direction: column; } }