/* ============================================================ TM Events Waitering Services — design system Two palettes via [data-theme]: prestige = Black & Gold (default) signature = his brand Blue & White Colour flip = change data-theme on . Nothing else. ============================================================ */ :root{ /* type */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* spacing / rhythm */ --wrap: 1200px; --gutter: clamp(20px, 5vw, 64px); --section-y: clamp(64px, 9vw, 128px); --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06); --shadow-md: 0 10px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08); --ease: cubic-bezier(.2,.7,.2,1); } /* -------- PRESTIGE (Black & Gold) : default -------- */ :root, :root[data-theme="prestige"]{ --bg: #F7F3EA; /* warm ivory */ --surface: #FFFFFF; --surface-2: #F1EADC; /* card tint */ --ink: #1A1813; /* near-black warm */ --ink-soft: #4A463D; --muted: #6E685B; --line: #E4DBC8; --accent: #B0872F; /* champagne gold */ --accent-2: #C8A24A; --on-accent: #14120C; --dark: #17150F; /* footer / dark bands */ --on-dark: #F4EEDF; --on-dark-muted:#B8AE97; --hero-scrim: linear-gradient(90deg, rgba(12,10,6,.82) 0%, rgba(12,10,6,.60) 42%, rgba(12,10,6,.18) 100%); --hero-scrim-b: linear-gradient(0deg, rgba(12,10,6,.78) 0%, rgba(12,10,6,0) 55%); --logo-filter: none; } /* -------- SIGNATURE (his Blue & White) -------- */ :root[data-theme="signature"]{ --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #EFF4FA; --ink: #0C1E33; --ink-soft: #274763; --muted: #5B7186; --line: #DBE6F1; --accent: #0461AF; /* his brand blue */ --accent-2: #0A78D0; --on-accent: #FFFFFF; --dark: #0A1B2E; --on-dark: #EAF1F8; --on-dark-muted:#9FB4C8; --hero-scrim: linear-gradient(90deg, rgba(6,17,31,.84) 0%, rgba(6,17,31,.58) 42%, rgba(6,20,40,.15) 100%); --hero-scrim-b: linear-gradient(0deg, rgba(6,17,31,.80) 0%, rgba(6,17,31,0) 55%); --logo-filter: none; } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:clamp(15px,1.03vw,17px); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%; display:block} a{color:inherit; text-decoration:none} h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.01em; margin:0} h1{font-size:clamp(2.3rem,6vw,4.4rem)} h2{font-size:clamp(1.9rem,4vw,3rem)} h3{font-size:clamp(1.25rem,2vw,1.6rem)} p{margin:0 0 1rem} .wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)} .eyebrow{font-family:var(--font-body); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:.74rem; color:var(--accent)} .lede{font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--ink-soft); max-width:60ch} .section{padding-block:var(--section-y)} .center{text-align:center} .muted{color:var(--muted)} /* focus visibility */ :focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px} /* ---------------- Buttons ---------------- */ .btn{display:inline-flex; align-items:center; gap:.6em; font-weight:600; font-size:.98rem; padding:.9em 1.5em; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s; will-change:transform} .btn svg{width:1.15em; height:1.15em} .btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-sm)} .btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)} .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)} .btn-ghost.on-dark{color:var(--on-dark); border-color:rgba(255,255,255,.28)} .btn-ghost:hover{border-color:var(--accent); color:var(--accent)} .btn-wa{background:#25D366; color:#0a2e17} .btn-wa:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)} .btn-lg{padding:1.05em 1.8em; font-size:1.05rem} /* ---------------- Header ---------------- */ .site-header{position:sticky; top:0; z-index:60; transition:background .3s, box-shadow .3s, border-color .3s; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent} .site-header.scrolled{background:color-mix(in srgb, var(--bg) 94%, transparent); border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(0,0,0,.02)} .nav{display:flex; align-items:center; gap:1.2rem; min-height:72px} .brand{display:flex; align-items:center; gap:.6rem; margin-right:auto} .brand img{height:38px; width:auto; filter:var(--logo-filter)} .nav-links{display:flex; gap:.35rem; align-items:center} .nav-links a{padding:.5rem .8rem; border-radius:999px; font-weight:500; font-size:.95rem; color:var(--ink-soft); transition:color .2s, background .2s} .nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent)} .nav .btn{white-space:nowrap} .nav-toggle{display:none; background:none; border:0; padding:.4rem; cursor:pointer; color:var(--ink)} .nav-toggle svg{width:28px;height:28px} .mobile-drawer{display:none} .scrim{display:none} @media (max-width: 900px){ .nav-links, .nav .btn.header-cta{display:none} .nav-toggle{display:inline-flex} .mobile-drawer{position:fixed; inset:0 0 0 auto; width:min(84vw,340px); background:var(--surface); transform:translateX(102%); transition:transform .35s var(--ease); z-index:80; padding:88px 26px 26px; box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:.4rem; border-left:1px solid var(--line)} .mobile-drawer.open{transform:none} .mobile-drawer a{padding:.9rem .4rem; font-size:1.15rem; font-family:var(--font-display); border-bottom:1px solid var(--line)} .mobile-drawer .btn{margin-top:1rem; justify-content:center} .scrim{display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .3s; z-index:70} .scrim.open{opacity:1; pointer-events:auto} } /* ---------------- Hero ---------------- */ .hero{position:relative; min-height:min(92vh,860px); display:flex; align-items:flex-end; overflow:hidden; color:var(--on-dark)} .hero-media{position:absolute; inset:0; z-index:-2} .hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 32%; animation:heroZoom 18s var(--ease) both} @keyframes heroZoom{from{transform:scale(1.08)} to{transform:scale(1)}} .hero::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--hero-scrim)} .hero::after{content:""; position:absolute; inset:0; z-index:-1; background:var(--hero-scrim-b)} .hero-inner{padding-block:clamp(40px,7vw,84px); max-width:760px} .hero .eyebrow{color:var(--accent-2)} .hero h1{color:#fff; margin:.5rem 0 1rem; text-shadow:0 2px 30px rgba(0,0,0,.35)} .hero h1 em{font-style:italic; color:var(--accent-2)} .hero-sub{font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--on-dark); max-width:52ch; margin-bottom:1.8rem; opacity:.95} .hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center} .hero-trust{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.16); font-size:.9rem; color:var(--on-dark-muted)} .hero-trust b{color:#fff; font-weight:600} @media(prefers-reduced-motion:reduce){ .hero-media img{animation:none; transform:none} } /* ---------------- Trust strip ---------------- */ .pillars{background:var(--dark); color:var(--on-dark)} .pillars .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,40px); padding-block:clamp(30px,4vw,48px)} .pillar{display:flex; gap:.9rem; align-items:flex-start} .pillar .ico{flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--accent-2)} .pillar .ico svg{width:24px;height:24px} .pillar h3{font-family:var(--font-body); font-size:1.02rem; font-weight:700; color:#fff; margin-bottom:.15rem} .pillar p{margin:0; font-size:.92rem; color:var(--on-dark-muted)} @media(max-width:760px){ .pillars .wrap{grid-template-columns:1fr; gap:18px} } /* ---------------- Section head ---------------- */ .sec-head{max-width:64ch; margin-bottom:clamp(28px,4vw,52px)} .sec-head.center{margin-inline:auto} .sec-head h2{margin:.4rem 0 .7rem} /* ---------------- Services ---------------- */ .svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(16px,2vw,24px)} .svc{position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:380px; display:flex; align-items:flex-end; color:#fff; box-shadow:var(--shadow-sm); isolation:isolate} .svc img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .7s var(--ease)} .svc::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(10,8,4,.9) 0%, rgba(10,8,4,.4) 45%, rgba(10,8,4,.06) 100%)} .svc:hover img{transform:scale(1.06)} .svc-body{padding:1.4rem} .svc-body .num{font-family:var(--font-display); font-size:.85rem; color:var(--accent-2); letter-spacing:.1em} .svc-body h3{color:#fff; margin:.2rem 0 .4rem; font-size:1.45rem} .svc-body p{margin:0; color:rgba(255,255,255,.86); font-size:.94rem} .svc-more{margin-top:1.6rem; font-size:.95rem; color:var(--muted)} .svc-more b{color:var(--ink)} /* ---------------- Why / How ---------------- */ .split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center} @media(max-width:860px){ .split{grid-template-columns:1fr; gap:32px} } .split-media{position:relative} .split-media img{border-radius:var(--radius-lg); box-shadow:var(--shadow-md); width:100%; object-fit:cover; aspect-ratio:4/5} .badge-float{position:absolute; bottom:-18px; left:-18px; background:var(--surface); color:var(--ink); border-radius:16px; padding:.9rem 1.1rem; box-shadow:var(--shadow-md); border:1px solid var(--line); max-width:210px} .badge-float b{display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--accent); line-height:1} .badge-float span{font-size:.82rem; color:var(--muted)} .steps{list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:1rem} .steps li{display:flex; gap:1rem; align-items:flex-start} .steps .n{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:color-mix(in srgb,var(--accent) 14%, transparent); color:var(--accent); font-size:.95rem} .steps h4{font-family:var(--font-body); font-weight:700; font-size:1rem; margin-bottom:.1rem} .steps p{margin:0; font-size:.92rem; color:var(--muted)} /* ---------------- Gallery ---------------- */ .masonry{columns: 3 260px; column-gap:14px} .masonry a{display:block; margin-bottom:14px; border-radius:12px; overflow:hidden; break-inside:avoid; box-shadow:var(--shadow-sm); position:relative} .masonry img{width:100%; transition:transform .6s var(--ease)} .masonry a:hover img{transform:scale(1.05)} .gallery-cta{margin-top:2rem; text-align:center} /* ---------------- Testimonials ---------------- */ .quotes{background:var(--dark); color:var(--on-dark)} .quote-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(16px,2vw,24px)} .quote{background:color-mix(in srgb, #fff 5%, transparent); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:1.6rem; display:flex; flex-direction:column} .quote .stars{color:var(--accent-2); letter-spacing:2px; margin-bottom:.7rem} .quote p{color:var(--on-dark); font-size:1.02rem; margin:0 0 1rem} .quote .who{margin-top:auto; font-weight:600; color:#fff} .quote .who span{display:block; font-weight:400; font-size:.85rem; color:var(--on-dark-muted)} /* ---------------- International band ---------------- */ .intl{background: linear-gradient(color-mix(in srgb,var(--accent) 92%, #000 8%), color-mix(in srgb,var(--accent) 92%, #000 8%)); color:var(--on-accent)} .intl .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,56px); align-items:center; padding-block:clamp(48px,6vw,80px)} .intl h2{color:var(--on-accent)} .intl p{color:color-mix(in srgb, var(--on-accent) 88%, transparent)} .intl .flags{display:flex; flex-wrap:wrap; gap:.5rem; margin:.2rem 0 1.4rem} .intl .flags span{border:1px solid color-mix(in srgb,var(--on-accent) 45%, transparent); color:var(--on-accent); padding:.35em .9em; border-radius:999px; font-size:.85rem; font-weight:500} .intl .card{background:color-mix(in srgb,#000 14%, transparent); border:1px solid color-mix(in srgb,#fff 22%,transparent); border-radius:var(--radius-lg); padding:1.6rem} .intl .card ul{list-style:none; margin:0; padding:0; display:grid; gap:.8rem} .intl .card li{display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem} .intl .card li svg{flex:none; width:20px;height:20px; margin-top:2px} @media(max-width:820px){ .intl .wrap{grid-template-columns:1fr} } /* ---------------- Booking / CTA teaser ---------------- */ .cta-band{position:relative; overflow:hidden; color:var(--on-dark); text-align:center} .cta-band .bgimg{position:absolute; inset:0; z-index:-2} .cta-band .bgimg img{width:100%;height:100%;object-fit:cover; object-position:center 40%} .cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(10,8,4,.8),rgba(10,8,4,.86))} .cta-band .wrap{padding-block:clamp(64px,8vw,110px)} .cta-band h2{color:#fff; max-width:18ch; margin:.4rem auto .8rem} .cta-band p{color:var(--on-dark-muted); max-width:52ch; margin-inline:auto} .cta-actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem} /* ---------------- Forms (book page) ---------------- */ .form-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(20px,3vw,36px); box-shadow:var(--shadow-sm)} .field{margin-bottom:1.1rem} .field label{display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem} .field input, .field select, .field textarea{width:100%; padding:.85em 1em; border:1.5px solid var(--line); border-radius:12px; font:inherit; color:var(--ink); background:var(--bg); transition:border-color .2s, box-shadow .2s} .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%, transparent); outline:none} .field textarea{min-height:110px; resize:vertical} .row-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem} @media(max-width:560px){ .row-2{grid-template-columns:1fr} } .chips{display:flex; flex-wrap:wrap; gap:.6rem} .chip{position:relative} .chip input{position:absolute; opacity:0; inset:0; cursor:pointer} .chip span{display:inline-flex; align-items:center; gap:.4rem; padding:.6em 1em; border:1.5px solid var(--line); border-radius:999px; font-weight:500; font-size:.92rem; cursor:pointer; transition:all .2s} .chip input:checked + span{background:var(--accent); color:var(--on-accent); border-color:var(--accent)} .chip input:focus-visible + span{outline:3px solid var(--accent); outline-offset:2px} .form-note{font-size:.85rem; color:var(--muted); margin-top:.4rem} /* ---------------- FAQ ---------------- */ .faq{max-width:820px; margin-inline:auto} .faq details{border-bottom:1px solid var(--line); padding:1.1rem 0} .faq summary{font-family:var(--font-display); font-size:1.15rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; color:var(--accent); font-size:1.5rem; transition:transform .3s} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{margin:.8rem 0 0; color:var(--ink-soft)} /* ---------------- Page hero (sub pages) ---------------- */ .page-hero{position:relative; color:var(--on-dark); padding-block:clamp(96px,13vw,160px) clamp(40px,5vw,64px); overflow:hidden} .page-hero .bgimg{position:absolute; inset:0; z-index:-2} .page-hero .bgimg img{width:100%;height:100%;object-fit:cover; object-position:center 35%} .page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,8,4,.82),rgba(10,8,4,.5))} .page-hero h1{color:#fff} .page-hero p{color:var(--on-dark); max-width:56ch; margin-top:.6rem; opacity:.95} .crumbs{font-size:.85rem; color:var(--on-dark-muted); margin-bottom:.6rem} .crumbs a:hover{color:#fff} /* ---------------- Footer ---------------- */ .site-footer{background:var(--dark); color:var(--on-dark); padding-block:clamp(48px,6vw,72px) 0} .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,4vw,56px)} @media(max-width:760px){ .foot-grid{grid-template-columns:1fr; gap:32px} } .site-footer .brand img{height:44px; margin-bottom:1rem} .site-footer p{color:var(--on-dark-muted); font-size:.94rem; max-width:40ch} .foot-col h4{font-family:var(--font-body); font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:1rem} .foot-col a{display:block; padding:.35rem 0; color:var(--on-dark); font-size:.96rem} .foot-col a:hover{color:var(--accent-2)} .socials{display:flex; gap:.6rem; margin-top:1rem} .socials a{width:42px;height:42px;border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb,#fff 8%,transparent); color:var(--on-dark); transition:all .2s} .socials a:hover{background:var(--accent); color:var(--on-accent); transform:translateY(-2px)} .socials svg{width:20px;height:20px} .foot-bottom{margin-top:clamp(32px,4vw,52px); border-top:1px solid rgba(255,255,255,.1); padding-block:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--on-dark-muted)} /* ---------------- Sticky mobile WA bar ---------------- */ .wa-bar{position:fixed; left:0; right:0; bottom:0; z-index:55; display:none; gap:.6rem; padding:.6rem .8rem; background:color-mix(in srgb,var(--surface) 96%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line)} .wa-bar .btn{flex:1; justify-content:center} @media(max-width:900px){ .wa-bar{display:flex} body{padding-bottom:76px} } /* ---------------- Reveal on scroll ---------------- */ .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)} .reveal.in{opacity:1; transform:none} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} } /* lightbox */ .lb-overlay{position:fixed; inset:0; z-index:100; background:rgba(8,6,4,.92); display:grid; place-items:center; padding:24px; cursor:zoom-out} .lb-overlay[hidden]{display:none} .lb-overlay img{max-width:min(96vw,1200px); max-height:90vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5)} .lb-close{position:absolute; top:16px; right:22px; background:none; border:0; color:#fff; font-size:2.4rem; line-height:1; cursor:pointer} /* gallery grid */ .gal{columns:4 240px; column-gap:14px} @media(max-width:640px){ .gal{columns:2 150px; column-gap:10px} } .gal a{display:block; margin-bottom:14px; border-radius:12px; overflow:hidden; break-inside:avoid; box-shadow:var(--shadow-sm); cursor:zoom-in; position:relative} .gal img{width:100%; transition:transform .6s var(--ease)} .gal a:hover img{transform:scale(1.05)} .gal .vid{position:relative} .gal .vid::after{content:"►"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:2rem; background:rgba(0,0,0,.25); pointer-events:none} /* theme-aware logo swap */ .logo-p{display:block} .logo-s{display:none} :root[data-theme="signature"] .logo-p{display:none} :root[data-theme="signature"] .logo-s{display:block} /* theme switch (preview only) */ .theme-switch{position:fixed; right:14px; bottom:88px; z-index:90; display:flex; gap:6px; background:var(--surface); border:1px solid var(--line); padding:6px; border-radius:999px; box-shadow:var(--shadow-md)} .theme-switch button{border:0; cursor:pointer; width:30px;height:30px;border-radius:50%; font-size:0} .theme-switch button.p{background:linear-gradient(135deg,#1A1813 50%,#B0872F 50%)} .theme-switch button.s{background:linear-gradient(135deg,#0461AF 50%,#fff 50%); border:1px solid var(--line)} @media(min-width:901px){ .theme-switch{bottom:14px} }