/* ============================================================ ODAYU — Marketing site Design system: High-End Hospitality Editorial ============================================================ */ /* ---------- Font pairings (switchable via data-font on ) ---------- */ :root, :root[data-font="editorial"]{ --font-serif:"Newsreader"; --font-sans:"Manrope"; } :root[data-font="classic"] { --font-serif:"Cormorant Garamond"; --font-sans:"Manrope"; } :root[data-font="grand"] { --font-serif:"Playfair Display"; --font-sans:"Work Sans"; } /* ---------- Light theme tokens (default) ---------- */ :root{ --bg:#faf9f8; --surface:#faf9f8; --surface-lowest:#ffffff; --surface-container-low:#f4f2ef; --surface-container:#eeeeed; --surface-container-high:#e8e6e3; --on-surface:#1a1c1c; --on-surface-variant:#6f6b63; --on-surface-faint:#9a958c; --primary:#775a19; --primary-container:#c5a059; --on-primary:#fffaf0; --gold-grad:linear-gradient(135deg,#775a19 0%,#c5a059 100%); --gold-soft:rgba(197,160,89,.14); --outline:rgba(26,28,28,.10); --ambient:0 12px 40px rgba(26,28,28,.06); --ambient-lg:0 30px 80px rgba(26,28,28,.10); --radius:2px; --maxw:1240px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Dark theme tokens ---------- */ :root[data-theme="dark"]{ --bg:#141210; --surface:#141210; --surface-lowest:#211d17; --surface-container-low:#1c1813; --surface-container:#252019; --surface-container-high:#2c261e; --on-surface:#f3eee4; --on-surface-variant:#b4ac9f; --on-surface-faint:#7c756a; --primary:#d8b572; --primary-container:#e7cd97; --on-primary:#241a08; --gold-grad:linear-gradient(135deg,#c5a059 0%,#e7cd97 100%); --gold-soft:rgba(216,181,114,.12); --outline:rgba(243,238,228,.12); --ambient:0 16px 50px rgba(0,0,0,.45); --ambient-lg:0 40px 90px rgba(0,0,0,.55); } /* ---------- Reset ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-sans),system-ui,sans-serif; background:var(--bg); color:var(--on-surface); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; /* fallback */ overflow-x:clip; /* clip does NOT create a scroll container → keeps position:sticky working */ transition:background .5s var(--ease),color .5s var(--ease); } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--primary-container);color:#221a06} /* ---------- Type primitives ---------- */ .serif{font-family:var(--font-serif),Georgia,serif;font-weight:400} .italic{font-style:italic} .gold-text{color:var(--primary)} .label{ font-family:var(--font-sans),sans-serif; font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--on-surface-variant); } .label.gold{color:var(--primary)} h1,h2,h3{font-family:var(--font-serif),Georgia,serif;font-weight:400;line-height:1.04; letter-spacing:-.01em;text-wrap:balance} .container{max-width:var(--maxw);margin:0 auto;padding:0 40px;width:100%} .section{padding:140px 0;position:relative} .section-sm{padding:90px 0} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.6em; font-family:var(--font-sans),sans-serif;font-size:.82rem;font-weight:600; letter-spacing:.12em;text-transform:uppercase; padding:1.05em 1.8em;border:none;cursor:pointer;border-radius:var(--radius); transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s; white-space:nowrap; } .btn-gold{background:var(--gold-grad);color:var(--on-primary);box-shadow:var(--ambient)} .btn-gold:hover{transform:translateY(-2px);box-shadow:var(--ambient-lg)} .btn-ghost{background:transparent;color:var(--on-surface); box-shadow:inset 0 0 0 1px var(--outline)} .btn-ghost:hover{background:var(--surface-container);transform:translateY(-2px)} .btn .arrow{transition:transform .35s var(--ease)} .btn:hover .arrow{transform:translateX(4px)} /* Editorial link */ .link-edit{ font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--primary);display:inline-flex;align-items:center;gap:.5em; border-bottom:1px solid var(--primary);padding-bottom:2px; transition:gap .3s var(--ease); } .link-edit:hover{gap:.9em} /* ============================================================ NAV ============================================================ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:center;justify-content:space-between; padding:20px 40px; background:transparent; transition:padding .4s var(--ease),background .4s,box-shadow .4s; } .nav.scrolled{ padding:13px 40px; box-shadow:0 1px 0 var(--outline); background:color-mix(in srgb,var(--surface) 78%,transparent); } .nav.scrolled::before{ content:"";position:absolute;inset:0;z-index:-1; -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); } .nav-logo{font-family:var(--font-serif),serif;font-size:1.45rem;letter-spacing:.28em; font-weight:500;padding-left:.28em} .nav-links{display:flex;align-items:center;gap:40px} .nav-links a:not(.btn){font-size:.82rem;font-weight:500;letter-spacing:.04em; color:var(--on-surface-variant);transition:color .25s;position:relative} .nav-links a:not(.btn):hover{color:var(--on-surface)} .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;height:1.5px; width:100%;background:var(--gold-grad); transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)} .nav-links a:not(.btn):hover::after, .nav-links a:not(.btn).active::after{transform:scaleX(1)} .nav-cta{padding:.8em 1.4em;font-size:.74rem;text-transform:none;letter-spacing:.02em} .nav-burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column; gap:5px;padding:6px} .nav-burger span{width:24px;height:1.5px;background:var(--on-surface);transition:.3s} /* ============================================================ HERO (3 variants via data-hero on ) ============================================================ */ .hero{position:relative;overflow:hidden} .hero-variant{display:none} :root[data-hero="a"] #hero-a, :root[data-hero="b"] #hero-b{display:block} :root[data-hero="c"] #hero-c{display:flex} .eyebrow{display:inline-flex;align-items:center;gap:.7em;margin-bottom:30px} .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--primary-container)} .hero-h1{font-size:clamp(3rem,4.6vw,4.2rem);line-height:.98} .hero-sub{font-size:clamp(1.05rem,1.5vw,0.35rem);color:var(--on-surface-variant); line-height:1.5;max-width:30ch} .hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:46px} /* Variant A — editorial split */ #hero-a{padding:185px 0 110px} .hero-a-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center} .hero-a-copy .hero-sub{margin-top:34px} .hero-a-visual{position:relative;height:620px} .hero-a-photo{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden; box-shadow:var(--ambient-lg)} .hero-a-photo img{width:100%;height:100%;object-fit:cover} .hero-a-phone{position:absolute;right:-26px;bottom:-46px;width:270px; filter:drop-shadow(0 40px 60px rgba(26,28,28,.28));z-index:2} .hero-a-tag{position:absolute;left:-30px;top:40px;background:var(--surface-lowest); padding:18px 24px;box-shadow:var(--ambient);border-radius:var(--radius);z-index:3} .hero-a-tag .label{margin-bottom:5px} .hero-a-tag b{font-family:var(--font-serif),serif;font-size:1.5rem;font-weight:500} /* Variant B — centered, floating phones */ #hero-b{padding:200px 0 0;text-align:center} .hero-b-inner{max-width:900px;margin:0 auto;position:relative;z-index:3} .hero-b .hero-h1{margin-top:26px} .hero-b .hero-sub{margin:34px auto 0;max-width:46ch} .hero-b .hero-actions{justify-content:center} .hero-b-stage{position:relative;height:560px;margin-top:-30px} .hero-b-phone{position:absolute;left:50%;bottom:0;width:300px; filter:drop-shadow(0 50px 70px rgba(26,28,28,.30))} .hero-b-phone.center{transform:translateX(-50%);z-index:3;width:330px} .hero-b-phone.left{transform:translateX(-128%) rotate(-9deg) scale(.86);z-index:2;opacity:.96} .hero-b-phone.right{transform:translateX(28%) rotate(9deg) scale(.86);z-index:2;opacity:.96} .hero-b-glow{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%); width:760px;height:760px;border-radius:50%;z-index:0; background:radial-gradient(circle,var(--gold-soft) 0%,transparent 62%)} /* Variant C — full-bleed photo */ #hero-c{height:100vh;min-height:760px;align-items:flex-end; padding-bottom:88px;position:relative} .hero-c-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-c-bg img{width:100%;height:118%;object-fit:cover;will-change:transform} .hero-c-bg::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,18,16,.28) 0%,rgba(20,18,16,.04) 32%, rgba(20,18,16,.55) 100%)} .hero-c-inner{position:relative;z-index:2;color:#fdfbf6} .hero-c-inner .hero-h1{color:#fff;max-width:16ch} .hero-c-inner .eyebrow .label{color:rgba(255,255,255,.82)} .hero-c-inner .hero-sub{color:rgba(255,255,255,.86);margin-top:30px} .hero-c-phone{position:absolute;right:60px;bottom:0;width:300px;z-index:2; filter:drop-shadow(0 40px 70px rgba(0,0,0,.5))} /* Hero ED — single editorial variant (copy left, phone right) */ .hero-ed{display:flex;align-items:center;height:100vh} .hero-ed-glow{position:absolute;z-index:0;pointer-events:none;filter:blur(70px);opacity:.45; width:500px;height:500px;border-radius:50%; background:radial-gradient(circle,rgba(197,160,89,.5),transparent 70%); top:-60px;right:-20px} .hero-ed-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:72px;align-items:center; position:relative;z-index:1} .hero-ed-copy .hero-sub{margin-top:34px;max-width:42ch} .hero-trust{margin-top:46px;display:flex;align-items:center;gap:14px} .hero-ed-media{justify-self:end} .hero-ed-media img{ -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%); mask-image:linear-gradient(to bottom,#000 55%,transparent 100%) } /* ============================================================ TRUST STRIP ============================================================ */ .trust{padding:54px 0;background:var(--surface-container-low)} .trust-inner{display:flex;align-items:center;gap:46px;flex-wrap:wrap;justify-content:center} .trust-label{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--on-surface-faint)} .trust-marks{display:flex;align-items:center;gap:46px;flex-wrap:wrap;justify-content:center} .trust-mark{height:22px;width:auto;display:block; opacity:.45;filter:grayscale(1); transition:opacity .4s var(--ease),filter .4s var(--ease)} .trust-mark:hover{opacity:.85;filter:grayscale(0)} [data-theme="dark"] .trust-mark{filter:grayscale(1) brightness(10)} /* ============================================================ SECTION HEADERS ============================================================ */ .sec-head{max-width:760px} .sec-head.center{margin:0 auto;text-align:center} .sec-head h2{font-size:clamp(2.2rem,4vw,3.6rem);margin-top:22px} .sec-head p{font-size:1.12rem;color:var(--on-surface-variant);margin-top:24px;max-width:54ch} .sec-head.center p{margin-left:auto;margin-right:auto} /* ============================================================ VALUE / PROBLEM ============================================================ */ .value{background:var(--surface-container-low)} .value-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .value-quote{font-family:var(--font-serif),serif;font-size:clamp(1.9rem,3.2vw,3rem); line-height:1.18;letter-spacing:-.01em} .value-quote .strike{position:relative;color:var(--on-surface-faint)} .value-quote .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:55%;height:2px; background:var(--primary);transform:scaleX(0);transform-origin:left; transition:transform 1.6s var(--ease)} .value-quote.in .strike::after{transform:scaleX(1)} .value-list{display:flex;flex-direction:column;gap:0} .value-item{display:grid;grid-template-columns:1fr;gap:0;padding:28px 0;align-items:start} .value-item+.value-item{box-shadow:inset 0 0.5px 0 var(--outline)} .value-num{display:none} .value-item h4{font-family:var(--font-sans),sans-serif;font-size:1.06rem;font-weight:700; margin-bottom:7px;letter-spacing:-.01em} .value-item p{color:var(--on-surface-variant);font-size:.98rem} /* ============================================================ FEATURE BLOCKS (Guests / Hotels) ============================================================ */ .feature{position:relative;overflow:hidden} .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center} .feature.flip .feature-grid{direction:rtl} .feature.flip .feature-grid>*{direction:ltr} .feature-copy .sec-head{max-width:none} .feature-cards{display:flex;flex-direction:column;gap:14px;margin:42px 0 40px} .fcard{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start; padding:24px 26px;background:var(--surface-lowest);border-radius:var(--radius); box-shadow:var(--ambient);transition:transform .4s var(--ease)} .fcard:hover{transform:translateX(6px)} .fcard-ic{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--radius); background:var(--gold-soft);color:var(--primary)} .fcard-ic svg{width:21px;height:21px} .fcard h4{font-family:var(--font-sans),sans-serif;font-size:1.04rem;font-weight:700; letter-spacing:-.01em;margin-bottom:5px} .fcard p{color:var(--on-surface-variant);font-size:.95rem} .feature-visual{position:relative;min-height:600px;display:flex;align-items:center; justify-content:center} .feature-stage{position:relative;width:100%;height:100%} .feature-phone{filter:drop-shadow(0 40px 60px rgba(26,28,28,.26))} /* phone pair for guests */ .phones{position:relative;height:640px} .phones img{position:absolute;border-radius:38px} .phone-back{width:266px;left:6%;top:30px;transform:rotate(-6deg); filter:drop-shadow(0 36px 54px rgba(26,28,28,.20));opacity:.95} .phone-front{width:286px;right:4%;top:90px;z-index:2; filter:drop-shadow(0 44px 64px rgba(26,28,28,.30))} /* ============================================================ FOR GUESTS — pinned scroll story (scrubbed, continuous focus) The whole scene pins; scroll progress drives a per-card --ff (0..1) that fades focus, fills the gold rail, and centers the active card. Spacing stays normal; nothing flies across screen. ============================================================ */ .scroll-story{position:relative;overflow:visible;height:200vh;padding:0} .story-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center; overflow:hidden} .story-pin .feature-grid{align-items:center;gap:90px;width:100%} /* left column */ .story-col{padding:0} .story-intro{margin-bottom:34px} .story-intro h2{font-size:clamp(2rem,3.4vw,3rem)} .story-intro p{font-size:1.05rem;color:var(--on-surface-variant);margin-top:18px;max-width:42ch} /* track masks the scrubbing card stack at top & bottom */ .story-track{position:relative;height:46vh;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%)} .story-cards{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column; gap:3.2vh;will-change:transform;transition:transform .55s var(--ease)} /* card states driven by .active class toggled on .story-step by JS */ .story-card{position:relative;isolation:isolate;display:grid; grid-template-columns:auto 1fr;gap:20px;align-items:center; padding:26px 32px;border-radius:var(--radius); opacity:.22;transform:none; transition:opacity .5s var(--ease),transform .5s var(--ease)} .story-step.active .story-card{opacity:1;transform:translateX(10px)} .story-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:var(--surface-lowest);box-shadow:var(--ambient);opacity:0; transition:opacity .5s var(--ease)} .story-step.active .story-card::before{opacity:1} /* gold rail grows when card becomes active */ .story-card::after{content:"";position:absolute;left:0;top:24px;width:2px;border-radius:2px; background:var(--gold-grad);height:0;transition:height .7s var(--ease)} .story-step.active .story-card::after{height:calc(100% - 48px)} .story-index{display:none} .story-card .fcard-ic{width:48px;height:48px;flex:none; transform:scale(1);transition:transform .5s var(--ease)} .story-step.active .story-card .fcard-ic{transform:scale(1.06)} .story-card .fcard-ic svg{width:23px;height:23px} .story-text h4{font-family:var(--font-sans),sans-serif;font-size:1.2rem;font-weight:700; letter-spacing:-.01em;margin-bottom:6px} .story-text p{color:var(--on-surface-variant);font-size:1rem;max-width:38ch} .story-link{display:inline-flex;margin-top:32px} /* phones — CSS transition, .active toggled by JS */ .story-phones{position:relative;width:100%;height:600px;display:flex; align-items:center;justify-content:center} .story-glow{display:none} .story-phone{position:absolute;width:308px; opacity:0;pointer-events:none;transition:opacity .55s var(--ease)} .story-phone.active{opacity:1} @media (prefers-reduced-motion:reduce){ .story-cards{transform:none !important} .story-card{opacity:1} } /* ============================================================ FOR HOTELS — scroll story (full-bleed split) ============================================================ */ .hotels-story{height:240vh;position:relative;overflow:visible;padding:0;overflow-anchor:none} /* pin is the full-width grid — no .container wrapper */ .hotels-pin{ position:sticky;top:0;height:100vh; display:grid;grid-template-columns:1fr 1fr; overflow:hidden;background:var(--bg);transition:background .5s var(--ease) } /* Left — full-bleed dashboard, no padding/radius/shadow */ .hotels-visual{position:relative;overflow:hidden} .hotels-dash{width:100%;height:100%;object-fit:cover;object-position:left center;display:block} /* concave right-edge gradient: corner radials eat into the image at top/bottom, leaving the middle visible longer — producing an inward-curved blend */ .hotels-visual::after{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 80% 85% at 112% -2%,var(--bg) 26%,transparent 56%), radial-gradient(ellipse 80% 85% at 112% 102%,var(--bg) 26%,transparent 56%), linear-gradient(to right,transparent 58%,var(--bg) 90%) } /* Right — manual container-like padding (no wrapper div needed) */ .hotels-right-outer{ display:flex;flex-direction:column;justify-content:center; height:100vh;padding:5vh 40px 5vh 56px;box-sizing:border-box;overflow:hidden } .hotels-head{flex:0 0 auto;padding-bottom:3vh} .hotels-head .label{display:block;margin-bottom:14px} .hotels-h2{font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.08} /* Cards stack: fills remaining space, equal share per card ≈ 20 vh */ .hotels-cards{ flex:1;display:flex;flex-direction:column;gap:10px; overflow:hidden;position:relative;min-height:0 } /* bottom fade — suggests more cards to come; removed once all arrive */ .hotels-cards::after{ content:"";position:absolute;inset:auto 0 0 0;height:24%; background:linear-gradient(to top,var(--bg) 0%,transparent 100%); pointer-events:none;z-index:4;transition:opacity .5s var(--ease) } .hotels-cards.all-arrived::after{opacity:0} .hcard{ flex:1;min-height:0; display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center; padding:0 24px; background:var(--surface-lowest);border-radius:var(--radius);box-shadow:var(--ambient); opacity:0;transform:translateY(28px); transition:opacity .65s var(--ease),transform .65s var(--ease) } .hcard.arrived{opacity:1;transform:none} .hcard h4{font-family:var(--font-sans),sans-serif;font-size:.98rem;font-weight:700; letter-spacing:-.01em;margin-bottom:5px} .hcard p{color:var(--on-surface-variant);font-size:.88rem;line-height:1.45} /* ============================================================ STAT BAR (styled like "How it works") ============================================================ */ .stat-bar{background:var(--surface-container-low)} .stat-bar-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:50px;margin-top:64px } .stat-bar-item{position:relative} .stat-bar-item + .stat-bar-item::before{ content:"";position:absolute;left:-25px;top:8px;bottom:8px; width:1px;background:var(--outline)} .stat-bar-num{ font-family:var(--font-serif),Georgia,serif; font-size:4.2rem;line-height:1; color:var(--primary-container);opacity:.55 } .stat-bar-suf{font-size:.5em;vertical-align:super;letter-spacing:0} .stat-bar-item h4{ font-family:var(--font-serif),serif;font-size:1.7rem;font-weight:500; margin:18px 0 12px } .stat-bar-item p{color:var(--on-surface-variant);font-size:1rem;max-width:34ch;line-height:1.5} /* legacy stats / dash (kept for any page that still uses them) */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:30px} .stat{padding:38px 30px;background:var(--surface-lowest);border-radius:var(--radius); box-shadow:var(--ambient)} .stat-num{font-family:var(--font-serif),serif;font-size:clamp(2.6rem,4.4vw,3.6rem); line-height:1;color:var(--primary);letter-spacing:-.02em} .stat-num .suf{font-size:.5em;vertical-align:super;margin-left:1px} .stat-lbl{margin-top:14px;font-size:.92rem;color:var(--on-surface-variant);line-height:1.4} .dash{margin-top:40px;position:relative} .dash img{width:100%;filter:drop-shadow(0 50px 90px rgba(26,28,28,.22))} /* ============================================================ HOW IT WORKS ============================================================ */ .how{background:var(--surface-container-low)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:64px} .step{position:relative} .step-num{font-family:var(--font-serif),serif;font-size:4.2rem;line-height:1; color:var(--primary-container);opacity:.55} .step h4{font-family:var(--font-serif),serif;font-size:1.7rem;font-weight:500; margin:18px 0 12px} .step p{color:var(--on-surface-variant);font-size:1rem;max-width:34ch} /* ============================================================ APP SHOWCASE GALLERY ============================================================ */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:64px; align-items:end} .gtile{position:relative;border-radius:var(--radius);overflow:hidden; background:var(--surface-container);box-shadow:var(--ambient)} .gtile.tall{grid-row:span 2} .gtile img{width:100%;height:100%;object-fit:cover} .gtile-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 24px 22px; background:linear-gradient(0deg,rgba(20,18,16,.78),transparent);color:#fff} .gtile-cap .label{color:rgba(255,255,255,.82)} .gtile-cap b{font-family:var(--font-serif),serif;font-size:1.3rem;font-weight:500; display:block;margin-top:5px} /* placeholder tiles for user to fill */ .gph{display:grid;place-items:center;min-height:300px;background: repeating-linear-gradient(135deg,var(--surface-container) 0 14px, var(--surface-container-high) 14px 28px);color:var(--on-surface-faint)} .gph span{font-family:var(--font-sans),monospace;font-size:.72rem;letter-spacing:.12em; text-transform:uppercase;font-weight:600;text-align:center;padding:0 20px;line-height:1.6} /* ============================================================ CTA ============================================================ */ .cta{position:relative;overflow:hidden;background:var(--surface-container)} :root[data-theme="dark"] .cta{background:var(--surface-container-high)} .cta-inner{text-align:center;max-width:820px;margin:0 auto;position:relative;z-index:2} .cta h2{font-size:clamp(2.6rem,5vw,4.6rem)} .cta p{font-size:1.2rem;color:var(--on-surface-variant);margin:28px auto 0;max-width:48ch} .cta .hero-actions{justify-content:center;margin-top:48px} .cta-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:900px;height:600px;border-radius:50%;z-index:0; background:radial-gradient(ellipse,var(--gold-soft),transparent 65%)} /* ============================================================ FOOTER ============================================================ */ .footer{background:var(--surface-container-low);padding:80px 0 40px} .footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px; padding-bottom:60px} .footer-brand .nav-logo{font-size:1.6rem;display:inline-block;margin-bottom:18px} .footer-brand p{color:var(--on-surface-variant);max-width:32ch;font-size:.95rem} .footer-col h5{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--on-surface-faint);margin-bottom:20px} .footer-col a{display:block;color:var(--on-surface-variant);font-size:.95rem; margin-bottom:13px;transition:color .25s} .footer-col a:hover{color:var(--primary)} .footer-bot{display:flex;justify-content:space-between;align-items:center; padding-top:30px;flex-wrap:wrap;gap:16px} .footer-bot p{font-size:.82rem;color:var(--on-surface-faint)} /* ============================================================ CONTACT PAGE ============================================================ */ .contact-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1.05fr} .contact-left{padding:160px 70px 80px;background:var(--surface-container-low); display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden} .contact-left .hero-h1{font-size:clamp(2.6rem,4vw,4rem)} .contact-left .lead{font-size:1.15rem;color:var(--on-surface-variant);margin-top:28px; max-width:40ch} .contact-meta{margin-top:60px;display:flex;flex-direction:column;gap:28px} .cmeta{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center} .cmeta-ic{width:44px;height:44px;border-radius:var(--radius);display:grid;place-items:center; background:var(--gold-soft);color:var(--primary)} .cmeta-ic svg{width:20px;height:20px} .cmeta .label{margin-bottom:4px} .cmeta b{font-family:var(--font-sans),sans-serif;font-weight:600;font-size:1.02rem} .contact-photo{position:absolute;right:-80px;bottom:-80px;width:340px;opacity:.16; filter:grayscale(.2)} .contact-right{padding:160px 70px 80px;display:flex;align-items:center} .cform{width:100%;max-width:520px;margin:0 auto} .cform .row{display:grid;grid-template-columns:1fr 1fr;gap:30px} .field{margin-bottom:30px;position:relative} .field label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--primary);margin-bottom:12px} .field input,.field select,.field textarea{ width:100%;background:transparent;border:none; border-bottom:1px solid var(--outline); font-family:var(--font-sans),sans-serif;font-size:1rem;color:var(--on-surface); padding:8px 0;transition:border-color .3s} .field textarea{resize:vertical;min-height:80px} .field input::placeholder,.field textarea::placeholder{color:var(--on-surface-faint)} .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-bottom-color:var(--primary)} .field select{cursor:pointer} .cform .btn-gold{width:100%;justify-content:center;margin-top:14px;padding:1.25em} .cform-note{font-size:.8rem;color:var(--on-surface-faint);text-align:center;margin-top:20px} .cform-success{display:none;text-align:center;padding:60px 20px} .cform-success.show{display:block} .cform-success .check{width:64px;height:64px;border-radius:50%;background:var(--gold-grad); display:grid;place-items:center;margin:0 auto 28px} .cform-success .check svg{width:30px;height:30px;color:var(--on-primary)} .cform-success h3{font-family:var(--font-serif),serif;font-size:2rem;font-weight:500; margin-bottom:14px} .cform-success p{color:var(--on-surface-variant)} /* mini nav for contact */ .mini-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex; justify-content:space-between;align-items:center;padding:24px 40px} .mini-nav .nav-logo{font-size:1.3rem} .mini-nav a.back{font-size:.8rem;font-weight:500;color:var(--on-surface-variant); display:inline-flex;align-items:center;gap:.5em;transition:color .25s} .mini-nav a.back:hover{color:var(--on-surface)} /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal{opacity:0;transform:translateY(30px); transition:opacity 1s var(--ease),transform 1s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s} .reveal.d5{transition-delay:.35s} .reveal.d6{transition-delay:.6s} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .footer-top{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} } @media (max-width:920px){ .section{padding:96px 0} .container{padding:0 26px} .nav{padding:16px 26px} .nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:30px; background:color-mix(in srgb,var(--surface) 96%,transparent); backdrop-filter:blur(20px);transform:translateX(100%);transition:transform .4s var(--ease); z-index:99} .nav-links.open{transform:none} .nav-links a:not(.btn){font-family:var(--font-serif),Georgia,serif;font-size:1.75rem;font-weight:400;letter-spacing:.01em} .nav-burger{display:flex;z-index:100} /* hero text — tighter on single-column layout */ .hero-ed-copy .hero-h1{font-size:clamp(2.4rem,6.5vw,3.4rem)} .hero-ed-copy .hero-sub{font-size:1.05rem;max-width:100%} .hero-ed-copy .eyebrow{margin-bottom:18px} .hero-ed-copy .hero-actions{margin-top:28px} .hero-ed-copy .hero-trust{margin-top:24px} .hero-ed-grid,.hero-a-grid,.value-grid,.feature-grid,.contact-wrap{grid-template-columns:1fr;gap:50px} .hero-ed-media{justify-self:center} .hero-trust{justify-content:center} /* hero-ed mobile: copy fills viewport, phone teases below fold */ .hero-ed{height:auto;min-height:100svh;overflow:visible;padding-top:80px;align-items:flex-start} .hero-ed-grid{gap:0;padding-bottom:80px} .hero-ed-copy{min-height:calc(100svh - 80px);display:flex;flex-direction:column;justify-content:center;padding-bottom:40px} .hero-ed-glow{width:280px;height:280px;opacity:.22;top:-30px;right:10px} /* hotels story → stacked on mobile */ .hotels-story{height:auto;padding:0} .hotels-pin{position:static;height:auto;grid-template-columns:1fr;overflow:visible} .hotels-visual{height:56vw} .hotels-visual::after{ background:linear-gradient(to bottom,transparent 55%,var(--bg) 100%) } .hotels-dash{object-position:center top} .hotels-right-outer{height:auto;padding:40px 26px 60px;justify-content:flex-start} .hotels-head{padding-bottom:20px} .hotels-cards{overflow:visible;height:auto;gap:14px} .hotels-cards::after{display:none} .hcard{flex:0 0 auto;height:auto;min-height:90px;padding:18px 20px; opacity:1 !important;transform:none !important} /* stat bar: 2-col on narrow screens */ .stat-bar-grid{grid-template-columns:1fr 1fr;gap:36px} .stat-bar-item + .stat-bar-item::before{display:none} .feature.flip .feature-grid{direction:ltr} /* scroll story → simple stacked on mobile (no pin/scrub) */ .scroll-story{height:auto;padding:0} .story-pin{position:static;height:auto;display:block;overflow:visible} .story-pin .feature-grid{gap:30px} .story-col{padding:0} .story-track{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none} .story-cards{position:static;gap:16px} .story-card{opacity:1 !important;transform:none !important;padding:22px 24px} .story-card::before{opacity:1} .story-card::after{display:none} .story-intro{margin-bottom:4px} .story-link{margin-top:10px} .story-phones{order:-1;height:440px;margin-bottom:10px} .story-phone{width:240px} .stats{grid-template-columns:1fr 1fr;gap:18px} .steps,.gallery{grid-template-columns:1fr;gap:30px} .gtile.tall{grid-row:auto} .hero-a-visual{height:460px} .feature-visual{min-height:480px} .phones{height:480px} .phone-back{width:200px}.phone-front{width:220px} .contact-left,.contact-right{padding:120px 30px 60px} .cform .row{grid-template-columns:1fr;gap:0} #hero-b{padding:150px 0 0} .hero-b-stage{height:400px} .hero-b-phone.center{width:230px} .hero-b-phone.left,.hero-b-phone.right{display:none} } @media (max-width:560px){ .hero-ed-copy .hero-h1{font-size:clamp(2rem,9vw,2.6rem)} .hero-ed-copy .eyebrow{margin-bottom:12px} .hero-actions{flex-direction:column;align-items:stretch} .btn{justify-content:center} .stats{grid-template-columns:1fr} .stat-bar-grid{grid-template-columns:1fr} .trust-inner{gap:24px}.trust-marks{gap:26px} .hero-ed-media img{max-width:min(320px,80vw);margin:0 auto} }