/* OddFare (formerly Standby): design tokens One grotesk (Hanken Grotesk) in sentence case, tabular figures for every price, thin borders rather than shadows. The bar is a deep blue in both themes; blue is the action colour by day, signage yellow by night; green and pink are kept for meaning (a real drop, a possible mistake fare). Day's page runs from a pale sky into pale sand; Night is navy. Two themes, picked by data-theme on (theme.js sets it before first paint). */ :root { --ground: #f7f2e8; --page: linear-gradient(180deg, #d3e8f8 0, #e6f1f8 240px, #f2f1ea 460px, #f7f2e8 620px) no-repeat, #f7f2e8; --bar: color-mix(in srgb, #0d3f66 94%, transparent); --bar-line: #0a3354; --bar-ground: #0d3f66; --bar-hover: #1a629b; --bar-ink: #ffffff; --bar-ink-2: #d3e6f5; --bar-ink-3: #a9c8e0; --bar-focus: #ffd75e; --surface: #ffffff; --surface-2: #f3f6f9; --ink: #12263a; --ink-2: #44566a; --ink-3: #5c6d80; --line: #e6dfd1; --sign: #ffc72c; --sign-deep: #f0b400; --sign-ink: #1c1600; --accent: #14507f; --accent-line: #0d3f66; --accent-ink: #ffffff; --focus: #1463b8; --board: #0d3f66; --board-2: #124a78; --board-hover: #185a90; --board-ink: #e8f1f9; --board-dim: #b5d3ea; --board-drop: #6fe8bb; --photo-a: #5aa6d6; --photo-b: #14507f; --drop: #0a7f55; --drop-wash: #dff3ea; --alert: #c72e5e; --alert-wash: #fde5ec; --alert-ink: #ffffff; --chart-line: #1463b8; --switch-track: #8cc7ec; --switch-line: #5fa9d8; --shadow: 0 1px 2px rgb(18 38 58 / 5%); --shadow-lift: 0 2px 4px rgb(18 38 58 / 6%), 0 12px 28px rgb(18 38 58 / 12%); --radius: 12px; --radius-md: 12px; --radius-sm: 10px; --radius-xs: 8px; /* spacing: a 4px scale. Every margin, padding and gap below is one of these, except the optical padding inside tags, pills and badges (e.g. 5px 7px 4px), which is tuned to the capital letters they hold, not to a grid. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --gutter: var(--s5); /* page edge to content, shared by the bar, every view and the footer */ --section: var(--s7); /* between the big blocks of a view: hero, board, filters, groups */ --pad: var(--s4); /* inside cards and panels */ --control: 40px; /* height of buttons, inputs, selects, tabs */ --display: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif; --body: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif; color-scheme: light; --primary: #1463b8; --primary-hover: #0f52a0; --primary-ink: #ffffff; --lede-accent: #1463b8; } :root[data-theme="dark"] { --ground: #0a0f1c; --page: #0a0f1c; --bar: color-mix(in srgb, #0a0f1c 88%, transparent); --bar-line: #27324b; --bar-ground: #0a0f1c; /* the footer band: darker than the page, with a hairline on top, so it reads as its own section at night */ --foot-ground: #05080f; --foot-edge: #1f2940; --bar-hover: #131b2d; --bar-ink: #e9edf5; --bar-ink-2: #aab4c8; --bar-ink-3: #7e8aa2; --bar-focus: #f0b400; --surface: #131b2d; --surface-2: #19233a; --ink: #e9edf5; --ink-2: #aab4c8; --ink-3: #7e8aa2; --line: #27324b; --accent: #ffc72c; --accent-line: #f0b400; --accent-ink: #1c1600; --focus: #f0b400; --board: #060a14; --board-2: #10182a; --board-hover: #22304d; --board-dim: #8d99b3; --board-drop: #5fe0b1; --photo-a: #24324f; --photo-b: #0e1526; --drop: #43d6a0; --drop-wash: #10332a; --alert: #ff7fa6; --alert-wash: #3a1626; --alert-ink: #2a0514; --chart-line: #e9edf5; --switch-track: #19233a; --switch-line: #34415e; --shadow: 0 1px 2px rgb(0 0 0 / 35%); --shadow-lift: 0 2px 4px rgb(0 0 0 / 45%), 0 14px 34px rgb(0 0 0 / 60%); color-scheme: dark; --primary: #ffc72c; --primary-hover: #f0b400; --primary-ink: #1c1600; --lede-accent: #ffd75e; --board-ink: #e9edf5; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, p { margin: 0; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; } img { display: block; max-width: 100%; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .num { text-align: right; } .skip { position: absolute; left: var(--s3); top: -60px; z-index: 50; padding: var(--s3) var(--s4); background: var(--sign); color: var(--sign-ink); border-radius: 8px; font-weight: 600; } .skip:focus { top: var(--s3); } /* ---------- top bar ---------- */ /* everything inside the bar reads its colours from the bar's own set, whichever theme is on */ .topbar { --ground: var(--bar-ground); --surface: var(--bar-hover); --ink: var(--bar-ink); --ink-2: var(--bar-ink-2); --ink-3: var(--bar-ink-3); --focus: var(--bar-focus); position: sticky; top: 0; z-index: 20; background: var(--bar); color: var(--ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bar-line); } .topbar__inner { max-width: 1240px; margin: 0 auto; padding: var(--s2) max(var(--gutter), env(safe-area-inset-right)) var(--s2) max(var(--gutter), env(safe-area-inset-left)); padding-top: max(var(--s2), env(safe-area-inset-top)); display: flex; align-items: center; gap: var(--s5); } .brand { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--ink); } .brand__word { font: 700 22px/1 var(--display); letter-spacing: -0.02em; } .brand__mark { width: 28px; height: 28px; flex: none; border-radius: 7px; } .tabs { display: flex; gap: var(--s1); margin-left: var(--s2); } .tab { border: 0; background: none; min-height: var(--control); padding: 0 var(--s3); border-radius: var(--radius-xs); font-weight: 600; font-size: 14.5px; color: var(--ink-2); display: inline-flex; align-items: center; white-space: nowrap; } .tab:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); } .tab[aria-current="page"] { background: color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink); } .tab__count { font: 600 12px/1 var(--body); margin-left: var(--s1); opacity: 0.75; } .fresh { margin-left: auto; font: 400 13px/1.3 var(--body); color: var(--ink-3); text-align: right; } .fresh b { font-weight: 600; color: var(--ink-2); } /* theme button, the usual way: a moon while the page is light, a sun while it is dark; 44px tap target */ /* the theme switch: sun, a track with a knob, moon. Knob left is day, right is night; the whole control is one 44px-tall target. */ .theme { flex: none; margin-left: auto; height: 44px; padding: 0 var(--s1); border: 0; border-radius: 999px; background: none; color: var(--ink-3); display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; } .theme:hover { color: var(--ink); } .theme__icon { width: 18px; height: 18px; transition: color 0.15s ease; } /* the icon for the theme in force is lit; the other waits */ .theme:not([aria-checked="true"]) .theme__icon--sun, .theme[aria-checked="true"] .theme__icon--moon { color: var(--ink); } .theme__track { position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--switch-track); border: 1px solid var(--switch-line); transition: background-color 0.2s ease; } .theme__knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 30%); transition: transform 0.2s ease; } .theme[aria-checked="true"] .theme__knob { transform: translateX(20px); } main { max-width: 1240px; margin: 0 auto; padding: var(--s7) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); } .view[hidden] { display: none; } /* ---------- lede ---------- */ .hero { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s6); } .hero .lede { padding-top: 0; } .hero .lede { margin-bottom: 0; } .lede { margin-bottom: var(--section); } /* by-region list: the hero's other half, and a way into fares that aren't deals */ /* rows inset 8px so their hover fill has a margin, text inset 8 + 8 = the panel's 16 */ .glance { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--pad) var(--s2) var(--s3); } .glance__title { font: 600 13px/1.2 var(--body); color: var(--ink-2); padding: 0 var(--s2) var(--s2); } .glance__row { width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto 12px; gap: var(--s3); align-items: baseline; border: 0; background: none; text-align: left; padding: var(--s2); border-radius: var(--radius-xs); font-size: 14.5px; line-height: 1.35; } .glance__row:hover { background: var(--surface-2); } .glance__region { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .glance__city { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .glance__price { font: 700 15.5px/1 var(--display); font-variant-numeric: tabular-nums; } .glance__go { color: var(--ink-3); transition: transform 0.15s ease; } .glance__row:hover .glance__go { transform: translateX(3px); color: var(--ink); } .glance__all { margin: var(--s2) var(--s2) 0; font-size: 13.5px; } .lede__title { font: 700 clamp(28px, 3.3vw, 40px)/1.08 var(--display); letter-spacing: -0.024em; text-wrap: balance; } .lede__title em { font-style: normal; color: var(--lede-accent); } .lede__sub { margin-top: var(--s2); color: var(--ink-2); font-size: 16.5px; line-height: 1.45; } /* ---------- biggest drops ---------- */ /* rows inset 8px from the frame, their text 16px further: the title, the column heads and the cells share that 24px edge */ .board { background: var(--board); color: var(--board-ink); border-radius: 14px; padding: var(--s5) var(--s2) var(--s2); margin-bottom: var(--section); overflow: hidden; } .board__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding: 0 var(--s4) var(--s3); } .board__title { font: 700 17px/1.2 var(--display); letter-spacing: -0.01em; color: #fff; } .board__meta { font: 400 13px/1.3 var(--body); color: var(--board-dim); } /* fixed widths for the figures, the slack split between the two text columns, a wider gutter before the remark */ .board__row { display: grid; grid-template-columns: minmax(170px, 1fr) 208px 48px 88px 104px minmax(230px, 1.7fr) 14px; align-items: center; column-gap: var(--s5); padding: 0 var(--s4); } .board__row > :nth-child(6) { padding-left: var(--s3); } .board__row--head { font: 600 12px/1 var(--body); color: var(--board-dim); padding-bottom: var(--s2); } .board__row .num { text-align: center; } .board__flight { width: 100%; border: 0; text-align: left; background: var(--board-2); color: inherit; border-radius: var(--radius-xs); margin-top: var(--s1); min-height: 48px; font: 500 14.5px/1.25 var(--body); font-variant-numeric: tabular-nums; } .board__flight:hover, .board__flight:focus-visible { background: var(--board-hover); } .board__flight:focus-visible { outline-color: var(--board-ink); } .board__go { font: 600 18px/1 var(--display); color: var(--board-dim); transition: transform 0.15s ease, color 0.15s ease; } .board__flight:hover .board__go, .board__flight:focus-visible .board__go { transform: translateX(4px); color: var(--board-ink); } .board__drop { color: var(--board-drop); } .board__flight > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board__code { font: 700 13.5px/1 var(--display); letter-spacing: 0.05em; color: #fff; margin-right: var(--s2); } .board__price { font: 700 15.5px/1 var(--display); color: #fff; } .board__remark { color: var(--board-dim); font-size: 13.5px; } /* a long remark takes a second line rather than losing its end */ .board__flight > .board__remark { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; } .board__remark--new { color: var(--sign-ink); background: var(--sign); padding: 2px 6px; border-radius: 4px; display: inline-block; font: 700 12px/1.3 var(--body); margin-right: var(--s2); } .board__empty { padding: var(--s4) var(--s4) var(--s3); font: 400 14px/1.5 var(--body); color: var(--board-dim); } /* ---------- filters ---------- */ .filters { display: grid; gap: var(--s3); margin-bottom: var(--section); } .chips { display: flex; flex-wrap: wrap; gap: var(--s2); } .chip { border: 1px solid var(--line); background: var(--surface); min-height: 36px; padding: 0 var(--s3); border-radius: 999px; font-weight: 500; font-size: 14px; color: var(--ink-2); display: inline-flex; align-items: center; } .chip:hover { border-color: var(--ink-3); color: var(--ink); } .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent-line); color: var(--accent-ink); } .chip__n { font: 500 12.5px/1 var(--body); margin-left: 6px; opacity: 0.65; font-variant-numeric: tabular-nums; } .chip--clear { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--ground) !important; } /* one row of controls in a card, the same box the filters wear on smaller screens */ .filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; color: var(--ink-2); } /* on a wide screen the deals filters are one guaranteed row: two toggles, then four fields that share the rest and never wrap */ #filters .filters__row { display: grid; grid-template-columns: auto auto repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--s4); } #filters .filters__row > .field { display: flex; align-items: center; gap: var(--s2); min-width: 0; white-space: nowrap; } #filters .filters__row > .field select, #filters .filters__row > .field .field__money { flex: 1 1 auto; min-width: 0; width: auto; } #filters .filters__row > .field .field__money input { width: 100%; min-width: 0; } .check { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--control); } .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); } .field { display: inline-flex; align-items: center; gap: var(--s2); } .field--grow { flex: 1 1 240px; min-width: 0; } .field input, .field select { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 0 var(--s3); min-height: var(--control); min-width: 0; } .field--grow input { flex: 1; min-width: 0; } /* a money field is one control: the "$" sits inside the box, in its own cell, the number beside it */ .field__money { display: inline-flex; align-items: stretch; } .field__prefix { display: inline-flex; align-items: center; padding: 0 var(--s2) 0 var(--s3); border: 1px solid var(--line); border-right: 0; border-radius: var(--radius-xs) 0 0 var(--radius-xs); background: var(--surface-2); color: var(--ink-3); font-weight: 600; font-size: 14px; } .field__money input { width: 92px; font-variant-numeric: tabular-nums; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; } .filters__toggle { display: none; } /* ---------- deal groups & cards ---------- */ .group { margin-bottom: var(--s8); } .group:last-child { margin-bottom: 0; } .group__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s3); } .group__title { font: 700 22px/1.2 var(--display); letter-spacing: -0.018em; } .group__count { font: inherit; font-weight: 500; color: var(--ink-3); } .group__note { color: var(--ink-2); font-size: 15px; margin: var(--s1) 0 var(--s4); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(292px, 100%), 1fr)); gap: var(--s5); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .card { cursor: pointer; } .card:hover, .card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--ink-3) 35%, var(--line)); } .muted { color: var(--ink-3); } .card__photo { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--photo-a), var(--photo-b)); overflow: hidden; } .card__img, .drawer__img { position: absolute; inset: 0; } .card__img img, .drawer__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .card__photo::after { content: none; } .card__fallback { position: absolute; inset: 0; display: grid; place-items: center; font: 800 52px/1 var(--display); letter-spacing: 0.04em; color: rgb(255 255 255 / 22%); } /* how far below normal, on the photo where it can be scanned; what it means is spelled out beside the price */ .card__save { position: absolute; left: var(--s3); top: var(--s3); z-index: 1; padding: 5px 8px; border-radius: 6px; background: var(--drop); color: #fff; font: 700 13px/1 var(--body); font-variant-numeric: tabular-nums; } .pill { position: absolute; right: var(--s3); top: var(--s3); z-index: 1; padding: 5px 8px; border-radius: 6px; font: 600 12.5px/1 var(--body); background: var(--surface); color: var(--ink); } .pill--great { background: var(--ink); color: var(--surface); } .pill--error-fare { background: var(--alert); color: var(--alert-ink); } .card__where { padding: var(--s4) var(--pad) 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s2); align-items: baseline; } .card__city { font: 700 18px/1.25 var(--display); letter-spacing: -0.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card__code { font: 600 12.5px/1 var(--body); letter-spacing: 0.05em; color: var(--ink-3); } .card__country { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-3); } /* the trip grows, so in a row of cards every tear line, price and button sits at the same height */ .card__trip { flex: 1 0 auto; padding: var(--s2) var(--pad) var(--s3); font: 400 14px/1.5 var(--body); color: var(--ink-2); } /* a long airline pairing takes a second line rather than losing its end */ .card__flight { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .card__trip b { font-weight: 600; color: var(--ink); } /* a rule between the trip and the evidence that it is cheap; a tall row's slack sits above it, so every card's foot lines up */ .tear { height: 0; border-top: 1px solid var(--line); margin: auto var(--pad) 0; } /* one quiet foot: the price and its evidence on the left, the one way out on the right, level with each other */ .card__proof { padding: var(--s4) var(--pad) var(--pad); display: grid; gap: var(--s2); } .card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .card__top .badge-new { margin-left: var(--s2); vertical-align: 4px; } .card__sum { min-width: 0; display: grid; gap: var(--s1); justify-items: start; } .price { font: 700 28px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .price small { font: 500 13px/1 var(--body); color: var(--ink-3); margin-left: 5px; letter-spacing: 0; } .delta { font-size: 13px; color: var(--ink-2); line-height: 1.25; } .delta strong { font: 700 14px/1.3 var(--display); color: var(--drop); } .delta__sep { color: var(--ink-3); } .proofline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s2); font-size: 13.5px; color: var(--ink-2); } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: none; } .dot--low { background: var(--drop); } .badge-new { font: 700 12px/1 var(--body); padding: 3px 6px; border-radius: 4px; background: var(--drop-wash); color: var(--drop); text-transform: capitalize; } .btn--book { flex: none; min-height: 36px; padding: 0 var(--s3); gap: var(--s1); font-size: 14px; } .btn--book span { font-size: 15px; line-height: 1; } .card__nights { position: absolute; right: var(--s3); bottom: var(--s3); z-index: 1; padding: 4px 7px; border-radius: 6px; background: rgb(9 14 26 / 64%); color: #fff; font: 600 12px/1.2 var(--body); backdrop-filter: blur(4px); } /* a trip that isn't about a week long is the thing to notice before the price */ .card__nights--odd { background: var(--sign); color: var(--sign-ink); backdrop-filter: none; font-weight: 600; } .chips--sales { align-items: center; } /* the row is display:flex, which would otherwise beat the hidden attribute and leave its label showing on its own */ .chips[hidden] { display: none; } /* the label's text lines up with the chips' text, which sits 12px inside their borders */ .chips__label { font: 600 13px/1.2 var(--body); color: var(--ink-2); margin-right: var(--s1); padding-left: var(--s3); } .chip--sale .chip__n { opacity: 0.85; } @media (max-width: 920px) { .btn--book { min-height: 44px; padding: 0 var(--s4); } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--control); padding: 0 var(--s4); border-radius: var(--radius-xs); border: 1px solid transparent; font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease; } .btn--sign { background: var(--primary); color: var(--primary-ink); } .btn--sign:hover { background: var(--primary-hover); } .btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); } .btn--ghost:hover { border-color: var(--ink-3); } .btn--grow { flex: 1; } .btn[disabled] { opacity: 0.55; cursor: progress; } .empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: var(--s6); color: var(--ink-2); } .empty b { color: var(--ink); } /* ---------- fares table ---------- */ .tablewrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; } /* fixed layout: the figure columns get what they need, the place a set width, the flight whatever is left (and an ellipsis), so no single long value in the data can reflow the whole table */ .fares { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14.5px; font-variant-numeric: tabular-nums; } /* the place name and the airline pairing get the room; the figures need less than they had */ /* Destination takes what the fixed columns leave: dates, nights, flight, price, the chevron */ .fares th:nth-child(2) { width: 190px; } .fares th:nth-child(3) { width: 84px; } .fares th:nth-child(4) { width: 340px; } .fares th:nth-child(5) { width: 120px; } .fares th:nth-child(6) { width: 40px; } .fares th { position: sticky; top: 0; background: var(--surface); text-align: left; font: 600 12.5px/1 var(--body); color: var(--ink-3); padding: var(--s3) var(--pad); border-bottom: 1px solid var(--line); white-space: nowrap; } .fares th.num { text-align: right; } .fares th button { all: unset; cursor: pointer; } .fares th button:hover, .fares th button[aria-sort] { color: var(--ink); } .fares th button[aria-sort="ascending"]::after { content: " ↑"; } .fares th button[aria-sort="descending"]::after { content: " ↓"; } .fares td { padding: var(--s3) var(--pad); border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fares td.go { padding-left: 0; } .fares .live { margin-left: 0; } .fares td:nth-child(5), .fares td:nth-child(6) { white-space: nowrap; } .fares td.nights { text-align: center; color: var(--ink-2); } .fares th:nth-child(3) { text-align: center; } .fares__unit { display: none; } .fares td .verdict { margin-left: var(--s2); vertical-align: 1px; } .fares tr:last-child td { border-bottom: 0; } .fares tbody tr { cursor: pointer; } .fares tbody tr:hover, .fares tbody tr:focus-visible { background: var(--surface-2); } .fares td.go { color: var(--ink-3); font: 600 18px/1 var(--display); text-align: right; } .fares tbody tr:hover td.go { color: var(--ink); } .verdict { font: 600 12.5px/1 var(--body); padding: 4px 8px; border-radius: 6px; background: var(--drop-wash); color: var(--drop); white-space: nowrap; } .verdict--error-fare { background: var(--alert-wash); color: var(--alert); } .fares .code { display: inline-block; min-width: 40px; font: 600 12.5px/1 var(--body); letter-spacing: 0.05em; margin-right: var(--s2); color: var(--ink-3); } .fares .mono { font: 400 14px/1.4 var(--body); color: var(--ink-2); white-space: nowrap; } .fares .money { font: 700 15.5px/1 var(--display); white-space: nowrap; } .fares .good { color: var(--drop); font-weight: 600; } /* a price the live search page gave, as opposed to one a cache remembers */ .live { display: inline-block; margin: 0 var(--s2); padding: 2px 6px; border-radius: 4px; background: var(--drop-wash); color: var(--drop); font: 700 12px/1.3 var(--body); text-transform: capitalize; vertical-align: 1px; } .more { margin-top: var(--s3); font-size: 14px; color: var(--ink-3); } .linkbtn { border: 0; background: none; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; } /* ---------- watchlist ---------- */ .watchform { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); margin-bottom: var(--section); font-size: 14px; color: var(--ink-2); } .watchform .field { flex-direction: column; align-items: flex-start; gap: var(--s1); } .watchform input { width: 112px; text-transform: uppercase; } /* takes no room until it has something to say */ .formnote { flex-basis: 100%; font-size: 14px; } .formnote:empty { display: none; } .wcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); display: grid; gap: var(--s2); } .wcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); } .wcard__route { font: 700 19px/1.2 var(--display); letter-spacing: 0.01em; } .wcard__city { color: var(--ink-2); font-size: 14px; } .wcard__facts { font: 400 13.5px/1.6 var(--body); font-variant-numeric: tabular-nums; color: var(--ink-2); } /* ---------- deal-site posts that didn't make the board ---------- */ .alert { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); background: var(--alert-wash); border-radius: var(--radius-md); padding: var(--s3) var(--pad); margin-bottom: var(--s4); font-weight: 600; } .alert a { color: inherit; } .alert .muted { font-weight: 400; font-size: 14px; } .unlisted { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); } .unlisted__title { font: 700 18px/1.3 var(--display); letter-spacing: -0.012em; } .unlisted__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); } .unlisted__list li { display: grid; gap: var(--s1); } .unlisted__list a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; } .unlisted__why { font: 400 13px/1.4 var(--body); color: var(--ink-3); } .card__credit { padding: var(--s3) var(--pad) 0; font-size: 13px; color: var(--ink-2); } .card__credit a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; } .card__credit + .card__trip { padding-top: var(--s1); } .pill--spotted { background: var(--sign); color: var(--sign-ink); } .posts { display: grid; gap: var(--s3); } .post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); display: grid; gap: var(--s2); } .post--alert { outline: 2px solid var(--alert); } .post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font: 500 12.5px/1.2 var(--body); color: var(--ink-3); } .post__flag { font: 600 12px/1 var(--body); letter-spacing: 0.06em; padding: 4px 7px 3px; border-radius: 4px; background: var(--alert); color: var(--alert-ink); } .post__title { font-weight: 600; font-size: 17.5px; line-height: 1.3; text-wrap: pretty; } .post__title a { color: inherit; text-decoration: none; } .post__title a:hover { text-decoration: underline; text-underline-offset: 3px; } .post__sum { color: var(--ink-2); font-size: 14.5px; } .post__fares { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: 13.5px; color: var(--ink-2); } .farechip { border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 5px 11px 4px; font-size: 13.5px; } .farechip:hover { border-color: var(--ink-3); } .farechip b { font: 700 12.5px/1 var(--display); letter-spacing: 0.04em; margin-right: 5px; } /* ---------- drawer ---------- */ .scrim { position: fixed; inset: 0; z-index: 30; background: rgb(8 12 22 / 55%); } .drawer { position: fixed; z-index: 31; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--surface); box-shadow: -12px 0 40px rgb(0 0 0 / 25%); overflow-y: auto; animation: slide 0.22s ease both; } .drawer[hidden], .scrim[hidden], .toast[hidden] { display: none; } @keyframes slide { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } } .drawer__photo { position: relative; aspect-ratio: 16 / 7; background: linear-gradient(135deg, var(--photo-a), var(--photo-b)); } .drawer__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(9 14 26 / 70%), transparent 60%); } .drawer__close { position: absolute; z-index: 2; right: var(--s3); top: max(var(--s3), env(safe-area-inset-top)); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(9 14 26 / 60%); color: #fff; font-size: 22px; line-height: 1; } .drawer__route { position: absolute; z-index: 1; left: var(--drawer-pad); bottom: var(--s4); right: var(--drawer-pad); color: #fff; } .drawer__codes { font: 700 26px/1.1 var(--display); letter-spacing: 0.01em; } .drawer__codes span { color: var(--sign); margin: 0 0.12em; } .drawer { --drawer-pad: var(--s6); } .drawer__body { padding: var(--s5) var(--drawer-pad) max(var(--s7), env(safe-area-inset-bottom)); display: grid; gap: var(--s5); } /* boxes that fill in later (a price check's result, the route's other cheap days) take no room while empty */ .drawer__body > div:empty { display: none; } .drawer__title { font: 700 24px/1.2 var(--display); letter-spacing: -0.02em; } .fact__delta { font: 700 14px/1 var(--display); color: var(--ink-2); } .fact__delta.good { color: var(--drop); } .card__range { display: block; color: var(--ink-3); font-size: 13px; margin-top: 2px; } .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--s3) var(--s4); } .fact__k { font: 500 12.5px/1.3 var(--body); color: var(--ink-3); } .fact__v { font-weight: 600; font-size: 15.5px; margin-top: 2px; } /* the place on the left, the price on the right, like a tag */ .drawer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); } .drawer__top .drawer__title { flex: 1 1 auto; min-width: 0; } /* the facts read as a spec sheet: a hairline under each row of the grid */ .drawer__body .facts { gap: 0 var(--s4); } .drawer__body .facts > div { padding: var(--s3) 0; border-bottom: 1px solid var(--line); } .drawer__price { flex: none; text-align: right; display: grid; gap: 2px; } .drawer__price b { font: 700 30px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .drawer__price small { font: 500 12.5px/1.3 var(--body); color: var(--ink-3); } /* a fact whose value runs long takes the whole row, so the grid closes evenly */ .fact--wide { grid-column: 1 / -1; } .panel { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--pad); } .panel__title { font-weight: 600; font-size: 15.5px; } .panel__sub { font-size: 13.5px; color: var(--ink-2); margin: var(--s1) 0 var(--s3); } .compare { display: grid; gap: var(--s2); margin-top: var(--s2); } .compare__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s3); align-items: baseline; font-size: 14.5px; } .compare__row span:nth-child(2) { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink-2); } .compare__row strong { font: 700 15px/1 var(--display); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; } .compare__row strong.good { color: var(--drop); } .compare__note { font-size: 13px; color: var(--ink-3); } .days { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); } .days h4 { margin: 0 0 var(--s2); font: 600 12.5px/1.2 var(--body); color: var(--ink-3); } .days ul { list-style: none; margin: 0; padding: 0; font: 400 14px/1.85 var(--body); font-variant-numeric: tabular-nums; } .days li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); } .drawer__actions { display: flex; flex-wrap: wrap; gap: var(--s2); } /* the transparent border puts its text on the same edge as the bordered panels' */ .result { font-size: 14.5px; padding: var(--s3) var(--pad); border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface-2); } .result--good { background: var(--drop-wash); } .result--bad { background: var(--alert-wash); } .credit { font-size: 12.5px; color: var(--ink-3); } .credit a { color: inherit; } /* ---------- how to book ---------- */ .steps { margin: var(--s3) 0 var(--s5); padding-left: var(--s5); display: grid; gap: var(--s2); font-size: 14.5px; color: var(--ink-2); } .steps li::marker { font: 700 14px/1 var(--display); color: var(--ink); } .steps a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; } .dateopts__title { margin: 0 0 var(--s1); font: 600 13px/1.2 var(--body); color: var(--ink-2); } /* rows bleed 8px either side, so their text lines up with the panel's while the hover fill has a margin */ .dateopts { list-style: none; margin: 0 calc(-1 * var(--s2)); padding: 0; } .dateopts + .compare__note { margin-top: var(--s2); } .dateopts li + li { border-top: 1px solid var(--line); } .dateopts .live { margin-right: 0; } .dateopts__title--gap { margin-top: var(--s5); } .dateopts__save { font: 600 12px/1 var(--body); color: var(--drop); background: var(--drop-wash); padding: 3px 6px 2px; border-radius: 4px; } .dateopts__save:empty { padding: 0; background: none; } .dateopts a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto 12px; gap: var(--s3); align-items: baseline; min-height: var(--control); padding: var(--s2); border-radius: var(--radius-xs); color: var(--ink); text-decoration: none; font-size: 14.5px; } .dateopts a:hover { background: var(--surface-2); } .dateopts__nights { font: 400 13px/1 var(--body); color: var(--ink-3); } .dateopts__price { font: 700 15.5px/1 var(--display); font-variant-numeric: tabular-nums; } .dateopts__go { color: var(--ink-3); } .dateopts a:hover .dateopts__go { color: var(--ink); } /* ---------- chart ---------- */ .chart { position: relative; } .chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; } .chart__tip { position: absolute; pointer-events: none; transform: translate(-50%, -100%); background: var(--ink); color: var(--ground); padding: 6px 9px; border-radius: 8px; font-size: 12.5px; white-space: nowrap; line-height: 1.25; } .chart__tip b { display: block; font: 700 15px/1.1 var(--display); font-variant-numeric: tabular-nums; } .chart__tip[hidden] { display: none; } .chart__table { margin-top: var(--s3); max-height: 210px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-xs); } .chart__table table { width: 100%; border-collapse: collapse; font: 400 13.5px/1.5 var(--body); font-variant-numeric: tabular-nums; } .chart__table th, .chart__table td { padding: var(--s1) var(--s3); text-align: left; border-bottom: 1px solid var(--line); } .chart__table td:last-child, .chart__table th:last-child { text-align: right; } /* ---------- footer, toast ---------- */ .foot { max-width: 1240px; margin: 0 auto; padding: var(--s6) max(var(--gutter), env(safe-area-inset-right)) max(var(--s8), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); display: grid; gap: var(--s2); font: 400 13px/1.6 var(--body); color: var(--ink-3); border-top: 1px solid var(--line); } .foot b { font-weight: 600; color: var(--ink-2); } .foot .warn { color: var(--alert); } .toast { position: fixed; z-index: 40; left: 50%; bottom: max(var(--s5), calc(env(safe-area-inset-bottom) + var(--s3))); transform: translateX(-50%); background: var(--ink); color: var(--ground); padding: var(--s3) var(--pad); border-radius: var(--radius-md); font-size: 14.5px; box-shadow: var(--shadow); max-width: min(560px, calc(100% - 32px)); } /* ---------- narrower desktops ---------- */ @media (max-width: 1200px) { /* the flight column gives its room to the place names; the flight is in the details */ .fares th:nth-child(4), .fares td:nth-child(4) { display: none; } .fares th:nth-child(1) { width: auto; } } /* the board and the filter row stop fitting at full size */ @media (max-width: 1100px) { .board__row { grid-template-columns: minmax(140px, 1fr) 184px 44px 72px 96px minmax(170px, 1.5fr) 12px; column-gap: var(--s4); } .board__row > :nth-child(6) { padding-left: 0; } /* the two switches share a line; the four controls become four equal columns with their labels above */ /* from a tablet down, the filters are a card: the two toggles on one row, the four fields on the next, all 44px tall */ #filters .filters__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: var(--s4); padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); } #filters .filters__row > .check { grid-column: span 2; height: 44px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; } #filters .filters__row > .check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } #filters .filters__row > .check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); } #filters .filters__row > .field { display: grid; align-items: stretch; gap: var(--s1); font: 500 13px/1.3 var(--body); color: var(--ink-2); } #filters .field select, #filters .field input, #filters .field__prefix { width: 100%; height: 44px; min-height: 0; font-size: 16px; } #filters .field__prefix { width: auto; } #filters .field__money { display: flex; } #filters .field__money input { flex: 1 1 auto; min-width: 0; } } /* ---------- tablets and phones ---------- */ @media (max-width: 920px) { :root { --gutter: var(--s4); --section: var(--s6); --control: 44px; } /* bar: still one line at this width (a tablet, or a phone on its side); phones rearrange it further down */ .topbar__inner { gap: var(--s2) var(--s3); } .fresh { font-size: 12px; } .tabs { margin-left: 0; } .tab { padding: 0 var(--s3); font-size: 14.5px; } .brand { min-height: var(--control); } .hero { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } .glance__row { min-height: var(--control); align-items: center; } .glance__all { min-height: var(--control); display: inline-flex; align-items: center; margin-top: 0; } /* board: each flight is a two-line ticket stub, place and dates left, price and drop right, the remark beneath */ .board { padding-top: var(--s4); } .board__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; column-gap: var(--s3); } .board__row--head { display: none; } .board__flight { padding-top: var(--s3); padding-bottom: var(--s3); } .board__flight > .board__go, .board__flight > span:nth-child(3) { display: none; } .board__flight > span:nth-child(2), .board__flight > span:nth-child(6) { font-size: 12.5px; color: var(--board-dim); } .board__flight > span:nth-child(4), .board__flight > span:nth-child(5) { text-align: right; } .board__flight > span:nth-child(1), .board__flight > span:nth-child(2), .board__flight > span:nth-child(6) { grid-column: 1; } /* the price and its drop sit as a pair, centred against the three lines on the left rather than pinned to the top */ .board__flight > span:nth-child(4), .board__flight > span:nth-child(5) { grid-column: 2; grid-row: 1 / 4; align-self: center; } .board__flight > span:nth-child(4) { transform: translateY(-10px); } .board__flight > span:nth-child(5) { transform: translateY(10px); } .chip { min-height: var(--control); } /* 16px stops iOS zooming the page when a field takes focus */ .field input, .field select, .watchform input { font-size: 16px; } .more .linkbtn, .chart .linkbtn { min-height: var(--control); display: inline-flex; align-items: center; } /* All fares: six columns don't fit here without breaking place names, so a row becomes two lines (place and price, dates and verdict, the flight alongside while there is room) and the head stays on as the sort bar */ .tablewrap { overflow: visible; } .fares, .fares thead, .fares tbody { display: block; } .fares thead tr { display: flex; align-items: center; gap: var(--s5); padding: 0 var(--pad); background: var(--surface-2); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; } .fares th:nth-child(n) { position: static; display: block; width: auto; padding: 0; border: 0; background: none; text-align: left; } .fares th:nth-child(2), .fares th:nth-child(3), .fares th:nth-child(4), .fares th:nth-child(6) { display: none; } .fares th button { display: inline-flex; align-items: center; min-height: var(--control); white-space: pre; } .fares { table-layout: auto; } .fares tbody tr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 112px 12px; grid-template-areas: "place flight price go" "dates flight nights go"; align-items: center; gap: 2px var(--s4); min-height: var(--control); padding: var(--s3) var(--pad); border-bottom: 1px solid var(--line); } .fares tbody tr:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); } .fares td, .fares td.go { display: block; padding: 0; border: 0; min-width: 0; } .fares td:nth-child(1) { grid-area: place; white-space: normal; overflow: visible; text-overflow: clip; } .fares td:nth-child(2) { grid-area: dates; } .fares td:nth-child(3) { grid-area: nights; justify-self: end; font-size: 13px; color: var(--ink-3); } .fares td:nth-child(4) { display: block; grid-area: flight; white-space: normal; } .fares td:nth-child(5) { grid-area: price; text-align: right; } .fares td:nth-child(6) { grid-area: go; } .fares__unit { display: inline; } .foot { font-size: 12px; } } /* ---------- phones ---------- */ @media (max-width: 640px) { .board__head { flex-direction: column; align-items: flex-start; gap: var(--s1); } #filters .filters__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } #filters .filters__row > .check, #filters .filters__row > .check + .check { grid-column: auto; } /* the fare page's filters: the same card and the same 44px controls as the deals page's panel; labels above their controls */ #fare-filters .filters__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--s4); padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); } #fare-filters .field { display: grid; gap: var(--s1); font: 500 13px/1.3 var(--body); color: var(--ink-2); } #fare-filters .field--grow { grid-column: 1 / -1; } #fare-filters .field select, #fare-filters .field input { width: 100%; height: 44px; min-height: 0; font-size: 16px; } #fare-filters .check { height: 44px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; align-self: end; } #fare-filters .check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } #fare-filters .check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); } .fares tbody tr { grid-template-columns: minmax(0, 1fr) auto 12px; grid-template-areas: "place price go" "dates nights go"; column-gap: var(--s3); } .fares td:nth-child(4) { display: none; } /* a long place name takes a second line rather than losing its end; dates are never cut */ .fares td:nth-child(1), .fares td:nth-child(2) { white-space: normal; overflow: visible; text-overflow: clip; } .fares .mono { white-space: normal; } .watchform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--pad); } .watchform .field { align-items: stretch; } .watchform .field:first-of-type, .watchform .btn, .formnote, .watchform .check--consent { grid-column: 1 / -1; } .watchform input:not([type="checkbox"]) { width: 100%; } /* drawer: the whole screen, the booking button a full-width bar, the two quieter actions sharing the next line */ .drawer { --drawer-pad: var(--s4); width: 100%; } .drawer__codes { font-size: 38px; } .drawer__title { font-size: 26px; } .drawer__actions .btn--sign { flex: 1 0 100%; } .drawer__actions .btn--ghost { flex: 1 1 0; } .dateopts a { grid-template-columns: minmax(0, 1fr) auto auto 12px; grid-template-areas: "when save price go" "nights save price go"; row-gap: 0; align-items: center; min-height: 52px; } .dateopts__when { grid-area: when; } .dateopts__nights { grid-area: nights; line-height: 1.4; } .dateopts__save { grid-area: save; } .dateopts__price { grid-area: price; } .dateopts__go { grid-area: go; } } @media (max-width: 480px) { .brand__word { font-size: 26px; } /* "Fares swept" over "12 min ago": two short lines the height of the switch beside them */ .fresh { font-size: 12px; line-height: 1.25; } .fresh__label { display: block; } /* by-region list: the city moves under the region, so neither is cut short */ .glance__row { grid-template-columns: minmax(0, 1fr) auto 12px; grid-template-areas: "region price go" "city price go"; row-gap: 0; padding-block: var(--s1); } .glance__region { grid-area: region; } .glance__city { grid-area: city; font-size: 13px; } .glance__price { grid-area: price; } .glance__go { grid-area: go; } .days { grid-template-columns: 1fr; } .lede__sub { font-size: 16px; } } /* tablets and phones on their side: the by-region list as two rows of four tickets, not eight full-width rows of mostly air */ @media (max-width: 920px) { .glance { background: none; border: 0; box-shadow: none; padding: 0; } .glance__title { padding: 0 0 var(--s2); } .glance__rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); } .glance__row { width: auto; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); grid-template-columns: minmax(0, 1fr); grid-template-areas: none; row-gap: 1px; padding: var(--s3) var(--s4); align-items: start; } .glance__row > * { grid-area: auto; } .glance__region { font-size: 13px; } .glance__price { font-size: 17px; margin-top: var(--s1); justify-self: start; } .glance__go { display: none; } .glance__all { margin: var(--s2) 0 0; } } /* ---------- phones, part two: get to the deals sooner ---------- Measured at 360px: the first deal card sat 1,400px down, behind an eight-row list, six three-line board rows, four lines of chips and an open filter form. Everything below shortens that road without removing anything. */ @media (max-width: 640px) { /* the tabs move to the thumb; the bar above scrolls away with the page instead of holding a seventh of the screen */ .topbar { position: static; backdrop-filter: none; background: var(--bar-ground); } .topbar__inner { flex-wrap: nowrap; } .fresh { margin-left: auto; } .tabs { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; margin: 0; gap: var(--s1); justify-content: space-around; padding: 6px max(var(--s3), env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(var(--s3), env(safe-area-inset-right)); background: var(--bar-ground); border-top: 1px solid var(--bar-line); } .tab { flex: 1 1 0; justify-content: center; min-height: 44px; display: inline-flex; align-items: center; } body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } .toast { bottom: calc(70px + env(safe-area-inset-bottom)); } /* by-region list: one swipeable line of small tickets instead of eight full-width rows */ .glance { background: none; border: 0; box-shadow: none; padding: 0; margin-inline: calc(-1 * var(--gutter)); } .glance__title { padding: 0 var(--gutter) var(--s2); } .glance__rows { display: flex; gap: var(--s2); overflow-x: auto; padding: 2px var(--gutter) var(--s3); scroll-snap-type: x proximity; scrollbar-width: none; } .glance__rows::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; } .glance__row { flex: none; width: auto; min-width: 132px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); grid-template-columns: auto; grid-template-areas: "region" "city" "price"; row-gap: 1px; padding: var(--s3) var(--s4); text-align: left; } .glance__region { font-size: 13px; } .glance__price { font-size: 17px; margin-top: var(--s1); justify-self: start; } .glance__go { display: none; } .glance__all { margin: 0 var(--gutter); } /* board: the four biggest drops; the rest are the first cards below anyway */ #board-rows > :nth-child(n + 5) { display: none; } .board__flight { padding-top: 10px; padding-bottom: 10px; } /* chips: one line that swipes, bleeding to the screen edge so it is obvious there is more */ /* the strip bleeds to the screen's edges and pads itself back; without scroll-padding the snap aligned the first chip to the scrollport's edge, under that padding, and it sat flush against the phone's side */ .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scroll-snap-type: x proximity; } .chip { flex: none; scroll-snap-align: start; } /* the label is the row's first snap point, or the chips would snap it off the left edge */ .chips__label { flex: none; scroll-snap-align: start; } /* filters fold away behind one button */ .filters__toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-weight: 600; font-size: 15px; color: var(--ink); } .filters__toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-2px); transition: transform 0.15s ease; } .filters__toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); } #filters .filters__row { display: none; } /* opened, the filters are a card under the toggle: two even columns, every control the same height, labels alike */ /* the open panel hangs off the toggle as one box: the toggle squares its bottom corners, the panel meets it with no gap */ #filters.is-open .filters__toggle { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #filters.is-open .filters__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--s4); margin-top: calc(-1 * var(--s3)); padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); } /* every control the same 44px box: the two toggles, the selects, the money field and its "$" cell */ #filters .filters__row > .check { height: 44px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; } #filters .filters__row > .check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } #filters .filters__row > .check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); } #filters .filters__row > .field { font: 500 13px/1.3 var(--body); color: var(--ink-2); gap: var(--s1); } #filters .field select, #filters .field input, #filters .field__prefix { height: 44px; min-height: 0; font-size: 16px; } /* group heads: the title says it; the explanation is for a wider screen */ .group__note { display: none; } .group__head { margin-bottom: var(--s3); } /* one column: nothing to line up with, so the flight line may wrap instead of losing its end */ .card__flight { white-space: normal; } } /* a phone on its side, or any short window: nothing sticky may take a third of the height, and the drawer's photo steps back */ @media (max-height: 520px) { .topbar { position: static; } .drawer__photo { aspect-ratio: auto; height: 116px; } .hero { gap: var(--s4); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- deal alerts signup ---------- */ .alerts { margin-top: var(--s9); padding-top: var(--s7); border-top: 1px solid var(--line); } .alerts .group__note { margin-bottom: var(--s4); } .alerts .group__note a { color: var(--primary); text-underline-offset: 3px; } .alerts .watchform input[name="topic"] { width: 220px; text-transform: none; } .check--consent { flex-basis: 100%; display: flex; align-items: flex-start; gap: var(--s2); font-size: 14px; color: var(--ink-2); line-height: 1.45; min-height: 0; } /* centred on the first line of the sentence at any text size: half of (line height - box height) */ .check--consent input { font-size: inherit; margin-top: calc((1.45em - 18px) / 2); flex: none; } /* the consent line and the button read as one block, not as a field beside the others */ .alerts .watchform { row-gap: var(--s4); } /* ---------- newsletter: a band above the footer, and the same form in a popup ---------- */ /* a rule closes the deals, the band sits just under it, and the footer keeps its own distance below */ .newsletter { max-width: 1240px; margin: 0 auto; padding: var(--s7) max(var(--gutter), env(safe-area-inset-right)) var(--s7) max(var(--gutter), env(safe-area-inset-left)); } .newsletter::before { content: ""; display: block; border-top: 1px solid var(--line); margin-bottom: var(--s7); } .newsletter__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s6) var(--s8); align-items: center; padding: var(--s6); background: var(--board); color: #fff; border-radius: var(--radius); } .newsletter__title { font: 700 22px/1.2 var(--display); letter-spacing: -0.018em; } .newsletter__sub { margin-top: var(--s2); color: var(--board-dim); font-size: 15px; line-height: 1.5; } .newsletter__form { display: grid; gap: var(--s3); } .newsletter__row { display: flex; gap: var(--s2); } .newsletter__input { flex: 1 1 auto; min-width: 0; min-height: var(--control); padding: 0 var(--s3); border: 1px solid transparent; border-radius: var(--radius-xs); background: #fff; color: #12263a; font: inherit; font-size: 16px; } .newsletter__inner .check--consent { color: var(--board-dim); } .newsletter__inner .check--consent input { accent-color: var(--sign); } .newsletter__inner .formnote { color: #fff; font-size: 14px; } .newsletter__inner .formnote:empty { display: none; } .newsletter__inner .btn--sign { background: var(--sign); color: var(--sign-ink); } .newsletter__inner .btn--sign:hover { background: var(--sign-deep); } .popup { position: fixed; inset: 0; z-index: 35; display: grid; place-items: end center; padding: var(--s4); background: rgb(8 12 22 / 45%); } .popup[hidden] { display: none; } .popup__card { position: relative; width: min(460px, 100%); background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: var(--s6); box-shadow: 0 20px 60px rgb(0 0 0 / 30%); animation: rise 0.25s ease both; margin-bottom: env(safe-area-inset-bottom); } @keyframes rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } } .popup__close { position: absolute; right: var(--s3); top: var(--s3); width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 22px; line-height: 1; } .popup__title { font: 700 22px/1.2 var(--display); letter-spacing: -0.018em; padding-right: var(--s8); } .popup__sub { margin: var(--s2) 0 var(--s4); color: var(--ink-2); font-size: 15px; line-height: 1.5; } .popup__later { margin-top: var(--s3); color: var(--ink-3); font-size: 14px; font-weight: 500; min-height: 44px; } .popup .check--consent { color: var(--ink-2); font-size: 13px; } /* the email field is styled for the dark footer band (white, no border); on the white card it needs an edge */ .popup .newsletter__input { border-color: var(--line); background: var(--surface); color: var(--ink); } .popup .newsletter__input:focus-visible { border-color: var(--primary); } .popup .formnote:empty { display: none; } body.has-popup { overflow: hidden; } @media (min-width: 641px) { .popup { place-items: center; } } @media (max-width: 640px) { .newsletter__inner { grid-template-columns: minmax(0, 1fr); padding: var(--s5); } .newsletter__row { flex-direction: column; } /* the popup sits above the tab bar */ .popup { padding-bottom: calc(70px + env(safe-area-inset-bottom)); } } /* ---------- privacy and terms ---------- */ .legal__nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-bottom: var(--s6); font-size: 14.5px; } .legal__nav a { color: var(--ink-2); font-weight: 600; text-decoration: none; } .legal__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .legal article + article { margin-top: var(--s9); padding-top: var(--s7); border-top: 1px solid var(--line); } .legal h1 { font: 700 30px/1.15 var(--display); letter-spacing: -0.022em; } .legal h2 { font: 700 17px/1.3 var(--display); letter-spacing: -0.01em; margin: var(--s6) 0 var(--s2); } .legal p, .legal li { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; } .legal p + p { margin-top: var(--s3); } .legal ul { margin: var(--s2) 0 0; padding-left: var(--s5); display: grid; gap: var(--s2); } .legal strong { color: var(--ink); font-weight: 600; } .legal a { color: var(--primary); text-underline-offset: 3px; } .legal code { font: 500 14px/1 var(--body); background: var(--surface-2); padding: 2px 5px; border-radius: 4px; } .legal__meta { font-size: 13.5px; color: var(--ink-3); margin: var(--s2) 0 var(--s5); } /* the parts only the owner can fill in */ .fill { font-style: normal; background: var(--sign); color: var(--sign-ink); padding: 0 4px; border-radius: 3px; } .tabs a.tab { text-decoration: none; } .foot a { color: var(--ink-2); } /* ---------- requests: the form, and the owner's queue ---------- */ /* pages without the newsletter band keep their own distance from the footer */ .requests, .legal { padding-bottom: var(--s9); } /* the explanation beside the form on a wide screen, above it on a phone */ .requests__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); } .howto { padding-top: 0; } .howto__title { font: 700 17px/1.2 var(--display); letter-spacing: -0.01em; margin-bottom: var(--s4); } /* a real sequence, so it is numbered: the signage yellow marks each step */ .howto__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); counter-reset: step; } .howto__steps li { position: relative; padding-left: 44px; color: var(--ink-2); line-height: 1.5; font-size: 15px; } .howto__steps li b { color: var(--ink); font-weight: 600; } .howto__steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--sign); color: var(--sign-ink); font: 700 14px/30px var(--display); text-align: center; } .reqform { display: grid; gap: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s6); box-shadow: var(--shadow); } .reqform[hidden] { display: none; } .reqform__head { display: grid; gap: var(--s1); } .reqform__title { font: 700 20px/1.2 var(--display); letter-spacing: -0.015em; } .reqform__sub { color: var(--ink-3); font-size: 14px; } /* the kind of request as a segmented control: the radio does the work, the label wears the look */ .seg { border: 0; margin: 0; padding: 3px; display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: 999px; justify-self: start; max-width: 100%; } .seg__item { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s4); border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink-2); cursor: pointer; white-space: nowrap; } .seg__item input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .seg__item:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .seg__item:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; } .reqform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } .field--stack { display: flex; flex-direction: column; align-items: stretch; gap: var(--s1); font-size: 14px; font-weight: 500; color: var(--ink-2); } .field--stack input, .field--stack textarea { width: 100%; font-size: 16px; font-weight: 400; color: var(--ink); } .field--stack textarea { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: var(--s2) var(--s3); font: inherit; font-size: 16px; resize: vertical; } .field--stack .field__money input { width: 140px; } .field--stack[hidden] { display: none; } .reqform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding-top: var(--s2); border-top: 1px solid var(--line); } .reqform .formnote { flex: 1 1 200px; margin: 0; } .reqdone { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s6); display: grid; gap: var(--s3); justify-items: start; box-shadow: var(--shadow); } .reqdone[hidden] { display: none; } .reqdone p { color: var(--ink-2); } /* the owner's queue: set apart from the public page, with its counts up front */ .owner { margin-top: var(--s9); padding-top: var(--s7); border-top: 1px solid var(--line); } .owner__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4); } .owner__eyebrow { font: 600 12px/1.2 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s1); } .owner__counts { display: flex; gap: var(--s2); margin: 0; } .owner__counts div { min-width: 84px; padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); } .owner__counts dt { font: 500 12px/1.2 var(--body); color: var(--ink-3); } .owner__counts dd { margin: 2px 0 0; font: 700 20px/1 var(--display); font-variant-numeric: tabular-nums; } .queue { margin-top: var(--s9); padding-top: var(--s7); border-top: 1px solid var(--line); } .queue__filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; } .queue__list { display: grid; gap: var(--s3); } .queue__item { background: var(--surface); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); padding: var(--s4) var(--s5); display: grid; gap: var(--s2); } .queue__item--open { border-left-color: var(--primary); } .queue__item--watching { border-left-color: var(--sign); } .queue__item--done, .queue__item--closed { border-left-color: var(--line); opacity: 0.8; } .queue__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); } .queue__kind { background: var(--surface-2); color: var(--ink-2); } .queue__kind--flight { background: var(--drop-wash); color: var(--drop); } .queue__target { font-weight: 600; color: var(--ink); } .queue__when { margin-left: auto; font-size: 13px; } .queue__dates { font-size: 14px; color: var(--ink-2); } .queue__details { white-space: pre-wrap; line-height: 1.5; } .queue__reply { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s1); } .queue__status { min-height: var(--control); padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); } .queue__saved { font-size: 13px; color: var(--drop); } .queue__note { width: 100%; border: 1px dashed var(--line); border-radius: var(--radius-xs); padding: var(--s2) var(--s3); background: var(--surface-2); font: inherit; font-size: 14px; resize: vertical; } @media (max-width: 920px) { .requests__layout { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } .howto__steps { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } } @media (max-width: 640px) { .reqform, .reqdone { padding: var(--s4); } .reqform__grid { grid-template-columns: minmax(0, 1fr); } .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; } .seg__item { justify-content: center; padding: 0 var(--s2); } .owner__counts { width: 100%; } .owner__counts div { flex: 1; min-width: 0; } } /* ---------- promo codes page ---------- */ .codes { padding-bottom: var(--s9); } .codes .chips { margin-bottom: var(--s6); } /* the phone rule that hides group notes on the deals page does not apply here: this note is the warning to read the terms */ .codes .group__note { margin-bottom: var(--s5); display: block; } .codes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } .codecard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); display: grid; gap: var(--s2); align-content: start; box-shadow: var(--shadow); } .codecard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 24px; } .codecard__seller { font: 600 15px/1.2 var(--display); color: var(--ink-2); } .codecard__tag { flex: none; font: 700 12px/1 var(--body); padding: 5px 7px 4px; border-radius: 6px; background: var(--drop-wash); color: var(--drop); white-space: nowrap; } .codecard__tag--soon { background: var(--alert-wash); color: var(--alert); } .codecard__off { font: 700 26px/1.1 var(--display); letter-spacing: -0.02em; } .codecard__applies { color: var(--ink-2); font-size: 14.5px; line-height: 1.4; } /* the code itself: a dashed ticket, one tap to copy; nothing about it calls anywhere */ .codecard__code { display: flex; align-items: stretch; gap: var(--s2); margin-top: var(--s1); } .codecard__token { flex: 1 1 auto; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s3); border: 1px dashed var(--ink-3); border-radius: var(--radius-xs); background: var(--surface-2); font: 700 17px/1 var(--display); letter-spacing: 0.08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; } .codecard__copy { min-height: 44px; min-width: 84px; } .codecard__meta { color: var(--ink-3); font-size: 13px; line-height: 1.45; } .codecard__meta a { color: var(--ink-2); text-underline-offset: 3px; } .codecard--gone { opacity: 0.72; } @media (max-width: 1100px) { .codes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .codes__grid { grid-template-columns: minmax(0, 1fr); } } /* four tabs in the thumb bar: a little less air each on the narrowest phones */ @media (max-width: 400px) { .tabs { gap: 2px; } .tab { padding: 0 6px; font-size: 14px; } } /* ---------- moving between pages ---------- */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* Before the fares arrive, the page already has its shape: six placeholder rows the height of real ones (48px on a desk, 78px stacked on a tablet, 75px on a phone, where only four show), an empty chip strip one chip tall, and a card area a screen tall so the footer starts below the fold. Measured 2026-09-26; without this the footer and filters jumped (CLS 0.5). */ .board__row--ghost { background: color-mix(in srgb, var(--board-2) 70%, transparent); animation: ghost 1.1s ease-in-out infinite alternate; } @keyframes ghost { from { opacity: 0.55; } to { opacity: 1; } } #region-chips:empty { min-height: 36px; } #deal-groups:empty { min-height: 100vh; } @media (max-width: 920px) { .board__row--ghost { min-height: 78px; } #region-chips:empty { min-height: 44px; } } @media (max-width: 640px) { .board__row--ghost { min-height: 75px; } } /* ---------- loading skeletons ---------- Until the data arrives, the page shows the shape of what is coming: grey bars that shimmer where the titles, lines, prices and buttons will be. They are static HTML, replaced in one go when the real content renders. */ .skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 0%, color-mix(in srgb, var(--surface-2) 45%, var(--surface)) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .skel--h2 { width: 260px; max-width: 60%; height: 22px; } .skel--line { width: 70%; height: 12px; } .skel--short { width: 45%; } .skel--title { width: 55%; height: 18px; } .skel--sub { width: 30%; height: 12px; } .skel--price { width: 40%; height: 26px; } .skel--btn { width: 84px; height: 36px; flex: none; border-radius: var(--radius-xs); } .skel--token { flex: 1 1 auto; height: 44px; border-radius: var(--radius-xs); } .group--ghost .group__note { display: block; margin-bottom: var(--s4); } .card--ghost, .codecard--ghost { pointer-events: none; } .card--ghost .card__photo { opacity: 0.35; } .ghost__body { padding: var(--pad); display: grid; gap: var(--s2); } .ghost__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 var(--pad); padding: var(--s4) 0 var(--pad); border-top: 1px solid var(--line); } .ghost__foot > div { display: grid; gap: var(--s2); flex: 1 1 auto; } .fares__ghost td { padding: var(--s3) var(--pad); border-bottom: 1px solid var(--line); } .fares__ghost .skel + .skel { margin-top: var(--s2); } @media (max-width: 920px) { .skel--btn { height: 44px; } .fares__ghost td { display: block; } } /* a pooled coupon: a line about the offer and a Redeem button where the code box would be; the code appears once pressed */ .codecard__about { color: var(--ink-2); font-size: 14px; line-height: 1.45; } .codecard__redeem { display: grid; gap: var(--s2); margin-top: var(--s1); } .codecard__redeem .btn { min-height: 44px; } .codecard__hint { font-size: 13px; color: var(--ink-3); } .codecard__err { font-size: 13px; color: var(--alert); } /* ---------- more airports: a quiet card at the foot of the deals ---------- */ .airports { margin-top: var(--s8); display: flex; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6); padding: var(--s5) var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .airports__title { font: 700 18px/1.2 var(--display); letter-spacing: -0.012em; } .airports__sub { margin-top: var(--s1); color: var(--ink-2); font-size: 15px; line-height: 1.5; } .airports__btn { flex: none; } @media (max-width: 640px) { .airports { flex-direction: column; align-items: stretch; padding: var(--s4); } .airports__btn { justify-content: center; } } /* ---------- short pages: the footer sits at the foot of the window, not mid-screen ---------- The page is a column that fills the window; main takes the spare height, so the newsletter band and the footer sit at the bottom on a page with one card and follow the content on a long one. The centred blocks keep their full width: auto side margins on a flex item would otherwise shrink it to its content. */ body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } main, .newsletter, .foot, .sitefoot { width: 100%; } main { flex: 1 0 auto; } .check--consent a { color: var(--primary); text-underline-offset: 3px; white-space: nowrap; } /* ---------------------------------------------------------------- site footer (every page, web/partials/footer.html) The usual shape for a deals site: a dark band the colour of the top bar, brand and email signup on the left, link columns on the right, and the fine print on a thin bar underneath. */ .sitefoot { --ink: var(--bar-ink); --ink-2: var(--bar-ink-2); --ink-3: var(--bar-ink-3); --focus: var(--bar-focus); margin-top: var(--s8); background: var(--foot-ground, var(--bar-ground)); color: var(--ink-2); border-top: 1px solid var(--foot-edge, transparent); } .sitefoot__inner { max-width: 1240px; margin: 0 auto; padding: var(--s8) max(var(--gutter), env(safe-area-inset-right)) var(--s7) max(var(--gutter), env(safe-area-inset-left)); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s7) var(--s8); } .sitefoot .brand { color: var(--ink); } .sitefoot__tag { margin-top: var(--s3); font-size: 15px; line-height: 1.5; } .sitefoot__signup { margin-top: var(--s6); max-width: 520px; } .sitefoot__head { font: 700 17px/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); } .sitefoot__sub { margin: var(--s1) 0 var(--s4); font-size: 14px; line-height: 1.5; } .sitefoot .check--consent { color: var(--ink-3); font-size: 13px; } .sitefoot .check--consent input { accent-color: var(--sign); } .sitefoot .formnote { color: var(--ink); font-size: 14px; } .sitefoot .formnote:empty { display: none; } .sitefoot .btn--sign { background: var(--sign); color: var(--sign-ink); } .sitefoot .btn--sign:hover { background: var(--sign-deep); } .sitefoot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); align-content: start; padding-top: var(--s2); } .sitefoot__label { font: 600 12px/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s4); } .sitefoot__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); } .sitefoot__cols a { color: var(--ink); text-decoration: none; font-size: 15px; } .sitefoot__cols a:hover { text-decoration: underline; text-underline-offset: 3px; } .sitefoot a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; } .sitefoot__base { max-width: 1240px; margin: 0 auto; padding: var(--s5) max(var(--gutter), env(safe-area-inset-right)) max(var(--s5), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); border-top: 1px solid var(--bar-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5); font-size: 13px; color: var(--ink-3); } @media (max-width: 920px) { .sitefoot__inner { grid-template-columns: minmax(0, 1fr); padding-top: var(--s7); } } @media (max-width: 520px) { .sitefoot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { /* the footer runs down behind the phone tab bar instead of leaving a strip of page colour under it */ body:has(.sitefoot) { padding-bottom: 0; } .sitefoot__base { padding-bottom: calc(58px + var(--s5) + env(safe-area-inset-bottom)); } } /* the fine-print rule runs the full width of the band, like the top bar's edge */ .sitefoot__base { max-width: none; padding-left: max(var(--gutter), calc((100% - 1240px) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - 1240px) / 2 + var(--gutter))); } .check--consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .check--consent a:hover { color: var(--ink); } /* ---------------------------------------------------------------- Request an Airport */ .airportreq__picks { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: calc(var(--s2) * -1); } .queue__kind--airport { background: var(--sign); color: var(--sign-ink); } /* "By signing up, you agree to…": fine print under a signup form */ .legalnote { font-size: 12px; line-height: 1.5; color: var(--ink-3); } .legalnote a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .legalnote a:hover { color: var(--ink); } /* the hidden field only a bot fills in (the forms send it; a person never sees it) */ .hp { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; } /* a paragraph after a list gets the same gap as between paragraphs */ .legal ul + p { margin-top: var(--s3); } /* the card's place name is its keyboard control (the whole card still opens on a click) */ .card__open { all: unset; cursor: pointer; } .card__open:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; } .card:has(.card__open:focus-visible) { box-shadow: 0 0 0 2px var(--focus); } /* the drop badge: white on the night green fails contrast, so it takes dark ink there */ :root[data-theme="dark"] .card__save { color: #04261a; }