:root{
--cream:#f5f0e8;
--sand:#e8dcc8;
--taupe:#9e8a72;
--terracotta:#c0724a;
--terra-soft:#d4896a;
--dark:#2a211a;
--mid:#5a4a3a;
--light:#f9f5ef;
--white:#fdfaf5;
--font-serif:'Cormorant Garamond',Georgia,serif;
--font-body:'Jost','Helvetica Neue',sans-serif;
--gap:clamp(1.5rem,4vw,4rem);
--max:1240px;
--ease:cubic-bezier(0.25,0.46,0.45,0.94);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
font-family:var(--font-body);
background:var(--white);
color:var(--dark);
line-height:1.7;
overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}
h1,h2,h3{
font-family:var(--font-serif);
font-weight:400;
line-height:1.15;
letter-spacing:0.01em;
}
.container{
width:min(var(--max),100%);
margin-inline:auto;
padding-inline:clamp(1.25rem,5vw,4rem);
}
.section{padding-block:clamp(4rem,10vw,9rem)}
.section-tight{padding-block:clamp(2rem,6vw,5rem)}
.section-label{
display:block;
font-family:var(--font-body);
font-size:0.7rem;
font-weight:500;
letter-spacing:0.2em;
text-transform:uppercase;
color:var(--terracotta);
margin-bottom:1rem;
}
.section-title{
font-size:clamp(2rem,4.5vw,3.4rem);
font-weight:300;
color:var(--dark);
margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.section-header{
margin-bottom:clamp(2rem,5vw,4rem);
}
.btn{
display:inline-block;
font-family:var(--font-body);
font-size:0.78rem;
font-weight:500;
letter-spacing:0.14em;
text-transform:uppercase;
padding:1rem 2.4rem;
border:1.5px solid currentColor;
transition:all 0.3s var(--ease);
white-space:nowrap;
}
.btn-hero{
color:var(--white);
border-color:rgba(192,114,74,0.6);
background:rgba(192,114,74,0.25);
margin-top:2rem;
}
.btn-hero:hover{
background:rgba(192,114,74,0.5);
color:var(--white);
border-color:rgba(192,114,74,0.8);
}
.btn-primary{
color:var(--dark);
border-color:var(--terracotta);
background:transparent;
}
.btn-primary:hover{
background:var(--terracotta);
color:var(--white);
}
.fade-in{
opacity:0;
transform:translateY(28px);
transition:opacity 0.75s var(--ease),transform 0.75s var(--ease);
}
.fade-in.visible{
opacity:1;
transform:none;
}
.nav{
position:fixed;
top:0;left:0;right:0;
z-index:900;
padding:1.2rem 0;
transition:background 0.4s var(--ease),padding 0.4s var(--ease);
}
.nav.scrolled{
background:rgba(253,250,245,0.97);
backdrop-filter:blur(12px);
padding:0.8rem 0;
box-shadow:0 1px 0 rgba(158,138,114,0.18);
}
.nav-inner{
display:flex;
align-items:center;
gap:2rem;
padding-inline:clamp(1.25rem,5vw,4rem);
}
.nav-logo{
flex-shrink:0;
display:flex;
align-items:center;
}
.nav-logo-img{
height:48px;
width:auto;
object-fit:contain;
}
.nav.scrolled .nav-logo-img{
}
.nav-brand{
display:flex;
align-items:center;
gap:1.2rem;
flex-shrink:0;
}
.nav-cta{
font-family:var(--font-body);
font-size:0.68rem;
font-weight:500;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--white);
border:1px solid rgba(255,255,255,0.4);
padding:0.45rem 1rem;
border-radius:100px;
transition:background 0.3s var(--ease),border-color 0.3s var(--ease),color 0.3s;
white-space:nowrap;
flex-shrink:0;
}
.nav-cta:hover{
background:rgba(192,114,74,0.35);
border-color:rgba(192,114,74,0.6);
color:var(--white);
}
.nav.scrolled .nav-cta{
color:var(--dark);
border-color:var(--terracotta);
}
.nav.scrolled .nav-cta:hover{
background:var(--terracotta);
color:var(--white);
}
.nav-links{
display:flex;
align-items:center;
gap:clamp(1rem,2.5vw,2rem);
margin-left:auto;
}
.nav-links a{
font-size:0.72rem;
font-weight:500;
letter-spacing:0.15em;
text-transform:uppercase;
color:rgba(255,255,255,0.85);
transition:color 0.3s;
}
.nav.scrolled .nav-links a{color:var(--mid)}
.nav-links a:hover{color:var(--terracotta)}
.nav-right{
display:flex;
align-items:center;
gap:1rem;
margin-left:1.5rem;
}
.lang-switch{
font-size:0.7rem;
font-weight:500;
letter-spacing:0.12em;
color:rgba(255,255,255,0.6);
cursor:pointer;
transition:color 0.3s;
}
.nav.scrolled .lang-switch{color:var(--taupe)}
.lang-switch .lang-fr.active,
.lang-switch .lang-en.active{color:var(--terracotta)}
.lang-sep{margin-inline:0.2em;opacity:0.5}
.hamburger{
display:none;
flex-direction:column;
gap:5px;
width:24px;
padding:2px;
}
.hamburger span{
display:block;
height:1.5px;
background:var(--white);
border-radius:2px;
transition:transform 0.3s var(--ease),opacity 0.3s;
}
.nav.scrolled .hamburger span{background:var(--dark)}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{
position:fixed;
inset:0;
z-index:800;
background:var(--dark);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity 0.4s var(--ease);
}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu-inner{text-align:center}
.mobile-menu ul{display:flex;flex-direction:column;gap:1.8rem}
.mobile-menu a{
font-family:var(--font-serif);
font-size:clamp(1.8rem,6vw,2.8rem);
font-weight:300;
color:var(--cream);
letter-spacing:0.04em;
transition:color 0.2s;
}
.mobile-menu a:hover{color:var(--terra-soft)}
.mobile-lang{margin-top:2.5rem}
.mobile-lang .lang-switch{color:var(--taupe);font-size:0.8rem}
.hero{
position:relative;
height:100svh;
min-height:600px;
display:flex;
align-items:center;
justify-content:center;
}
.hero-bg{
position:absolute;
inset:0;
overflow:hidden;
}
.hero-img{
width:100%;height:100%;
object-fit:cover;
filter:saturate(0.9) brightness(0.85);
}
.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(20,14,8,0.55) 0%,
rgba(20,14,8,0.25) 50%,
rgba(20,14,8,0.12) 100%
);
}
.hero-overlay::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(20,14,8,0.08) 0%,transparent 40%);
pointer-events:none;
}
.hero-content{
position:relative;
z-index:10;
text-align:center;
padding:2rem;
}
.hero-title{
font-family:var(--font-serif);
font-size:clamp(3rem,9vw,6.5rem);
font-weight:300;
color:var(--white);
letter-spacing:0.04em;
line-height:1;
margin-bottom:1rem;
}
.hero-subtitle{
font-family:var(--font-serif);
font-size:clamp(1rem,2.5vw,1.5rem);
font-weight:300;
color:rgba(245,240,232,0.8);
font-style:italic;
letter-spacing:0.08em;
}
.hero-scroll-hint{
position:absolute;
bottom:2.5rem;
left:50%;
transform:translateX(-50%);
z-index:10;
}
.hero-scroll-hint span{
display:block;
width:1.5px;
height:60px;
background:linear-gradient(to bottom,rgba(245,240,232,0.6),transparent);
margin:0 auto;
animation:scroll-hint 2s ease-in-out infinite;
}
@keyframes scroll-hint{
0%,100%{opacity:0.4;transform:scaleY(1)}
50%{opacity:1;transform:scaleY(1.2)}
}
.hero-cta{
display:inline-block;
margin-top:2.5rem;
font-family:var(--font-body);
font-size:0.72rem;
font-weight:500;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--white);
border:1px solid rgba(192,114,74,0.5);
padding:0.9rem 2.2rem;
border-radius:100px;
background:rgba(192,114,74,0.2);
transition:all 0.35s var(--ease);
}
.hero-cta:hover{background:rgba(192,114,74,0.4);border-color:rgba(192,114,74,0.8)}
.villa{background:var(--light)}
.villa-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(2.5rem,6vw,6rem);
align-items:center;
}
.villa-text{max-width:540px}
.villa-text p{
font-size:clamp(0.9rem,1.5vw,1.05rem);
color:var(--mid);
margin-bottom:1.2rem;
line-height:1.8;
}
.villa-stats{
display:flex;
align-items:center;
gap:clamp(1.2rem,3vw,2.5rem);
flex-wrap:wrap;
margin-top:2.5rem;
padding-top:2rem;
border-top:1px solid var(--sand);
}
.villa-stat{display:flex;flex-direction:column;gap:0.2rem}
.stat-number{
font-family:var(--font-serif);
font-size:clamp(1.8rem,3.5vw,2.4rem);
font-weight:300;
color:var(--dark);
line-height:1;
}
.stat-unit{
font-family:var(--font-body);
font-size:0.7rem;
font-weight:400;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--taupe);
}
.stat-icon{
width:22px;
height:22px;
color:var(--terracotta);
}
.stat-icon svg{width:100%;height:100%}
.villa-stat-sep{
width:1px;
height:36px;
background:var(--sand);
}
.villa-photos{
display:flex;
flex-direction:column;
gap:1rem;
}
.villa-photo{
overflow:hidden;
border-radius:2px;
}
.villa-photo--top{
height:clamp(220px,40vw,420px);
}
.villa-photo--bottom{
height:clamp(160px,30vw,320px);
align-self:start;
}
.quote-section{
padding-block:clamp(3rem,8vw,7rem);
background:var(--sand);
}
.quote-section--light{background:var(--light)}
.quote-inner{
display:flex;
align-items:flex-start;
gap:2rem;
max-width:760px;
margin:0 auto;
}
.quote-bar{
width:3px;
flex-shrink:0;
min-height:48px;
background:var(--terracotta);
}
.quote-text{
font-family:var(--font-serif);
font-size:clamp(1.2rem,2.5vw,1.7rem);
font-weight:300;
font-style:italic;
color:var(--dark);
line-height:1.6;
}
.quote-section--light .quote-bar{background:var(--taupe)}
.quote-section--light .quote-text{color:var(--mid)}
.galerie{background:var(--white)}
.gallery-grid{
display:flex;
flex-direction:column;
gap:0.75rem;
padding:0 clamp(1.25rem,5vw,4rem);
}
.gallery-row{display:flex;gap:0.75rem}
.gallery-row--full{flex-direction:column}
.gallery-row--2col{flex-direction:column}
.gallery-item{
overflow:hidden;
border-radius:2px;
background:var(--sand);
}
.gallery-row--full .gallery-item{height:clamp(240px,45vw,580px)}
.gallery-row--2col .gallery-item{flex:1;height:clamp(200px,38vw,520px)}
.gallery-item img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.6s var(--ease);
}
.gallery-item:hover img{transform:scale(1.03)}
.services{background:var(--light)}
.services-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:0;
}
.service-item{
display:flex;
align-items:flex-start;
gap:1.2rem;
padding:1.8rem 1.5rem;
border:1px solid var(--sand);
transition:background 0.3s var(--ease);
}
.service-item:hover{background:var(--sand)}
.service-item--featured{
grid-column:1/-1;
padding:2.2rem 2rem;
background:var(--sand);
border-color:var(--taupe);
}
.service-item--featured:hover{background:var(--sand)}
.service-icon--lg{
width:48px;
height:48px;
}
.service-icon--lg svg{width:100%;height:100%}
.service-subtitle{
font-family:var(--font-body);
font-size:0.78rem;
font-weight:300;
color:var(--taupe);
margin-top:0.35rem;
letter-spacing:0.04em;
}
.service-icon{
flex-shrink:0;
width:32px;
height:32px;
color:var(--terracotta);
}
.service-icon svg{width:100%;height:100%}
.service-text h3{
font-family:var(--font-serif);
font-size:1.05rem;
font-weight:500;
color:var(--dark);
}
.experience{
background:var(--dark);
padding-block:clamp(4rem,10vw,9rem);
}
.exp-header{
margin-bottom:clamp(2.5rem,5vw,4rem);
}
.exp-label{color:var(--terra-soft);display:block;margin-bottom:0.8rem;font-family:var(--font-body);font-size:0.7rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase}
.section-title--light{color:var(--cream)}
.exp-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(2.5rem,6vw,6rem);
align-items:center;
}
.exp-quote{max-width:520px}
.exp-bar{
width:3px;
min-height:48px;
background:var(--terracotta);
margin-bottom:2rem;
}
.exp-text-content p{
font-size:clamp(0.9rem,1.5vw,1.05rem);
color:rgba(245,240,232,0.7);
margin-bottom:1.2rem;
line-height:1.8;
}
.exp-photo{
height:clamp(300px,50vw,520px);
overflow:hidden;
border-radius:2px;
}
.exp-photo img{
width:100%;
height:100%;
object-fit:cover;
}
.contact{background:var(--light)}
.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:1.5rem;
}
.contact-card{
display:flex;
align-items:center;
gap:1.2rem;
padding:1.5rem 1.8rem;
border:1.5px solid var(--sand);
text-decoration:none;
transition:all 0.3s var(--ease);
}
.contact-card:hover{
border-color:var(--terracotta);
background:var(--sand);
}
.contact-icon{
width:36px;
height:36px;
flex-shrink:0;
color:var(--terracotta);
}
.contact-icon svg{width:100%;height:100%}
.contact-card h3{
font-family:var(--font-serif);
font-size:1rem;
font-weight:500;
color:var(--dark);
margin-bottom:0.2rem;
}
.contact-card p{
font-family:var(--font-body);
font-size:0.85rem;
color:var(--taupe);
}
.reservation{
background:var(--terracotta);
text-align:center;
}
.reservation-inner{padding:clamp(3rem,8vw,7rem) 0}
.reservation .section-title{color:var(--white);font-weight:300}
.resa-price{
font-family:var(--font-body);
font-size:clamp(0.9rem,2vw,1.1rem);
color:rgba(245,240,232,0.75);
margin-top:1rem;
}
.resa-price strong{color:var(--white);font-weight:500}
.resa-cta{
display:inline-block;
font-family:var(--font-body);
font-size:0.72rem;
font-weight:500;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--dark);
background:var(--white);
padding:1rem 2.5rem;
border:none;
margin-top:2.5rem;
transition:all 0.3s var(--ease);
}
.resa-cta:hover{background:var(--cream);transform:translateY(-2px)}
.footer{
background:var(--dark);
padding-block:clamp(3rem,7vw,6rem);
}
.footer-grid{
display:grid;
grid-template-columns:1.5fr 1fr 1fr;
gap:clamp(2rem,5vw,4rem);
}
.footer-brand{display:flex;flex-direction:column;gap:1.5rem}
.footer-logo-wrap{display:flex}
.footer-logo-img{
height:56px;
width:auto;
object-fit:contain;
}
.footer-address{
font-family:var(--font-body);
font-size:0.8rem;
color:rgba(245,240,232,0.5);
line-height:1.8;
font-style:normal;
}
.footer-links h4,.footer-contact h4{
font-family:var(--font-body);
font-size:0.65rem;
font-weight:500;
letter-spacing:0.18em;
text-transform:uppercase;
color:rgba(245,240,232,0.5);
margin-bottom:1.2rem;
}
.footer-links ul,.footer-contact ul{
display:flex;
flex-direction:column;
gap:0.7rem;
}
.footer-links a,.footer-contact a{
font-family:var(--font-body);
font-size:0.82rem;
color:rgba(245,240,232,0.7);
transition:color 0.2s;
}
.footer-links a:hover,.footer-contact a:hover{color:var(--terra-soft)}
.footer-bottom{
margin-top:clamp(2rem,5vw,3.5rem);
padding-top:1.5rem;
border-top:1px solid rgba(245,240,232,0.1);
}
.footer-bottom p{
font-family:var(--font-body);
font-size:0.72rem;
color:rgba(245,240,232,0.4);
}
@media (max-width:900px){
.villa-layout{grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem)}
.villa-photos{flex-direction:column;max-width:640px;width:100%}
.villa-photo--bottom{align-self:auto}
.exp-layout{grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem)}
.exp-photo{height:clamp(250px,50vw,380px)}
.gallery-row--3col{grid-template-columns:1fr 1fr}
.gallery-row--3col .gallery-item:last-child{grid-column:span 2}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-brand{grid-column:span 2}
}
@media (max-width:600px){
.villa-stats{gap:1rem}
.gallery-row--full .gallery-item{height:clamp(220px,55vw,400px)}
.gallery-row--2col{flex-direction:column}
.gallery-row--2col .gallery-item{height:clamp(200px,50vw,300px)}
.gallery-row--3col{grid-template-columns:1fr}
.gallery-row--3col .gallery-item{grid-column:span 1;height:clamp(200px,50vw,300px)}
.footer-grid{grid-template-columns:1fr}
.footer-brand{grid-column:span 1}
.contact-grid{grid-template-columns:1fr}
}