/* Makau — AVIARY. Deep teal off the glazed planters, raffia straw, Italiana over Manrope. Everything readable before any script runs. */ :root{ --deep:#0B2123; --pool:#10302F; --pool-2:#17403D; --bone:#F2EAD9; --clay:#D8BBA6; --straw:#C8A876; --gold:#C9A227; --terra:#C46B45; --line:rgba(242,234,217,.15); --line-soft:rgba(242,234,217,.08); --disp:'Italiana',Georgia,serif; --sans:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif; } *,*::before,*::after{box-sizing:border-box} /* Horizontal overflow is clipped on only, and with clip, not hidden. hidden would make itself the scroll container and every ScrollTrigger would go dead watching a window that never moves. And it cannot go on : with overflow-x:clip there, overflow-y:visible computes to clip too, and the viewport stops scrolling entirely. */ html{scroll-behavior:smooth} /* While Lenis drives the scroll, native smooth-behaviour must yield: Lenis writes scrollTop every frame, and a browser that smooth-animates each of those writes never actually leaves 0. Lenis adds this class itself. */ html.lenis{scroll-behavior:auto} body{margin:0;background:var(--deep);color:var(--clay);font-family:var(--sans); font-size:1.02rem;line-height:1.68;-webkit-font-smoothing:antialiased; overflow-x:clip} /* The cage: faint verticals, the rhythm of the jaali, behind everything. */ body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(52vw 38vh at 78% -6%,rgba(200,168,118,.10),transparent 68%), radial-gradient(44vw 30vh at 6% 110%,rgba(63,107,107,.22),transparent 70%), repeating-linear-gradient(90deg,var(--line-soft) 0 1px,transparent 1px 92px)} img{max-width:100%;height:auto;display:block} a{color:inherit} ::selection{background:var(--straw);color:var(--deep)} :focus-visible{outline:2.5px solid var(--straw);outline-offset:3px} h1,h2,h3{font-family:var(--disp);font-weight:400;color:var(--bone); line-height:1.04;margin:0 0 .6em;letter-spacing:.01em} h1{font-size:clamp(2.9rem,1.4rem + 7vw,6.4rem)} h2{font-size:clamp(2rem,1.2rem + 3.4vw,3.7rem)} h3{font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem)} p{margin:0 0 1rem} main{position:relative;z-index:1} .skip{position:absolute;left:-999px;top:0;background:var(--straw); color:var(--deep);padding:.6rem 1rem;z-index:99;border-radius:0 0 8px 0} .skip:focus{left:0} .wrap{max-width:76rem;margin-inline:auto; padding:clamp(3.2rem,9vw,7rem) clamp(1.25rem,4.5vw,3.25rem)} .eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.3em; text-transform:uppercase;color:var(--straw);margin:0 0 1.1rem} .lede{font-size:clamp(1.06rem,1rem + .5vw,1.3rem);max-width:56ch; color:var(--clay)} .note{font-size:.85rem;color:rgba(216,187,166,.72);max-width:60ch} /* ---- top bar ------------------------------------------------------------ */ .top{position:sticky;top:0;z-index:40;display:flex;align-items:center; gap:1.4rem;padding:.85rem clamp(1.25rem,4.5vw,3.25rem); background:color-mix(in srgb,var(--deep) 84%,transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft)} .lockup{display:inline-flex;align-items:center;gap:.55rem; text-decoration:none;margin-right:auto} .lockup-mark{width:1.55rem;height:1.8rem;color:var(--straw)} .lockup-word{font-family:var(--disp);font-size:1.5rem;color:var(--bone); letter-spacing:.14em;text-transform:uppercase} .top nav{display:flex;gap:1.35rem} .top nav a{font-size:.82rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;text-decoration:none;color:var(--clay); padding:.35rem 0;border-bottom:1px solid transparent} .top nav a:hover{color:var(--bone)} .top nav a[aria-current="page"]{color:var(--straw); border-bottom-color:var(--straw)} .top .pill{margin-left:.4rem} /* Checkbox-driven nav toggle — no JavaScript required. The checkbox sits between the lockup and the nav so :checked can reach both the icon (via the label) and the panel (via the nav) with plain sibling selectors. */ .nav-toggle-input{position:absolute;opacity:0;width:1px;height:1px; pointer-events:none} .nav-toggle{display:none;cursor:pointer;width:2.6rem;height:2.6rem; align-items:center;justify-content:center;margin-left:.2rem;padding:0; flex:none} .nav-toggle svg{width:1.6rem;height:1.6rem;display:block;color:var(--bone)} .nav-toggle .bar{transition:transform .3s ease,opacity .2s ease; transform-origin:center} .nav-toggle-input:focus-visible ~ .nav-toggle{outline:2.5px solid var(--straw); outline-offset:2px} @media (max-width:880px){ .top{flex-wrap:wrap;gap:.6rem .9rem;padding-block:.7rem} .nav-toggle{display:flex;order:2} .top .pill{display:none} .top .pill-btn{order:3} .top nav{order:4;flex-basis:100%;width:100%;display:flex; flex-direction:column;gap:0;max-height:0;overflow:hidden; transition:max-height .35s ease} .nav-toggle-input:checked ~ nav{max-height:70vh;overflow-y:auto} .top nav a{padding:.85rem .1rem;border-bottom:1px solid var(--line-soft)} .nav-toggle-input:checked ~ .nav-toggle .bar-top{ transform:translateY(6px) rotate(45deg)} .nav-toggle-input:checked ~ .nav-toggle .bar-mid{opacity:0} .nav-toggle-input:checked ~ .nav-toggle .bar-bot{ transform:translateY(-6px) rotate(-45deg)} } [data-clock]{font-size:.74rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;padding:.42rem .85rem;border-radius:999px; border:1px solid var(--line);color:var(--clay);white-space:nowrap} [data-clock][data-open="true"]{color:var(--straw);border-color:var(--straw)} /* The clock pill and the Book-a-table button sit side by side in the top bar and must read as the same height, even though .btn's own padding is tuned for its larger use elsewhere on the page. */ .top .pill,.top .pill-btn{height:2.7rem;padding-block:0; display:inline-flex;align-items:center} /* ---- buttons ------------------------------------------------------------ */ .actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center; margin-top:1.9rem} .btn{display:inline-block;font-weight:700;font-size:.86rem; letter-spacing:.14em;text-transform:uppercase;text-decoration:none; padding:1rem 1.9rem;border-radius:999px;border:1px solid var(--straw); color:var(--straw);transition:background .3s,color .3s} .btn:hover{background:var(--straw);color:var(--deep)} .btn.solid{background:var(--straw);color:var(--deep)} .btn.solid:hover{background:var(--bone);border-color:var(--bone)} /* ---- hero --------------------------------------------------------------- */ .hero{position:relative;min-height:calc(100svh - 4.5rem);display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(1.5rem,4vw,4rem);align-items:center} .hero-copy{position:relative;z-index:2} .hero h1{margin-bottom:.4em} .hero-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-size:.85rem; color:rgba(216,187,166,.85);margin-top:1.2rem} .hero-art{position:relative} .arch{position:relative;overflow:hidden; border-radius:50% 50% 14px 14px / 34% 34% 14px 14px; border:1px solid var(--line)} .arch img{width:100%;height:100%;object-fit:cover} .hero-art .arch{aspect-ratio:4/5;max-height:88vh} @media (max-width:880px){ .hero{grid-template-columns:1fr;min-height:0; padding-top:clamp(2.2rem,7vw,4rem)} .hero-art .arch{max-height:56vh} } /* ---- the dust field ----------------------------------------------------- */ /* particles.js paints into this. Purely decorative, behind everything, ignoring the pointer. Empty with no JavaScript, no CDN, or prefers-reduced-motion — the page loses nothing but atmosphere. */ #fx{position:fixed;inset:0;z-index:0;pointer-events:none} #fx canvas{display:block;width:100%;height:100%} /* ---- figures band ------------------------------------------------------- */ .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--line-soft);border-block:1px solid var(--line-soft)} .fig{background:var(--deep);padding:clamp(1.4rem,3vw,2.6rem) 1rem; text-align:center} .fig b{display:block;font-family:var(--disp);font-weight:400; font-size:clamp(2rem,1.2rem + 3vw,3.6rem);color:var(--bone); line-height:1.05} .fig span{font-size:.74rem;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--straw)} @media (max-width:720px){.figs{grid-template-columns:1fr 1fr}} /* ---- room / duet sections ---------------------------------------------- */ .duet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.6rem,4vw,4.5rem);align-items:center} .duet.flip>.duet-copy{order:2} .duet .arch{aspect-ratio:4/5} @media (max-width:880px){ .duet{grid-template-columns:1fr} .duet.flip>.duet-copy{order:0} } .perchlist{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.9rem} .perchlist li{display:flex;gap:.8rem;align-items:baseline} .perchlist b{color:var(--bone);font-weight:600;white-space:nowrap} .perchlist svg{width:1rem;height:.7rem;flex:none;color:var(--straw); transform:translateY(.05rem)} /* ---- full-bleed night band ---------------------------------------------- */ .bleed{position:relative;overflow:hidden;min-height:88svh;display:grid; align-items:end} .bleed>img{position:absolute;inset:-12% 0;width:100%;height:124%; object-fit:cover;z-index:0} .bleed::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(11,33,35,.72),rgba(11,33,35,.18) 42%, rgba(11,33,35,.86) 88%)} .bleed .wrap{position:relative;z-index:2;width:100%} .bleed h2,.bleed .lede{text-shadow:0 2px 22px rgba(0,0,0,.45)} /* ---- kitchen teaser / dish rows ----------------------------------------- */ .rows{list-style:none;margin:2rem 0 0;padding:0; border-top:1px solid var(--line-soft)} .rows li{display:grid;grid-template-columns:3.4rem 1fr auto;gap:1.2rem; align-items:baseline;padding:1.35rem .2rem; border-bottom:1px solid var(--line-soft);transition:padding-left .35s} .rows li:hover{padding-left:.9rem} .rows .no{font-family:var(--disp);font-size:1.25rem;color:var(--straw)} .rows .dish{font-family:var(--disp);color:var(--bone); font-size:clamp(1.5rem,1.1rem + 2vw,2.6rem);line-height:1.1} .rows .tag{font-size:.72rem;font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--straw)} @media (max-width:640px){.rows li{grid-template-columns:2.2rem 1fr} .rows .tag{grid-column:2}} .chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem; padding:0;list-style:none} .chips li{border:1px solid var(--line);border-radius:999px; padding:.55rem 1.15rem;font-size:.86rem;color:var(--clay)} .chips li b{color:var(--bone);font-weight:600} /* ---- marquee ------------------------------------------------------------ */ .mq{overflow:hidden;border-block:1px solid var(--line-soft); padding:1.05rem 0;white-space:nowrap} .mq-track{display:inline-flex;gap:2.6rem;will-change:transform; padding-right:2.6rem} .mq-track span{font-family:var(--disp); font-size:clamp(1.5rem,1rem + 2.4vw,2.8rem);color:var(--bone);opacity:.9} .mq-track i{font-style:normal;color:var(--straw)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap} /* ---- gallery of plates -------------------------------------------------- */ .plates{display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,3vw,2.4rem);margin-top:2.4rem} .plate .arch{aspect-ratio:4/3} .plate figcaption{margin-top:.8rem;font-size:.92rem;max-width:44ch} .plate figcaption b{display:block;font-size:.72rem;font-weight:700; letter-spacing:.24em;text-transform:uppercase;color:var(--straw); margin-bottom:.3rem} @media (max-width:720px){.plates{grid-template-columns:1fr}} /* ---- quotes ------------------------------------------------------------- */ .quotes{display:grid;gap:clamp(1.4rem,3vw,2.4rem); grid-template-columns:repeat(3,1fr);margin-top:2.2rem} .quotes blockquote{margin:0;padding:1.6rem;border:1px solid var(--line-soft); border-radius:14px;background:color-mix(in srgb,var(--pool) 55%,transparent)} .quotes p{font-family:var(--disp);font-size:1.35rem;line-height:1.3; color:var(--bone)} .quotes cite{font-style:normal;font-size:.78rem;letter-spacing:.14em; text-transform:uppercase;color:var(--straw)} @media (max-width:880px){.quotes{grid-template-columns:1fr}} /* ---- the priced menu ----------------------------------------------------- */ .mgroups{display:grid;gap:clamp(2.2rem,4vw,3.2rem);margin-top:2.4rem} .mgroup h3{margin-bottom:.9rem} .mnote{font-size:.82rem;color:rgba(216,187,166,.7);margin:-.5rem 0 1rem} .mlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-soft)} .mitem{display:flex;justify-content:space-between;align-items:baseline; gap:1.2rem;padding:.85rem .1rem;border-bottom:1px solid var(--line-soft)} .mname{display:flex;flex-direction:column;gap:.2rem;max-width:66ch} .mname b{color:var(--bone);font-weight:600;font-size:1.02rem} .mdesc{font-size:.82rem;color:rgba(216,187,166,.7)} .mprice{flex:none;font-family:var(--disp);font-size:1.15rem;color:var(--straw); white-space:nowrap} .mprice-none{font-family:var(--sans);font-size:.72rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:rgba(216,187,166,.55)} /* ---- gallery -------------------------------------------------------------- */ .gallery-wrap{padding-top:0} .gallery{columns:2;column-gap:clamp(.7rem,2vw,1.2rem)} .gallery figure{break-inside:avoid;margin:0 0 clamp(.7rem,2vw,1.2rem)} .gallery .gtile{border-radius:10px;overflow:hidden} .gallery img{width:100%;height:auto;display:block;transition:transform .5s} .gallery figure:hover img{transform:scale(1.04)} @media (min-width:720px){.gallery{columns:3}} @media (min-width:1180px){.gallery{columns:4}} /* ---- events ------------------------------------------------------------- */ .packs{display:grid;grid-template-columns:1fr 1fr; gap:clamp(1.2rem,3vw,2.2rem);margin-top:2rem} .pack{border:1px solid var(--line);border-radius:16px; padding:clamp(1.5rem,3vw,2.4rem); background:color-mix(in srgb,var(--pool) 60%,transparent)} .pack h3{margin-bottom:.2em} .pack .amt{font-family:var(--disp);font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem); color:var(--straw);line-height:1.1} .pack .per{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase; color:var(--clay)} @media (max-width:720px){.packs{grid-template-columns:1fr}} .kv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line-soft);border:1px solid var(--line-soft); border-radius:14px;overflow:hidden;margin-top:2rem} .kv div{background:var(--deep);padding:1.3rem 1.2rem} .kv b{display:block;font-size:.72rem;font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--straw);margin-bottom:.35rem} .kv span{color:var(--bone)} @media (max-width:720px){.kv{grid-template-columns:1fr}} /* ---- visit -------------------------------------------------------------- */ .hours{width:100%;border-collapse:collapse;margin-top:1.6rem; font-variant-numeric:tabular-nums} .hours th,.hours td{text-align:left;padding:.85rem .2rem; border-bottom:1px solid var(--line-soft)} .hours th{font-weight:600;color:var(--bone)} .hours tr.late th,.hours tr.late td{color:var(--straw)} .hours td{text-align:right} address{font-style:normal;color:var(--bone); font-size:clamp(1.1rem,1rem + .8vw,1.5rem);line-height:1.5} /* ---- footer ------------------------------------------------------------- */ footer{border-top:1px solid var(--line-soft);position:relative;z-index:1; background:color-mix(in srgb,var(--pool) 38%,transparent)} footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr; gap:clamp(1.6rem,4vw,3.5rem); padding-block:clamp(2.4rem,6vw,4.5rem)} footer h2{font-size:1.9rem} footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem} footer a{text-decoration-color:var(--straw)} footer .fine{grid-column:1/-1;font-size:.74rem; color:rgba(216,187,166,.55);border-top:1px solid var(--line-soft); padding-top:1.4rem;margin:0} @media (max-width:880px){footer .wrap{grid-template-columns:1fr}} /* ---- motion gate -------------------------------------------------------- Hidden states exist ONLY under mk-motion, which app.js sets after both CDN imports resolve. Dead CDN or no JS: nothing below applies, page complete. */ .mk-motion [data-rise]{opacity:0;transform:translateY(34px)} .mk-motion [data-stagger]>*{opacity:0;transform:translateY(26px)} .mk-motion [data-split] .w-word{display:inline-block;white-space:nowrap} .mk-motion [data-split] .w-word>span{display:inline-block;opacity:0; transform:translateY(.55em) rotate(4deg)} .mk-motion [data-arch]{clip-path:inset(46% 8% 0 8% round 999px)} .mk-motion [data-arch] img{transform:scale(1.16)} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important} }