/* ═══════════════════════════════════════════════════════════ TRAVEL SAFE LANKA — Design System Island & Sand. Teal = trust/depth · Yellow = action/proof Sand = honesty (all trust content sits on light) (The --sapphire-* tokens keep the names of the first draft; they hold the island's teals now.) ═══════════════════════════════════════════════════════════ */ :root{ /* ── ISLAND · built from the Sri Lanka Tourism logo ────────── Light, mixed colours. Every value contrast-checked. RULE: light hues are fills on dark + large graphics. deep hues are text and borders on light. */ --ink:#042028; --sapphire-900:#0B3A44; /* 11.54:1 on sand */ --sapphire-700:#0D5F72; /* 6.27:1 on sand-100 */ --sapphire-600:#067898; /* 4.74:1 on sand — primary */ --sapphire-400:#20B8D0; /* non-text */ --cyan:#20B8D0; /* 7.11:1 on ink */ --gold:#F5D400; /* the logo yellow — CTA fill, 12.61:1 with ink text */ --gold-lt:#FCE202; --gold-deep:#8A7A05; /* 4.04:1 on sand — the CTA border */ --sand-50:#FAF7F2; --sand-100:#F3EEE5; --sand-200:#E6DDCE; --sand-400:#B9AC97; /* borders only — 2.09:1, never text */ --sand-500:#8B7C63; /* large decorative text */ --sand-600:#7A6B52; /* small muted text — 4.85:1 */ --clay:#A85438; --forest:#2B8217; --white:#fff; /* text, themeable */ --txt-dark:11,58,68; --txt-light:234,247,250; /* ── the nine logo hues · light (graphics) + deep (text on light) ── */ --c-sky:#0196C0; --c-sky-deep:#067898; --c-turq:#20B8D0; --c-turq-deep:#0D7B8C; --c-blue:#016FB4; --c-blue-deep:#0875BA; --c-green:#6CD454; --c-green-deep:#2B8217; /* your green */ --c-lime:#9CC335; --c-lime-deep:#5D7717; --c-sage:#8CC695; --c-sage-deep:#32803E; --c-yellow:#FCE202; --c-yellow-deep:#7F7305; --c-orange:#EE8B1D; --c-orange-deep:#AB5E07; --c-red:#E81C24; --c-red-deep:#C40C14; --fs-display:clamp(3.2rem,9vw,8.5rem); --fs-h2:clamp(2rem,4.6vw,4rem); --fs-h3:clamp(1.25rem,1.7vw,1.6rem); --fs-lede:clamp(1.05rem,1.35vw,1.3rem); --fs-body:clamp(1rem,1.1vw,1.1rem); --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --ease:cubic-bezier(.16,1,.3,1); --wrap:1280px; --gut:clamp(20px,5vw,120px); } *,*::before,*::after{box-sizing:border-box} /* hidden means hidden — even on elements a class gives a display */ [hidden]{display:none!important} html{-webkit-text-size-adjust:100%} /* The poster state: this is what a visitor sees before the 3D arrives, and all they ever see if their device can't run it. It sits behind the canvas, so the island simply fades in on top of it. */ body{ margin:0;color:#EAF1FB; background: radial-gradient(70% 90% at 78% 12%,rgba(32,184,208,.30),transparent 60%), radial-gradient(60% 70% at 10% 88%,rgba(108,212,84,.17),transparent 62%), linear-gradient(170deg,#0B3A44,var(--ink) 68%); background-attachment:fixed; font-family:var(--sans);font-size:var(--fs-body);font-weight:300; line-height:1.62;letter-spacing:.005em; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.05} p{margin:0 0 1em} ul,ol{margin:0;padding:0;list-style:none} ::selection{background:var(--sapphire-600);color:#fff} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);width:100%} .wrap--narrow{max-width:940px} /* ── Preloader ───────────────────────────────────────────── */ .preloader{position:fixed;inset:0;z-index:999;background:var(--ink); display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s} .preloader.is-done{opacity:0;visibility:hidden;pointer-events:none} .preloader__inner{display:grid;gap:26px;justify-items:center} .preloader__bar{width:160px;height:1px;background:rgba(255,255,255,.14);overflow:hidden} .preloader__bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .35s var(--ease)} /* ── Canvas & grain ──────────────────────────────────────── */ #gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0; pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)} #gl.is-on{opacity:1} .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035; 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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")} /* ── Header ──────────────────────────────────────────────── */ .hdr{position:fixed;top:0;left:0;right:0;z-index:60; display:flex;align-items:center;gap:32px; padding:22px var(--gut); transition:background .5s var(--ease),backdrop-filter .5s,padding .5s var(--ease),border-color .5s; border-bottom:1px solid transparent} .hdr.is-stuck{background:rgba(5,11,24,.72);backdrop-filter:blur(18px) saturate(1.4); padding-block:14px;border-bottom-color:rgba(255,255,255,.08)} .hdr.is-light{color:var(--sapphire-900)} .hdr.is-light.is-stuck{background:rgba(250,247,242,.82);border-bottom-color:rgba(var(--txt-dark),.1)} .hdr__logo{color:#fff;transition:color .5s} .hdr.is-light .hdr__logo{color:var(--sapphire-900)} .hdr__nav{display:flex;gap:30px;margin-left:auto;font-size:.875rem;letter-spacing:.02em} .hdr__nav a{opacity:.76;position:relative;padding-block:4px;transition:opacity .3s} .hdr__nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0; background:var(--gold);transition:width .4s var(--ease)} .hdr__nav a:hover{opacity:1} .hdr__nav a:hover::after{width:100%} @media(max-width:1000px){.hdr__nav{display:none}} /* ── Buttons ─────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:16px 30px;border:1px solid transparent;border-radius:2px;cursor:pointer; font-family:var(--sans);font-size:.875rem;font-weight:500;letter-spacing:.055em; text-transform:uppercase;white-space:nowrap; transition:transform .35s var(--ease),background .35s,color .35s,border-color .35s,box-shadow .35s} .btn:hover{transform:translateY(-2px)} .btn--sm{padding:13px 22px;font-size:.78rem} .btn--gold{background:var(--gold);color:#12131A;border-color:var(--gold-deep); box-shadow:0 8px 28px -12px rgba(201,162,39,.85)} .btn--gold:hover{background:var(--gold-lt);border-color:var(--gold); box-shadow:0 14px 34px -12px rgba(201,162,39,.95)} .btn--ghost{border-color:rgba(255,255,255,.28);color:#fff} .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)} .btn--ghost-dark{border-color:rgba(var(--txt-dark),.26);color:var(--sapphire-900)} .btn--ghost-dark:hover{border-color:var(--sapphire-900);background:rgba(var(--txt-dark),.05)} .btn--wa{background:#1FA855;color:#fff;padding:12px 20px;font-size:.8rem} .btn--wa:hover{background:#23c062} @media(max-width:640px){.hdr__cta span{display:none}.hdr__cta{padding:12px}} /* ── Type helpers ────────────────────────────────────────── */ .eyebrow{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase; color:var(--cyan);margin:0 0 20px;font-weight:500} .eyebrow--dark{color:var(--sapphire-600)} .display{font-family:var(--serif);font-size:var(--fs-display);font-weight:300; letter-spacing:-.03em;line-height:.92;margin:0 0 28px} .h2{font-family:var(--serif);font-size:var(--fs-h2);font-weight:300; letter-spacing:-.022em;line-height:1.02;margin:0 0 24px} .h2--dark{color:var(--sapphire-900)} .lede{font-size:var(--fs-lede);line-height:1.62;max-width:60ch;color:rgba(var(--txt-light),.76)} .lede--dark{color:rgba(var(--txt-dark),.72)} .lede--center{margin-inline:auto;text-align:center} .lede--gold{color:var(--gold-lt)} .sechead{margin-bottom:clamp(48px,6vw,88px);max-width:60ch} .sechead--center{margin-inline:auto;text-align:center;max-width:70ch} .sechead--center .eyebrow{text-align:center} .demo-chip{position:fixed;left:14px;bottom:14px;z-index:70; font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; padding:7px 11px;border-radius:2px;color:rgba(255,255,255,.55); background:rgba(5,11,24,.6);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)} @media(max-width:820px){.demo-chip{display:none}} /* ── Sections ────────────────────────────────────────────── */ .act{position:relative;z-index:2} .act--light{background:var(--sand-50);color:var(--sapphire-900); padding-block:clamp(90px,11vw,180px)} .act--dark{background:var(--ink);padding-block:clamp(90px,11vw,180px); border-top:1px solid rgba(255,255,255,.06)} /* ═════ ACT 1 · HERO ═════ */ .act--hero{min-height:100svh;display:flex;align-items:center; padding:130px var(--gut) 90px;background:transparent} .hero__copy{max-width:760px} .hero__copy .lede{margin-bottom:38px} .hero__actions{display:flex;gap:14px;flex-wrap:wrap} .scrollcue{position:absolute;left:var(--gut);bottom:38px;display:flex;align-items:center;gap:12px; font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.6)} .scrollcue span{display:block;width:44px;height:1px;background:rgba(255,255,255,.28);position:relative;overflow:hidden} .scrollcue span::after{content:"";position:absolute;inset:0;background:var(--cyan); animation:cue 2.4s var(--ease) infinite} @keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}} /* ═════ ACT 2–3 · JOURNEY ═════ */ .act--journey{height:520vh;background:transparent} .journey__stage{position:sticky;top:0;height:100svh;display:flex;align-items:center; padding-inline:var(--gut);pointer-events:none} .journey__caption{position:absolute;max-width:600px;opacity:0;transform:translateY(24px)} .journey__nodes{position:sticky;top:0;height:0} .journey__nodes li{position:fixed;right:var(--gut);top:50%;transform:translateY(-50%) translateX(28px); width:min(330px,80vw);opacity:0;pointer-events:none; padding:22px 24px;border-radius:3px; background:rgba(8,18,38,.58);backdrop-filter:blur(16px); border:1px solid rgba(95,211,243,.2);border-left:2px solid var(--cyan)} .journey__nodes b{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:400; letter-spacing:-.01em;margin-bottom:5px} .journey__nodes span{font-size:.9rem;color:rgba(var(--txt-light),.62)} @media(max-width:760px){ .journey__nodes li{right:var(--gut);left:var(--gut);width:auto;top:auto;bottom:90px;transform:translateY(20px)} .act--journey{height:440vh} } /* ═════ ACT 4 · FEAR GATE ═════ */ .act--fear{background:var(--white)} .act--fear .h2{max-width:20ch;margin-bottom:clamp(44px,5vw,72px)} .fear__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:1px;background:var(--sand-200);border:1px solid var(--sand-200)} .fearcard{background:var(--white);padding:clamp(28px,3vw,42px)} .fearcard__stat{display:block;font-family:var(--serif);font-size:clamp(2.6rem,4.4vw,3.8rem); font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--sapphire-600);margin-bottom:18px} .fearcard__stat i{font-size:.36em;font-style:normal;letter-spacing:0;color:var(--sand-600)} .fearcard p{font-size:.975rem;color:rgba(var(--txt-dark),.72);margin:0} .fear__close{margin-top:clamp(40px,4.6vw,64px);font-size:var(--fs-lede); color:rgba(var(--txt-dark),.7);line-height:1.7} .fear__close strong{color:var(--sapphire-900);font-weight:500} /* ═════ ACT 5 · PROMISES ═════ */ .act--promises{background:var(--sand-50)} .promises{display:grid;gap:1px;background:var(--sand-200);border-block:1px solid var(--sand-200)} .promise{background:var(--sand-50);padding:clamp(28px,3.4vw,46px) 0; display:grid;grid-template-columns:96px minmax(0,1fr) 290px; column-gap:clamp(20px,3vw,48px);row-gap:10px;align-items:start; transition:background .5s var(--ease)} .promise:hover{background:var(--white)} .promise__no{grid-column:1;grid-row:1;font-family:var(--serif);font-size:1.6rem; color:var(--sand-500);font-weight:300} .promise h3{grid-column:2;grid-row:1;font-family:var(--serif);font-size:var(--fs-h3); color:var(--sapphire-900)} .promise p{grid-column:2;grid-row:2;color:rgba(var(--txt-dark),.7);margin:0;max-width:52ch;font-size:.985rem} .promise__proof{grid-column:3;grid-row:1/span 2; display:flex;align-items:flex-start;gap:10px;font-size:.84rem;letter-spacing:.01em; line-height:1.5;color:var(--sapphire-600);padding-top:7px} .promise__proof em{font-style:normal;color:var(--sand-600)} .dot{width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--forest);flex:none; box-shadow:0 0 0 4px rgba(30,77,59,.14)} @media(max-width:900px){ .promise{grid-template-columns:52px minmax(0,1fr)} .promise__proof{grid-column:2;grid-row:3;padding-top:4px} } /* ═════ ACT 6 · FOLLOW THE MONEY ═════ */ .money{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px)} @media(max-width:840px){.money{grid-template-columns:1fr}} .money__col{padding:clamp(28px,3.2vw,44px);border:1px solid rgba(255,255,255,.1);border-radius:3px} .money__col h3{font-family:var(--serif);font-size:var(--fs-h3);margin-bottom:26px} .money__col ul{display:grid;gap:0;margin-bottom:26px} .money__col li{display:flex;justify-content:space-between;align-items:baseline;gap:18px; padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.94rem} .money__col li span{color:rgba(var(--txt-light),.6)} .money__col li b{font-weight:500;font-variant-numeric:tabular-nums;text-align:right} .money__verdict{font-size:.94rem;color:rgba(var(--txt-light),.6);margin:0} .money__col--bad{background:linear-gradient(180deg,rgba(120,40,40,.14),transparent)} .money__col--bad li b{color:#E8836F} .money__col--good{background:linear-gradient(180deg,rgba(27,75,158,.2),transparent); border-color:rgba(95,211,243,.26)} .money__col--good li b{color:var(--cyan)} .money__col--good h3{color:var(--gold-lt)} .hotels{margin-top:clamp(32px,4vw,56px);display:flex;align-items:center;gap:clamp(24px,4vw,56px); flex-wrap:wrap;padding:clamp(28px,3.4vw,48px);border-radius:3px; background:linear-gradient(110deg,rgba(27,75,158,.3),rgba(5,11,24,.2)); border:1px solid rgba(95,211,243,.2)} .hotels__txt{flex:1 1 420px} .hotels__txt h3{font-family:var(--serif);font-size:var(--fs-h3);margin-bottom:12px;color:var(--gold-lt)} .hotels__txt p{margin:0;color:rgba(var(--txt-light),.76);max-width:62ch} .hotels__badge{flex:none;text-align:center;padding:22px 30px;border:1px solid var(--gold);border-radius:3px} .hotels__badge span{display:block;font-family:var(--serif);font-size:3.4rem;line-height:1;color:var(--gold-lt)} .hotels__badge em{font-style:normal;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:rgba(var(--txt-light),.6);display:block;margin-top:8px} /* ═════ ACT 7 · PACKAGES ═════ */ .pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(18px,2.2vw,30px)} .pkg{background:var(--white);border:1px solid var(--sand-200);border-radius:3px;overflow:hidden; display:flex;flex-direction:column; transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s} .pkg:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(var(--txt-dark),.4); border-color:var(--sapphire-400)} .pkg--feature{border-color:var(--gold)} .pkg__media{position:relative;aspect-ratio:16/10;display:flex;align-items:flex-end;padding:20px;gap:10px} .pkg__media--a{background:linear-gradient(140deg,#123069,#3E7BD6 60%,#5FD3F3)} .pkg__media--b{background:linear-gradient(140deg,#0A1F44,#1B4B9E 45%,#C9A227)} .pkg__media--c{background:linear-gradient(140deg,#1E4D3B,#123069 55%,#3E7BD6)} .pkg__media::after{content:"";position:absolute;inset:0;opacity:.3; background:radial-gradient(120% 80% at 70% 10%,rgba(255,255,255,.5),transparent 60%)} .pkg__days,.pkg__flag{position:relative;z-index:1;font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;padding:7px 12px;border-radius:2px;color:#fff; background:rgba(5,11,24,.44);backdrop-filter:blur(6px)} .pkg__flag{background:var(--gold);color:#12131A} .pkg__body{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;flex:1;gap:12px} .pkg__body h3{font-family:var(--serif);font-size:var(--fs-h3);color:var(--sapphire-900)} .pkg__route{font-size:.8rem;letter-spacing:.02em;color:var(--sapphire-600);margin:0;line-height:1.55} .pkg__body>p{color:rgba(var(--txt-dark),.7);font-size:.95rem;margin:0} .pkg__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto} .pkg__tags li{font-size:.72rem;letter-spacing:.05em;padding:5px 10px;border-radius:2px; background:var(--sand-100);color:var(--sapphire-700)} .pkg .btn{align-self:flex-start;margin-top:8px} .pkgs-extra{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,30px); margin-top:clamp(18px,2.2vw,30px)} @media(max-width:840px){.pkgs-extra{grid-template-columns:1fr}} .xcard{padding:clamp(26px,3vw,42px);border:1px dashed var(--sand-400);border-radius:3px; background:var(--sand-100)} .xcard h3{font-family:var(--serif);font-size:var(--fs-h3);color:var(--sapphire-900);margin-bottom:12px} .xcard p{color:rgba(var(--txt-dark),.72);font-size:.95rem} .xcard--drop{border-style:solid;border-color:var(--sapphire-400); background:linear-gradient(140deg,rgba(62,123,214,.1),rgba(250,247,242,.4))} .xcard--drop strong{color:var(--sapphire-700);font-weight:500} /* ═════ ACT 8 · SAPPHIRE ═════ */ .act--sapphire{background: radial-gradient(90% 60% at 82% 18%,rgba(27,75,158,.34),transparent 62%),var(--ink)} .sap{display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(32px,5vw,80px);align-items:start} @media(max-width:980px){.sap{grid-template-columns:1fr}} .sap__txt .h2{max-width:17ch} .sapsteps{counter-reset:s;margin:clamp(30px,3.6vw,48px) 0 38px;display:grid;gap:2px} .sapsteps li{counter-increment:s;position:relative;padding:20px 22px 20px 62px; background:rgba(255,255,255,.035);border-left:1px solid rgba(95,211,243,.28); font-size:.96rem;color:rgba(var(--txt-light),.72); transition:background .4s var(--ease)} .sapsteps li:hover{background:rgba(95,211,243,.07)} .sapsteps li::before{content:"0" counter(s);position:absolute;left:20px;top:20px; font-family:var(--serif);font-size:.95rem;color:var(--gold)} .sapsteps b{color:#fff;font-weight:500;display:block;margin-bottom:4px} .cert{position:sticky;top:120px} .cert__card{border:1px solid rgba(201,162,39,.4);border-radius:3px;padding:30px; background:linear-gradient(165deg,rgba(var(--txt-dark),.9),rgba(5,11,24,.95)); box-shadow:0 40px 80px -50px rgba(95,211,243,.5); transform:perspective(1200px) rotateY(-7deg) rotateX(2deg)} .cert__top{border-bottom:1px solid rgba(201,162,39,.3);padding-bottom:16px;margin-bottom:20px} .cert__top span{display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase; color:rgba(var(--txt-light),.5);margin-bottom:7px} .cert__top b{font-family:var(--serif);font-size:1.22rem;font-weight:400;color:var(--gold-lt)} .cert__rows{margin:0;display:grid;gap:0} .cert__rows>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07);font-size:.88rem} .cert__rows dt{color:rgba(var(--txt-light),.52);margin:0} .cert__rows dd{margin:0;text-align:right;font-variant-numeric:tabular-nums} .cert__note{margin:18px 0 0;font-size:.74rem;line-height:1.55;color:rgba(var(--txt-light),.56)} /* ═════ ACT 9 · FLEET ═════ */ .fleet{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)} @media(max-width:840px){.fleet{grid-template-columns:1fr}} .veh{background:var(--white);border:1px solid var(--sand-200);border-radius:3px; padding:clamp(24px,3vw,40px);transition:border-color .5s var(--ease),transform .5s var(--ease)} .veh:hover{border-color:var(--sapphire-400);transform:translateY(-4px)} .veh__art{color:var(--sapphire-600);margin-bottom:24px;padding:18px 0; border-bottom:1px solid var(--sand-200)} .veh__art svg{width:100%;height:auto;max-height:150px} .veh h3{font-family:var(--serif);font-size:var(--fs-h3);color:var(--sapphire-900);margin-bottom:8px} .veh__spec{font-size:.82rem;letter-spacing:.03em;color:var(--sapphire-600);margin-bottom:18px} .veh__pts li{position:relative;padding-left:20px;margin-bottom:9px;font-size:.94rem; color:rgba(var(--txt-dark),.7)} .veh__pts li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--gold)} .fleetfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px;background:var(--sand-200);border:1px solid var(--sand-200);margin-top:clamp(18px,2.4vw,32px)} .fleetfacts li{background:var(--sand-50);padding:24px} .fleetfacts b{display:block;color:var(--sapphire-900);font-weight:500;margin-bottom:5px;font-size:.97rem} .fleetfacts span{font-size:.84rem;color:rgba(var(--txt-dark),.68)} /* ═════ ACT 10 · REVIEWS ═════ */ .samplenote{display:inline-block;margin-top:6px;font-size:.68rem;letter-spacing:.16em; text-transform:uppercase;color:var(--gold);border:1px dashed rgba(201,162,39,.45); padding:7px 13px;border-radius:2px} .chatwall{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(16px,2vw,26px)} .chat{background:#0C1526;border:1px solid rgba(255,255,255,.08);border-radius:6px; padding:18px;display:flex;flex-direction:column;gap:10px} .chat__hd{display:flex;align-items:center;gap:10px;padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.07);font-size:.8rem} .chat__av{width:28px;height:28px;border-radius:50%;background:var(--sapphire-600); display:grid;place-items:center;flex:none;color:#fff} .chat__hd b{font-weight:500} .chat__meta{margin-left:auto;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; color:rgba(var(--txt-light),.55)} .bubble{background:#12351F;border-radius:8px 8px 8px 2px;padding:12px 14px; font-size:.9rem;line-height:1.55;color:#DDEFE2;max-width:92%} .bubble--img{background:rgba(255,255,255,.05);aspect-ratio:4/3;display:grid;place-items:center; color:rgba(var(--txt-light),.52);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;max-width:100%} /* ═════ ACT 11 · QUOTE ═════ */ .qform{display:grid;gap:18px;background:var(--white);border:1px solid var(--sand-200); border-radius:3px;padding:clamp(26px,3.4vw,52px);position:relative} .qrow{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:700px){.qrow{grid-template-columns:1fr}} .qform label{display:grid;gap:8px;font-size:.76rem;letter-spacing:.12em; text-transform:uppercase;color:var(--sapphire-600);font-weight:500} .qform input,.qform select,.qform textarea{ font:400 1rem/1.5 var(--sans);color:var(--sapphire-900); padding:14px 16px;border:1px solid var(--sand-200);border-radius:2px;background:var(--sand-50); transition:border-color .3s,background .3s,box-shadow .3s;width:100%;text-transform:none;letter-spacing:0} .qform input:focus,.qform select:focus,.qform textarea:focus{ outline:none;border-color:var(--sapphire-400);background:var(--white); box-shadow:0 0 0 3px rgba(62,123,214,.13)} .qform textarea{resize:vertical} .qfoot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px} .qnote{margin:0;font-size:.83rem;color:rgba(var(--txt-dark),.68);max-width:44ch} .qsent{position:absolute;inset:auto 0 0;opacity:0;pointer-events:none; margin:0;padding:16px;text-align:center;background:var(--forest);color:#fff;font-size:.9rem; transition:opacity .5s var(--ease)} .qform--sent .qsent{opacity:1} /* ── Footer ──────────────────────────────────────────────── */ .ftr{background:#03070F;border-top:1px solid rgba(255,255,255,.07); padding-top:clamp(56px,6vw,88px);position:relative;z-index:2} .ftr__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px); padding-bottom:clamp(40px,5vw,64px)} @media(max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.ftr__grid{grid-template-columns:1fr}} .ftr__brand p{color:rgba(var(--txt-light),.52);font-size:.92rem;max-width:40ch} .ftr__dom{color:var(--cyan)!important;letter-spacing:.06em;font-size:.84rem!important} .ftr h4{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase; color:var(--gold);margin-bottom:18px;font-weight:500} .ftr a{display:block;padding:6px 0;font-size:.92rem;color:rgba(var(--txt-light),.6); transition:color .3s} .ftr a:hover{color:#fff} .ftr__small{font-size:.78rem;color:rgba(var(--txt-light),.55);margin-top:14px;line-height:1.7} .ftr__base{border-top:1px solid rgba(255,255,255,.07);padding:22px var(--gut); max-width:var(--wrap);margin-inline:auto;display:flex;justify-content:space-between;gap:20px; flex-wrap:wrap;font-size:.78rem;letter-spacing:.04em;color:rgba(var(--txt-light),.56)} .ftr__credit{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) 24px; font-size:.7rem;line-height:1.6;letter-spacing:.02em;color:rgba(var(--txt-light),.56)} /* ── WhatsApp FAB ────────────────────────────────────────── */ .wafab{position:fixed;right:20px;bottom:20px;z-index:65;display:flex;align-items:center;gap:12px; padding:12px 18px 12px 14px;border-radius:40px;background:#1FA855;color:#fff; box-shadow:0 14px 36px -12px rgba(31,168,85,.9); transform:translateY(120px);opacity:0; transition:transform .6s var(--ease),opacity .6s var(--ease),background .3s} .wafab.is-in{transform:none;opacity:1} .wafab:hover{background:#23c062} .wafab__txt{display:grid;line-height:1.25} .wafab__txt b{font-size:.84rem;font-weight:600} .wafab__txt i{font-style:normal;font-size:.7rem;opacity:.82} @media(max-width:560px){.wafab__txt{display:none}.wafab{padding:14px;border-radius:50%}} /* ── Motion utilities ────────────────────────────────────── */ [data-rise]{opacity:0;transform:translateY(26px)} .line-mask{display:block;overflow:hidden} .line-inner{display:block} @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} [data-rise]{opacity:1!important;transform:none!important} .act--journey{height:auto;padding-block:120px} .journey__stage{position:static;height:auto;display:block} .journey__caption{position:static;opacity:1!important;transform:none!important;margin-bottom:48px} .journey__nodes{position:static;height:auto;display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;padding-inline:var(--gut)} .journey__nodes li{position:static;opacity:1!important;transform:none!important;width:auto} .wafab{transform:none;opacity:1} .cert__card{transform:none} } /* ── No-WebGL fallback (low-memory / no WebGL2 / reduced motion) ── */ .no-gl #gl,.no-gl .grain{display:none} .no-gl .act--hero,.no-gl .act--journey{ background: radial-gradient(70% 90% at 78% 12%,rgba(32,184,208,.34),transparent 60%), radial-gradient(60% 70% at 12% 88%,rgba(108,212,84,.2),transparent 62%), linear-gradient(170deg,#0B3A44,var(--ink) 70%)} .no-gl .act--journey{height:auto;padding-block:clamp(90px,11vw,160px)} .no-gl .journey__stage{position:static;height:auto;display:block} .no-gl .journey__caption{position:static;opacity:1;transform:none;margin-bottom:48px;max-width:none} .no-gl .journey__nodes{position:static;height:auto;display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px} .no-gl .journey__nodes li{position:static;opacity:1;transform:none;width:auto} /* ── Mobile: keep the hero copy readable over the island ── */ @media(max-width:860px){ .act--hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(4,32,40,0) 14%,rgba(4,32,40,.6) 44%,rgba(4,32,40,.9) 72%)} .act--hero{padding-top:190px} .hero__actions .btn{flex:1 1 100%} .journey__caption .h2{font-size:clamp(1.9rem,8vw,2.6rem)} } /* ── Island: the logo's colours, used with meaning ────────── Each destination and each package owns one hue. On light surfaces the hue appears as a deep text colour over a faint tint; the bright version is reserved for dark sections and large graphics, where it has room to be bright. */ .pkg__media--a{background:linear-gradient(140deg,var(--c-blue),var(--c-sky) 55%,var(--c-turq))} .pkg__media--b{background:linear-gradient(140deg,var(--c-turq),var(--c-sage) 45%,var(--c-yellow))} .pkg__media--c{background:linear-gradient(140deg,var(--c-green),var(--c-lime) 50%,var(--c-orange))} .pkg__tags li:nth-child(4n+1){background:rgba(1,150,192,.12); color:var(--c-sky-deep)} .pkg__tags li:nth-child(4n+2){background:rgba(108,212,84,.16); color:var(--c-green-deep)} .pkg__tags li:nth-child(4n+3){background:rgba(238,139,29,.14); color:var(--c-orange-deep)} .pkg__tags li:nth-child(4n+4){background:rgba(32,184,208,.14); color:var(--c-turq-deep)} .fearcard:nth-child(1) .fearcard__stat{color:var(--c-red-deep)} .fearcard:nth-child(2) .fearcard__stat{color:var(--c-orange-deep)} .fearcard:nth-child(3) .fearcard__stat{color:var(--c-sky-deep)} .fearcard:nth-child(4) .fearcard__stat{color:var(--c-lime-deep)} .promise:nth-child(1) .dot{background:var(--c-sky-deep); box-shadow:0 0 0 4px rgba(1,150,192,.16)} .promise:nth-child(2) .dot{background:var(--c-green-deep);box-shadow:0 0 0 4px rgba(108,212,84,.2)} .promise:nth-child(3) .dot{background:var(--c-turq-deep); box-shadow:0 0 0 4px rgba(32,184,208,.18)} .promise:nth-child(4) .dot{background:var(--c-orange-deep);box-shadow:0 0 0 4px rgba(238,139,29,.18)} .promise:nth-child(5) .dot{background:var(--c-blue-deep); box-shadow:0 0 0 4px rgba(1,111,180,.16)} .journey__nodes li{border-left-color:var(--c-turq)} .money__col--good{background:linear-gradient(180deg,rgba(32,184,208,.18),transparent); border-color:rgba(32,184,208,.3)} .money__col--good li b{color:var(--c-green)} .hotels{background:linear-gradient(110deg,rgba(1,150,192,.28),rgba(4,32,40,.2)); border-color:rgba(32,184,208,.26)} .act--sapphire{background: radial-gradient(90% 60% at 82% 18%,rgba(1,111,180,.34),transparent 62%),var(--ink)} .chat{background:#06242C} .bubble{background:#0E3A2A} .ftr{background:#021418} /* ── Logo sizing & type (inline SVG) ─────────────────────── */ .logo{width:clamp(150px,15vw,196px);height:auto} .logo__word{font-family:var(--serif);font-size:21px;font-weight:400;letter-spacing:.3px; fill:currentColor} .logo__sub{font-family:var(--sans);font-size:9px;letter-spacing:2.1px;fill:var(--gold-lt)} .hdr__logo{color:#fff} .hdr.is-light .hdr__logo{color:var(--sapphire-900)} .hdr.is-light .logo__sub{fill:var(--gold-deep)} .ftr__brand .logo{color:#fff;margin-bottom:20px} /* ── Keyboard focus — visible everywhere, on both surfaces ── */ :focus-visible{outline:2px solid var(--c-turq);outline-offset:3px;border-radius:2px} .act--light :focus-visible,.qform :focus-visible{outline-color:var(--sapphire-600)} .btn--gold:focus-visible{outline-color:var(--gold-deep);outline-offset:4px} .skip{position:absolute;left:-9999px;top:0;z-index:200;padding:14px 20px; background:var(--gold);color:#12131A;font:500 .86rem/1 var(--sans)} .skip:focus{left:12px;top:12px} /* ── Mobile navigation ───────────────────────────────────── */ .burger{display:none;appearance:none;background:transparent;border:0;cursor:pointer; width:44px;height:44px;padding:12px;margin-left:2px;flex:none} .burger span{display:block;height:1.5px;background:currentColor;border-radius:2px; transition:transform .4s var(--ease),opacity .3s} .burger span+span{margin-top:6px} .burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)} .burger[aria-expanded="true"] span+span{transform:translateY(-3.75px) rotate(-45deg)} @media(max-width:1000px){.burger{display:block}} .mnav{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column; justify-content:center;gap:26px;padding:100px var(--gut) 48px; background:linear-gradient(165deg,#0B3A44,var(--ink) 72%); opacity:0;transition:opacity .45s var(--ease)} .mnav[hidden]{display:none} .mnav.is-open{opacity:1} .mnav__inner{display:grid;gap:2px} .mnav__inner a{display:flex;align-items:baseline;gap:16px;padding:16px 0; font-family:var(--serif);font-size:clamp(1.7rem,7vw,2.4rem);font-weight:300; letter-spacing:-.02em;color:#fff;border-bottom:1px solid rgba(255,255,255,.1); opacity:0;transform:translateY(16px)} .mnav.is-open .mnav__inner a{opacity:1;transform:none; transition:opacity .6s var(--ease),transform .6s var(--ease)} .mnav.is-open .mnav__inner a:nth-child(1){transition-delay:.06s} .mnav.is-open .mnav__inner a:nth-child(2){transition-delay:.12s} .mnav.is-open .mnav__inner a:nth-child(3){transition-delay:.18s} .mnav.is-open .mnav__inner a:nth-child(4){transition-delay:.24s} .mnav.is-open .mnav__inner a:nth-child(5){transition-delay:.30s} .mnav.is-open .mnav__inner a:nth-child(6){transition-delay:.36s} .mnav__inner i{font-family:var(--sans);font-style:normal;font-size:.7rem; letter-spacing:.2em;color:var(--c-turq);flex:none} .mnav__cta{align-self:flex-start;margin-top:8px} .mnav__note{margin:0;font-size:.8rem;letter-spacing:.04em;color:rgba(var(--txt-light),.55)} body.nav-open{overflow:hidden} /* ── Small-screen header: the hidden nav took the auto margin with it, so the CTA and burger overflowed the viewport ──── */ @media(max-width:1000px){ .hdr{gap:12px} .hdr__cta{margin-left:auto} } /* if the 3D fails to load after ScrollTrigger has already nudged the destination cards, clear what GSAP wrote inline */ .no-gl .journey__nodes li{transform:none!important;opacity:1!important} /* the tilted certificate pushes 1px past the viewport on a phone */ @media(max-width:700px){.cert__card{transform:none}} /* ═══════════════════════════════════════════════════════════ THE ROUTE RAIL The page is eleven acts long and there was no way to tell where you were in it. This is the brand's own metaphor doing the job: a route down the left edge that fills as you travel, each stop in its own colour. Progress indicator and section nav at once. ═══════════════════════════════════════════════════════════ */ .rail{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:58; display:grid;gap:0;opacity:0;pointer-events:none; transition:opacity .6s var(--ease)} .rail.is-in{opacity:1;pointer-events:auto} .rail__stop{position:relative;display:block;width:30px;height:46px; background:none;border:0;padding:0;cursor:pointer} /* the line between stops */ .rail__stop::before{content:"";position:absolute;left:14px;top:0;width:1.5px;height:100%; background:rgba(255,255,255,.16);border-radius:2px;transition:background .5s var(--ease)} .rail__stop:first-child::before{top:50%;height:50%} .rail__stop:last-child::before{height:50%} .hdr.is-light~.rail .rail__stop::before, .rail.on-light .rail__stop::before{background:rgba(11,58,68,.16)} /* the travelled part */ .rail__stop.is-done::before,.rail__stop.is-now::before{background:currentColor;opacity:.55} /* the marker */ .rail__dot{position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px; border-radius:50%;background:rgba(255,255,255,.3); transition:transform .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)} .rail.on-light .rail__dot{background:rgba(11,58,68,.26)} .rail__stop.is-done .rail__dot{background:currentColor} .rail__stop.is-now .rail__dot{background:currentColor;transform:scale(1.85); box-shadow:0 0 0 5px color-mix(in srgb,currentColor 18%,transparent)} .rail__stop:hover .rail__dot{transform:scale(1.5)} /* the label */ .rail__label{position:absolute;left:32px;top:50%;transform:translateY(-50%) translateX(-6px); white-space:nowrap;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:#fff;background:rgba(4,32,40,.82);backdrop-filter:blur(8px); padding:6px 10px;border-radius:2px;opacity:0;pointer-events:none; transition:opacity .35s var(--ease),transform .35s var(--ease)} .rail.on-light .rail__label{color:#fff;background:rgba(11,58,68,.9)} .rail__stop:hover .rail__label,.rail__stop:focus-visible .rail__label{ opacity:1;transform:translateY(-50%) translateX(0)} @media(max-width:1180px){.rail{display:none}} /* ═══════════════════════════════════════════════════════════ SURFACE & TYPE — the craft layer The dark sections had the 3D and the grain; the light ones were flat white with 1px borders, which read as a framework, not as a designed page. These three things fix that without adding noise. ═══════════════════════════════════════════════════════════ */ /* 1 · the same grain the dark side has, at a whisper */ .act--light{position:relative;isolation:isolate} .act--light::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; opacity:.5;mix-blend-mode:multiply; 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='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E")} /* 2 · each section carries a breath of its own hue, so the page moves through the palette instead of sitting on one beige */ .act--light::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(90% 55% at 88% 0%,var(--wash,transparent),transparent 62%)} #fear {--wash:rgba(232,28,36,.055)} #promises{--wash:rgba(32,184,208,.075)} #packages{--wash:rgba(238,139,29,.07)} #fleet {--wash:rgba(1,111,180,.065)} #quote {--wash:rgba(252,226,2,.09)} /* 3 · optical sizing — Fraunces renders far better at display sizes when opsz is pushed up; at small sizes it needs the opposite */ .display{font-variation-settings:"opsz" 144;letter-spacing:-.035em} .h2{font-variation-settings:"opsz" 96} .pkg__body h3,.veh h3,.promise h3,.money__col h3,.hotels__txt h3,.xcard h3{ font-variation-settings:"opsz" 36} /* 4 · one word per headline carries the section's colour. Cheap, and it stops every heading reading as the same grey block. */ .hl{color:var(--accent,inherit);font-style:normal} #fear .hl{color:var(--c-red-deep)} #money .hl{color:var(--c-green)} #packages .hl{color:var(--c-orange-deep)} #sapphire .hl{color:var(--c-lime)} #fleet .hl{color:var(--c-blue-deep)} #quote .hl{color:var(--c-yellow-deep)} /* 5 · cards lift on a warm shadow rather than a grey one */ .pkg:hover{box-shadow:0 30px 60px -34px rgba(120,80,20,.38)} .veh:hover{box-shadow:0 24px 48px -30px rgba(11,58,68,.32)} /* ═══════════════════════════════════════════════════════════ COMPOSITION — breaking the one-shape-per-section rhythm Every act was wrap → eyebrow → h2 → card grid. Same width, same alignment, same entrance. That is what a template feels like. These sections now each have their own architecture. ═══════════════════════════════════════════════════════════ */ /* ── ACT 4 · the fear gate, full-bleed ───────────────────── The most important section on the site should not look like four cards in a row. Four bands the full width of the screen, with the number at display scale against a centre axis. */ .act--fear{padding-block:clamp(90px,11vw,170px) 0} .fear__head{max-width:var(--wrap)} .fear__h2{max-width:18ch;margin-bottom:clamp(52px,7vw,100px)} .fear__rows{border-top:1px solid var(--sand-200)} .fearrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,5vw,86px);align-items:baseline; padding:clamp(26px,3.6vw,54px) var(--gut); border-bottom:1px solid var(--sand-200); transition:background .7s var(--ease)} .fearrow:hover{background:var(--white)} .fearrow__stat{justify-self:end;text-align:right; font-family:var(--serif);font-weight:300; font-size:clamp(3.6rem,12vw,10.5rem);line-height:.82;letter-spacing:-.05em; font-variation-settings:"opsz" 144;font-variant-numeric:tabular-nums} .fearrow__stat--word{font-size:clamp(2.6rem,7vw,6rem);letter-spacing:-.03em} .fearrow__stat i{font-size:.24em;font-style:normal;letter-spacing:0;color:var(--sand-600)} .fearrow p{margin:0;max-width:44ch;font-size:clamp(1rem,1.35vw,1.22rem); line-height:1.6;color:rgba(var(--txt-dark),.78)} .fearrow:nth-child(1) .fearrow__stat{color:var(--c-red-deep)} .fearrow:nth-child(2) .fearrow__stat{color:var(--c-orange-deep)} .fearrow:nth-child(3) .fearrow__stat{color:var(--c-sky-deep)} .fearrow:nth-child(4) .fearrow__stat{color:var(--c-lime-deep)} .fear__foot{max-width:var(--wrap);padding-top:clamp(48px,6vw,84px); padding-bottom:clamp(60px,8vw,120px)} .fear__close{margin:0;font-size:var(--fs-lede);line-height:1.7; color:rgba(var(--txt-dark),.74);max-width:52ch;margin-left:auto} .fear__close strong{color:var(--sapphire-900);font-weight:500} [data-row]{opacity:0} @media(max-width:760px){ .fearrow{grid-template-columns:1fr;gap:10px;align-items:start} .fearrow__stat{justify-self:start;text-align:left} .fear__close{margin-left:0} } /* ── ACT 5 · the promises, with the claim held in place ──── The heading sticks while the five proofs scroll past it. The argument stays on screen the whole time you're reading the evidence for it — which is the entire point of the section. */ .promises__layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(32px,6vw,100px);align-items:start} .promises__head{position:sticky;top:clamp(90px,14vh,150px);margin-bottom:0} .promises__head .h2{margin-bottom:22px} .promises__note{margin:0;font-size:.97rem;color:rgba(var(--txt-dark),.66);max-width:34ch} .promises__layout .promise{grid-template-columns:70px minmax(0,1fr); padding-block:clamp(24px,2.8vw,36px)} .promises__layout .promise__proof{grid-column:2;grid-row:3;padding-top:6px} #promises{--wash:rgba(32,184,208,.075)} @media(max-width:940px){ .promises__layout{grid-template-columns:1fr;gap:clamp(36px,6vw,56px)} .promises__head{position:static} } /* ── ACT 7 · packages travel sideways ────────────────────── Five tours in a vertical grid is a list. Five tours moving past you as you scroll is a journey — which is what is being sold. Pinned, horizontal, desktop only; below 1000px it falls back to an ordinary grid, because horizontal scroll on a phone fights the thumb. */ .pkgtrack-wrap{position:relative;overflow:hidden} .pkgtrack{display:flex;gap:clamp(18px,2.2vw,30px);padding-inline:var(--gut); width:max-content;align-items:stretch} .pkgtrack .pkg,.pkgtrack .xcard{width:clamp(300px,25vw,400px);flex:none} .pkgtrack .xcard{display:flex;flex-direction:column;justify-content:center} .pkgs__hint{display:flex;align-items:center;gap:12px;margin-top:26px; padding-inline:var(--gut);font-size:.7rem;letter-spacing:.24em; text-transform:uppercase;color:var(--sand-600)} .pkgs__hint span{display:block;width:40px;height:1px;background:var(--sand-400); position:relative;overflow:hidden} .pkgs__hint span::after{content:"";position:absolute;inset:0;background:var(--c-orange); animation:cue 2.4s var(--ease) infinite} @media(max-width:1000px){ .pkgtrack{flex-wrap:wrap;width:auto;padding-inline:0;justify-content:center} .pkgtrack .pkg,.pkgtrack .xcard{width:min(400px,100%);flex:1 1 300px} .pkgs__hint{display:none} } /* the real driving distance to each stop — specific beats superlative */ .journey__nodes em{display:block;margin-top:9px;padding-top:9px; border-top:1px solid rgba(255,255,255,.12); font-style:normal;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase; color:var(--c-yellow);font-variant-numeric:tabular-nums} .journey__caption .lede strong{color:#fff;font-weight:500} /* ═══════════════════════════════════════════════════════════ PHOTOGRAPHY TREATMENT One system, so a real photograph drops in and inherits all of this without touching CSS: cover-crop to a fixed ratio, a duotone wash in the destination's own hue so every picture belongs to the palette, a scrim so the labels stay legible, and a slow push-in on hover. ═══════════════════════════════════════════════════════════ */ .pkg__media{position:relative;overflow:hidden;isolation:isolate;background:var(--sand-200)} .pkg__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; z-index:0;transform:scale(1.04);transform-origin:52% 45%; filter:saturate(1.06) contrast(1.03); transition:transform 1.4s var(--ease),filter .8s var(--ease)} .pkg:hover .pkg__media img{transform:scale(1.11);filter:saturate(1.14) contrast(1.05)} /* the hue wash — each card is tinted toward its own destination colour */ .pkg__media::before{content:"";position:absolute;inset:0;z-index:1; mix-blend-mode:color;opacity:.34;background:var(--tint,var(--c-turq)); transition:opacity .8s var(--ease)} .pkg:hover .pkg__media::before{opacity:.18} .pkg__media--a{--tint:var(--c-orange)} .pkg__media--b{--tint:var(--c-turq)} .pkg__media--c{--tint:var(--c-green)} /* the scrim, so the day count and flag stay readable on any picture */ .pkg__media::after{content:"";position:absolute;inset:0;z-index:2;opacity:1; background:linear-gradient(0deg,rgba(4,32,40,.72) 0%,rgba(4,32,40,.28) 34%, rgba(4,32,40,0) 62%)} .pkg__days,.pkg__flag{position:relative;z-index:3} .pkg__days{background:rgba(4,32,40,.55)} .imgnote{margin:0 0 14px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--sand-600);display:inline-flex;align-items:center;gap:9px} .imgnote::before{content:"";width:16px;height:1px;background:var(--c-orange);flex:none} /* ── The stone, behind its own argument ──────────────────── Masked away from the left so the copy sits on clean ink and keeps its 9:1 contrast — the picture lives only in the half of the section that has no text in it. */ .act--sapphire{position:relative;overflow:hidden;isolation:isolate} .sap__bg{position:absolute;inset:0;z-index:0;pointer-events:none} .sap__bg img{position:absolute;right:-6%;top:50%;transform:translateY(-50%); width:min(58%,760px);height:auto;opacity:.55; -webkit-mask-image:linear-gradient(to left,#000 6%,transparent 74%); mask-image:linear-gradient(to left,#000 6%,transparent 74%)} .act--sapphire>.wrap{position:relative;z-index:1} @media(max-width:980px){ .sap__bg img{width:120%;right:-20%;opacity:.3; -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 70%); mask-image:linear-gradient(to top,#000 0%,transparent 70%)} } /* ── The road band ───────────────────────────────────────── A fleet section needs a picture, but not a photograph of a van we don't own. The road is the honest image: it is what you are actually buying, and it makes no claim about the vehicle. */ /* width:100% is load-bearing — aspect-ratio plus a max-height makes the browser derive the WIDTH from the capped height (440 x 2.2 = 968px), which quietly un-full-bleeds the band. */ .roadband{position:relative;width:100%;margin:0 0 clamp(44px,5vw,80px); aspect-ratio:3/1;overflow:hidden;isolation:isolate} .roadband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transform:scale(1.03)} .roadband::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(0deg,rgba(4,32,40,.62),rgba(4,32,40,.05) 52%)} .roadband figcaption{position:absolute;left:var(--gut);bottom:clamp(18px,2.4vw,30px); z-index:2;margin:0;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.88);font-variant-numeric:tabular-nums} @media(max-width:1000px){.roadband{aspect-ratio:2.2/1}} @media(max-width:700px){.roadband{aspect-ratio:16/10}} /* ═══════════════════════════════════════════════════════════ GUEST MESSAGES — two rows, drifting opposite ways A static wall of three cards looked like a widget. Two rows moving past each other read as a stream of messages that keeps arriving, which is what this section is claiming. The text is deliberately NOT written. Inventing testimonials for a brand whose entire argument is "we prove things" would be the one unforgivable thing on this page — so the bubbles carry the SHAPE of a real conversation (bar lengths, photo drops, flags, timestamps) and nothing that could be mistaken for a quote. ═══════════════════════════════════════════════════════════ */ .act--reviews{overflow:hidden} .mq{position:relative;margin-bottom:clamp(14px,1.6vw,20px); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)} .mq:last-of-type{margin-bottom:0} .mq__track{display:flex;gap:clamp(14px,1.6vw,20px);width:max-content; animation:mqdrift 78s linear infinite;will-change:transform} .mq--rev .mq__track{animation-direction:reverse} @keyframes mqdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} /* stop it while someone is actually reading one */ .mq:hover .mq__track,.mq:focus-within .mq__track{animation-play-state:paused} .mq .chat{width:clamp(244px,23vw,318px);flex:none;align-self:flex-start} .chat__av{font-size:.9rem;line-height:1;background:rgba(255,255,255,.08)} /* the shape of a message, without the words */ .bubble--skel{display:grid;gap:7px;padding:14px 15px} .bubble--skel i{display:block;height:8px;border-radius:5px; background:rgba(255,255,255,.17)} .bubble--say{font-size:.87rem} @media(prefers-reduced-motion:reduce){ .mq{-webkit-mask-image:none;mask-image:none} .mq__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center} .mq__track .chat:nth-child(n+6){display:none} /* hide the duplicate half */ .mq .chat{width:min(318px,100%)} } /* ── The odometer ────────────────────────────────────────── The route line is drawing; this says how far it has gone and where it is. Same numbers as the destination cards, same OSRM legs as the geometry — one source, three places on screen. */ .odo{position:absolute;left:0;bottom:clamp(40px,8vh,90px); opacity:0;transform:translateY(14px);pointer-events:none} .odo.is-on{opacity:1;transform:none; transition:opacity .7s var(--ease),transform .7s var(--ease)} .odo__row{display:flex;align-items:baseline;gap:9px} .odo__km{font-family:var(--serif);font-size:clamp(2.6rem,5.5vw,4.4rem);font-weight:300; line-height:.9;letter-spacing:-.04em;color:#fff; font-variation-settings:"opsz" 96;font-variant-numeric:tabular-nums} .odo__unit{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase; color:var(--c-yellow)} .odo__bar{width:min(260px,42vw);height:1.5px;margin:16px 0 12px;border-radius:2px; background:rgba(255,255,255,.16);overflow:hidden} .odo__bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--c-yellow)} .odo__leg{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase; color:rgba(var(--txt-light),.66)} /* On a phone the destination cards already carry "152 km · 2h 50m", and there is no room for both. One statement of the number wins. */ @media(max-width:760px){.odo{display:none}} .no-gl .odo{display:none} /* ── The place label ─────────────────────────────────────── Hover a destination on the island and this names it and says what it is known for. The hue is only an accent (bar + leader line): the text stays white on the dark card, so every hue passes contrast. */ .mapLabel{position:fixed;z-index:59;left:0;top:0;display:grid;gap:3px; min-width:150px;max-width:270px;padding:10px 14px 11px 17px;border-radius:4px; background:rgba(4,32,40,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(0,0,0,.34); color:#fff;opacity:0;pointer-events:none; transform:translate(-50%,calc(-100% - 18px)); transition:opacity .25s var(--ease),transform .4s var(--ease)} .mapLabel::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--hue,#20B8D0)} .mapLabel::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:24px; background:linear-gradient(var(--hue,#20B8D0),transparent)} .mapLabel b{font:600 .66rem/1.25 var(--sans);letter-spacing:.18em;text-transform:uppercase} .mapLabel span{font:400 .8rem/1.4 var(--sans);color:rgba(255,255,255,.84)} .mapLabel.is-on{opacity:1;transform:translate(-50%,calc(-100% - 26px))} .mapLabel.is-home b::after{content:"· our base";margin-left:.55em;color:var(--c-green,#6CD454)} @media(max-width:760px){.mapLabel{max-width:220px;min-width:0}.mapLabel span{font-size:.74rem}} /* ── The live stone ──────────────────────────────────────── Same footprint and the same mask as the poster JPEG it replaces, so the copy on the left keeps its clean ink either way. The poster crossfades out once the first frame has drawn. */ .gemCanvas{position:absolute;right:-4%;top:50%;transform:translateY(-50%); width:min(58%,820px);aspect-ratio:1/1;height:auto;opacity:0; transition:opacity 1.4s var(--ease); -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%), linear-gradient(to left,#000 30%,transparent 92%); -webkit-mask-composite:source-in; mask-image:radial-gradient(closest-side,#000 62%,transparent 100%), linear-gradient(to left,#000 30%,transparent 92%); mask-composite:intersect} .sap__bg img{transition:opacity 1.4s var(--ease)} .sap__bg.gem-live .gemCanvas{opacity:1} .sap__bg.gem-live img{opacity:0} @media(max-width:980px){ .gemCanvas{right:50%;top:auto;bottom:-6%;transform:translateX(50%); width:min(120%,560px);opacity:0} .sap__bg.gem-live .gemCanvas{opacity:.42} } /* ═══════════════════════════════════════════════════════════ WHEN TO COME — the season map Transparent like the hero and journey, so the fixed island canvas stays visible behind it. The DOM carries the actual information (month, both coasts, the recommendation); the 3D weather layer only illustrates it. With no WebGL, or with reduced motion, this section loses nothing it needs. ═══════════════════════════════════════════════════════════ */ .act--seasons{min-height:115vh;display:flex;align-items:center;background:transparent; padding:clamp(100px,12vw,160px) var(--gut)} .seasons__panel{max-width:520px;position:relative} .seasons__panel .h2{max-width:15ch} .months{display:grid;grid-template-columns:repeat(6,1fr);gap:6px; max-width:440px;margin:clamp(24px,3vw,34px) 0 20px} .months button{position:relative;appearance:none;cursor:pointer;border-radius:2px; padding:11px 0;border:1px solid rgba(255,255,255,.2);background:rgba(4,32,40,.45); color:rgba(var(--txt-light),.82); font:500 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase; transition:background .3s,border-color .3s,color .3s} .months button:hover{border-color:rgba(255,255,255,.55);color:#fff} .months button[aria-checked="true"]{background:var(--gold);border-color:var(--gold-deep);color:#12131A} /* a small dot on this month, so "now" is always findable */ .months button.is-now::after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px; margin-left:-2px;border-radius:50%;background:var(--c-turq)} .months button.is-now[aria-checked="true"]::after{background:#12131A} .season{padding:clamp(18px,2vw,24px);border:1px solid rgba(255,255,255,.12);border-radius:3px; background:rgba(4,32,40,.62);backdrop-filter:blur(14px)} .season__month{margin:0 0 14px;font-family:var(--serif);font-weight:300;color:#fff; font-size:clamp(1.8rem,3vw,2.4rem);line-height:1;letter-spacing:-.02em; font-variation-settings:"opsz" 96} .coast{display:grid;grid-template-columns:112px minmax(0,1fr) 88px;align-items:center;gap:14px; padding:10px 0;border-top:1px solid rgba(255,255,255,.08);font-size:.88rem} .coast__name{color:rgba(var(--txt-light),.86)} .coast__bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden} .coast__bar i{display:block;height:100%;width:50%;border-radius:3px;background:var(--c-yellow); transition:width .9s var(--ease),background-color .9s var(--ease)} .coast__bar i.is-wet{background:var(--c-sky)} .coast__bar i.is-mixed{background:var(--c-sage)} .coast__state{text-align:right;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:rgba(var(--txt-light),.78)} .season__note{margin:16px 0 14px;font-size:.95rem;line-height:1.6;color:rgba(var(--txt-light),.86)} .season__go{display:inline-flex;gap:8px;padding-bottom:3px;border-bottom:1px solid currentColor; font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-yellow)} .season__go:hover{color:#fff} .season__fine{margin:14px 0 0;font-size:.76rem;line-height:1.55;max-width:48ch; color:rgba(var(--txt-light),.68)} /* play the year: the months go by on their own */ .season__play{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:9px 16px 9px 10px; appearance:none;cursor:pointer;border-radius:999px;border:1px solid rgba(255,255,255,.22); background:rgba(4,32,40,.5);color:#fff;font:500 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase; transition:background .3s,border-color .3s} .season__play:hover{border-color:rgba(255,255,255,.55)} .season__play i{position:relative;width:24px;height:24px;border-radius:50%;background:var(--gold);flex:none} .season__play i::before{content:"";position:absolute;left:9px;top:7px;border-style:solid;border-width:5px 0 5px 8px; border-color:transparent transparent transparent #12131A} .season__play[aria-pressed="true"] i::before{left:8px;top:7px;width:3px;height:10px;border:0; border-left:3px solid #12131A;border-right:3px solid #12131A;box-sizing:border-box;width:9px} .season__play[aria-pressed="true"]{background:rgba(252,226,2,.12);border-color:rgba(252,226,2,.5)} /* ── The monsoon tags on the map ───────────────────────────── One on each coast while "When to come" is on screen: in season, mixed, or monsoon, and the places on that side. */ .wxTag{position:fixed;left:0;top:0;z-index:58;display:flex;align-items:center;gap:10px; padding:8px 15px 8px 8px;border-radius:999px;pointer-events:none; background:rgba(4,32,40,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 30px rgba(0,0,0,.3);color:#fff; opacity:0;transition:opacity .6s var(--ease);will-change:transform} .wxTag.is-on{opacity:1} .wxTag i{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;flex:none; transition:background .6s,color .6s} .wxTag i svg{width:19px;height:19px} .wxTag[data-state="sun"] i{background:#FCE202;color:#3A2E00} .wxTag[data-state="mixed"] i{background:#CFE2E8;color:#24343A} .wxTag[data-state="rain"] i{background:#56687A;color:#EAF3F8} .wxTag b{display:block;font:600 .8rem/1.2 var(--sans);letter-spacing:.01em;white-space:nowrap} .wxTag em{display:block;margin-top:2px;font:400 .7rem/1.3 var(--sans);font-style:normal; color:rgba(255,255,255,.74);white-space:nowrap} @media(max-width:860px){.wxTag{padding:6px 11px 6px 6px}.wxTag i{width:24px;height:24px}.wxTag em{display:none}} .no-gl .act--seasons{background: radial-gradient(70% 90% at 80% 20%,rgba(32,184,208,.24),transparent 60%), linear-gradient(170deg,#0B3A44,var(--ink) 70%)} @media(max-width:860px){ .act--seasons{align-items:flex-end;padding-top:46vh} .seasons__panel{max-width:none;width:100%} .coast{grid-template-columns:94px minmax(0,1fr) 76px;gap:10px} } /* ═══════════════════════════════════════════════════════════ THE MARK — the island and the road Built from the same coastline as the 3D hero and a route that starts at Trincomalee: home, then south through the hill country to the coast. One unbroken line — one driver, the whole way. The yellow road sits on a dark casing, like a road on a map, so it reads on the teal–green island, on ink, and on sand. ═══════════════════════════════════════════════════════════ */ .lg-s1{stop-color:#20B8D0} .lg-s2{stop-color:#6CD454} .lg-island{stroke:rgba(255,255,255,.34);stroke-width:.8;stroke-linejoin:round} .hdr.is-light .lg-island{stroke:rgba(4,32,40,.28)} .lg-case,.lg-road{fill:none;stroke-linecap:round;stroke-linejoin:round} .lg-case{stroke:#042028;stroke-width:4.2} .lg-road{stroke:var(--c-yellow);stroke-width:2.2} .lg-start{fill:#fff;stroke:#042028;stroke-width:1.2} /* a small reward for pointing at it: the road redraws itself */ .hdr__logo:hover .lg-road,.hdr__logo:focus-visible .lg-road, .hdr__logo:hover .lg-case,.hdr__logo:focus-visible .lg-case{ stroke-dasharray:1;animation:lgdraw .9s var(--ease) both} @keyframes lgdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} /* ═══════════════════════════════════════════════════════════ THE LOADER — the mark, drawn in the order it happens 0.00s the coastline traces itself 0.35s the island fills in 0.50s the road draws south from Trincomalee, the vehicle riding at its front (SVG animateMotion — no JS needed, so it runs before a single script has loaded) 0.95s the name Pure CSS/SMIL: the loader works while the page is still parsing. ═══════════════════════════════════════════════════════════ */ .preloader{background: radial-gradient(60% 50% at 50% 42%,rgba(32,184,208,.16),transparent 70%),var(--ink)} .preloader__inner{display:grid;justify-items:center;gap:18px} .pl-mark{width:clamp(64px,9vw,92px);height:auto;overflow:visible} .pl-coast{fill:none;stroke:var(--c-turq);stroke-width:1;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:1;animation:lgdraw .7s cubic-bezier(.65,0,.35,1) forwards} .pl-fill{opacity:0;animation:plfill .6s var(--ease) .35s forwards} .pl-case,.pl-road{fill:none;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:1;animation:lgdraw .8s cubic-bezier(.45,0,.2,1) .5s forwards} .pl-case{stroke:#042028;stroke-width:4.2} .pl-road{stroke:var(--c-yellow);stroke-width:2.2} .pl-start{fill:#fff;stroke:#042028;stroke-width:1.2;transform-box:fill-box;transform-origin:center; transform:scale(0);animation:plpop .45s var(--ease) .3s forwards} .pl-car{fill:#FFF6D8;filter:drop-shadow(0 0 3px rgba(252,226,2,.9))} .pl-word{margin:0;font-family:var(--serif);font-weight:300;font-size:1.15rem;letter-spacing:.06em; color:#fff;opacity:0;transform:translateY(8px);animation:plword .8s var(--ease) .95s forwards} .preloader__bar{width:120px;margin-top:2px} @keyframes plfill{to{opacity:1}} @keyframes plpop{to{transform:scale(1)}} @keyframes plword{to{opacity:1;transform:none}} /* on the way out the mark lifts slightly as the ink fades */ .preloader.is-done .preloader__inner{transform:translateY(-10px) scale(.97);opacity:0; transition:transform .8s var(--ease),opacity .6s var(--ease)} @media(prefers-reduced-motion:reduce){ .pl-coast,.pl-case,.pl-road{stroke-dashoffset:0;animation:none} .pl-fill,.pl-word{opacity:1;transform:none;animation:none} .pl-start{transform:none;animation:none} .pl-car{display:none} .hdr__logo:hover .lg-road,.hdr__logo:hover .lg-case{animation:none} } /* ── Utility: visually hidden, still read aloud ───────────── */ .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ═══════════════════════════════════════════════════════════ GALLERY — the cinematic carousel The slide in front is full size; its neighbours wait at the sides, smaller and dimmed. The picture inside each slide moves against the slide (parallax) as you drag. Content is plain HTML:
+ /