/* Cormorant Garamond and Georgia both default to oldstyle (text) figures,
which makes prices and the 303 wordmark ride unevenly on the baseline.
Lining figures are correct for a house number and for money. */
html { font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
/* ============================================
DESIGN TOKENS — change once, theme everything
============================================ */
:root {
/* Palette: ivory, terracotta, brass, charcoal */
--ivory: #F4EFE6;
--ivory-soft: #EDE6D8;
--bone: #E8DFD0;
--charcoal: #141210;
--charcoal-2: #1F1B17;
--ink: #1A1815;
--muted: #524C42; /* WCAG AA (was #6A6357 — failed 4.5:1 on ivory/bone) */
--muted-light: #9A917F; /* light taupe: only used on DARK surfaces (savings header) — 5.99:1 on charcoal */
--brass: #785F33; /* AA bronze: 4.56–5.26:1 as text on ivory/bone AND as btn-gold bg w/ ivory text */
--gold: #C9A961;
--terracotta: #B5613A;
--terracotta-d: #8C4326;
--line: rgba(26,24,21,.12);
--line-light: rgba(232,223,208,.18);
/* Typography */
--font-display: 'Cormorant Garamond', 'Times New Roman', serif;
--font-decor: 'Italiana', 'Cormorant Garamond', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-ar: 'Cairo', 'Inter', sans-serif;
/* Cairo has no Hebrew glyphs — Hebrew needs its own face. Frank Ruhl Libre
is a Hebrew serif that sits naturally beside Cormorant Garamond. */
--font-he: 'Frank Ruhl Libre', 'Cairo', Georgia, serif;
/* Spacing scale (8pt base) */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
--s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
--s-9: 6rem; --s-10: 8rem; --s-11: 12rem;
/* Layout */
--max-w: 1440px;
--gutter: clamp(1.25rem, 4vw, 3rem);
--radius: 2px;
--radius-soft: 12px;
/* Motion */
--ease-out: cubic-bezier(.22,1,.36,1);
--ease-soft: cubic-bezier(.4,0,.2,1);
--t-fast: .25s;
--t-mid: .55s;
--t-slow: .9s;
/* Shadows */
--shadow-soft: 0 8px 30px -10px rgba(0,0,0,.12);
--shadow-deep: 0 30px 60px -20px rgba(0,0,0,.28);
}
/* RTL flip for Arabic */
html[dir="rtl"] body { font-family: var(--font-ar); }
/* ============================================
RESET
============================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--ink);
background: var(--ivory);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
/* WCAG 2.1 — links in body copy MUST be distinguishable by more than colour alone */
p a:not(.btn), li a:not(.btn), .form-note a, .footer-tag a {
text-decoration: underline;
text-underline-offset: .25em;
text-decoration-thickness: 1px;
}
p a:not(.btn):hover, li a:not(.btn):hover { text-decoration-thickness: 2px; }
/* Focus ring for keyboard users (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
border-radius: 2px;
}
ul, ol { padding: 0; margin: 0; list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--charcoal); }
/* ============================================
TYPOGRAPHY
============================================ */
.display-xl, .display-l, .display-m, .display-s {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -.01em;
line-height: 1.05;
margin: 0;
}
.display-xl { font-size: clamp(3rem, 9.5vw, 9rem); letter-spacing: -.02em; }
.display-l { font-size: clamp(2.5rem, 6.5vw, 5.5rem); }
.display-m { font-size: clamp(2rem, 4.5vw, 3.75rem); line-height: 1.1; }
.display-s { font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.2; }
.eyebrow {
font-family: var(--font-body);
font-size: .72rem;
font-weight: 500;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--brass);
display: inline-flex;
align-items: center;
gap: .75rem;
margin: 0;
}
.eyebrow::before {
content: '';
width: 36px; height: 1px;
background: var(--brass);
display: inline-block;
}
.eyebrow.no-rule::before { display: none; }
.lede {
font-family: var(--font-display);
font-size: clamp(1.25rem, 1.8vw, 1.65rem);
font-style: italic;
font-weight: 300;
line-height: 1.5;
color: var(--muted);
}
.small-caps {
font-size: .68rem;
letter-spacing: .28em;
text-transform: uppercase;
font-weight: 500;
}
em.gold { color: var(--brass); font-style: italic; }
/* ============================================
LAYOUT PRIMITIVES
============================================ */
.container {
width: 100%;
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container-narrow {
max-width: 880px;
margin-inline: auto;
padding-inline: var(--gutter);
}
section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.section-tight { padding-block: clamp(3rem, 6vw, 5rem); }
/* ============================================
BUTTONS
============================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .75rem;
padding: 1.05rem 2.1rem;
font-size: .75rem;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 500;
border: 1px solid transparent;
transition: all var(--t-fast) var(--ease-soft);
cursor: pointer;
border-radius: var(--radius);
white-space: nowrap;
}
.btn-primary {
background: var(--charcoal);
color: var(--ivory);
}
.btn-primary:hover {
background: var(--brass);
color: var(--ivory);
transform: translateY(-1px);
}
.btn-gold {
background: var(--brass);
color: var(--ivory);
}
.btn-gold:hover {
background: var(--gold);
color: var(--charcoal);
transform: translateY(-1px);
}
.btn-ghost {
background: transparent;
color: var(--ivory);
border-color: var(--ivory);
}
.btn-ghost:hover {
background: var(--ivory);
color: var(--charcoal);
}
.btn-ghost-dark {
background: transparent;
color: var(--charcoal);
border-color: var(--charcoal);
}
.btn-ghost-dark:hover {
background: var(--charcoal);
color: var(--ivory);
}
.btn-wa {
background: #075E54;
color: #fff;
border-color: #075E54;
}
.btn-wa:hover { background: #0a7d6f; }
/* ============================================
NAV
============================================ */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 80;
padding: 1.4rem var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
transition: background var(--t-mid) var(--ease-soft),
backdrop-filter var(--t-mid) var(--ease-soft),
padding var(--t-mid) var(--ease-soft),
border-color var(--t-mid) var(--ease-soft);
border-bottom: 1px solid transparent;
}
.nav.scrolled {
background: rgba(20,18,16,.78);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
padding-block: .9rem;
border-color: rgba(232,223,208,.08);
}
.nav-brand {
font-family: var(--font-decor);
letter-spacing: .26em;
font-size: .92rem;
color: var(--ivory);
display: flex;
align-items: center;
gap: .65rem;
}
.nav-brand-mark {
width: 26px; height: 26px;
display: inline-grid; place-items: center;
border: 1px solid var(--gold);
color: var(--gold);
font-family: var(--font-display);
font-size: .85rem;
font-style: italic;
}
.nav-links {
display: flex; gap: 2.2rem;
font-size: .72rem; letter-spacing: .26em;
text-transform: uppercase;
color: var(--ivory);
}
/* nowrap: several languages use two-word nav labels (fr "La Villa",
es "La Villa"), which wrapped to two lines and collided with the
wordmark. A nav item should never break across lines. */
.nav-links a { position: relative; padding-block: .25rem; white-space: nowrap; transition: color var(--t-fast); }
.nav-links a::after {
content: '';
position: absolute;
left: 0; bottom: -2px;
width: 0; height: 1px;
background: var(--gold);
transition: width var(--t-mid) var(--ease-out);
}
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { width: 100%; }
.nav-right {
display: flex; align-items: center; gap: 1.25rem;
}
.lang-switch {
display: flex; gap: .35rem;
font-size: .68rem;
letter-spacing: .2em;
color: var(--ivory);
}
.lang-switch button {
padding: .25rem .35rem;
color: var(--muted-light);
transition: color var(--t-fast);
}
.lang-switch button.active { color: var(--gold); border-bottom: 1px solid var(--gold); }
.lang-switch button:hover { color: var(--ivory); }
.nav-cta {
padding: .7rem 1.3rem;
font-size: .68rem;
}
.nav-burger {
display: none;
width: 28px; height: 18px;
flex-direction: column; justify-content: space-between;
}
.nav-burger span {
display: block;
height: 1px; width: 100%;
background: var(--ivory);
transition: transform var(--t-fast), opacity var(--t-fast);
}
/* The full nav only collapses to the burger at 940px, so between 940px and
desktop it has to fit the longest label set. English fits easily; French
("LA VILLA / ÉQUIPEMENTS / SITUATION") and German overflow into the
wordmark and the language pill. Tighten tracking and gap progressively
rather than shrinking the type, which would break the brand rhythm. */
@media (max-width: 1440px) {
.nav-links { gap: 1.5rem; letter-spacing: .18em; }
}
@media (max-width: 1180px) {
.nav-links { gap: 1rem; letter-spacing: .1em; font-size: .68rem; }
.nav { padding-inline: 1.5rem; }
}
@media (max-width: 940px) {
.nav-links { display: none; }
.nav-burger { display: flex; }
}
/* Mobile menu */
.mobile-menu {
position: fixed;
inset: 0;
background: var(--charcoal);
z-index: 90;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 2rem;
transform: translateY(-100%);
transition: transform var(--t-mid) var(--ease-out);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a {
font-family: var(--font-display);
font-size: 2.25rem;
color: var(--ivory);
letter-spacing: .04em;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu-close {
position: absolute; top: 1.5rem; right: 1.5rem;
width: 36px; height: 36px; color: var(--ivory);
}
/* ============================================
HERO
============================================ */
.hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: grid;
grid-template-rows: 1fr auto;
overflow: hidden;
color: var(--ivory);
isolation: isolate;
}
.hero-slides {
position: absolute; inset: 0;
z-index: -2;
}
.hero-slide {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.6s var(--ease-soft);
transform: scale(1.04);
}
.hero-slide.active {
opacity: 1;
animation: kenBurns 14s linear forwards;
}
/* Static first hero slide painted from CSS at parse time (no JS wait) for fast mobile LCP.
Width media query forces the lightweight 720px image on phones regardless of device pixel ratio. */
#heroSlide0 {
background-size: cover;
background-position: center;
background-image: url('/images/v7533-720.webp');
}
@media (min-width: 768px) {
#heroSlide0 { background-image: url('/images/v7533.webp'); }
}
@keyframes kenBurns {
from { transform: scale(1.04); }
to { transform: scale(1.14); }
}
.hero::before {
content:'';
position: absolute; inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 20%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.78) 100%),
radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
}
.hero-title { text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.hero-sub { text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.hero-eyebrow { text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.hero-meta { text-shadow: 0 1px 8px rgba(0,0,0,.65); }
.hero-booking { background: rgba(244,239,230,.99); }
.hero-content {
align-self: center;
text-align: center;
padding: 8rem var(--gutter) 4rem;
max-width: 1100px;
margin: 0 auto;
}
.hero-eyebrow {
color: var(--bone);
margin-bottom: 1.6rem;
justify-content: center;
}
.hero-eyebrow::before, .hero-eyebrow::after {
content: '';
width: 28px; height: 1px;
background: var(--bone);
opacity: .6;
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(3rem, 10vw, 9.5rem);
font-weight: 300;
line-height: .95;
letter-spacing: -.015em;
margin: 0 0 1.2rem;
}
.hero-title em { font-style: italic; color: var(--gold); font-weight: 300; }
.hero-sub {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(1.05rem, 1.6vw, 1.4rem);
color: var(--bone);
max-width: 620px;
margin: 0 auto 2.5rem;
line-height: 1.55;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2.5rem;
font-size: .7rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--bone);
margin-bottom: 2.75rem;
}
.hero-meta span { display: inline-flex; align-items: center; gap: .55rem; }
.hero-meta .dot { width: 4px; height: 4px; background: var(--gold); border-radius: 50%; }
.hero-cta-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.hero-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--gutter) 2rem;
font-size: .7rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--bone);
opacity: .8;
}
.hero-scroll {
display: inline-flex;
align-items: center;
gap: .65rem;
}
.hero-scroll-line {
display: inline-block;
width: 50px;
height: 1px;
background: var(--bone);
position: relative;
overflow: hidden;
}
.hero-scroll-line::after {
content: '';
position: absolute; inset: 0;
background: var(--gold);
transform: translateX(-100%);
animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
0% { transform: translateX(-100%); }
50% { transform: translateX(0); }
100% { transform: translateX(100%); }
}
.hero-slide-dots {
display: flex; gap: .65rem;
}
.hero-slide-dots button {
width: 22px; height: 1px;
background: rgba(232,223,208,.4);
transition: background var(--t-fast);
}
.hero-slide-dots button.active { background: var(--gold); height: 1.5px; }
@media (max-width: 700px) {
.hero-meta { gap: 1.25rem; font-size: .62rem; }
.hero-bottom { flex-direction: column; gap: 1rem; }
}
/* ============================================
STICKY BOOKING BAR
============================================ */
.booking-bar {
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--charcoal);
color: var(--ivory);
padding: 1rem var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
z-index: 70;
transform: translateY(100%);
transition: transform var(--t-mid) var(--ease-out);
border-top: 1px solid var(--line-light);
}
.booking-bar.visible { transform: translateY(0); }
.booking-bar-left {
display: flex; align-items: baseline; gap: 1.5rem;
flex-wrap: wrap;
}
.booking-bar-name {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 400;
}
.booking-bar-price {
display: flex; align-items: baseline; gap: .35rem;
color: var(--bone);
font-size: .82rem;
letter-spacing: .04em;
}
.booking-bar-price strong {
color: var(--gold);
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 500;
letter-spacing: 0;
}
.booking-bar-actions { display: flex; gap: .75rem; }
.booking-bar .btn { padding: .8rem 1.5rem; font-size: .68rem; }
@media (max-width: 700px) {
.booking-bar { flex-direction: column; padding: .9rem 1rem; gap: .8rem; }
.booking-bar-left { gap: .75rem; }
.booking-bar-name { font-size: 1.1rem; }
.booking-bar-actions { width: 100%; }
.booking-bar-actions .btn { flex: 1; }
}
/* ============================================
INTRO / STORY
============================================ */
.intro {
background: var(--ivory);
text-align: center;
}
.intro-bar {
width: 1px; height: 70px;
background: var(--brass);
margin: 0 auto 2rem;
}
.intro-quote {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(1.4rem, 2.6vw, 2.1rem);
line-height: 1.45;
color: var(--ink);
max-width: 820px;
margin: 0 auto 2rem;
}
.intro-attrib {
font-size: .72rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--muted);
}
/* Story grid */
.story {
background: var(--ivory-soft);
}
.story-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
.story-text .eyebrow { margin-bottom: 1.75rem; }
.story-text h2 { margin-bottom: 1.5rem; }
.story-text p {
color: var(--muted);
font-size: 1.05rem;
line-height: 1.75;
margin: 0 0 1.25rem;
}
.story-text p strong {
color: var(--ink);
font-weight: 500;
}
.story-image {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--radius);
}
.story-image img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 2s var(--ease-out);
}
.story-image:hover img { transform: scale(1.05); }
.story-image::after {
content: '';
position: absolute;
top: 1.25rem; right: 1.25rem; bottom: 1.25rem; left: 1.25rem;
border: 1px solid rgba(244,239,230,.4);
pointer-events: none;
}
@media (max-width: 820px) {
.story-grid { grid-template-columns: 1fr; }
}
/* ============================================
ESSENCE / VALUES BAND
============================================ */
.essence {
background: var(--charcoal);
color: var(--ivory);
}
.essence-header { text-align: center; margin-bottom: 4rem; }
.essence-header .eyebrow { color: var(--gold); justify-content: center; }
.essence-header .eyebrow::before { background: var(--gold); }
.essence-header h2 { color: var(--ivory); margin: 1.25rem 0 0; }
.essence-header p {
color: var(--bone);
margin-top: 1.25rem;
opacity: .75;
max-width: 620px;
margin-inline: auto;
}
.essence-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1px;
background: rgba(232,223,208,.1);
border: 1px solid rgba(232,223,208,.1);
}
.essence-cell {
background: var(--charcoal);
padding: 3rem 2rem;
text-align: center;
transition: background var(--t-mid);
}
.essence-cell:hover { background: var(--charcoal-2); }
.essence-icon {
width: 44px; height: 44px;
margin: 0 auto 1.5rem;
color: var(--gold);
}
.essence-cell h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.5rem;
margin: 0 0 .75rem;
}
.essence-cell p {
color: var(--bone);
font-size: .92rem;
line-height: 1.65;
opacity: .8;
margin: 0;
}
/* ============================================
SPECIFICATIONS strip
============================================ */
.specs {
background: var(--ivory);
padding-block: clamp(3rem, 5vw, 4.5rem);
}
.specs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 2rem;
text-align: center;
}
.spec {
display: flex; flex-direction: column;
align-items: center; gap: .65rem;
}
.spec-num {
font-family: var(--font-display);
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 400;
color: var(--ink);
line-height: 1;
}
.spec-num em { color: var(--brass); font-style: normal; }
.spec-label {
font-size: .68rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--muted);
}
.spec + .spec { border-left: 1px solid var(--line); padding-left: 2rem; }
@media (max-width: 700px) {
.spec + .spec { border-left: none; padding-left: 0; }
}
/* ============================================
GALLERY
============================================ */
.gallery { background: var(--ivory); padding-bottom: clamp(3rem, 6vw, 5rem); }
.gallery-header {
display: flex; align-items: end; justify-content: space-between;
gap: 2rem; margin-bottom: 3rem;
flex-wrap: wrap;
}
.gallery-header-left .eyebrow { margin-bottom: 1rem; }
.gallery-header-left h2 { max-width: 600px; }
.gallery-count {
font-size: .75rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.gallery-item {
position: relative;
overflow: hidden;
cursor: zoom-in;
background: var(--bone);
border-radius: var(--radius);
}
.gallery-item img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease-out), filter var(--t-mid);
}
.gallery-item::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(20,18,16,.4) 100%);
opacity: 0;
transition: opacity var(--t-mid);
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item-label {
position: absolute;
bottom: 1.2rem; left: 1.2rem;
color: var(--ivory);
font-size: .68rem;
letter-spacing: .28em;
text-transform: uppercase;
opacity: 0;
transform: translateY(8px);
transition: all var(--t-mid) var(--ease-out);
z-index: 1;
}
.gallery-item:hover .gallery-item-label { opacity: 1; transform: translateY(0); }
.gallery-count-badge { display: inline-block; margin-left: .5rem; font-size: .7rem; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.5); border-radius: 20px; padding: .04rem .5rem; vertical-align: middle; }
/* Editorial layout */
.gallery-item:nth-child(1) { grid-column: span 7; aspect-ratio: 16 / 11; }
.gallery-item:nth-child(2) { grid-column: span 5; aspect-ratio: 4 / 5; }
.gallery-item:nth-child(3) { grid-column: span 5; aspect-ratio: 4 / 5; }
.gallery-item:nth-child(4) { grid-column: span 7; aspect-ratio: 16 / 11; }
.gallery-item:nth-child(5) { grid-column: span 4; aspect-ratio: 1; }
.gallery-item:nth-child(6) { grid-column: span 4; aspect-ratio: 1; }
.gallery-item:nth-child(7) { grid-column: span 4; aspect-ratio: 1; }
.gallery-item:nth-child(n+8) { grid-column: span 6; aspect-ratio: 3 / 2; }
@media (max-width: 820px) {
.gallery-grid { gap: .5rem; }
.gallery-item { grid-column: span 12 !important; aspect-ratio: 4 / 3 !important; }
}
.gallery-more {
text-align: center;
margin-top: 3rem;
}
/* Lightbox */
.lightbox {
position: fixed; inset: 0;
background: rgba(15,13,11,.97);
z-index: 100;
display: none;
align-items: center; justify-content: center;
padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox-img-wrap {
position: relative;
max-width: min(1400px, 95vw);
max-height: 88vh;
width: 100%;
}
.lightbox-img {
width: 100%; max-height: 88vh; object-fit: contain;
animation: fadeIn .35s var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox-close {
position: absolute;
top: 1.25rem; right: 1.25rem;
color: var(--ivory);
font-size: 1.6rem;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,.06);
transition: background var(--t-fast);
z-index: 2;
}
.lightbox-close:hover { background: rgba(255,255,255,.16); }
.lightbox-nav {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 52px; height: 52px;
color: var(--ivory);
background: rgba(20,18,15,.55);
border-radius: 50%;
display: grid; place-items: center;
transition: background var(--t-fast);
font-size: 1.4rem;
z-index: 5; /* must sit ABOVE the image, or taps/clicks hit the photo */
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.lightbox-nav:hover { background: rgba(255,255,255,.16); }
.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }
@media (max-width: 600px) {
.lightbox-nav { width: 60px; height: 60px; font-size: 1.7rem; background: rgba(20,18,15,.7); }
.lightbox-prev { left: .4rem; }
.lightbox-next { right: .4rem; }
.lightbox-close { z-index: 6; background: rgba(20,18,15,.7); }
}
.lightbox-counter {
position: absolute;
bottom: 1rem; left: 50%; transform: translateX(-50%);
color: var(--bone);
font-size: .75rem;
letter-spacing: .26em;
text-transform: uppercase;
}
/* ============================================
SPACES (room cards)
============================================ */
.spaces { background: var(--ivory-soft); }
.spaces-header { text-align: center; margin-bottom: 4rem; }
.spaces-header h2 { margin: 1rem 0 1rem; }
.spaces-header p { color: var(--muted); max-width: 600px; margin: 0 auto; }
.spaces-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.space {
background: var(--ivory);
border-radius: var(--radius);
overflow: hidden;
transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.space:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-deep);
}
.space-img {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bone);
}
.space-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease-out);
}
.space:hover .space-img img { transform: scale(1.06); }
.space-body { padding: 1.75rem 1.5rem 1.85rem; }
.space-body h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.4rem;
margin: 0 0 .5rem;
}
.space-body p { color: var(--muted); font-size: .95rem; margin: 0 0 1rem; }
.space-meta {
display: flex; gap: 1.25rem;
font-size: .7rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--brass);
}
/* ============================================
AMENITIES
============================================ */
.amenities { background: var(--charcoal); color: var(--ivory); }
.amenities-header { text-align: center; margin-bottom: 4rem; }
.amenities-header h2 { color: var(--ivory); margin: 1rem 0; }
.amenities-header .eyebrow { color: var(--gold); justify-content: center; }
.amenities-header .eyebrow::before { background: var(--gold); }
.amenities-header p { color: var(--bone); opacity: .75; max-width: 600px; margin: 0 auto; }
.amenities-cats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2.5rem 3rem;
}
.amenity-cat h3 {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 400;
color: var(--gold);
margin: 0 0 1.25rem;
padding-bottom: .75rem;
border-bottom: 1px solid rgba(201,169,97,.3);
letter-spacing: .02em;
}
.amenity-cat ul li {
padding: .55rem 0;
color: var(--bone);
font-size: .95rem;
display: flex;
align-items: center;
gap: .75rem;
opacity: .9;
}
.amenity-cat ul li::before {
content: '';
width: 4px; height: 4px;
background: var(--brass);
border-radius: 50%;
flex-shrink: 0;
}
/* ============================================
LOCATION
============================================ */
.location { background: var(--ivory); }
.location-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: stretch;
}
.location-text { padding-block: 1rem; display: flex; flex-direction: column; justify-content: center; }
.location-text h2 { margin: 1rem 0 1.25rem; }
.location-text > p { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-bottom: 2rem; }
.nearby {
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem;
margin-top: 1rem;
}
.nearby-item {
display: flex; gap: 1rem;
padding-block: .85rem;
border-bottom: 1px solid var(--line);
}
.nearby-time {
font-family: var(--font-display);
font-size: 1.3rem;
color: var(--brass);
min-width: 60px;
line-height: 1;
}
.nearby-place {
font-size: .92rem;
color: var(--ink);
}
.nearby-place small {
display: block;
font-size: .72rem;
color: var(--muted);
letter-spacing: .14em;
text-transform: uppercase;
margin-top: .2rem;
}
.location-map {
min-height: 460px;
background: var(--bone);
border-radius: var(--radius);
overflow: hidden;
position: relative;
}
.location-map iframe { width: 100%; height: 100%; min-height: 460px; border: 0; }
.location-map-placeholder {
position: absolute; inset: 0;
display: grid; place-items: center;
color: var(--muted);
font-size: .85rem;
text-align: center;
padding: 2rem;
}
@media (max-width: 900px) {
.location-grid { grid-template-columns: 1fr; }
.nearby { grid-template-columns: 1fr; }
}
/* ============================================
EXPERIENCES
============================================ */
.experiences { background: var(--ivory-soft); }
.experiences-header { text-align: center; margin-bottom: 4rem; }
.experiences-header h2 { margin: 1rem 0; }
.experiences-header p { color: var(--muted); max-width: 600px; margin: 0 auto; }
.exp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.exp {
background: var(--ivory);
padding: 2.25rem 1.75rem;
border-radius: var(--radius);
text-align: left;
transition: transform var(--t-mid);
border: 1px solid var(--line);
}
.exp:hover { transform: translateY(-4px); border-color: var(--brass); }
.exp-icon {
width: 32px; height: 32px;
color: var(--brass);
margin-bottom: 1.5rem;
}
.exp h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.4rem;
margin: 0 0 .65rem;
}
.exp p { color: var(--muted); font-size: .95rem; margin: 0; line-height: 1.65; }
/* ============================================
RATES
============================================ */
.rates { background: var(--ivory); }
.rates-header { text-align: center; margin-bottom: 3.5rem; }
.rates-header h2 { margin: 1rem 0; }
.rates-header p { color: var(--muted); max-width: 600px; margin: 0 auto; }
.rates-table {
max-width: 920px;
margin: 0 auto;
border-top: 1px solid var(--line);
}
.rate-row {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
align-items: center;
gap: 1rem;
padding: 1.75rem 0;
border-bottom: 1px solid var(--line);
}
.rate-row.head {
font-size: .68rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--muted);
padding-block: 1rem;
}
.rate-season {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--ink);
}
.rate-season small {
display: block;
font-family: var(--font-body);
font-size: .75rem;
color: var(--muted);
letter-spacing: .15em;
text-transform: uppercase;
margin-top: .35rem;
}
.rate-min {
color: var(--muted);
font-size: .95rem;
}
.rate-price {
text-align: right;
font-family: var(--font-display);
font-size: 1.55rem;
color: var(--brass);
}
.rate-price small {
font-family: var(--font-body);
font-size: .72rem;
color: var(--muted);
letter-spacing: .15em;
text-transform: uppercase;
margin-left: .25rem;
}
.rates-note {
max-width: 920px;
margin: 2rem auto 0;
font-size: .85rem;
color: var(--muted);
text-align: center;
line-height: 1.7;
}
.rates-note strong { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) {
.rate-row { grid-template-columns: 1fr; gap: .35rem; padding: 1.4rem 0; text-align: left; }
.rate-row.head { display: none; }
.rate-price { text-align: left; }
}
/* ============================================
REVIEWS
============================================ */
.reviews {
background: var(--charcoal);
color: var(--ivory);
text-align: center;
}
.reviews-header .eyebrow { justify-content: center; color: var(--gold); }
.reviews-header .eyebrow::before { background: var(--gold); }
.reviews-header h2 { color: var(--ivory); margin: 1rem 0 4rem; }
.reviews-carousel {
position: relative;
max-width: 880px;
margin: 0 auto;
min-height: 320px;
}
.review {
opacity: 0;
position: absolute;
inset: 0;
transition: opacity var(--t-mid);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding-inline: var(--gutter);
}
.review.active { opacity: 1; position: relative; }
.review-quote {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(1.25rem, 2.6vw, 1.95rem);
line-height: 1.55;
color: var(--ivory);
margin: 0 0 2rem;
position: relative;
}
.review-quote::before {
content: '“';
position: absolute;
top: -2.5rem; left: 50%; transform: translateX(-50%);
font-size: 5rem;
color: var(--gold);
opacity: .35;
line-height: 1;
}
.review-stars { color: var(--gold); margin-bottom: 1.25rem; font-size: .9rem; letter-spacing: .25em; }
.review-author {
font-size: .72rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--bone);
}
.review-author strong { color: var(--gold); font-weight: 500; }
.review-dots {
display: flex; justify-content: center; gap: .85rem;
margin-top: 3rem;
}
.review-dots button {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(232,223,208,.25);
transition: background var(--t-fast);
}
.review-dots button.active { background: var(--gold); }
/* ============================================
CONTACT / INQUIRY
============================================ */
.contact { background: var(--ivory); }
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: clamp(2.5rem, 6vw, 5rem);
}
.contact-info h2 { margin: 1rem 0 1.5rem; }
.contact-info > p { color: var(--muted); line-height: 1.75; margin-bottom: 2.5rem; max-width: 460px; }
.contact-list { margin-bottom: 2rem; }
.contact-item {
display: flex; gap: 1rem; align-items: flex-start;
padding: 1rem 0;
border-top: 1px solid var(--line);
}
.contact-item:last-of-type { border-bottom: 1px solid var(--line); }
.contact-item-label {
font-size: .68rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--muted);
min-width: 110px;
padding-top: .35rem;
}
.contact-item-value {
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--ink);
}
.contact-item-value a:hover { color: var(--brass); }
.contact-form {
background: var(--ivory-soft);
padding: clamp(2rem, 4vw, 3rem);
border-radius: var(--radius);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.form-group { display: flex; flex-direction: column; }
.form-group.full { grid-column: 1 / -1; }
.form-group label {
font-size: .68rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: .45rem;
}
.form-group input,
.form-group textarea,
.form-group select {
background: transparent;
border: none;
border-bottom: 1px solid var(--line);
padding: .75rem 0;
font-size: .98rem;
color: var(--ink);
transition: border-color var(--t-fast);
border-radius: 0;
}
.form-group input:focus:not(:focus-visible),
.form-group textarea:focus:not(:focus-visible),
.form-group select:focus:not(:focus-visible) {
outline: none;
border-bottom-color: var(--brass);
}
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
outline: 2px solid var(--gold); outline-offset: 2px;
border-bottom-color: var(--brass);
}
.form-group textarea { min-height: 110px; resize: vertical; }
.form-actions {
margin-top: 1.5rem;
display: flex; gap: 1rem; flex-wrap: wrap;
}
.form-note {
font-size: .78rem;
color: var(--muted);
margin-top: 1.25rem;
letter-spacing: .04em;
}
.form-note strong { color: var(--brass); font-weight: 500; }
.form-reassure {
font-size: .76rem;
color: var(--muted);
margin-top: .6rem;
letter-spacing: .03em;
line-height: 1.5;
opacity: .92;
}
/* Inline form validation — professional, on-page (no browser alert popups) */
.field-error {
display: block;
color: #B23B2E;
font-size: .72rem;
font-weight: 500;
letter-spacing: .02em;
margin-top: .4rem;
line-height: 1.4;
}
.input-error,
.form-group input.input-error,
.form-group select.input-error,
.form-group textarea.input-error,
.hero-booking-field input.input-error,
.hero-booking-field select.input-error {
border-color: #B23B2E !important;
box-shadow: 0 1px 0 0 #B23B2E;
}
@media (max-width: 700px) {
.form-grid { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
}
/* ============================================
FAQ
============================================ */
.faq { background: var(--ivory-soft); }
.faq-header { text-align: center; margin-bottom: 3rem; }
.faq-header h2 { margin: 1rem 0; }
.faq-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item {
border-bottom: 1px solid var(--line);
}
.faq-q {
width: 100%;
padding: 1.5rem 0;
display: flex; justify-content: space-between; align-items: center;
text-align: left;
font-family: var(--font-display);
font-size: 1.3rem;
color: var(--ink);
transition: color var(--t-fast);
}
.faq-q:hover { color: var(--brass); }
.faq-q-icon {
width: 18px; height: 18px;
position: relative; flex-shrink: 0;
margin-left: 1rem;
}
.faq-q-icon::before, .faq-q-icon::after {
content: ''; position: absolute;
background: var(--brass);
transition: transform var(--t-fast);
}
.faq-q-icon::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
.faq-q-icon::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; }
.faq-item.open .faq-q-icon::after { transform: rotate(90deg); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height var(--t-mid) var(--ease-soft);
}
.faq-a-inner {
padding-bottom: 1.5rem;
color: var(--muted);
line-height: 1.75;
}
.faq-item.open .faq-a { max-height: 400px; }
/* ============================================
FOOTER
============================================ */
.footer {
background: var(--charcoal);
color: var(--bone);
padding: 5rem var(--gutter) 2rem;
}
.footer-grid {
max-width: var(--max-w);
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(232,223,208,.12);
}
.footer-brand {
font-family: var(--font-decor);
font-size: 1.4rem;
color: var(--ivory);
letter-spacing: .14em;
margin-bottom: 1.25rem;
}
.footer-tagline {
max-width: 320px;
font-size: .9rem;
line-height: 1.7;
opacity: .75;
margin-bottom: 1.5rem;
}
.footer-socials {
display: flex; gap: .85rem;
}
.footer-socials a {
width: 38px; height: 38px;
border: 1px solid rgba(232,223,208,.18);
border-radius: 50%;
display: grid; place-items: center;
transition: all var(--t-fast);
}
.footer-socials a:hover {
border-color: var(--brass);
color: var(--brass);
transform: translateY(-2px);
}
.footer-col h4 {
font-size: .68rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 1.5rem;
font-weight: 500;
}
.footer-col a {
display: block;
padding: .35rem 0;
font-size: .9rem;
color: var(--bone);
opacity: .75;
transition: opacity var(--t-fast), color var(--t-fast);
}
.footer-col a:hover { opacity: 1; color: var(--gold); }
.footer-bottom {
max-width: var(--max-w);
margin: 0 auto;
padding-top: 2rem;
display: flex; justify-content: space-between;
flex-wrap: wrap; gap: 1rem;
font-size: .8rem;
opacity: .65;
}
@media (max-width: 800px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* ============================================
FLOATING ACTIONS
============================================ */
.float-actions {
position: fixed;
right: 1.25rem;
/* --bar-h is set by initScroll() when the sticky booking bar shows/hides.
Without this the bar paints straight over the WhatsApp button on phones. */
bottom: calc(var(--bar-h, 0px) + 1rem + env(safe-area-inset-bottom, 0px));
display: flex; flex-direction: column; gap: .65rem;
z-index: 71;
transition: bottom .3s var(--ease-out);
}
.float-btn {
width: 52px; height: 52px;
border-radius: 50%;
background: var(--charcoal);
color: var(--ivory);
display: grid; place-items: center;
box-shadow: var(--shadow-deep);
transition: transform var(--t-fast), background var(--t-fast);
position: relative;
}
.float-btn:hover { transform: scale(1.08); }
.float-btn.wa { background: #25D366; }
.float-btn.wa:hover { background: #1ebe5a; }
.float-btn::before {
content: attr(data-label);
position: absolute;
right: calc(100% + .75rem);
top: 50%; transform: translateY(-50%);
background: var(--charcoal);
color: var(--ivory);
padding: .4rem .75rem;
font-size: .7rem;
letter-spacing: .2em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast);
border-radius: 2px;
}
.float-btn:hover::before { opacity: 1; }
/* ============================================
SCROLL REVEAL
============================================ */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
/* ============================================
ADMIN PANEL — appears only with ?edit=1 or hotkey
============================================ */
[contenteditable="true"] {
outline: 2px dashed transparent;
transition: outline-color var(--t-fast), background var(--t-fast);
cursor: text;
}
body.edit-mode [data-field] {
outline: 1px dashed rgba(201,169,97,.45);
outline-offset: 4px;
cursor: text;
position: relative;
}
body.edit-mode [data-field]:hover {
outline-color: var(--gold);
background: rgba(201,169,97,.06);
}
body.edit-mode [data-field]:focus {
outline: 2px solid var(--gold);
background: rgba(201,169,97,.08);
}
body.edit-mode [data-image] {
cursor: pointer;
position: relative;
}
body.edit-mode [data-image]::after {
content: '✎ EDIT IMAGE';
position: absolute;
top: .5rem; right: .5rem;
background: var(--charcoal);
color: var(--gold);
padding: .4rem .75rem;
font-size: .65rem;
letter-spacing: .2em;
z-index: 5;
opacity: 0;
transition: opacity var(--t-fast);
border-radius: 2px;
}
body.edit-mode [data-image]:hover::after { opacity: 1; }
.edit-banner {
position: fixed;
top: 0; left: 0; right: 0;
background: var(--gold);
color: var(--charcoal);
padding: .65rem var(--gutter);
display: none;
align-items: center; justify-content: space-between;
z-index: 95;
font-size: .78rem;
letter-spacing: .14em;
box-shadow: 0 4px 24px -8px rgba(0,0,0,.3);
}
body.edit-mode .edit-banner { display: flex; }
body.edit-mode { padding-top: 48px; }
body.edit-mode .nav { top: 48px; }
.edit-banner-left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.edit-banner-left strong { letter-spacing: .26em; text-transform: uppercase; }
.edit-banner-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.edit-banner .ebtn {
background: var(--charcoal);
color: var(--gold);
padding: .5rem .9rem;
font-size: .68rem;
letter-spacing: .22em;
text-transform: uppercase;
border-radius: 2px;
transition: background var(--t-fast);
}
.edit-banner .ebtn:hover { background: var(--ink); }
.edit-banner .ebtn.danger { background: var(--terracotta-d); color: var(--ivory); }
.edit-banner .ebtn.danger:hover { background: var(--terracotta); }
/* Admin overlay panel */
.admin-panel {
position: fixed;
top: 0; right: -460px;
width: 440px; max-width: 100%;
height: 100vh;
background: var(--ivory);
box-shadow: -20px 0 60px -20px rgba(0,0,0,.25);
z-index: 100;
/* Hidden from the accessibility tree while closed (off-canvas). Visibility flips to hidden
only AFTER the slide-out finishes, so the close animation is preserved. */
visibility: hidden;
transition: right var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid);
overflow-y: auto;
padding-bottom: 4rem;
}
.admin-panel.open { right: 0; visibility: visible; transition: right var(--t-mid) var(--ease-out), visibility 0s linear 0s; }
.admin-panel-head {
position: sticky; top: 0;
background: var(--charcoal); color: var(--ivory);
padding: 1.25rem 1.5rem;
display: flex; justify-content: space-between; align-items: center;
z-index: 2;
}
.admin-panel-head h3 {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: 1.25rem;
letter-spacing: .04em;
}
.admin-close {
color: var(--ivory);
font-size: 1.4rem;
width: 32px; height: 32px;
display: grid; place-items: center;
}
.admin-section {
padding: 1.5rem;
border-bottom: 1px solid var(--line);
}
.admin-section h4 {
font-size: .68rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--brass);
margin: 0 0 1rem;
}
.admin-field { margin-bottom: 1rem; }
.admin-field label {
display: block;
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: .3rem;
}
.admin-field input,
.admin-field textarea {
width: 100%;
background: var(--ivory-soft);
border: 1px solid var(--line);
padding: .65rem .8rem;
font-size: .9rem;
border-radius: 2px;
font-family: var(--font-body);
color: var(--ink);
}
.admin-field textarea { min-height: 80px; resize: vertical; }
.admin-field input:focus, .admin-field textarea:focus {
outline: none; border-color: var(--brass);
}
.admin-actions {
padding: 1.5rem;
display: flex; gap: .5rem; flex-wrap: wrap;
}
.admin-btn {
flex: 1;
padding: .8rem 1rem;
background: var(--charcoal);
color: var(--ivory);
font-size: .68rem;
letter-spacing: .22em;
text-transform: uppercase;
border-radius: 2px;
transition: background var(--t-fast);
min-width: 130px;
}
.admin-btn:hover { background: var(--brass); color: var(--charcoal); }
.admin-btn.outline {
background: transparent;
border: 1px solid var(--charcoal);
color: var(--charcoal);
}
.admin-btn.outline:hover { background: var(--charcoal); color: var(--ivory); }
/* Image uploader inside admin */
.img-uploader {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
margin-top: .75rem;
}
.img-uploader-item {
position: relative;
aspect-ratio: 1;
background: var(--bone);
border-radius: 2px;
overflow: hidden;
cursor: pointer;
}
.img-uploader-item img { width: 100%; height: 100%; object-fit: cover; }
.img-uploader-item button {
position: absolute; top: 4px; right: 4px;
width: 22px; height: 22px;
background: rgba(0,0,0,.7);
color: var(--ivory);
border-radius: 50%;
display: grid; place-items: center;
font-size: .9rem;
}
.img-uploader-add {
aspect-ratio: 1;
border: 1px dashed var(--line);
display: grid; place-items: center;
cursor: pointer;
color: var(--muted);
font-size: 1.6rem;
transition: all var(--t-fast);
}
.img-uploader-add:hover {
border-color: var(--brass);
color: var(--brass);
background: rgba(201,169,97,.05);
}
/* Login overlay */
.admin-login {
position: fixed; inset: 0;
background: rgba(20,18,16,.92);
backdrop-filter: blur(8px);
z-index: 110;
display: none;
align-items: center; justify-content: center;
}
.admin-login.open { display: flex; }
.admin-login-card {
background: var(--ivory);
padding: 2.5rem 2.25rem;
max-width: 380px; width: 90%;
text-align: center;
border-radius: 2px;
}
.admin-login-card h3 {
font-family: var(--font-display);
font-size: 1.6rem; margin: 0 0 .5rem; font-weight: 400;
}
.admin-login-card p {
color: var(--muted); margin: 0 0 1.5rem; font-size: .9rem;
}
.admin-login-card input {
width: 100%;
padding: .85rem 1rem;
border: 1px solid var(--line);
background: var(--ivory-soft);
font-size: 1rem;
text-align: center;
letter-spacing: .2em;
margin-bottom: 1rem;
border-radius: 2px;
}
.admin-login-card input:focus { outline: none; border-color: var(--brass); }
.admin-login-card .err {
color: var(--terracotta-d);
font-size: .8rem;
min-height: 1.2em;
margin-bottom: .75rem;
}
/* ============================================
UTILITIES
============================================ */
.text-center { text-align: center; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
/* RTL nudges */
html[dir="rtl"] .eyebrow::before { order: 1; }
html[dir="rtl"] .booking-bar-left,
html[dir="rtl"] .footer-grid { direction: rtl; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* =========================================================
V4 CONVERSION-FOCUSED ADDITIONS
========================================================= */
/* Trust strip (top bar) */
.trust-strip {
position: fixed;
top: 0; left: 0; right: 0;
background: var(--charcoal);
color: var(--bone);
padding: .55rem var(--gutter);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
z-index: 81;
border-bottom: 1px solid rgba(232,223,208,.08);
flex-wrap: wrap;
}
.trust-strip-item {
display: inline-flex;
align-items: center;
gap: .5rem;
opacity: .9;
}
.trust-strip-item .stars { color: var(--gold); letter-spacing: .05em; }
.trust-strip-item strong { color: var(--gold); font-weight: 500; }
.trust-strip-divider {
width: 4px; height: 4px;
background: var(--brass);
border-radius: 50%;
opacity: .6;
}
/* The strip is one line in English but wraps to two or three in the longer
languages (French runs 87px at 1280px), so a hard-coded 34px let the fixed
nav sit on top of it. --strip-h is republished from JS on load, resize and
language change; 34px stays as the no-JS fallback. */
body { padding-top: var(--strip-h, 34px); }
.nav { top: var(--strip-h, 34px); }
body.edit-mode { padding-top: 82px; }
body.edit-mode .trust-strip { top: 48px; }
body.edit-mode .nav { top: 82px; }
@media (max-width: 720px) {
.trust-strip { font-size: .62rem; gap: .85rem; padding: .5rem .75rem; }
.trust-strip-item:nth-child(n+4), .trust-strip-divider:nth-child(n+4) { display: none; }
}
/* Hero booking widget (inline reservation panel) */
.hero-booking {
max-width: 720px;
margin: 2.5rem auto 0;
background: rgba(244,239,230,.96);
backdrop-filter: blur(8px);
color: var(--ink);
padding: 1.1rem;
border-radius: 4px;
display: grid;
grid-template-columns: 1fr 1fr .8fr auto;
gap: .5rem;
box-shadow: 0 30px 60px -20px rgba(0,0,0,.4);
align-items: stretch;
}
.hero-booking-field {
display: flex; flex-direction: column;
padding: .35rem .65rem;
text-align: left;
}
.hero-booking-field label {
font-size: .62rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: .15rem;
}
.hero-booking-field input, .hero-booking-field select {
background: transparent;
border: none;
padding: .15rem 0;
font-size: .9rem;
color: var(--ink);
font-family: var(--font-body);
}
.hero-booking-field input:focus, .hero-booking-field select:focus { outline: none; box-shadow: 0 0 0 2px var(--gold); border-radius: 2px; }
.hero-booking-field + .hero-booking-field { border-left: 1px solid rgba(26,24,21,.1); }
.hero-booking .btn {
padding: 1rem 1.5rem;
font-size: .7rem;
white-space: nowrap;
}
@media (max-width: 760px) {
.hero-booking { grid-template-columns: 1fr 1fr; padding: .75rem; gap: .25rem; }
.hero-booking-field + .hero-booking-field { border-left: 0; border-top: 1px solid rgba(26,24,21,.1); }
.hero-booking .btn { grid-column: 1 / -1; width: 100%; }
}
/* Stats / trust band */
.trust-band {
background: var(--ivory-soft);
padding-block: clamp(2.5rem, 5vw, 4rem);
border-block: 1px solid var(--line);
}
.trust-band-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 1.5rem 3rem;
text-align: center;
max-width: 1100px;
margin: 0 auto;
}
.trust-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: .35rem;
}
.trust-stat-num {
font-family: var(--font-display);
font-size: clamp(2.25rem, 3.5vw, 3rem);
color: var(--brass);
font-weight: 400;
line-height: 1;
}
.trust-stat-num .stars { color: var(--brass); font-size: 70%; letter-spacing: .02em; }
.trust-stat-label {
font-size: .7rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--muted);
}
.trust-stat-sub {
font-size: .8rem;
color: var(--muted);
}
/* Owner intro card */
.owner {
background: var(--ivory);
}
.owner-card {
max-width: 980px;
margin: 0 auto;
display: grid;
grid-template-columns: 280px 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.owner-photo {
aspect-ratio: 4/5;
background: var(--bone);
border-radius: var(--radius);
overflow: hidden;
position: relative;
}
.owner-photo img { width: 100%; height: 100%; object-fit: cover; }
.owner-photo-placeholder {
position: absolute; inset: 0;
display: grid; place-items: center;
color: var(--brass);
font-family: var(--font-display);
font-size: 4rem;
background: linear-gradient(135deg, var(--bone), var(--ivory-soft));
}
.owner-content .eyebrow { margin-bottom: 1rem; }
.owner-content h2 {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.8vw, 2.25rem);
font-weight: 400;
line-height: 1.2;
margin: 0 0 1.25rem;
}
.owner-content p {
color: var(--muted);
line-height: 1.75;
margin: 0 0 1.25rem;
font-size: 1.02rem;
}
.owner-sig {
font-family: var(--font-display);
font-style: italic;
font-size: 1.4rem;
color: var(--brass);
margin-top: 1.5rem;
}
.owner-meta {
font-size: .68rem;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--muted);
margin-top: .35rem;
}
@media (max-width: 720px) {
.owner-card { grid-template-columns: 1fr; text-align: center; }
.owner-photo { max-width: 220px; margin: 0 auto; }
}
/* COMPARISON / SAVINGS TABLE (the key conversion driver) */
.savings {
background: var(--charcoal);
color: var(--ivory);
}
.savings-header { text-align: center; margin-bottom: 3.5rem; }
.savings-header .eyebrow { justify-content: center; color: var(--gold); }
.savings-header .eyebrow::before { background: var(--gold); }
.savings-header h2 { color: var(--ivory); margin: 1rem 0 1rem; }
.savings-header p { color: var(--bone); opacity: .75; max-width: 620px; margin: 0 auto; }
.savings-table {
max-width: 920px;
margin: 0 auto;
background: var(--charcoal-2);
border: 1px solid rgba(232,223,208,.12);
border-radius: 4px;
overflow: hidden;
}
.savings-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
align-items: center;
padding: 1.1rem 1.5rem;
gap: 1rem;
border-bottom: 1px solid rgba(232,223,208,.08);
}
.savings-row:last-child { border-bottom: none; }
.savings-row.head {
background: var(--charcoal);
font-size: .68rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--muted-light);
font-weight: 500;
padding-block: 1.1rem;
}
.savings-row.head .col-direct { color: var(--gold); position: relative; }
.savings-row.head .col-direct::after {
content: '✓';
display: inline-block;
margin-left: .35rem;
color: var(--gold);
}
.savings-row .col-label {
color: var(--bone);
font-size: .9rem;
}
.savings-row .col-direct,
.savings-row .col-other {
text-align: center;
font-family: var(--font-display);
font-size: 1.15rem;
}
.savings-row .col-direct {
color: var(--gold);
font-weight: 500;
}
.savings-row .col-other {
color: var(--bone);
opacity: .65;
}
.savings-row.total {
background: var(--charcoal);
padding-block: 1.5rem;
}
.savings-row.total .col-label { color: var(--ivory); font-weight: 500; font-size: 1.05rem; }
.savings-row.total .col-direct { font-size: 1.6rem; }
.savings-row.total .col-other { font-size: 1.3rem; text-decoration: line-through; }
.savings-row.saved {
background: linear-gradient(90deg, transparent, rgba(201,169,97,.06), transparent);
padding-block: 1.5rem;
}
.savings-row.saved .col-label {
color: var(--gold);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 500;
}
.savings-row.saved .col-direct { color: var(--ivory); }
.savings-row.saved .col-other { color: var(--gold); opacity: 1; font-weight: 500; }
.savings-footnote {
text-align: center;
margin-top: 2rem;
color: var(--bone);
opacity: .65;
font-size: .82rem;
max-width: 600px;
margin-inline: auto;
}
.savings-cta {
text-align: center;
margin-top: 2.5rem;
}
@media (max-width: 720px) {
.savings-row { grid-template-columns: 1.4fr repeat(3, 1fr); padding: 1rem .75rem; font-size: .85rem; }
.savings-row .col-direct, .savings-row .col-other { font-size: .95rem; }
.savings-row.total .col-direct { font-size: 1.2rem; }
}
/* Reviews — average rating block */
.reviews-avg {
text-align: center;
margin-bottom: 3.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: .35rem;
}
.reviews-avg-stars {
color: var(--gold);
font-size: 1.6rem;
letter-spacing: .14em;
}
.reviews-avg-num {
font-family: var(--font-display);
font-size: 3.5rem;
color: var(--ivory);
font-weight: 400;
line-height: 1;
}
.reviews-avg-sub {
color: var(--bone);
font-size: .85rem;
letter-spacing: .14em;
opacity: .8;
}
/* Final urgency CTA */
.final-cta {
background: var(--ivory-soft);
padding-block: clamp(4rem, 8vw, 7rem);
text-align: center;
position: relative;
overflow: hidden;
}
.final-cta::before {
content: '';
position: absolute;
inset: 0;
background-image: url('/images/v7533.webp');
background-size: cover;
background-position: center;
opacity: .12;
z-index: 0;
}
.final-cta > * { position: relative; z-index: 1; }
.final-cta .eyebrow { justify-content: center; margin-bottom: 1.5rem; }
.final-cta h2 {
font-family: var(--font-display);
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 400;
line-height: 1.05;
margin: 0 0 1.25rem;
max-width: 920px;
margin-inline: auto;
}
.final-cta h2 em { color: var(--brass); font-style: italic; }
.final-cta p {
color: var(--muted);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto 2.5rem;
}
.final-cta-row {
display: inline-flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.final-cta-note {
margin-top: 2rem;
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--brass);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
}
.final-cta-note .dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: #25D366;
flex-shrink: 0;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(.7); }
}
/* ============================================================
INQUIRIES PANEL — mobile-first inbox
============================================================ */
.inbox-overlay {
position: fixed;
inset: 0;
background: var(--ivory);
z-index: 120;
display: none;
flex-direction: column;
overflow: hidden;
}
.inbox-overlay.open { display: flex; }
.inbox-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: 1rem 1.25rem;
background: var(--charcoal);
color: var(--ivory);
flex-shrink: 0;
border-bottom: 1px solid var(--line-light);
}
.inbox-head h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: 1.25rem;
letter-spacing: .04em;
margin: 0;
}
.inbox-head-actions {
display: flex;
gap: .5rem;
align-items: center;
}
.inbox-counter {
font-size: .68rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold);
margin-left: .65rem;
background: rgba(201,169,97,.12);
padding: .25rem .6rem;
border-radius: 999px;
}
.inbox-close {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(232,223,208,.12);
color: var(--ivory);
display: grid; place-items: center;
flex-shrink: 0;
}
.inbox-close:hover { background: rgba(232,223,208,.2); }
.inbox-filters {
display: flex;
gap: .35rem;
padding: .75rem 1rem;
overflow-x: auto;
background: var(--ivory-soft);
border-bottom: 1px solid var(--line);
flex-shrink: 0;
-webkit-overflow-scrolling: touch;
}
.inbox-filter {
padding: .45rem .85rem;
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
transition: all var(--t-fast);
}
.inbox-filter.active {
background: var(--charcoal);
color: var(--ivory);
border-color: var(--charcoal);
}
.inbox-filter .count { opacity: .7; margin-left: .35rem; }
/* ============================================================
LANGUAGE DROPDOWN — compact, flag-driven, mobile-friendly
============================================================ */
.lang-drop {
position: relative;
display: inline-block;
}
.lang-current {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .55rem .85rem;
background: rgba(232,223,208,.08);
border: 1px solid rgba(232,223,208,.15);
color: var(--ivory);
border-radius: 999px;
font-size: .72rem;
letter-spacing: .14em;
font-weight: 500;
cursor: pointer;
transition: all var(--t-fast);
}
.lang-current:hover {
background: rgba(232,223,208,.16);
border-color: var(--gold);
color: var(--gold);
}
.lang-current svg { opacity: .85; }
.lang-chev {
transition: transform var(--t-fast);
}
.lang-drop.open .lang-chev { transform: rotate(180deg); }
.lang-current-code { letter-spacing: .2em; }
.lang-menu {
position: absolute;
top: calc(100% + .55rem);
right: 0;
background: var(--ivory);
color: var(--ink);
border-radius: 6px;
box-shadow: var(--shadow-deep), 0 0 0 1px rgba(0,0,0,.05);
padding: .35rem;
min-width: 200px;
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: max-height var(--t-mid) var(--ease-out), opacity var(--t-fast), transform var(--t-fast);
z-index: 90;
}
.lang-drop.open .lang-menu {
max-height: 500px;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.lang-opt {
display: flex;
align-items: center;
gap: .75rem;
width: 100%;
padding: .65rem .85rem;
background: transparent;
border: none;
color: var(--ink);
font-size: .92rem;
cursor: pointer;
text-align: left;
border-radius: 4px;
transition: background var(--t-fast);
}
.lang-opt:hover { background: var(--ivory-soft); }
.lang-opt.active {
background: var(--charcoal);
color: var(--ivory);
}
.lang-opt.active .lang-label { color: var(--gold); }
.lang-flag { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.lang-label { font-family: var(--font-display); font-size: 1rem; }
/* RTL: align menu to the left edge instead */
html[dir="rtl"] .lang-menu { right: auto; left: 0; }
html[dir="rtl"] .lang-opt { text-align: right; }
/* Mobile: shrink trigger + use fixed-position panel anchored to viewport corner
so the menu can never spill off the left/right edge regardless of where the
trigger sits in the nav. */
@media (max-width: 900px) {
.lang-current {
padding: .45rem .65rem;
gap: .35rem;
font-size: .68rem;
}
.lang-current-code { letter-spacing: .14em; }
.lang-current svg:first-child { display: none; } /* drop the globe to save space */
.lang-menu {
position: fixed;
top: 64px;
right: .75rem;
left: auto;
width: min(260px, calc(100vw - 1.5rem));
min-width: 0;
max-width: none;
}
html[dir="rtl"] .lang-menu {
right: auto;
left: .75rem;
}
.lang-opt { padding: .8rem .85rem; font-size: 1rem; } /* bigger tap targets */
/* Subtle dim of the page when menu is open */
.lang-drop.open::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0,0,0,.18);
z-index: 88;
pointer-events: none;
}
}
/* Force phone numbers to display LTR in any language (fixes +212... showing as 212...+) */
.phone-ltr, [data-field*="waNumber"], [data-field*="footer.wa"], [id="footerWa"], [id="contactWa"] {
direction: ltr !important;
unicode-bidi: embed;
display: inline-block;
}
/* ============================================================
LIVE AVAILABILITY CALENDAR (Airbnb iCal synced)
============================================================ */
.availability { background: var(--ivory-soft); }
.avail-head {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 2rem; margin-bottom: 2.5rem; flex-wrap: wrap;
}
.avail-head .eyebrow { margin-bottom: 1rem; }
.avail-title { margin: 0 0 .75rem; }
.avail-sub { color: var(--muted); max-width: 540px; margin: 0; line-height: 1.65; }
.avail-legend {
display: flex; gap: 1.25rem;
font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted); flex-wrap: wrap; padding-top: 1rem;
}
.legend-dot {
display: inline-block; width: 12px; height: 12px;
border-radius: 2px; margin-right: .4rem; vertical-align: middle;
box-shadow: inset 0 0 0 1px var(--brass);
}
.legend-dot.available { background: var(--ivory); }
.legend-dot.booked { background: #8A7C64; }
.legend-dot.selected { background: var(--charcoal); }
.legend-dot.today-d { background: var(--gold); }
.calendar-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
background: var(--ivory);
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--line);
}
@media (max-width: 720px) {
.calendar-grid { grid-template-columns: 1fr; }
}
.calendar-loading {
grid-column: 1 / -1;
padding: 3rem;
text-align: center;
color: var(--muted);
font-style: italic;
}
.month {
background: var(--ivory);
padding: 1.5rem 1.25rem;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.month:nth-child(even) { border-right: none; }
.month:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 720px) {
.month { border-right: none; }
.month:last-child { border-bottom: none; }
}
.month-head {
text-align: center; margin-bottom: 1rem;
font-family: var(--font-display); font-size: 1.25rem; color: var(--ink);
}
.weekdays {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted); text-align: center; margin-bottom: .6rem;
}
.days {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.day {
aspect-ratio: 1; display: grid; place-items: center;
font-size: .82rem; border-radius: 50%; cursor: pointer;
color: var(--ink); user-select: none;
transition: background .15s, color .15s, transform .12s;
}
.day.outside { color: transparent; pointer-events: none; }
.day.past { color: var(--muted); pointer-events: none; text-decoration: line-through; }
.day.today { font-weight: 600; color: var(--brass); box-shadow: inset 0 0 0 1px var(--gold); }
.day.available:hover { background: rgba(201,169,97,.18); transform: scale(1.08); }
.day.booked {
background: var(--bone); color: var(--muted);
text-decoration: line-through; cursor: not-allowed;
}
.day.in-range { background: rgba(201,169,97,.22); border-radius: 0; }
.day.range-start, .day.range-end {
background: var(--charcoal); color: var(--ivory); font-weight: 500;
}
.day.range-start { border-radius: 50% 0 0 50%; }
.day.range-end { border-radius: 0 50% 50% 0; }
.day.range-start.range-end { border-radius: 50%; }
.avail-status {
display: flex; gap: .55rem; align-items: center;
margin-top: 1.25rem; font-size: .78rem; color: var(--muted);
letter-spacing: .04em;
}
.status-pulse {
width: 8px; height: 8px; border-radius: 50%;
background: #25D366; animation: pulse 2s infinite;
}
.status-pulse.warning { background: var(--terracotta); }
.avail-scarcity {
margin-top: .85rem;
font-size: .82rem;
color: var(--brass);
letter-spacing: .04em;
font-weight: 500;
line-height: 1.45;
}
.quote-panel {
display: none;
margin-top: 2rem;
padding: 1.5rem 2rem;
background: var(--charcoal);
color: var(--ivory);
border-radius: 4px;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: space-between;
}
.quote-panel.open { display: flex; }
.quote-summary { flex: 1 1 200px; }
.quote-dates {
font-family: var(--font-display); font-size: 1.4rem;
margin-bottom: .25rem;
}
.quote-meta {
font-size: .82rem; color: var(--bone); opacity: .8;
letter-spacing: .04em;
}
.quote-price {
font-family: var(--font-display); font-size: 2.25rem;
color: var(--gold); white-space: nowrap;
}
.quote-cta {
background: var(--gold); color: var(--charcoal);
padding: .95rem 1.65rem; border-radius: 2px;
font-size: .72rem; letter-spacing: .22em;
text-transform: uppercase; font-weight: 500;
transition: all .15s;
}
.quote-cta:hover { background: #d4b574; transform: translateY(-1px); }
.quote-cta.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; filter: grayscale(.4); }
@media (max-width: 720px) {
.avail-head { flex-direction: column; align-items: flex-start; }
.avail-legend { padding-top: 0; }
.quote-panel { padding: 1.25rem; flex-direction: column; text-align: center; }
.quote-price { width: 100%; }
.quote-cta { width: 100%; text-align: center; }
}
.inbox-list {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--ivory);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.inbox-empty {
padding: 4rem 2rem;
text-align: center;
color: var(--muted);
}
.inbox-empty-icon {
width: 60px; height: 60px;
margin: 0 auto 1.25rem;
opacity: .3;
}
.inbox-empty h4 {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 400;
margin: 0 0 .5rem;
color: var(--ink);
}
.inbox-empty p { margin: 0; font-size: .9rem; }
.inbox-item {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background var(--t-fast);
position: relative;
}
.inbox-item:hover { background: var(--ivory-soft); }
.inbox-item.unread::before {
content: '';
position: absolute;
left: .35rem; top: 1.4rem;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold);
}
.inbox-item-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .75rem;
margin-bottom: .35rem;
}
.inbox-item-name {
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--ink);
font-weight: 500;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-item-date {
font-size: .72rem;
color: var(--muted);
letter-spacing: .04em;
flex-shrink: 0;
}
.inbox-item-email {
font-size: .82rem;
color: var(--muted);
margin-bottom: .4rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-item-meta {
display: flex;
gap: .8rem;
font-size: .72rem;
color: var(--brass);
letter-spacing: .04em;
margin-bottom: .5rem;
flex-wrap: wrap;
}
.inbox-item-meta span { white-space: nowrap; }
.inbox-item-preview {
font-size: .88rem;
color: var(--muted);
line-height: 1.5;
max-height: 2.7em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.inbox-item-status {
display: inline-block;
font-size: .62rem;
letter-spacing: .2em;
text-transform: uppercase;
padding: .15rem .5rem;
border-radius: 2px;
margin-top: .55rem;
}
.inbox-item-status.new { background: rgba(201,169,97,.15); color: var(--brass); }
.inbox-item-status.replied { background: rgba(37,211,102,.12); color: #1ebe5a; }
.inbox-item-status.archived { background: rgba(106,99,87,.1); color: var(--muted); }
/* Detail view */
.inbox-detail {
position: absolute;
inset: 0;
background: var(--ivory);
z-index: 121;
display: none;
flex-direction: column;
overflow: hidden;
}
.inbox-detail.open { display: flex; }
.inbox-detail-head {
padding: 1rem 1.25rem;
background: var(--charcoal);
color: var(--ivory);
display: flex;
align-items: center;
gap: .75rem;
flex-shrink: 0;
}
.inbox-detail-back {
display: grid; place-items: center;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(232,223,208,.12);
color: var(--ivory);
}
.inbox-detail-name {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 400;
margin: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inbox-detail-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 1.5rem 1.25rem;
}
.inbox-detail-row {
display: flex;
gap: 1rem;
padding: .75rem 0;
border-bottom: 1px solid var(--line);
}
.inbox-detail-row:last-of-type { border-bottom: none; }
.inbox-detail-label {
font-size: .68rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--muted);
flex-shrink: 0;
min-width: 90px;
padding-top: .15rem;
}
.inbox-detail-value {
color: var(--ink);
font-size: .98rem;
word-break: break-word;
flex: 1;
}
.inbox-detail-value a { color: var(--brass); text-decoration: underline; }
.inbox-detail-message {
white-space: pre-wrap;
line-height: 1.65;
padding: 1rem 0;
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--ink);
border-bottom: 1px solid var(--line);
margin-bottom: 1.5rem;
}
.inbox-detail-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .65rem;
padding: 1rem 1.25rem env(safe-area-inset-bottom, 1rem);
background: var(--ivory-soft);
border-top: 1px solid var(--line);
flex-shrink: 0;
}
.inbox-detail-actions .btn {
padding: 1rem;
font-size: .72rem;
letter-spacing: .2em;
width: 100%;
}
.inbox-detail-actions-row2 {
display: flex; gap: .5rem;
padding: 0 1.25rem .75rem;
background: var(--ivory-soft);
}
.inbox-detail-actions-row2 button {
flex: 1;
padding: .65rem;
font-size: .65rem;
letter-spacing: .16em;
text-transform: uppercase;
border-radius: 2px;
background: transparent;
border: 1px solid var(--line);
color: var(--muted);
transition: all var(--t-fast);
}
.inbox-detail-actions-row2 button:hover {
border-color: var(--ink);
color: var(--ink);
}
.inbox-detail-actions-row2 button.active {
background: var(--ink);
color: var(--ivory);
border-color: var(--ink);
}
/* Form success toast */
.form-toast {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 2rem;
background: var(--charcoal);
color: var(--ivory);
padding: 1rem 1.5rem;
border-radius: 4px;
box-shadow: var(--shadow-deep);
z-index: 200;
max-width: 90vw;
text-align: center;
font-size: .92rem;
opacity: 0;
pointer-events: none;
transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.form-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.form-toast strong { color: var(--gold); }
/* Desktop: sidebar mode on wide screens */
@media (min-width: 900px) {
.inbox-overlay {
left: auto;
width: 540px;
box-shadow: -20px 0 60px -20px rgba(0,0,0,.25);
}
.inbox-detail { position: absolute; }
}
/* Mobile: ensure phone-friendly tap targets */
@media (max-width: 700px) {
.inbox-item { padding: 1rem 1.1rem 1rem 1.5rem; }
.inbox-detail-actions { grid-template-columns: 1fr 1fr; gap: .5rem; }
.inbox-detail-actions .btn { padding: .85rem .5rem; font-size: .65rem; }
.inbox-detail-row { flex-direction: column; gap: .25rem; padding: .65rem 0; }
.inbox-detail-label { min-width: auto; }
}
/* ==================================================================
v30 — MOTION & ART DIRECTION + WELLNESS SECTION
Feel: slow, weighty, confident. ≤600ms for UI moves, custom ease,
transform/opacity only. Everything honours prefers-reduced-motion.
================================================================== */
:root { --ease-lux: cubic-bezier(0.22, 1, 0.36, 1); --gold-soft: #C9A961; }
/* "THE VILLA 303" is longer than the old brand — never wrap it, and
collapse the nav links to the burger a little earlier so nothing clips */
.nav-brand { white-space: nowrap; }
/* Brand monogram: the arch-303 mark from the logo, gold line-work */
.nav-brand-mark { border: 0; width: 32px; height: 32px; padding: 0; }
.nav-brand-mark svg { display: block; width: 100%; height: 100%; }
@media (max-width: 540px) {
.nav-brand { letter-spacing: .13em; font-size: .78rem; gap: .45rem; }
.nav-brand-mark { width: 26px; height: 26px; }
}
@media (max-width: 1120px) {
.nav-links { display: none; }
.nav-burger { display: flex; }
}
/* Hero: slow Ken Burns drift 1.0 → 1.06 over 12s, 1.2s crossfade,
alternate drift direction per slide */
.hero-slide { transition: opacity 1.2s var(--ease-lux); will-change: opacity, transform; }
@keyframes kenBurns {
from { transform: scale(1.0); }
to { transform: scale(1.06); }
}
.hero-slide.active { animation: kenBurns 12s linear forwards; }
.hero-slide:nth-child(even).active { animation-direction: reverse; }
/* Headline: one-time masked line-wipe on load */
.hero-title { overflow: hidden; }
.hero-title > span, .hero-title > em {
display: inline-block;
transform: translateY(110%);
animation: titleWipe .9s var(--ease-lux) forwards;
}
.hero-title > em { animation-delay: .12s; }
@keyframes titleWipe { to { transform: translateY(0); } }
.hero-sub { opacity: 0; animation: fadeRise .8s var(--ease-lux) .45s forwards; }
.hero-meta, .hero-cta-row, .hero-booking { opacity: 0; animation: fadeRise .8s var(--ease-lux) .65s forwards; }
@keyframes fadeRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
/* Scroll cue: gentle pulse */
.hero-scroll-line { animation: scrollPulse 2.6s var(--ease-lux) infinite; transform-origin: top; }
@keyframes scrollPulse { 0%, 100% { opacity: .5; transform: scaleY(.7); } 50% { opacity: 1; transform: scaleY(1); } }
/* Sections: fade + rise 24px, 600ms, luxury ease */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .6s var(--ease-lux), transform .6s var(--ease-lux);
}
.reveal.in { opacity: 1; transform: none; }
/* Stagger children 80ms as their grid enters the viewport */
.essence-grid.reveal .essence-cell { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-lux), transform .6s var(--ease-lux); }
.essence-grid.reveal.in .essence-cell { opacity: 1; transform: none; }
.essence-grid.reveal.in .essence-cell:nth-child(2) { transition-delay: 80ms; }
.essence-grid.reveal.in .essence-cell:nth-child(3) { transition-delay: 160ms; }
.essence-grid.reveal.in .essence-cell:nth-child(4) { transition-delay: 240ms; }
.exp-grid .exp:nth-child(2) { transition-delay: 80ms; }
.exp-grid .exp:nth-child(3) { transition-delay: 160ms; }
.exp-grid .exp:nth-child(4) { transition-delay: 240ms; }
.exp-grid .exp:nth-child(5) { transition-delay: 320ms; }
.exp-grid .exp:nth-child(6) { transition-delay: 400ms; }
/* CTAs: 2% lift + shadow bloom on hover */
.btn-gold:hover, .btn-primary:hover, .btn-wa:hover, .quote-cta:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 34px rgba(0,0,0,.22);
}
.btn { transition: transform .35s var(--ease-lux), box-shadow .35s var(--ease-lux), background .25s ease, color .25s ease, border-color .25s ease; }
/* WhatsApp float: one soft attention pulse, 4s after load, once */
@keyframes waAttention {
0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.float-btn.wa { animation: waAttention 1.6s var(--ease-lux) 4s 1; }
/* Gallery: images breathe 1.03 inside a fixed frame, slow ease */
.gallery-item img { transition: transform 1.1s var(--ease-lux); }
.gallery-item:hover img { transform: scale(1.03); }
.space-img img { transition: transform 1.1s var(--ease-lux); }
.space:hover .space-img img { transform: scale(1.03); }
/* Lightbox: soft zoom-from-thumbnail */
.lightbox.open .lightbox-img { animation: lbZoom .45s var(--ease-lux); }
@keyframes lbZoom { from { transform: scale(.94); opacity: .4; } to { transform: scale(1); opacity: 1; } }
/* Calendar: dates tick in (JS sets per-cell animation-delay) */
.day.tick { opacity: 0; animation: dayIn .3s var(--ease-lux) forwards; }
@keyframes dayIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Subtle parallax targets (JS drives transform; images only, never text) */
.story-image img, .wellness-images img { will-change: transform; }
/* ============ HAMMAM & WELLNESS section ============ */
.wellness { padding-block: clamp(4rem, 9vw, 7.5rem); background: var(--charcoal); color: var(--ivory); }
.wellness-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.wellness-text .eyebrow { color: var(--gold-soft); }
.wellness-text h2 { color: var(--ivory); margin: 1.1rem 0 1.2rem; }
.wellness-text > p { color: var(--bone); opacity: .92; line-height: 1.85; max-width: 54ch; }
.wellness-text strong { color: var(--gold-soft); font-weight: 500; }
.wellness-points { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.wellness-points span {
border: 1px solid rgba(201,169,97,.45); color: var(--gold-soft);
font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
padding: .55rem .95rem; border-radius: 2px; white-space: nowrap;
}
.wellness-menu { margin-top: 2.2rem; border-top: 1px solid rgba(228,219,203,.18); padding-top: 1.6rem; }
.wellness-menu h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--ivory); margin-bottom: 1rem; }
.wellness-menu-row {
display: flex; align-items: baseline; gap: .9rem;
padding: .5rem 0; font-size: .95rem; color: var(--bone);
}
.wellness-menu-row::after { content: ''; order: 2; flex: 1; border-bottom: 1px dotted rgba(228,219,203,.28); transform: translateY(-4px); }
.wellness-menu-row span { order: 1; }
.wellness-menu-row em { order: 3; font-style: normal; color: var(--gold-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wellness-menu-note { margin-top: 1rem; font-size: .8rem; color: var(--bone); opacity: .65; line-height: 1.7; max-width: 52ch; }
.wellness-images { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wellness-images img {
width: 100%; height: 100%; object-fit: cover; display: block;
aspect-ratio: 3 / 4.2; border-radius: 2px;
}
.wellness-images img:last-child { transform: translateY(2.2rem); }
@media (max-width: 900px) {
.wellness-grid { grid-template-columns: 1fr; }
.wellness-images { order: -1; }
.wellness-images img:last-child { transform: none; }
.wellness-images img { aspect-ratio: 4 / 3; }
}
/* ============ Neighborhood discovery toggle ============ */
.nbhd-toggle { margin-top: .75rem; }
.nbhd-toggle summary {
cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: .6rem;
font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
color: var(--brass); padding: .55rem 0;
}
.nbhd-toggle summary::-webkit-details-marker { display: none; }
.nbhd-toggle summary::after { content: '↓'; transition: transform .3s var(--ease-lux); }
.nbhd-toggle[open] summary::after { transform: rotate(180deg); }
.nbhd-frame iframe { width: 100%; height: 420px; border: 0; border-radius: 2px; margin-top: .5rem; }
/* Reduced motion: no-motion fallback for everything above */
@media (prefers-reduced-motion: reduce) {
.hero-slide.active,
.hero-title > span, .hero-title > em,
.hero-sub, .hero-meta, .hero-cta-row, .hero-booking,
.hero-scroll-line, .float-btn.wa, .day.tick,
.lightbox.open .lightbox-img { animation: none !important; opacity: 1; transform: none; }
.reveal { opacity: 1; transform: none; transition: none; }
.gallery-item img, .space-img img, .btn { transition: none; }
.gallery-item:hover img, .space:hover .space-img img { transform: none; }
.story-image img, .wellness-images img { transform: none !important; }
}
/* The sticky booking bar is position:fixed; reserve its height so the last
~120-160px of the page is not permanently unreachable on a phone. */
body { padding-bottom: var(--bar-h, 0px); transition: padding-bottom .3s var(--ease-out); }
/* Below ~415px the nav's min-content (brand 130 + lang 56 + CTA 121 + gaps)
exceeds the viewport, so the burger collapses toward 0px and the gold CTA
is clipped by body{overflow-x:hidden}. French "RÉSERVER" makes it worse
than English. Step everything down so it fits a 360px phone. */
@media (max-width: 430px) {
.nav { padding-inline: .85rem; }
.nav-right { gap: .55rem; }
.nav-cta { padding: .6rem .8rem; font-size: .6rem; letter-spacing: .12em; }
.nav-brand { font-size: .72rem; letter-spacing: .06em; gap: .4rem; }
.nav-brand-mark { width: 24px; height: 24px; }
.nav-burger { flex: 0 0 24px; width: 24px; }
}
/* ======================================================================
RIGHT-TO-LEFT (Arabic + Hebrew)
======================================================================
Everything below is scoped to html[dir="rtl"] (or html[lang="ar"] /
html[lang="he"]). Nothing here can reach an LTR language — en/fr/es/nl/
be/de render byte-for-byte as before. The stylesheet above stays
physical (left/right) on purpose: mirroring here is lower risk than
rewriting ~90 existing rules to logical properties.
Sections:
1. Typefaces per script
2. Letter-spacing + text-transform neutralisation
3. Text alignment
4. One-sided spacing and borders
5. Absolute / fixed positioning
6. Generated content, gradients and motion
====================================================================== */
/* ---------- 1. TYPEFACES PER SCRIPT ----------------------------------
Font fallback is per-character, so listing the Latin face first and the
RTL face second gives Latin runs ("3 700 MAD", "303", "WhatsApp") the
brand serif/sans while Arabic or Hebrew runs pick up their own face.
--font-decor (Italiana) is deliberately NOT remapped: it only dresses
the "THE VILLA 303" wordmark, which stays Latin in every language. */
html[dir="rtl"] {
--font-display: 'Cormorant Garamond', 'Cairo', 'Times New Roman', serif;
--font-body: 'Inter', 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Hebrew is not covered by Cairo — without this it falls back to whatever
system serif the OS happens to have and looks unstyled. Higher specificity
than the html[dir="rtl"] rules above so Arabic keeps Cairo untouched. */
html[dir="rtl"][lang="he"] {
--font-display: 'Cormorant Garamond', 'Frank Ruhl Libre', Georgia, serif;
--font-body: 'Inter', 'Frank Ruhl Libre', Georgia, sans-serif;
}
/* Beats html[dir="rtl"] body {font-family: var(--font-ar)} defined near the
top of this file — same-specificity twin included as a belt-and-braces. */
html[dir="rtl"][lang="he"] body,
html[lang="he"] body { font-family: var(--font-he); }
/* The sticky-bar villa name is a Latin string; keep it on the display serif
rather than letting the Arabic stack take it. */
html[dir="rtl"] .booking-bar-name { font-family: 'Cormorant Garamond', 'Times New Roman', serif; }
/* ---------- 2. LETTER-SPACING + TEXT-TRANSFORM ------------------------
Arabic is a cursive script: any positive letter-spacing severs the glyph
joins and the word shatters into disconnected letters. Hebrew is not
cursive but tracking still degrades it. This file carries 78 positive
letter-spacing declarations (eyebrows, buttons, labels, nav, tables) —
they are all correct for Latin and all wrong here, so they are neutralised
in bulk instead of being edited one by one. !important is required because
several of them are more specific than this selector
(e.g. .savings-row.saved .col-label).
Carved out, because they are NOT Arabic/Hebrew text:
.stars / .review-stars / .reviews-avg-stars — runs of ★ glyphs whose
spacing is purely decorative;
.nav-brand / .footer-brand — the Latin "THE VILLA 303" wordmark, whose
wide tracking is part of the mark.
Excluding them from the reset (rather than restating values) keeps their
existing declarations, including the responsive ones, intact. */
html[dir="rtl"] *:not(.stars):not(.review-stars):not(.reviews-avg-stars):not(.nav-brand):not(.footer-brand),
html[dir="rtl"] *::before,
html[dir="rtl"] *::after {
letter-spacing: normal !important;
}
/* The universal reset also outranks the SVG letter-spacing presentation
attribute on the 303 monogram — restore it. */
html[dir="rtl"] .nav-brand-mark svg text { letter-spacing: .5px !important; }
/* Neither Arabic nor Hebrew has letter case, so uppercase is a no-op at best
and confuses the renderer at worst. The uppercase "eyebrow" and label
styles simply read as normal text in RTL. */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after {
text-transform: none !important;
}
/* ---------- 3. TEXT ALIGNMENT ----------------------------------------
Only the explicitly left/right-aligned blocks need mirroring; every
text-align:center in the file is already direction-agnostic. */
html[dir="rtl"] .exp,
html[dir="rtl"] .faq-q,
html[dir="rtl"] .hero-booking-field { text-align: right; }
html[dir="rtl"] .rate-price { text-align: left; }
@media (max-width: 640px) {
/* the LTR mobile rule flips this row back to left — re-flip it */
html[dir="rtl"] .rate-row,
html[dir="rtl"] .rate-price { text-align: right; }
}
/* ---------- 4. ONE-SIDED SPACING AND BORDERS -------------------------- */
/* Column rules between the spec numbers */
html[dir="rtl"] .spec + .spec {
border-left: none; padding-left: 0;
border-right: 1px solid var(--line); padding-right: 2rem;
}
@media (max-width: 700px) {
html[dir="rtl"] .spec + .spec { border-right: none; padding-right: 0; }
}
/* Divider between the hero booking-widget fields */
html[dir="rtl"] .hero-booking-field + .hero-booking-field {
border-left: 0;
border-right: 1px solid rgba(26,24,21,.1);
}
@media (max-width: 760px) {
html[dir="rtl"] .hero-booking-field + .hero-booking-field {
border-right: 0;
border-top: 1px solid rgba(26,24,21,.1);
}
}
/* Calendar: with two month columns the first month now sits on the RIGHT,
so the divider between the columns has to move to the left edge. */
html[dir="rtl"] .month { border-right: none; border-left: 1px solid var(--line); }
html[dir="rtl"] .month:nth-child(even) { border-left: none; }
@media (max-width: 720px) {
html[dir="rtl"] .month { border-left: none; }
}
/* Small inline gaps that were opened on one side only */
html[dir="rtl"] .gallery-count-badge { margin-left: 0; margin-right: .5rem; }
html[dir="rtl"] .rate-price small { margin-left: 0; margin-right: .25rem; }
html[dir="rtl"] .inbox-counter { margin-left: 0; margin-right: .65rem; }
html[dir="rtl"] .inbox-filter .count { margin-left: 0; margin-right: .35rem; }
html[dir="rtl"] .savings-row.head .col-direct::after { margin-left: 0; margin-right: .35rem; }
html[dir="rtl"] .legend-dot { margin-right: 0; margin-left: .4rem; }
html[dir="rtl"] .faq-q-icon { margin-left: 0; margin-right: 1rem; }
/* ---------- 5. ABSOLUTE / FIXED POSITIONING -------------------------- */
/* Nav link underline should grow from the right */
html[dir="rtl"] .nav-links a::after { left: auto; right: 0; }
/* Close buttons, badges and overlays pinned to a corner */
html[dir="rtl"] .mobile-menu-close { right: auto; left: 1.5rem; }
html[dir="rtl"] .lightbox-close { right: auto; left: 1.25rem; }
html[dir="rtl"] .gallery-item-label { left: auto; right: 1.2rem; }
html[dir="rtl"] .inbox-item.unread::before { left: auto; right: .35rem; }
html[dir="rtl"] .img-uploader-item button { right: auto; left: 4px; }
html[dir="rtl"] body.edit-mode [data-image]::after { right: auto; left: .5rem; }
/* Lightbox arrows: "previous" belongs on the right in RTL. The ‹ / › glyphs
in the markup are Unicode-mirrored characters, so they turn around on
their own inside an RTL run — only the anchoring has to move. */
html[dir="rtl"] .lightbox-prev { left: auto; right: 1.25rem; }
html[dir="rtl"] .lightbox-next { right: auto; left: 1.25rem; }
@media (max-width: 600px) {
html[dir="rtl"] .lightbox-prev { left: auto; right: .4rem; }
html[dir="rtl"] .lightbox-next { right: auto; left: .4rem; }
}
/* Floating WhatsApp / call stack and its hover label */
html[dir="rtl"] .float-actions { right: auto; left: 1.25rem; }
html[dir="rtl"] .float-btn::before { right: auto; left: calc(100% + .75rem); }
/* Admin drawer slides in from the left; the transition property has to move
with it or the panel would jump instead of sliding. */
html[dir="rtl"] .admin-panel {
right: auto; left: -460px;
box-shadow: 20px 0 60px -20px rgba(0,0,0,.25);
transition: left var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid);
}
html[dir="rtl"] .admin-panel.open {
right: auto; left: 0;
transition: left var(--t-mid) var(--ease-out), visibility 0s linear 0s;
}
/* Inbox sidebar docks to the left on wide screens */
@media (min-width: 900px) {
html[dir="rtl"] .inbox-overlay {
left: 0; right: auto;
box-shadow: 20px 0 60px -20px rgba(0,0,0,.25);
}
}
@media (max-width: 700px) {
/* extra padding reserved for the unread dot moves to the right */
html[dir="rtl"] .inbox-item { padding: 1rem 1.5rem 1rem 1.1rem; }
}
/* ---------- 6. GENERATED CONTENT, GRADIENTS AND MOTION ---------------- */
/* The eyebrow rule already lands on the correct side once the inline-flex
container is reversed by direction:rtl. The pre-existing `order: 1` flipped
it a second time, pushing the rule past the text (and, on .hero-eyebrow,
stacking both rules on the same side). Reset it. */
html[dir="rtl"] .eyebrow::before { order: 0; }
/* Opening quotation mark: quote glyphs are not Unicode-mirrored, so swap it. */
html[dir="rtl"] .review-quote::before { content: '”'; }
/* Calendar range pills: the range now starts on the right, so the rounded
cap has to change ends. */
html[dir="rtl"] .day.range-start { border-radius: 0 50% 50% 0; }
html[dir="rtl"] .day.range-end { border-radius: 50% 0 0 50%; }
html[dir="rtl"] .day.range-start.range-end { border-radius: 50%; }
/* Diagonal gradient on the owner photo placeholder */
html[dir="rtl"] .owner-photo-placeholder {
background: linear-gradient(225deg, var(--bone), var(--ivory-soft));
}
/* Scroll cue sweeps toward the reading direction: right-to-left here.
Reversing the existing keyframes is enough (translateX is a physical
transform and does not flip with dir). */
html[dir="rtl"] .hero-scroll-line::after { animation-direction: reverse; }
/* The hero title is two separate inline boxes — The Villa + 303.
Under direction:rtl the boxes themselves reorder, so the brand rendered as
"303 The Villa". The brand name is Latin and untranslated, so pin its internal
flow to LTR. (The nav/footer/booking-bar wordmarks are single text nodes, whose
Latin run already stays LTR under the bidi algorithm — they need nothing.) */
html[dir="rtl"] .hero-title { direction: ltr; }
/* Add after site.min.css. Keeps the existing villa theme and spacing variables. */
.booking-calendar-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .7rem}
.booking-month-button{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--line);border-radius:4px;background:var(--ivory);color:var(--ink);font-size:1.6rem;cursor:pointer}
.booking-month-button:disabled{opacity:.35;cursor:default}
.booking-month-title{font-size:.95rem;text-align:center}
.booking-calendar-help{font-size:.9rem;line-height:1.5;color:var(--muted);margin:0 0 1rem}
#calendarGrid,#bookingCalendarNav,#bookingCalendarHelp,.availability .avail-status,#quotePanel{max-width:900px;margin-inline:auto}
button.booking-day{font:inherit;font-size:.9rem;border:1px solid transparent;background:none;padding:0;min-width:0;min-height:36px;line-height:1;appearance:none}
#calendarGrid button.booking-day{aspect-ratio:auto;height:44px;min-height:44px}
button.booking-day.booked{background:var(--bone);color:var(--muted)}
button.booking-day.unknown{border-style:dashed;border-color:var(--line);color:var(--muted)}
button.booking-day.checkout-available{border:1px solid var(--gold);background:linear-gradient(135deg,var(--ivory) 50%,var(--bone) 50%);cursor:pointer;text-decoration:none}
button.booking-day.in-range{background:#c9a96138}
button.booking-day.range-start,button.booking-day.range-end{background:var(--charcoal);color:var(--ivory)}
button.booking-day:focus-visible{position:relative;z-index:2;outline:3px solid var(--gold);outline-offset:2px}
button.booking-day:disabled{cursor:default}
.booking-quote-note{flex:0 0 100%;font-size:.82rem;line-height:1.5;margin:0;color:var(--bone)}
#quotePrice{font-size:clamp(1.2rem,2.8vw,1.8rem);white-space:normal;overflow-wrap:anywhere}
.booking-contact-summary{font-size:.93rem;line-height:1.6;padding:1rem;border:1px solid var(--line);background:var(--ivory-soft);margin:0 0 1.5rem}
.booking-contact-summary:empty,.booking-form-status:empty{display:none}
.booking-form-status{font-size:.95rem;line-height:1.6;margin:1.25rem 0 0;padding:1rem;border:1px solid var(--line);background:var(--ivory-soft)}
.booking-form-status[role=alert]{border-color:#a34f37}
.booking-form-status h3{font-family:var(--font-display);font-size:1.7rem;margin:0 0 .6rem}
.booking-form-status p{margin:.3rem 0}
.booking-honeypot{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#availability,#quotePanel,#contact,[id$="-booking-error"],#bookingFormStatus{scroll-margin-top:calc(var(--strip-h,30px) + 90px);scroll-margin-bottom:calc(var(--bar-h,100px) + 20px)}
.rate-price{overflow-wrap:anywhere}
@media(max-width:720px){.booking-calendar-nav{gap:.5rem}.booking-month-title{font-size:.9rem}.month{padding:1.1rem .8rem}.weekdays{font-size:.65rem;letter-spacing:0}.days{gap:3px}.booking-contact-summary{padding:.8rem}.quote-panel{gap:.9rem}#quotePrice{font-size:1.4rem}}
@media(prefers-reduced-motion:reduce){#availability,#contact{scroll-behavior:auto}}
/* Villa 303: compact gallery, accessible controls, and a smaller mobile booking bar. */
.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.gallery-grid .gallery-item:nth-child(n){grid-column:auto!important;aspect-ratio:4/3!important;width:100%;padding:0;border:0;text-align:start;font:inherit}
.gallery-item::after{opacity:1;background:linear-gradient(180deg,transparent 48%,rgba(20,18,16,.66))}
.gallery-item .gallery-item-label{opacity:1;transform:none;letter-spacing:.08em;font-size:.72rem;bottom:1rem;left:1rem;right:1rem;line-height:1.4}
.gallery-item:focus-visible,.gallery-more button:focus-visible,.lightbox button:focus-visible,.faq-q:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
.gallery-item:focus-visible img{transform:scale(1.025)}
.gallery-more{margin-top:1.5rem}
.gallery-more [hidden],.footer-socials a[hidden],.final-cta-note[hidden],.faq-a[hidden]{display:none!important}
.faq-item.open .faq-a{max-height:none}
.lightbox-counter{width:calc(100% - 2rem);text-align:center;line-height:1.6;letter-spacing:.08em;bottom:max(1rem,env(safe-area-inset-bottom))}
.lightbox-img-wrap{max-height:calc(100dvh - 9rem)}
.lightbox-img{max-height:calc(100dvh - 9rem)}
.lightbox button:disabled{opacity:.3;cursor:default}
#gallery,#availability,#contact{scroll-margin-top:7rem}
.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.contact-grid>*,.contact-form,.form-grid,.form-group,.contact-list,.contact-item,.contact-item-value{min-width:0}
.contact-item-value,.contact-info p,.contact-info h2,.booking-contact-summary,.booking-form-status,.form-note,.form-reassure,.field-error{overflow-wrap:anywhere}
.contact-item-label{flex:0 0 110px}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-group input,.form-group textarea,.form-group select{box-sizing:border-box;min-width:0;max-width:100%;width:100%}
.contact-form .form-actions>*{min-width:0!important;max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}
@media(max-width:720px){
#quotePanel .quote-summary{flex:0 0 auto;width:100%}
#quotePanel .booking-quote-note{flex:0 0 auto}
}
@media(max-width:700px){
.contact-grid,.form-grid{grid-template-columns:minmax(0,1fr)}
.contact-form{padding:1.25rem}
.contact-form .form-actions{gap:.75rem}
.booking-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom));}
.booking-bar-left{display:block;min-width:0}
.booking-bar-name{display:none}
.booking-bar-price{display:flex;flex-wrap:wrap;gap:.2rem .3rem;font-size:.68rem;line-height:1.3;letter-spacing:0}
.booking-bar-price strong{font-family:var(--font-body),Arial,sans-serif;font-size:.95rem;font-weight:600;white-space:nowrap}
.booking-bar-price [data-i18n="bar.night"]{flex-basis:100%;font-size:.65rem}
.booking-bar-actions{width:auto;gap:.45rem}
.booking-bar-actions .btn{min-height:44px;padding:.65rem .85rem;letter-spacing:.06em;font-size:.65rem;white-space:nowrap}
.booking-bar-actions #barWhatsApp{width:44px;min-width:44px;flex:0 0 44px;padding:0}
#barWhatsApp [data-i18n="bar.wa"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#barWhatsApp svg{width:20px;height:20px}
.booking-bar.visible~.float-actions{display:none}
.gallery-grid{gap:.5rem}
.gallery-grid .gallery-item:nth-child(n){aspect-ratio:4/3!important;grid-column:auto!important}
.gallery-item .gallery-item-label{font-size:.62rem;left:.65rem;right:.65rem;bottom:.65rem;letter-spacing:.03em}
.lightbox{padding:1rem .5rem 4rem}
.lightbox-nav{top:auto;bottom:max(1rem,env(safe-area-inset-bottom));transform:none;width:44px;height:44px}
.lightbox-prev{left:.75rem}.lightbox-next{right:.75rem}
.lightbox-counter{width:calc(100% - 8.5rem);bottom:max(1.25rem,env(safe-area-inset-bottom));font-size:.65rem}
}
@media(prefers-reduced-motion:reduce){.gallery-item img,.gallery-item-label,.booking-bar{transition:none}.lightbox-img{animation:none}}
/* Keep section labels clean: no decorative short strokes beside the text. */
.eyebrow::before,
.hero-eyebrow::after{content:none;display:none}