/* FlyHatke stylesheet — light-first, warm and friendly. Design tokens first; component sections follow in page order. THEMES Light is the default. Dark is opt-in via [data-theme="dark"] on , and also honoured from the OS when the user has expressed no preference. Style components through the tokens only — never inside a media query — so both themes stay in sync. COLOUR --brand (emerald) carries the product's whole story: it is both the brand and the colour of money saved. --flame marks steal deals and urgency. --amber is caution, --rose is error. Nothing else is chromatic. TYPE Schibsted Grotesk for interface, IBM Plex Mono for every numeral (fares, times, durations, IATA codes) — Plex is one of the few monos carrying ₹, which every INR price on this page starts with. MOTION Two curves, both exponential ease-out, neither overshooting: --ease for ordinary state changes, --emph where a change should feel decisive. No bounce or elastic anywhere — indiscriminate overshoot reads as toy-like. All motion is transform/opacity only, and the whole system collapses under prefers-reduced-motion at the bottom. */ /* ==================================================================== */ /* Design tokens */ /* ==================================================================== */ :root{ color-scheme:light; --bg:#f6f4ef; --bg-wash-1:rgba(23,105,74,.07); --bg-wash-2:rgba(212,87,42,.06); --surface:#fffefb; --surface-2:#f2efe8; --surface-3:#e7e3da; --line:rgba(27,26,22,.11); --line-2:rgba(27,26,22,.2); --text:#1b1a16; --muted:#6a665d; --faint:#928d82; --brand:#17694a; --brand-ink:#ffffff; --brand-soft:rgba(23,105,74,.1); --brand-line:rgba(23,105,74,.3); --flame:#c8501f; --flame-ink:#ffffff; --flame-soft:rgba(200,80,31,.11); --amber:#8a6112; --amber-soft:rgba(196,140,40,.15); --amber-line:rgba(154,107,18,.3); --rose:#b23229; --rose-soft:rgba(178,50,41,.1); --shadow-xs:0 1px 2px rgba(27,26,22,.05); --shadow-sm:0 2px 4px rgba(27,26,22,.04), 0 8px 18px -10px rgba(27,26,22,.16); --shadow-md:0 3px 6px rgba(27,26,22,.05), 0 16px 34px -14px rgba(27,26,22,.2); --shadow-lg:0 6px 12px rgba(27,26,22,.06), 0 28px 56px -20px rgba(27,26,22,.26); --r-lg:22px; --r-md:14px; --r-sm:10px; --ease:cubic-bezier(.22,1,.36,1); /* emphasis curve — exponential ease-out, no overshoot: fast departure, long settle. Reads decisive rather than bouncy. */ --emph:cubic-bezier(.16,1,.3,1); --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; } /* dark from the OS, only when the user hasn't chosen explicitly */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --bg:#171a1c; --bg-wash-1:rgba(75,189,139,.09); --bg-wash-2:rgba(240,128,80,.06); --surface:#212528; --surface-2:#282d30; --surface-3:#333A3E; --line:rgba(236,235,231,.11); --line-2:rgba(236,235,231,.2); --text:#eceae5; --muted:#a8aca7; --faint:#7f847f; --brand:#4bbd8b; --brand-ink:#06271b; --brand-soft:rgba(75,189,139,.15); --brand-line:rgba(75,189,139,.38); --flame:#f0855a; --flame-ink:#2a1006; --flame-soft:rgba(240,133,90,.15); --amber:#e0b264; --amber-soft:rgba(224,178,100,.14); --amber-line:rgba(224,178,100,.32); --rose:#ef8478; --rose-soft:rgba(239,132,120,.13); --shadow-xs:0 1px 2px rgba(0,0,0,.3); --shadow-sm:0 2px 4px rgba(0,0,0,.28), 0 8px 18px -10px rgba(0,0,0,.5); --shadow-md:0 3px 6px rgba(0,0,0,.3), 0 16px 34px -14px rgba(0,0,0,.55); --shadow-lg:0 6px 12px rgba(0,0,0,.34), 0 28px 56px -20px rgba(0,0,0,.6); } } /* explicit choice always wins over the media query, in both directions */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#171a1c; --bg-wash-1:rgba(75,189,139,.09); --bg-wash-2:rgba(240,128,80,.06); --surface:#212528; --surface-2:#282d30; --surface-3:#333A3E; --line:rgba(236,235,231,.11); --line-2:rgba(236,235,231,.2); --text:#eceae5; --muted:#a8aca7; --faint:#7f847f; --brand:#4bbd8b; --brand-ink:#06271b; --brand-soft:rgba(75,189,139,.15); --brand-line:rgba(75,189,139,.38); --flame:#f0855a; --flame-ink:#2a1006; --flame-soft:rgba(240,133,90,.15); --amber:#e0b264; --amber-soft:rgba(224,178,100,.14); --amber-line:rgba(224,178,100,.32); --rose:#ef8478; --rose-soft:rgba(239,132,120,.13); --shadow-xs:0 1px 2px rgba(0,0,0,.3); --shadow-sm:0 2px 4px rgba(0,0,0,.28), 0 8px 18px -10px rgba(0,0,0,.5); --shadow-md:0 3px 6px rgba(0,0,0,.3), 0 16px 34px -14px rgba(0,0,0,.55); --shadow-lg:0 6px 12px rgba(0,0,0,.34), 0 28px 56px -20px rgba(0,0,0,.6); } *{box-sizing:border-box;margin:0;padding:0} [hidden]{display:none!important} html{scroll-behavior:smooth} body{ font-family:var(--sans); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background: radial-gradient(1200px 680px at 12% -14%, var(--bg-wash-1), transparent 60%), radial-gradient(900px 560px at 100% 2%, var(--bg-wash-2), transparent 58%), var(--bg); background-attachment:fixed; padding:0 24px 110px; transition:background-color .5s var(--ease),color .5s var(--ease); } .wrap{max-width:1080px;margin:0 auto;position:relative;z-index:2} ::selection{background:var(--brand);color:var(--brand-ink)} :focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:5px} .skip{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--brand);color:var(--brand-ink);font-weight:600;font-size:.88rem; padding:12px 20px;border-radius:0 0 var(--r-md) 0;text-decoration:none; } .skip:focus{left:0} /* ==================================================================== */ /* Motion system */ /* ==================================================================== */ @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}} @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes shimmer{to{background-position:-200% 0}} /* the plane taxis down the route line when a result card is hovered */ @keyframes taxi{ 0%{transform:translate(-50%,-50%)} 45%{transform:translate(120%,-50%)} 46%{transform:translate(-260%,-50%)} 100%{transform:translate(-50%,-50%)} } /* page-load entrance: each landmark drifts up in sequence */ .js .enter{opacity:0;animation:rise .7s var(--ease) forwards} .js .enter-1{animation-delay:.05s} .js .enter-2{animation-delay:.14s} .js .enter-3{animation-delay:.23s} .js .enter-4{animation-delay:.32s} /* scroll-triggered reveal, driven by IntersectionObserver in app.js */ .js .reveal{opacity:0;transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .reveal.in{opacity:1;transform:none} /* view switch */ .viewswap{animation:rise .5s var(--ease)} /* ==================================================================== */ /* Header */ /* ==================================================================== */ header.site{display:flex;align-items:center;justify-content:space-between;padding:26px 2px 30px;gap:16px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:13px} .brand .mark{ width:42px;height:42px;border-radius:13px;flex:none; background:var(--brand);color:var(--brand-ink); display:grid;place-items:center; box-shadow:0 8px 20px -8px var(--brand-line); transition:transform .6s var(--emph),box-shadow .5s var(--ease); } .brand:hover .mark{transform:translateY(-2px) rotate(-8deg);box-shadow:0 12px 26px -8px var(--brand-line)} .brand .mark svg{width:22px;height:22px} .brand .word{font-size:1.3rem;font-weight:500;letter-spacing:-.03em;color:var(--muted)} .brand .word b{color:var(--text);font-weight:700} /* theme toggle — a two-state segmented control, not a sun/moon flip */ .theme-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px} .theme-toggle button{ background:none;border:0;cursor:pointer;color:var(--faint); font:inherit;font-size:.78rem;font-weight:500; padding:7px 14px;border-radius:999px; display:inline-flex;align-items:center;gap:6px; transition:color .4s var(--ease),background .4s var(--ease); } .theme-toggle button svg{width:14px;height:14px} .theme-toggle button:hover{color:var(--text)} .theme-toggle button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs)} /* ==================================================================== */ /* View tabs */ /* ==================================================================== */ .viewtabs-wrap{display:flex;justify-content:flex-start} .viewtabs{ display:inline-flex;gap:3px;background:var(--surface-2); border:1px solid var(--line);border-radius:999px;padding:4px;margin:0 0 28px; } .vtab{ background:none;border:0;cursor:pointer;color:var(--muted); font:inherit;font-weight:500;font-size:.92rem;padding:10px 20px;border-radius:999px; transition:color .4s var(--ease),background .4s var(--ease),transform .4s var(--emph); } .vtab:hover{color:var(--text)} .vtab:active{transform:scale(.97)} .vtab.active{color:var(--brand-ink);background:var(--brand);box-shadow:0 6px 16px -8px var(--brand-line)} /* ==================================================================== */ /* Hero */ /* ==================================================================== */ .hero{margin:6px 0 30px;max-width:54ch} .hero h1{ font-size:clamp(2.1rem,5vw,3.3rem); font-weight:700;letter-spacing:-.035em;line-height:1.06;text-wrap:balance; } .hero h1 span{color:var(--brand)} .hero p{color:var(--muted);margin-top:14px;font-size:1.03rem;max-width:60ch;text-wrap:pretty} /* ==================================================================== */ /* Search panel */ /* ==================================================================== */ .shell{ background:var(--surface-2); border:1px solid var(--line); border-radius:calc(var(--r-lg) + 7px); padding:7px; box-shadow:var(--shadow-md); } form.search{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); padding:20px; display:grid;gap:18px; } .controls-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} /* segmented control — 4px padding is load-bearing for the glider JS */ .segment{display:inline-flex;position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px} .segment button{ position:relative;z-index:1;background:none;border:0;cursor:pointer; color:var(--muted);font:inherit;font-weight:500;font-size:.9rem; padding:9px 18px;border-radius:999px;transition:color .4s var(--ease); /* equal widths keep the glider's width constant, so the slide is a pure transform — no width animation, no per-frame layout work */ min-width:114px; } .segment button.active{color:var(--brand-ink)} .segment .glider{ position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px; background:var(--brand); box-shadow:0 4px 12px -6px var(--brand-line); transition:transform .55s var(--emph); } .currency-pick{display:flex;align-items:center;gap:9px} .currency-pick label{font-size:.82rem;color:var(--faint)} .currency-pick .selwrap{position:relative} .currency-pick select{ appearance:none;-webkit-appearance:none; background:var(--surface-2);border:1px solid var(--line); color:var(--text);font:inherit;font-family:var(--mono);font-weight:500;font-size:.86rem; padding:10px 32px 10px 13px;border-radius:var(--r-sm);cursor:pointer;outline:none; transition:border-color .3s var(--ease),background .3s var(--ease); } .currency-pick select:hover{border-color:var(--line-2);background:var(--surface-3)} .currency-pick .selwrap::after{ content:"";position:absolute;right:12px;top:50%;pointer-events:none; width:7px;height:7px;border-right:1.7px solid var(--faint);border-bottom:1.7px solid var(--faint); transform:translateY(-65%) rotate(45deg); } /* fields */ .route-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end} .field{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0} .field>label{font-size:.8rem;color:var(--muted);padding-left:2px} .input-shell{ display:flex;align-items:center;gap:10px; background:var(--surface-2);border:1.5px solid var(--line); border-radius:var(--r-md);padding:0 13px; transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease); } .input-shell:hover{background:var(--surface-3)} .input-shell:focus-within{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px var(--brand-soft)} .input-shell .ic{color:var(--faint);flex:none;display:grid;place-items:center;transition:color .3s var(--ease)} .input-shell:focus-within .ic{color:var(--brand)} .input-shell .ic svg{width:18px;height:18px} .input-shell input{ flex:1;min-width:0;background:none;border:0;outline:none; color:var(--text);font:inherit;font-size:.98rem;padding:13px 0; } .input-shell input::placeholder{color:var(--faint)} input[type="date"]{font-family:var(--mono);font-size:.92rem} input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55} input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1} .swap{ flex:none;align-self:end;margin-bottom:5px; width:44px;height:44px;border-radius:var(--r-md); background:var(--surface-2);border:1.5px solid var(--line); color:var(--brand);cursor:pointer;display:grid;place-items:center; transition:transform .6s var(--emph),border-color .3s var(--ease),background .3s var(--ease); } .swap:hover{border-color:var(--brand);background:var(--brand-soft);transform:rotate(180deg)} .swap:active{transform:rotate(180deg) scale(.9)} .swap svg{width:19px;height:19px} .dates-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end} .dates-grid.single{grid-template-columns:1fr} /* ==================================================================== */ /* Date range picker — one calendar for departure + return */ /* ==================================================================== */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .daterange{position:relative} /* the trigger reuses .input-shell so it sits flush with the real inputs */ .dr-trigger{width:100%;font:inherit;color:var(--text);text-align:left;cursor:pointer} .dr-trigger[aria-expanded="true"]{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px var(--brand-soft)} .dr-trigger[aria-expanded="true"] .ic{color:var(--brand)} .dr-value{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:13px 0} .dr-slot{font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dr-slot.is-empty{color:var(--faint)} .dr-sep{flex:none;display:grid;place-items:center;color:var(--faint)} .dr-sep svg{width:16px;height:16px;display:block} .dr-nights{ flex:none;font-size:.74rem;font-weight:600;color:var(--brand); background:var(--brand-soft);border:1px solid var(--brand-line); border-radius:999px;padding:3px 9px; } .calendar{ position:absolute;top:calc(100% + 10px);left:0;z-index:50; background:var(--surface);border:1px solid var(--line-2); border-radius:var(--r-lg);box-shadow:var(--shadow-lg); padding:16px;width:max-content;max-width:min(620px,calc(100vw - 48px)); animation:pop .28s var(--emph); } /* arrows float over the month headings so each title stays centred */ .cal-nav-row{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;pointer-events:none} .cal-nav{ pointer-events:auto;width:32px;height:32px;border-radius:var(--r-sm); background:none;border:1px solid transparent;color:var(--muted);cursor:pointer; display:grid;place-items:center; transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease); } .cal-nav:hover:not(:disabled){background:var(--surface-2);color:var(--text);border-color:var(--line)} .cal-nav:disabled{opacity:.3;cursor:not-allowed} .cal-nav svg{width:17px;height:17px} .cal-months{display:flex;gap:26px} .cal-month{width:242px} .cal-title{text-align:center;font-size:.92rem;font-weight:600;letter-spacing:-.01em;height:32px;display:grid;place-items:center;margin-bottom:6px} .cal-grid{width:100%;border-collapse:collapse;table-layout:fixed} .cal-grid th{ font-family:var(--mono);font-size:.68rem;font-weight:500;color:var(--faint); padding-bottom:8px;text-align:center; } .cal-day{ font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:.84rem;text-align:center;height:34px;cursor:pointer; position:relative;outline:none; transition:background .2s var(--ease),color .2s var(--ease); } /* the range fill is a pseudo-element so it can bleed edge to edge between cells while the day number keeps its own rounded chip on top */ .cal-day::before{ content:"";position:absolute;inset:2px 0;background:transparent; transition:background .2s var(--ease); } .cal-day span{ position:relative;z-index:1;display:grid;place-items:center; width:30px;height:30px;margin:0 auto;border-radius:50%; transition:background .2s var(--ease),color .2s var(--ease),transform .3s var(--emph); } .cal-day:hover span{background:var(--surface-3)} .cal-day:focus-visible span{outline:2.5px solid var(--brand);outline-offset:2px} .cal-day.is-today span{box-shadow:inset 0 0 0 1.5px var(--line-2)} .cal-day.in-range::before{background:var(--brand-soft)} .cal-day.is-start::before{left:50%;border-radius:999px 0 0 999px} .cal-day.is-end::before{right:50%;border-radius:0 999px 999px 0} .cal-day.is-start.is-end::before{background:transparent} .cal-day.is-start span,.cal-day.is-end span{background:var(--brand);color:var(--brand-ink);font-weight:600} .cal-day.is-start:hover span,.cal-day.is-end:hover span{background:var(--brand)} .cal-day.is-off{cursor:default} .cal-day[aria-disabled="true"]{cursor:not-allowed;color:var(--faint);opacity:.4} .cal-day[aria-disabled="true"]:hover span{background:transparent} .cal-foot{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; margin-top:14px;padding-top:13px;border-top:1px solid var(--line); } .cal-hint{font-size:.8rem;color:var(--muted)} .cal-actions{display:flex;gap:8px} .cal-btn{ font:inherit;font-size:.84rem;font-weight:600;cursor:pointer; padding:8px 16px;border-radius:999px; background:none;border:1.5px solid var(--line-2);color:var(--muted); transition:all .35s var(--ease); } .cal-btn:hover{border-color:var(--line-2);background:var(--surface-2);color:var(--text)} .cal-btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)} .cal-btn.primary:hover{filter:brightness(1.06);background:var(--brand);color:var(--brand-ink)} .cal-btn:active{transform:scale(.97)} @media(max-width:700px){ .calendar{left:0;right:0;width:auto;max-width:none;padding:14px} .cal-months{gap:0} .cal-month{width:100%} .cal-month:nth-child(2){display:none} /* one month at a time on small screens */ .cal-day{height:38px} } /* strategy chips */ .strat-block{border-top:1px solid var(--line);padding-top:18px} .strat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .strat-title{font-size:.8rem;color:var(--muted)} .strat-all{background:none;border:0;cursor:pointer;color:var(--brand);font:inherit;font-weight:600;font-size:.82rem;padding:3px 6px;border-radius:6px;transition:background .3s var(--ease)} .strat-all:hover{background:var(--brand-soft)} .strat-chips{display:flex;gap:10px;flex-wrap:wrap} .chip{ display:flex;align-items:center;gap:10px;cursor:pointer; background:var(--surface-2);border:1.5px solid var(--line); border-radius:var(--r-md);padding:11px 15px;min-width:0;user-select:none; transition:border-color .3s var(--ease),background .3s var(--ease), transform .4s var(--emph),opacity .3s var(--ease); } .chip:hover{border-color:var(--line-2);transform:translateY(-2px)} .chip:active{transform:translateY(0) scale(.98)} .chip .tick{ width:20px;height:20px;border-radius:7px;flex:none; border:2px solid var(--faint);background:transparent; display:grid;place-items:center; transition:background .3s var(--ease),border-color .3s var(--ease); } .chip .tick svg{width:12px;height:12px;opacity:0;transform:scale(.4);color:var(--brand-ink); transition:opacity .3s var(--ease),transform .45s var(--emph)} .chip .txt{display:flex;flex-direction:column;gap:1px;min-width:0} .chip .lbl{font-size:.9rem;font-weight:600} .chip .desc{font-size:.75rem;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px} .chip.on{border-color:var(--brand-line);background:var(--brand-soft)} .chip.on .tick{background:var(--brand);border-color:var(--brand)} .chip.on .tick svg{opacity:1;transform:scale(1)} .chip.disabled{opacity:.4;cursor:not-allowed} .chip.disabled:hover{border-color:var(--line);transform:none} /* primary CTA */ button.go{ width:100%;background:var(--brand);border:0;border-radius:999px; color:var(--brand-ink);cursor:pointer; font:inherit;font-weight:600;font-size:1.02rem;letter-spacing:-.01em; padding:9px 9px 9px 24px;margin-top:2px; display:flex;align-items:center;justify-content:center;gap:12px; box-shadow:0 10px 24px -12px var(--brand-line); transition:transform .45s var(--emph),box-shadow .4s var(--ease),filter .3s var(--ease); } button.go svg{ width:18px;height:18px;box-sizing:content-box;padding:10px;border-radius:50%; background:rgba(255,255,255,.16); transition:transform .5s var(--emph),background .3s var(--ease); } button.go:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px var(--brand-line);filter:brightness(1.06)} button.go:hover svg{transform:translateX(4px);background:rgba(255,255,255,.26)} button.go:active{transform:translateY(0) scale(.985)} button.go:disabled{opacity:.55;cursor:wait;transform:none;box-shadow:none} /* autosuggest */ .suggest{ position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40; background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md); box-shadow:var(--shadow-lg);overflow:hidden;max-height:320px;overflow-y:auto; animation:pop .22s var(--ease); } .suggest div{padding:12px 14px;cursor:pointer;display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);transition:background .2s var(--ease)} .suggest div:last-child{border-bottom:0} .suggest div:hover,.suggest div.sel{background:var(--brand-soft)} .suggest .code{ font-family:var(--mono);font-weight:600;font-size:.79rem;color:var(--brand); background:var(--brand-soft);border:1px solid var(--brand-line); border-radius:7px;padding:4px 8px;min-width:48px;text-align:center;flex:none; } .suggest .name{flex:1;min-width:0;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .suggest .country{color:var(--faint);font-size:.78rem;flex:none} /* ==================================================================== */ /* Results */ /* ==================================================================== */ #status{margin:36px 2px 18px;min-height:24px} .status-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .status-bar .count{font-size:1.05rem;font-weight:600;font-family:var(--mono);font-variant-numeric:tabular-nums} .status-bar .count .sub{color:var(--muted);font-weight:400;font-size:.85rem;margin-left:9px;font-family:var(--sans)} .assess{font-size:.82rem;font-weight:600;padding:7px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent} .assess::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .assess.low{color:var(--brand);background:var(--brand-soft);border-color:var(--brand-line)} .assess.typical{color:var(--muted);background:var(--surface-2);border-color:var(--line-2)} .assess.high{color:var(--amber);background:var(--amber-soft);border-color:var(--amber-line)} /* strategy comparison */ .compare{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:20px 22px;margin-bottom:22px} .compare-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px} .compare-head h3{font-size:1.05rem;font-weight:700;letter-spacing:-.02em} .compare-head .ref{color:var(--muted);font-size:.84rem} .compare-head .ref b{color:var(--text);font-weight:600;font-family:var(--mono)} .compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px} .ctile{ position:relative;border:1.5px solid var(--line);border-radius:var(--r-md); padding:16px;background:var(--surface-2);overflow:hidden; display:flex;flex-direction:column;gap:5px; transition:border-color .4s var(--ease),transform .45s var(--emph),box-shadow .4s var(--ease); } .ctile:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow-sm)} .ctile .ct-label{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:8px} .ctile .ct-label svg{width:15px;height:15px;flex:none;color:var(--brand)} .ctile .ct-price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:600;letter-spacing:-.03em;line-height:1.05} .ctile .ct-sub{font-size:.79rem} .ctile .ct-sub.save{color:var(--brand);font-weight:600} .ctile .ct-sub.none{color:var(--faint)} .ctile .ct-sub.ref{color:var(--muted)} .ctile.na{opacity:.6} .ctile.na .ct-price{font-size:.96rem;color:var(--faint);font-family:var(--sans);font-weight:500} .ctile.winner{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 10px 26px -16px var(--brand-line)} .ctile.winner .ct-price{color:var(--brand)} .ctile .crown{ position:absolute;top:0;right:0;background:var(--brand);color:var(--brand-ink); font-size:.68rem;font-weight:700; padding:5px 11px;border-bottom-left-radius:var(--r-sm); display:flex;align-items:center;gap:5px; } .ctile .crown svg{width:11px;height:11px} .loading{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:.96rem} .spinner{width:17px;height:17px;border:2.5px solid var(--surface-3);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite;flex:none} .err{color:var(--rose);font-weight:500;display:flex;align-items:center;gap:10px;background:var(--rose-soft);border:1px solid var(--rose);border-radius:var(--r-md);padding:13px 15px} .err svg{width:18px;height:18px;flex:none} /* skeletons */ .skeleton{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:14px;box-shadow:var(--shadow-xs)} .sk{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:7px} .skeleton .sk-row{display:flex;justify-content:space-between;margin-bottom:18px} .skeleton .sk-line{height:14px} /* result card */ .card{ background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:4px 24px 22px;margin-bottom:16px; transition:border-color .4s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease); } .card:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow-md)} .card.best{border-color:var(--brand-line);box-shadow:0 10px 30px -18px var(--brand-line),var(--shadow-sm)} .card.best:hover{border-color:var(--brand)} /* the plane taxis down the route line on hover — thematic, once per hover */ .card:hover .path .line .plane{animation:taxi 1.6s var(--ease)} .card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:22px} .price-block{display:flex;flex-direction:column;gap:3px} .price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.95rem;font-weight:600;letter-spacing:-.04em;line-height:1} .card.best .price{color:var(--brand)} .price-sub{color:var(--muted);font-size:.81rem} .strat-pill{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;color:var(--brand);background:var(--brand-soft);border:1px solid var(--brand-line);padding:4px 10px;border-radius:7px;align-self:flex-start;margin-bottom:7px} .strat-pill svg{width:11px;height:11px} .badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .badge{font-size:.76rem;font-weight:600;padding:6px 11px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid transparent; transition:transform .4s var(--emph)} .badge:hover{transform:translateY(-1px)} .badge svg{width:12px;height:12px} .badge.best-b{color:var(--brand-ink);background:var(--brand);box-shadow:0 4px 12px -6px var(--brand-line)} .badge.save{color:var(--brand);background:var(--brand-soft);border-color:var(--brand-line)} .badge.split{color:var(--amber);background:var(--amber-soft);border-color:var(--amber-line)} .badge.rt{color:var(--muted);background:var(--surface-2);border-color:var(--line-2)} /* a leg / ticket */ .leg{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)} .leg:first-of-type{border-top:0;margin-top:8px;padding-top:16px} .leg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px} .airline{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.93rem} .airline .av{ width:30px;height:30px;border-radius:var(--r-sm);flex:none; display:grid;place-items:center;font-size:.7rem;font-weight:700; font-family:var(--mono);color:var(--brand); background:var(--brand-soft);border:1px solid var(--brand-line); } .ticket-tag{font-size:.73rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);padding:5px 10px;border-radius:7px} /* flight timeline */ .timeline{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center} .endpoint{display:flex;flex-direction:column;gap:3px;min-width:64px} .endpoint.arr{text-align:right;align-items:flex-end} .endpoint .t{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.2rem;font-weight:600;letter-spacing:-.03em} .endpoint .t sup{font-size:.58rem;color:var(--amber);font-weight:600;margin-left:2px;vertical-align:super} .endpoint .ap{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--brand)} .endpoint .city{font-size:.76rem;color:var(--faint);white-space:nowrap} .path{display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 4px} .path .dur{font-family:var(--mono);font-size:.76rem;color:var(--muted)} .path .line{position:relative;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent)} .path .line::before,.path .line::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--brand);transform:translateY(-50%)} .path .line::before{left:0} .path .line::after{right:0} .path .line .plane{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--surface);padding:0 8px;color:var(--brand);display:grid;place-items:center} .path .line .plane svg{width:16px;height:16px;display:block} .path .line .dot{position:absolute;top:50%;width:5px;height:5px;border-radius:50%;background:var(--faint);transform:translate(-50%,-50%)} .path .stops{font-size:.74rem;color:var(--muted)} .path .stops.nonstop{color:var(--brand);font-weight:600} .leg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px;flex-wrap:wrap} .leg-foot .date{font-size:.81rem;color:var(--muted)} .leg-foot .date strong{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text)} .book{ display:inline-flex;align-items:center;gap:7px; color:var(--brand);text-decoration:none;font-weight:600;font-size:.84rem; padding:9px 16px;border-radius:999px;border:1.5px solid var(--brand-line); background:transparent;transition:all .4s var(--ease),transform .4s var(--emph); } .book:hover{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);transform:translateY(-2px);box-shadow:0 8px 18px -8px var(--brand-line)} .book:active{transform:translateY(0) scale(.97)} .book svg{width:13px;height:13px} /* notes & warnings */ .note{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.85rem;margin-top:15px;padding-left:2px} .note svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--brand)} .warn{display:flex;gap:11px;align-items:flex-start;background:var(--amber-soft);border:1px solid var(--amber-line);border-radius:var(--r-md);color:var(--amber);font-size:.84rem;line-height:1.55;padding:13px 15px;margin-top:13px} .warn svg{width:17px;height:17px;flex:none;margin-top:2px} /* ==================================================================== */ /* Offers view */ /* ==================================================================== */ .offers-controls{ display:flex;gap:12px;align-items:end;flex-wrap:wrap; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-sm);padding:18px; } .offers-controls .field{flex:1;min-width:168px} .offers-controls .trip-field{flex:0 0 auto;min-width:0} .offer-seg{padding:4px} /* border always present (transparent when inactive) so toggling never shifts layout */ .offer-seg button{background:none;border:1px solid transparent;cursor:pointer;color:var(--muted);font:inherit;font-weight:500;font-size:.9rem;padding:10px 16px;border-radius:999px;min-width:114px; transition:color .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--emph)} .offer-seg button:active{transform:scale(.97)} .offer-seg button.active{color:var(--brand-ink);background:var(--brand);border-color:var(--brand)} .offers-go{width:auto;flex:0 0 auto;padding-left:24px;align-self:end} .bare-select{flex:1;min-width:0;appearance:none;-webkit-appearance:none;background:none;border:0;outline:none;cursor:pointer;color:var(--text);font:inherit;font-size:.98rem;padding:13px 4px 13px 0} .bare-select option{background:var(--surface);color:var(--text)} .input-shell .sel-caret{flex:none;pointer-events:none;width:7px;height:7px;margin-left:2px;border-right:1.7px solid var(--faint);border-bottom:1.7px solid var(--faint);transform:translateY(-2px) rotate(45deg);transition:border-color .3s var(--ease)} .input-shell:focus-within .sel-caret{border-color:var(--brand)} .ic .flagimg{width:22px;height:16px;border-radius:3px;display:block;object-fit:cover;box-shadow:0 0 0 1px var(--line-2)} .flagimg-inline{height:.8em;width:auto;border-radius:2px;vertical-align:baseline;box-shadow:0 0 0 1px rgba(0,0,0,.25);margin-left:2px} #offersStatus{margin:28px 2px 18px;min-height:22px} .offers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:16px} /* break the uniform gallery — first card is a feature tile */ @media(min-width:760px){ .offers-grid{grid-template-columns:repeat(4,1fr)} .offers-grid .ocard:first-child{grid-column:span 2;grid-row:span 2;height:auto;min-height:100%} .offers-grid .ocard:first-child .city{font-size:2.1rem} .offers-grid .ocard:first-child .amt{font-size:1.8rem} .offers-grid .ocard:first-child .content{padding:22px} } .offers-empty{grid-column:1/-1;text-align:center;padding:52px 20px;background:var(--surface);border:1.5px dashed var(--line-2);border-radius:var(--r-lg)} .offers-empty .oe-icon{font-size:2.2rem;margin-bottom:12px;color:var(--brand)} .offers-empty .oe-title{font-weight:700;font-size:1.15rem;letter-spacing:-.02em} .offers-empty .oe-sub{color:var(--muted);font-size:.93rem;margin-top:8px;max-width:440px;margin-inline:auto;line-height:1.6;text-wrap:pretty} .offers-empty .oe-sub strong{color:var(--text);font-weight:600} .ocard{ position:relative;height:236px;border-radius:var(--r-lg);overflow:hidden; cursor:pointer;border:1px solid var(--line);box-shadow:var(--shadow-sm); transition:transform .5s var(--ease),box-shadow .5s var(--ease); } .ocard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .ocard:active{transform:translateY(-2px)} .ocard .bg{position:absolute;inset:0} .ocard .photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .7s var(--ease),transform 7s var(--ease)} .ocard.has-photo .photo{opacity:1} .ocard:hover .photo{transform:scale(1.08)} .ocard .emoji{position:absolute;top:15px;left:17px;font-size:1.4rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));transition:transform .5s var(--emph)} .ocard:hover .emoji{transform:scale(1.15) rotate(-6deg)} .ocard .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,8,.06) 0%,rgba(12,10,8,.42) 52%,rgba(12,10,8,.93) 100%)} .ocard .content{position:absolute;left:0;right:0;bottom:0;padding:17px;transition:transform .5s var(--ease)} .ocard:hover .content{transform:translateY(-3px)} .ocard .city{font-size:1.45rem;font-weight:700;letter-spacing:-.03em;line-height:1.05;color:#fff;display:flex;align-items:center;gap:8px} .ocard .landmark{color:rgba(255,255,255,.78);font-size:.8rem;margin-top:3px} .ocard .priceline{display:flex;align-items:baseline;gap:8px;margin-top:12px} .ocard .priceline .from{color:rgba(255,255,255,.66);font-size:.74rem} .ocard .priceline .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;color:#fff;font-size:1.32rem;font-weight:600;letter-spacing:-.03em} .ocard .rt-tag{display:inline-block;font-size:.69rem;color:rgba(255,255,255,.88);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);padding:2px 7px;border-radius:6px;vertical-align:middle} .ocard .orgline{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.75);font-size:.78rem;margin-top:4px} .ocard .orgline svg{width:12px;height:12px;opacity:.85} .ocard .obadge{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:6px 11px;border-radius:999px} .ocard .obadge.steal{color:var(--flame-ink);background:var(--flame);box-shadow:0 6px 16px -8px rgba(200,80,31,.8)} .ocard .obadge.low{color:#fff;background:rgba(12,10,8,.55);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)} /* offer detail modal */ .modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(12,10,8,.6);backdrop-filter:blur(8px);animation:fade .3s var(--ease)} .modal-card{width:100%;max-width:540px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);animation:pop .45s var(--emph);max-height:92vh;overflow-y:auto} .modal-banner{position:relative;height:176px} .modal-banner .photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s var(--ease)} .modal-banner.has-photo .photo{opacity:1} .modal-banner .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,8,.12),rgba(12,10,8,.88))} .modal-banner .emoji{position:absolute;top:17px;left:19px;font-size:1.8rem} .modal-banner .close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);cursor:pointer;background:rgba(12,10,8,.5);color:#fff;font-size:1rem;display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .3s var(--ease),transform .4s var(--emph)} .modal-banner .close:hover{background:rgba(12,10,8,.85);transform:rotate(90deg)} .modal-banner .title{position:absolute;left:19px;bottom:16px;right:19px} .modal-banner .title .city{font-size:1.7rem;font-weight:700;color:#fff;letter-spacing:-.03em;display:flex;align-items:center;gap:9px} .modal-banner .title .sub{color:rgba(255,255,255,.8);font-size:.85rem} .modal-body{padding:20px 22px 22px} .modal-body .blurb{color:var(--muted);font-size:.92rem;line-height:1.65;text-wrap:pretty} .modal-price{display:flex;align-items:baseline;gap:11px;margin:18px 0 16px;flex-wrap:wrap} .modal-price .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:2rem;font-weight:600;letter-spacing:-.04em;color:var(--brand)} .modal-price .steal-tag{font-size:.75rem;font-weight:700;color:var(--flame-ink);background:var(--flame);padding:5px 11px;border-radius:999px} .modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:18px} .modal-grid .cell{background:var(--surface-2);padding:12px 14px} .modal-grid .cell .k{color:var(--faint);font-size:.76rem} .modal-grid .cell .v{font-size:.92rem;font-weight:600;margin-top:3px} .modal-book{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--brand);color:var(--brand-ink);text-decoration:none;font-weight:600;font-size:.98rem;padding:9px 9px 9px 22px;border-radius:999px;box-shadow:0 10px 24px -12px var(--brand-line);transition:transform .45s var(--emph),filter .3s var(--ease)} .modal-book svg{width:17px;height:17px;box-sizing:content-box;padding:9px;border-radius:50%;background:rgba(255,255,255,.16);transition:transform .5s var(--emph)} .modal-book:hover{transform:translateY(-2px);filter:brightness(1.06)} .modal-book:hover svg{transform:translateX(4px)} .modal-book:active{transform:translateY(0) scale(.985)} .modal-note{color:var(--faint);font-size:.78rem;text-align:center;margin-top:12px;text-wrap:pretty} /* footer */ footer.site{margin-top:60px;padding-top:26px;border-top:1px solid var(--line);color:var(--muted);font-size:.83rem;line-height:1.75;max-width:72ch;text-wrap:pretty} footer.site strong{color:var(--text);font-weight:600} /* responsive */ @media(max-width:640px){ body{padding:0 16px 80px} .route-grid{grid-template-columns:1fr} .swap{justify-self:center;align-self:center;margin:-4px 0;transform:rotate(90deg)} .swap:hover{transform:rotate(270deg)} .swap:active{transform:rotate(270deg) scale(.9)} header.site{gap:12px} .card{padding-inline:17px} .price{font-size:1.6rem} .endpoint .t{font-size:1.02rem} .endpoint{min-width:52px} .timeline{gap:9px} .offers-grid{grid-template-columns:1fr 1fr;gap:11px} .ocard{height:200px} .ocard .city{font-size:1.15rem} .offers-go{width:100%;justify-content:center} .compare{padding:17px} } @media(max-width:420px){.offers-grid{grid-template-columns:1fr}} /* Motion is decoration here, never information — safe to switch off wholesale. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } .js .enter,.js .reveal{opacity:1!important;transform:none!important} }