/* ============================================================ YesTravel — v2 · light editorial design system Pure CSS, no dependencies. RTL-first (logical properties). ============================================================ */ :root{ --bg:#fbf9f4; --bg-soft:#f4f0e6; --surface:#ffffff; --ink:#101d2e; --ink-2:#3d4a5c; --mut:#68727f; --line:#e7e1d3; --line-soft:#efeadd; --gold:#b78d2f; --gold-deep:#8f6c1d; --gold-soft:#f6eed9; --night:#0d1725; --night-2:#131f30; --ok:#3e8e63; --r-l:22px; --r-m:16px; --ease:cubic-bezier(.22,1,.36,1); --shadow-s:0 1px 2px rgba(16,29,46,.05),0 4px 14px -8px rgba(16,29,46,.08); --shadow-m:0 2px 4px rgba(16,29,46,.05),0 24px 48px -24px rgba(16,29,46,.18); --wrap:1160px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* Horizontal-overflow clipping lives on , NOT . overflow-x:clip on makes body the sticky containing block and breaks position:sticky for descendants (the card deck would unpin). */ html{scroll-behavior:smooth;overflow-x:clip} html:focus-within{scroll-behavior:smooth} body{ font-family:'Vazirmatn',system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--bg); color:var(--ink); line-height:1.75; font-size:1rem; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--gold-soft);color:var(--ink)} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,40px)} main section[id]{scroll-margin-block-start:90px} .skip{ position:fixed;inset-inline-start:16px;top:-60px;z-index:200; background:var(--ink);color:#fff;padding:10px 18px;border-radius:12px; transition:top .3s var(--ease); } .skip:focus{top:16px} /* ---------- type ---------- */ .kicker{ display:inline-flex;align-items:center;gap:10px; font-size:.82rem;font-weight:600;letter-spacing:.06em; color:var(--gold-deep); } .kicker::before{ content:"";width:26px;height:1px;flex:none; background:repeating-linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 8px); } .h2{ font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:700;line-height:1.35; letter-spacing:-.01em; margin-block:10px 0; max-width:22ch; } .lead{color:var(--ink-2);max-width:58ch;margin-block-start:14px} /* ---------- buttons ---------- */ .btn{ position:relative;display:inline-flex;align-items:center;gap:12px; padding:14px 26px;border-radius:999px; font-weight:600;font-size:.98rem;line-height:1.2; transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s,border-color .3s; will-change:transform; } .btn:active{transform:scale(.97)} .btn-l{padding:17px 32px;font-size:1.05rem} .btn-s{padding:10px 20px;font-size:.9rem} .btn-ink{background:var(--ink);color:#fff;box-shadow:var(--shadow-s);overflow:hidden} .btn-ink::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%); transform:translateX(-160%); } .btn-ink:hover{transform:scale(1.05);box-shadow:var(--shadow-m)} .btn-ink:hover::after{animation:shine-once .7s var(--ease) forwards} @keyframes shine-once{to{transform:translateX(160%)}} .btn-gold{ background:linear-gradient(135deg,#d3ab55,#ab8226); color:#221806;box-shadow:var(--shadow-s); overflow:hidden; } /* periodic shine sweep on the primary CTA */ .btn-gold::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); transform:translateX(-160%); animation:shine 5s var(--ease) 2.4s infinite; } @keyframes shine{ 0%{transform:translateX(-160%)} 22%{transform:translateX(160%)} 100%{transform:translateX(160%)} } .btn-gold:hover{transform:scale(1.05);box-shadow:0 2px 4px rgba(16,29,46,.06),0 22px 44px -20px rgba(143,108,29,.55)} .btn-line{border:1px solid var(--line);background:var(--surface);color:var(--ink)} .btn-line:hover{border-color:var(--gold);color:var(--gold-deep);transform:scale(1.05)} .btn-linelight{border:1px solid rgba(255,255,255,.28);color:#fff} .btn-linelight:hover{border-color:var(--gold);color:#e5c069;transform:scale(1.05)} /* plane inside buttons: takes off on hover */ .btn-jet{ display:grid;place-items:center;width:22px;height:22px;flex:none; overflow:visible; } .btn-jet svg{width:15px;height:15px;fill:currentColor;transform:rotate(-45deg)} html[dir="ltr"] .btn-jet svg{transform:rotate(45deg)} @keyframes jet-rtl{ 0%{transform:rotate(-45deg) translateY(0);opacity:1} 45%{transform:rotate(-45deg) translateY(-26px);opacity:0} 50%{transform:rotate(-45deg) translateY(26px);opacity:0} 100%{transform:rotate(-45deg) translateY(0);opacity:1} } @keyframes jet-ltr{ 0%{transform:rotate(45deg) translateY(0);opacity:1} 45%{transform:rotate(45deg) translateY(-26px);opacity:0} 50%{transform:rotate(45deg) translateY(26px);opacity:0} 100%{transform:rotate(45deg) translateY(0);opacity:1} } .btn:hover .btn-jet svg{animation:jet-rtl .7s var(--ease)} html[dir="ltr"] .btn:hover .btn-jet svg{animation:jet-ltr .7s var(--ease)} .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} /* ---------- topbar ---------- */ .topbar{ position:sticky;top:0;z-index:100; background:rgba(251,249,244,.82); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-block-end:1px solid transparent; transition:border-color .4s,box-shadow .4s; } .topbar.scrolled{border-color:var(--line);box-shadow:0 8px 30px -22px rgba(16,29,46,.25)} .topbar-in{display:flex;align-items:center;gap:28px;min-height:74px} .brand{display:inline-flex;align-items:center;font-weight:700;font-size:1.15rem;letter-spacing:-.01em} .brand-name{direction:ltr} .navlinks{display:flex;gap:26px;margin-inline-start:auto} .navlinks a{ position:relative;font-size:.95rem;font-weight:500;color:var(--ink-2); transition:color .3s,text-shadow .3s;padding-block:6px; } .navlinks a:hover{color:var(--gold-deep);text-shadow:0 0 14px rgba(183,141,47,.4)} .topbar-side{display:flex;align-items:center;gap:16px} .lang{display:inline-flex;gap:2px;direction:ltr;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface)} .lang a{ font-size:.76rem;font-weight:600;letter-spacing:.04em; padding:4px 10px;border-radius:999px;color:var(--mut);transition:.3s; } .lang a:hover{color:var(--ink)} .lang a[aria-current]{background:var(--ink);color:#fff} .burger{display:none;position:relative;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--surface)} .burger span{ position:absolute;inset-inline-start:12px;width:18px;height:1.8px;background:var(--ink); transition:transform .4s var(--ease),top .4s var(--ease); } .burger span:first-child{top:17px} .burger span:last-child{top:24px} /* ---------- mobile menu ---------- */ .menu{ position:fixed;inset:0;z-index:150;background:var(--bg); overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s; } .menu.open{opacity:1;visibility:visible} .menu-in{ display:flex;flex-direction:column;min-height:100%; padding:18px clamp(20px,5vw,32px) calc(28px + env(safe-area-inset-bottom)); max-width:640px;margin-inline:auto;width:100%; } .menu-top{display:flex;align-items:center;justify-content:space-between;min-height:54px;flex:none} .menu-x{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--surface)} .menu-x svg{width:18px;height:18px} .menu-nav{display:flex;flex-direction:column;gap:4px;margin-block:auto;padding-block:26px} .menu-nav a{ font-size:1.6rem;font-weight:700;padding-block:10px; border-block-end:1px solid var(--line-soft); opacity:0;translate:0 18px;transition:opacity .5s var(--ease),translate .6s var(--ease); } .menu.open .menu-nav a{opacity:1;translate:0 0} .menu.open .menu-nav a:nth-child(2){transition-delay:.06s} .menu.open .menu-nav a:nth-child(3){transition-delay:.12s} .menu.open .menu-nav a:nth-child(4){transition-delay:.18s} .menu.open .menu-nav a:nth-child(5){transition-delay:.24s} .menu-foot{display:flex;flex-direction:column;gap:16px;flex:none;padding-block-start:8px} .menu-foot .btn{justify-content:center} .menu-meta{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--ink-2);font-size:.95rem} .menu-foot .lang{align-self:flex-start;display:inline-flex} .menu-foot .lang a{font-size:.82rem;padding:6px 14px} /* ---------- hero ---------- */ .hero{ position:relative;overflow:clip; display:grid;place-items:center; min-height:calc(100vh - 74px); min-height:calc(100svh - 74px); padding-block:clamp(56px,8vh,110px); } .sky{position:absolute;inset:-12% 0 0;pointer-events:none;will-change:transform,opacity} .sky svg{width:100%;height:100%} html[dir="rtl"] .sky svg{transform:scaleX(-1)} .sky-path{ fill:none;stroke:var(--gold);stroke-width:1.6; stroke-dasharray:2 11;stroke-linecap:round;opacity:.4; } .sky-trail{ fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;opacity:.75; } .sky-dot{fill:var(--gold);opacity:0;animation:dot-pulse 4.2s ease-in-out infinite;animation-delay:2.2s} .sky-dot.d2{animation-delay:2.9s} .sky-dot.d3{animation-delay:3.6s} @keyframes dot-pulse{ 0%,100%{opacity:.25;r:3.4} 50%{opacity:.85;r:4.6} } .sky-plane{fill:var(--gold-deep);opacity:0} .hero-in{ position:relative;max-width:900px;margin-inline:auto; display:flex;flex-direction:column;align-items:center; text-align:center; } .hero-h1{ font-size:clamp(2.2rem,5.6vw,4rem); font-weight:700;line-height:1.32;letter-spacing:-.015em; margin-block:20px 0; max-width:19ch; } /* masked word/letter reveal (Framer-style stagger, vanilla) */ html.js .hero-h1[data-words]:not(.split):not(.split-plain){opacity:0} .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-block-end:.14em;margin-block-end:-.14em} .ww{display:inline-block;translate:0 118%;transition:translate .85s var(--ease)} body.ready .ww{translate:0 0} /* brand-only hero title */ .hero-brand{ font-size:clamp(2.7rem,9vw,5.6rem); line-height:1.08;letter-spacing:-.02em; max-width:none;direction:ltr; margin-block:0; } .hero-h1 em{font-style:normal;color:var(--gold-deep);position:relative;white-space:nowrap} .hero-h1 em::after{ content:"";position:absolute;inset-inline:2px;bottom:.06em;height:.14em; background:var(--gold-soft);z-index:-1;border-radius:3px; transform:scaleX(0);transform-origin:var(--tx-origin,right); transition:transform .9s var(--ease) 1.5s; } html[dir="ltr"] .hero-h1 em::after{transform-origin:left} body.ready .hero-h1 em::after,html:not(.js) .hero-h1 em::after{transform:scaleX(1)} .hero-sub{color:var(--ink-2);font-size:clamp(1.02rem,1.6vw,1.18rem);max-width:50ch;margin-block:22px 32px;margin-inline:auto} .hero-in .cta-row{justify-content:center} .hero-trust{ margin-block-start:36px; font-size:.86rem;color:var(--mut);letter-spacing:.01em; max-width:60ch; } .hero-trust b{color:var(--ink-2);font-weight:600} /* hero load-in: rise + blur-to-focus */ html.js .rise{ opacity:0;translate:0 26px;filter:blur(6px); transition:opacity .9s var(--ease),translate 1s var(--ease),filter .9s var(--ease); } html.js body.ready .rise{opacity:1;translate:0 0;filter:none} .hero-in .rise:nth-child(2){transition-delay:.75s} .hero-in .rise:nth-child(3){transition-delay:.95s} .page-hero .rise:nth-child(2){transition-delay:.35s} /* ---------- intro video ---------- */ .intro{background:var(--surface);border-block:1px solid var(--line);padding-block:clamp(70px,9vh,110px)} .intro-in{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,5vw,70px);align-items:center} .vid{ position:relative;aspect-ratio:16/9; border-radius:var(--r-l);overflow:hidden; border:1px solid var(--line);background:var(--night); box-shadow:var(--shadow-m); } .vid video{width:100%;height:100%;object-fit:cover;display:block} .vid-off{ position:absolute;inset:0; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:4px;text-align:center;padding:20px; color:#c8d4e2;background:linear-gradient(160deg,#131f30,#0d1725); } .vid-off[hidden]{display:none} .vid-play{ width:64px;height:64px;border-radius:50%; border:1px solid rgba(255,255,255,.25); display:grid;place-items:center;margin-block-end:12px; } .vid-play svg{width:22px;height:22px;fill:#e5c069;transform:rotate(-45deg)} .vid-off b{color:#fff;font-size:1.05rem} .vid-off p{font-size:.85rem;color:#8fa1b8} .intro-txt .h2{margin-block:0} .intro-role{color:var(--mut);font-size:.95rem;margin-block:4px 14px} .intro-txt > p{color:var(--ink-2);max-width:44ch} .intro-txt .btn{margin-block-start:24px} /* ---------- updates / notices ---------- */ .updates{padding-block:clamp(70px,9vh,110px)} .upd-list{display:flex;flex-direction:column;gap:12px;margin-block-start:30px} .upd{ display:flex;gap:18px;align-items:flex-start; background:var(--surface);border:1px solid var(--line); border-radius:var(--r-m);padding:20px 22px; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s; } .upd:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(183,141,47,.45)} .upd-tag{ flex:none;font-size:.74rem;font-weight:700;letter-spacing:.06em; color:var(--gold-deep);background:var(--gold-soft); border-radius:999px;padding:5px 13px;margin-block-start:3px; } .upd b{display:block;font-size:1.02rem;margin-block-end:2px} .upd p{font-size:.93rem;color:var(--ink-2)} .upd-note{margin-block-start:22px;font-size:.92rem;color:var(--mut)} .upd-note a{color:var(--gold-deep);font-weight:600;border-block-end:1px solid var(--gold);transition:opacity .3s} .upd-note a:hover{opacity:.7} /* ---------- stats ---------- */ .stats{border-block:1px solid var(--line);background:var(--surface)} .stats-in{ display:grid;grid-template-columns:repeat(4,1fr); } .stat{ display:flex;flex-direction:column;gap:2px; padding:30px clamp(14px,2vw,30px); } .stat + .stat{border-inline-start:1px solid var(--line-soft)} .stat-n{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;letter-spacing:-.02em;color:var(--ink)} .stat-l{font-size:.86rem;color:var(--mut)} /* ---------- pain ---------- */ .pain{padding-block:clamp(80px,10vh,130px)} .pain-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:18px; margin-block-start:44px; } .pain-card{ position:relative;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-l); padding:30px 28px 28px; transition:transform .6s var(--ease),box-shadow .6s var(--ease); } .pain-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)} .pain-n{ font-size:2.6rem;font-weight:700;line-height:1;color:transparent; -webkit-text-stroke:1.2px var(--gold); display:block;margin-block-end:16px;direction:ltr;text-align:start; } .pain-card h3{font-size:1.08rem;font-weight:700;line-height:1.5;margin-block-end:8px} .pain-card p{font-size:.94rem;color:var(--ink-2)} .pain-turn{ margin-block-start:38px;font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.7; max-width:44ch;color:var(--ink-2); padding-inline-start:22px;border-inline-start:2.5px solid var(--gold); } .pain-turn b{color:var(--ink);font-weight:700} /* ---------- founder ---------- */ .founder{background:var(--surface);border-block:1px solid var(--line);padding-block:clamp(80px,10vh,130px)} .founder-in{display:grid;grid-template-columns:380px 1fr;gap:clamp(36px,6vw,90px);align-items:start} .f-card{ position:sticky;top:110px; background:linear-gradient(165deg,#fdfcf9,#f5f0e4); border:1px solid var(--line);border-radius:var(--r-l); padding:38px 32px;text-align:center; box-shadow:var(--shadow-s); } .f-badge{ width:92px;height:92px;margin-inline:auto;border-radius:50%; display:grid;place-items:center; background:var(--surface); border:1px dashed var(--gold); margin-block-end:18px; } .f-badge svg{width:34px;height:34px;fill:var(--gold);transform:rotate(-45deg)} .f-name{font-size:1.3rem;font-weight:700} .f-role{color:var(--mut);font-size:.92rem;margin-block:2px 18px} .f-tags{display:flex;flex-direction:column;gap:8px} .f-tags li{ font-size:.85rem;font-weight:500;color:var(--ink-2); border:1px solid var(--line);background:rgba(255,255,255,.8); border-radius:999px;padding:7px 14px; } .f-list{display:flex;flex-direction:column;gap:22px;margin-block-start:32px} .f-list li{display:flex;gap:16px;align-items:flex-start} .tick{ display:grid;place-items:center;flex:none;width:30px;height:30px;margin-block-start:3px; border-radius:50%;background:var(--gold-soft);color:var(--gold-deep); } .tick svg{width:14px;height:14px} .f-list b{display:block;font-size:1.02rem;margin-block-end:2px} .f-list p{font-size:.93rem;color:var(--ink-2)} /* ---------- offer / tickets ---------- */ .offer{padding-block:clamp(80px,10vh,130px)} .offer-head{max-width:640px;margin-block-end:44px} .ticket{ display:grid;grid-template-columns:1fr 290px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l); box-shadow:var(--shadow-m); position:relative;overflow:hidden; margin-block-end:20px; } .t-main{padding:clamp(28px,4vw,46px)} .t-tag{ display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.09em; color:var(--gold-deep);background:var(--gold-soft); border-radius:999px;padding:6px 14px;margin-block-end:16px; } .t-main h3,.bpass-main h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:700;line-height:1.4} .t-main p{color:var(--ink-2);max-width:54ch;margin-block:10px 24px} .t-stub{ position:relative; border-inline-start:1.5px dashed var(--line); background:linear-gradient(165deg,#fdfcf8,#f6f1e3); display:flex;flex-direction:column;justify-content:center;gap:18px; padding:30px; } /* perforation notches */ .t-stub::before,.t-stub::after{ content:"";position:absolute;inset-inline-start:-13px;width:26px;height:26px;border-radius:50%; background:var(--bg);border:1px solid var(--line); } .t-stub::before{top:-14px} .t-stub::after{bottom:-14px} .t-code{font-size:.78rem;font-weight:700;letter-spacing:.22em;color:var(--mut);direction:ltr;text-align:center} .t-route{ display:flex;align-items:center;justify-content:center;gap:14px; font-size:.95rem;color:var(--ink); } .t-route svg{width:17px;height:17px;fill:var(--gold);transform:rotate(-90deg);flex:none} html[dir="ltr"] .t-route svg{transform:rotate(90deg)} .t-bar{ height:44px;border-radius:4px; background:repeating-linear-gradient(90deg, var(--ink) 0 2px,transparent 2px 5px, var(--ink) 5px 8px,transparent 8px 10px, var(--ink) 10px 11px,transparent 11px 16px); opacity:.75; } .t-bar.light{background:repeating-linear-gradient(90deg, #fff 0 2px,transparent 2px 5px, #fff 5px 8px,transparent 8px 10px, #fff 10px 11px,transparent 11px 16px); opacity:.8; } /* ---------- service cards: Pulito e Peloso editorial-number model ---------- */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px)} .svc{ position:relative;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l); padding:clamp(30px,3.4vw,44px) clamp(26px,2.6vw,36px); box-shadow:var(--shadow-s); min-height:280px; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s; } a.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(183,141,47,.45)} .svc-n{ font-size:clamp(2.1rem,2.8vw,2.7rem);font-weight:700; line-height:1;letter-spacing:-.03em;color:var(--gold-deep); display:block; } .svc h3{font-size:clamp(1.2rem,1.5vw,1.42rem);font-weight:700;margin-block:1.1rem .6rem} .svc p{font-size:clamp(.96rem,1.1vw,1.04rem);line-height:1.6;color:var(--ink-2)} .svc-more{ display:inline-flex;align-items:center;gap:8px;margin-block-start:auto;padding-block-start:1.3rem; font-size:.92rem;font-weight:600;letter-spacing:.02em;color:var(--gold-deep); } .svc-more svg{width:15px;height:15px;transition:transform .45s var(--ease)} html[dir="ltr"] .svc-more svg{transform:scaleX(-1)} a.svc:hover .svc-more svg{transform:translateX(-5px)} html[dir="ltr"] a.svc:hover .svc-more svg{transform:scaleX(-1) translateX(-5px)} .svc-note{ background:linear-gradient(160deg,var(--gold-soft),#f1e6c8); border-color:#e4d5a8; } .svc-note h3{color:var(--gold-deep)} .svc-note p{color:#5c4a1a} /* ---------- card deck (Pulito e Peloso style) — desktop + mobile ---------- Off by default; JS adds .deck-on (any width) and sets the wrapper height. Cards stack centred; scroll flings the top one away, next rises. */ .svc-deck.deck-on{position:relative;display:block} .svc-deck.deck-on .svc-grid{ position:sticky;top:0;height:100vh;height:100svh; display:block;grid-template-columns:none; /* full-bleed stage so tossed cards are clipped at the viewport edge (not the page), removing any horizontal page scroll */ width:100vw;max-width:100vw; margin-inline-start:calc(50% - 50vw); overflow:clip; } .svc-deck.deck-on .svc{ position:absolute;top:50%;left:50%; width:min(360px,86vw);margin:0; min-height:min(76vh,560px);justify-content:center; padding:clamp(30px,3vw,44px) clamp(24px,2.4vw,34px); opacity:0;transform:translate(-50%,-50%);translate:none!important;filter:none!important; transition:none;will-change:transform,opacity; box-shadow:0 22px 50px -26px rgba(16,29,46,.5); } .svc-deck.deck-on .svc-n{font-size:clamp(2.4rem,3vw,3rem)} .svc-deck.deck-on .svc h3{font-size:clamp(1.4rem,1.7vw,1.64rem)} .svc-deck.deck-on .svc p{font-size:clamp(1rem,1.15vw,1.1rem)} /* desktop: wide, short landscape cards (long horizontally, thin vertically). Fixed height so every card is identical — otherwise cards of different text length peek out from behind one another in the stack. */ @media (min-width:721px){ /* pull the departures board up into the deck's empty tail so the transition out of the deck doesn't leave a big blank band */ .svc-deck.deck-on{margin-bottom:-30vh} .svc-deck.deck-on .svc{ width:min(760px,90vw);min-height:196px;height:196px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center;align-content:center;column-gap:40px;row-gap:6px; padding:32px 52px; } .svc-deck.deck-on .svc-n{grid-column:1;grid-row:1 / span 2;align-self:center;font-size:3.4rem} .svc-deck.deck-on .svc h3{grid-column:2;grid-row:1;margin:0;font-size:1.7rem} .svc-deck.deck-on .svc p{grid-column:2;grid-row:2;margin:0;font-size:1.06rem} .svc-deck.deck-on .svc-more{grid-column:3;grid-row:1 / span 2;align-self:center;margin:0;padding:0;white-space:nowrap} } /* ---------- steps / runway ---------- */ .steps{background:var(--surface);border-block:1px solid var(--line);padding-block:clamp(80px,10vh,130px)} .runway{position:relative;height:64px;margin-block:52px 30px} .rw-line{ position:absolute;inset-inline:8px;top:50%;height:0; border-block-start:1.6px dashed var(--line); } .rw-fill{ position:absolute;inset-inline-start:8px;top:50%;height:1.8px;width:0; background:linear-gradient(90deg,var(--gold),var(--gold-deep)); transform:translateY(-.9px);border-radius:2px; } .rw-node{ position:absolute;top:50%;width:12px;height:12px; translate:-50% -50%; border-radius:50%;background:var(--bg);border:2px solid var(--line); transition:border-color .5s,background .5s; } html[dir="rtl"] .rw-node{translate:50% -50%} .rw-node.lit{border-color:var(--gold);background:var(--gold-soft)} .rw-plane{ position:absolute;top:50%;inset-inline-start:8px; width:38px;height:38px;translate:-50% -50%; display:grid;place-items:center; background:var(--ink);border-radius:50%; box-shadow:0 8px 20px -8px rgba(16,29,46,.5); } html[dir="rtl"] .rw-plane{translate:50% -50%} .rw-plane svg{width:16px;height:16px;fill:#fff;transform:rotate(90deg)} html[dir="rtl"] .rw-plane svg{transform:rotate(-90deg)} .step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .step{padding:6px 4px} .step-n{ display:inline-grid;place-items:center;width:40px;height:40px; border-radius:50%;border:1px solid var(--line);background:var(--bg); font-weight:700;font-size:1rem;margin-block-end:14px; } .step h3{font-size:1.05rem;font-weight:700;margin-block-end:6px} .step p{font-size:.92rem;color:var(--ink-2)} /* ---------- departures board ---------- */ .board-sec{padding-block:clamp(80px,10vh,130px)} .board{ direction:ltr; background:var(--night);border-radius:var(--r-l); border:1px solid #1d2b3f; box-shadow:var(--shadow-m); overflow:hidden; font-family:'SF Mono',ui-monospace,Menlo,Consolas,'Liberation Mono',monospace; } .board-top{ display:flex;align-items:center;gap:12px; padding:16px 22px;border-bottom:1px solid #1d2b3f; color:#8fa1b8;font-size:.8rem;letter-spacing:.18em; } .board-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:dot-pulse 2.6s ease-in-out infinite} .board-title{font-weight:700;color:#c8d4e2} .board-clock{margin-left:auto;font-variant-numeric:tabular-nums} .board-rows{padding:10px 14px 16px} .board-row{ display:grid;grid-template-columns:1fr 120px 170px;gap:10px; padding:9px 8px;align-items:center; } .board-row + .board-row{border-top:1px solid rgba(255,255,255,.045)} .board-h span{color:#5d7089;font-size:.68rem;letter-spacing:.24em} .board-row [data-flap]{display:flex;gap:2.5px;flex-wrap:nowrap;overflow:hidden} .flap{ display:grid;place-items:center; width:15px;height:24px;border-radius:3px; background:linear-gradient(180deg,#1a2637 48%,#141e2d 52%); color:#e8eef5;font-size:.78rem;font-weight:500; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.04); } .flap.sp{background:none;box-shadow:none;width:7px} .board-row .ok .flap{color:#7ed6a2} .board-row .gold .flap{color:#e5c069} .board-h .flap{background:none;box-shadow:none;width:auto;font-size:.68rem;color:#5d7089} .board-cap{margin-block-start:22px;color:var(--ink-2);font-size:.98rem} .board-cap a{font-weight:700;color:var(--gold-deep);border-block-end:1px solid var(--gold);transition:opacity .3s} .board-cap a:hover{opacity:.7} /* ---------- community ---------- */ .join{background:var(--surface);border-block:1px solid var(--line);padding-block:clamp(80px,10vh,130px)} .join-in{max-width:760px} .join-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-block-start:34px} .soc{ display:flex;align-items:center;gap:14px; border:1px solid var(--line);border-radius:var(--r-m); background:var(--bg);padding:18px 20px; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s; } .soc:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(183,141,47,.45)} .soc > svg{width:26px;height:26px;flex:none;color:var(--gold-deep)} .soc b{display:block;font-size:.98rem} .soc i{font-style:normal;font-size:.82rem;color:var(--mut);direction:ltr;display:block;text-align:start} .join-note{margin-block-start:24px;font-size:.9rem;color:var(--mut)} /* ---------- faq ---------- */ .faq{padding-block:clamp(80px,10vh,130px)} .faq-in{display:grid;grid-template-columns:340px 1fr;gap:clamp(36px,6vw,80px);align-items:start} .faq-head{position:sticky;top:110px} .faq-head .btn{margin-block-start:24px} .faq-list{display:flex;flex-direction:column;gap:12px} .faq-item{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m); overflow:hidden;transition:box-shadow .5s var(--ease); } .faq-item[open]{box-shadow:var(--shadow-s)} .faq-item summary{ display:flex;align-items:center;justify-content:space-between;gap:18px; padding:20px 24px;cursor:pointer;list-style:none; font-weight:600;font-size:1.02rem; } .faq-item summary::-webkit-details-marker{display:none} .faq-ic{position:relative;width:26px;height:26px;flex:none;border:1px solid var(--line);border-radius:50%} .faq-ic::before,.faq-ic::after{ content:"";position:absolute;top:50%;left:50%;width:10px;height:1.6px; background:var(--gold-deep);translate:-50% -50%; transition:rotate .45s var(--ease); } .faq-ic::after{rotate:90deg} .faq-item[open] .faq-ic::after{rotate:0deg} .faq-a{padding:0 24px 22px;color:var(--ink-2);font-size:.96rem;max-width:62ch} /* ---------- final cta ---------- */ .final{padding-block:clamp(40px,7vh,90px) clamp(90px,11vh,140px)} .bpass{ display:grid;grid-template-columns:1fr 290px; background:linear-gradient(150deg,var(--night-2),var(--night) 60%); color:#fff;border-radius:calc(var(--r-l) + 4px); overflow:hidden;box-shadow:0 40px 80px -40px rgba(13,23,37,.6); position:relative; } .bpass::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background: radial-gradient(600px 300px at 85% -20%,rgba(183,141,47,.22),transparent 65%), radial-gradient(500px 260px at 10% 120%,rgba(183,141,47,.12),transparent 60%); } .bpass-main{position:relative;padding:clamp(34px,5vw,58px)} .bpass-main .t-tag{background:rgba(183,141,47,.16);color:#e5c069} .bpass-main h2{color:#fff;max-width:20ch} .bpass-main p{color:#aebccd;max-width:50ch;margin-block:14px 28px} .bpass-stub{ position:relative;border-inline-start:1.5px dashed rgba(255,255,255,.22); display:flex;flex-direction:column;justify-content:center;gap:18px;padding:30px; } .bpass-stub::before,.bpass-stub::after{ content:"";position:absolute;inset-inline-start:-13px;width:26px;height:26px;border-radius:50%; background:var(--bg); } .bpass-stub::before{top:-14px} .bpass-stub::after{bottom:-14px} .bpass-stub .t-code{color:#8fa1b8} .bpass-stub .t-route{color:#e8eef5} .bpass-stub .t-route svg{fill:#e5c069} /* ---------- footer: two quiet rows ---------- */ .foot{border-block-start:1px solid var(--line);background:var(--surface);padding-block:36px 26px} .foot-top{ display:flex;align-items:center;justify-content:space-between; gap:18px 34px;flex-wrap:wrap; padding-block-end:26px;margin-block-end:22px; border-block-end:1px solid var(--line-soft); } .foot-contact{display:flex;flex-wrap:wrap;gap:8px 28px} .foot-contact a{font-size:.92rem;color:var(--ink-2);transition:color .3s} .foot-contact a:hover{color:var(--gold-deep)} .foot-soc{display:flex;gap:10px} .foot-soc a{ display:grid;place-items:center;width:40px;height:40px; border:1px solid var(--line);border-radius:50%; color:var(--ink-2);background:var(--bg); transition:transform .5s var(--ease),color .3s,border-color .3s; } .foot-soc a:hover{transform:scale(1.08);color:var(--gold-deep);border-color:var(--gold)} .foot-soc svg{width:17px;height:17px} .foot-btm{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:12px 26px;font-size:.85rem;color:var(--mut); } .foot-btm a:hover{color:var(--ink)} /* ---------- reveal on scroll: rise + blur-to-focus ---------- NB: the "show" rules must OUTRANK the html.js "hide" rules, hence the html.js prefix on .on as well. */ html.js .reveal{ opacity:0;translate:0 26px;filter:blur(7px); transition:opacity .75s var(--ease),translate .9s var(--ease),filter .75s var(--ease); } html.js .reveal.on{opacity:1;translate:0 0;filter:none} /* ---------- page-hero (inner pages) ---------- */ .page-hero{padding-block:clamp(70px,9vh,110px) clamp(40px,6vh,70px);text-align:center} .page-hero .hero-h1{margin-inline:auto} .page-hero .lead{margin-block-start:16px;margin-inline:auto} .svc-detail{padding-block:clamp(30px,5vh,60px)} .svc-detail .wrap{display:grid;grid-template-columns:1fr;gap:22px} .detail{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l); padding:clamp(28px,4vw,48px); scroll-margin-top:100px; } .detail-head .svc-n{margin-block-end:16px} .detail-head h2{font-size:clamp(1.4rem,2.6vw,1.85rem);font-weight:700;line-height:1.4;margin-block-end:10px} .detail-head p{color:var(--ink-2)} .detail-head .btn{margin-block-start:22px} .detail-list{display:flex;flex-direction:column;gap:14px} .detail-list h3{font-size:.85rem;font-weight:700;letter-spacing:.07em;color:var(--mut);margin-block-end:2px} .detail-list li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--ink-2)} .detail-list li .tick{width:24px;height:24px;margin-block-start:2px} .detail-list li .tick svg{width:11px;height:11px} .detail-note{ font-size:.88rem;color:var(--mut);border-inline-start:2px solid var(--gold); padding-inline-start:14px;margin-block-start:8px; } /* ---------- legal ---------- */ .legal{padding-block:clamp(60px,8vh,100px);max-width:780px} .legal h1{font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.35;margin-block-end:24px} .legal h2{font-size:1.2rem;margin-block:34px 10px} .legal p,.legal li{color:var(--ink-2);font-size:.97rem} .legal ul{list-style:disc;padding-inline-start:22px;display:flex;flex-direction:column;gap:6px;margin-block:10px} .legal a{color:var(--gold-deep);border-block-end:1px solid var(--gold)} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1023px){ /* mobile topbar: burger at start, logo dead-centre, round WhatsApp at end */ .navlinks{display:none} .topbar-in{min-height:62px;position:relative;justify-content:space-between} .topbar-side{display:contents} .topbar-side .lang{display:none} .topbar .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} .burger{display:block;order:-1} .topbar-side .btn{ width:42px;height:42px;padding:0;gap:0; justify-content:center;font-size:0;border-radius:50%; } .topbar-side .btn .btn-jet svg{width:16px;height:16px} .founder-in{grid-template-columns:1fr;gap:34px} .f-card{position:static;max-width:440px} .intro-in{grid-template-columns:1fr;gap:30px} .faq-in{grid-template-columns:1fr;gap:34px} .faq-head{position:static} .svc-grid,.pain-grid{grid-template-columns:repeat(2,1fr)} .join-links{grid-template-columns:1fr 1fr} .detail{grid-template-columns:1fr} } @media (max-width:719px){ body{line-height:1.8} .stats-in{grid-template-columns:1fr 1fr} .stat{padding:22px 18px} .stat:nth-child(3){border-inline-start:0} .stat:nth-child(n+3){border-block-start:1px solid var(--line-soft)} .svc-grid,.pain-grid{grid-template-columns:1fr} .ticket,.bpass{grid-template-columns:1fr} .t-stub,.bpass-stub{ border-inline-start:0;border-block-start:1.5px dashed var(--line); flex-direction:row;align-items:center;justify-content:space-between; padding:22px 24px; } .bpass-stub{border-block-start-color:rgba(255,255,255,.22)} .t-stub::before,.bpass-stub::before{inset-inline-start:-14px;top:50%;translate:0 -50%} .t-stub::after,.bpass-stub::after{inset-inline-start:auto;inset-inline-end:-14px;top:50%;bottom:auto;translate:0 -50%} .t-bar{display:none} .step-grid{grid-template-columns:1fr;gap:26px} .runway{display:none} .join-links{grid-template-columns:1fr} .board-row{grid-template-columns:1fr 100px} .board-row [data-flap]:nth-child(2){display:none} .board-h [data-flap]:nth-child(2){display:none} .flap{width:13px;height:21px;font-size:.68rem} /* mobile footer: centred stack */ .foot{padding-block:32px 24px} .foot-top{flex-direction:column;align-items:center;text-align:center;gap:20px;padding-block-end:24px} .foot-contact{flex-direction:column;align-items:center;gap:12px} .foot-contact a{font-size:.98rem} .foot-soc{gap:14px} .foot-soc a{width:44px;height:44px} .foot-btm{flex-direction:column;align-items:center;text-align:center;gap:14px} .cta-row .btn{flex:1;justify-content:center;min-width:200px} .hero{min-height:calc(100svh - 64px);padding-block:48px 56px} .hero-trust{font-size:.8rem} .upd{flex-direction:column;gap:10px} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} .rise,.reveal,.menu-nav a{opacity:1!important;translate:0 0!important;filter:none!important} .hero-h1[data-words]{opacity:1!important} .ww{translate:0 0!important} .hero-h1 em::after{transform:scaleX(1)!important} .sky{display:none} }