/* On Route Scout — stylesheet.
The look: white stationery, deep ink, airmail blue and stamp red, and the
photographs doing the colour. Photos are never written over — every hero
and card shows its picture clean, with the words beside or beneath it.
Bricolage Grotesque carries the headings and the big figures; body text is
the reader's own system face. The typewriter face (Special Elite) is kept
for the two real "documents" on the site, the boarding pass and the
passport stamps, and nowhere else.
Contents: tokens · base · header · buttons and fields · heroes · cards ·
home · city guide · country · comparisons · rankings · passport · footer ·
motion. */
/* ---------- Tokens ---------- */
:root {
color-scheme: light;
--page: #ffffff;
--surface: #ffffff;
--wash: #f2f5fc; /* tinted band behind tools and callouts */
--ink: #0f1b3d;
--ink-2: #3c4868;
--muted: #626c88; /* 5.3:1 on white, 4.9:1 on --wash */
--hairline: #e3e8f2;
--border: rgba(15, 27, 61, 0.14);
--accent: #2247e6; /* airmail blue; 6.7:1 on white */
--accent-text: #1d3ed0;
--accent-soft: #e4eaff;
--accent-2: #0b8f83;
--red: #e5372b; /* stamp red — fills and large type only (4.3:1) */
--red-text: #c2281d; /* the same red as small text, 6:1 on white */
--good: #157a37;
--sun: #ffc53d;
--card: var(--surface);
--shadow: 0 18px 40px -18px rgba(15, 27, 61, 0.28);
--airmail: repeating-linear-gradient(-45deg,
var(--red) 0 12px, transparent 12px 20px, var(--accent) 20px 32px, transparent 32px 40px);
--display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: "Special Elite", "Courier New", monospace;
--r-photo: 20px;
--r-box: 14px;
--r-field: 10px;
--stamp-a: #2a4d8f;
--stamp-b: #b3382b;
--stamp-c: #2c6e49;
--stamp-d: #64508d;
}
@media (prefers-color-scheme: dark) {
:root:where(:not([data-theme="light"])) {
color-scheme: dark;
--page: #0b1020;
--surface: #131a2e;
--wash: #121930;
--ink: #f2f5ff;
--ink-2: #c5cde2;
--muted: #949eb9;
--hairline: #232c47;
--border: rgba(200, 212, 255, 0.16);
--accent: #8ea5ff;
--accent-text: #9db1ff;
--accent-soft: #1d2a5c;
--accent-2: #45c9bc;
--red: #ff6f5e;
--red-text: #ff8576;
--good: #3ecf6a;
--shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
--stamp-a: #85a8e8;
--stamp-b: #f0907f;
--stamp-c: #86c8a2;
--stamp-d: #b3a0dd;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--page: #0b1020;
--surface: #131a2e;
--wash: #121930;
--ink: #f2f5ff;
--ink-2: #c5cde2;
--muted: #949eb9;
--hairline: #232c47;
--border: rgba(200, 212, 255, 0.16);
--accent: #8ea5ff;
--accent-text: #9db1ff;
--accent-soft: #1d2a5c;
--accent-2: #45c9bc;
--red: #ff6f5e;
--red-text: #ff8576;
--good: #3ecf6a;
--shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
--stamp-a: #85a8e8;
--stamp-b: #f0907f;
--stamp-c: #86c8a2;
--stamp-d: #b3a0dd;
}
/* ---------- Fonts ----------
Self-hosted subsets (font-src 'self'), cut by scripts/build-fonts.js to
the characters each face draws. Bricolage Grotesque 700 (OFL) keeps its
optical-size axis, so an 18px h3 and an 80px headline come from one file.
optional, not swap: a headline that swapped faces mid-load re-wrapped, so
the hero changed height and the content below shifted (CLS 0.027 on
several country pages under the old serif). With optional the browser uses
the face only if it's there almost at once — always from cache after the
first visit — and otherwise keeps the system face for that page view.
Preloading it instead slowed mobile LCP by 0.1–0.3 s. */
@font-face {
font-family: "Bricolage Grotesque";
src: url("fonts/bricolage-700-latin.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: "Special Elite";
src: url("fonts/special-elite-latin.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--page);
color: var(--ink);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 16.5px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: var(--display);
font-weight: 700;
font-optical-sizing: auto;
text-wrap: balance;
margin: 0;
}
h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(25px, 2.7vw, 34px); line-height: 1.1; letter-spacing: -0.022em; }
h3 { font-size: 18.5px; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 12px; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* A link inside running text needs more than colour to stand out from the
words around it (WCAG 1.4.1). */
p a:not([class]), li a:not([class]), dd a:not([class]) {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: from-font;
}
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); }
.wrap { max-width: 1168px; margin: 0 auto; padding: 0 24px; }
/* Keeps the footer off the middle of the screen on a short page. */
.site-header + .wrap { min-height: 58vh; }
.sub { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 70ch; }
.muted { color: var(--ink-2); }
/* Visually hidden, read by screen readers. */
.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;
}
.btn-label-short { display: none; }
.error-box { margin: 80px auto; text-align: center; }
.error-box h1 { margin-bottom: 16px; }
/* ---------- Header ----------
One row on a wide screen: brand, the four destinations, then the tools.
On a phone it's two: brand and tools, then the links — the search field
folds to a round button that opens over the row when focused, which is
what lets everything else stay on one line. */
.site-header { border-bottom: 1px solid var(--hairline); }
.header-in {
display: flex;
align-items: center;
gap: 8px 22px;
min-height: 68px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--display);
font-weight: 700;
font-size: 19px;
letter-spacing: -0.02em;
color: var(--ink);
white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--accent-text); }
.brand-mark { width: 26px; height: 26px; flex: none; }
.site-nav { display: flex; gap: 4px; margin-right: auto; }
.site-nav a {
padding: 8px 11px;
border-radius: 999px;
color: var(--ink-2);
font-size: 14.5px;
font-weight: 600;
white-space: nowrap;
}
.site-nav a:hover { background: var(--wash); color: var(--ink); text-decoration: none; }
.header-tools { display: flex; align-items: center; gap: 8px; }
.currency-select,
.theme-btn,
.auth-btn {
height: 38px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--ink-2);
font: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
}
.currency-select { padding: 0 10px; }
.theme-btn { width: 38px; padding: 0; font-size: 16px; line-height: 1; }
.theme-btn .btn-label-full { display: none; }
.theme-btn .btn-label-short { display: inline; }
.auth-btn { padding: 0 16px; color: var(--ink); white-space: nowrap; }
.currency-select:hover,
.theme-btn:hover,
.auth-btn:hover { border-color: var(--ink); color: var(--ink); }
/* The sign-in button arrives after the page has painted (auth.js waits for
the hero). The slot holds its width from the start, so the controls beside
it don't step sideways when it does. */
.auth-slot { display: flex; align-items: center; justify-content: flex-end; min-width: 164px; }
.auth-user { display: flex; align-items: center; gap: 8px; }
.auth-user .avatar { width: 28px; height: 28px; border-radius: 50%; }
.auth-user .auth-name {
font-size: 13.5px;
color: var(--ink-2);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* City search. The results panel is absolutely positioned off the wrap so it
overlays the page rather than reflowing it. */
.search-wrap { position: relative; width: 220px; }
.site-search {
width: 100%;
height: 38px;
padding: 0 14px 0 38px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--wash) url("search.svg") 13px 50% / 16px no-repeat;
color: var(--ink);
font: inherit;
font-size: 14px;
}
.site-search::placeholder { color: var(--muted); }
.site-search:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
background-color: var(--surface);
}
.search-results {
position: absolute;
z-index: 60;
top: calc(100% + 8px);
right: 0;
width: max(100%, 300px);
margin: 0;
padding: 6px;
list-style: none;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow);
max-height: 60vh;
overflow-y: auto;
}
.search-opt a {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "flag name" "flag meta";
column-gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 10px;
color: var(--ink);
text-decoration: none;
}
.search-flag { grid-area: flag; font-size: 20px; }
.search-name { grid-area: name; font-weight: 600; font-size: 14.5px; }
.search-meta { grid-area: meta; font-size: 12.5px; color: var(--muted); }
.search-opt.is-active a,
.search-opt a:hover { background: var(--wash); text-decoration: none; }
.search-empty { padding: 10px 12px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 1040px) {
.search-wrap { width: 170px; }
.site-nav a { padding: 8px 8px; }
.auth-btn .btn-label-full { display: none; }
.auth-btn .btn-label-short { display: inline; }
.auth-slot { min-width: 82px; }
}
@media (max-width: 860px) {
/* .header-tools dissolves (display: contents) so its four controls can
sit in the grid themselves: search, theme and sign-in beside the brand,
the currency at the end of the links row, where there is room for it. */
.header-in {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto auto;
grid-template-areas: "brand search theme auth" "nav nav nav cur";
gap: 0 6px;
padding-top: 10px;
position: relative;
}
.brand { grid-area: brand; font-size: 17.5px; overflow: hidden; text-overflow: ellipsis; }
.header-tools { display: contents; }
.search-wrap { grid-area: search; }
.theme-btn { grid-area: theme; }
.auth-slot { grid-area: auth; min-width: 74px; }
.currency-select { grid-area: cur; align-self: center; margin-top: 6px; height: 34px; }
.site-nav {
grid-area: nav;
margin: 6px 0 0 -8px;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { padding: 10px 7px; font-size: 14px; }
.site-nav .btn-label-full { display: none; }
.site-nav .btn-label-short { display: inline; }
/* Signed in, the slot is avatar + name + "Sign out" — the avatar already
says who, so the name goes. */
.auth-user .auth-name { display: none; }
.auth-btn { padding: 0 12px; }
/* The folded search: a 38px round button showing only the magnifier. On
focus it opens across the whole row, over the brand. */
.search-wrap { position: static; width: 38px; }
.site-search { padding: 0; color: transparent; background-position: 50% 50%; cursor: pointer; }
.site-search::placeholder { color: transparent; }
.search-wrap:focus-within .site-search {
position: absolute;
z-index: 61;
left: 24px;
right: 24px;
top: 10px;
width: auto;
padding: 0 14px 0 38px;
color: var(--ink);
background-position: 13px 50%;
cursor: text;
}
.search-wrap:focus-within .site-search::placeholder { color: var(--muted); }
.search-results { left: 24px; right: 24px; top: 56px; width: auto; }
}
@media (max-width: 640px) {
.hero-photo { aspect-ratio: 3 / 2; }
.home-hero .hero-photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 420px) {
.wrap { padding: 0 16px; }
.search-wrap:focus-within .site-search,
.search-results { left: 16px; right: 16px; }
.currency-select { padding: 0 6px; }
}
/* ---------- Buttons and fields ---------- */
.btn,
.save-btn,
.vs-picker-go,
.download-btn,
.view-more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
padding: 0 22px;
border: 1.5px solid var(--accent);
border-radius: 999px;
background: var(--accent);
color: #fff;
font: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
:root[data-theme="dark"] :is(.btn, .save-btn, .vs-picker-go, .download-btn, .view-more-btn) { color: #0b1020; }
@media (prefers-color-scheme: dark) {
:root:where(:not([data-theme="light"])) :is(.btn, .save-btn, .vs-picker-go, .download-btn, .view-more-btn) { color: #0b1020; }
}
.btn:hover,
.save-btn:hover,
.vs-picker-go:hover,
.download-btn:hover,
.view-more-btn:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.08); }
.btn:active,
.save-btn:active,
.vs-picker-go:active { transform: translateY(0) scale(0.98); }
/* Quiet buttons: outlined, same height family. */
.btn-quiet,
.stamp-btn,
.bf-more,
.share-btn,
.itin-tab,
.calc-tier-btn,
.pc-btn,
.scam-btn,
.to-top,
.nf-city,
.hh-shuffle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 40px;
padding: 0 16px;
border: 1.5px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.btn-quiet:hover,
.stamp-btn:hover,
.bf-more:hover,
.share-btn:hover,
.itin-tab:hover,
.calc-tier-btn:hover,
.pc-btn:hover,
.scam-btn:hover,
.to-top:hover,
.nf-city:hover,
.hh-shuffle:hover { border-color: var(--ink); text-decoration: none; }
.share-btn[hidden] { display: none; }
select,
input[type="text"],
input[type="number"],
input[type="email"],
textarea {
font: inherit;
color: var(--ink);
}
.field,
.pk-field select,
.country-select,
.vs-picker-row select,
.city-combo-input,
.calc-field input[type="number"],
.calc-field select,
.request-input,
.passport-link-row input,
.pc-paid input {
min-height: 46px;
padding: 0 14px;
border: 1.5px solid var(--border);
border-radius: var(--r-field);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: 15px;
}
.field:focus,
.pk-field select:focus-visible,
.country-select:focus-visible,
.vs-picker-row select:focus-visible,
.city-combo-input:focus,
.calc-field input:focus,
.calc-field select:focus,
.request-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
select { cursor: pointer; }
textarea.request-input { padding: 12px 14px; min-height: 120px; width: 100%; }
.request-input { width: 100%; }
#request-form .auth-btn { margin-top: 12px; }
#request-form .sub { margin: 8px 0 0; }
/* The budget slider. The filled part of the track is painted from --fill,
which app.js keeps in step with the value. */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 44px;
margin: 0;
background: transparent;
cursor: pointer;
--fill: 50%;
}
input[type="range"]::-webkit-slider-runnable-track {
height: 8px;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent) var(--fill), var(--hairline) var(--fill));
}
input[type="range"]::-moz-range-track {
height: 8px;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent) var(--fill), var(--hairline) var(--fill));
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
margin-top: -11px;
border: 3px solid var(--accent);
border-radius: 50%;
background: var(--surface);
box-shadow: 0 4px 12px -2px rgba(15, 27, 61, 0.35);
transition: transform 120ms ease;
}
input[type="range"]::-moz-range-thumb {
width: 24px;
height: 24px;
border: 3px solid var(--accent);
border-radius: 50%;
background: var(--surface);
box-shadow: 0 4px 12px -2px rgba(15, 27, 61, 0.35);
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--accent-soft); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px var(--accent-soft); }
/* ---------- Photos ----------
Every hero and card photo is an ![]()
inside a frame
that sets the shape. The frame's own background is the city's gradient
(set inline by app.js), so a slow or failed photo leaves a coloured box
rather than a hole. */
.cover-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Photos ease in on load instead of popping. Scoped under .img-fade-root,
which only app.js ever adds — the prerendered first paint and no-JS
readers see images plainly. */
.img-fade-root .fade-img { opacity: 0; transition: opacity 0.4s ease; }
.img-fade-root .fade-img.is-loaded { opacity: 1; }
.photo-credit {
position: absolute;
right: 10px;
bottom: 10px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(10, 16, 32, 0.55);
color: #fff;
font-size: 11.5px;
font-weight: 500;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.photo-credit:hover { color: #fff; background: rgba(10, 16, 32, 0.8); text-decoration: none; }
/* ---------- Heroes ----------
Words on the left, the photograph on the right, both at full strength. On
a phone the photo leads on guide pages and follows the question on the
home page, where the headline is the thing to act on. */
.hero { padding: 36px 0 12px; }
.hero-in {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: 48px;
align-items: center;
}
.hero-photo {
position: relative;
margin: 0;
aspect-ratio: 4 / 3;
border-radius: var(--r-photo);
overflow: hidden;
background: var(--wash);
}
.hero .crumb { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.hero .crumb a { color: var(--ink-2); font-weight: 600; position: relative; }
/* Breadcrumb links are 20px tall; the overlay grows the tap target without
moving anything. */
.hero .crumb a::before { content: ""; position: absolute; inset: -12px -4px; }
.hero h1 .flag { display: block; font-size: 0.5em; line-height: 1; margin-bottom: 14px; }
.hero-long h1 { font-size: clamp(32px, 3.9vw, 50px); line-height: 1.06; letter-spacing: -0.025em; }
.hero .tagline { margin: 18px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.hero-fact { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 22px 0 0; }
.hero-fact-val {
font-family: var(--display);
font-weight: 700;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1;
letter-spacing: -0.02em;
}
.hero-fact-lbl { font-size: 14.5px; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.hero .country-select { margin-top: 24px; }
.save-btn.is-saved { background: var(--sun); border-color: var(--sun); color: #2b2118; }
.stamp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.stamp-btn { min-height: 46px; }
.stamp-btn.is-on { background: var(--ink); border-color: var(--ink); color: var(--page); }
.save-count { display: block; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.save-count:empty { display: none; }
.save-count + .save-count { margin-top: 2px; }
/* Visit details under the hero stamps */
.visit-details { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.visit-details[hidden] { display: none; }
.visit-q { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.visit-details select {
height: 36px;
padding: 0 10px;
border: 1.5px solid var(--border);
border-radius: 999px;
background: var(--surface);
font-size: 13.5px;
font-weight: 600;
}
@media (max-width: 860px) {
.hero { padding: 16px 0 4px; }
.hero-in { grid-template-columns: 1fr; gap: 22px; }
/* 16:9 on a tablet, where 3:2 across the full width would be most of the
screen; phones get the taller crop back below. */
.hero-photo { order: -1; aspect-ratio: 16 / 9; }
.hero .crumb { margin-bottom: 12px; }
.hero .tagline { font-size: 17px; margin-top: 14px; }
}
/* ---------- Home: the question ----------
"Where does $100 a day take you?" — the figure is the slider's value, and
the photo is the answer. */
.home-hero { padding: 44px 0 28px; }
.home-hero h1 { font-size: clamp(44px, 6.3vw, 86px); line-height: 0.98; letter-spacing: -0.035em; }
.hh-amt {
display: inline-block;
color: var(--accent-text);
/* Reserved so the headline doesn't re-wrap as the number changes length
while dragging — "$25" and "$200+" must take the same room. */
min-width: 2.6ch;
font-variant-numeric: tabular-nums;
}
.hh-sub { margin: 20px 0 0; max-width: 44ch; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.hh-controls { margin-top: 26px; max-width: 520px; }
.hh-scale {
display: flex;
justify-content: space-between;
margin-top: -4px;
font-size: 13px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.pk-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
/* min-width:0 because a