/* ============ THEME SYSTEM (switchable via data-theme on ) ============ */ :root,html[data-theme="cinematic"]{--ink:#06171b;--ink-2:#0c2127;--slate:#1E343D;--orange:#F26931;--sky:#74B5DC;--sand:#FAF9EE;--gold:#EDC284;--accent:#F26931;--accent-2:#EDC284;--blue:#74B5DC;} html[data-theme="editorial"]{--ink:#071a20;--ink-2:#0c2630;--slate:#1d3a45;--orange:#5C9FCB;--sky:#9ED0EC;--sand:#FAF9EE;--gold:#9ED0EC;--accent:#5C9FCB;--accent-2:#9ED0EC;--blue:#74B5DC;} html[data-theme="gold"]{--ink:#0a1512;--ink-2:#0f1d18;--slate:#1c3329;--orange:#E0A94E;--sky:#74B5DC;--sand:#FAF7EC;--gold:#F2D49B;--accent:#E0A94E;--accent-2:#F2D49B;--blue:#74B5DC;} html[data-theme="noir"]{--ink:#0d0d0f;--ink-2:#161619;--slate:#26262b;--orange:#C9A24B;--sky:#74B5DC;--sand:#F4F2EC;--gold:#C9A24B;--accent:#C9A24B;--accent-2:#E4D6A8;--blue:#74B5DC;} :root{ --line:rgba(250,249,238,.14);--muted:rgba(250,249,238,.66); --display:"Cormorant Garamond",Georgia,serif;--body:"Inter",system-ui,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:hidden} body{background:var(--page,var(--ink));color:var(--sand);font-family:var(--body);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s} a{color:inherit;text-decoration:none}img{max-width:100%;display:block} .wrap{max-width:1240px;margin:0 auto;padding:0 30px} em{font-style:italic;color:var(--gold)} h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.04;letter-spacing:-.01em} .eyebrow{font-weight:500;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)} .btn{position:relative;display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:.85rem;letter-spacing:.02em;padding:.95em 1.8em;border-radius:8px;transition:.35s cubic-bezier(.2,.7,.2,1);cursor:pointer;border:1px solid transparent;overflow:hidden;white-space:nowrap} .btn span.arr{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)} .btn:hover span.arr{transform:translateX(4px)} /* primary: solid accent + a soft top sheen, and a shimmer sweep on hover. Deliberately NOT accent -> accent-2: several palettes pair complementary hues (teal/orange, marine/gold), and spanning them reads as a garish two-colour ramp. A single-hue lighten keeps every palette calm. --accent-ink is measured per palette in applyPalette(). */ .btn-primary{background-color:var(--accent); background-image:linear-gradient(165deg,rgba(255,255,255,.18),rgba(255,255,255,0) 62%); color:var(--accent-ink,var(--ink));box-shadow:0 6px 20px -6px var(--accent)} .btn-primary::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(75deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .6s ease} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px var(--accent)} .btn-primary:hover::before{left:130%} /* ghost: fills with gold on hover */ .btn-ghost{border-color:rgba(255,255,255,.35);color:var(--sand);background:rgba(255,255,255,.02)} .btn-ghost:hover{border-color:var(--gold);color:var(--ink);background:var(--gold);transform:translateY(-2px)} /* blue: secondary accent (logo sky-blue) */ .btn-blue{background:linear-gradient(120deg,var(--blue),#9ED0EC);color:#06171b;box-shadow:0 6px 20px -6px var(--blue)} .btn-blue::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(75deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .6s ease} .btn-blue:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px var(--blue)} .btn-blue:hover::before{left:130%} /* outline-blue: bordered blue that fills */ .btn-outline-blue{border-color:var(--blue);color:var(--blue);background:rgba(116,181,220,.06)} .btn-outline-blue:hover{background:var(--blue);color:#06171b;transform:translateY(-2px)} /* ===== iOS LIQUID GLASS BUTTONS ===== */ /* frosted translucent pill with inner light rim + moving specular highlight */ .btn-glass,.btn-glass-blue,.btn-glass-gold{ color:var(--sand); background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,rgba(255,255,255,.02)); -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%); border:1px solid rgba(255,255,255,.28); box-shadow:0 8px 30px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.25); } /* tinted glass variants — accent/blue color bleeds through the frost */ .btn-glass-blue{background:linear-gradient(135deg,rgba(116,181,220,.34),rgba(116,181,220,.1) 45%,rgba(116,181,220,.04));border-color:rgba(158,208,236,.5);box-shadow:0 8px 30px -8px rgba(116,181,220,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.2)} .btn-glass-gold{background:linear-gradient(135deg,rgba(237,194,132,.34),rgba(237,194,132,.1) 45%,rgba(237,194,132,.04));border-color:rgba(242,212,155,.5);box-shadow:0 8px 30px -8px rgba(237,194,132,.5),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.2)} /* specular sweep that catches the surface like glass */ .btn-glass::before,.btn-glass-blue::before,.btn-glass-gold::before{content:"";position:absolute;top:0;left:-130%;width:65%;height:100%;background:linear-gradient(75deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .65s cubic-bezier(.2,.7,.2,1);pointer-events:none} /* top-edge glare highlight (the iOS "lozenge" sheen) */ .btn-glass::after,.btn-glass-blue::after,.btn-glass-gold::after{content:"";position:absolute;inset:1px 1px auto 1px;height:44%;border-radius:7px 7px 14px 14px;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);pointer-events:none;opacity:.7} .btn-glass:hover,.btn-glass-blue:hover,.btn-glass-gold:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.45)} .btn-glass-blue:hover{border-color:var(--blue)} .btn-glass:hover::before,.btn-glass-blue:hover::before,.btn-glass-gold:hover::before{left:140%} .horizon{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--accent),var(--gold),var(--sky),transparent);opacity:.5;margin:0} section.pad{padding:104px 0;scroll-margin-top:120px} #collection,#destinations,#how,#compare,#last-minute,#contact{scroll-margin-top:120px} .center{text-align:center}.mid{margin-left:auto;margin-right:auto;text-align:center} .sec-head{max-width:62ch;margin-bottom:48px} .sec-head .eyebrow{display:block;margin-bottom:16px} .sec-head h2{font-size:clamp(2rem,4.6vw,3.4rem)} .sec-head p{color:var(--muted);margin-top:16px;font-size:1.02rem} .reveal{opacity:0;transform:translateY(26px);transition:.8s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}} /* ============ CONTROL PANEL (demo switcher) ============ */ #panel{position:fixed;top:0;right:0;z-index:300;height:100vh;width:300px;background:rgba(8,18,22,.96); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-left:1px solid var(--line); transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);overflow-y:auto;padding:26px 22px} #panel.open{transform:none} #panel h4{font-family:var(--body);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:22px 0 12px} #panel h4:first-child{margin-top:0} #panel .opts{display:flex;flex-wrap:wrap;gap:8px} #panel button.opt{font-size:.74rem;padding:.5em .9em;border:1px solid var(--line);border-radius:30px;background:none;color:var(--muted);cursor:pointer;transition:.2s} #panel button.opt:hover{color:var(--sand);border-color:var(--muted)} #panel button.opt.active{background:var(--accent);color:var(--ink);border-color:var(--accent)} #panel .swatch{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:.2s} #panel .swatch.active{border-color:var(--sand);transform:scale(1.12)} #panelToggle{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:301; color:var(--sand);background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.04)); -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%); border:1px solid rgba(255,255,255,.3);border-right:0;border-radius:10px 0 0 10px;padding:14px 11px;cursor:pointer;font-size:.7rem;letter-spacing:.1em; writing-mode:vertical-rl;text-orientation:mixed;font-weight:600; box-shadow:-6px 0 26px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5)} #panelToggle:hover{border-color:var(--gold);color:var(--gold)} #panel .note{font-size:.68rem;color:var(--muted);line-height:1.5;margin-top:8px} #panel .demo-links{display:flex;flex-direction:column;gap:6px} #panel .demo-links a{font-size:.78rem;color:var(--sky);padding:4px 0} #panel .demo-links a:hover{color:var(--gold)} #panel .close{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--muted);font-size:1.4rem;cursor:pointer} /* ============ HEADERS (3 styles via data-header on body) ============ */ header{position:fixed;left:0;right:0;z-index:50;transition:.4s} .nav{display:flex;align-items:center;justify-content:space-between;height:78px} .brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:1.15rem} .brand img{width:40px;height:40px}.brand b{font-weight:600} .nav-links{display:flex;gap:30px;font-size:.82rem;letter-spacing:.04em;color:#fff;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.22)} .nav-links a:hover{color:var(--gold)} /* header A: transparent over hero, solid on scroll (default) */ body[data-header="float"] header{top:var(--htop,0)} body[data-header="float"] header.scrolled{background:rgba(6,23,27,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} /* header B: solid bar always, centered logo */ body[data-header="solid"] header{top:var(--htop,0);background:var(--ink-2);border-bottom:1px solid var(--line)} body[data-header="solid"] .nav{height:72px} /* header C: centered stacked logo + nav below */ body[data-header="center"] header{top:var(--htop,0);background:rgba(6,23,27,.6);backdrop-filter:blur(12px)} body[data-header="center"] .nav{flex-direction:column;height:auto;padding:14px 0;gap:8px} body[data-header="center"] .nav .brand{font-size:1.3rem} body[data-header="center"] .nav .reserve-btn{display:none} body[data-header="center"] .nav-links{gap:26px} @media(max-width:900px){.nav-links{display:none}body[data-header="center"] .nav{flex-direction:row}} /* hamburger + mobile menu */ .nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:55} .nav-toggle span{display:block;width:24px;height:2px;background:var(--sand);transition:.3s} .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{display:none;flex-direction:column;gap:2px;padding:0 30px 18px;background:rgba(6,23,27,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} .mobile-menu.open{display:flex} .mobile-menu a{padding:14px 4px;font-size:.95rem;letter-spacing:.03em;color:var(--sand);border-bottom:1px solid var(--line)} .mobile-menu a:hover{color:var(--gold)} .mobile-menu .btn{margin-top:14px;justify-content:center} @media(max-width:900px){ .nav-toggle{display:flex} .reserve-btn{display:none} body[data-header="center"] .nav-toggle{display:flex} } /* ============ ANNOUNCEMENT BAR ============ */ .anbar{position:fixed;top:0;left:0;right:0;z-index:60;background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:var(--ink);font-size:.8rem;font-weight:500;text-align:center;padding:9px 40px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap} .anbar b{font-weight:600}.anbar .cd{font-variant-numeric:tabular-nums;font-weight:600;background:rgba(6,23,27,.16);padding:2px 9px;border-radius:3px} .anbar a{text-decoration:underline;text-underline-offset:2px;font-weight:600} .anbar .x{position:absolute;right:14px;cursor:pointer;font-size:1rem;opacity:.7;background:none;border:0;color:var(--ink)} .anbar .x:hover{opacity:1} @media(max-width:680px){.anbar{font-size:.72rem;padding:8px 30px;gap:8px}} /* ============ HERO (3 styles via data-hero on the hero section) ============ */ .heroA{position:relative;height:100vh;min-height:680px;overflow:hidden} .slides{position:absolute;inset:0;z-index:0} .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s cubic-bezier(.4,0,.2,1);background-size:cover;background-position:center;transform:scale(1.06);will-change:opacity} .slide.active{opacity:1} /* transition modes (set via data-transition on #heroSlides) */ .slides[data-transition="fade"] .slide{transition:opacity 1.6s cubic-bezier(.4,0,.2,1);transform:none} .slides[data-transition="slide"] .slide{transition:opacity .9s ease,transform .9s cubic-bezier(.4,0,.2,1);transform:translateX(6%) scale(1.02)} .slides[data-transition="slide"] .slide.active{transform:translateX(0) scale(1)} .slides[data-transition="kenburns"] .slide{transition:opacity 1.8s ease;transform:scale(1.05)} .slides[data-transition="kenburns"] .slide.active{animation:kb 8s ease-out forwards} @keyframes kb{from{transform:scale(1.05)}to{transform:scale(1.18)}} .slides[data-transition="instant"] .slide{transition:none;transform:none} .hero-scrim{position:absolute;inset:0;z-index:1} .heroA .wrap{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center} /* ===== SPECIALS HERO ===== */ .hero-specials{min-height:100vh;padding:124px 0 56px;display:flex;align-items:center} .hero-specials .hero-scrim{background:linear-gradient(100deg,rgba(6,23,27,.92) 0%,rgba(6,23,27,.7) 42%,rgba(6,23,27,.45) 70%,rgba(6,23,27,.62) 100%)} .hero-specials .wrap{height:auto;width:100%;display:block} /* default / split: narrative slightly wider than the booking panel */ .hero-specials[data-hero="split"] .wrap.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center} /* carousel: text top-left, compact card lower, scrim heavier left */ .hero-specials[data-hero="carousel"] .wrap.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:end} .hero-specials[data-hero="carousel"] .hero-scrim{background:linear-gradient(180deg,rgba(6,23,27,.55),rgba(6,23,27,.35) 40%,rgba(6,23,27,.8))} /* centered: single centered card, text above */ .hero-specials[data-hero="centered"]{text-align:center} .hero-specials[data-hero="centered"] .wrap.hero-grid{display:block;max-width:680px;margin:0 auto} .hero-specials[data-hero="centered"] .hero-left{margin-bottom:26px} .hero-specials[data-hero="centered"] .spec-text .st-desc{margin-left:auto;margin-right:auto} .hero-specials[data-hero="centered"] .hero-scrim{background:linear-gradient(0deg,rgba(6,23,27,.82),rgba(6,23,27,.45) 50%,rgba(6,23,27,.7))} .hero-grid{width:100%} .hero-left{max-width:100%} .spec-text .st-flag{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 14px} .spec-text .st-flag::before{content:"★";color:var(--accent)} .spec-text h1{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.04;margin-bottom:4px} .spec-text .st-sub{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,2.2vw,1.9rem);color:var(--gold);margin-bottom:16px} .spec-text .st-loc{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin-bottom:16px} .spec-text .st-desc{font-size:1.05rem;color:rgba(255,255,255,.88);max-width:46ch;line-height:1.55} /* owner's-guest narrative additions */ .hg-amrow{display:flex;gap:14px;margin:18px 0 16px} .hg-am svg{width:20px;height:20px;stroke:var(--gold)} .hg-points{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:6px} .hg-points li{position:relative;padding-left:26px;font-size:.92rem;color:rgba(255,255,255,.84);line-height:1.4} .hg-points li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%; background:radial-gradient(circle,var(--accent) 0 40%,transparent 42%);border:1px solid var(--accent)} .hg-points b{color:var(--gold);font-weight:600} .fade{animation:specFade .6s cubic-bezier(.2,.7,.2,1)} @keyframes specFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* booking panel (right half) — fills its column */ .book-widget{border-radius:20px;padding:32px;justify-self:stretch;width:100%; background:linear-gradient(135deg,rgba(var(--book-rgb,12,33,39),.62),rgba(var(--book-rgb,12,33,39),.36)); -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%); border:1px solid rgba(255,255,255,.24);box-shadow:0 28px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3)} .bw-head{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .bw-price{display:flex;align-items:baseline;gap:10px;margin-bottom:14px} .bw-price .bw-now{font-family:var(--display);font-size:3rem;color:var(--sand);line-height:1} .bw-price .bw-per{font-size:.8rem;color:var(--muted)} .bw-save-pill{font-size:.7rem;color:var(--ink);background:var(--gold);border-radius:30px;padding:3px 11px;margin-left:auto;font-weight:600} .bw-comp{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)} .bw-comp-row{display:flex;justify-content:space-between;font-size:.84rem;color:var(--muted)} .bw-comp-row .bw-strike{text-decoration:line-through} .bw-comp-us{color:var(--gold);font-weight:600;font-size:.92rem} .bw-dates{display:flex;align-items:center;gap:12px;background:rgba(242,105,49,.14);border:1px solid rgba(242,105,49,.5);border-radius:12px;padding:14px 16px;margin-bottom:18px} .bw-cal-ic{color:var(--accent);font-size:1.2rem} .bw-dates>div{display:flex;flex-direction:column;line-height:1.3} .bw-dlabel{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .bw-dates b{font-size:1rem;color:var(--sand)} .bw-nights{font-size:.68rem;color:var(--gold)} .bw-btn{width:100%;justify-content:center;margin-bottom:10px} .bw-btn:last-child{margin-bottom:0} .bw-foot{text-align:center;font-size:.68rem;color:var(--muted);margin-top:12px} @media(max-width:900px){ .heroA.hero-specials{height:auto;min-height:0;max-height:none;padding:104px 0 44px;display:block;background:var(--ink-2)} .heroA.hero-specials .wrap.hero-grid{display:block} .hero-left{max-width:100%;margin-bottom:24px} .book-widget{max-width:440px} /* small screens: show ONE static photo (no janky rotation), keep content + dots rotating */ .hero-specials .slides .slide{display:none} .hero-specials .slides .slide.active{display:block;opacity:1;transition:none} .hero-specials .hero-scrim{background:linear-gradient(180deg,rgba(6,23,27,.74),rgba(6,23,27,.86))} } @media(max-width:380px){ .book-widget{padding:20px} .spec-text h1{font-size:clamp(1.9rem,8.5vw,2.6rem)} } .heroA h1{font-size:clamp(3rem,7vw,6rem);max-width:15ch;margin-bottom:24px} .heroA .lede{font-size:1.15rem;color:rgba(255,255,255,.88);max-width:42ch;margin-bottom:38px} .hero-cta{display:flex;gap:14px;flex-wrap:wrap} .badge-line{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:24px} .badge-line::before{content:"";width:28px;height:1px;background:var(--gold)} @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .dots{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:10px} .dots .dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.35);cursor:pointer;transition:.3s;padding:0} .dots .dot.active{background:var(--gold);width:26px;border-radius:5px} /* ultra-narrow foldables / cover screens (e.g. Galaxy Z Fold outer) */ @media(max-width:380px){ .wrap{padding:0 16px} .glass-cal{padding:18px} .cal-grid{gap:2px;font-size:.7rem} .cal-grid .dow{font-size:.58rem} .heroA h1{font-size:clamp(2rem,9vw,2.8rem)} .anbar{font-size:.66rem;padding:8px 26px;gap:6px} .lmd-timer .seg{width:auto;flex:1;min-width:0} } /* ============ TRANSPARENT MOBILE-FRIENDLY CALENDAR ============ */ .glass-cal{z-index:4;width:360px;border-radius:16px;padding:24px; background:rgba(10,28,33,.42);border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%); box-shadow:0 24px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.22);overflow:hidden;position:relative} /* floating variant for left/center heroes */ .heroA[data-hero="left"] .glass-cal,.heroA[data-hero="center"] .glass-cal{position:absolute;right:40px;top:50%;transform:translateY(-50%)} .heroA[data-hero="center"] .glass-cal{position:static;transform:none;margin:30px auto 0} .heroA[data-hero="split"] .glass-cal{width:100%;background:rgba(10,28,33,.5);margin-top:8px} .glass-cal::after{content:"";position:absolute;top:-60%;left:-30%;width:55%;height:220%;pointer-events:none;background:linear-gradient(75deg,transparent,rgba(255,255,255,.12),transparent);transform:rotate(8deg);animation:sheen 7s ease-in-out infinite} @keyframes sheen{0%{left:-40%}55%{left:130%}100%{left:130%}} .glass-cal h3{font-size:1.35rem;margin-bottom:2px;position:relative} .glass-cal .sub{font-size:.78rem;color:rgba(255,255,255,.72);margin-bottom:8px;position:relative} .glass-cal .special{position:relative;display:flex;align-items:center;gap:8px;background:rgba(242,105,49,.16);border:1px solid var(--accent);border-radius:8px;padding:8px 11px;margin-bottom:16px;font-size:.74rem} .glass-cal .special b{color:var(--gold)} .cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.85rem;position:relative} .cal-head button{background:none;border:0;color:var(--gold);cursor:pointer;font-size:1rem;padding:4px 8px} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:.74rem;position:relative} .cal-grid .dow{color:var(--muted);text-align:center;padding:3px 0;font-size:.64rem} .cal-grid .day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;color:var(--sand);transition:.15s;position:relative} .cal-grid .day:hover{background:rgba(255,255,255,.12)} .cal-grid .day.avail{color:var(--gold);font-weight:500} .cal-grid .day.avail::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--gold);position:absolute;bottom:3px} .cal-grid .day.special{background:rgba(242,105,49,.28);color:var(--sand);font-weight:600} .cal-grid .day.special::after{background:var(--accent)} .cal-grid .day.inrange{background:rgba(242,105,49,.16)} .cal-grid .day.muted{color:rgba(255,255,255,.22);cursor:default} .glass-cal .legend{font-size:.66rem;color:var(--muted);margin:12px 0 16px;display:flex;gap:14px;flex-wrap:wrap;position:relative} .glass-cal .legend span{display:flex;align-items:center;gap:5px} .glass-cal .legend i{width:9px;height:9px;border-radius:50%;display:inline-block} .glass-cal .legend .l-av{background:var(--gold)}.glass-cal .legend .l-sp{background:var(--accent)} .glass-cal .btn{width:100%;justify-content:center;position:relative} /* ============ LAST-MINUTE DEAL ============ */ .lmd{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--ink-2),var(--slate))} .lmd-grid{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);border-radius:16px;overflow:hidden} .lmd-img{position:relative;min-height:430px;background-size:cover;background-position:center} .lmd-img .flag{position:absolute;top:20px;left:20px;background:var(--accent);color:var(--ink);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:3px} .lmd-body{padding:46px;display:flex;flex-direction:column;justify-content:center;background:rgba(6,23,27,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .lmd-body h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin:14px 0 4px} .lmd-body .loc{color:var(--sky);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px} .lmd-body p{color:var(--muted);margin-bottom:18px;font-size:.96rem} .lmd-special{font-size:.82rem;color:var(--gold);border:1px solid var(--gold);border-radius:8px;padding:8px 12px;margin-bottom:18px;display:inline-block} .lmd-price{display:flex;align-items:baseline;gap:10px;margin-bottom:6px} .lmd-price .now{font-family:var(--display);font-size:2.6rem;color:var(--sand)}.lmd-price .per{font-size:.8rem;color:var(--muted)} .lmd-timer{display:flex;gap:10px;margin:18px 0 24px} .lmd-timer .seg{background:rgba(6,23,27,.6);border:1px solid var(--line);border-radius:8px;padding:10px 0;width:62px;text-align:center} .lmd-timer .seg b{display:block;font-family:var(--display);font-size:1.7rem;color:var(--sand);line-height:1;font-variant-numeric:tabular-nums} .lmd-timer .seg span{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .lmd-acts{display:flex;gap:12px;flex-wrap:wrap} @media(max-width:860px){.lmd-grid{grid-template-columns:1fr}.lmd-img{min-height:240px}.lmd-body{padding:32px}} /* ============ PRICE COMPARISON (per suite + standalone) ============ */ .comp-bars{margin:14px 0} .comp-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:.74rem} .comp-row .lab{width:54px;color:var(--muted);flex-shrink:0} .comp-row .track{flex:1;height:18px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;position:relative} .comp-row .fill{height:100%;border-radius:4px;transition:width 1s cubic-bezier(.2,.7,.2,1)} .comp-row .fill.airbnb{background:#ff5a5f}.comp-row .fill.vrbo{background:#3b5998}.comp-row .fill.vte{background:var(--accent)} .comp-row .val{width:46px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums} .comp-row.us .lab,.comp-row.us .val{color:var(--gold);font-weight:600} /* ============ DESTINATIONS ============ */ .dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .dest{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;transition:.45s} .dest-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transition:.6s} .dest::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(6,23,27,.88),rgba(6,23,27,.05) 75%)} .dest:hover{transform:translateY(-5px);border-color:var(--gold)}.dest:hover .dest-img{transform:scale(1.07)} .dest>*{position:relative;z-index:2} .dest .region{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px} .dest h3{font-size:2rem;margin-bottom:12px} .dest p{color:rgba(255,255,255,.82);font-size:.92rem;margin-bottom:18px} .dest .lk{font-size:.8rem;color:var(--sand)}.dest .lk::after{content:" →";color:var(--accent)} /* ============ COLLECTION ============ */ .filt-wrap{display:flex;flex-direction:column;gap:14px;margin-bottom:34px} .filt-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .filt-row .lbl{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-width:92px} /* Glass tints from --glass-rgb (the palette's own text colour), not hardcoded white — white frosting over a light page is invisible, which is what made these filters unreadable on the light palettes. Label text uses --sand rather than --muted so the choices stay legible against the frost. */ .chip{font-size:.78rem;padding:.5em 1.1em;border:1px solid var(--line);border-radius:40px; color:var(--sand);cursor:pointer;transition:.25s; background:linear-gradient(135deg,rgba(var(--glass-rgb,255,255,255),.10),rgba(var(--glass-rgb,255,255,255),.03)); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .chip:hover{border-color:var(--accent);background:linear-gradient(135deg,rgba(var(--glass-rgb,255,255,255),.16),rgba(var(--glass-rgb,255,255,255),.06))} .chip.active{background:var(--accent);background-image:none;color:var(--accent-ink,var(--ink));border-color:var(--accent);font-weight:500} .chip.amen.active{background:var(--sky);border-color:var(--sky);color:#06171b} .suites{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .suite{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ink-2);transition:.4s;display:flex;flex-direction:column} .suite:hover{transform:translateY(-5px);border-color:var(--gold)} .suite .ph{height:200px;position:relative} .suite .ph .ph-img{width:100%;height:100%;object-fit:cover;display:block} .suite .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--ink-2),transparent 55%);pointer-events:none} .suite .badge{position:absolute;top:14px;left:14px;z-index:2;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:4px 9px;border-radius:3px;font-weight:600} .suite .save-badge{position:absolute;top:14px;right:14px;z-index:2;font-size:.66rem;color:#FAF9EE;background:rgba(6,23,27,.82);border:1px solid rgba(255,255,255,.14);padding:4px 9px;border-radius:3px} .suite .bd{padding:22px;flex:1;display:flex;flex-direction:column} .suite .loc{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:8px} .suite h3{font-size:1.3rem;line-height:1.14;margin-bottom:10px} .suite .specs{font-size:.8rem;color:var(--muted);display:flex;gap:14px;margin-bottom:10px} .suite .special-tag{font-size:.7rem;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:6px} .suite .special-tag::before{content:"●";color:var(--accent);font-size:.6rem} .suite .amrow{display:flex;gap:10px;margin-bottom:14px} .suite .amrow svg{width:18px;height:18px;stroke:var(--muted);transition:.25s} .suite:hover .amrow svg{stroke:var(--gold)} .suite .price{display:flex;align-items:baseline;gap:8px;margin-top:auto} .suite .was{color:var(--muted);text-decoration:line-through;font-size:.85rem} .suite .now{font-family:var(--display);font-size:1.7rem}.suite .per{font-size:.76rem;color:var(--muted)} .suite .acts{display:flex;gap:10px;margin-top:16px} .suite .acts .btn{flex:1;justify-content:center;font-size:.78rem;padding:.7em 1em} .empty-note{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0} /* ===== COMPACT CARD STYLE ===== */ .suites[data-style="compact"]{grid-template-columns:repeat(4,1fr);gap:16px} .suite-compact .ph{height:130px} .suite-compact .bd{padding:14px} .suite-compact h3{font-size:1.05rem;margin-bottom:6px;line-height:1.15} .suite-compact .loc{font-size:.6rem;margin-bottom:5px} .suite-compact .specs{font-size:.72rem;gap:10px;margin-bottom:10px} .suite-compact .save-badge{font-size:.6rem} .suite-compact .cz-row{display:flex;align-items:center;justify-content:space-between;gap:8px} .suite-compact .now{font-family:var(--display);font-size:1.3rem;color:var(--sand)} .suite-compact .now .per{font-size:.66rem;color:var(--muted);font-family:var(--body)} .suite-compact .btn{padding:.5em 1em;font-size:.74rem} @media(max-width:980px){.suites[data-style="compact"]{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.suites[data-style="compact"]{grid-template-columns:1fr}} /* ===== GALLERY (photo-cycling) CARD STYLE ===== */ .suite-gallery .ph{height:210px;overflow:hidden} .suite-gallery .ph-img{transition:opacity .3s ease} .suite-gallery .gdots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:5px} .suite-gallery .gdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:.3s} .suite-gallery .gdots i.on{background:var(--gold);width:16px;border-radius:3px} /* ============ ENHANCED 3-STEP PROCESS ============ */ .how{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden} .how::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 80% 10%,rgba(242,105,49,.1),transparent 60%);pointer-events:none} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:54px;position:relative} .step{position:relative;border:1px solid var(--line);border-radius:16px;padding:38px 30px;background:linear-gradient(160deg,rgba(255,255,255,.04),transparent);transition:.4s;overflow:hidden} .step:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 24px 60px rgba(0,0,0,.4)} .step .num{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--ink);font-family:var(--display);font-size:1.9rem;font-weight:600;margin-bottom:22px} .step .ic{position:absolute;top:34px;right:30px;width:30px;height:30px;stroke:var(--gold);opacity:.5} .step h3{font-size:1.55rem;margin-bottom:12px} .step p{color:var(--muted);font-size:.95rem;margin-bottom:18px} .step .step-cta{font-size:.8rem;letter-spacing:.04em;color:var(--accent);font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:pointer} .step .step-cta::after{content:"→";transition:.3s} .step:hover .step-cta::after{transform:translateX(5px)} .step .connector{display:none} @media(min-width:901px){ .step:not(:last-child)::after{content:"";position:absolute;top:60px;right:-17px;width:34px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);z-index:2} } .how-cta{text-align:center;margin-top:48px} /* ============ WHY / TRUST ============ */ .why{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .why .card{border:1px solid var(--line);border-radius:12px;padding:28px;background:var(--ink-2)} .why .card .ic{width:34px;height:34px;stroke:var(--gold);margin-bottom:16px} .why .card h3{font-size:1.15rem;margin-bottom:8px}.why .card p{color:var(--muted);font-size:.88rem} /* ============ STORIES ============ */ .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px} .rev{border:1px solid var(--line);border-radius:12px;padding:30px;background:var(--ink-2)} .stars{color:var(--gold);letter-spacing:3px;font-size:.9rem;margin-bottom:16px} .rev blockquote{font-family:var(--display);font-size:1.18rem;line-height:1.45;font-style:italic} .rev .who{margin-top:18px;font-size:.82rem;color:var(--muted)}.rev .who b{color:var(--sand);font-weight:500;font-style:normal} /* ============ FAQ ============ */ .faq{max-width:820px;margin:40px auto 0} .faq details{border-bottom:1px solid var(--line);padding:20px 0} .faq summary{font-family:var(--display);font-size:1.25rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--accent);font-size:1.5rem;transition:.3s} .faq details[open] summary::after{transform:rotate(45deg)} .faq p{color:var(--muted);margin-top:14px;font-size:.96rem;line-height:1.7} /* ============ FINAL + FOOTER ============ */ .final{position:relative;overflow:hidden;text-align:center} .final::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% 120%,rgba(242,105,49,.25),transparent 60%)} .final>*{position:relative}.final .eyebrow{display:block;margin-bottom:18px} .final p{color:var(--muted);max-width:46ch;margin:14px auto 34px} footer{background:var(--ink-2);border-top:1px solid var(--line);padding:64px 0 30px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:46px} .foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-family:var(--display);font-size:1.2rem} .foot-brand img{width:42px;height:42px} footer .blurb{color:var(--muted);font-size:.9rem;max-width:42ch} footer h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:500} footer ul{list-style:none;font-size:.9rem;color:var(--muted)}footer li{padding:6px 0}footer li a:hover{color:var(--sand)} .foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:.78rem;color:var(--muted)} .socials{display:flex;gap:18px} /* ============ MODAL ============ */ .modal{position:fixed;inset:0;z-index:200;background:rgba(3,12,15,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px} .modal.open{display:flex} .modal-card{width:100%;max-width:480px;border-radius:20px;padding:36px;position:relative;max-height:92vh;overflow-y:auto; background:linear-gradient(145deg,rgba(18,42,49,.82),rgba(8,22,27,.88)); -webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%); border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22)} .modal-x{position:absolute;top:16px;right:18px;background:none;border:0;color:var(--muted);font-size:1.6rem;cursor:pointer} .modal label{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px} .modal input,.modal select{width:100%;background:rgba(6,23,27,.6);border:1px solid var(--line);border-radius:8px;padding:11px 13px;color:var(--sand);font-family:var(--body);font-size:.92rem} .modal input:focus,.modal select:focus{outline:none;border-color:var(--gold)} .frow{display:flex;gap:12px}.frow>div{flex:1} #thanksView{display:none}#thanksView.show{display:block} /* ============ LOADER ============ */ #loader{position:fixed;inset:0;z-index:9999;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .8s,visibility .8s} #loader.done{opacity:0;visibility:hidden} #loader img{width:74px;height:74px;animation:loaderPulse 1.8s ease-in-out infinite} @keyframes loaderPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}} #loader .lbar{width:160px;height:2px;margin-top:26px;background:rgba(250,249,238,.12);overflow:hidden;border-radius:2px} #loader .lbar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--accent),var(--gold));animation:loaderSlide 1.3s ease-in-out infinite} @keyframes loaderSlide{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}} #loader .lw{margin-top:18px;font-family:var(--display);font-style:italic;font-size:1rem;color:var(--muted)} @media(max-width:980px){.why{grid-template-columns:1fr 1fr}.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:900px){ .heroA{height:auto;min-height:0;padding:128px 0 50px} .heroA .wrap{display:block} .heroA[data-hero="left"] .glass-cal,.heroA[data-hero="center"] .glass-cal{position:static;transform:none;width:auto;margin:24px 0 0} .dest-grid,.suites,.steps,.rev-grid,.why{grid-template-columns:1fr} #panel{width:88vw} } /* ===== MULTI-PAGE ADDITIONS ===== */ .nav-links a.on{color:var(--gold)} .page-hero{padding:150px 0 50px;background:linear-gradient(160deg,var(--ink-2),var(--slate));border-bottom:1px solid var(--line)} .page-hero .eyebrow{display:block;margin-bottom:16px} .page-hero h1{font-size:clamp(2.4rem,5vw,3.8rem);max-width:18ch;margin-bottom:18px} .page-hero p{color:var(--muted);max-width:60ch;font-size:1.05rem} /* suite + destination hero */ .suite-hero{position:relative;min-height:440px;display:flex;align-items:flex-end;background-size:cover;background-position:center;padding:0 0 44px} .suite-hero-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,23,27,.92),rgba(6,23,27,.3) 70%,rgba(6,23,27,.5))} .suite-hero .wrap{position:relative;z-index:2} .suite-hero .back-link{display:inline-block;color:var(--sand);font-size:.82rem;margin-bottom:24px;opacity:.8} .suite-hero .back-link:hover{color:var(--gold)} .suite-hero .st-flag{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px} .suite-hero .st-flag::before{content:"★";color:var(--accent)} .suite-hero h1{font-size:clamp(2.4rem,5vw,4rem);line-height:1.04;margin-bottom:6px} .suite-hero .st-sub{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,2.4vw,2rem);color:var(--gold);margin-bottom:12px} .suite-hero .st-loc{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sky)} /* suite detail layout */ .suite-detail-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:50px;align-items:start} /* A grid item defaults to min-width:auto, so it refuses to shrink below its widest child's min-content. The gallery's thumbnail strip is a row of fixed-width thumbnails, which made this column 648px on a 375px phone — the page clipped it rather than scrolling, so the right of the gallery was simply gone. The strip scrolls on its own; the column must be allowed to. */ .suite-detail-main{min-width:0} .suite-detail-main h2{font-size:1.7rem;margin:34px 0 14px} .suite-detail-main h2:first-child{margin-top:0} .suite-detail-main .lede-p{font-size:1.15rem;color:var(--sand);line-height:1.6;margin-bottom:14px} .suite-detail-main p{color:var(--muted);line-height:1.7;margin-bottom:12px} /* "What's nearby", under the reservation panel. Quieter than the panel above it on purpose — it is useful context for someone deciding, not a second call to action competing with the first. */ .nb-panel{margin-top:18px;border:1px solid var(--line);border-radius:16px;padding:20px 22px} .nb-head{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .nb-group + .nb-group{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .nb-group h4{font-family:var(--display);font-size:1.05rem;font-weight:500;margin-bottom:9px;color:var(--sand)} .nb-group ul{list-style:none} .nb-group li + li{margin-top:11px} .nb-name{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.92rem} .nb-name a{color:var(--sand);border-bottom:1px solid transparent;transition:.2s} .nb-name a:hover{border-bottom-color:var(--gold);color:var(--gold)} .nb-rate{flex:none;font-size:.78rem;color:var(--gold)} .nb-rate i{font-style:normal;color:var(--muted)} .nb-kind{display:block;font-size:.75rem;color:var(--muted);margin-top:2px} .nb-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:.68rem;line-height:1.45;color:var(--muted)} /* Suite gallery: a fixed stage with a thumbnail strip under it. The stage never resizes and the thumbnails never reflow, so only the photo changes when you click — see initGallery() in site.js for what this replaced. */ .sgal{margin-bottom:30px} .sgal-stage{position:relative;border-radius:14px;overflow:hidden;background:var(--ink-2)} .sgal-stage img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block} .sgal-zoom{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:10px;cursor:pointer; background:rgba(6,23,27,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); color:var(--sand);font-size:1.05rem;line-height:1;transition:.25s} .sgal-zoom:hover{background:rgba(6,23,27,.82)} .sgal-count{position:absolute;bottom:14px;right:14px;font-size:.72rem;letter-spacing:.08em;color:var(--sand); background:rgba(6,23,27,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:5px 11px;border-radius:30px} .sgal-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;cursor:pointer; background:rgba(6,23,27,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); color:var(--sand);font-size:1.7rem;line-height:1;display:grid;place-items:center;transition:.25s;padding:0 0 3px} .sgal-arrow:hover{background:rgba(6,23,27,.82)} .sgal-arrow.prev{left:14px} .sgal-arrow.next{right:14px} .sgal-strip{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px} .sgal-thumb{flex:0 0 96px;padding:0;border:2px solid transparent;border-radius:9px;overflow:hidden;background:none;cursor:pointer;line-height:0;opacity:.55;transition:.25s} .sgal-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover} .sgal-thumb:hover{opacity:.85} .sgal-thumb.active{opacity:1;border-color:var(--gold)} /* Full-size viewer, built by galOpen(). destination.html carries its own page-scoped copy of these rules; this is the suite gallery's. */ .lightbox{position:fixed;inset:0;z-index:300;background:rgba(3,12,15,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out} .lightbox.open{display:flex} .lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 40px 100px rgba(0,0,0,.6);cursor:default} .lightbox .lbx{position:absolute;top:22px;right:26px;font-size:2rem;color:var(--sand);cursor:pointer;opacity:.8;z-index:2} .lightbox .lbx:hover{opacity:1} .am-grid{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px} .am-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:30px;padding:8px 16px;font-size:.85rem;color:var(--sand)} .am-chip svg{width:18px;height:18px;stroke:var(--gold)} .suite-detail-side{position:sticky;top:100px} .book-panel{border-radius:18px;padding:26px;background:linear-gradient(135deg,rgba(var(--book-rgb,12,33,39),.92),rgba(var(--book-rgb,12,33,39),.76));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);box-shadow:0 24px 60px rgba(0,0,0,.4)} .book-panel .bw-head{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .book-panel .bw-price{display:flex;align-items:baseline;gap:10px;margin-bottom:14px} .book-panel .bw-now{font-family:var(--display);font-size:2.6rem;color:var(--sand);line-height:1} .book-panel .bw-per{font-size:.78rem;color:var(--muted)} .book-panel .bw-save-pill{font-size:.7rem;color:var(--ink);background:var(--gold);border-radius:30px;padding:3px 11px;margin-left:auto;font-weight:600} .book-panel .bw-comp{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)} .book-panel .bw-comp-row{display:flex;justify-content:space-between;font-size:.84rem;color:var(--muted)} .book-panel .bw-strike{text-decoration:line-through} .book-panel .bw-comp-us{color:var(--gold);font-weight:600;font-size:.92rem} .book-panel .bw-dates{display:flex;align-items:center;gap:12px;background:rgba(242,105,49,.14);border:1px solid rgba(242,105,49,.5);border-radius:12px;padding:13px 15px;margin-bottom:16px} .book-panel .bw-cal-ic{color:var(--accent);font-size:1.2rem} .book-panel .bw-dates>div{display:flex;flex-direction:column;line-height:1.3} .book-panel .bw-dlabel{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .book-panel .bw-dates b{font-size:1rem;color:var(--sand)} .book-panel .bw-nights{font-size:.68rem;color:var(--gold)} .book-panel .bw-btn{width:100%;justify-content:center;margin-bottom:10px} .book-panel .bw-foot{text-align:center;font-size:.68rem;color:var(--muted);margin-top:10px} /* contact */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start} .contact-info h2{font-size:1.8rem;margin-bottom:12px} .contact-info>p{color:var(--muted);margin-bottom:28px} .ci-block{margin-bottom:22px} .ci-label{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px} .ci-big{font-family:var(--display);font-size:1.5rem;color:var(--sand)} a.ci-big:hover{color:var(--gold)} .ci-note{margin-top:30px;padding:18px;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:.88rem;background:var(--ink-2)} .contact-form label{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px} .contact-form input,.contact-form select{width:100%;background:rgba(6,23,27,.6);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:11px 13px;color:#FAF9EE;font-family:var(--body);font-size:.92rem} .contact-form input:focus,.contact-form select:focus{outline:none;border-color:var(--gold)} .contact-form .frow{display:flex;gap:12px}.contact-form .frow>div{flex:1} @media(max-width:900px){ .suite-detail-grid{grid-template-columns:1fr;gap:30px} .suite-detail-side{position:static} .contact-grid{grid-template-columns:1fr;gap:34px} /* Smaller thumbnails and a 4:3 stage on phones — 3:2 leaves the strip below the fold on a short screen. Arrows stay: the strip scrolls, and swiping it is not obvious enough to be the only way through the photos. */ .sgal-stage img{aspect-ratio:4/3} .sgal-thumb{flex-basis:74px} .sgal-arrow{width:36px;height:36px;font-size:1.4rem} } /* ===== DEMO PANEL additions (v2) ===== */ #panel .swatches{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:4px} #panel .swatch{width:26px;height:26px} #panel .opt.reset-all{width:100%;margin-top:20px;border-color:var(--muted);color:var(--sand)} #panel .opt.reset-all:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)} .suites[data-style="gallery"]{grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:900px){.suites[data-style="gallery"]{grid-template-columns:1fr}} /* ===== MOBILE HERO DECLUTTER: title, unit size, price, more button ===== */ @media(max-width:680px){ .hero-specials .badge-line, .hero-specials .spec-text .st-flag, .hero-specials .spec-text .st-sub, .hero-specials .spec-text .st-desc, .hero-specials .hg-amrow, .hero-specials .hg-points{display:none!important} .hero-specials .spec-text h1{margin-bottom:8px} .hero-specials .spec-text .st-loc{margin-bottom:0} .hero-specials .book-widget .bw-comp, .hero-specials .book-widget .bw-dates{display:none} .hero-specials .book-widget{padding:22px} .hero-specials{padding-top:96px} /* suite-detail hero: trim flag on mobile */ .suite-hero .st-flag{display:none} } /* announcement bar sits below the header */ .anbar{top:var(--anbar-top,0)} /* ===== SEXY FILTER BAR (collection) ===== */ .filterbar{position:sticky;top:128px;z-index:20;margin-bottom:32px;padding:18px 22px;border-radius:16px; background:linear-gradient(135deg,rgba(12,33,39,.72),rgba(12,33,39,.42)); -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%); border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 60px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.16); display:flex;flex-direction:column;gap:14px} .fb-row{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center} .fb-bottom{border-top:1px solid var(--line);padding-top:16px;gap:14px 30px} .fb-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .fb-label{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);white-space:nowrap} .filterbar .chips{display:flex;gap:8px;flex-wrap:wrap} .fb-group.price{flex:1;min-width:230px} .fb-group.price input[type=range]{flex:1;min-width:120px;height:4px;border-radius:3px;accent-color:var(--accent);cursor:pointer} .price-out{font-variant-numeric:tabular-nums;color:var(--sand);font-weight:600;min-width:54px;text-align:right} .fb-select{background:rgba(6,23,27,.6);border:1px solid var(--line);border-radius:8px;color:var(--sand); padding:8px 30px 8px 12px;font-family:var(--body);font-size:.82rem;cursor:pointer; -webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 16px) center,calc(100% - 11px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .fb-select:focus{outline:none;border-color:var(--gold)} .fb-actions{margin-left:auto;display:flex;align-items:center;gap:18px} .fb-count{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums} .fb-clear{background:none;border:0;color:#FFAE5C;font-size:.8rem;cursor:pointer;font-weight:600;letter-spacing:.02em;text-decoration:underline;text-underline-offset:3px} .fb-clear:hover{color:var(--gold)} /* card filter entrance */ .suite.filt{opacity:0;transform:translateY(18px) scale(.985);will-change:opacity,transform} .suite.filt.in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)} /* richer amenity chips on cards */ .amrow.rich{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px} .amrow.rich .amchip{display:inline-flex;align-items:center;gap:5px;font-size:.66rem;color:var(--muted); border:1px solid var(--line);border-radius:30px;padding:4px 10px;transition:.25s;background:rgba(255,255,255,.02)} .amrow.rich .amchip svg{width:14px;height:14px;stroke:var(--gold)} .amrow.rich .amchip i{font-style:normal;letter-spacing:.02em} .suite:hover .amrow.rich .amchip{border-color:rgba(237,194,132,.4);color:var(--sand)} @media(max-width:680px){.filterbar{position:static}.fb-actions{margin-left:0;width:100%;justify-content:space-between}.fb-group.price{width:100%}} /* ===== FIX: coast card image layer (was overridden to position:relative by .dest>*) ===== */ .dest>.dest-img{position:absolute;inset:0;z-index:0} /* ===== 10/10 polish ===== */ ::selection{background:var(--accent);color:var(--ink)} ::-moz-selection{background:var(--accent);color:var(--ink)} .btn-primary,.reserve-btn{will-change:transform} .brand img{object-fit:contain} /* ===== header color + transparency (demo-controlled) ===== */ body[data-header="float"] header.scrolled{background:rgba(var(--hdr-rgb,6,23,27),var(--hdr-op,.86))} body[data-header="solid"] header{background:rgba(var(--hdr-rgb,6,23,27),var(--hdr-op,1))} body[data-header="center"] header{background:rgba(var(--hdr-rgb,6,23,27),var(--hdr-op,.6))} /* countdown / announcement bar transparency */ .anbar{opacity:var(--anbar-op,1)} /* panel range rows */ #panel .rangerow{display:flex;align-items:center;gap:10px;margin-bottom:4px} #panel .rangerow input[type=range]{flex:1;accent-color:var(--accent);height:4px;cursor:pointer} #panel .rangerow .rv{font-size:.72rem;color:var(--sand);font-variant-numeric:tabular-nums;min-width:40px;text-align:right} /* ===== editorial card grid (demo option) ===== */ .suites[data-style="editorial"]{grid-template-columns:repeat(6,1fr);gap:22px} .suites[data-style="editorial"] .suite{grid-column:span 2} .suites[data-style="editorial"] .suite:nth-child(6n+1){grid-column:span 4} .suites[data-style="editorial"] .suite:nth-child(6n+1) .ph{height:330px} .suites[data-style="editorial"] .suite:nth-child(6n+6){grid-column:span 4} .suites[data-style="editorial"] .suite:nth-child(6n+6) .ph{height:330px} @media(max-width:900px){.suites[data-style="editorial"]{grid-template-columns:1fr} .suites[data-style="editorial"] .suite,.suites[data-style="editorial"] .suite:nth-child(6n+1),.suites[data-style="editorial"] .suite:nth-child(6n+6){grid-column:auto} .suites[data-style="editorial"] .suite .ph{height:200px}} /* ===== motion-blur hero (demo option) ===== */ .hero-specials[data-hero="motionblur"] .wrap.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center} .hero-specials[data-hero="motionblur"] .slide{transition:opacity 1s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)} .hero-specials[data-hero="motionblur"] .slide:not(.active){opacity:0;filter:blur(26px);transform:scale(1.06)} .hero-specials[data-hero="motionblur"] .slide.active{opacity:1;filter:blur(0);transform:scale(1)} @media(max-width:900px){.hero-specials[data-hero="motionblur"] .wrap.hero-grid{display:block}} /* ===== custom cursor (gated by demo toggle) ===== */ html.vte-cursor-on,html.vte-cursor-on *{cursor:none!important} .vte-cur,.vte-ring{position:fixed;top:0;left:0;z-index:99999;pointer-events:none;border-radius:50%;mix-blend-mode:difference} .vte-cur{width:7px;height:7px;background:#fff;transform:translate(-50%,-50%)} .vte-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.5);transform:translate(-50%,-50%);transition:width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1),background .35s} .vte-ring.hot{width:60px;height:60px;background:rgba(242,105,49,.14);border-color:transparent} /* ============ PALETTE SYSTEM (demo: applyPalette sets --page/surfaces/text/accent/header inline) ============ */ /* body uses --page; palettes flip surfaces + text. --ink stays a deep tone (contrast text on bright buttons). */ /* Surfaces that must stay dark (photo heroes, overlays, demo chrome) keep light text regardless of palette. */ header,.heroA,.hero-specials,.dest,.dest-hero,.suite-hero,.book-panel,.book-widget,.filterbar,.lmd-body,.modal,.lightbox,#panel,#panelToggle,.mobile-menu,.ckb{--sand:#FAF9EE;--muted:rgba(250,249,238,.66);--line:rgba(250,249,238,.14);color:var(--sand)} /* Light-mode niceties (data-mode set by applyPalette). */ html[data-mode="light"] .btn-ghost{border-color:var(--line);color:var(--sand);background:rgba(0,0,0,.03)} /* Float header has no JS scrolled-state; in light palettes it must stay solid (deep --hdr-rgb) so its light nav never sits invisibly over light content. */ html[data-mode="light"] body[data-header="float"] header{background:rgba(var(--hdr-rgb,6,23,27),var(--hdr-op,.9));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} /* ===== How it all works: hero, imagery, calculator, hosts ===== */ .hiw-hero{position:relative;min-height:min(74vh,620px);display:flex;align-items:flex-end; background-size:cover;background-position:center;border-bottom:1px solid var(--line)} .hiw-hero-scrim{position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,23,27,.34),rgba(6,23,27,.62) 55%,rgba(var(--hdr-rgb,6,23,27),.94))} .hiw-hero-in{position:relative;padding:0 0 58px;--sand:#FAF9EE;--muted:rgba(250,249,238,.72);color:var(--sand)} .hiw-hero-in .eyebrow{display:block;margin-bottom:14px} .hiw-hero-in h1{font-size:clamp(2.6rem,6vw,4.4rem);max-width:16ch;margin-bottom:16px;color:#FAF9EE} .hiw-hero-in p{color:rgba(250,249,238,.82);max-width:52ch;font-size:1.06rem} .hiw-scroll{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-size:.74rem; letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);text-decoration:none} .hiw-scroll span{display:inline-block;animation:hiwbob 1.8s ease-in-out infinite} @keyframes hiwbob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} .hiw-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:start} .hiw-aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px} .hiw-fig{margin:0;border-radius:16px;overflow:hidden;position:relative;border:1px solid var(--line)} .hiw-fig img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3} .hiw-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;font-size:.76rem; letter-spacing:.06em;color:#FAF9EE;background:linear-gradient(transparent,rgba(6,23,27,.85))} .hiw-sides{display:grid;gap:12px} .hiw-side{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--ink-2)} .hiw-side-tag{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .hiw-side p{color:var(--muted);font-size:.9rem;line-height:1.6} .hiw-side-own{border-color:var(--accent);background:var(--page)} .hiw-side-own .hiw-side-tag{color:var(--accent)} /* calculator */ .calc-sec{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .calc{max-width:940px;margin:0 auto;border:1px solid var(--line);border-radius:18px;padding:30px;background:var(--page)} .calc-controls{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;margin-bottom:26px} .calc-field{display:flex;flex-direction:column;gap:8px} .calc-field>span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .calc-field>span b{color:var(--accent-2);font-variant-numeric:tabular-nums} .calc-field select{font:inherit;color:var(--sand);background:var(--ink-2);border:1px solid var(--line); border-radius:10px;padding:11px 12px;cursor:pointer} .calc-field select:focus{outline:none;border-color:var(--accent)} .calc-field input[type=range]{accent-color:var(--accent);height:4px;cursor:pointer;margin-top:9px} .calc-out{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:center} .calc-photo{border-radius:12px;overflow:hidden;border:1px solid var(--line)} .calc-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block} .calc-bars{display:flex;flex-direction:column;gap:14px} .calc-bar-row{display:grid;grid-template-columns:104px minmax(0,1fr) 84px;gap:12px;align-items:center} .calc-lbl{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .calc-track{height:12px;border-radius:20px;background:var(--slate);overflow:hidden} .calc-fill{height:100%;border-radius:20px;transition:width .5s cubic-bezier(.2,.7,.2,1)} .calc-fill-them{background:var(--slate);border:1px solid var(--line)} .calc-fill-us{background:var(--accent)} .calc-amt{font-family:var(--display);font-size:1.15rem;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums} .calc-amt-us{color:var(--accent-2)} .calc-save{margin-top:6px;font-family:var(--display);font-size:1.5rem;color:var(--sand)} .calc-save strong{color:var(--accent-2)} .calc-pct{font-family:var(--body);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-left:8px} .calc-cta{align-self:flex-start;margin-top:8px} .calc-note{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)} /* method imagery */ .method{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0;overflow:hidden;padding:0} .method-fig{margin:0;position:relative;min-height:100%} .method-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .method-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 10px;font-size:.72rem; color:#FAF9EE;background:linear-gradient(transparent,rgba(6,23,27,.88))} .method-body{padding:34px 32px} /* hosts */ .hosts{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start} .hosts-photo{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);position:sticky;top:110px} .hosts-photo img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover} .hosts-copy p{color:var(--muted);line-height:1.8;margin-bottom:16px} .hosts-copy .eyebrow{display:block;margin-bottom:16px} .hosts-sign{font-family:var(--display);font-size:1.35rem;color:var(--sand);margin-top:20px} .hosts-name{font-size:.85rem;letter-spacing:.1em;color:var(--accent-2)} .hosts-copy .btn{margin-top:12px} @media(max-width:900px){ .hiw-intro,.hosts{grid-template-columns:1fr;gap:32px} .hiw-aside,.hosts-photo{position:static} .calc{padding:20px} .calc-controls,.calc-out{grid-template-columns:1fr} .calc-photo{max-width:200px} .calc-bar-row{grid-template-columns:88px minmax(0,1fr) 72px;gap:8px} .method{grid-template-columns:1fr} .method-fig{min-height:190px} .method-fig img{position:relative} .method-body{padding:24px 22px} } /* ===== Long-form process page (how-it-works) — the client's own copy ===== */ .prose{max-width:72ch} .prose p{color:var(--muted);line-height:1.8;margin-bottom:20px} .prose p.lede-p{font-size:1.16rem;color:var(--sand);line-height:1.7} .prose p:last-child{margin-bottom:0} .prose strong{color:var(--sand);font-weight:500} .methods{display:flex;flex-direction:column;gap:26px;margin-top:52px} .method{position:relative;border:1px solid var(--line);border-radius:16px;padding:36px 34px; background:linear-gradient(160deg,rgba(255,255,255,.04),transparent);transition:.4s} .method:hover{border-color:var(--accent)} .method-head{display:flex;align-items:center;gap:16px;margin-bottom:22px} .method .num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px; border-radius:50%;border:1px solid var(--accent);color:var(--accent);font-family:var(--display);font-size:1.5rem} .method h3{font-size:1.5rem;line-height:1.25} .method p{color:var(--muted);line-height:1.78;margin-bottom:16px;max-width:74ch} .method p:last-child{margin-bottom:0} .method ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:20px 0 0; border-left:2px solid var(--line);padding-left:20px;max-width:70ch} .method li{color:var(--muted);font-size:.95rem;line-height:1.6;position:relative} .method li::before{content:"";position:absolute;left:-25px;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.75} .note-callout{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px; padding:26px 30px;background:var(--ink-2);max-width:80ch;margin-top:34px} .note-callout .note-label{display:block;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;font-weight:500} .note-callout p{color:var(--muted);line-height:1.75;font-size:.95rem;margin:0} .closing-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:start} .closing-sig{border:1px solid var(--line);border-radius:16px;padding:32px;background:var(--ink-2)} .closing-sig p{color:var(--muted);line-height:1.75;margin-bottom:14px;font-size:.97rem} .closing-sig p.sig-final{color:var(--sand);font-family:var(--display);font-size:1.3rem;margin:18px 0 0} .closing-sig .btn{margin-top:22px} @media(max-width:900px){.closing-grid{grid-template-columns:1fr;gap:32px} .method{padding:28px 22px}.method-head{gap:13px}.method .num{width:44px;height:44px;font-size:1.25rem}} /* ===== Blog: index grid + article ===== */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .blog-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden; background:var(--ink-2);transition:.4s} .blog-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 24px 60px rgba(0,0,0,.4)} .blog-ph{aspect-ratio:16/10;background:var(--slate);overflow:hidden} .blog-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)} .blog-card:hover .blog-ph img{transform:scale(1.05)} .blog-body{padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;flex:1} .blog-date{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .blog-body h3{font-size:1.3rem;line-height:1.3} .blog-body p{color:var(--muted);font-size:.92rem;line-height:1.65;flex:1} .blog-more{font-size:.8rem;letter-spacing:.04em;color:var(--accent);font-weight:500} @media(max-width:980px){.blog-grid{grid-template-columns:1fr 1fr}} @media(max-width:700px){.blog-grid{grid-template-columns:1fr}} .post-hero{border-radius:16px;overflow:hidden;margin-bottom:44px;max-height:460px} .post-hero img{width:100%;height:100%;object-fit:cover;display:block} /* Long-form article body — authored in the admin editor. */ .article-body{max-width:72ch;margin:0 auto} .article-body h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:44px 0 16px} .article-body h3{font-size:1.3rem;margin:32px 0 12px;color:var(--gold)} .article-body h4{font-size:1.05rem;margin:24px 0 10px} .article-body p{color:var(--muted);line-height:1.8;margin-bottom:20px} .article-body strong{color:var(--sand);font-weight:500} .article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px} .article-body ul,.article-body ol{margin:0 0 22px 22px;display:flex;flex-direction:column;gap:9px} .article-body li{color:var(--muted);line-height:1.7} .article-body ul li{list-style:disc} .article-body ol li{list-style:decimal} .article-body img{width:100%;height:auto;border-radius:14px;margin:26px 0;display:block} .article-body blockquote{border-left:3px solid var(--accent);padding-left:20px;margin:26px 0; font-family:var(--display);font-size:1.2rem;color:var(--sand)} .article-body hr{border:none;border-top:1px solid var(--line);margin:34px 0} #postRoot .page-hero h1{max-width:24ch} #postRoot .page-hero .backlink{display:inline-block;margin-bottom:18px} #postMeta{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} /* ===== Guest reviews (fed by the admin API) ===== */ .reviews-sec{background:var(--ink-2)} .rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .rv-card{margin:0;border:1px solid var(--line);border-radius:16px;padding:28px 26px;background:var(--page); display:flex;flex-direction:column;gap:12px} .rv-stars{color:var(--accent-2);letter-spacing:2px;font-size:.95rem} .rv-off{color:var(--line)} .rv-card h4{font-family:var(--display);font-size:1.2rem} .rv-card blockquote{color:var(--muted);line-height:1.75;font-size:.95rem;flex:1} .rv-card figcaption{font-size:.85rem;color:var(--sand);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .rv-src{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); border:1px solid var(--line);border-radius:999px;padding:2px 8px} @media(max-width:980px){.rv-grid{grid-template-columns:1fr 1fr}} @media(max-width:700px){.rv-grid{grid-template-columns:1fr}} /* Palette picker in the demo panel. */ #panel .panel-title{font-family:var(--display);font-size:1.15rem;color:var(--sand);margin:2px 0 6px} #panel .pals{display:flex;flex-direction:column;gap:7px} #panel button.pal{display:flex;align-items:center;gap:11px;width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:none;cursor:pointer;transition:.2s} #panel button.pal:hover{border-color:var(--muted)} #panel button.pal.active{border-color:var(--accent);background:rgba(255,255,255,.05)} #panel .pal-sw{display:inline-flex;border-radius:5px;overflow:hidden;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.14)} #panel .pal-sw i{width:14px;height:22px;display:block} #panel .pal-name{font-size:.82rem;color:var(--sand);font-weight:500} /* Suite detail: "what's included" checklist (orange brand checks). */ .incl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 34px;margin-top:8px} .incl{display:flex;gap:13px;align-items:flex-start} .incl .ic{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink,#fff);font-size:.78rem;font-weight:700;margin-top:2px} .incl b{display:block;margin-bottom:3px;font-size:1rem} .incl p{color:var(--muted);font-size:.9rem;line-height:1.55} @media(max-width:760px){.incl-grid{grid-template-columns:1fr}} /* Homepage collection: section header with a compact destination filter on the right. */ .coll-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 32px;flex-wrap:wrap;margin-bottom:44px} .coll-head .sec-head{margin-bottom:0} .mini-filter{display:flex;gap:8px;flex-wrap:wrap} @media(max-width:680px){.coll-head{align-items:flex-start}} /* Brand palette: soft baby-blue wash so the light sections don't read flat-white. */ html[data-palette="brand"] body{background:linear-gradient(180deg,#DFEAF6,#EFF5FA 440px)} html[data-palette="brand"] section.pad{background:linear-gradient(180deg,rgba(150,196,230,.22),rgba(150,196,230,0) 260px)} html[data-palette="brand"] .final{background:linear-gradient(180deg,rgba(150,196,230,0),rgba(150,196,230,.26))} /* Hero glass flicker fix: backdrop-filter over the crossfading/scaling slides repaints in Chrome. Promote the glass + slides to stable GPU layers. */ .book-widget,.book-panel{transform:translateZ(0);backface-visibility:hidden;isolation:isolate} .slide{backface-visibility:hidden} /* Estimate disclosure that travels with a market comparison figure. */ .comp-note{font-size:.68rem;line-height:1.4;color:var(--muted);margin-top:8px} /* ============ COOKIE CONSENT ============ */ /* Sits below .modal's z-index (200) on purpose: if someone opens the reservation form while the banner is still up, the form takes the front. */ .ckb{position:fixed;left:0;right:0;bottom:0;z-index:190;padding:0 18px 18px;display:flex;justify-content:center;pointer-events:none} .ckb-card{pointer-events:auto;width:100%;max-width:860px;display:flex;align-items:center;gap:26px;padding:22px 26px;border-radius:18px; background:linear-gradient(145deg,rgba(18,42,49,.9),rgba(8,22,27,.94)); -webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%); border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22); transform:translateY(130%);opacity:0;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .45s} .ckb.in .ckb-card{transform:none;opacity:1} .ckb-copy b{display:block;font-family:var(--display);font-size:1.15rem;font-weight:500;margin-bottom:5px} .ckb-copy p{color:var(--muted);font-size:.82rem;line-height:1.55} .ckb-copy i{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--sand)} .ckb-now{margin-top:7px;color:var(--gold)!important} .ckb-actions{flex:none;display:flex;gap:10px} .ckb-actions .btn{padding:.8em 1.5em} @media(max-width:760px){ .ckb{padding:0 12px 12px} .ckb-card{flex-direction:column;align-items:stretch;gap:16px;padding:20px} .ckb-actions .btn{flex:1;justify-content:center} } @media(prefers-reduced-motion:reduce){.ckb-card{transition:opacity .2s;transform:none}}