/* ==========================================================================
MEXICO LUXE STAYS — Design System
Brand values from MLS_Manual_de_Marca.pdf — never recolor the palette.
Intent documented in DESIGN.md.
========================================================================== */
/* ---------- Fonts ----------
Self-hosted copies of the Google Fonts files the site used (variable
woff2, latin subset; one file per family/style serves every weight).
Same faces and weights as before, so rendering is unchanged; no request
to fonts.googleapis.com / fonts.gstatic.com any more. The regular
Cormorant and Montserrat files are preloaded in each page's . */
@font-face {
font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap;
src: url("../fonts/montserrat-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/montserrat-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
src: url("../fonts/montserrat-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
src: url("../fonts/montserrat-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- Tokens ---------- */
:root {
/* Brand palette (manual, p.5) */
--green: #3A4638; /* Verde de Marca — dark sections, overlays */
--sage: #4E5D4B; /* Verde Salvia — accents, icon strokes */
--ink: #141414; /* Negro Tinta — text on light */
--cream: #F6F4EF; /* Crema — light background (never white) */
--stone: #8E8B84; /* Gris Piedra — secondary text */
/* Derived, site-only */
--green-deep: #2C362B;
--sage-tint: #E9ECE6;
--gold: #C2A878;
--stone-text: #6B6862; /* Gris Piedra deepened for small text: 5:1 on cream (stone itself is 3.1:1, ≥18px only) */
--error: #9C4B3E;
--cream-60: rgba(246, 244, 239, .6);
--cream-80: rgba(246, 244, 239, .8);
--scrim-top: rgba(20, 26, 19, .45);
--scrim-mid: rgba(20, 26, 19, .38);
--scrim-bottom: rgba(20, 26, 19, .72);
/* Type */
--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--font-sans: 'Montserrat', 'Segoe UI', Helvetica, Arial, sans-serif;
--text-display: clamp(3rem, 7.5vw, 5.6rem);
--text-h2: clamp(2.3rem, 4.4vw, 3.6rem);
--text-h3: clamp(1.5rem, 2.2vw, 1.9rem);
--text-section-title: clamp(2rem, 4.4vw, 3.125rem);
--text-lead: 1.22rem;
--track-caps: .18em;
/* Space & shape */
--container: 1200px;
--pad-x: clamp(1.25rem, 5vw, 3rem);
--section-y: clamp(5rem, 10vw, 8.5rem);
--arch: 50% 50% 0 0 / 40% 40% 0 0; /* signature arch mask */
--radius: 14px;
/* Elevation (layered, green-tinted — never flat) */
--shadow-card: 0 1px 2px rgba(30, 38, 28, .05), 0 10px 30px rgba(30, 38, 28, .12);
--shadow-lift: 0 4px 10px rgba(30, 38, 28, .08), 0 26px 54px rgba(30, 38, 28, .2);
--shadow-header: 0 1px 0 rgba(20, 20, 20, .05), 0 8px 28px rgba(30, 38, 28, .08);
/* Motion */
--ease-out: cubic-bezier(.22, 1, .36, 1);
--dur: .55s;
}
/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth; overflow-x: hidden;
scrollbar-width: thin; scrollbar-color: rgba(20, 26, 19, .25) transparent;
}
/* Thin floating page scrollbar — no track, no up/down arrow buttons,
same treatment as the villa FAQ popup's scrollable list below. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20, 26, 19, .25); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(20, 26, 19, .4); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
body {
margin: 0;
font-family: var(--font-sans);
font-weight: 400;
font-size: 1rem;
line-height: 1.7;
color: var(--ink);
background: var(--cream);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
width: 100%;
}
img { max-width: 100%; display: block; height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0 0 1em; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--sage); color: var(--cream); }
/* Accessibility */
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 200;
background: var(--gold); color: var(--ink);
padding: .75rem 1.5rem; font-size: .8rem; text-transform: uppercase;
letter-spacing: var(--track-caps); text-decoration: none;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px;
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* ---------- Layout primitives ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--section-y); }
.section--green { background: var(--green); color: var(--cream); }
.section--green ::selection { background: var(--gold); color: var(--ink); }
.brand-statement { padding-block: clamp(10rem, 16vw, 13rem) clamp(1rem, 4vw, 2rem); text-align: center; }
.brand-statement-text {
margin: 0; font-family: var(--font-display); font-weight: 500; line-height: .95;
letter-spacing: -.02em; color: var(--ink);
font-size: clamp(3rem, 10vw, 8.5rem);
}
.brand-statement-text em { font-style: italic; font-weight: 400; color: var(--sage); }
.brand-statement-logo {
display: block; margin: 0 auto; height: clamp(1.7rem, 5.6vw, 4.8rem); aspect-ratio: 2696 / 279;
background-color: var(--gold);
-webkit-mask: url("../img/brand/wordmark-negative.png") center / contain no-repeat;
mask: url("../img/brand/wordmark-negative.png") center / contain no-repeat;
}
.brand-statement-copy {
max-width: 46rem; margin: clamp(1.5rem, 4vw, 2.75rem) auto 0; text-align: center;
font-weight: 400; color: var(--ink);
font-size: clamp(.95rem, 1.6vw, 1.15rem); line-height: 1.6;
}
.brand-statement-copy p + p { margin-top: 1em; }
.brand-statement-copy strong { color: var(--sage); font-weight: 700; }
/* ---------- Typography helpers ---------- */
.eyebrow {
display: inline-flex; align-items: center; gap: .9rem;
font-size: .72rem; font-weight: 600;
letter-spacing: var(--track-caps); text-transform: uppercase;
color: var(--gold); margin-bottom: 1.4rem;
}
.eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: var(--gold); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content: ""; width: 2.4rem; height: 1px; background: var(--gold); }
.eyebrow--plain::before, .eyebrow--plain::after { content: none; }
.notfound-code { font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: .3em; margin-bottom: 1.8rem; }
.display {
font-family: var(--font-display);
font-size: var(--text-display);
font-weight: 500;
line-height: 1.02;
letter-spacing: -.02em;
}
.display em, .h2 em { font-style: italic; font-weight: 400; }
.detail-hero .display em, .no-italic em { font-style: normal; font-weight: 400; }
.hero-title--home { font-size: clamp(2rem, 5vw, 3.6rem); } /* smaller than .display, home hero only */
.hero-logo { display: block; width: auto; height: clamp(36px, 5.5vw, 60px); max-width: 100%; object-fit: contain; margin: .8rem auto 0; }
.h2 {
font-family: var(--font-display);
font-size: var(--text-h2);
line-height: 1.08;
letter-spacing: -.015em;
}
.h3 { font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.2; }
.h2--oneline { white-space: nowrap; font-size: clamp(.85rem, 4.3vw, 3.2rem); }
.lead { font-size: var(--text-lead); font-weight: 300; line-height: 1.75; }
.text-muted { color: var(--stone-text); }
.section--green .text-muted { color: var(--cream-60); }
.measure { max-width: 34em; }
.center { text-align: center; margin-inline: auto; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
padding: 1.05rem 2.4rem;
font-size: .78rem; font-weight: 600;
letter-spacing: var(--track-caps); text-transform: uppercase;
text-decoration: none; border-radius: 2px; border: 1px solid transparent;
transition: transform var(--dur) var(--ease-out), background-color .25s ease,
border-color .25s ease, color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-solid { background: var(--green); color: var(--cream); }
.btn-solid:hover { background: var(--sage); }
.section--green .btn-solid,
.on-dark .btn-solid { background: var(--cream); color: var(--green); }
.section--green .btn-solid:hover,
.on-dark .btn-solid:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.btn-ghost:hover { background: var(--green); border-color: var(--green); color: var(--cream); }
.section--green .btn-ghost,
.on-dark .btn-ghost { color: var(--cream); }
.section--green .btn-ghost:hover,
.on-dark .btn-ghost:hover { background: var(--cream); border-color: var(--cream); color: var(--green); }
.btn-liquid {
background: rgba(246, 244, 239, .14);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border-color: rgba(255, 255, 255, .35);
color: var(--cream);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-liquid:hover { background: var(--cream); border-color: var(--cream); color: var(--green); }
.link-arrow {
display: inline-flex; align-items: center; gap: .5rem;
font-size: .78rem; font-weight: 600; letter-spacing: var(--track-caps);
text-transform: uppercase; text-decoration: none; color: var(--sage);
}
.link-arrow .arrow { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(6px); }
.section--green .link-arrow { color: var(--gold); }
/* ---------- Header ---------- */
.site-header {
position: fixed; inset: 0 0 auto 0; z-index: 100;
transition: background-color .35s ease, box-shadow .35s ease;
}
.site-header .container {
max-width: 1360px;
display: flex; align-items: center; justify-content: space-between;
gap: 2rem; padding-block: 2rem 1.1rem;
}
.site-header .logo { display: block; }
.site-header .logo img { height: 44px; width: auto; }
.logo-positive { display: none; }
.site-header.is-solid { background: var(--cream); box-shadow: var(--shadow-header); }
.site-header.is-solid .logo-negative { display: none; }
.site-header.is-solid .logo-positive { display: block; }
.main-nav { display: flex; align-items: center; gap: 2.1rem; }
.main-nav a {
font-size: .74rem; font-weight: 600; letter-spacing: var(--track-caps);
text-transform: uppercase; text-decoration: none; color: var(--cream);
padding-block: .4rem; position: relative;
}
.main-nav a::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform var(--dur) var(--ease-out);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header.is-solid .main-nav a { color: var(--ink); }
.nav-cta {
border: 1px solid var(--gold); border-radius: 2px; padding: .65rem 1.3rem !important;
background: rgba(255, 255, 255, .06);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--gold); color: var(--ink) !important; }
.site-header.is-solid .nav-cta { background: rgba(20, 20, 20, .03); }
.site-header.is-solid .nav-cta:hover { background: var(--gold); color: var(--ink) !important; }
.lang-toggle { display: flex; gap: .4rem; margin-left: .6rem; }
.lang-toggle button {
border: 1px solid var(--cream-60); background: transparent; color: var(--cream);
font-size: .68rem; font-weight: 600; letter-spacing: .05em;
padding: .35rem .6rem; border-radius: 2px; line-height: 1; opacity: .7;
transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.lang-toggle button:hover { opacity: 1; }
.lang-toggle button.is-active { opacity: 1; background: var(--cream); color: var(--green); border-color: var(--cream); }
.site-header.is-solid .lang-toggle button { border-color: rgba(20, 20, 20, .2); color: var(--ink); }
.site-header.is-solid .lang-toggle button.is-active { background: var(--green); color: var(--cream); border-color: var(--green); }
.nav-toggle {
display: none; background: none; border: 0; padding: .5rem;
flex-direction: column; gap: 6px;
}
.nav-toggle span {
width: 26px; height: 2px; background: var(--cream);
transition: transform .3s var(--ease-out), opacity .3s ease;
}
.site-header.is-solid .nav-toggle span, .site-header.nav-open .nav-toggle span { background: var(--ink); }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 900px) {
.nav-toggle { display: flex; }
.main-nav {
position: fixed; inset: 0; z-index: -1;
flex-direction: column; justify-content: center; gap: 1.6rem;
background: var(--cream);
opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.main-nav a { color: var(--ink) !important; font-size: 1rem; }
.nav-open .main-nav { opacity: 1; visibility: visible; }
.site-header.nav-open { background: var(--cream); }
.site-header.nav-open .logo-negative { display: none; }
.site-header.nav-open .logo-positive { display: block; }
.lang-toggle { margin: .4rem 0 0; }
.lang-toggle button { border-color: rgba(20, 20, 20, .2); color: var(--ink); opacity: .8; }
.lang-toggle button.is-active { background: var(--green); color: var(--cream); border-color: var(--green); opacity: 1; }
}
/* ---------- Hero ---------- */
.hero {
position: relative; min-height: 100svh;
display: flex; flex-direction: column; justify-content: center;
color: var(--cream); text-align: center;
padding-block: 9rem 4rem;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: none; }
.hero-media.has-video video { display: block; }
.hero-media.has-video .hero-video-poster { display: none; }
.hero-slide {
position: absolute; inset: 0;
opacity: 0; transition: opacity 1.6s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(var(--scrim-top), var(--scrim-mid) 45%, var(--scrim-bottom));
}
.hero > .container { position: relative; }
.hero .display { margin-inline: auto; max-width: 15ch; }
.hero-title--oneline { max-width: none; white-space: nowrap; font-size: clamp(1.9rem, 6.4vw, 5.6rem); }
.hero .lead { max-width: 44ch; margin: 1.6rem auto 0; color: var(--cream-80); }
.hero-scroll-hint {
position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
color: var(--cream-60); font-size: .68rem; letter-spacing: var(--track-caps);
text-transform: uppercase; text-decoration: none;
}
.hero-back-link {
position: absolute; top: 7rem; left: 2rem; z-index: 3;
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
color: var(--gold); border: 1px solid var(--gold);
transition: background-color .2s ease, color .2s ease;
}
.hero-back-link svg { width: 20px; height: 20px; }
.hero-back-link:hover { background: var(--gold); color: var(--ink); }
@media (max-width: 600px) { .hero-back-link { top: 6rem; left: 1.25rem; } }
/* Page hero (inner pages — shorter) */
.hero--page { min-height: 62svh; }
/* Entrance choreography (gated by prefers-reduced-motion at bottom). Pure CSS,
so it starts on first paint instead of waiting for main.js — the hero title
is the mobile LCP element. */
@keyframes hero-reveal { from { opacity: 0; transform: translateY(28px); } }
.hero [data-hero-reveal] { animation: hero-reveal .9s var(--ease-out) both; }
.hero [data-hero-reveal="2"] { animation-delay: .15s; }
.hero [data-hero-reveal="3"] { animation-delay: .3s; }
.hero [data-hero-reveal="4"] { animation-delay: .45s; }
.hero [data-hero-reveal="5"] { animation-delay: .6s; }
/* ---------- Hero search (liquid glass) ---------- */
.hero-search {
display: flex; align-items: stretch; flex-wrap: wrap;
/* The last term caps it at the container's content width: 92vw alone is
wider than that on phones/tablets, which widened the whole page sideways.
(Not 100% — the hero container shrink-wraps its content.) */
width: min(920px, 92vw, calc(100vw - 2 * var(--pad-x))); margin: 9.5rem auto 0;
border-radius: 4px;
background: rgba(246, 244, 239, .16);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, .32);
box-shadow: 0 30px 60px -18px rgba(20, 26, 19, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.hero-search-field {
position: relative;
flex: 1 1 0; min-width: 130px; padding: 1.3rem; text-align: center;
display: grid; align-items: center; justify-items: center;
}
.hero-search-field > label, .hero-search-field > .custom-select, .hero-search-field > input[type="text"] {
grid-area: 1 / 1;
width: 100%;
}
.hero-search-field label {
font-family: var(--font-display); font-size: 1.05rem; font-weight: 400;
color: var(--cream-60); margin: 0; pointer-events: none;
transition: opacity .2s var(--ease-out);
}
.hero-search-field.has-value label,
.hero-search-field:focus-within label { opacity: 0; }
/* Keyboard focus: the label fades out on focus, so a gold underline (same as
.filter-field on Our Villas) shows which field is active. */
.hero-search-field::after {
content: ""; position: absolute; left: 1.3rem; right: 1.3rem; bottom: .7rem; height: 2px;
background: var(--gold); transform: scaleX(0); transform-origin: left;
transition: transform .35s var(--ease-out); pointer-events: none;
}
.hero-search-field:has(:focus-visible)::after { transform: scaleX(1); }
.hero-search-field select {
width: 100%; background: transparent; border: 0; padding: 0; margin: 0;
font-family: var(--font-display); font-size: 1.05rem; color: var(--cream);
color-scheme: dark; appearance: none; text-align: center; cursor: pointer;
}
.hero-search-field select:focus { outline: none; }
.hero-search-field input[type="text"] {
width: 100%; background: transparent; border: 0; padding: 0; margin: 0;
font-family: var(--font-display); font-size: 1.05rem; color: var(--cream);
text-align: center;
}
.hero-search-field input[type="text"]::placeholder { color: var(--cream-60); opacity: 1; }
.hero-search-field input[type="text"]:focus { outline: none; }
.hero-search-field.has-error input[type="text"] { color: #E8A99B; }
.hero-search-field-error {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 6;
width: max-content; max-width: 260px;
margin: .7rem 0 0; padding: .9rem 1.1rem;
background: var(--cream); border: 1px solid var(--error); border-radius: 4px;
box-shadow: var(--shadow-lift);
font-family: var(--font-sans); font-size: .82rem; line-height: 1.5; color: var(--ink);
text-align: left;
}
.hero-search-field-error a {
display: inline-block; margin-top: .5rem;
color: var(--sage); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 780px) {
.hero-search-field-error { left: 1rem; right: 1rem; transform: none; width: auto; max-width: none; }
}
/* ---------- Check-in / check-out: custom calendar popover, replacing the
native whose own "dd/mm/aaaa" placeholder digits sat
on top of the field's floating label. Reuses the .trip-calendar look from
the contact page, tinted to sit on the dark hero glass. ---------- */
.hero-date-trigger {
width: 100%; background: transparent; border: 0; padding: 0; margin: 0;
font-family: var(--font-display); font-size: 1.05rem; font-weight: 400;
color: var(--cream-60); text-align: center; cursor: pointer;
transition: color .2s var(--ease-out);
}
.hero-date-trigger:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.hero-search-field.has-value .hero-date-trigger,
.hero-date-trigger[aria-expanded="true"] { color: var(--cream); }
.trip-calendar.hero-calendar { left: 50%; right: auto; transform: translateX(-50%); width: min(300px, calc(100vw - 2.4rem)); }
.trip-calendar.hero-calendar { animation-name: hero-calendar-in; }
@keyframes hero-calendar-in {
from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.hero-calendar-note {
margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid rgba(20,20,20,.1);
font-family: var(--font-sans); font-size: .72rem; color: var(--stone-text); text-align: center;
}
.trip-calendar-day.is-unavailable { text-decoration: line-through; }
.hero-search-btn {
flex: none; display: flex; align-items: center; justify-content: center;
width: 68px; margin: 0; border-radius: 0 4px 4px 0; border: 0;
background: var(--gold); color: var(--ink);
transition: background-color .25s ease, color .25s ease;
}
.hero-search-btn svg { width: 20px; height: 20px; }
.hero-search-btn:hover { background: var(--cream); }
.hero-search .custom-select-trigger { color: var(--cream); font-size: 1.05rem; justify-content: center; gap: .5rem; }
/* Empty Destination: the trigger has no text, so its chevron sat centred on
top of the overlaid "Destination" label. Until a value is picked (or the
field is focused, which hides the label), draw the same chevron after the
label text instead — the layout a picked value already has. */
.hero-search-field:not(.has-value):not(:focus-within) .custom-select-trigger::after { opacity: 0; }
.hero-search-field > label[for="hs-destination"]::after {
content: ""; display: inline-block; width: 11px; height: 11px; margin-left: .5rem; vertical-align: middle;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%238E8B84' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
@media (max-width: 780px) {
.hero-search { flex-direction: column; border-radius: 4px; }
.hero-search-btn { width: 100%; margin: 0; border-radius: 0 0 4px 4px; padding: 1rem; }
}
.hero-search-hint {
margin: 1.1rem auto 0; text-align: center;
font-family: var(--font-sans); font-size: .8rem; color: var(--cream-60);
}
.hero-search-hint a {
color: var(--cream); text-decoration: underline; text-underline-offset: 3px;
text-decoration-color: rgba(246, 244, 239, .5);
transition: text-decoration-color .2s var(--ease-out);
}
.hero-search-hint a:hover { text-decoration-color: var(--cream); }
/* ---------- Section headers ---------- */
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--split {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 2rem; flex-wrap: wrap;
}
/* ---------- Intro (welcome) ---------- */
.intro-grid {
display: grid; grid-template-columns: 1.1fr .9fr;
gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
}
.intro-figure { position: relative; }
.intro-figure img {
border-radius: var(--arch); aspect-ratio: 4 / 5; object-fit: cover; width: 100%;
}
.intro-figure::before {
content: ""; position: absolute; inset: -1.4rem 1.4rem 1.4rem -1.4rem;
border: 1px solid var(--sage); border-radius: var(--arch); z-index: -1; opacity: .5;
}
.stat-row { display: flex; gap: 3rem; margin-top: 2.4rem; }
.stat .stat-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--sage); }
.stat .stat-label { font-size: .7rem; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--stone-text); margin-top: .4rem; }
.stat-row--standalone { justify-content: center; margin-top: clamp(3rem, 6vw, 4.5rem); }
@media (max-width: 820px) { .intro-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .stat-row--standalone { gap: 2rem; flex-wrap: wrap; justify-content: flex-start; } }
/* ---------- Story split (large image + short copy, e.g. About Us) ---------- */
.story-split {
display: grid; grid-template-columns: .62fr 1fr;
gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
}
.story-split-media { margin: 0; }
.story-split-media img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--radius);
}
.story-split-body { max-width: 32ch; }
.story-split-body p {
margin-top: 1.2rem; font-size: .98rem; font-weight: 300; line-height: 1.75; color: var(--ink);
}
.story-split--reverse { grid-template-columns: 1fr .62fr; }
.story-split--half { grid-template-columns: 1fr 1fr; align-items: stretch; }
.story-split--half .story-split-body { max-width: 38ch; }
.story-split--half .story-split-media { margin-top: -3.5rem; margin-bottom: -1.5rem; }
.story-split--half .story-split-media img { height: 100%; aspect-ratio: auto; }
@media (max-width: 820px) { .story-split--half .story-split-media { margin-top: 0; margin-bottom: 0; } .story-split--half .story-split-media img { aspect-ratio: 4 / 3; height: auto; } }
/* Bleeds the media flush to the viewport's left edge and holds it at exactly
half the viewport width; the body fills the right half, inset to match
the .container's right-side margin (mirrors .featured-showcase's right bleed). */
.story-split--bleed-left {
grid-template-columns: 50vw 1fr;
padding-right: max(var(--pad-x), calc((100vw - var(--container)) / 2 + var(--pad-x)));
}
.story-split--bleed-left .story-split-media img { border-radius: 0 var(--radius) var(--radius) 0; }
@media (max-width: 820px) {
.story-split--bleed-left { grid-template-columns: 1fr; padding-right: var(--pad-x); padding-left: var(--pad-x); }
.story-split--bleed-left .story-split-media img { border-radius: var(--radius); }
}
.story-split-body :is(h2, h3) { margin-top: 2rem; }
.story-split-body :is(h2, h3):not(:first-child) { padding-top: 1.8rem; margin-top: 2.2rem; border-top: 1px solid rgba(20,20,20,.12); }
.story-split-body :is(h2, h3):first-child { margin-top: 0; }
.story-image-solo { max-width: 50rem; margin-inline: auto; }
.story-image-solo img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--radius);
}
@media (max-width: 820px) { .story-split { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .story-split--reverse .story-split-media { order: -1; } }
/* Intro — 3-column variant: stacked heading / center photo / copy */
.stacked-heading {
font-family: var(--font-display); font-weight: 500;
font-size: clamp(2.2rem, 3.4vw, 3.1rem); line-height: 1.12; letter-spacing: -.01em;
color: var(--ink); margin: 0;
}
.stacked-heading-line { display: block; }
.stacked-heading .italic { font-style: italic; font-weight: 400; }
/* ---------- Villa story: editorial two-column intro (heading + copy
left, compact photo right) ---------- */
.villa-story {
display: grid; grid-template-columns: .85fr 1.15fr;
gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.villa-story-copy {
max-width: 70ch; display: flex; flex-direction: column;
padding-top: clamp(.5rem, 2vw, 1.5rem);
}
.stacked-heading-line { white-space: nowrap; }
.villa-story-copy .stacked-heading { margin-bottom: clamp(1.6rem, 3vw, 2rem); }
.villa-story-copy p {
margin: 0; font-size: .92rem; font-weight: 300; line-height: 1.75;
color: var(--ink); text-align: left; max-width: 66ch;
}
.villa-story-copy .btn { margin-top: clamp(1.5rem, 3vw, 2rem); align-self: flex-start; }
.villa-story-media {
position: relative; margin: 0 auto 0 0;
--wall-shift: calc((100vw - min(100vw, var(--container))) / 2 + var(--pad-x));
width: calc(460px + var(--wall-shift));
margin-left: calc(-1 * var(--wall-shift) - 2px);
}
.villa-story-media-main {
margin: 0 auto 0 0; width: 100%; height: calc(460px * 5 / 4);
}
.villa-story-media-main img {
width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
border-radius: 0 var(--radius) var(--radius) 0;
}
@media (max-width: 680px) {
.villa-story { grid-template-columns: 1fr; gap: clamp(2.5rem, 10vw, 3.5rem); }
.villa-story-copy { max-width: none; padding-top: 0; }
.villa-story-copy p { max-width: none; }
.villa-story-media { margin-inline: auto; width: auto; max-width: 320px; }
.villa-story-media-main { height: auto; aspect-ratio: 4 / 5; }
.villa-story-media-main img { border-radius: var(--radius); }
}
@media (max-width: 900px) and (min-width: 681px) {
.villa-story { grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 3rem); }
}
/* ---------- Destinations ---------- */
.destinations-hero {
text-align: center; overflow: visible;
min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
}
.destinations-title-line {
font-family: var(--font-display); font-weight: 500; font-style: italic; line-height: 1.08;
font-size: var(--text-h2); color: var(--ink); margin: 0;
white-space: nowrap;
}
.destinations-grid {
position: relative; z-index: 2;
display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
gap: clamp(1.4rem, 4vw, 3rem);
margin-top: clamp(2rem, 4vw, 3.5rem);
}
.destination-card {
position: relative; display: block; text-decoration: none; color: var(--cream);
border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1;
width: min(500px, 42vw); flex: none;
box-shadow: 0 20px 44px -14px rgba(20, 26, 19, .4);
}
.destination-card img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
.destination-card::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(rgba(20,26,19,.05) 35%, rgba(20,26,19,.72));
}
.destination-card:hover img { opacity: 1; transform: scale(1.045); }
.destination-body {
position: absolute; inset: auto 0 0 0; z-index: 1; padding: 1.4rem;
text-align: center;
}
.destination-body .h2 { color: var(--cream); font-style: italic; font-size: 1.35rem; }
.destination-body p { color: var(--cream); max-width: 34ch; margin: .6rem auto 1rem; font-weight: 300; font-size: .95rem; }
.destination-body .link-arrow { color: var(--gold); font-size: .85rem; }
@media (max-width: 480px) {
.destination-card { width: min(280px, 44vw); }
.destination-body { padding: 1rem; }
}
/* ---------- Villa cards ---------- */
.villa-location {
position: absolute; top: 1rem; left: 1rem; z-index: 1;
background: rgba(20, 26, 19, .55); color: var(--cream);
backdrop-filter: blur(4px);
font-size: .62rem; font-weight: 600; letter-spacing: var(--track-caps);
text-transform: uppercase; padding: .45rem .9rem; border-radius: 2px;
}
/* Our Villas page: alternating showcase rows — photo carousel one side,
details the other; sides swap with each row (.villa-row--reverse). */
.villa-showcase { display: flex; flex-direction: column; gap: clamp(3.5rem, 7vw, 6rem); }
.villa-row {
display: grid; grid-template-columns: 1.15fr 1fr;
gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}
/* order alone would move the media into the narrower second track on
reversed rows — reassign the column sizes too so every villa's photo
renders at the same size regardless of which side it's on. */
.villa-row--reverse { grid-template-columns: 1fr 1.15fr; }
.villa-row-media { order: 1; position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; }
.villa-row-body { order: 2; }
.villa-row--reverse .villa-row-media { order: 2; }
.villa-row--reverse .villa-row-body { order: 1; }
.villa-row-slides { display: block; position: relative; width: 100%; height: 100%; }
.villa-row-slide {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 0; transition: opacity .6s var(--ease-out);
}
.villa-row-slide.is-active { opacity: 1; }
.villa-row-media .villa-location { position: absolute; top: 1rem; left: 1rem; }
.carousel-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
background: rgba(20, 26, 19, .5); color: var(--cream);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
transition: background-color .25s ease;
}
.carousel-arrow:hover { background: rgba(20, 26, 19, .8); }
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-prev { left: 1rem; }
.carousel-next { right: 1rem; }
.carousel-dots {
position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 2;
display: flex; gap: 1px;
}
/* Each button is a 24px target (WCAG 2.2 target size) with the 7px dot drawn
inside it, so the look stays the same but each dot is easy to hit on its
own (they sit over the photo's link). */
.carousel-dot {
width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
display: grid; place-items: center;
}
.carousel-dot::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: rgba(255, 255, 255, .5);
transition: background-color .25s ease, transform .25s ease;
}
.carousel-dot.is-active::before { background: var(--cream); transform: scale(1.2); }
.villa-row-body .h2 a { text-decoration: none; color: var(--ink); }
.villa-row-body .h2 a:hover { color: var(--sage); }
.villa-row-desc { margin: 1rem 0 0; font-size: 1rem; font-weight: 300; line-height: 1.7; color: var(--ink); max-width: 46ch; }
.villa-row-specs {
display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.2rem 0 1.6rem;
font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--stone-text);
}
/* ---------- Destination intro text (sits between hero and map) ---------- */
.destination-intro { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.destination-intro .lead { max-width: 62ch; margin: 0 auto; text-align: center; color: var(--ink); }
.destination-intro .testimonial-quote { max-width: 46em; }
.destination-intro + .section { padding-top: clamp(1rem, 2.5vw, 1.75rem); }
/* ---------- Destination villa map ---------- */
#villa-map { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.destination-map {
position: relative; width: 100%; height: clamp(360px, 46vw, 520px);
border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
background: var(--sage-tint); isolation: isolate;
}
.destination-map-loading {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
margin: 0; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--stone-text);
}
.destination-map .leaflet-container { width: 100%; height: 100%; font-family: var(--font-sans); background: var(--sage-tint); }
.destination-map .leaflet-control-attribution { font-size: .68rem; }
/* Brand pin: deliberately not a stock teardrop. A white plaque shaped like
the mark's own arch (echoing the M's twin doorways) floats above a soft
grounded shadow instead of tapering to a point — so the mark itself, not
a pin silhouette, is what reads as "you are here". */
.mls-map-pin { background: none; border: 0; }
.mls-map-pin-dot {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 44px; height: 52px; background: #fff;
border-radius: 50% 50% 8px 8px;
border: 1.5px solid var(--green);
box-shadow: 0 10px 18px -8px rgba(20, 26, 19, .45);
}
.mls-map-pin-dot::after {
content: ""; position: absolute; bottom: -10px; left: 50%;
width: 22px; height: 7px; border-radius: 50%;
background: rgba(20, 26, 19, .28); filter: blur(1px);
transform: translateX(-50%);
}
.mls-map-pin-dot img,
.leaflet-container .leaflet-marker-pane .mls-map-pin-dot img {
max-width: 24px !important; max-height: 20px !important; width: auto; height: auto; display: block; object-fit: contain;
}
.mls-map-pin.leaflet-div-icon { cursor: pointer; }
/* Casa de las Estrellas' mark is a slender radial flare (square, trimmed and
centred on the star, brand green — see casa-de-las-estrellas-pin.png), so
it gets a slightly larger square box than the other marks to carry the
same visual weight inside the pin. */
.mls-map-pin-dot--casa-de-las-estrellas img,
.leaflet-container .leaflet-marker-pane .mls-map-pin-dot--casa-de-las-estrellas img {
max-width: 28px !important; max-height: 28px !important;
}
/* Property page: this villa's pin is spotlit — scaled up, filled brand green
with a gold ring, a name tag above, and a pulse that plays when the map
scrolls into view (.is-spotlit, added by main.js). Sibling villas' pins
stay visible for context but recede. */
.mls-map-pin--sibling .mls-map-pin-dot { opacity: .72; transform: scale(.88); transform-origin: 50% 100%; }
.mls-map-pin--current .mls-map-pin-dot {
transform: scale(1.25); transform-origin: 50% 100%;
border: 2.5px solid var(--gold);
box-shadow: 0 0 0 4px rgba(194, 168, 120, .35), 0 12px 22px -8px rgba(20, 26, 19, .55);
}
.mls-map-pin--current .mls-map-pin-dot::before {
content: ""; position: absolute; inset: -4px;
border-radius: inherit; border: 2px solid var(--gold);
opacity: 0; pointer-events: none;
}
.mls-map-pin-label {
position: absolute; bottom: calc(100% + 24px); left: 50%;
transform: translateX(-50%);
white-space: nowrap; padding: .3rem .7rem; border-radius: 999px;
background: var(--green); color: #fff;
font: 600 .78rem/1.2 var(--font-sans); letter-spacing: .02em;
box-shadow: 0 6px 14px -6px rgba(20, 26, 19, .5);
pointer-events: none;
}
.mls-map-pin-label::after {
content: ""; position: absolute; top: 100%; left: 50%;
border: 5px solid transparent; border-top-color: var(--green);
transform: translateX(-50%);
}
.is-spotlit .mls-map-pin--current .mls-map-pin-dot { animation: mls-pin-drop .7s var(--ease-out, ease-out) both; }
.is-spotlit .mls-map-pin--current .mls-map-pin-dot::before { animation: mls-pin-pulse 1.6s ease-out .5s 3; }
.is-spotlit .mls-map-pin-label { animation: mls-pin-label-in .5s ease-out .45s both; }
@keyframes mls-pin-drop {
0% { transform: translateY(-28px) scale(1.25); opacity: 0; }
60% { transform: translateY(4px) scale(1.25); opacity: 1; }
100% { transform: translateY(0) scale(1.25); }
}
@keyframes mls-pin-pulse {
0% { opacity: .9; transform: scale(1); }
100% { opacity: 0; transform: scale(1.6); }
}
@keyframes mls-pin-label-in {
from { opacity: 0; transform: translate(-50%, 6px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 640px) {
.destination-map { height: clamp(320px, 90vw, 400px); }
}
@media (max-width: 820px) {
.villa-row { grid-template-columns: 1fr; }
.villa-row-media, .villa-row-body { order: initial !important; }
}
/* Featured showcase (home): name list on the left, preview photo on the right */
.featured-showcase {
display: grid; grid-template-columns: minmax(230px, 380px) 1fr; gap: clamp(2rem, 5vw, 4rem);
align-items: stretch; margin-top: clamp(2rem, 4vw, 3rem);
/* Left edge lines up with .container's inset; right edge bleeds to the viewport edge. */
padding-left: max(var(--pad-x), calc((100vw - var(--container)) / 2 + var(--pad-x)));
}
.featured-list-col { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.featured-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: clamp(1rem, 2.5vw, 1.6rem);
}
.featured-cta { margin-top: clamp(3.5rem, 7vw, 5.5rem); text-align: left; }
.featured-item {
display: flex; align-items: center; gap: 1.2rem;
text-decoration: none; color: var(--stone-text);
font-family: var(--font-sans); font-size: clamp(1.2rem, 2vw, 1.6rem);
padding-block: .2rem;
transition: color .3s ease;
}
.featured-item-line {
width: 3.5rem; height: 1px; background: currentColor; flex: none;
transform: scaleX(0); transform-origin: left; opacity: 0;
transition: transform .45s var(--ease-out), opacity .3s ease;
}
.featured-item.is-active,
.featured-item:hover,
.featured-item:focus-visible { color: var(--ink); }
.featured-item.is-active .featured-item-line,
.featured-item:hover .featured-item-line,
.featured-item:focus-visible .featured-item-line { transform: scaleX(1); opacity: 1; }
.featured-image {
position: relative; overflow: hidden;
border-radius: var(--radius) 0 0 var(--radius); /* flush against the viewport's right edge */
min-height: clamp(420px, 60vw, 640px); box-shadow: var(--shadow-card);
}
.featured-image img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 1; transition: opacity .35s ease;
}
@media (max-width: 780px) {
.featured-showcase { grid-template-columns: 1fr; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.featured-image { aspect-ratio: 4 / 3; min-height: 0; order: -1; border-radius: var(--radius); }
}
/* ---------- Testimonials ---------- */
.testimonials { position: relative; text-align: center; }
.testimonials-heading {
font-family: var(--font-display); font-size: var(--text-section-title); line-height: 1.2;
color: var(--gold); margin-bottom: 2.5rem;
}
.testimonials.section--green { padding-block: clamp(4.5rem, 9vw, 7rem); }
.testimonial-rating { display: flex; justify-content: center; gap: .25rem; margin-bottom: 1.2rem; }
.testimonial-rating .star { width: 16px; height: 16px; fill: rgba(246,244,239,.25); }
.testimonial-rating .star.is-filled { fill: var(--gold); }
.testimonial-quote {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.3; letter-spacing: -.01em;
max-width: 21em; margin: 0 auto;
}
.testimonial-quote::before { content: "\201C"; }
.testimonial-quote::after { content: "\201D"; }
.testimonial-attr { margin-top: 2rem; }
.testimonial-attr .name {
font-size: .78rem; font-weight: 600; letter-spacing: var(--track-caps);
text-transform: uppercase; color: var(--gold);
}
.testimonial-attr .villa { font-size: .78rem; color: var(--cream-60); margin-top: .3rem; }
.testimonial-slide { display: none; }
.testimonial-slide.is-active { display: block; animation: fadeIn .6s var(--ease-out); }
/* Every slide shares one grid cell, so the stage is always as tall as the
longest review — rotating never resizes the section or shifts the FAQ below. */
.testimonial-stage { display: grid; }
.testimonial-stage > .testimonial-slide { display: block; grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.testimonial-stage > .testimonial-slide.is-active { visibility: visible; opacity: 1; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.testimonial-pair {
display: flex; align-items: flex-start; justify-content: center;
gap: clamp(2.5rem, 5vw, 5rem);
}
.testimonial-quote-block { flex: 1 1 0; min-width: 0; max-width: 26em; }
.testimonial-quote-block .testimonial-quote { font-size: clamp(1.2rem, 2.2vw, 1.7rem); }
@media (max-width: 720px) {
.testimonial-pair { flex-direction: column; gap: 2.75rem; }
.testimonial-quote-block { max-width: 100%; }
}
.testimonial-dots { display: flex; gap: .6rem; justify-content: center; margin-top: 2.6rem; }
.testimonial-dots button {
width: 32px; height: 3px; border: 0; border-radius: 2px; padding: 0;
background: rgba(246,244,239,.25); transition: background-color .25s ease;
}
.testimonial-dots button.is-active, .testimonial-dots button:hover { background: var(--gold); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); text-align: center; }
.testimonial-card .testimonial-rating .star { fill: rgba(20,20,20,.16); }
.testimonial-card .testimonial-rating .star.is-filled { fill: var(--gold); }
.testimonial-card .testimonial-quote { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink); max-width: 26em; }
.testimonial-card .testimonial-attr .name { color: var(--green); }
.testimonial-card .testimonial-attr .villa { color: var(--stone-text); }
@media (max-width: 820px) { .testimonial-grid { grid-template-columns: 1fr; gap: 2.75rem; } }
/* ---------- CTA banner ---------- */
.cta-banner { position: relative; color: var(--cream); text-align: center; overflow: hidden; }
.cta-banner .cta-media { position: absolute; inset: 0; }
.cta-banner .cta-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-banner .cta-media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(rgba(30,38,28,.55), rgba(30,38,28,.82));
}
.cta-banner .container { position: relative; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.4rem; }
.cta-actions-lg .btn { padding: 1.35rem 3.2rem; font-size: .92rem; }
.cta-actions--triple,
.cta-actions--quad { flex-wrap: nowrap; gap: .8rem; }
.cta-actions--triple > .btn,
.cta-actions--triple > .cta-phone-qr,
.cta-actions--quad > .btn,
.cta-actions--quad > .cta-phone-qr { flex: 1 1 0; min-width: 0; }
.cta-actions--triple .btn,
.cta-actions--quad .btn {
padding: .8rem 1rem; font-size: .66rem; letter-spacing: .1em;
}
.cta-actions--quad .btn { white-space: nowrap; padding-inline: .5rem; font-size: .58rem; letter-spacing: .05em; }
.cta-phone-qr { position: relative; }
.cta-phone-qr .btn { width: 100%; }
@media (max-width: 780px) {
.cta-actions--quad { flex-wrap: wrap; }
.cta-actions--quad > .btn,
.cta-actions--quad > .cta-phone-qr { flex: 1 1 auto; }
}
@media (max-width: 560px) {
.cta-actions--triple { flex-wrap: wrap; }
.cta-actions--triple > .btn,
.cta-actions--triple > .cta-phone-qr { flex: 1 1 auto; }
}
.qr-popover {
position: absolute; top: calc(100% + .8rem); left: 50%; transform: translateX(-50%);
z-index: 10; width: 200px;
background: var(--cream); color: var(--ink);
border-radius: 14px; box-shadow: var(--shadow-lift);
padding: 1.2rem; text-align: center;
}
.qr-popover img { width: 130px; height: 130px; margin-inline: auto; border-radius: 10px; border: 1px solid rgba(20,20,20,.1); }
.qr-popover-hint { font-size: .72rem; color: var(--stone-text); margin: .7rem 0 0; }
.qr-popover-close {
position: absolute; top: .5rem; right: .5rem;
width: 22px; height: 22px; border: 0; background: none; color: var(--stone-text);
font-size: 1.1rem; line-height: 1; border-radius: 50%; cursor: pointer;
transition: background-color .2s ease, color .2s ease;
}
.qr-popover-close:hover { background: var(--sage-tint); color: var(--ink); }
/* ---------- CTA split (two-column, divided) ---------- */
.cta-split-grid { display: grid; grid-template-columns: 1fr 1fr; }
.cta-split-col {
display: flex; flex-direction: column; align-items: center; gap: 1.8rem;
text-align: center; padding: 1rem clamp(1.5rem, 5vw, 4rem);
}
.cta-split-col .h2 { color: var(--cream); max-width: 15ch; }
.cta-split-col .btn { min-width: 220px; margin-top: auto; }
.cta-split-col:first-child { border-right: 1px solid rgba(246, 244, 239, .18); }
@media (max-width: 780px) {
.cta-split-grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 3.5rem); }
.cta-split-col:first-child {
border-right: 0; border-bottom: 1px solid rgba(246, 244, 239, .18);
padding-bottom: clamp(2.5rem, 8vw, 3.5rem);
}
}
/* ---------- Footer ---------- */
.site-footer { background: var(--green-deep); color: var(--cream); }
.footer-grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: clamp(2rem, 4vw, 4rem); padding-block: clamp(3.5rem, 6vw, 5.5rem) 3rem;
}
.site-footer .logo img { height: 40px; width: auto; }
.footer-tagline { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--cream-60); margin-top: 1.2rem; max-width: 24ch; }
.footer-heading {
font-size: .68rem; font-weight: 600; letter-spacing: var(--track-caps);
text-transform: uppercase; color: var(--gold); margin: 0 0 1.2rem;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .7rem; }
.footer-links a { color: var(--cream-60); text-decoration: none; font-size: .9rem; font-weight: 300; transition: color .2s ease; }
.footer-links a:hover { color: var(--cream); }
.footer-contact { font-style: normal; font-size: .9rem; font-weight: 300; color: var(--cream-60); }
.footer-contact a { color: inherit; text-decoration: none; transition: color .2s ease; }
.footer-contact a:hover { color: var(--cream); }
.footer-contact p { margin-bottom: .8rem; }
.social-row { display: flex; gap: .8rem; margin-top: 1.4rem; }
.social-row a {
width: 42px; height: 42px; border: 1px solid rgba(246,244,239,.25); border-radius: 50%;
display: grid; place-items: center; color: var(--cream);
transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform var(--dur) var(--ease-out);
}
.social-row a:hover { background: var(--gold); border-color: var(--gold); color: var(--green-deep); transform: translateY(-2px); }
.social-row svg { width: 17px; height: 17px; fill: currentColor; }
.footer-bottom {
border-top: 1px solid rgba(246,244,239,.12);
padding-block: 1.6rem;
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
font-size: .74rem; color: var(--cream-60);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-legal-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.footer-legal-links a { color: inherit; text-decoration: none; transition: color .2s ease; }
.footer-legal-links a:hover, .footer-legal-links a:focus-visible { color: var(--cream); }
/* ---------- Legal pages (Privacy Notice / Terms & Conditions) — plain,
readable document layout, reused by both pages. ---------- */
.legal-content { max-width: 68ch; margin: 0 auto; }
.legal-updated { font-size: .8rem; color: var(--stone-text); margin: 0 0 1.6rem; }
.legal-content h2 {
font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600;
color: var(--ink); margin: 2.4rem 0 .8rem;
}
.legal-content section:first-of-type h2 { margin-top: 0; }
.legal-content p { font-size: .96rem; line-height: 1.75; color: var(--ink); margin: 0 0 1.1rem; }
.legal-content ul { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.legal-content li { font-size: .96rem; line-height: 1.75; color: var(--ink); margin-bottom: .5rem; }
.legal-content a { color: var(--sage); }
.legal-content strong { font-weight: 600; }
/* ---------- Quick actions (phone / WhatsApp / FAQ, stacked bottom-right) ---------- */
.quick-actions {
position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
display: flex; flex-direction: column; gap: .8rem; align-items: flex-end;
}
.qa-item { position: relative; }
.qa-btn {
width: 52px; height: 52px; border-radius: 50%; border: 0;
background: var(--green); color: var(--cream); text-decoration: none;
display: grid; place-items: center;
box-shadow: var(--shadow-lift);
transition: background-color .25s ease, transform var(--dur) var(--ease-out);
}
.qa-btn:hover, .qa-btn:focus-visible { background: var(--sage); transform: translateY(-3px); }
.qa-btn svg { width: 21px; height: 21px; fill: currentColor; }
.qa-fab { display: none; }
.qa-fab .qa-fab-close, .qa-fab[aria-expanded="true"] .qa-fab-open { display: none; }
.qa-fab[aria-expanded="true"] .qa-fab-close { display: block; }
.qa-btn.qa-fab:active { transform: scale(.94); }
.qa-btn--light { background: var(--cream); color: var(--green); border: 1px solid rgba(20, 20, 20, .12); }
.qa-btn--light:hover, .qa-btn--light:focus-visible { background: var(--sage-tint); transform: translateY(-3px); }
/* Popups open to the left of the button column so the stack never overlaps itself */
.qa-panel {
position: absolute; right: calc(100% + 1rem); bottom: 0;
max-height: calc(100vh - 2.8rem); overflow-y: auto;
opacity: 0; transform: translateX(6px); pointer-events: none;
transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.qa-item.is-open .qa-panel,
.qa-item:focus-within .qa-panel { opacity: 1; transform: translateX(0); pointer-events: auto; }
.qa-panel--pill {
display: flex; align-items: center; gap: .8rem; white-space: nowrap;
background: var(--cream); color: var(--ink);
border-radius: 999px; box-shadow: var(--shadow-lift);
padding: .6rem 1.3rem .6rem .6rem;
}
.qa-pill-icon {
flex: none; width: 34px; height: 34px; border-radius: 50%;
background: var(--green); color: var(--cream);
display: grid; place-items: center;
}
.qa-pill-icon svg { width: 15px; height: 15px; fill: currentColor; }
.qa-panel--pill a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.qa-panel--pill a:hover { color: var(--sage); }
.qa-pill-links { display: flex; flex-direction: column; gap: .25rem; }
.qa-panel--card {
/* This panel's content (WhatsApp Web / scan / QR) can grow taller than the
others (especially in Spanish), and it isn't the last item in the
bottom-anchored stack — so it needs its own viewport-relative anchor
instead of the shared .qa-panel positioning, or tall content pushes its
top (and close button) above the screen. */
position: fixed; right: calc(2.4rem + 52px); bottom: calc(2.2rem + 52px);
/* Leave room to clear the fixed header (~79px, higher z-index) — otherwise
tall content (e.g. with the QR shown) pushes the panel's top behind it. */
max-height: calc(100vh - 3.2rem - 131px); overflow-y: auto;
width: min(300px, 84vw);
/* On very narrow screens, right-anchoring + width can push the left edge
off-screen — cap it so it never overflows the viewport horizontally. */
max-width: calc(100vw - 2.4rem - 52px - 1rem);
background: var(--cream); color: var(--ink);
border-radius: 20px; box-shadow: var(--shadow-lift);
padding: 1.4rem;
}
.qa-panel-close {
position: absolute; top: .7rem; right: .7rem;
width: 26px; height: 26px; border: 0; background: none; color: var(--stone-text);
font-size: 1.3rem; line-height: 1; border-radius: 50%;
transition: background-color .2s ease, color .2s ease;
}
.qa-panel-close:hover { background: var(--sage-tint); color: var(--ink); }
.wa-panel-title { font-family: var(--font-display); font-size: 1.25rem; margin: 0; padding-right: 1.4rem; }
.wa-option {
display: flex; align-items: center; gap: .9rem; width: 100%;
text-align: left; text-decoration: none; color: var(--ink);
background: none; border: 1px solid rgba(20,20,20,.12); border-radius: 14px;
padding: .8rem .9rem; font: inherit;
transition: border-color .2s ease, background-color .2s ease;
}
.wa-option + .wa-option { margin-top: .7rem; }
.wa-option:hover, .wa-option[aria-expanded="true"] { border-color: var(--sage); background: var(--sage-tint); }
.wa-option-icon {
flex: none; width: 34px; height: 34px; border-radius: 50%;
background: var(--green); color: var(--cream);
display: grid; place-items: center;
}
.wa-option-icon svg { width: 16px; height: 16px; fill: currentColor; }
.wa-option-label { display: block; font-size: .88rem; font-weight: 600; }
.wa-option-hint { display: block; font-size: .74rem; color: var(--stone-text); margin-top: .1rem; }
.wa-qr {
display: none; text-align: center; margin-top: .9rem;
padding-top: 1rem; border-top: 1px solid rgba(20,20,20,.1);
}
.wa-qr.is-visible { display: block; }
.wa-qr img { width: 150px; height: 150px; margin-inline: auto; border-radius: 14px; border: 1px solid rgba(20,20,20,.1); }
.wa-qr-hint { font-size: .74rem; color: var(--stone-text); margin: .7rem 0 0; }
@media (max-width: 480px) {
.qa-panel--pill { padding-right: 1rem; }
}
/* ---------- Filters (Our Villas) ---------- */
.filter-bar {
display: flex; align-items: stretch; flex-wrap: wrap;
margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
background: var(--cream); border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
/* Booking-bar variant: solid, opaque, floats up over the hero image's
bottom edge — a distinct block per field plus a solid CTA block, like a
hotel booking widget. */
.filter-bar--glass {
position: relative; z-index: 5;
margin-top: clamp(-13.5rem, -17vw, -10.5rem);
border-radius: 4px;
background: var(--cream);
box-shadow: 0 30px 60px -18px rgba(20, 26, 19, .45);
}
@media (max-width: 720px) {
.filter-bar--glass { margin-top: clamp(-8.5rem, -24vw, -7rem); }
}
.filter-field {
min-width: 180px; flex: 1; padding: 1.3rem 1.7rem;
border-right: 1px solid rgba(20, 20, 20, .08);
position: relative;
}
.filter-field label {
display: block; font-size: .64rem; font-weight: 600; letter-spacing: var(--track-caps);
text-transform: uppercase; color: var(--stone-text); margin-bottom: .45rem;
}
.filter-field select {
width: 100%; font-family: var(--font-sans); font-size: 1.05rem; color: var(--ink);
border: 0; background: transparent; padding: 0 1.5rem 0 0; margin: 0; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%238E8B84' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right center; background-size: 11px; cursor: pointer;
}
.filter-field select:focus { outline: none; }
.filter-field input[type="text"] {
width: 100%; font-family: var(--font-sans); font-size: 1.05rem; color: var(--ink);
border: 0; background: transparent; padding: 0; margin: 0;
}
.filter-field input[type="text"]::placeholder { color: var(--ink); opacity: 1; }
.filter-field input[type="text"]:focus { outline: none; }
.filter-field::after {
content: ""; position: absolute; left: 1.7rem; right: 1.7rem; bottom: 0; height: 2px;
background: var(--gold); transform: scaleX(0); transform-origin: left;
transition: transform .35s var(--ease-out);
}
.filter-field:focus-within::after { transform: scaleX(1); }
.filter-field--guests.has-error::after { background: var(--error); transform: scaleX(1); }
.filter-field-error {
position: absolute; top: 100%; left: 1.7rem; right: 1.7rem; z-index: 6; width: max-content; max-width: 260px;
margin: .7rem 0 0; padding: .9rem 1.1rem;
background: var(--cream); border: 1px solid var(--error); border-radius: 4px;
box-shadow: var(--shadow-lift);
font-family: var(--font-sans); font-size: .82rem; line-height: 1.5; color: var(--ink);
text-align: left;
}
.filter-field-error a {
display: inline-block; margin-top: .5rem;
color: var(--sage); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 720px) {
.filter-field-error { left: 0; right: 0; }
}
/* Custom select: replaces the native OS dropdown list so opened options
match the filter bar's own look instead of the browser's default styling. */
.visually-hidden-select { position: absolute; width: 0; height: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.custom-select { position: relative; }
.custom-select-trigger {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .6rem;
font-family: var(--font-sans); font-size: 1.05rem; color: var(--ink);
background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
}
.custom-select-trigger::after {
content: ""; width: 11px; height: 11px; flex: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%238E8B84' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center; background-size: 11px;
transition: transform .25s var(--ease-out);
}
.custom-select-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
.custom-select-list {
position: absolute; top: calc(100% + .8rem); left: -1.2rem; right: -1.2rem; z-index: 20;
margin: 0; padding: .5rem; list-style: none; max-height: 280px; overflow-y: auto;
background: var(--cream); border-radius: 14px;
box-shadow: 0 24px 48px -14px rgba(20, 26, 19, .35), 0 0 0 1px rgba(20, 20, 20, .06);
}
.custom-select-list li {
padding: .7rem 1rem; border-radius: 10px;
font-family: var(--font-sans); font-size: 1rem; color: var(--ink);
cursor: pointer; transition: background-color .18s ease, color .18s ease;
}
.custom-select-list li:hover, .custom-select-list li:focus {
background: var(--sage-tint); outline: none;
}
.custom-select-list li[aria-selected="true"] { color: var(--gold); font-style: italic; }
/* Home hero: villas listed under their destination in the same dropdown */
.custom-select-list li.is-destination-option { font-weight: 600; }
.custom-select-list li.is-villa-option { padding: .5rem 1rem .5rem 2rem; font-size: .95rem; }
/* One column per destination, its villas stacked underneath (each li gets
its grid-column from main.js; dense flow pulls later columns up to the top
row). The empty "clear" option spans the full width above them. */
.hero-search .custom-select-list:has(.is-destination-option) {
display: grid; grid-template-columns: repeat(var(--dest-columns, 2), max-content);
grid-auto-flow: row dense; column-gap: .5rem; align-content: start;
right: auto; width: max-content; max-height: none;
}
.hero-search .custom-select-list:has(.is-destination-option)[hidden] { display: none; }
.hero-search .custom-select-list li[data-value=""] { grid-column: 1 / -1; }
@media (max-width: 780px) {
.hero-search .custom-select-list:has(.is-destination-option) { display: block; left: -1.2rem; right: -1.2rem; width: auto; max-height: 280px; }
.hero-search .custom-select-list:has(.is-destination-option)[hidden] { display: none; }
.hero-search .custom-select-list li { grid-column: auto !important; }
.custom-select-list li.is-destination-option:not(:first-child) { margin-top: .35rem; }
}
.filter-clear {
flex: none; display: flex; align-items: center; justify-content: center;
padding: 0 2.6rem; background: var(--green); border: 0; color: var(--cream);
font-size: .76rem; font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase;
text-decoration: none; border-radius: 0 4px 4px 0;
transition: background-color .2s ease;
}
.filter-clear:hover { background: var(--green-deep); }
.filter-count { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--stone-text); margin-bottom: 1.6rem; }
@media (max-width: 720px) {
.filter-bar { flex-direction: column; }
.filter-field { border-right: 0; border-bottom: 1px solid rgba(20, 20, 20, .08); }
.filter-clear { padding: 1.1rem 1.7rem; border-radius: 0 0 4px 4px; }
}
.empty-state {
text-align: center; padding: 4rem 1rem; border: 1px dashed var(--stone);
border-radius: var(--radius); color: var(--stone-text);
}
/* Home-search dates on villas.html: removable chip, live-check placeholder,
and the "closest openings" list shown when nothing fits the dates. */
.filter-stay {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem 1rem;
margin: -.8rem 0 1.6rem; font-size: .9rem; color: var(--ink);
}
.filter-stay[hidden] { display: none; }
.filter-stay-clear {
background: none; border: none; padding: 0; font: inherit; font-size: .82rem; color: var(--stone-text);
text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.filter-stay-clear:hover { color: var(--ink); }
.villa-stay-checking { text-align: center; padding: 4rem 1rem; font-family: var(--font-display); font-style: italic; color: var(--stone-text); }
.stay-openings { list-style: none; padding: 0; margin: 1.6rem auto; max-width: 460px; display: grid; gap: .7rem; }
.stay-opening {
display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1.2rem; text-align: left;
border: 1px solid rgba(20,20,20,.18); border-radius: 8px; background: var(--cream); color: var(--ink);
text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}
.stay-opening:hover { border-color: var(--sage); transform: translateY(-1px); }
.stay-opening-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.stay-opening-dates { font-size: .85rem; color: var(--stone-text); }
.stay-openings-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
/* ---------- Villa detail ---------- */
.detail-hero {
position: relative; color: var(--ink); padding-top: 7.5rem; padding-bottom: clamp(1rem, 2vw, 1.5rem); background: var(--cream);
min-height: 100vh; display: flex; align-items: center; box-sizing: border-box;
}
.detail-hero .container { width: 100%; max-width: 1560px; padding-inline: clamp(1rem, 3vw, 2rem); }
.detail-hero .container { position: relative; }
.detail-hero .breadcrumb { display: block; margin-bottom: clamp(.6rem, 1.2vw, 1rem); }
.breadcrumb { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--stone-text); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--sage); }
.detail-faq-jump {
display: inline-block; margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--sage); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px;
transition: color .2s ease;
}
.detail-faq-jump:hover { color: var(--ink); }
#villa-faq { scroll-margin-top: 6.5rem; }
/* Villa gallery: a bento-style photo grid with the villa's name/intro
standing in as one of the tiles; photo tiles are rendered from the
villa's `gallery` categories (villas-data.js) — see main.js. */
.villa-gallery {
display: grid; grid-template-columns: 1fr 1.15fr 1fr; grid-template-rows: 1.15fr .95fr .95fr;
grid-template-areas:
"text tall small1"
"img1 tall small2"
"img1 bottom small3";
gap: clamp(.6rem, 1.4vw, 1rem);
height: clamp(420px, calc(100vh - 12rem), 760px);
margin-top: clamp(.8rem, 1.5vw, 1.2rem);
}
.villa-gallery--5 {
grid-template-areas:
"text tall small1"
"img1 tall small2"
"img1 bottom small2";
}
.villa-gallery-text { grid-area: text; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.villa-gallery-text .eyebrow { margin-bottom: .9rem; }
.villa-gallery-text .display {
font-size: clamp(2.6rem, 4.2vw, 4rem); line-height: 1.08; margin: 0;
}
.villa-gallery-desc {
font-family: var(--font-sans); font-weight: 300; font-size: clamp(.9rem, 1.05vw, 1rem);
line-height: 1.6; color: rgba(20, 20, 20, .7); margin: .9rem 0 0;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.villa-gallery-tiles { display: contents; }
.villa-gallery-tile[data-slot="tall"] { grid-area: tall; }
.villa-gallery-tile[data-slot="img1"] { grid-area: img1; }
.villa-gallery-tile[data-slot="bottom"] { grid-area: bottom; }
.villa-gallery-tile[data-slot="small1"] { grid-area: small1; }
.villa-gallery-tile[data-slot="small2"] { grid-area: small2; }
.villa-gallery-tile[data-slot="small3"] { grid-area: small3; }
.villa-gallery-tile {
position: relative; overflow: hidden; display: block; width: 100%; height: 100%;
border: 0; padding: 0; background: var(--sage-tint); cursor: pointer; font: inherit;
border-radius: var(--radius); min-height: 0;
}
.villa-gallery-tile img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform .6s var(--ease-out);
}
.villa-gallery-tile:hover img, .villa-gallery-tile:focus-visible img { transform: scale(1.045); }
.villa-gallery-tile-scrim {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(20, 26, 19, .62) 0%, rgba(20, 26, 19, .08) 42%, rgba(20, 26, 19, 0) 62%);
transition: background-color .3s ease;
}
.villa-gallery-tile:hover .villa-gallery-tile-scrim,
.villa-gallery-tile:focus-visible .villa-gallery-tile-scrim { background: rgba(20, 26, 19, .48); }
.villa-gallery-tile-label {
position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 1;
display: flex; align-items: center; justify-content: space-between; gap: .6rem;
color: var(--cream);
}
.villa-gallery-tile-name {
font-family: var(--font-sans); font-weight: 500; font-size: clamp(.85rem, 1.05vw, 1rem);
letter-spacing: .01em;
}
.villa-gallery-tile-view {
opacity: 0; transform: translateY(4px); pointer-events: none;
background: var(--cream); color: var(--green); border-radius: 2px;
padding: .6rem 1.1rem; font-size: .66rem; font-weight: 600;
letter-spacing: var(--track-caps); text-transform: uppercase; white-space: nowrap;
box-shadow: var(--shadow-lift);
transition: opacity .25s ease, transform .25s ease;
}
.villa-gallery-tile:hover .villa-gallery-tile-view,
.villa-gallery-tile:focus-visible .villa-gallery-tile-view { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 860px) {
.villa-gallery-tile-view { display: none; }
}
/* Always-visible hint on the "Rooms" tile — unlike the other tiles, this one
hides a bedroom picker rather than opening straight into the lightbox, and
that isn't obvious from a photo alone (and hover never reaches touch). */
.villa-gallery-tile-badge {
position: absolute; top: 1rem; right: 1rem; z-index: 1;
background: var(--cream); color: var(--green-deep);
padding: .5rem .9rem; border-radius: 999px; font-size: .68rem; font-weight: 600;
letter-spacing: var(--track-caps); text-transform: uppercase; white-space: nowrap;
box-shadow: var(--shadow-lift);
}
@media (max-width: 520px) {
.villa-gallery-tile-badge { font-size: .62rem; padding: .45rem .75rem; right: .75rem; top: .75rem; }
}
@media (max-width: 720px) {
.villa-gallery, .villa-gallery--5 {
display: flex; flex-direction: column; aspect-ratio: auto; height: auto;
}
.villa-gallery-text { order: -1; padding-bottom: .5rem; }
.villa-gallery-tile { aspect-ratio: 4 / 3; height: auto; }
}
.specs-bar {
display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem);
padding: 1.8rem 0; margin-top: clamp(1rem, 2.5vw, 1.8rem);
}
.spec {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .5rem; text-align: center; width: 9rem; padding: 1rem; position: relative;
}
.spec + .spec::before {
content: ""; position: absolute; left: calc(clamp(1.5rem, 4vw, 3.5rem) / -2); top: 15%; bottom: 15%;
width: 1px; background: rgba(78, 93, 75, .28);
}
.spec .spec-text { display: flex; flex-direction: column; align-items: center; }
.spec .spec-icon { display: block; width: 2.3rem; height: 2.3rem; margin-bottom: .55rem; color: var(--gold); opacity: .9; }
.spec .spec-icon svg { width: 100%; height: 100%; display: block; }
.spec .spec-num { font-family: var(--font-sans); font-size: 1.7rem; line-height: 1; color: var(--sage); }
.spec .spec-label { font-size: .68rem; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--stone-text); margin-top: .35rem; }
.spec.spec--wide .spec-num { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.2; }
.detail-layout {
padding-block: 0 clamp(2rem, 4vw, 3rem);
}
.detail-layout + .sa-section {
padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.sa-section {
padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.sa-section + .sa-modal + .property-map-section {
padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
/* Residence description: italic copy + CTA */
.residence-split-copy {
max-width: 760px; margin-inline: auto; text-align: center;
}
.residence-split-copy p {
font-family: var(--font-sans); font-weight: 400;
font-size: clamp(.95rem, 1.6vw, 1.15rem); line-height: 1.6; color: var(--ink);
margin: 0 0 1.3rem;
}
.residence-split-copy strong { font-weight: 600; color: var(--ink); }
/* Villa intro: specs row on top, description on the left / availability calendar on the right below */
.detail-layout > .specs-bar {
justify-content: center; flex-wrap: nowrap; gap: clamp(2rem, 5vw, 4.5rem);
margin-top: 0; padding-top: 0; padding-bottom: .5rem; margin-bottom: 0;
}
@media (max-width: 900px) {
.detail-layout > .specs-bar { flex-wrap: wrap; }
.detail-layout > .specs-bar .spec::before { content: none; }
}
/* Villa intro: description centered across the page, booking form below. */
.detail-intro-grid { display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); }
.detail-intro-copy { width: 100%; }
.detail-intro-grid .residence-split-copy { text-align: center; margin-inline: auto; max-width: 900px; }
.detail-intro-grid .residence-split-copy p:last-child { margin-bottom: 0; }
.detail-trip-panel { width: 100%; max-width: 960px; box-shadow: var(--shadow-card); scroll-margin-top: 110px; }
/* ---------- Price box: price + check-in/check-out date pickers + guests
stepper, styled as pill controls (see reference mock). Self-contained —
its date popovers reuse the .trip-calendar look from the contact page. */
.villa-price-box {
height: 100%; border-radius: var(--radius); background: var(--cream); box-shadow: var(--shadow-card);
padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; justify-content: center;
}
.villa-price-amount-row { text-align: center; margin-bottom: 1.5rem; }
.villa-price-from { font-family: var(--font-sans); font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--stone-text); margin-right: .35rem; }
.villa-price-amount { font-family: var(--font-sans); font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 700; color: var(--ink); }
.villa-price-unit { font-family: var(--font-sans); font-size: .88rem; color: var(--stone-text); margin-left: .3rem; }
.villa-price-dates { display: flex; gap: .7rem; margin-bottom: .8rem; }
.villa-price-date-field { position: relative; flex: 1; min-width: 0; }
.villa-price-date-trigger {
width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: .5rem;
border: 1px solid rgba(20, 20, 20, .16); border-radius: 999px; background: transparent;
padding: .8rem .9rem; font-family: var(--font-sans); font-size: .85rem; color: var(--stone-text); cursor: pointer;
transition: border-color .2s ease, color .2s ease;
}
.villa-price-date-trigger svg { width: 16px; height: 16px; flex: none; color: var(--stone-text); }
.villa-price-date-trigger:hover, .villa-price-date-trigger[aria-expanded="true"] { border-color: var(--sage); }
.villa-price-date-field.has-value .villa-price-date-trigger { color: var(--ink); font-weight: 600; }
.villa-price-date-field.has-value .villa-price-date-trigger svg { color: var(--sage); }
.villa-price-date-field .trip-calendar { left: 0; }
.villa-price-date-field:last-child .trip-calendar { left: auto; right: 0; }
.villa-price-guests {
display: flex; align-items: center; gap: .5rem;
border: 1px solid rgba(20, 20, 20, .16); border-radius: 999px;
padding: .7rem .7rem .7rem 1.1rem;
}
.villa-price-guests svg { width: 18px; height: 18px; flex: none; color: var(--stone-text); }
.villa-price-guests-label { flex: 1; font-family: var(--font-sans); font-size: .85rem; color: var(--ink); }
.villa-price-guests-controls { display: flex; align-items: center; gap: .4rem; }
.villa-price-guests-btn {
width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(20, 20, 20, .18);
background: transparent; color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer;
display: grid; place-items: center; transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.villa-price-guests-btn:hover:not(:disabled) { background: var(--sage); border-color: var(--sage); color: var(--cream); }
.villa-price-guests-btn:disabled { opacity: .35; cursor: not-allowed; }
.villa-price-notes { margin-top: .8rem; text-align: left; }
.villa-price-notes-label { display: block; font-family: var(--font-sans); font-size: .78rem; font-weight: 500; color: var(--stone-text); margin-bottom: .4rem; }
.villa-price-notes-textarea {
width: 100%; resize: vertical; min-height: 4rem;
font: inherit; font-family: var(--font-sans); font-size: .85rem; line-height: 1.5; color: var(--ink);
background: transparent; border: 1px solid rgba(20, 20, 20, .16); border-radius: 14px;
padding: .7rem .9rem; transition: border-color .2s ease;
}
.villa-price-notes-textarea::placeholder { color: rgba(20,20,20,.4); }
.villa-price-notes-textarea:hover { border-color: rgba(20, 20, 20, .3); }
.villa-price-notes-textarea:focus-visible { outline: none; border-color: var(--sage); }
.villa-price-note { font-size: .74rem; line-height: 1.5; color: var(--stone-text); text-align: center; margin: 1rem 0 0; }
/* ---------- Villa booking: price breakdown + Book now under the guests
stepper, and its phone/tablet bottom bar — see the price-box block in
main.js. */
.villa-book { margin-top: 1.1rem; }
.villa-book-breakdown { margin: 0 0 1rem; font-family: var(--font-sans); font-size: .85rem; }
.villa-book-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .4rem .2rem; }
.villa-book-row dt { color: var(--stone-text); }
.villa-book-row dd { margin: 0; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.villa-book-row .is-pending { font-size: .76rem; color: var(--stone-text); }
.villa-book-row--total { margin-top: .35rem; padding-top: .8rem; border-top: 1px solid rgba(20, 20, 20, .12); }
.villa-book-row--total dt, .villa-book-row--total dd { color: var(--ink); font-weight: 600; }
.villa-book-row--aside { font-size: .78rem; }
.villa-book-row--aside dd { color: var(--stone-text); }
.villa-book-status { margin: 0; padding: .4rem .2rem; font-size: .8rem; line-height: 1.5; color: var(--stone-text); }
.villa-book-error { margin: 0 0 .9rem; padding-inline: .2rem; font-size: .8rem; line-height: 1.5; color: var(--error); }
.villa-book-cta { width: 100%; min-height: 48px; }
.villa-book-cta:active, .book-bar-cta:active { transform: translateY(0) scale(.98); }
.book-bar { display: none; }
@media (max-width: 900px) {
.book-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .75rem var(--pad-x) max(.75rem, env(safe-area-inset-bottom));
background: var(--cream); border-top: 1px solid rgba(20, 20, 20, .08);
box-shadow: 0 -1px 2px rgba(30, 38, 28, .04), 0 -10px 30px rgba(30, 38, 28, .1);
transform: translateY(110%); transition: transform .35s var(--ease-out);
}
.book-bar-visible .book-bar { transform: none; }
.book-bar-summary { display: flex; flex-direction: column; min-width: 0; }
.book-bar-amount { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.book-bar-meta { font-size: .74rem; color: var(--stone-text); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-bar-cta { flex: none; min-height: 48px; padding-inline: 1.6rem; }
/* Room under the footer for the bar, and the floating contact button
rides up with it instead of sitting on top of it. */
body.has-book-bar { padding-bottom: var(--book-bar-h, 0px); }
.has-book-bar .quick-actions { transition: transform .35s var(--ease-out); }
.book-bar-visible .quick-actions { transform: translateY(calc(-1 * var(--book-bar-h, 0px))); }
}
/* Tiered-by-occupancy indicator: three ascending bars showing the guest
band the current stepper value falls into. Bounds are computed in
main.js from villa.guests — no invented figures, just the real cap
split into three bands. */
/* Villa FAQ showcase: question list on the left, answer card on the right —
same interaction language as the gallery showcase above (hover/focus a
question to preview it), but the "preview" is text instead of a photo. */
.villa-faq-showcase {
display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: clamp(2rem, 5vw, 3.5rem);
align-items: stretch; margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.villa-faq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(1rem, 2.5vw, 1.4rem); }
.villa-faq-item {
display: flex; align-items: center; gap: 1rem; width: 100%;
background: none; border: 0; padding: .2rem 0; text-align: left; cursor: pointer;
font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--stone-text);
transition: color .3s ease;
}
.villa-faq-item-line {
width: 3rem; height: 1px; background: currentColor; flex: none;
transform: scaleX(0); transform-origin: left; opacity: 0;
transition: transform .45s var(--ease-out), opacity .3s ease;
}
.villa-faq-item.is-active, .villa-faq-item:hover, .villa-faq-item:focus-visible { color: var(--ink); }
.villa-faq-item.is-active .villa-faq-item-line,
.villa-faq-item:hover .villa-faq-item-line,
.villa-faq-item:focus-visible .villa-faq-item-line { transform: scaleX(1); opacity: 1; }
.villa-faq-card {
background: var(--sage-tint); border-radius: var(--radius); box-shadow: var(--shadow-card);
padding: clamp(2rem, 4vw, 3rem); display: flex; align-items: center;
min-height: clamp(220px, 26vw, 300px);
}
.villa-faq-card-answer {
font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 300; line-height: 1.75;
color: var(--ink); transition: opacity .25s ease;
}
@media (max-width: 720px) {
.villa-faq-showcase { grid-template-columns: 1fr; }
.villa-faq-card { min-height: 0; }
}
/* Extra villa FAQs beyond the featured 5 — a popup opened by the
"More questions about " button, same modal language as the
lightbox/room-picker above (fixed overlay, centered panel). */
.villa-faq-modal {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
padding: clamp(1.25rem, 4vw, 3rem);
}
.villa-faq-modal[hidden] { display: none; }
.villa-faq-modal-backdrop {
position: absolute; inset: 0; z-index: 0; border: 0; padding: 0; margin: 0; cursor: pointer;
background: rgba(20, 26, 19, .55);
}
.villa-faq-modal-panel {
position: relative; z-index: 1; width: 100%; max-width: 680px;
background: var(--cream); border-radius: var(--radius); box-shadow: var(--shadow-lift);
padding: clamp(2rem, 4vw, 2.75rem);
max-height: 82vh; display: flex; flex-direction: column;
}
.villa-faq-modal-title {
font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--ink);
margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); padding-right: 2.5rem; flex: none;
}
.villa-faq-modal-close {
position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2;
width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0;
background: var(--sage-tint); color: var(--ink); font-size: 1.4rem; line-height: 1;
display: grid; place-items: center; cursor: pointer;
transition: background-color .2s ease;
}
.villa-faq-modal-close:hover { background: var(--gold); }
.villa-faq-modal-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.villa-faq-extra-list {
list-style: none; margin: 0; padding: 0 .75rem 0 0; overflow-y: auto; flex: 1; min-height: 0;
display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 1.75rem);
scrollbar-width: thin; scrollbar-color: rgba(20, 26, 19, .25) transparent;
}
/* Thin floating thumb, no track and no up/down arrow buttons — the
native scrollbar's "rail + arrows" look is what we're avoiding. */
.villa-faq-extra-list::-webkit-scrollbar { width: 6px; }
.villa-faq-extra-list::-webkit-scrollbar-track { background: transparent; }
.villa-faq-extra-list::-webkit-scrollbar-thumb { background: rgba(20, 26, 19, .25); border-radius: 999px; }
.villa-faq-extra-list::-webkit-scrollbar-thumb:hover { background: rgba(20, 26, 19, .4); }
.villa-faq-extra-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.villa-faq-extra-item + .villa-faq-extra-item { border-top: 1px solid rgba(20, 26, 19, .1); padding-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.villa-faq-extra-q { font-family: var(--font-display); font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--ink); margin: 0 0 .5rem; }
.villa-faq-extra-a { font-size: .95rem; font-weight: 300; line-height: 1.7; color: var(--stone-text); margin: 0; }
@media (max-width: 640px) {
.villa-faq-modal-panel { max-height: 88vh; }
}
/* ---------- Lightbox (villa gallery viewer) ---------- */
.lightbox {
position: fixed; inset: 0; z-index: 200;
background: rgba(20, 26, 19, .94);
display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-stage { max-width: min(88vw, 1100px); max-height: 82vh; }
.lightbox-stage img {
max-width: 100%; max-height: 82vh; width: auto; height: auto;
display: block; margin-inline: auto; border-radius: var(--radius);
box-shadow: var(--shadow-lift);
}
.lightbox-close {
position: absolute; top: 1.5rem; right: 1.5rem;
width: 44px; height: 44px; border-radius: 50%; border: 0;
background: rgba(246, 244, 239, .12); color: var(--cream);
font-size: 1.5rem; line-height: 1; display: grid; place-items: center;
transition: background-color .2s ease;
}
.lightbox-close:hover { background: rgba(246, 244, 239, .25); }
.lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 52px; height: 52px; border-radius: 50%; border: 0;
background: rgba(246, 244, 239, .12); color: var(--cream);
font-size: 1.2rem; display: grid; place-items: center;
transition: background-color .2s ease, transform var(--dur) var(--ease-out);
}
.lightbox-nav:hover { background: rgba(246, 244, 239, .25); }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-counter {
position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
color: var(--cream-60); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 640px) {
.lightbox-nav { width: 44px; height: 44px; }
.lightbox-prev { left: .6rem; }
.lightbox-next { right: .6rem; }
}
/* ---------- Room picker: bedroom chooser opened by the "Rooms" gallery tile.
A full-screen cream takeover (not a floating dialog over the page) so the
busy gallery grid behind it disappears entirely — each bedroom is its own
photo card, styled like the .villa-gallery-tile cards above. ---------- */
.room-picker {
position: fixed; inset: 0; z-index: 200;
background: var(--cream);
overflow-y: auto;
padding: clamp(4.5rem, 9vw, 6rem) clamp(1.25rem, 5vw, 3rem) clamp(2.5rem, 6vw, 4rem);
}
.room-picker[hidden] { display: none; }
.room-picker-inner { width: 100%; max-width: 1320px; margin-inline: auto; }
.room-picker-close {
position: fixed; top: 1.5rem; right: 1.5rem; z-index: 2;
width: 2.75rem; height: 2.75rem; border-radius: 50%;
background: var(--sage-tint); color: var(--ink); border: 0; cursor: pointer;
display: grid; place-items: center;
transition: background-color .2s ease;
}
.room-picker-close:hover { background: var(--gold); }
.room-picker-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.room-picker-close svg { width: 18px; height: 18px; display: block; }
.room-picker-title {
font-family: var(--font-display); font-style: italic; color: var(--ink); text-align: center;
font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 clamp(1.8rem, 4vw, 2.8rem);
}
/* Two-per-row grid (2 + 2 + ...) so every bedroom is visible at once —
no arrows or sideways scrolling needed to find the rest. Capped width
keeps the two cards a comfortable size instead of stretching across
the whole screen; an odd last card sits centred under the pair. */
.room-picker-list {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 2.5vw, 1.75rem);
max-width: 860px; margin-inline: auto; padding-block: .25rem;
}
.room-picker-list > .room-picker-item:last-child:nth-child(odd) {
grid-column: 1 / -1; justify-self: center;
width: calc(50% - clamp(1rem, 2.5vw, 1.75rem) / 2);
}
.room-picker-item {
display: flex; flex-direction: column; text-align: left;
border: 0; padding: 0; background: var(--cream); cursor: pointer; font: inherit;
border-radius: var(--radius); box-shadow: 0 2px 10px rgba(20, 26, 19, .1); overflow: hidden;
}
.room-picker-item-media {
position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: block;
}
.room-picker-item-media img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform .6s var(--ease-out);
}
.room-picker-item:hover .room-picker-item-media img,
.room-picker-item:focus-visible .room-picker-item-media img { transform: scale(1.045); }
.room-picker-item-body { padding: 1rem 1.25rem 1.2rem; }
.room-picker-item-label {
font-family: var(--font-display); color: var(--ink); font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}
.room-picker-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Property location map: a live Google Maps embed pinned to the villa's
coordinates. Sits on the same cream background as the section above it
(Explore the villa); kept narrower than the page and rounded so it reads
as a framed element rather than a full-bleed map. */
.property-map {
position: relative; width: 100%; max-width: 1100px;
margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}
.property-map-frame {
position: relative; width: 100%; aspect-ratio: 21 / 9;
border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card);
}
.property-map-embed { display: block; width: 100%; height: 100%; border: 0; background: var(--sage-tint); position: relative; isolation: isolate; }
.property-map-embed .leaflet-container { width: 100%; height: 100%; font-family: var(--font-sans); background: var(--sage-tint); }
.property-map-embed .leaflet-control-attribution { font-size: .68rem; }
@media (max-width: 640px) { .property-map-frame { aspect-ratio: 4 / 3; } }
/* ---------- Services & Amenities: three tappable cards (Included / Extra
cost / Amenities), each a layered photo composition — a small detail
shot floating over the top-left corner, a category badge floating
top-right, a caption chip overlapping the photo, and an arrow button
straddling the bottom edge — echoing a reference layout the client
shared, reapplied to three peer cards instead of one hero image. Every
floating piece sits inside the single