/* ========================================================= CUSMANICH — Yacht Charter Showroom Dark cinematic luxury · scroll-driven motion Fonts loaded via in (preconnect + display=swap) ========================================================= */ :root{ --bg: #06121e; --bg-2: #081a29; --surface: #0c2236; --surface-2: #0f2a42; --gold: #c9a35e; --gold-soft: #dcc08a; --ink: #ece7dd; --ink-dim: #c3ccd4; --muted: #7e96aa; --muted-2: #5d7184; --line: rgba(201,163,94,.20); --line-soft: rgba(236,231,221,.09); --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Manrope', system-ui, -apple-system, sans-serif; --mono: 'Space Mono', ui-monospace, monospace; --ease: cubic-bezier(.16,1,.3,1); --gut: clamp(20px, 5vw, 90px); --maxw: 1500px; } *{ margin:0; padding:0; box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:400; line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* native cursor stays unless JS enables the custom one (no-JS safe) */ body.has-cursor{ cursor:none; } @media (max-width:880px){ body.has-cursor{ cursor:auto; } } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--gold); color:var(--bg); } /* subtle film grain over everything */ body::after{ content:""; position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.045; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ===== Custom cursor ===== */ .cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:9500; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); mix-blend-mode:difference; } .cursor-dot{ width:6px; height:6px; background:var(--gold); } .cursor-ring{ width:38px; height:38px; border:1px solid rgba(236,231,221,.6); transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .cursor-ring.is-hover{ width:64px; height:64px; background:rgba(201,163,94,.12); border-color:var(--gold); } @media (max-width:880px){ .cursor-dot,.cursor-ring{ display:none; } } /* ===== Scroll progress ===== */ .progress{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:9200; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--gold),var(--gold-soft)); } /* ===== Layout helpers ===== */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); } .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:14px; } .eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold); display:inline-block; opacity:.7; } .section{ position:relative; padding-block:clamp(90px,12vh,180px); } .section-tag{ position:absolute; top:36px; right:var(--gut); font-family:var(--mono); font-size:11px; letter-spacing:.28em; color:var(--muted-2); } /* ===== Reveal primitives ===== */ [data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:calc(var(--i,0)*90ms); } [data-reveal].in{ opacity:1; transform:none; } [data-fade]{ opacity:0; transition:opacity 1.4s var(--ease); transition-delay:calc(var(--i,0)*90ms); } [data-fade].in{ opacity:1; } /* line-split headline reveal */ .lines .line{ display:block; overflow:hidden; } .lines .line > span{ display:block; transform:translateY(110%); transition:transform 1.05s var(--ease); transition-delay:calc(var(--i,0)*80ms); } .lines.in .line > span{ transform:none; } /* ===== Buttons ===== */ .btn{ position:relative; display:inline-flex; align-items:center; gap:12px; white-space:nowrap; font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.04em; padding:16px 30px; border-radius:60px; overflow:hidden; border:1px solid var(--gold); color:var(--bg); background:var(--gold); transition:color .5s var(--ease); } .btn .lbl{ position:relative; z-index:2; } .btn .arr{ position:relative; z-index:2; transition:transform .5s var(--ease); } .btn:hover .arr{ transform:translateX(6px); } .btn::before{ content:""; position:absolute; inset:0; z-index:1; background:var(--ink); transform:translateY(101%); transition:transform .55s var(--ease); } .btn:hover{ color:var(--bg); } .btn:hover::before{ transform:translateY(0); } .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); } .btn.ghost::before{ background:var(--gold); } .btn.ghost:hover{ color:var(--bg); border-color:var(--gold); } /* ===== Placeholder media ===== */ .ph{ position:relative; overflow:hidden; background: repeating-linear-gradient(45deg, rgba(201,163,94,.05) 0 2px, transparent 2px 10px), linear-gradient(150deg,#0d2336 0%,#081623 60%,#0a1c2c 100%); border:1px solid var(--line-soft); } .ph[data-label]::after{ content:attr(data-label); position:absolute; left:0; right:0; bottom:14px; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--gold); opacity:.66; text-transform:uppercase; } .ph .crop{ position:absolute; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--muted-2); } .ph .crop.tl{ top:12px; left:14px; } .ph .crop.tr{ top:12px; right:14px; } .ph .crop.bl{ bottom:12px; left:14px; } /* ===== Real imagery (fills .ph containers) ===== */ .ph img{ width:100%; height:100%; object-fit:cover; display:block; } .hero-img{ width:100%; height:100%; object-fit:cover; object-position:center; } .brand-crest{ height:30px; width:auto; display:block; } @media (max-width:880px){ .brand-crest{ height:26px; } } .plat-hoverimg img{ width:100%; height:100%; object-fit:cover; display:block; } .foot-crest{ text-align:center; margin-bottom:34px; } .foot-crest img{ height:76px; width:auto; display:inline-block; opacity:.97; filter:drop-shadow(0 12px 32px rgba(0,0,0,.45)); } /* ===== Video showcase ===== */ .video-showcase{ position:relative; height:clamp(440px,88vh,940px); overflow:hidden; background:var(--bg-2); border-block:1px solid var(--line-soft); } .showcase-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .video-showcase::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(6,18,30,.5) 0%, rgba(6,18,30,.08) 38%, rgba(6,18,30,.86) 100%); } .showcase-overlay{ position:absolute; left:0; right:0; bottom:clamp(40px,7vh,84px); z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); } .showcase-overlay h2{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,5vw,72px); line-height:1.04; margin-top:18px; color:var(--ink); max-width:16ch; } .showcase-overlay h2 em{ font-style:italic; color:var(--gold); } .showcase-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.28em; color:var(--gold); margin-top:22px; text-transform:uppercase; } /* ===== FAQ ===== */ .faq .head{ max-width:680px; margin-bottom:50px; } .faq h2{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,5vw,72px); line-height:1.02; margin-top:24px; } .faq h2 em{ font-style:italic; color:var(--gold); } .faq-list{ max-width:1000px; margin-inline:auto; border-top:1px solid var(--line-soft); } .faq-item{ border-bottom:1px solid var(--line-soft); } .faq-item summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:28px 0; font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.2vw,30px); color:var(--ink); transition:color .4s var(--ease); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::marker{ content:""; } .faq-item summary:hover{ color:var(--gold); } body:not(.has-cursor) .faq-item summary{ cursor:pointer; } .faq-mark{ position:relative; flex:0 0 auto; width:18px; height:18px; } .faq-mark::before,.faq-mark::after{ content:""; position:absolute; background:var(--gold); transition:transform .4s var(--ease), opacity .4s var(--ease); } .faq-mark::before{ top:8px; left:0; width:18px; height:2px; } .faq-mark::after{ left:8px; top:0; width:2px; height:18px; } .faq-item[open] .faq-mark::after{ transform:scaleY(0); opacity:0; } .faq-a p{ color:var(--ink-dim); font-size:clamp(15px,1.1vw,17px); line-height:1.7; max-width:74ch; padding:0 0 28px; } .faq-a a{ color:var(--gold); transition:opacity .3s var(--ease); } .faq-a a:hover{ opacity:.75; } /* ===== Legal pages (privacy / legal notice) ===== */ .legal-hero{ padding:clamp(130px,20vh,200px) 0 clamp(36px,6vh,70px); border-bottom:1px solid var(--line-soft); } .legal-hero h1{ font-family:var(--serif); font-weight:300; font-size:clamp(44px,8vw,104px); line-height:1; margin-top:18px; } .legal-updated{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:24px; } .legal-body{ max-width:840px; } .legal-body .lead{ font-size:clamp(17px,1.5vw,21px); color:var(--ink-dim); line-height:1.6; margin-bottom:40px; } .legal-body h2{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,38px); color:var(--ink); margin:46px 0 16px; } .legal-body h3{ font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:.01em; color:var(--ink); margin:24px 0 8px; } .legal-body p{ color:var(--ink-dim); font-size:16px; line-height:1.75; margin-bottom:14px; } .legal-body ul{ list-style:none; padding:0; margin:0 0 18px; } .legal-body li{ position:relative; padding-left:22px; color:var(--ink-dim); font-size:16px; line-height:1.7; margin-bottom:10px; } .legal-body li::before{ content:""; position:absolute; left:0; top:12px; width:7px; height:1px; background:var(--gold); } .legal-body a{ color:var(--gold); transition:opacity .3s var(--ease); } .legal-body a:hover{ opacity:.75; } .legal-body strong{ color:var(--ink); font-weight:600; } .legal-dl{ border-top:1px solid var(--line-soft); margin:6px 0 8px; } .legal-dl > div{ display:flex; gap:24px; padding:14px 0; border-bottom:1px solid var(--line-soft); align-items:baseline; flex-wrap:wrap; } .legal-dl dt{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); flex:0 0 200px; } .legal-dl dd{ margin:0; color:var(--ink); font-size:16px; flex:1; min-width:220px; } /* ============================================================ NAV ============================================================ */ .nav{ position:fixed; top:0; left:0; width:100%; z-index:8000; display:flex; align-items:center; justify-content:space-between; padding:26px var(--gut); transition:padding .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease); border-bottom:1px solid transparent; } /* solid bar on scroll — NO backdrop-filter (it created a containing block that trapped the fixed mobile overlay) */ .nav.shrink{ padding-block:16px; background:rgba(6,18,30,.94); border-bottom-color:var(--line-soft); } /* readability scrim behind nav at the very top (fades out once nav gains its own bg) */ .nav::before{ content:""; position:absolute; left:0; right:0; top:0; height:180px; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(6,18,30,.65) 0%, rgba(6,18,30,.32) 46%, rgba(6,18,30,0) 100%); transition:opacity .5s var(--ease); } .nav.shrink::before{ opacity:0; } .brand{ font-family:var(--serif); font-size:24px; font-weight:500; letter-spacing:.32em; display:inline-flex; align-items:center; gap:13px; } .brand b{ color:var(--gold); font-weight:500; } .nav-links{ display:flex; align-items:center; gap:38px; } .nav-links a{ font-size:13px; letter-spacing:.05em; color:var(--ink-dim); position:relative; padding:6px 0; } .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .4s var(--ease); } .nav-links a:hover::after,.nav-links a.active::after{ width:100%; } .nav-links a.active{ color:var(--gold); } .nav-cta{ font-size:13px; letter-spacing:.05em; padding:12px 24px; border:1px solid var(--line); border-radius:50px; color:var(--ink); transition:background .4s var(--ease), color .4s var(--ease); } .nav-cta:hover{ background:var(--gold); color:var(--bg); border-color:var(--gold); } .burger{ display:none; flex-direction:column; gap:6px; background:none; border:none; cursor:pointer; } .burger span{ width:26px; height:2px; background:var(--ink); transition:.4s var(--ease); } @media (max-width:980px){ .nav-links{ position:fixed; inset:0; flex-direction:column; justify-content:center; gap:30px; background:rgba(6,18,30,.97); backdrop-filter:blur(10px); transform:translateY(-100%); transition:transform .6s var(--ease); } .nav-links.open{ transform:none; } /* when the menu is open, drop the nav's backdrop-filter — otherwise it makes .nav a containing block and traps the fixed overlay inside the ~68px bar */ html.menu-open{ overflow:hidden; } html.menu-open .nav{ backdrop-filter:none; -webkit-backdrop-filter:none; } .nav-links a{ font-size:22px; } .nav .nav-cta{ display:none; } .burger{ display:flex; z-index:8100; } .burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); } .burger.open span:nth-child(2){ opacity:0; } .burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); } } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; } .hero-bg{ position:absolute; inset:-12% 0 -12% 0; z-index:0; will-change:transform; } .hero-bg .ph{ width:100%; height:100%; border:none; } .hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,18,30,.62) 0%, rgba(6,18,30,.18) 28%, rgba(6,18,30,.55) 60%, rgba(6,18,30,.92) 86%, var(--bg) 100%); } .hero-grid{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut) clamp(48px,7vh,90px); } .hero h1{ font-family:var(--serif); font-weight:300; line-height:.98; letter-spacing:-.01em; font-size:clamp(52px,9vw,158px); } .hero h1 em{ font-style:italic; color:var(--gold); } .hero-sub{ display:flex; flex-wrap:wrap; gap:30px 60px; align-items:flex-end; justify-content:space-between; margin-top:42px; } .hero-sub p{ max-width:46ch; color:var(--ink-dim); font-size:clamp(15px,1.2vw,18px); } .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; } .hero-meta{ position:absolute; top:38%; right:var(--gut); text-align:right; font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--muted); line-height:2; z-index:2; } @media (max-width:1180px){ .hero-meta{ display:none; } } .scroll-cue{ position:absolute; left:var(--gut); bottom:30px; z-index:3; display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--muted); } .scroll-cue .rail{ width:1px; height:48px; background:var(--line-soft); position:relative; overflow:hidden; } .scroll-cue .rail::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--gold); animation:railRun 2.2s var(--ease) infinite; } @keyframes railRun{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(300%);} } /* ============================================================ MARQUEE ============================================================ */ .marquee{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:26px 0; overflow:hidden; white-space:nowrap; } .marquee-track{ display:inline-flex; gap:60px; will-change:transform; } .marquee-track span{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(28px,4vw,52px); color:var(--ink); opacity:.85; } .marquee-track span b{ color:var(--gold); font-weight:400; font-style:normal; font-size:.5em; vertical-align:middle; margin-right:60px; } /* ============================================================ ABOUT ============================================================ */ .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,110px); align-items:center; } @media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } } .about-text h2{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,4.6vw,68px); line-height:1.04; margin:26px 0 28px; } .about-text h2 em{ font-style:italic; color:var(--gold); } .about-text p{ color:var(--ink-dim); font-size:clamp(15px,1.15vw,18px); max-width:52ch; margin-bottom:22px; } .about-text .sig{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--muted); margin-top:30px; } .ta-trust{ display:inline-flex; align-items:center; gap:13px; margin-top:26px; padding:12px 20px; border:1px solid var(--line); border-radius:50px; transition:border-color .4s var(--ease), background .4s var(--ease); } .ta-trust:hover{ border-color:var(--gold); background:rgba(201,163,94,.08); } .ta-stars{ color:var(--gold); font-size:14px; letter-spacing:2px; } .ta-score{ font-family:var(--serif); font-size:22px; line-height:1; color:var(--ink); } .ta-meta{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .about-media{ position:relative; } .about-media .ph.main{ aspect-ratio:4/5; border-radius:4px; } .about-media .ph.float{ position:absolute; width:46%; aspect-ratio:1; right:-7%; bottom:-9%; border-radius:4px; box-shadow:0 30px 70px rgba(0,0,0,.5); } .about-media .badge{ position:absolute; left:-7%; top:8%; z-index:3; background:var(--bg); border:1px solid var(--line); border-radius:50%; width:128px; height:128px; display:grid; place-content:center; text-align:center; } .about-media .badge .n{ font-family:var(--serif); font-size:34px; color:var(--gold); line-height:1; } .about-media .badge .t{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--muted); margin-top:6px; } /* ============================================================ STATS ============================================================ */ .stats{ background:var(--bg-2); border-block:1px solid var(--line-soft); } .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); } @media (max-width:880px){ .stats-grid{ grid-template-columns:1fr 1fr; } } .stat{ padding:clamp(30px,4vw,60px) clamp(20px,3vw,46px); border-left:1px solid var(--line-soft); } .stat:first-child{ border-left:none; } @media (max-width:880px){ .stat:nth-child(odd){ border-left:none; } .stat:nth-child(n+3){ border-top:1px solid var(--line-soft); } } .stat .num{ font-family:var(--serif); font-weight:300; font-size:clamp(46px,6vw,92px); line-height:1; color:var(--ink); } .stat .num .suf{ color:var(--gold); } .stat .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:16px; } /* ============================================================ PLATFORMS ============================================================ */ .platforms .head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:56px; } .platforms h2{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,5vw,74px); line-height:1.02; } .platforms h2 em{ font-style:italic; color:var(--gold); } .plat-list{ border-top:1px solid var(--line-soft); } .plat{ position:relative; display:grid; grid-template-columns:64px 1.1fr 2fr auto; gap:30px; align-items:center; padding:34px 0; border-bottom:1px solid var(--line-soft); transition:padding .5s var(--ease); } .plat .idx{ font-family:var(--mono); font-size:12px; color:var(--muted-2); letter-spacing:.1em; } .plat .name{ font-family:var(--serif); font-size:clamp(26px,3vw,42px); font-weight:400; transition:color .4s var(--ease), transform .5s var(--ease); } .plat .desc{ color:var(--muted); font-size:15px; max-width:54ch; transition:color .4s var(--ease); } .plat .go{ width:54px; height:54px; border-radius:50%; border:1px solid var(--line); display:grid; place-content:center; color:var(--ink); transition:.5s var(--ease); } .plat .go svg{ width:18px; height:18px; transition:transform .5s var(--ease); } .plat:hover{ padding-inline:24px; } .plat:hover .name{ color:var(--gold); } .plat:hover .desc{ color:var(--ink-dim); } .plat:hover .go{ background:var(--gold); border-color:var(--gold); color:var(--bg); } .plat:hover .go svg{ transform:rotate(45deg); } /* hover image reveal */ .plat-hoverimg{ position:fixed; z-index:40; width:340px; aspect-ratio:3/2; border-radius:6px; overflow:hidden; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.85); transition:opacity .4s var(--ease), transform .4s var(--ease); box-shadow:0 30px 80px rgba(0,0,0,.6); } .plat-hoverimg.show{ opacity:1; transform:translate(-50%,-50%) scale(1); } @media (max-width:880px){ .plat{ grid-template-columns:40px 1fr auto; gap:16px; } .plat .desc{ display:none; } .plat-hoverimg{ display:none; } } /* ============================================================ DESTINATIONS — pinned horizontal scroll ============================================================ */ .dest-pin{ position:relative; } .dest-sticky{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; } .dest-head{ position:absolute; top:clamp(70px,9.5vh,104px); left:var(--gut); right:var(--gut); display:flex; justify-content:space-between; align-items:flex-end; z-index:3; pointer-events:none; } .dest-head h2{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,5vw,72px); text-shadow:0 2px 30px rgba(6,18,30,.6); } /* readability scrim behind the pinned header (cards sit just below it) */ @media (min-width:881px){ .dest-sticky::before{ content:""; position:absolute; inset:0 0 auto 0; height:clamp(220px,34vh,330px); z-index:2; pointer-events:none; background:linear-gradient(180deg, rgba(6,18,30,.92) 0%, rgba(6,18,30,.55) 48%, transparent 100%); } } .dest-head h2 em{ font-style:italic; color:var(--gold); } .dest-progress{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--muted); } .dest-track{ display:flex; gap:30px; padding-inline:var(--gut); will-change:transform; } .dest-card{ position:relative; flex:0 0 clamp(280px,34vw,460px); aspect-ratio:3/4; border-radius:6px; overflow:hidden; } .dest-card .ph{ width:100%; height:100%; border:none; transition:transform 1.2s var(--ease); } .dest-card:hover .ph{ transform:scale(1.06); } .dest-card .cap{ position:absolute; inset:auto 0 0 0; padding:30px; background:linear-gradient(0deg, rgba(6,18,30,.92), transparent); z-index:2; } .dest-card .cap .k{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--gold); } .dest-card .cap h3{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,2.4vw,40px); margin-top:8px; } .dest-card .cap p{ font-size:13px; color:var(--ink-dim); margin-top:8px; max-width:34ch; } @media (max-width:880px){ .dest-sticky{ position:relative; height:auto; padding-block:80px; } .dest-track{ flex-wrap:nowrap; overflow-x:auto; transform:none!important; padding-bottom:20px; scroll-snap-type:x mandatory; } .dest-card{ flex:0 0 78vw; scroll-snap-align:center; } .dest-head{ position:relative; top:0; left:0; right:0; padding-inline:var(--gut); margin-bottom:34px; } } /* ============================================================ PROCESS ============================================================ */ .process .head{ max-width:680px; margin-bottom:64px; } .process h2{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,5vw,72px); line-height:1.02; margin-top:24px; } .process h2 em{ font-style:italic; color:var(--gold); } .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); } @media (max-width:880px){ .steps{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .steps{ grid-template-columns:1fr; } } .step{ background:var(--bg); padding:clamp(28px,3vw,46px); min-height:300px; display:flex; flex-direction:column; transition:background .5s var(--ease); } .step:hover{ background:var(--surface); } .step .no{ font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:.2em; } .step h3{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,2vw,32px); margin:auto 0 14px; } .step p{ color:var(--muted); font-size:14px; } /* ============================================================ TESTIMONIALS ============================================================ */ .tmonials{ background:var(--bg-2); border-block:1px solid var(--line-soft); overflow:hidden; } .tm-quote{ text-align:center; max-width:1100px; margin-inline:auto; } .tm-quote .mark{ font-family:var(--serif); font-size:120px; line-height:0; color:var(--gold); opacity:.4; } .tm-quote blockquote{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(26px,3.6vw,52px); line-height:1.22; margin:40px 0; } .tm-meta{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--muted); } .tm-meta b{ color:var(--gold); font-weight:400; } .tm-dots{ display:flex; gap:10px; justify-content:center; margin-top:44px; } .tm-dots button{ width:8px; height:8px; border-radius:50%; border:none; background:var(--muted-2); cursor:pointer; transition:.4s var(--ease); } .tm-dots button.active{ background:var(--gold); width:30px; border-radius:5px; } /* ============================================================ CONTACT ============================================================ */ .contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,90px); } @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } } .contact h2{ font-family:var(--serif); font-weight:300; font-size:clamp(40px,6vw,96px); line-height:1; margin:26px 0 40px; } .contact h2 em{ font-style:italic; color:var(--gold); } .c-row{ display:flex; gap:24px; padding:24px 0; border-top:1px solid var(--line-soft); align-items:baseline; } .c-row .k{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--muted); min-width:110px; text-transform:uppercase; } .c-row .v{ font-size:clamp(16px,1.5vw,21px); color:var(--ink); } .c-row .v a{ transition:color .3s var(--ease); } .c-row .v a:hover{ color:var(--gold); } .contact-media .ph{ width:100%; height:100%; min-height:340px; border-radius:6px; } .map-tag{ position:absolute; top:18px; left:18px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--gold); background:rgba(6,18,30,.7); padding:8px 14px; border:1px solid var(--line); border-radius:4px; } /* ============================================================ FOOTER ============================================================ */ .footer{ padding:clamp(60px,8vh,110px) 0 40px; } .foot-big{ font-family:var(--serif); font-weight:300; font-size:clamp(56px,16vw,260px); line-height:.82; letter-spacing:-.01em; text-align:center; color:var(--ink); } .foot-big span{ color:var(--gold); } .foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; margin-top:60px; padding-top:30px; border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted); } .foot-bottom a{ color:var(--muted); transition:color .3s var(--ease); } .foot-bottom a:hover{ color:var(--gold); } .foot-links{ display:flex; gap:26px; flex-wrap:wrap; } /* ===== Payment info (footer) ===== */ .pay{ margin-bottom:clamp(46px,7vh,80px); padding-bottom:clamp(38px,5vh,64px); border-bottom:1px solid var(--line-soft); } .pay-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px 60px; flex-wrap:wrap; margin-bottom:30px; } .pay-trust{ max-width:52ch; color:var(--muted); font-size:14px; line-height:1.6; } .pay-trust b{ color:var(--gold); font-weight:600; } .pay-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(40px,6vw,90px); } @media (max-width:760px){ .pay-grid{ grid-template-columns:1fr; } } .pay-row{ display:flex; gap:24px; align-items:baseline; padding:15px 0; border-top:1px solid var(--line-soft); } .pay-row .k{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); flex:0 0 120px; } .pay-row .v{ font-size:clamp(14px,1.05vw,16px); color:var(--ink); word-break:break-word; } .pay-row .v.mono{ font-family:var(--mono); letter-spacing:.04em; color:var(--gold-soft); } .pay-cards{ margin-top:26px; font-size:13px; line-height:1.6; color:var(--muted); max-width:60ch; } .pay-cards b{ color:var(--gold); font-weight:600; } /* reduced motion */ @media (prefers-reduced-motion:reduce){ [data-reveal],[data-fade],.lines .line>span{ opacity:1!important; transform:none!important; } .scroll-cue .rail::after{ animation:none; } }