html,
body{
overflow-x:hidden;
}
*,
*::before,
*::after{
box-sizing:border-box;
}
/* ==========================
HERO
========================== */
.hero{
position:relative;
width:100%;
height:100vh;
background:url("../assets/images/banner.webp") center center/cover no-repeat;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}
.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.20),
rgba(0,0,0,.55)
);
}
.hero-content{
position:relative;
z-index:2;
text-align:center;
color:#E7C37A;
}
.hero-top{
display:block;
font-size:58px;
font-weight:300;
letter-spacing:2px;
}
.hero-title{
font-family:"Cormorant Garamond", serif;
font-size:170px;
font-style:italic;
font-weight:500;
line-height:.82;
margin:-15px 0;
}
.hero-bottom{
font-size:62px;
font-weight:300;
letter-spacing:2px;
}
.hero-address{
position:absolute;
bottom:45px;
left:50%;
transform:translateX(-50%);
z-index:2;
padding:10px 24px;
max-width:calc(100% - 32px);
border-radius:999px;
background:rgba(0,0,0,.55);
color:#fff;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
overflow-wrap:anywhere;
}
@media(max-width:992px){
.hero-title{
font-size:110px;
}
.hero-top{
font-size:42px;
}
.hero-bottom{
font-size:42px;
}
}
@media(max-width:768px){
.hero{
height:85vh;
}
.hero-title{
font-size:72px;
}
.hero-top{
font-size:28px;
}
.hero-bottom{
font-size:30px;
}
.hero-address{
width:auto;
max-width:calc(100% - 32px);
text-align:center;
font-size:10px;
letter-spacing:1.2px;
}
}
/* ==========================
ABOUT
========================== */
.about{
background:#F4EAD8;
padding:110px 0;
}
.container{
width:90%;
max-width:1320px;
margin:auto;
}
.about-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
align-items:center;
gap:80px;
}
.about-image img{
width:100%;
display:block;
}
.about-content{
color:#1F1F1F;
}
.section-title{
display:block;
margin-bottom:30px;
font-size:14px;
letter-spacing:3px;
font-weight:600;
color:#374536;
}
.about-content p{
margin-bottom:22px;
font-size:17px;
line-height:1.85;
color:#464646;
font-weight:300;
}
.btn-primary{
display:inline-flex;
justify-content:center;
align-items:center;
margin-top:20px;
padding:15px 42px;
border-radius:50px;
background:#344735;
color:#fff;
font-size:13px;
letter-spacing:2px;
text-transform:uppercase;
transition:.35s;
}
.btn-primary:hover{
background:#243324;
transform:translateY(-3px);
}
@media(max-width:991px){
.about{
padding:80px 0;
}
.about-grid{
grid-template-columns:1fr;
gap:50px;
}
.about-content{
text-align:center;
}
}
/* ==========================================
PAGE LOAD ANIMATION
========================================== */
body{
opacity:0;
transition:opacity .8s ease;
}
body.loaded{
opacity:1;
}
/* ==========================================
HERO ANIMATION
========================================== */
.hero-content > *{
opacity:0;
transform:translateY(40px);
transition:
opacity .8s ease,
transform .8s ease;
}
body.loaded .hero-top{
transition-delay:.2s;
}
body.loaded .hero-title{
transition-delay:.45s;
}
body.loaded .hero-bottom{
transition-delay:.7s;
}
body.loaded .hero-address{
opacity:1;
transform:translateX(-50%) translateY(0);
transition:
opacity .8s ease,
transform .8s ease;
transition-delay:1s;
}
body.loaded .hero-content > *{
opacity:1;
transform:translateY(0);
}
/* ==========================================
SCROLL REVEAL
========================================== */
.reveal{
opacity:0;
transform:translateY(60px);
transition:
opacity .8s ease,
transform .8s ease;
}
.reveal.active{
opacity:1;
transform:translateY(0);
}
/* Different speeds */
.reveal.delay-1{
transition-delay:.15s;
}
.reveal.delay-2{
transition-delay:.3s;
}
.reveal.delay-3{
transition-delay:.45s;
}
/* ==========================================
EDITORIAL STATEMENT
========================================== */
.statement-section{
position:relative;
background:
linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
url("../assets/images/cocktail.webp") center center/cover no-repeat;
min-height:100vh;
display:flex;
align-items:center;
}
.statement-section .container{
position:relative;
width:min(92%,1400px);
margin:0 auto;
display:flex;
align-items:center;
min-height:100vh;
}
.statement-content{
max-width:520px;
z-index:2;
}
.statement-content h2{
font-family:"Grotta",sans-serif;
font-size:clamp(4rem,8vw,8rem);
line-height:.9;
font-weight:300;
letter-spacing:-2px;
text-transform:uppercase;
color:#F5EFE2;
}
/* ==========================================
RESERVATION BUTTON
========================================== */
.statement-btn{
position:absolute;
left:50%;
bottom:60px;
transform:translateX(-50%);
display:inline-flex;
align-items:center;
justify-content:center;
gap:14px;
padding:20px 48px;
min-width:320px;
border:1px solid rgba(255,255,255,.45);
border-radius:999px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
color:#fff;
font-family:"Grotta",sans-serif;
font-size:14px;
font-weight:500;
letter-spacing:2px;
text-transform:uppercase;
transition:all .4s ease;
z-index:2;
}
.statement-btn::after{
content:"→";
font-size:16px;
transition:transform .3s ease;
}
.statement-btn:hover{
background:#D9B46B;
border-color:#D9B46B;
color:#111;
}
.statement-btn:hover::after{
transform:translateX(6px);
}
.statement-btn.reveal{
transform:translateX(-50%) translateY(60px);
}
.statement-btn.reveal.active{
transform:translateX(-50%) translateY(0);
}
/* ==========================================
TABLET
========================================== */
@media (max-width:991px){
.statement-section{
min-height:90vh;
}
.statement-content h2{
font-size:clamp(3.5rem,9vw,6rem);
}
.statement-btn{
min-width:280px;
padding:18px 42px;
font-size:13px;
bottom:45px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width:768px){
.statement-section{
justify-content:center;
text-align:center;
}
.statement-section .container{
justify-content:center;
}
.statement-content{
max-width:100%;
}
.statement-content h2{
font-size:56px;
line-height:.95;
}
.statement-btn{
left:50%;
bottom:35px;
transform:translateX(-50%);
width:calc(100% - 40px);
max-width:340px;
min-width:unset;
padding:18px 30px;
font-size:12px;
letter-spacing:1.5px;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width:480px){
.statement-content h2{
font-size:42px;
}
.statement-btn{
width:calc(100% - 30px);
padding:16px 24px;
font-size:11px;
bottom:25px;
}
.statement-btn::after{
font-size:14px;
}
}
/* ==========================================
RESERVATION
========================================== */
.reservation{
background:#F4EAD8;
padding:140px 0;
}
.reservation-heading{
text-align:center;
margin-bottom:70px;
}
.reservation-heading span{
display:block;
color:#4A5A43;
font-size:13px;
letter-spacing:3px;
text-transform:uppercase;
margin-bottom:16px;
}
.reservation-heading h2{
font-size:clamp(3rem,5vw,5rem);
font-weight:300;
color:#1B1B1B;
}
.reservation-form{
max-width:850px;
margin:auto;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:28px;
}
.form-group{
display:flex;
}
.full-width{
grid-column:1/-1;
}
.reservation-form input,
.reservation-form select{
width:100%;
padding:18px 0;
background:transparent;
border:none;
border-bottom:1px solid rgba(0,0,0,.25);
font-family:"Grotta";
font-size:15px;
outline:none;
transition:.3s;
}
.reservation-form input:focus,
.reservation-form select:focus{
border-color:#1E1E1E;
}
.reserve-btn{
grid-column:1/-1;
justify-self:center;
margin-top:30px;
padding:18px 46px;
border:none;
border-radius:999px;
background:#233628;
color:#fff;
font-size:13px;
letter-spacing:2px;
text-transform:uppercase;
cursor:pointer;
transition:.35s;
}
.reserve-btn:hover{
background:#111;
}
@media (max-width:991px){
.reservation-grid{
grid-template-columns:1fr;
gap:50px;
}
.reservation-image{
width:100%;
height:350px;
order:-1;
overflow:hidden;
border-radius:12px;
}
.reservation-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.reservation-form{
grid-template-columns:1fr;
}
.full-width{
grid-column:auto;
}
.reserve-btn{
width:100%;
}
.connect-section{
text-align:center;
}
.connect-buttons{
justify-content:center;
}
}
/* ==========================================
GRID
========================================== */
.reservation-grid{
display:grid;
grid-template-columns:1fr 520px;
gap:80px;
align-items:center;
}
/* ==========================================
IMAGE
========================================== */
.reservation-image{
height:760px;
overflow:hidden;
}
.reservation-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
@media (max-width:991px){
.reservation-grid{
grid-template-columns:1fr;
gap:50px;
}
.reservation-image{
width:100%;
height:350px;
order:-1;
border-radius:12px;
}
}
@media (max-width:480px){
.reservation{
padding:90px 0;
}
.reservation-heading{
margin-bottom:45px;
}
.reservation-form{
gap:22px;
}
}
/* ==========================================
CONNECT
========================================== */
.connect-section{
margin-top:70px;
}
.connect-section p{
color:#666;
font-size:15px;
margin-bottom:22px;
}
.connect-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.connect-buttons a{
display:inline-flex;
justify-content:center;
align-items:center;
padding:14px 28px;
border:1px solid #1B1B1B;
border-radius:999px;
color:#1B1B1B;
text-decoration:none;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
transition:.35s;
}
.connect-buttons a:hover{
background:#1B1B1B;
color:#fff;
}
/* ==========================================
RESERVATION REFRESH
========================================== */
.reservation{
position:relative;
overflow:hidden;
background:
linear-gradient(135deg, rgba(244,234,216,.98), rgba(233,219,188,.94)),
url("../assets/images/ambience.webp") center center/cover no-repeat;
}
.reservation::before{
content:"";
position:absolute;
top:76px;
left:0;
width:min(360px,32vw);
height:1px;
background:linear-gradient(90deg, rgba(35,54,40,.42), rgba(35,54,40,0));
}
.reservation::after{
content:"";
position:absolute;
right:0;
bottom:72px;
width:min(430px,36vw);
height:1px;
background:linear-gradient(270deg, rgba(217,180,107,.55), rgba(217,180,107,0));
}
.reservation-left{
position:relative;
z-index:1;
}
.reservation-heading{
max-width:620px;
margin:0 0 22px;
text-align:left;
}
.reservation-heading span{
color:#344735;
font-weight:600;
}
.reservation-heading h2{
line-height:1;
}
.reservation-subtitle{
max-width:560px;
margin:0 0 34px;
color:#4d4a40;
font-size:18px;
font-weight:300;
line-height:1.7;
}
.reservation-form{
position:relative;
max-width:720px;
margin:0;
padding:34px;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
border:1px solid rgba(52,71,53,.18);
border-radius:8px;
background:rgba(255,252,244,.78);
box-shadow:0 24px 60px rgba(31,28,22,.13);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.form-group{
min-width:0;
flex-direction:column;
gap:9px;
}
.honeypot{
position:absolute;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
}
.form-group label{
color:#344735;
font-size:11px;
font-weight:600;
letter-spacing:2px;
line-height:1.2;
text-transform:uppercase;
}
.field-hint{
color:#6a6254;
font-size:12px;
line-height:1.45;
}
.phone-combo{
display:grid;
grid-template-columns:minmax(118px,150px) minmax(0,1fr);
gap:14px;
}
.phone-control{
min-width:0;
display:flex;
flex-direction:column;
gap:9px;
}
.reservation-form input,
.reservation-form select{
min-height:58px;
padding:0 16px;
border:1px solid rgba(35,54,40,.2);
border-radius:8px;
background:#fffaf1;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
color:#1f1f1f;
font-family:"Grotta",sans-serif;
font-size:15px;
transition:
background .25s ease,
border-color .25s ease,
box-shadow .25s ease,
transform .25s ease;
}
.reservation-form input[type="date"],
.reservation-form input[type="time"]{
position:relative;
padding-right:52px;
color-scheme:light;
cursor:pointer;
}
.date-field,
.time-field{
position:relative;
}
.date-field::after,
.time-field::after{
content:"";
position:absolute;
right:17px;
bottom:18px;
z-index:1;
width:22px;
height:22px;
pointer-events:none;
}
.date-field::before{
content:"";
position:absolute;
right:22px;
bottom:33px;
z-index:2;
width:12px;
height:2px;
background:rgba(52,71,53,.58);
pointer-events:none;
}
.date-field::after{
border:1.5px solid rgba(52,71,53,.62);
border-radius:5px;
box-shadow:inset 0 6px 0 rgba(217,180,107,.26);
}
.time-field::before{
content:"";
position:absolute;
right:27px;
bottom:28px;
z-index:2;
width:8px;
height:1.5px;
background:rgba(52,71,53,.66);
box-shadow:-1px -5px 0 -1px rgba(52,71,53,.66);
pointer-events:none;
}
.time-field::after{
border:1.5px solid rgba(52,71,53,.62);
border-radius:50%;
}
.reservation-form input[type="date"]::-webkit-calendar-picker-indicator,
.reservation-form input[type="time"]::-webkit-calendar-picker-indicator{
position:absolute;
right:10px;
width:34px;
height:34px;
opacity:0;
cursor:pointer;
}
.reservation-form input[type="date"]::-webkit-datetime-edit,
.reservation-form input[type="time"]::-webkit-datetime-edit{
color:#1f1f1f;
}
.reservation-form select{
appearance:none;
-webkit-appearance:none;
padding-right:44px;
background-image:
linear-gradient(45deg, transparent 50%, #344735 50%),
linear-gradient(135deg, #344735 50%, transparent 50%);
background-position:
calc(100% - 21px) 50%,
calc(100% - 15px) 50%;
background-repeat:no-repeat;
background-size:6px 6px;
}
.reservation-form input::placeholder{
color:rgba(31,31,31,.42);
}
.reservation-form input:hover,
.reservation-form select:hover{
border-color:rgba(35,54,40,.38);
}
.reservation-form input:focus,
.reservation-form select:focus{
border-color:#D9B46B;
box-shadow:
0 0 0 4px rgba(217,180,107,.16),
inset 0 1px 0 rgba(255,255,255,.95);
}
.reservation-form input.invalid{
border-color:#9f3f32;
box-shadow:
0 0 0 4px rgba(159,63,50,.12),
inset 0 1px 0 rgba(255,255,255,.95);
}
.reserve-btn{
position:relative;
width:100%;
min-height:58px;
margin-top:12px;
padding:0 34px;
display:inline-flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg, #233628, #45583D);
box-shadow:0 16px 34px rgba(35,54,40,.24);
font-family:"Grotta",sans-serif;
font-weight:600;
overflow:hidden;
}
.reserve-btn::after{
content:"";
position:absolute;
inset:1px;
border:1px solid rgba(255,255,255,.18);
border-radius:999px;
pointer-events:none;
}
.reserve-btn:hover{
background:linear-gradient(135deg, #1B1B1B, #344735);
box-shadow:0 18px 40px rgba(27,27,27,.24);
transform:translateY(-2px);
}
.reserve-btn:focus-visible,
.btn-primary:focus-visible,
.connect-buttons a:focus-visible{
outline:3px solid rgba(217,180,107,.55);
outline-offset:4px;
}
.reservation-image{
position:relative;
border-radius:8px;
box-shadow:0 28px 70px rgba(31,28,22,.18);
}
.reservation-image::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.16));
pointer-events:none;
}
.reservation-image img{
filter:saturate(1.05) contrast(1.03);
}
/* ==========================================
THANK YOU
========================================== */
.thank-you-page{
position:relative;
min-height:100vh;
padding:48px 20px;
display:grid;
place-items:center;
overflow:hidden;
background:url("../assets/images/banner.webp") center center/cover no-repeat;
}
.thank-you-overlay{
position:absolute;
inset:0;
background:
linear-gradient(rgba(0,0,0,.48), rgba(0,0,0,.64)),
radial-gradient(circle at center, rgba(217,180,107,.16), rgba(0,0,0,0) 52%);
}
.thank-you-content{
position:relative;
z-index:1;
width:min(100%,760px);
text-align:center;
color:#F5EFE2;
}
.thank-you-content span{
display:block;
margin-bottom:18px;
color:#E7C37A;
font-size:12px;
font-weight:600;
letter-spacing:3px;
text-transform:uppercase;
}
.thank-you-content h1{
margin:0 0 18px;
font-family:"Cormorant Garamond", serif;
font-size:clamp(4rem,10vw,8rem);
font-style:italic;
font-weight:500;
line-height:.9;
}
.thank-you-content p{
max-width:620px;
margin:0 auto 24px;
color:rgba(245,239,226,.86);
font-size:18px;
font-weight:300;
line-height:1.75;
}
.thank-you-content .thank-you-redirect{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 18px;
border:1px solid rgba(255,255,255,.25);
border-radius:999px;
background:rgba(255,255,255,.08);
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
}
.thank-you-redirect strong{
color:#E7C37A;
}
.thank-you-content .btn-primary{
margin-top:10px;
background:#D9B46B;
color:#111;
}
.thank-you-content .btn-primary:hover{
background:#F1D18A;
}
@media (max-width:991px){
.reservation-heading,
.reservation-subtitle{
max-width:700px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.reservation-subtitle{
margin-bottom:32px;
}
.reservation-form{
max-width:720px;
margin:auto;
padding:30px;
}
.reservation-image{
border-radius:8px;
}
}
@media (max-width:640px){
.reservation{
padding:84px 0;
}
.reservation-heading{
margin-bottom:18px;
}
.reservation-subtitle{
font-size:16px;
}
.reservation-form{
grid-template-columns:1fr;
gap:18px;
padding:22px;
}
.full-width{
grid-column:auto;
}
.reservation-form input,
.reservation-form select,
.reserve-btn{
min-height:54px;
}
.phone-combo{
grid-template-columns:1fr;
}
.thank-you-content p{
font-size:16px;
}
.thank-you-redirect{
width:100%;
max-width:340px;
}
}