/* =================================================================== COSTE — Dark Mediterranean Luxury · Sidi Bou Said Opulent night palette · gold · glass · film grain =================================================================== */ :root{ /* ---- Dark luxury canvas ---- */ --bg: #0a0c11; /* near-black, blue undertone */ --bg-2: #0e1118; /* panel */ --bg-3: #141925; /* raised panel */ --bg-blue: #0c1726; /* deep cobalt night */ /* ---- Text ---- */ --cream: #efe9dc; /* primary text */ --cream-2: #cfc8b8; --muted: #97917f; /* secondary */ --faint: rgba(239,233,220,.55); --line: rgba(216,200,160,.16); /* gold-tinted hairline */ --line-soft: rgba(255,255,255,.08); /* ---- Gold ---- */ --gold: #c8a86a; --gold-2: #d9bd83; --gold-br: #ecd49a; /* bright highlight */ --gold-grad: linear-gradient(120deg,#e8cf97 0%,#c8a86a 45%,#a07d44 100%); /* ---- Mediterranean blue ---- */ --blue: #2e6fb0; --blue-deep: #1f4e79; --blue-soft: #5d8cc0; --blue-glow: rgba(46,111,176,.35); /* ---- Sunset glow ---- */ --sunset: linear-gradient(120deg,#f5c99f 0%,#e29a7e 32%,#bd6f86 60%,#5d5f9c 82%,#27416e 100%); --shadow-md: 0 24px 60px rgba(0,0,0,.45); --shadow-lg: 0 50px 110px rgba(0,0,0,.6); --glow-gold: 0 0 40px rgba(200,168,106,.28); --serif: "Cormorant Garamond", Georgia, serif; --sans: "Jost", system-ui, -apple-system, sans-serif; --ease: cubic-bezier(.22,1,.36,1); --maxw: 1320px; --gut: clamp(1.25rem, 4vw, 4.5rem); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body{ font-family:var(--sans); color:var(--cream); background:var(--bg); line-height:1.6;font-weight:300; /* overflow-x:clip — NOT hidden. `hidden` forces overflow-y to compute to `auto`, turning into its own nested scroll container, which is what made the wheel/trackpad feel "captured" while PageDown still worked. `clip` contains horizontal overflow without creating a scroll container. */ overflow-x:clip;position:relative; } /* Ambient luxury glows fixed behind everything */ body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(60% 50% at 80% -5%, rgba(46,111,176,.20), transparent 60%), radial-gradient(50% 45% at 8% 12%, rgba(200,168,106,.12), transparent 60%), radial-gradient(70% 60% at 50% 110%, rgba(189,111,134,.14), transparent 60%), var(--bg); } /* Film grain */ body::after{ content:"";position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:high-quality;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,textarea,select{font-family:inherit;font-size:1rem} ::selection{background:var(--gold);color:#0a0c11} /* ---------- Typography ---------- */ h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.01em} em{font-style:italic} .kicker{ font-family:var(--sans);font-size:.72rem;font-weight:500; letter-spacing:.36em;text-transform:uppercase; color:var(--gold);margin-bottom:1.4rem;display:flex;align-items:center;gap:.8rem; } .kicker::before{content:"";width:28px;height:1px;background:var(--gold);opacity:.7} .kicker--light{color:var(--gold-br)} /* gold gradient text accent */ .gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- Layout helpers ---------- */ .section{padding:clamp(5rem,11vw,11rem) var(--gut);max-width:var(--maxw);margin:0 auto;position:relative} .section__head{max-width:760px;margin-bottom:clamp(2.5rem,6vw,5rem)} .section__title{font-size:clamp(2.4rem,6vw,5rem)} .section__intro{font-size:1.15rem;color:var(--cream-2);margin-top:1.6rem;max-width:560px} /* =================================================================== BUTTONS =================================================================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font-family:var(--sans);font-weight:400;font-size:.82rem; letter-spacing:.18em;text-transform:uppercase; padding:1.05rem 2.2rem;border-radius:100px; transition:all .5s var(--ease);position:relative;overflow:hidden;white-space:nowrap; } /* gold primary */ .btn--solid{background:var(--gold-grad);color:#1a130a;box-shadow:var(--glow-gold)} .btn--solid::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-120%);transition:transform .7s var(--ease)} .btn--solid:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(200,168,106,.45)} .btn--solid:hover::after{transform:translateX(120%)} .btn--ghost{background:rgba(255,255,255,.02);color:var(--cream);box-shadow:inset 0 0 0 1px var(--line)} .btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold-br);transform:translateY(-2px)} .btn--sm{padding:.8rem 1.5rem;font-size:.72rem} .btn--lg{padding:1.25rem 2.8rem;font-size:.86rem} .btn--full{width:100%} /* =================================================================== CURSOR =================================================================== */ .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999} .cursor-dot{width:6px;height:6px;background:var(--gold-br);transform:translate(-50%,-50%);transition:opacity .3s} .cursor-ring{width:40px;height:40px;border:1px solid rgba(200,168,106,.6);transform:translate(-50%,-50%);transition:transform .25s var(--ease),opacity .3s,width .25s,height .25s,border-color .3s} .cursor-ring.is-hover{width:66px;height:66px;border-color:var(--gold-br)} @media (hover:none){.cursor-dot,.cursor-ring{display:none}} /* =================================================================== PRELOADER =================================================================== */ .preloader{position:fixed;inset:0;background:var(--bg);z-index:10000;display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s} .preloader.is-done{opacity:0;visibility:hidden} .preloader__inner{text-align:center} .preloader__mark{font-family:var(--serif);font-size:clamp(3rem,9vw,6rem);letter-spacing:.22em;padding-left:.22em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .preloader__since{font-family:var(--sans);font-size:.65rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-top:.5rem;opacity:.85} .preloader__sub{font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);margin-top:.5rem} .preloader__bar{width:160px;height:1px;background:var(--line);margin:2rem auto 0;overflow:hidden} .preloader__bar span{display:block;height:100%;width:0;background:var(--gold);animation:load 1.6s var(--ease) forwards} @keyframes load{to{width:100%}} /* =================================================================== NAV =================================================================== */ .nav{position:fixed;top:0;left:0;right:0;z-index:900;transition:all .5s var(--ease)} .nav__inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1.6rem var(--gut);transition:padding .5s var(--ease)} .nav.is-scrolled{background:rgba(10,12,17,.72);backdrop-filter:blur(20px) saturate(140%);box-shadow:0 1px 0 var(--line-soft)} .nav.is-scrolled .nav__inner{padding-top:1rem;padding-bottom:1rem} .nav__brand{font-family:var(--serif);font-size:1.7rem;letter-spacing:.26em;padding-left:.26em;color:var(--cream);position:relative} .nav__brand-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-left:-.16em;vertical-align:middle;box-shadow:0 0 10px var(--gold)} .nav__links{display:flex;gap:2.4rem} .nav__links a{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);position:relative;padding:.3rem 0;transition:color .4s} .nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .4s var(--ease)} .nav__links a:hover{color:var(--cream)} .nav__links a:hover::after{width:100%} .nav__cta{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;padding:.7rem 1.5rem;border-radius:100px;color:var(--gold-br);box-shadow:inset 0 0 0 1px var(--gold);transition:all .4s var(--ease)} .nav__cta:hover{background:var(--gold-grad);color:#1a130a;box-shadow:var(--glow-gold)} .nav__lang{display:flex;align-items:center;gap:.4rem;margin-right:.2rem} .nav__lang-btn{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);transition:color .3s;padding:.2rem .05rem;line-height:1} .nav__lang-btn.is-active,.nav__lang-btn:hover{color:var(--gold-br)} .nav__lang>span{color:var(--line);font-size:.55rem;pointer-events:none;user-select:none} @media(max-width:860px){.nav__lang{display:none}} .nav__burger{display:none;flex-direction:column;gap:6px;width:30px} .nav__burger span{height:1.5px;width:100%;background:var(--cream);transition:.4s var(--ease)} /* mobile menu */ .mobilemenu{position:fixed;inset:0;z-index:850;background:var(--bg-2);display:flex;flex-direction:column;justify-content:center;gap:2rem;padding:var(--gut);transform:translateY(-100%);transition:transform .6s var(--ease);text-align:center} .mobilemenu.is-open{transform:translateY(0)} .mobilemenu__links{display:flex;flex-direction:column;gap:1.3rem} .mobilemenu__links a{font-family:var(--serif);font-size:2rem;color:var(--cream)} .mobilemenu__meta{margin-top:2rem;font-size:.8rem;letter-spacing:.1em;color:var(--muted)} .mobilemenu__lang{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:2.2rem} .mobilemenu__lang .nav__lang-btn{font-size:.95rem;letter-spacing:.18em;padding:.5rem .7rem} .mobilemenu__lang>span{color:var(--line);user-select:none} /* =================================================================== HERO =================================================================== */ .hero{position:relative;height:100svh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden} .hero__media{position:absolute;inset:-8% 0;will-change:transform} .hero__media img{transform:scale(1.08);animation:heroZoom 14s var(--ease) forwards;filter:saturate(1.05) contrast(1.05)} @keyframes heroZoom{to{transform:scale(1)}} .hero__scrim{position:absolute;inset:0;background: linear-gradient(180deg,rgba(10,12,17,.72) 0%,rgba(10,12,17,.45) 35%,rgba(10,12,17,.65) 72%,var(--bg) 100%), radial-gradient(70% 50% at 50% 100%,rgba(189,111,134,.18),transparent 70%)} .hero__content{position:relative;z-index:3;color:var(--cream);padding:0 var(--gut) clamp(5rem,12vh,9rem);max-width:var(--maxw);margin:0 auto;width:100%} .hero__eyebrow{font-size:.78rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-br);margin-bottom:1.6rem;text-shadow:0 1px 16px rgba(0,0,0,.8),0 0 24px rgba(0,0,0,.6);font-weight:500} .hero__title{font-size:clamp(2.8rem,8vw,7rem);line-height:.98;font-weight:400;text-shadow:0 2px 32px rgba(0,0,0,.75),0 1px 8px rgba(0,0,0,.5)} .hero__title em{font-style:italic;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .reveal-line{display:block;overflow:hidden} .reveal-line>span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)} .is-loaded .reveal-line>span{transform:translateY(0)} .is-loaded .reveal-line:nth-child(2)>span{transition-delay:.12s} .hero__lede{max-width:480px;font-size:1.15rem;color:var(--cream);margin:2rem 0 2.6rem;font-weight:300;text-shadow:0 1px 16px rgba(0,0,0,.65)} .hero__actions{display:flex;gap:1rem;flex-wrap:wrap} .hero__actions .btn--ghost{color:var(--cream);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)} .hero__actions .btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold-br)} .hero__scroll{position:absolute;right:var(--gut);bottom:clamp(5rem,12vh,9rem);z-index:3;color:var(--cream);display:flex;flex-direction:column;align-items:center;gap:1rem;writing-mode:vertical-rl;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase} .hero__scroll-line{width:1px;height:60px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden} .hero__scroll-line::after{content:"";position:absolute;top:-60px;left:0;width:1px;height:60px;background:var(--gold);animation:scrollline 2s var(--ease) infinite} @keyframes scrollline{to{top:60px}} .hero__marquee{position:absolute;bottom:0;left:0;right:0;z-index:3;border-top:1px solid var(--line);padding:1rem 0;overflow:hidden;backdrop-filter:blur(6px);background:rgba(10,12,17,.25)} .marquee__track{display:flex;gap:2rem;white-space:nowrap;animation:marquee 28s linear infinite;font-family:var(--serif);font-size:1.4rem;color:var(--cream-2);font-style:italic} .marquee__track span{padding:0 .2rem} .marquee__track span:nth-child(even){color:var(--gold)} @keyframes marquee{to{transform:translateX(-50%)}} /* =================================================================== MANIFESTO =================================================================== */ .manifesto{text-align:center;padding:clamp(6rem,14vw,13rem) var(--gut)} .manifesto__inner{max-width:1000px;margin:0 auto} .manifesto__text{font-size:clamp(2rem,6vw,4.6rem);line-height:1.08;font-weight:300;color:var(--cream)} .manifesto__accent{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic} .reveal-word{display:inline-block;opacity:0;transform:translateY(40%);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal-word.is-in{opacity:1;transform:translateY(0)} .manifesto__body{max-width:600px;margin:2.6rem auto 0;color:var(--muted);font-size:1.12rem} .manifesto .discover__map{margin-top:clamp(3rem,6vw,5rem);text-align:left} /* =================================================================== EXPERIENCE GRID =================================================================== */ .exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem)} .exp-card{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow-md);box-shadow:inset 0 0 0 1px var(--line-soft),var(--shadow-md)} .exp-card--wide{grid-column:span 3;aspect-ratio:21/9} .exp-card__media{position:absolute;inset:0} .exp-card__media img{transition:transform 1.2s var(--ease);filter:saturate(1.05)} .exp-card:hover .exp-card__media img{transform:scale(1.06)} .exp-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(8,10,15,.9) 100%)} .exp-card__body{position:absolute;left:0;bottom:0;z-index:2;padding:2rem;color:var(--cream)} .exp-card__index{font-size:.72rem;letter-spacing:.3em;color:var(--gold);display:block;margin-bottom:.6rem} .exp-card__body h3{font-size:1.9rem;margin-bottom:.5rem} .exp-card__body p{font-size:.95rem;color:var(--cream-2);max-width:36ch;opacity:0;transform:translateY(10px);transition:.5s var(--ease)} .exp-card:hover .exp-card__body p{opacity:1;transform:translateY(0)} /* =================================================================== ATMOSPHERE SPLIT =================================================================== */ .atmos{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch;background:linear-gradient(180deg,var(--bg-2),var(--bg-blue));border-block:1px solid var(--line-soft)} .atmos__media{position:relative;overflow:hidden;min-height:540px} .atmos__media img{will-change:transform;filter:saturate(1.05) brightness(.95)} .atmos__panel{padding:clamp(3rem,7vw,7rem)} .atmos__title{font-size:clamp(2.4rem,5vw,4.2rem);margin-bottom:2rem} .atmos__panel>p{color:var(--cream-2);max-width:42ch;font-size:1.08rem} .atmos__list{list-style:none;margin-top:2.6rem;border-top:1px solid var(--line)} .atmos__list li{display:flex;gap:1.2rem;padding:1.3rem 0;border-bottom:1px solid var(--line);font-size:1.05rem;color:var(--cream)} .atmos__list li span{color:var(--gold);font-size:.8rem;letter-spacing:.1em;padding-top:.25rem} /* =================================================================== MENU =================================================================== */ .menu{background:transparent} .menu__layout{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start} .menu__group{margin-bottom:2.8rem} .menu__group-title{font-family:var(--sans);font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem} .menu__item{padding:1.1rem 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease)} .menu__item:hover{padding-left:.8rem} .menu__item-head{display:flex;align-items:baseline;gap:.8rem} .menu__name{font-family:var(--serif);font-size:1.5rem;color:var(--cream)} .menu__dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)} .menu__price{font-family:var(--serif);font-size:1.5rem;color:var(--gold)} .menu__price::after{content:" DT";font-size:.8em;margin-left:2px} .menu__desc{font-size:.95rem;color:var(--muted);margin-top:.3rem;max-width:52ch} .menu__feature{position:sticky;top:120px;border-radius:18px;overflow:hidden;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-md)} .menu__feature-media{aspect-ratio:4/3;overflow:hidden} .menu__feature-media img{transition:transform 1.2s var(--ease)} .menu__feature:hover .menu__feature-media img{transform:scale(1.05)} .menu__feature-body{padding:2.2rem} .menu__feature-body h3{font-size:1.8rem;margin:.4rem 0 1rem;color:var(--cream)} .menu__feature-body p{color:var(--cream-2);font-size:.98rem;margin-bottom:1.6rem} /* ---- Menu · new menu coming soon ---- */ .menu-soon{position:relative;overflow:hidden;text-align:center;max-width:760px;margin:0 auto;padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,4.5rem);border-radius:24px;background:radial-gradient(120% 140% at 50% 0%,rgba(20,25,37,.9),var(--bg-2));box-shadow:inset 0 0 0 1px var(--line),var(--shadow-md)} .menu-soon__glow{position:absolute;top:-40%;left:50%;width:120%;height:120%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(200,168,106,.16),transparent 70%);pointer-events:none;animation:soonGlow 7s ease-in-out infinite alternate} @keyframes soonGlow{from{opacity:.55;transform:translateX(-50%) scale(.95)}to{opacity:1;transform:translateX(-50%) scale(1.05)}} .menu-soon__badge{position:relative;display:inline-flex;align-items:center;gap:.55rem;padding:.55rem 1.3rem;border-radius:100px;font-family:var(--sans);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-br);box-shadow:inset 0 0 0 1px var(--gold)} .menu-soon__badge i{width:7px;height:7px;border-radius:50%;background:var(--gold-br);box-shadow:0 0 0 0 rgba(236,212,154,.6);animation:soonPulse 1.8s ease-out infinite} @keyframes soonPulse{0%{box-shadow:0 0 0 0 rgba(236,212,154,.55)}100%{box-shadow:0 0 0 9px rgba(236,212,154,0)}} .menu-soon__title{position:relative;font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5.5vw,3.6rem);line-height:1.05;color:var(--cream);margin:1.6rem 0 1.2rem} .menu-soon__lede{position:relative;max-width:54ch;margin:0 auto 2.2rem;color:var(--cream-2);font-size:1.05rem;line-height:1.7} .menu-soon__teaser{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1rem;margin-bottom:2.2rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.6vw,1.6rem);color:var(--cream-2)} .menu-soon__teaser span:nth-child(odd){color:var(--gold)} .menu-soon__stay{position:relative;font-family:var(--sans);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:2rem} .menu-soon .btn{position:relative} /* =================================================================== FULL MENU — category tabs, banners, price rows =================================================================== */ .menu2{max-width:var(--maxw);margin:0 auto} .menu2__note-inline{display:block;margin-top:.7rem;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} /* tab bar — horizontally scrollable on phones */ .menu2__tabs{display:flex;gap:.6rem;overflow-x:auto;padding:.2rem .1rem 1rem;margin-bottom:clamp(1.6rem,3vw,2.6rem);scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch} .menu2__tabs::-webkit-scrollbar{display:none} .menu2__tab{flex:0 0 auto;scroll-snap-align:center;padding:.8rem 1.6rem;border-radius:100px;font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2);background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;transition:color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)} .menu2__tab:hover{color:var(--gold-br);box-shadow:inset 0 0 0 1px var(--gold)} .menu2__tab.is-active{background:var(--gold-grad);color:#1a130a;box-shadow:var(--glow-gold)} .menu2__panel{display:none} .menu2__panel.is-active{display:block;animation:fade .6s var(--ease)} /* category header — text only (photos now live inside the lists, PDF-style) */ .menu2__panel-head{margin-bottom:clamp(1.6rem,3vw,2.4rem)} .menu2__panel-kicker{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-br);margin-bottom:.55rem} .menu2__panel-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,4.4vw,2.7rem);line-height:1;color:var(--cream)} .menu2__panel-head p{color:var(--cream-2);font-size:.95rem;margin-top:.6rem;max-width:52ch} /* dish photos interleaved within the columns, like the printed menu */ .menu2__photo{break-inside:avoid;-webkit-column-break-inside:avoid;margin:.2rem 0 2.6rem;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-soft),var(--shadow-md)} .menu2__photo img{width:100%;height:auto;display:block;transition:transform 1s var(--ease)} .menu2__photo:hover img{transform:scale(1.04)} /* balanced multi-column item lists */ .menu2__groups{columns:2;column-gap:clamp(2.2rem,5vw,4.5rem)} .menu2__group{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 2.6rem} .menu2__group-title{font-family:var(--sans);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--line)} .menu2__list{list-style:none} .menu2__row{display:flex;align-items:baseline;gap:.5rem;padding:.6rem 0} .menu2__name{font-family:var(--serif);font-size:1.16rem;font-weight:400;color:var(--cream);transition:color .3s var(--ease)} .menu2__row:hover .menu2__name{color:var(--gold-br)} .menu2__lead{flex:1 1 auto;min-width:1.4rem;align-self:flex-end;margin-bottom:.36rem;border-bottom:1px dotted var(--line)} .menu2__price{flex-shrink:0;font-family:var(--serif);font-size:1.12rem;color:var(--gold);white-space:nowrap} .menu2__price::after{content:" DT";font-family:var(--sans);font-size:.6em;letter-spacing:.1em;color:var(--muted);margin-left:2px} @media(max-width:760px){ .menu2__groups{columns:1} .menu2__name{font-size:1.06rem} .menu2__price{font-size:1.04rem} } /* =================================================================== DISCOVER / TOURIST HUB =================================================================== */ .discover{background:linear-gradient(180deg,var(--bg),var(--bg-2));border-top:1px solid var(--line-soft)} .discover__tabs{display:flex;gap:.6rem;margin-bottom:3rem;flex-wrap:wrap} .discover__tab{padding:.8rem 1.6rem;border-radius:100px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2);box-shadow:inset 0 0 0 1px var(--line);transition:all .4s var(--ease)} .discover__tab.is-active{background:var(--gold-grad);color:#1a130a;box-shadow:var(--glow-gold)} .discover__panel{display:none} .discover__panel.is-active{display:block;animation:fade .6s var(--ease)} @keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .discover__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem)} .gem{background:var(--bg-3);border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-soft);transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .gem:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--gold),var(--shadow-md)} .gem__media{aspect-ratio:4/3;overflow:hidden} .gem__media img{transition:transform 1.1s var(--ease)} .gem:hover .gem__media img{transform:scale(1.07)} .gem__body{padding:1.5rem 1.6rem 1.8rem} .gem__tag{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.6rem} .gem__body h4{font-size:1.4rem;margin-bottom:.4rem;color:var(--cream)} .gem__body p{font-size:.92rem;color:var(--muted)} .discover__map{margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,var(--bg-blue),var(--blue-deep));box-shadow:inset 0 0 0 1px var(--line),var(--shadow-md);color:var(--cream)} .discover__map-text{padding:clamp(2.2rem,5vw,4rem)} .discover__map-text h3{font-size:2rem;margin-bottom:.8rem} .discover__map-text p{color:var(--cream-2);margin-bottom:1.6rem} .discover__map-text .btn--ghost{color:var(--cream);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)} .discover__map-text .btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold-br)} .discover__map-visual{position:relative;min-height:340px;background:var(--bg-blue)} .discover__map-embed{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.25) contrast(1.05)} @keyframes pulse{to{box-shadow:0 0 0 40px rgba(200,168,106,0),0 0 16px var(--gold)}} /* =================================================================== EVENTS =================================================================== */ .events__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem)} .event{border-radius:18px;overflow:hidden;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-soft);transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .event:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--gold),var(--shadow-md)} .event__media{aspect-ratio:4/3;overflow:hidden} .event__media img{transition:transform 1.1s var(--ease)} .event:hover .event__media img{transform:scale(1.07)} .event__body{padding:1.8rem} .event__meta{display:flex;gap:.6rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem} .event__body h3{font-size:1.7rem;margin-bottom:.6rem;color:var(--cream)} .event__body p{font-size:.95rem;color:var(--muted);margin-bottom:1.4rem} .events__private{margin-top:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#11141b,#0c1726);color:var(--cream);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-lg)} .events__private-body{padding:clamp(2.6rem,6vw,5rem);display:flex;flex-direction:column;justify-content:center} .events__private-body .kicker{color:var(--gold-br)} .events__private-body h2,.events__private-body h3{font-size:clamp(2rem,4vw,3.4rem);margin-bottom:1.4rem} .events__private-body p{color:var(--cream-2);max-width:44ch;margin-bottom:2rem} .events__private-body .btn--solid{align-self:flex-start} .events__private-media{position:relative;overflow:hidden;min-height:360px} /* =================================================================== WHITE CLUB =================================================================== */ .club{background: radial-gradient(120% 80% at 50% 0%,rgba(46,111,176,.16),transparent 60%), radial-gradient(80% 60% at 50% 100%,rgba(200,168,106,.1),transparent 60%); border-block:1px solid var(--line-soft)} .club__inner{max-width:var(--maxw);margin:0 auto;text-align:center} .club__head{max-width:680px;margin:0 auto 3.5rem} .club__head .kicker{justify-content:center} .club__title{font-size:clamp(2.6rem,7vw,5.5rem);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .club__intro{color:var(--cream-2);font-size:1.12rem;margin-top:1.4rem} .club__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;text-align:left} .club-card{padding:2.2rem 1.8rem;border-radius:16px;background:rgba(255,255,255,.03);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .club-card:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px var(--gold),var(--glow-gold)} .club-card h3{font-size:1.4rem;margin-bottom:.7rem;color:var(--gold-br)} .club-card p{font-size:.95rem;color:var(--cream-2)} .club__join{margin-top:3.2rem;display:flex;flex-direction:column;align-items:center;gap:1rem} .club__note{font-size:.78rem;letter-spacing:.1em;color:var(--muted)} /* =================================================================== CREATOR / INFLUENCER =================================================================== */ .creator{display:grid;grid-template-columns:1fr 1.1fr;background:linear-gradient(135deg,var(--bg-2),var(--bg));border-block:1px solid var(--line-soft)} .creator__media{position:relative;overflow:hidden;min-height:560px} .creator__panel{padding:clamp(3rem,7vw,7rem);display:flex;flex-direction:column;justify-content:center} .creator__title{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:1.6rem} .creator__panel>p{color:var(--cream-2);max-width:46ch;font-size:1.06rem} .creator__perks{list-style:none;margin:2rem 0 2.6rem} .creator__perks li{padding:.9rem 0;border-bottom:1px solid var(--line);padding-left:1.8rem;position:relative;color:var(--cream)} .creator__perks li::before{content:"";position:absolute;left:0;top:1.35rem;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)} .creator__panel .btn--solid{align-self:flex-start} /* =================================================================== CATERING =================================================================== */ .catering{background:linear-gradient(180deg,var(--bg),var(--bg-2))} .catering__inner{max-width:var(--maxw);margin:0 auto} .catering__head{max-width:680px;margin-bottom:3.5rem} .catering__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start} .catering__list{list-style:none} .catering__list li{display:flex;gap:1.4rem;padding:1.6rem 0;border-bottom:1px solid var(--line)} .catering__list li span{font-family:var(--serif);font-size:1.6rem;color:var(--gold)} .catering__list h4{font-size:1.4rem;margin-bottom:.3rem;color:var(--cream)} .catering__list p{font-size:.95rem;color:var(--muted)} /* =================================================================== FORMS =================================================================== */ .leadform,.catering__form{background:var(--bg-3);border-radius:18px;padding:clamp(1.8rem,4vw,2.6rem);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-md)} .leadform h3,.catering__form h3{font-size:1.7rem;margin-bottom:1.6rem;color:var(--cream)} .field{margin-bottom:1.1rem;display:flex;flex-direction:column} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .field label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem} .field label em{text-transform:none;letter-spacing:0;color:var(--faint)} .field input,.field textarea{ border:none;border-bottom:1px solid var(--line);padding:.7rem 0;background:transparent;color:var(--cream); transition:border-color .4s var(--ease); } .field input::placeholder,.field textarea::placeholder{color:rgba(239,233,220,.3)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--gold)} .field input[type="date"],.field input[type="time"]{color-scheme:dark} .field textarea{resize:vertical} .leadform__status{margin-top:1rem;font-size:.9rem;color:var(--gold-br);min-height:1.2em} /* =================================================================== UPCOMING EVENTS =================================================================== */ .events__upcoming{margin-bottom:3.5rem} .upcoming__label{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem} .upcoming__label span{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold); padding:.35rem 1rem;border-radius:100px;border:1px solid var(--gold);background:rgba(200,168,106,.08)} .upcoming__grid{display:grid;gap:1.4rem} .upcoming-event{display:grid;grid-template-columns:auto 1fr;gap:0;border-radius:20px;overflow:hidden; background:var(--bg-3);border:1px solid var(--line);box-shadow:var(--shadow-md); transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .upcoming-event:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--gold),var(--shadow-lg)} .upcoming-event__poster{width:260px;position:relative;overflow:hidden;flex-shrink:0} .upcoming-event__poster img{width:100%;height:100%;object-fit:cover;object-position:top} .upcoming-event__badge{position:absolute;top:1rem;right:1rem;background:var(--gold-grad); color:#1a130a;font-size:.82rem;font-weight:600;letter-spacing:.06em; padding:.45rem 1rem;border-radius:100px;box-shadow:0 4px 18px rgba(200,168,106,.4)} .upcoming-event__body{display:flex;gap:1.8rem;padding:2rem 2.2rem;align-items:flex-start} .upcoming-event__date{display:flex;flex-direction:column;align-items:center; padding:1rem 1.4rem;border-radius:14px;border:1px solid var(--line); background:rgba(200,168,106,.06);flex-shrink:0;min-width:74px;text-align:center} .ue-day{font-family:var(--serif);font-size:2.4rem;line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .ue-month{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:.2rem} .upcoming-event__info{flex:1} .upcoming-event__tag{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase; color:var(--gold);display:block;margin-bottom:.7rem} .upcoming-event__info h3{font-family:var(--serif);font-size:1.9rem;color:var(--cream);margin-bottom:.6rem;line-height:1.1} .upcoming-event__info p{font-size:.92rem;color:var(--muted);margin-bottom:1.2rem;max-width:48ch} .upcoming-event__details{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.6rem} .upcoming-event__details span{font-size:.8rem;color:var(--cream-2);padding:.3rem .8rem; border-radius:100px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft)} .upcoming-event__register{display:inline-flex;align-self:flex-start;margin-top:.2rem} .events__empty{text-align:center;color:var(--muted);font-size:1rem;padding:2rem 1rem;border-radius:16px;background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px var(--line-soft)} /* recent / archived events */ .events__recent{margin-bottom:3.5rem} .upcoming__label--recent span{color:var(--muted)} .upcoming-event--past{opacity:.78} .upcoming-event--past:hover{transform:none;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-md);opacity:1} .upcoming-event--past .upcoming-event__poster img{filter:grayscale(.55) brightness(.85)} .upcoming-event__badge--done{background:rgba(20,25,37,.92);color:var(--cream-2);box-shadow:inset 0 0 0 1px var(--line)} .events__regular-head{margin:3rem 0 1.5rem} .events__regular-head h3{font-family:var(--serif);font-size:2rem;color:var(--cream)} /* =================================================================== GALLERY =================================================================== */ .gallery{text-align:center} .gallery .section__head{margin-left:auto;margin-right:auto;text-align:center} .gallery .section__head .kicker{justify-content:center} .gallery__grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:220px;gap:.6rem} .gallery__item{overflow:hidden;border-radius:8px;position:relative;box-shadow:inset 0 0 0 1px var(--line-soft)} .gallery__item--wide{grid-column:span 2;grid-row:span 2} .gallery__item::after{content:"↗";position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,12,17,0);color:var(--gold-br);font-size:1.4rem;opacity:0;transition:.4s var(--ease)} .gallery__item:hover::after{background:rgba(10,12,17,.55);opacity:1} .gallery__item img{transition:transform 1s var(--ease);filter:saturate(.95);width:100%;height:100%;object-fit:cover} .gallery__item:hover img{transform:scale(1.1);filter:saturate(1.1)} .gallery__follow{margin-top:2.4rem} /* =================================================================== FOOTER =================================================================== */ .closing{text-align:center;padding:clamp(5rem,12vw,10rem) var(--gut);background:radial-gradient(120% 140% at 50% 120%,rgba(200,168,106,.12),transparent 60%),var(--bg)} .closing .kicker{color:var(--gold);margin-bottom:1.4rem} .closing__title{font-family:var(--serif);font-weight:300;font-size:clamp(2.8rem,8vw,6.5rem);line-height:1;color:var(--cream)} .footer{background:linear-gradient(180deg,var(--bg-2),#06080c);color:var(--cream);border-top:1px solid var(--line)} .footer__cta{text-align:center;padding:clamp(4rem,10vw,8rem) var(--gut);border-bottom:1px solid var(--line-soft)} .footer__cta h2{font-size:clamp(2.6rem,7vw,6rem);margin-bottom:2rem;line-height:1} .footer__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;padding:clamp(3rem,6vw,5rem) var(--gut)} .footer__mark{font-family:var(--serif);font-size:2.4rem;letter-spacing:.22em;padding-left:.22em;margin-bottom:1rem;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .footer__brand p{color:var(--muted);max-width:30ch} .footer__col h5{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;font-family:var(--sans);font-weight:500} .footer__col p,.footer__col a{display:block;color:var(--faint);font-size:.92rem;margin-bottom:.6rem;transition:color .3s} .footer__col a:hover{color:var(--gold-br)} .footer__base{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:1.8rem var(--gut);border-top:1px solid var(--line-soft);font-size:.78rem;letter-spacing:.08em;color:var(--muted)} .footer__credit a{font-weight:500;letter-spacing:.14em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;transition:opacity .3s} .footer__credit a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width .4s var(--ease)} .footer__credit a:hover::after{width:100%} /* =================================================================== MODALS =================================================================== */ .modal{position:fixed;inset:0;z-index:1000;display:none} .modal.is-open{display:block} .modal__overlay{position:absolute;inset:0;background:rgba(4,6,10,.7);backdrop-filter:blur(10px);animation:fade .4s var(--ease)} .modal__dialog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(960px,92vw);max-height:92vh;overflow:auto;background:var(--bg-2);border-radius:22px;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-lg);animation:pop .5s var(--ease)} @keyframes pop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} .modal__close{position:absolute;top:1.1rem;right:1.3rem;z-index:5;font-size:1.8rem;line-height:1;width:42px;height:42px;border-radius:50%;color:var(--cream);background:rgba(255,255,255,.06);backdrop-filter:blur(8px);transition:.3s} .modal__close:hover{background:var(--gold-grad);color:#1a130a;transform:rotate(90deg)} /* Reserve modal */ .reserve{display:grid;grid-template-columns:.85fr 1.15fr} .reserve__media{position:relative;overflow:hidden} .reserve__media-text{position:absolute;left:0;bottom:0;padding:2rem;color:var(--cream);z-index:2} .reserve__media-text h3{font-size:1.9rem} .reserve__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,15,.2),rgba(8,10,15,.8))} .reserve__form{padding:clamp(2rem,4vw,3rem)} .reserve__step{display:none} .reserve__step.is-active{display:block;animation:fade .4s var(--ease)} .reserve__h{font-size:1.5rem;margin-bottom:1.6rem;color:var(--cream)} .seatgrid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} .seat{position:relative;display:flex;flex-direction:column;gap:.2rem;padding:1.3rem;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:.35s var(--ease)} .seat input{position:absolute;opacity:0} .seat__name{font-family:var(--serif);font-size:1.3rem;color:var(--cream)} .seat__name--vip{color:var(--gold)} .seat__desc{font-size:.82rem;color:var(--muted)} .seat:hover{box-shadow:inset 0 0 0 1px var(--gold);transform:translateY(-2px)} .seat:has(input:checked){box-shadow:inset 0 0 0 2px var(--gold),var(--glow-gold);background:rgba(200,168,106,.08)} .reserve__summary{display:block;margin-top:1rem;padding:1rem 1.2rem;border-radius:12px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line-soft);font-size:.9rem;color:var(--cream-2);line-height:1.7} .reserve__summary strong{color:var(--gold-br)} .reserve__nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2rem} .reserve__dots{display:flex;gap:.5rem} .reserve__dots span{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.3s} .reserve__dots span.is-active{background:var(--gold);width:22px;border-radius:10px} .reserve__done{padding:clamp(2.5rem,5vw,4rem);grid-column:1/-1;text-align:center} .reserve__done-mark{width:64px;height:64px;border-radius:50%;background:var(--gold-grad);color:#1a130a;font-size:1.8rem;display:grid;place-items:center;margin:0 auto 1.4rem;box-shadow:var(--glow-gold)} .reserve__done h3{font-size:2rem;margin-bottom:.8rem;color:var(--cream)} .reserve__done p{color:var(--cream-2);max-width:42ch;margin:0 auto 2rem} .reserve__done .btn{margin:0 .4rem} /* Lead modal */ .leadmodal{width:min(520px,92vw);padding:clamp(2rem,5vw,3rem)} .leadmodal .kicker{justify-content:flex-start} .leadmodal .leadform{box-shadow:none;padding:0;margin-top:1.4rem;background:transparent} .leadmodal__title{font-size:2rem;color:var(--cream)} /* =================================================================== AI CONCIERGE =================================================================== */ .concierge-fab{position:fixed;right:24px;bottom:24px;z-index:920;width:62px;height:62px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 36px rgba(37,211,102,.5);transition:transform .4s var(--ease)} .concierge-fab::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:pulse 2.4s infinite} .concierge-fab:hover{transform:scale(1.08)} .concierge-fab.is-hidden{transform:scale(0);opacity:0;pointer-events:none} .concierge{position:fixed;right:24px;bottom:24px;z-index:930;width:min(380px,92vw);height:min(620px,80vh);background:var(--bg-2);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-lg);transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;transition:all .45s var(--ease)} .concierge.is-open{transform:none;opacity:1;pointer-events:auto} .concierge__head{background:linear-gradient(135deg,var(--blue-deep),var(--bg-blue));color:var(--cream);padding:1.1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)} .concierge__id{display:flex;align-items:center;gap:.8rem} .concierge__avatar{width:42px;height:42px;border-radius:50%;background:var(--gold-grad);color:#1a130a;font-family:var(--serif);font-size:1.3rem;display:grid;place-items:center} .concierge__id strong{display:block;font-weight:500;letter-spacing:.04em} .concierge__status{font-size:.74rem;color:var(--cream-2);display:flex;align-items:center;gap:.4rem} .concierge__status i{width:7px;height:7px;border-radius:50%;background:#7CFC9A;display:inline-block;box-shadow:0 0 8px #7CFC9A} .concierge__close{font-size:1.6rem;color:var(--cream);width:34px;height:34px;border-radius:50%;transition:.3s} .concierge__close:hover{background:rgba(255,255,255,.12)} .concierge__body{flex:1;overflow-y:auto;padding:1.2rem;background:var(--bg);display:flex;flex-direction:column;gap:.7rem} .bubble{max-width:82%;padding:.8rem 1rem;border-radius:16px;font-size:.92rem;line-height:1.5;animation:fade .4s var(--ease)} .bubble--bot{background:var(--bg-3);color:var(--cream);align-self:flex-start;border-bottom-left-radius:4px;box-shadow:inset 0 0 0 1px var(--line-soft)} .bubble--bot b{color:var(--gold-br)} .bubble--user{background:var(--gold-grad);color:#1a130a;align-self:flex-end;border-bottom-right-radius:4px} .concierge__quick{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem} .concierge__quick button{font-size:.78rem;padding:.5rem .9rem;border-radius:100px;background:transparent;color:var(--gold-br);box-shadow:inset 0 0 0 1px var(--line);transition:.3s} .concierge__quick button:hover{background:var(--gold-grad);color:#1a130a;box-shadow:none} .concierge__typing{display:flex;gap:4px;align-self:flex-start;padding:.9rem 1rem;background:var(--bg-3);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line-soft)} .concierge__typing span{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:typing 1.2s infinite} .concierge__typing span:nth-child(2){animation-delay:.2s} .concierge__typing span:nth-child(3){animation-delay:.4s} @keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} .concierge__input{display:flex;align-items:center;gap:.6rem;padding:.8rem;border-top:1px solid var(--line)} .concierge__input input{flex:1;border:none;padding:.7rem 1rem;background:var(--bg-3);border-radius:100px;color:var(--cream)} .concierge__input input::placeholder{color:var(--muted)} .concierge__input input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--gold)} .concierge__input button{width:42px;height:42px;border-radius:50%;background:var(--gold-grad);color:#1a130a;display:grid;place-items:center;flex-shrink:0;transition:.3s} .concierge__input button:hover{transform:scale(1.06)} .concierge__handoff{display:block;text-align:center;padding:.7rem;font-size:.8rem;letter-spacing:.06em;color:#25D366;border-top:1px solid var(--line);transition:.3s} .concierge__handoff:hover{background:#25D366;color:#fff} /* =================================================================== SCROLL REVEAL =================================================================== */ .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.is-in{opacity:1;transform:none} /* =================================================================== REVIEWS =================================================================== */ .reviews__meta{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.4rem} .reviews__stars-overall{color:var(--gold);font-size:1.5rem;letter-spacing:4px} .reviews__source{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* moving marquee of guest reviews */ .reviews__marquee{ position:relative; margin-top:3.5rem; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .reviews__track{ display:flex; width:max-content; animation:reviewsScroll 55s linear infinite; will-change:transform; } .reviews__marquee:hover .reviews__track{animation-play-state:paused} .review-card{ flex:0 0 auto; width:clamp(290px,32vw,380px); margin-right:1.6rem; background:var(--bg-3); border-radius:18px; padding:2rem; box-shadow:inset 0 0 0 1px var(--line),var(--shadow-md); display:flex; flex-direction:column; gap:1.4rem; transition:transform .35s var(--ease),box-shadow .35s var(--ease); } .review-card:hover{ transform:translateY(-6px) scale(1.015); box-shadow:inset 0 0 0 1px rgba(200,168,106,.45),0 30px 70px rgba(0,0,0,.55),0 0 32px rgba(200,168,106,.12); } @keyframes reviewsScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .review-card__top{display:flex;align-items:center;justify-content:space-between} .review-card__stars{color:var(--gold);font-size:1rem;letter-spacing:3px} .review-card__g{ width:26px;height:26px;border-radius:50%; background:var(--bg);border:1px solid var(--line); display:flex;align-items:center;justify-content:center; font-size:.7rem;font-weight:700;color:var(--gold);letter-spacing:0; } .review-card__text{ font-family:var(--serif); font-size:1.05rem; line-height:1.8; color:var(--cream-2); font-style:italic; flex:1; } .review-card__foot{ display:flex; flex-direction:column; gap:.85rem; padding-top:1.2rem; border-top:1px solid var(--line); } .review-card__author{display:flex;align-items:center;gap:.85rem} .review-card__avatar{ width:40px;height:40px;border-radius:50%;flex-shrink:0; background:var(--gold-grad); color:#0a0c11; display:flex;align-items:center;justify-content:center; font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.04em; } .review-card__name{display:block;font-weight:500;color:var(--cream);font-size:.92rem} .review-card__date{display:block;font-size:.74rem;color:var(--muted);margin-top:.15rem} .review-card__scores{display:flex;gap:1.1rem;flex-wrap:wrap} .review-card__scores span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .review-card__scores em{color:var(--gold-br);font-style:normal;font-weight:600} /* =================================================================== RESPONSIVE =================================================================== */ @media (max-width:1024px){ .menu__layout,.catering__grid{grid-template-columns:1fr} .menu__feature{position:static;max-width:480px} .gallery__grid{grid-template-columns:repeat(3,1fr)} .exp-grid,.discover__grid,.events__grid{grid-template-columns:repeat(2,1fr)} .exp-card--wide{grid-column:span 2} .club__cards{grid-template-columns:repeat(2,1fr)} } @media (max-width:768px){ .nav__links{display:none} .nav__cta{display:none} .nav__burger{display:flex} .atmos,.events__private,.creator,.discover__map,.reserve{grid-template-columns:1fr} .reserve__media{min-height:200px} .creator__media,.events__private-media{min-height:300px} .exp-grid,.discover__grid,.events__grid,.club__cards{grid-template-columns:1fr} .exp-card--wide{grid-column:span 1;aspect-ratio:3/4} .footer__inner{grid-template-columns:1fr 1fr} .field-row,.seatgrid{grid-template-columns:1fr} .hero__scroll{display:none} .gallery__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px} .gallery__item--wide{grid-column:span 2} .upcoming-event{grid-template-columns:1fr} .upcoming-event__poster{width:100%;height:220px} .upcoming-event__body{flex-direction:column;padding:1.4rem} } /* ── Host an Event — clean single-column layout on phones & tablets ── */ @media (max-width:900px){ #host .events__private{grid-template-columns:1fr;margin-top:1.5rem;border-radius:16px} #host .events__private-media{order:-1;min-height:0;aspect-ratio:16/9} #host .events__private-media img{transform:none!important} #host .events__private-body{padding:clamp(1.25rem,4vw,2.4rem)} #host .events__private-body h2,#host .events__private-body h3{font-size:clamp(1.7rem,5.5vw,2.6rem);margin-bottom:1rem} #host .events__private-body>p:not(.kicker){margin-bottom:1.4rem} #host .leadform{background:transparent;box-shadow:none;padding:0;margin-top:1.2rem!important} #host .leadform .field-row{grid-template-columns:1fr} #host .leadform .field input, #host .leadform .field textarea{ border:1px solid var(--line);border-radius:10px; padding:.85rem 1rem;background:rgba(255,255,255,.05); font-size:1rem; /* prevents Android auto-zoom on focus */ width:100%;max-width:100%;box-sizing:border-box; min-height:48px; /* Google touch target minimum */ -webkit-appearance:none;appearance:none; } #host .leadform .field input:focus, #host .leadform .field textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.07)} #host .leadform .btn{width:100%;justify-content:center;text-align:center} } /* ── Very small phones (360 px and below — Infinix Hot 10, Galaxy A series) ── */ @media (max-width:480px){ #host .events__private{border-radius:12px;margin-top:1rem} #host .events__private-body{padding:1.1rem} #host .events__private-body h2{font-size:1.7rem} #host .leadform .field input, #host .leadform .field textarea{padding:.75rem .875rem} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} .reveal,.reveal-word,.reveal-line>span{opacity:1!important;transform:none!important} body::after{display:none} /* no auto-scroll: let guests swipe the reviews instead */ .reviews__track{animation:none!important;transform:none!important} .reviews__marquee{overflow-x:auto;-webkit-overflow-scrolling:touch} }