/* ============================================================ Palm Springs Resort — Nashik Design tokens and structure recovered from the original site, refined for a more premium finish. ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} :root{ --primary:#0c0c0c; --primary-light:#1a1a1a; --accent:#c8a97d; --accent-hover:#b8955f; --accent-light:#e4d3b8; --accent-glow:rgba(200,169,125,.25); --dark:#060606; --light:#f5f2ed; --cream:#faf8f5; --white:#ffffff; --gray-100:#f0ede8; --gray-200:#e0dbd4; --gray-300:#bbb5ac; --gray-400:#8e8880; --gray-500:#6b655d; --gray-600:#4a453e; --gray-700:#2e2a25; --font-heading:"Playfair Display",Georgia,serif; --font-numeral:"Bodoni Moda","Playfair Display",Georgia,serif; --font-body:"DM Sans",-apple-system,BlinkMacSystemFont,sans-serif; --shell:1360px; --gutter:clamp(22px,5vw,64px); --section-padding:clamp(88px,11vw,156px); --radius:4px; --radius-lg:6px; --shadow-xs:0 1px 3px rgba(0,0,0,.04); --shadow-sm:0 4px 20px rgba(0,0,0,.06); --shadow-md:0 18px 48px rgba(12,12,12,.10); --shadow-lg:0 34px 80px rgba(12,12,12,.18); --shadow-glow:0 8px 32px var(--accent-glow); --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --duration:.5s; --glass-bg:rgba(12,12,12,.72); --glass-border:rgba(255,255,255,.06); --glass-blur:blur(12px); /* was 24px: same look, far cheaper for Safari to redraw while scrolling */ } /* overflow-x belongs on , not . Setting it on body alone makes the body's overflow-y compute to `auto`, which turns the body into a second scroll container — and in any frame that constrains the body's height (the hosted preview on a phone, for instance) that container draws its own vertical scrollbar down the right edge, on top of the page's real one. */ html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden; /* the page still scrolls normally; only the bar itself is hidden */ scrollbar-width:none;-ms-overflow-style:none} /* Unqualified on purpose: scoped to html/body this does not reach the viewport scrollbar in Safari. */ ::-webkit-scrollbar{width:0;height:0;display:none} *{scrollbar-width:none} body{ font-family:var(--font-body);color:var(--primary);background:var(--white); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; line-height:1.6; } h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:500;line-height:1.1;letter-spacing:-.02em} a{text-decoration:none;color:inherit;transition:all var(--duration) var(--ease-out)} img{max-width:100%;height:auto;display:block} ul{list-style:none} button{font-family:inherit} /* a class-level display must not defeat the hidden attribute */ [hidden]{display:none!important} ::selection{background:var(--accent);color:var(--white)} .shell{max-width:var(--shell);margin:0 auto;width:100%} .section{padding:var(--section-padding) var(--gutter);position:relative} /* ---------- section headers ---------- */ .section-header{text-align:center;margin-bottom:clamp(48px,6vw,76px)} .section-subtitle{ font-family:var(--font-body);font-size:.66rem;font-weight:600;letter-spacing:.42em; text-transform:uppercase;color:var(--accent);margin-bottom:20px; display:flex;align-items:center;justify-content:center;gap:16px; } .section-subtitle:before,.section-subtitle:after{content:"";width:34px;height:1px;background:var(--accent);opacity:.45} .section-subtitle.align-left{justify-content:flex-start} .section-subtitle.align-left:after{display:none} .section-title{ font-size:clamp(2.1rem,3.8vw,3.4rem);color:var(--primary); margin-bottom:22px;font-weight:400;letter-spacing:-.025em; } .section-desc{max-width:560px;margin:0 auto;color:var(--gray-500);font-size:.94rem;line-height:1.85;font-weight:300} /* ---------- buttons ---------- */ .btn-primary,.btn-outline,.btn-dark{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:17px 42px;font-family:var(--font-body);font-size:.68rem;font-weight:600; letter-spacing:.24em;text-transform:uppercase;border-radius:2px;cursor:pointer; transition:all var(--duration) var(--ease-out);position:relative;overflow:hidden; border:1.5px solid transparent; } .btn-primary{background:var(--accent);color:var(--white);border-color:var(--accent)} .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-3px);box-shadow:var(--shadow-glow)} .btn-primary:active{transform:translateY(-1px)} .btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35);backdrop-filter:blur(4px)} .btn-outline:hover{background:var(--white);color:var(--primary);border-color:var(--white);transform:translateY(-3px)} .btn-dark{background:var(--primary);color:var(--white);border-color:var(--primary)} .btn-dark:hover{background:transparent;color:var(--primary);transform:translateY(-3px)} /* ---------- animations ---------- */ @keyframes fadeInUp{from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeInDown{from{opacity:0;transform:translateY(-32px)}to{opacity:1;transform:translateY(0)}} @keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes slideUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}} @keyframes heroFloat{ 0%,100%{transform:translate(0) rotate(0)} 25%{transform:translate(15px,-20px) rotate(3deg)} 50%{transform:translate(-10px,15px) rotate(-2deg)} 75%{transform:translate(20px,10px) rotate(4deg)} } @keyframes scrollPulse{0%,100%{opacity:1;height:48px}50%{opacity:.3;height:30px}} @keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* scroll reveal */ .reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)} .reveal.revealed{opacity:1;transform:translateY(0)} /* ============================================================ TOP BAR + NAVBAR ============================================================ */ .top-bar{ background:var(--primary);padding:9px var(--gutter);position:fixed;top:0;left:0;width:100%; z-index:1001;transition:transform .45s var(--ease-out),opacity .45s var(--ease-out); } .top-bar.hidden{transform:translateY(-100%);opacity:0} .top-bar-container{max-width:var(--shell);margin:0 auto;display:flex;justify-content:space-between;align-items:center} .top-bar-left{display:flex;gap:30px} .top-bar-left a{color:rgba(255,255,255,.55);font-size:.67rem;letter-spacing:.04em;display:flex;align-items:center;gap:8px} .top-bar-left a i{color:var(--accent);font-size:.64rem} .top-bar-left a:hover{color:var(--accent)} .top-bar-right{display:flex;gap:18px} .top-bar-right a{color:rgba(255,255,255,.45);font-size:.72rem} .top-bar-right a:hover{color:var(--accent);transform:translateY(-2px)} .navbar{ position:fixed;top:36px;left:0;width:100%;padding:18px var(--gutter);z-index:1000; transition:all .5s var(--ease-out);background:transparent; } .navbar.scrolled{ top:0;padding:12px var(--gutter);background:var(--glass-bg); backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--glass-border);box-shadow:0 8px 32px rgba(0,0,0,.25); } .nav-container{max-width:var(--shell);margin:0 auto;display:flex;justify-content:space-between;align-items:center} .logo .logo-img{height:54px;width:auto;transition:all .4s var(--ease-out);filter:brightness(0) invert(1)} .navbar.scrolled .logo .logo-img{height:42px} .nav-links{display:flex;align-items:center;gap:4px} /* call / WhatsApp block belongs to the mobile drawer only */ .nav-links .nav-meta{display:none} .nav-links li a{ color:rgba(255,255,255,.82);font-size:.68rem;font-weight:500;letter-spacing:.16em; text-transform:uppercase;padding:10px 15px;position:relative;display:inline-block; } .nav-links li a:after{ content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%) scaleX(0); width:18px;height:1.5px;background:var(--accent);transition:transform .35s var(--ease-out); } .nav-links li a:hover,.nav-links li a.active{color:var(--white)} .nav-links li a:hover:after,.nav-links li a.active:after{transform:translateX(-50%) scaleX(1)} .nav-links .nav-cta{ padding:12px 28px!important;background:var(--accent);color:var(--white)!important; border-radius:2px;letter-spacing:.2em;margin-left:14px;font-weight:600; } .nav-links .nav-cta:after{display:none} .nav-links .nav-cta:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-glow)} .nav-right{display:none;align-items:center;gap:18px} .nav-phone{ color:var(--white);font-size:1rem;width:40px;height:40px;display:flex;align-items:center; justify-content:center;border:1px solid rgba(255,255,255,.18);border-radius:50%; } .nav-phone:hover{border-color:var(--accent);color:var(--accent)} .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1001;padding:6px;background:none;border:none} .hamburger span{width:23px;height:1.5px;background:var(--white);transition:all .4s var(--ease-out);transform-origin:center;display:block} .hamburger.active span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)} .hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)} .hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)} /* ============================================================ HERO ============================================================ */ .hero{ position:relative;height:100vh;min-height:720px;display:flex;flex-direction:column; justify-content:center;align-items:center;text-align:center;color:var(--white);overflow:hidden; } .hero-slider{position:absolute;inset:0} .hero-slider .slide{ position:absolute;inset:0;background-size:cover;background-position:center; opacity:0;transform:scale(1.1);transition:opacity 1.6s ease,transform 9s linear; } .hero-slider .slide.active{opacity:1;transform:scale(1)} .hero-overlay{ position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(6,6,6,.52) 0%,rgba(6,6,6,.26) 34%,rgba(6,6,6,.42) 64%,rgba(6,6,6,.88) 100%); } .hero-decorations{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .hero-deco{position:absolute;border:1px solid rgba(200,169,125,.12);border-radius:50%} .hero-deco-1{width:400px;height:400px;top:-100px;right:-80px;animation:heroFloat 20s ease-in-out infinite} .hero-deco-2{width:250px;height:250px;bottom:18%;left:-60px;animation:heroFloat 16s ease-in-out infinite reverse} .hero-deco-3{width:120px;height:120px;top:30%;right:15%;background:radial-gradient(circle,rgba(200,169,125,.06) 0%,transparent 70%);animation:heroFloat 12s ease-in-out infinite 2s} .hero-content{position:relative;z-index:2;max-width:940px;padding:0 var(--gutter)} .hero-label{ display:flex;align-items:center;justify-content:center;gap:18px;font-size:.7rem;font-weight:500; letter-spacing:.55em;text-transform:uppercase;color:var(--accent);margin-bottom:26px; animation:fadeInDown 1s var(--ease-out) both; } .hero-label .label-line{width:46px;height:1px;background:var(--accent);opacity:.6;display:inline-block} .hero-title{ font-size:clamp(3rem,7.4vw,6.2rem);font-weight:400;line-height:.98;margin-bottom:26px;letter-spacing:-.03em; animation:fadeInUp 1s var(--ease-out) .25s both; background:linear-gradient(135deg,#fff 0%,#e8e0d4 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .hero-title .hero-title-accent{ font-style:italic; background:linear-gradient(135deg,var(--accent-light) 0%,var(--accent) 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .hero-subtitle{ font-size:clamp(.72rem,1.1vw,.92rem);font-weight:300;letter-spacing:.32em;text-transform:uppercase; opacity:.78;margin-bottom:14px;animation:fadeInUp 1s var(--ease-out) .45s both; } .hero-location{ font-size:.8rem;font-weight:300;opacity:.55;margin-bottom:46px;letter-spacing:.05em; animation:fadeInUp 1s var(--ease-out) .55s both; } .hero-location i{color:var(--accent);margin-right:7px;font-size:.74rem} .hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;animation:fadeInUp 1s var(--ease-out) .7s both} .hero-features{ position:absolute;bottom:0;left:0;width:100%;background:var(--glass-bg); backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur); border-top:1px solid var(--glass-border);display:flex;justify-content:center;align-items:center; padding:24px var(--gutter);z-index:3;animation:fadeInUp 1s var(--ease-out) 1.1s both; } .hero-features .feature-item{display:flex;align-items:center;gap:11px;padding:0 clamp(18px,3vw,40px);transition:all .3s} .hero-features .feature-item i{font-size:.98rem;color:var(--accent)} .hero-features .feature-item span{font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap} .hero-features .feature-item:hover{transform:translateY(-2px)} .hero-features .feature-divider{width:1px;height:26px;background:rgba(255,255,255,.1)} .slider-controls{position:absolute;bottom:108px;right:var(--gutter);display:flex;align-items:center;gap:16px;z-index:3} .slider-controls button{ width:42px;height:42px;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:50%; color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center; transition:all .35s var(--ease-out);font-size:.72rem; } .slider-controls button:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.08)} .slider-dots{display:flex;align-items:center;gap:10px} .slider-dots span{ width:22px;height:2px;background:rgba(255,255,255,.22);cursor:pointer;position:relative; overflow:hidden;transition:width .45s var(--ease-out),background .45s var(--ease-out); } .slider-dots span.active{width:46px;background:rgba(255,255,255,.2)} .slider-dots span.active:after{ content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left; animation:dotFill 5s linear forwards; } .scroll-indicator{ position:absolute;bottom:108px;left:var(--gutter);display:flex;flex-direction:column;align-items:center; gap:10px;z-index:3;cursor:pointer;transition:opacity .3s;background:none;border:none;color:var(--white); } .scroll-indicator:hover{opacity:.7} .scroll-indicator .scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,var(--accent),transparent);animation:scrollPulse 2.5s infinite ease-in-out} .scroll-indicator span{font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl;opacity:.5} /* ============================================================ ABOUT ============================================================ */ .about{background:var(--white);overflow:hidden} .about-container{ max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:1fr 1.12fr; gap:clamp(48px,7vw,110px);align-items:center; } /* Layered two-photo composition. Both photos are landscape rectangles. The smaller one sits high and clips only the top corner of the larger one — the corner that is plain ceiling in these interiors — so nothing of interest is covered. Swapping in photos of any shape keeps the same composition. */ .photo-stack{position:relative;aspect-ratio:1.58;width:100%} /* taller composition in the about block, so the two columns balance */ .about-container .photo-stack{aspect-ratio:1.45} .photo-stack .photo-main,.photo-stack .photo-sub{ position:absolute;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg); } .photo-stack .photo-main{left:0;bottom:0;width:70%;height:74%} .photo-stack .photo-sub{right:0;top:0;width:52%;height:50%;border:7px solid var(--white);z-index:2} /* mirrored, for compositions that sit to the right of their text */ .photo-stack--mirror .photo-main{left:auto;right:0} .photo-stack--mirror .photo-sub{right:auto;left:0} .photo-stack .photo-main img,.photo-stack .photo-sub img{ width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out); } .photo-stack:hover .photo-main img{transform:scale(1.04)} .photo-stack:hover .photo-sub img{transform:scale(1.05)} /* one gold bracket, on the outer corner of the larger photo */ .photo-stack:before{ content:"";position:absolute;width:78px;height:78px;opacity:.5;z-index:3;pointer-events:none; left:-16px;bottom:-16px;border-bottom:1.5px solid var(--accent);border-left:1.5px solid var(--accent); } .photo-stack--mirror:before{left:auto;right:-16px;border-left:none;border-right:1.5px solid var(--accent)} .about-content .section-header{text-align:left;margin-bottom:26px} .about-text{color:var(--gray-500);line-height:1.9;margin-bottom:18px;font-size:.92rem;font-weight:300} /* hairline highlight grid (replaces boxed cards) */ /* Full-width hairline strip beneath the two columns. It used to live inside the text column, which made that column far taller than the photo composition and left a large empty block beside the photos on wide screens. */ .about-highlights{ max-width:var(--shell);margin:clamp(54px,6vw,84px) auto 0; display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100); } .about-highlights .highlight{ display:flex;align-items:flex-start;gap:15px;padding:30px 30px 30px 0; border-right:1px solid var(--gray-100);transition:all .4s var(--ease-out); } .about-highlights .highlight + .highlight{padding-left:30px} .about-highlights .highlight:last-child{border-right:none;padding-right:0} .about-highlights .highlight:hover{background:linear-gradient(180deg,rgba(200,169,125,.06),transparent)} .about-highlights .highlight-icon{color:var(--accent);font-size:1.05rem;margin-top:3px;flex-shrink:0;width:22px} .about-highlights h4{font-family:var(--font-body);font-size:.82rem;font-weight:600;color:var(--primary);margin-bottom:5px;letter-spacing:.01em} .about-highlights p{font-size:.74rem;color:var(--gray-400);font-weight:300;line-height:1.6} /* ============================================================ STATS ============================================================ */ .stats-section{background:var(--primary);padding:clamp(60px,7vw,84px) var(--gutter);position:relative;overflow:hidden} .stats-section:before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at 30% 50%,rgba(200,169,125,.09) 0%,transparent 70%); } .stats-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative} .stat-item{text-align:center;padding:16px 20px;position:relative} .stat-item:not(:last-child):after{content:"";position:absolute;right:0;top:18%;height:64%;width:1px;background:rgba(255,255,255,.09)} .stat-icon{font-size:1.25rem;color:var(--accent);margin-bottom:18px;opacity:.85} .stat-value{ font-family:var(--font-numeral);font-size:clamp(2.3rem,4.2vw,3.4rem);font-weight:600; font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1; /* Bodoni Moda's optical-size axis thins strokes as type grows; at display size that drops the 4's diagonal entirely. Pin the axis low and keep the weight up. */ font-optical-sizing:none;font-variation-settings:"opsz" 11; color:var(--white);letter-spacing:-.03em;line-height:1;margin-bottom:14px; background:linear-gradient(135deg,#fff 20%,var(--accent-light) 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .stat-label{font-size:.6rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.42)} /* Travelers' Choice, sitting under the figures */ .stats-award{position:relative;margin-top:34px;text-align:center} .award-pill{ display:inline-flex;align-items:center;gap:11px; padding:11px 26px;border-radius:100px; border:1px solid rgba(200,169,125,.32);background:rgba(200,169,125,.07); font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:var(--accent-light); } .award-pill i{color:var(--accent);font-size:.9rem} /* ============================================================ ROOM CARDS ============================================================ */ .teaser-section{position:relative} .teaser-grid{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .teaser-card{ display:block;background:var(--white);border-radius:var(--radius);overflow:hidden; border:1px solid rgba(12,12,12,.05);box-shadow:var(--shadow-xs); transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .55s var(--ease-out); } .teaser-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:var(--accent-glow)} .teaser-img{position:relative;aspect-ratio:3/2;overflow:hidden} .teaser-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)} .teaser-card:hover .teaser-img img{transform:scale(1.07)} .teaser-img:after{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(to top,rgba(6,6,6,.5) 0%,rgba(6,6,6,.06) 36%,transparent 58%), linear-gradient(to bottom,rgba(6,6,6,.4) 0%,transparent 22%); } .teaser-card-number{ position:absolute;top:18px;left:20px;z-index:2;font-family:var(--font-heading);font-size:.9rem; font-weight:400;color:var(--accent-light);opacity:.85;letter-spacing:.06em; } .teaser-badge{ position:absolute;top:18px;right:20px;z-index:2;background:var(--accent);color:var(--white); font-size:.55rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:6px 13px;border-radius:2px; } .teaser-info{padding:24px 24px 26px} .teaser-info h3{font-size:1.22rem;font-weight:400;color:var(--primary);margin-bottom:8px;transition:color .35s} .teaser-card:hover .teaser-info h3{color:var(--accent-hover)} .teaser-size{font-size:.72rem;color:var(--gray-400);letter-spacing:.1em;font-weight:300;text-transform:uppercase} .teaser-cta{ display:flex;align-items:center;gap:9px;margin-top:18px;padding-top:16px; border-top:1px solid var(--gray-100);font-size:.62rem;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--gray-400);transition:color .4s var(--ease-out); } .teaser-card:hover .teaser-cta{color:var(--accent)} .teaser-cta i{font-size:.6rem;transition:transform .4s var(--ease-out)} .teaser-card:hover .teaser-cta i{transform:translateX(5px)} /* ---------- single contained image (events) ---------- Sits on the same margins as every other section. A single photo, so the layered composition stays a signature move rather than a repeated one. */ .single-img{overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)} .single-img img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;transition:transform 1.1s var(--ease-out)} .single-img:hover img{transform:scale(1.04)} /* ---------- staggered pair, no overlap (dining) ---------- */ .photo-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} .duo-item{margin:0;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)} .duo-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease-out)} .duo-item:hover img{transform:scale(1.05)} .photo-duo .duo-item:last-child{margin-top:clamp(32px,5vw,68px)} /* ============================================================ SPLIT FEATURE SECTIONS (events / dining) ============================================================ */ .teaser-split{ max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:1fr 1fr; gap:clamp(48px,7vw,96px);align-items:center; } .teaser-split.reverse .teaser-split-img{order:2} .teaser-split.reverse .teaser-split-content{order:1} .teaser-split-content .section-title{text-align:left;margin-bottom:22px} .teaser-split-content p{color:var(--gray-500);font-size:.93rem;line-height:1.9;font-weight:300;margin-bottom:28px;max-width:52ch} .split-highlights{display:flex;flex-direction:column;gap:14px;margin-bottom:36px} .split-highlight-item{ font-size:.82rem;font-weight:300;color:var(--gray-600);display:flex;align-items:center;gap:13px; padding-bottom:13px;border-bottom:1px solid var(--gray-100);max-width:420px; } .split-highlight-item i{font-size:.58rem;color:var(--accent)} /* dark variant */ .section-dark{background:var(--primary);color:var(--white)} .section-dark .section-title{color:var(--white)} .section-dark .teaser-split-content p{color:rgba(255,255,255,.58)} .section-dark .split-highlight-item{color:rgba(255,255,255,.72);border-bottom-color:rgba(255,255,255,.08)} .section-dark .photo-stack .photo-sub{border-color:var(--primary)} /* ============================================================ AMENITIES ============================================================ */ .amenities{background:var(--dark);color:var(--white);padding:clamp(76px,9vw,110px) var(--gutter)} .amenities .section-header{margin-bottom:52px} .amenities .section-title{color:var(--white);font-size:clamp(1.8rem,3vw,2.6rem)} .amenities-strip{max-width:1180px;margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap;gap:12px} .amenity-item{ display:flex;align-items:center;gap:11px;padding:16px 28px;border:1px solid rgba(255,255,255,.08); border-radius:2px;background:rgba(255,255,255,.02);transition:all .4s var(--ease-out); } .amenity-item i{color:var(--accent);font-size:.95rem} .amenity-item span{font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap} .amenity-item:hover{background:rgba(200,169,125,.08);border-color:var(--accent);transform:translateY(-3px)} /* ============================================================ TESTIMONIALS ============================================================ */ .testimonials{background:var(--cream);position:relative;overflow:hidden} .testimonials-slider{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .testimonial-card{ background:var(--white);padding:46px 38px 40px;border-radius:var(--radius); border:1px solid rgba(12,12,12,.04);box-shadow:var(--shadow-xs);position:relative; transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease-out); } .testimonial-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--accent-glow)} .quote-icon{margin-bottom:24px} .quote-icon i{font-size:1.7rem;color:var(--accent);opacity:.32} .testimonial-text{ font-family:var(--font-heading);font-size:1.02rem;line-height:1.75;color:var(--gray-600); margin-bottom:28px;font-style:italic;font-weight:400; } .stars{margin-bottom:24px} .stars i{color:var(--accent);font-size:.74rem;margin-right:3px} .testimonial-author{display:flex;align-items:center;gap:15px;padding-top:24px;border-top:1px solid var(--gray-100)} .author-avatar{ width:46px;height:46px;background:var(--primary);color:var(--accent-light);border-radius:50%; display:flex;align-items:center;justify-content:center;font-family:var(--font-heading); font-weight:500;font-size:.85rem;letter-spacing:.04em;flex-shrink:0; } .testimonial-author h4{font-family:var(--font-body);font-size:.85rem;font-weight:600;color:var(--primary);margin-bottom:2px} .testimonial-author span{font-size:.67rem;color:var(--gray-400);letter-spacing:.06em} /* ============================================================ CTA BANNER ============================================================ */ .cta-banner{ position:relative;padding:clamp(110px,13vw,190px) var(--gutter);text-align:center; color:var(--white);overflow:hidden; background:url(/images/cta-bg.webp) center/cover no-repeat fixed; } .cta-overlay{ position:absolute;inset:0; background:linear-gradient(135deg,rgba(6,6,6,.84) 0%,rgba(12,12,12,.74) 50%,rgba(6,6,6,.88) 100%); } .cta-decoration{position:absolute;inset:0;pointer-events:none;z-index:1} .cta-deco-line{position:absolute;width:1px;height:120px;background:linear-gradient(to bottom,transparent,var(--accent),transparent);opacity:.22} .cta-deco-line.left{top:20%;left:12%;transform:rotate(-15deg)} .cta-deco-line.right{bottom:15%;right:10%;transform:rotate(15deg)} .cta-content{position:relative;z-index:2;max-width:720px;margin:0 auto} .cta-eyebrow{ display:inline-block;font-size:.63rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase; color:var(--accent);margin-bottom:30px;position:relative;padding:0 26px; } .cta-eyebrow:before,.cta-eyebrow:after{content:"";position:absolute;top:50%;width:38px;height:1px;background:var(--accent);opacity:.4} .cta-eyebrow:before{right:100%} .cta-eyebrow:after{left:100%} .cta-content h2{ font-size:clamp(2.2rem,4.6vw,3.7rem);font-weight:400;margin-bottom:22px;letter-spacing:-.025em;line-height:1.08; background:linear-gradient(135deg,#fff 0%,#d9ccbb 50%,#fff 100%);background-size:200% 200%; animation:gradientShift 8s ease infinite; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .cta-content p{font-size:.94rem;font-weight:300;opacity:.6;margin-bottom:44px;letter-spacing:.02em;line-height:1.75} .cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} /* ============================================================ FOOTER ============================================================ */ .footer{background:var(--dark);color:var(--white)} .footer-top{padding:clamp(72px,9vw,96px) var(--gutter) 60px} .footer-container{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.35fr;gap:clamp(36px,5vw,56px)} .footer-logo{display:inline-block;margin-bottom:24px} .footer-logo-img{height:50px;width:auto;filter:brightness(0) invert(1)} .footer-brand > p{color:rgba(255,255,255,.42);font-size:.82rem;line-height:1.9;margin-bottom:30px;font-weight:300;max-width:38ch} .social-links{display:flex;gap:9px} .social-links a{ width:38px;height:38px;border:1px solid rgba(255,255,255,.1);border-radius:50%; display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.48);font-size:.8rem; } .social-links a:hover{background:var(--accent);border-color:var(--accent);color:var(--white);transform:translateY(-3px);box-shadow:0 6px 20px var(--accent-glow)} .footer-links h4,.footer-contact h4{ font-family:var(--font-body);font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase; margin-bottom:28px;color:var(--white);position:relative;padding-bottom:14px; } .footer-links h4:after,.footer-contact h4:after{content:"";position:absolute;bottom:0;left:0;width:24px;height:1.5px;background:var(--accent)} .footer-links ul li{margin-bottom:13px} .footer-links ul li a{color:rgba(255,255,255,.42);font-size:.82rem;font-weight:300;display:inline-block} .footer-links ul li a:hover{color:var(--accent);transform:translateX(5px)} .footer-info p{ color:rgba(255,255,255,.42);font-size:.82rem;line-height:1.75;margin-bottom:15px; display:flex;gap:13px;align-items:flex-start;font-weight:300; } .footer-info p i{color:var(--accent);margin-top:5px;width:14px;flex-shrink:0;font-size:.74rem} .footer-info p a{color:rgba(255,255,255,.42)} .footer-info p a:hover{color:var(--accent)} .btn-footer{margin-top:24px;padding:14px 32px;font-size:.63rem} .footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:24px var(--gutter)} .footer-bottom-inner{max-width:var(--shell);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px} .footer-bottom-inner p{color:rgba(255,255,255,.26);font-size:.72rem;font-weight:300} .footer-bottom-links{display:flex;gap:28px} .footer-bottom-links a{color:rgba(255,255,255,.26);font-size:.72rem} .footer-bottom-links a:hover{color:var(--accent)} /* ============================================================ RESPONSIVE ============================================================ */ /* ---------- mobile navigation drawer ---------- */ .nav-scrim{ position:fixed;inset:0;z-index:1000;background:rgba(6,6,6,.62); opacity:0;pointer-events:none;transition:opacity .38s var(--ease-out); } body.menu-open .nav-scrim{opacity:1;pointer-events:auto} /* The drawer lives inside .navbar. Once the page is scrolled the navbar gets a backdrop-filter, and a filtered element becomes the containing block for its fixed-position children — which collapsed the drawer into the 60px header and made it invisible. While the menu is open the navbar drops the filter (the scrim already dims the page) and rises above the scrim so the drawer paints over it. */ body.menu-open .navbar, body.menu-open .navbar.scrolled, body.menu-closing .navbar, body.menu-closing .navbar.scrolled{ /* No transition here on purpose. .navbar animates `all` over .5s, so the backdrop-filter used to fade out over half a second — and for as long as any filter remained, the navbar stayed the drawer's containing block. The drawer slid in 66px tall, then snapped to full height when the fade ended. Dropping the filter on the first frame keeps the slide-in one continuous motion. */ transition:none; z-index:1002;background:transparent;box-shadow:none;border-bottom-color:transparent; backdrop-filter:none;-webkit-backdrop-filter:none; } @media (max-width:1100px){ .top-bar{display:none} .navbar{top:0;padding:14px var(--gutter)} .nav-right{display:flex} /* the drawer covers this corner, so the close control has to sit above it */ .hamburger{display:flex;position:relative;z-index:1002} .nav-links{ position:fixed;top:0;right:0;z-index:1001; /* Standard drawer sizing: caps at 320px so it never looks oversized on a big phone, and always leaves 56px of the page visible so it reads as a panel over the page rather than a new screen. */ width:min(320px,calc(100vw - 56px));height:100%; /* opaque, not translucent: the page behind was showing through and the menu was unreadable */ background:#0a0a0a; border-left:1px solid rgba(255,255,255,.06); display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch; padding:0 0 28px;gap:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; transform:translateX(101%); /* The drawer is parked just off the right edge. Its drop shadow is offset -26px with a 70px blur, so while it sat here the shadow still painted a ~96px dark band down the right side of every page. Shadow goes on only while the drawer is open; visibility:hidden keeps the parked panel out of the paint and out of the tab order entirely. */ box-shadow:none;visibility:hidden; transition:transform .42s cubic-bezier(.4,0,.2,1),visibility 0s linear .42s; will-change:transform;backface-visibility:hidden; } .nav-links.active{ transform:translateX(0);visibility:visible; box-shadow:-26px 0 70px rgba(0,0,0,.55); transition:transform .42s cubic-bezier(.4,0,.2,1),visibility 0s; } /* header strip at the top of the drawer, level with the close control */ .nav-links:before{ content:"Menu";display:flex;align-items:center; height:72px;flex-shrink:0;padding:0 26px; font-family:var(--font-body);font-size:.6rem;font-weight:400; letter-spacing:.34em;text-transform:uppercase;color:var(--accent); border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:10px; } .nav-links li{width:100%} .nav-links li a{ display:block;padding:15px 26px;font-size:.74rem;letter-spacing:.2em; text-align:left;color:rgba(255,255,255,.68);border-bottom:none; position:relative;transition:color .25s var(--ease-out),background .25s var(--ease-out),padding-left .25s var(--ease-out); } /* divider inset to the same 26px gutter the text sits on. The desktop rules centre and scale this pseudo-element, so hover/active are reset too or the current page's divider comes out half-width. */ .nav-links li a:after, .nav-links li a:hover:after, .nav-links li a.active:after{ display:block;content:"";position:absolute;left:26px;right:26px;bottom:0; width:auto;height:1px;background:rgba(255,255,255,.055);transform:none; } .nav-links li a:hover,.nav-links li a:focus-visible{ color:var(--white);background:rgba(255,255,255,.035);padding-left:32px; } .nav-links li a.active{color:var(--accent)} .nav-links li a.active:before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:3px;height:18px;background:var(--accent); } .nav-links li .nav-cta{ display:block;width:auto;text-align:center;margin:22px 26px 0; padding:15px 24px!important;border-bottom:none;letter-spacing:.22em; color:var(--white)!important;background:var(--accent); } .nav-links li .nav-cta:hover{padding-left:24px;background:var(--accent-hover)} .nav-links li .nav-cta.active:before{display:none} .nav-links li .nav-cta:after{display:none} /* call / WhatsApp, the two things people actually want on a phone. Inset to the same 26px gutter as everything else in the drawer. */ /* width:100% is inherited from .nav-links li; with 26px margins either side that came to 100% + 52px, which is exactly how far the drawer was scrolling sideways. width:auto lets the margins sit inside the panel. */ .nav-links .nav-meta{ display:block;width:auto;margin:auto 26px 0;padding:22px 0 0; border-top:1px solid rgba(255,255,255,.07); } .nav-links .nav-meta a{ display:flex;align-items:center;gap:11px;padding:9px 0; font-size:.76rem;font-weight:300;color:rgba(255,255,255,.55);letter-spacing:.02em; text-align:left;border-bottom:none; } .nav-links .nav-meta a:after{display:none} .nav-links .nav-meta a:hover{color:var(--accent);padding-left:0;background:none} .nav-links .nav-meta a i{color:var(--accent);width:15px;font-size:.8rem;text-align:center} } @media (max-width:968px){ .about-container{grid-template-columns:1fr;gap:clamp(60px,9vw,80px)} .photo-stack{max-width:620px;margin:0 auto} /* five figures: two rows of two, with the fifth centred across both */ .stats-grid{grid-template-columns:repeat(2,1fr);gap:14px} .stat-item:nth-child(2n):after{display:none} .stat-item:nth-child(5){grid-column:1 / -1} .stat-item:nth-child(5):after{display:none} .teaser-grid{grid-template-columns:repeat(2,1fr)} .teaser-split{grid-template-columns:1fr;gap:clamp(48px,8vw,64px)} .teaser-split.reverse .teaser-split-img,.teaser-split.reverse .teaser-split-content{order:unset} .teaser-split-content .section-title,.teaser-split-content p{text-align:left} .testimonials-slider{grid-template-columns:1fr;max-width:560px} .footer-container{grid-template-columns:1fr 1fr} .about-highlights{grid-template-columns:1fr 1fr} .about-highlights .highlight{padding:26px 24px 26px 0} .about-highlights .highlight + .highlight{padding-left:0} .about-highlights .highlight:nth-child(odd){border-right:1px solid var(--gray-100);padding-right:26px} .about-highlights .highlight:nth-child(even){border-right:none;padding-left:26px;padding-right:0} .about-highlights .highlight:nth-child(-n+2){border-bottom:1px solid var(--gray-100)} } @media (max-width:768px){ .hero{min-height:620px} .hero-features{display:none} .slider-controls{bottom:40px;right:50%;transform:translateX(50%)} .scroll-indicator{display:none} .section-subtitle{letter-spacing:.3em} .section-subtitle:before,.section-subtitle:after{width:20px} .amenity-item{padding:13px 20px} .amenity-item span{font-size:.62rem} } @media (max-width:560px){ .about-highlights{grid-template-columns:1fr} .about-highlights .highlight, .about-highlights .highlight:nth-child(odd), .about-highlights .highlight:nth-child(even){ padding:22px 0;border-right:none;border-bottom:1px solid var(--gray-100); } .about-highlights .highlight:last-child{border-bottom:none} .teaser-grid{grid-template-columns:1fr;max-width:420px} .stats-grid{grid-template-columns:repeat(2,1fr);gap:8px} .stat-item{padding:14px 8px} .award-pill{font-size:.58rem;letter-spacing:.14em;padding:10px 18px;gap:8px} .stat-item:after{display:none!important} .footer-container{grid-template-columns:1fr} .footer-bottom-inner{flex-direction:column;gap:12px;text-align:center} .photo-stack .photo-sub{width:46%;border-width:5px} .photo-stack:before{width:52px;height:52px} .testimonial-card{padding:36px 28px 32px} .cta-banner{background-attachment:scroll} } /* ---------- static-build helpers ---------- */ body.menu-open{overflow:hidden} .nav-links{list-style:none;margin:0;padding:0} @media (prefers-reduced-motion:reduce){ *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} .hero-slider .slide{transform:none} } /* ============================================================ INNER PAGES Structure recovered from the original site's component styles, refined to match the homepage's spacing and type. ============================================================ */ /* ---------- page banner (every inner page) ---------- */ .page-hero{ position:relative;height:56vh;min-height:420px;display:flex;align-items:center;justify-content:center; text-align:center;color:var(--white);background-size:cover;background-position:center;overflow:hidden; } .page-hero .hero-overlay{ position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(6,6,6,.72) 0%,rgba(6,6,6,.42) 34%,rgba(6,6,6,.52) 62%,rgba(6,6,6,.8) 100%); } .page-hero .hero-content{position:relative;z-index:2;max-width:900px;padding:90px var(--gutter) 0} .page-hero .hero-label{ font-family:var(--font-body);font-size:.64rem;font-weight:600;letter-spacing:.45em;text-transform:uppercase; color:var(--accent);display:block;margin-bottom:20px;animation:fadeInDown .8s var(--ease-out) .15s both; } .page-hero .hero-title{ font-size:clamp(2.3rem,5vw,4rem);font-weight:400;letter-spacing:-.025em;margin-bottom:22px; animation:fadeInUp .8s var(--ease-out) .3s both; background:linear-gradient(135deg,#fff 0%,#e0d6c8 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .page-hero .hero-breadcrumb{ font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;opacity:.65;display:flex; align-items:center;justify-content:center;gap:14px;animation:fadeInUp .8s var(--ease-out) .5s both; } .page-hero .hero-breadcrumb a:hover{color:var(--accent)} .page-hero .hero-breadcrumb i{font-size:.48rem;opacity:.4} .page-hero .hero-breadcrumb span{color:var(--accent)} .hero-bottom-line{ position:absolute;bottom:0;left:0;width:100%;height:3px;z-index:2;opacity:.5; background:linear-gradient(90deg,transparent 10%,var(--accent) 50%,transparent 90%); } /* ---------- rooms list ---------- */ .rooms-intro{background:var(--white)} .rooms-list{max-width:var(--shell);margin:0 auto;display:flex;flex-direction:column;gap:clamp(64px,8vw,104px)} .room-row{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,5vw,72px);align-items:center} .room-row.reverse .room-row-img{order:2} .room-row.reverse .room-row-content{order:1} .room-row-img{position:relative;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)} .room-row-img img{width:100%;height:clamp(320px,36vw,500px);object-fit:cover;transition:transform .9s var(--ease-out)} .room-row-img:hover img{transform:scale(1.04)} .room-row-img .room-tag{ position:absolute;top:20px;left:20px;padding:8px 22px;background:var(--accent);color:var(--white); font-size:.58rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;border-radius:2px; } .room-row-content h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:400;color:var(--primary);margin-bottom:18px;letter-spacing:-.02em} .room-row-content .room-desc{color:var(--gray-500);font-size:.9rem;line-height:1.9;font-weight:300;margin-bottom:32px} .room-specs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:36px} .room-specs .spec{display:flex;align-items:flex-start;gap:12px} .room-specs .spec i{color:var(--accent);font-size:.9rem;margin-top:3px;width:18px;flex-shrink:0} .room-specs .spec strong{ display:block;font-family:var(--font-body);font-size:.64rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--primary);margin-bottom:4px; } .room-specs .spec span{font-size:.8rem;color:var(--gray-400);font-weight:300;line-height:1.5} .room-row-actions{display:flex;gap:12px;flex-wrap:wrap} .room-row-actions .btn-dark,.room-row-actions .btn-primary{padding:14px 34px;font-size:.64rem} /* ---------- room detail ---------- */ .room-detail{background:var(--white)} .room-detail-grid{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(40px,5vw,64px);align-items:start} .rd-hero{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:44px;box-shadow:var(--shadow-md)} /* ---------- swipeable room photo gallery ---------- */ .rd-gallery{ /* Every gallery photograph is 3:2. Matching the frame to the photograph means object-fit has nothing left to crop, so nothing looks zoomed in — a fixed height cropped a different amount at every screen width. */ position:relative;width:100%;aspect-ratio:3/2;margin-bottom:44px; border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md); background:var(--gray-100);touch-action:pan-y;user-select:none;cursor:grab; } .rd-gallery.is-dragging{cursor:grabbing} .rd-track{display:flex;height:100%;will-change:transform; transition:transform .5s cubic-bezier(.4,0,.2,1)} .rd-gallery.is-dragging .rd-track{transition:none} .rd-slide{flex:0 0 100%;height:100%} .rd-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .rd-nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:44px;height:44px;border:none;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center; background:rgba(12,12,12,.42);color:var(--white);font-size:.85rem; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); opacity:0;transition:opacity .3s var(--ease-out),background .3s var(--ease-out); } .rd-prev{left:16px} .rd-next{right:16px} .rd-gallery:hover .rd-nav,.rd-nav:focus-visible{opacity:1} .rd-nav:hover{background:var(--accent)} .rd-nav[disabled]{opacity:0!important;pointer-events:none} .rd-dots{position:absolute;left:0;right:0;bottom:16px;z-index:2; display:flex;justify-content:center;gap:8px} .rd-dots button{ width:7px;height:7px;padding:0;border:none;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.45);transition:all .3s var(--ease-out); } .rd-dots button.active{background:var(--white);width:22px;border-radius:4px} .rd-count{ position:absolute;right:16px;bottom:14px;z-index:2; padding:5px 11px;border-radius:2px;background:rgba(12,12,12,.5); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:rgba(255,255,255,.75);font-size:.66rem;letter-spacing:.12em; } .rd-count b{color:var(--white);font-weight:500} @media (hover:none){ .rd-nav{display:none} } @media (max-width:560px){ .rd-count{right:12px;bottom:11px;font-size:.6rem} .rd-dots{bottom:13px} } .room-detail-main h2{font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:400;color:var(--primary);margin-bottom:20px;letter-spacing:-.02em} .room-detail-main h3{font-size:1.3rem;font-weight:400;color:var(--primary);margin-bottom:22px} .rd-desc{color:var(--gray-500);font-size:.92rem;line-height:1.9;font-weight:300;margin-bottom:48px} .floor-plan{margin-bottom:48px} .floor-plan img{width:100%;max-width:520px;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:14px;background:var(--cream)} .amenity-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .amenity-chip{ display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--cream); border-radius:var(--radius);border:1px solid rgba(12,12,12,.03);transition:all .35s var(--ease-out); } .amenity-chip:hover{background:var(--accent);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-glow)} .amenity-chip:hover i{color:var(--white)} .amenity-chip i{color:var(--accent);font-size:.9rem;transition:color .3s;flex-shrink:0} .amenity-chip span{font-size:.74rem;font-weight:500} .room-detail-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:104px} .detail-card{background:var(--cream);padding:clamp(28px,3vw,36px);border-radius:var(--radius-lg);border:1px solid rgba(12,12,12,.03)} .detail-card h3{font-size:1.15rem;font-weight:400;color:var(--primary);margin-bottom:22px} .detail-rows{margin-bottom:26px} .detail-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--gray-200)} .detail-row span{font-size:.76rem;color:var(--gray-400);flex-shrink:0} .detail-row strong{font-size:.76rem;font-weight:600;color:var(--primary);text-align:right} .other-rooms{display:flex;flex-direction:column} .other-room{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--gray-200);transition:transform .35s var(--ease-out)} .other-room:last-child{border-bottom:none} .other-room:hover{transform:translateX(5px)} .other-room img{width:74px;height:54px;object-fit:cover;border-radius:var(--radius);flex-shrink:0} .other-room strong{display:block;font-family:var(--font-heading);font-size:.92rem;font-weight:500;color:var(--primary);margin-bottom:3px} .other-room span{font-size:.66rem;color:var(--gray-400);letter-spacing:.06em} /* ---------- events ---------- */ .events-intro{background:var(--white)} .venue-cards{max-width:var(--shell);margin:0 auto 64px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .venue-card{ background:var(--cream);border-radius:var(--radius-lg);border:1px solid rgba(12,12,12,.03); border-bottom:3px solid var(--accent);overflow:hidden;transition:all .45s var(--ease-out); } .venue-card{display:block;color:inherit} .venue-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)} .venue-card:hover h3{color:var(--accent)} /* "View Venue" only appears once the card is a link people can follow */ .venue-more{ display:flex;align-items:center;justify-content:center;gap:9px; margin-top:20px;padding-top:16px;border-top:1px solid var(--gray-100); font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--gray-400);transition:color .3s var(--ease-out),gap .3s var(--ease-out); } .venue-more i{font-size:.6rem;transition:transform .3s var(--ease-out)} .venue-card:hover .venue-more{color:var(--accent)} .venue-card:hover .venue-more i{transform:translateX(4px)} .venue-card-top{padding:36px 28px 18px;text-align:center} .venue-icon{ width:54px;height:54px;background:var(--accent);color:var(--white);border-radius:50%;display:flex; align-items:center;justify-content:center;font-size:1.02rem;margin:0 auto 18px;transition:transform .4s var(--ease-spring); } .venue-card:hover .venue-icon{transform:scale(1.1)} .venue-card-top h3{font-size:1.18rem;font-weight:400;color:var(--primary);margin-bottom:6px} .venue-floor{font-size:.62rem;color:var(--gray-400);letter-spacing:.16em;text-transform:uppercase} .venue-card-body{padding:14px 28px 30px} /* one capacity figure per venue, in place of the old seating matrix */ .venue-capacity{ display:flex;align-items:baseline;justify-content:center;gap:9px; margin-top:18px;padding-top:18px;border-top:1px solid var(--gray-100); } .venue-capacity .cap-upto,.venue-capacity .cap-word{ font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-400); } .venue-capacity strong{ font-family:var(--font-numeral);font-size:1.5rem;font-weight:500; font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1; font-optical-sizing:none;font-variation-settings:"opsz" 11; color:var(--accent);letter-spacing:-.01em; } .venue-stat{text-align:center;margin-bottom:18px} .venue-stat .stat-value{ font-family:var(--font-numeral);font-size:2rem;font-weight:600;color:var(--primary); font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1; font-optical-sizing:none;font-variation-settings:"opsz" 11; background:none;-webkit-text-fill-color:currentColor;letter-spacing:-.02em; } .venue-stat .stat-label{font-size:.62rem;color:var(--gray-400);letter-spacing:.14em;text-transform:uppercase;margin-left:5px} .venue-capacities{display:flex;justify-content:center;gap:10px;flex-wrap:wrap} .venue-capacities .cap{text-align:center;padding:10px 15px;background:var(--white);border-radius:var(--radius)} .venue-capacities .cap strong{display:block;font-family:var(--font-heading);font-size:1.15rem;color:var(--accent);font-weight:500} .venue-capacities .cap span{font-size:.58rem;color:var(--gray-400);letter-spacing:.14em;text-transform:uppercase} .event-types{max-width:1000px;margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap;gap:12px} .event-type{display:flex;align-items:center;gap:10px;padding:15px 26px;border:1px solid var(--gray-200);border-radius:var(--radius);transition:all .35s var(--ease-out)} .event-type i{color:var(--accent);font-size:.92rem} .event-type h4{font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);transition:color .3s} .event-type:hover{background:var(--primary);border-color:var(--primary);transform:translateY(-3px)} .event-type:hover h4{color:var(--white)} .event-type:hover i{color:var(--accent-light)} /* ---------- dine ---------- */ .dine-intro{background:var(--white)} .dine-block{max-width:var(--shell);margin:0 auto clamp(64px,8vw,100px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center} .dine-block:last-child{margin-bottom:0} .dine-block.reverse .dine-block-img{order:2} .dine-block.reverse .dine-block-content{order:1} .dine-block-img{overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)} .dine-block-img img{width:100%;height:clamp(320px,38vw,520px);object-fit:cover;transition:transform .9s var(--ease-out)} .dine-block-img:hover img{transform:scale(1.04)} .dine-label{font-size:.64rem;font-weight:600;letter-spacing:.38em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;display:block} .dine-block-content h2{font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:400;color:var(--primary);margin-bottom:22px;letter-spacing:-.025em} .dine-block-content p{color:var(--gray-500);font-size:.92rem;line-height:1.9;font-weight:300;margin-bottom:30px} .dine-features{display:grid;grid-template-columns:1fr 1fr;gap:14px} .dine-features div{display:flex;align-items:center;gap:11px;padding:14px 18px;background:var(--cream);border-radius:var(--radius);transition:all .3s var(--ease-out)} .dine-features div:hover{background:var(--accent);transform:translateY(-2px)} .dine-features div:hover i,.dine-features div:hover span{color:var(--white)} .dine-features div i{color:var(--accent);font-size:.9rem;width:18px;transition:color .3s;flex-shrink:0} .dine-features div span{font-size:.76rem;color:var(--gray-600);font-weight:500;transition:color .3s} /* ---------- spa ---------- */ .spa-intro{background:var(--white)} .spa-layout{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,80px);align-items:center} .spa-img{position:relative;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)} .spa-img img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;transition:transform .9s var(--ease-out)} .spa-img:hover img{transform:scale(1.03)} .spa-badge{ position:absolute;bottom:22px;right:22px;width:66px;height:66px;background:var(--accent); border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1.35rem; } .spa-label{font-size:.64rem;font-weight:600;letter-spacing:.38em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:16px} .spa-content h2{font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:400;color:var(--primary);margin-bottom:22px;letter-spacing:-.025em} .spa-content p{color:var(--gray-500);font-size:.92rem;line-height:1.9;font-weight:300;margin-bottom:16px} .spa-services{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px} .spa-service{display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--cream);border-radius:var(--radius-lg);border:1px solid rgba(12,12,12,.02);transition:all .4s var(--ease-out)} .spa-service:hover{background:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-glow)} .spa-service:hover i,.spa-service:hover h4{color:var(--white)} .spa-service i{color:var(--accent);font-size:1.05rem;transition:color .3s} .spa-service h4{font-family:var(--font-body);font-size:.78rem;font-weight:600;color:var(--primary);transition:color .3s} .spa-cta{ position:relative;padding:var(--section-padding) var(--gutter);text-align:center;color:var(--white); background:url(/images/spa-cta.webp) center/cover no-repeat fixed; } .spa-cta-overlay{position:absolute;inset:0;background:rgba(6,6,6,.7)} .spa-cta-content{position:relative;z-index:2} .spa-cta-content h3{ font-size:clamp(1.8rem,3vw,2.6rem);font-weight:400;margin-bottom:14px;letter-spacing:-.02em; background:linear-gradient(135deg,#fff 0%,#d9ccbb 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .spa-cta-content p{font-size:.94rem;opacity:.6;margin-bottom:36px;font-weight:300} /* ---------- fitness ---------- */ .fitness-intro{background:var(--white)} .fitness-features{max-width:1120px;margin:0 auto 60px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .fitness-feature{ text-align:center;padding:clamp(38px,4vw,52px) 34px;background:var(--cream);border-radius:var(--radius-lg); border:1px solid rgba(12,12,12,.02);border-bottom:3px solid var(--accent);transition:all .45s var(--ease-out); } .fitness-feature:hover{transform:translateY(-10px);box-shadow:var(--shadow-md)} .fitness-feature .feature-icon{width:80px;height:80px;margin:0 auto 26px;display:flex;align-items:center;justify-content:center} .fitness-feature .feature-icon img{width:58px;height:58px;object-fit:contain;filter:sepia(1) saturate(.4) brightness(.65);transition:filter .3s} .fitness-feature:hover .feature-icon img{filter:sepia(0) brightness(.45)} .fitness-feature h3{font-size:1.22rem;font-weight:400;color:var(--primary);margin-bottom:14px} .fitness-feature p{font-size:.84rem;color:var(--gray-400);line-height:1.8;font-weight:300} .fitness-note{ max-width:580px;margin:0 auto;text-align:center;padding:26px 32px;background:var(--cream); border-radius:var(--radius-lg);border:1px solid rgba(12,12,12,.02);display:flex;align-items:center;justify-content:center;gap:16px; } .fitness-note i{color:var(--accent);font-size:1.35rem} .fitness-note p{font-size:.9rem;color:var(--gray-500);font-weight:300} .fitness-note p a{color:var(--accent);font-weight:600} .fitness-note p a:hover{text-decoration:underline} /* ---------- gallery ---------- */ .gallery-page{background:var(--white)} .gallery-filters{display:flex;justify-content:center;gap:8px;margin-bottom:44px;flex-wrap:wrap} .gallery-filters button{ padding:11px 25px;background:transparent;border:1px solid var(--gray-200);color:var(--gray-400); font-family:var(--font-body);font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; cursor:pointer;border-radius:2px;transition:all .35s var(--ease-out); } .gallery-filters button:hover,.gallery-filters button.active{background:var(--primary);color:var(--white);border-color:var(--primary);transform:translateY(-2px)} .gallery-masonry{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:265px;grid-auto-flow:row dense;gap:8px} .gallery-item{position:relative;overflow:hidden;cursor:pointer;border-radius:var(--radius)} .gallery-item.wide{grid-column:span 2} .gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)} .gallery-item:hover img{transform:scale(1.08)} .gallery-item .gallery-hover{ position:absolute;inset:0;background:rgba(6,6,6,.55);backdrop-filter:blur(4px);display:flex; flex-direction:column;align-items:center;justify-content:center;opacity:0;color:var(--white); transition:opacity .4s var(--ease-out);text-align:center;padding:16px; } .gallery-item:hover .gallery-hover,.gallery-item:focus-visible .gallery-hover{opacity:1} .gallery-hover i{font-size:1.15rem;color:var(--accent);margin-bottom:14px} .gallery-hover h4{font-size:.94rem;font-weight:500;margin-bottom:5px} .gallery-hover span{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-light)} .lightbox{ position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:9999;display:flex;flex-direction:column; align-items:center;justify-content:center;cursor:pointer;padding:24px; } .lightbox .lb-close{position:absolute;top:20px;right:28px;font-size:2.2rem;color:var(--white);background:none;border:none;cursor:pointer;opacity:.6;transition:all .3s;line-height:1} .lightbox .lb-close:hover{opacity:1;color:var(--accent)} .lightbox img{max-width:88%;max-height:78vh;object-fit:contain;border-radius:var(--radius)} .lightbox .lb-caption{color:rgba(255,255,255,.7);margin-top:16px;font-size:.8rem;letter-spacing:.08em} /* ---------- contact ---------- */ .contact-page{background:var(--white)} .contact-grid{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(44px,6vw,80px);align-items:start} .contact-info-section h2{font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:400;color:var(--primary);margin-bottom:12px;letter-spacing:-.025em} .contact-intro{color:var(--gray-400);font-size:.92rem;font-weight:300;margin-bottom:38px} .info-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px} .info-card{padding:26px;background:var(--cream);border-radius:var(--radius-lg);border:1px solid rgba(12,12,12,.02);transition:all .4s var(--ease-out)} .info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--accent-glow)} .info-icon{width:42px;height:42px;background:var(--accent);color:var(--white);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:.8rem;margin-bottom:16px} .info-card h4{font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);margin-bottom:8px} .info-card p{font-size:.81rem;color:var(--gray-400);line-height:1.7;font-weight:300} .info-card p a{color:var(--gray-400)} .info-card p a:hover{color:var(--accent)} .contact-social h4{font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px} .contact-social .social-links a{width:42px;height:42px;border:1px solid var(--gray-200);border-radius:50%;color:var(--gray-400);font-size:.82rem} .contact-social .social-links a:hover{background:var(--accent);border-color:var(--accent);color:var(--white);transform:translateY(-3px);box-shadow:var(--shadow-glow)} .contact-form-section{background:var(--cream);padding:clamp(32px,4vw,52px);border-radius:var(--radius-lg);border:1px solid rgba(12,12,12,.02)} .contact-form-section h3{font-size:1.4rem;font-weight:400;color:var(--primary);margin-bottom:30px} .form-group{margin-bottom:18px} .form-group label{display:block;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);margin-bottom:8px} .form-group input,.form-group textarea{ width:100%;padding:15px 18px;border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--white); font-family:var(--font-body);font-size:.85rem;color:var(--primary);outline:none;transition:border-color .3s,box-shadow .3s; } .form-group input:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)} .form-group input::placeholder,.form-group textarea::placeholder{color:var(--gray-300)} .form-group textarea{resize:vertical} .form-note{margin-top:18px;padding:16px 18px;background:rgba(200,169,125,.12);border-left:2px solid var(--accent);border-radius:2px;font-size:.8rem;color:var(--gray-600);line-height:1.7;font-weight:300} .form-note a{color:var(--accent-hover);font-weight:600} .contact-map iframe{width:100%;height:440px;display:block;filter:grayscale(.15) contrast(1.05)} /* ---------- inner page responsive ---------- */ @media (max-width:968px){ .room-row{grid-template-columns:1fr;gap:32px} .room-row.reverse .room-row-img,.room-row.reverse .room-row-content{order:unset} .room-detail-grid{grid-template-columns:1fr} .room-detail-side{position:static} .amenity-chips{grid-template-columns:repeat(2,1fr)} .venue-cards{grid-template-columns:1fr 1fr} .dine-block{grid-template-columns:1fr;gap:36px} .dine-block.reverse .dine-block-img,.dine-block.reverse .dine-block-content{order:unset} .spa-layout{grid-template-columns:1fr;gap:40px} .fitness-features{grid-template-columns:1fr;max-width:420px} .contact-grid{grid-template-columns:1fr;gap:48px} .info-cards{grid-template-columns:1fr} } @media (max-width:768px){ .page-hero{height:46vh;min-height:340px} .gallery-masonry{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px} .gallery-item.wide{grid-column:span 2} .spa-cta{background-attachment:scroll} .room-specs{grid-template-columns:1fr} .dine-features{grid-template-columns:1fr} .spa-services{grid-template-columns:1fr} } @media (max-width:560px){ .venue-cards{grid-template-columns:1fr} .gallery-masonry{grid-template-columns:1fr;grid-auto-rows:240px} .gallery-item.wide{grid-column:span 1} .fitness-note{flex-direction:column;gap:12px} } /* ---------- legal pages ---------- */ .legal-page{background:var(--white)} .legal-content{max-width:820px;margin:0 auto} .legal-updated{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-400);margin-bottom:40px} .legal-content h2{font-size:1.35rem;font-weight:400;color:var(--primary);margin:40px 0 14px;letter-spacing:-.02em} .legal-content h2:first-of-type{margin-top:0} .legal-content p{color:var(--gray-500);font-size:.92rem;line-height:1.95;font-weight:300;margin-bottom:16px} .legal-content ul{margin:0 0 16px;padding-left:0} .legal-content ul li{ color:var(--gray-500);font-size:.9rem;line-height:1.9;font-weight:300; padding-left:22px;margin-bottom:10px;position:relative; } .legal-content ul li:before{content:"";position:absolute;left:0;top:13px;width:6px;height:1px;background:var(--accent)} .legal-content a{color:var(--accent-hover);font-weight:500} .legal-content a:hover{text-decoration:underline} /* ---------- contact form states ---------- */ .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-note.is-error{background:rgba(180,60,40,.08);border-left-color:#b43c28;color:#7d2c1c} .form-note:focus{outline:2px solid var(--accent);outline-offset:3px} .form-alt{margin-top:16px;font-size:.78rem;color:var(--gray-400);font-weight:300;line-height:1.7} .form-alt a{color:var(--accent-hover);font-weight:600} .form-alt a:hover{text-decoration:underline} #contactSubmit[disabled]{opacity:.65;cursor:progress} /* ---------- clickable text: make links look like links ---------- Address, phone, email and WhatsApp text links are shown in the gold accent with an underline, so visitors can tell at a glance they can tap them. */ .info-card p a, .legal-content a{color:var(--accent-hover);font-weight:500;text-decoration:underline;text-decoration-color:rgba(184,149,95,.45);text-decoration-thickness:1px;text-underline-offset:4px} .info-card p a:hover, .legal-content a:hover{color:var(--primary);text-decoration-color:currentColor} .footer-info p a{color:var(--accent-light);text-decoration:underline;text-decoration-color:rgba(228,211,184,.35);text-decoration-thickness:1px;text-underline-offset:4px} .footer-info p a:hover{color:#fff;text-decoration-color:currentColor} /* text for screen readers only */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- contact page without the form (Sept 2026) ---------- The info column takes the full width; on desktop the five cards sit three to a row (address, phone, WhatsApp / email, front desk). */ .contact-grid--single{grid-template-columns:1fr} @media (min-width:969px){.contact-page .info-cards{grid-template-columns:repeat(3,1fr)}} /* ---------- clickable things must not move on hover (Sept 2026) ---------- These links and buttons used to lift or slide a few pixels on hover. A pointer resting near their edge (common right after scrolling) made them move out from under it, lose the hover, drop back, and so on — and a click landing in the "moved away" instant hit the background, so it needed a second click. They keep their colour, shadow and image-zoom effects; only the self-movement is removed. Decorative, non-clickable tiles still lift. */ .btn-primary:hover,.btn-outline:hover,.btn-dark:hover, .top-bar-right a:hover,.nav-links .nav-cta:hover, .teaser-card:hover,.venue-card:hover,.other-room:hover,.info-card:hover, .social-links a:hover,.contact-social .social-links a:hover, .footer-links ul li a:hover,.gallery-filters button:hover:not(.active){transform:none} /* ---------- Amber / Sway photo sliders on the dine page (Sept 2026) ---------- The room-page slider, fitted to the dine photo frame: same height as the single photo it replaced, so the layout does not move. */ .dine-block-img .rd-gallery{aspect-ratio:auto;height:clamp(320px,38vw,520px);margin-bottom:0;border-radius:0;box-shadow:none} .dine-block-img .rd-slide img{height:100%} /* Each photo zooms slightly on hover; clip it to its own slide, or the zoomed neighbour shows as a thin strip at the frame edge. */ .dine-block-img .rd-slide{overflow:hidden} /* ---------- touch screens: nothing clickable may "appear" (Sept 2026) ---------- iPhone Safari cancels a tap when something clickable starts to appear at that moment — it assumes the tap was a hover. So a card still finishing its scroll fade-in, or a hero button / breadcrumb still fading in at load, needed a second tap; gallery tiles showed their caption on the first tap. On devices without a real hover, these are simply shown. Desktop is unchanged. Non-clickable motion (slideshow cross-fade, headline shimmer) is harmless. */ @media (hover:none){ .reveal{opacity:1;transform:none;transition:none} .hero-actions,.page-hero .hero-breadcrumb{animation:none} .gallery-item:hover .gallery-hover{opacity:0} .gallery-item:hover img{transform:none} } /* ---------- homepage cover: load first, fade in, then start (Sept 2026) ---------- Dark behind the cover while it loads instead of a pale empty box; the first cover fades in when site.js reports it has arrived (html.js is set in the page head, so without JavaScript the cover simply shows). Phones held upright get a portrait slice of the first cover — same framing, about 40% of the bytes. The progress dash waits for the cover too. */ .hero{background:var(--primary)} .js #heroSlider:not(.is-ready) .slide{opacity:0} .js #heroSlider:not(.is-ready) ~ .slider-controls .slider-dots span.active:after{animation:none;transform:scaleX(0)} @media (max-width:760px) and (orientation:portrait){ .hero-slider .slide:first-child{background-image:url(/images/hero-0-m.webp)!important} }