/* Font loaded non-blocking via toolbar.js */ /* ══════════════════════════════════════════════════════════════ * TRAVEL SITE — shared stylesheet * All Trip-Essentials pages link to this file. * Edit here — all pages update instantly. * * Guide stylesheet (for guide pages): ../../assets/guide-style.css * ══════════════════════════════════════════════════════════════ */ /* Anti-FOUC: hide body until toolbar.js reveals it (opacity:1 inline style). On first/uncached loads, toolbar.js takes time to download — this ensures the body stays hidden from the very first paint (CSS is render-blocking in , no JS download needed). toolbar.js's 2 s safety always restores it. */ body { opacity: 0; transition: none; } :root { /* ── Colors ── */ --bg: #f5f4f0; --warm: #fdf8f0; --surface: #ffffff; --surface2: #f0ede8; --border: #d8d4cc; --border2: #e6e2da; --text: #3d3a32; --muted: #6a6660; --accent: #8a6c1a; --hover: #faefd8; --navy: #1a3a8b; --green: #1a5a1a; /* canonical GREEN family text — Badge spec 2026-07-29 */ --gold: #c8961a; --red: #a02020; /* Floating controls (scroll-to-top FAB) — see guide-style.css --c-float-* */ --c-float-bg: #ffffff; --c-float-bd: #c8a44a; --c-float-text: #8a6c1a; --c-navbtn-bd: #c4b896; --c-navbtn-text: #6b6860; /* prev/next chevron buttons */ /* Shared search magnifier icon — reference as background-image on any search box */ --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 13 13' fill='none'%3E%3Ccircle cx='5.5' cy='5.5' r='4.5' stroke='%23a8895a' stroke-width='1.5'/%3E%3Cline x1='9.35' y1='9.35' x2='12' y2='12' stroke='%23a8895a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); /* ── Banner (matches guide hotel banner) ── */ --banner-gradient: linear-gradient(135deg, #7a3b1e 0%, #b85c2a 55%, #d4874a 100%); --banner-text: #ffffff; --banner-sub: rgba(255, 255, 255, 0.72); /* ── Typography ── */ --font: 'Public Sans', sans-serif; --fs-body: 15px; --fs-title: 18px; /* page title size */ --fs-h2: 18px; /* section heading */ --fs-h3: 16px; /* sub-section heading */ --fs-sub: 12px; /* sub-lines, descriptions */ --fs-label: 11px; /* decorative uppercase labels */ /* ── Timing & Spacing ── */ --transition-fast: 0.15s; --transition-normal: 0.2s; --border-thin: 0.5px; --border-normal: 1px; /* ── Delta routing tier colors (nonstop=green / 1-stop=blue / 2-stop=amber) ── */ --c0: #1a5a1a; --c0bg: #e8f5e8; --c0bd: #a0d8a0; --c1: #1a3a8b; --c1bg: #e8f0fb; --c1bd: #a0b8e8; --c2: #8a5a10; --c2bg: rgba(200,164,74,.10); --c2bd: rgba(122,88,0,0.4); /* ── Discontinued service tag colors (Delta routes pages) ── */ --c-disc-bg: #f8e8e8; --c-disc: #7a1010; /* ── Terracotta / rust (Pickleball highlights, Travel-Stats sr-val) ── */ --rust: #b85c2a; /* ── Light terracotta tint (Pickleball tags / badges) ── */ --c-rust-tint: #fbeee4; /* ── Vaccine tier solid colors (dot fill + badge background) ── */ --tier-req: #f0c040; --tier-req-text: #5a3a00; --tier-rec: #6db96d; --tier-rec-text: #ffffff; --tier-con: #93a8d8; --tier-con-text: #ffffff; --tier-med: #e08080; --tier-med-text: #ffffff; /* ── Warm border (Weather.html panel borders) ── */ --border-warm: #c4b896; /* ── Bar track background (bar-row/bar-track used in stats pages) ── */ --track: #ece6dd; /* ── Weather data semantic colors ── */ --c-temp-hi: #a61c00; --c-temp-lo: #3d5282; --c-rain: #4a7c9b; /* ── Vaccine tier colors (Vaccines.html) ── */ --req-bg: #fef9e5; --req-bd: #d4a010; --rec-bg: #f0faf0; --rec-bd: #4a9a4a; --con-bg: #eef1f8; --con-bd: #6b7fb8; --med-bg: #fdf0f0; --med-bd: #c06060; /* ── Semantic tag colors (Travel-Insurance.html) — canonical GREEN + YELLOW trios per Badge spec ── */ --c-tag-good-bg: #e8f5e8; --c-tag-good-border: rgba(26,90,26,0.4); --c-tag-ok-bg: #fff8e0; --c-tag-ok-text: #7a5800; --c-tag-ok-border: rgba(122,88,0,0.4); /* ── Search bar standard tokens (§ 14 Formatting.html#sec-colors) ── */ --c-search-focus-border: #c8b99a; --c-search-placeholder: #A8895A; /* ── Section head + badge colors (Cards-ATM.html) ── */ --c-section-head: #5C3D11; --c-terracotta: #b85c2a; --badge-top-bg: #fdecc8; --badge-top-text: #7a4d00; --badge-top-bd: #e8c97a; --badge-warn-bg: #fdf0e8; /* canonical RED bg */ --badge-warn-text: #7a3a1a; /* canonical RED text */ --badge-warn-bd: rgba(122,58,26,0.4); /* canonical RED border */ --badge-ok-bg: #e4f5e4; --badge-ok-text: #1a5c1a; --badge-ok-bd: #90cc90; } /* ── Dark mode (auto — follows OS preference) ── */ @media (prefers-color-scheme: dark) { :root { --bg: #1a1917; --warm: #242220; --surface: #2a2825; --surface2: #1e1c1a; --border: #3a3730; --border2: #332f2a; --text: #e8e5e0; --muted: #9a9690; --accent: #c8a040; --hover: #2e2a1e; --navy: #5a8adb; --green: #5aaa5e; /* canonical dark GREEN family text */ --gold: #d4a830; --red: #d44040; --c-float-bg: #2a2825; --c-float-bd: #7a6430; --c-float-text: #c8a060; --c-navbtn-bd: #5a5040; --c-navbtn-text: #b0aca4; --req-bg: #2a2510; --req-bd: #c8a020; --rec-bg: #0e200e; --rec-bd: #4a9a4a; --con-bg: #101525; --con-bd: #7080b0; --med-bg: #250e0e; --med-bd: #c06060; --c-tag-good-bg: #0d200d; --c-tag-good-border: rgba(90,170,94,0.4); /* canonical dark GREEN border */ --c-tag-ok-bg: #281f00; --c-tag-ok-text: #d4a830; --c-tag-ok-border: #7a6010; --c0: #4aaa70; --c0bg: #0e2415; --c0bd: #285e3a; --c1: #6090d8; --c1bg: #0e1525; --c1bd: #304878; --c2: #c8a44a; --c2bg: rgba(200,164,74,.12); --c2bd: #9a7830; --c-disc-bg: #280e0e; --c-disc: #e07070; --c-rust-tint: #2a1a12; --tier-req: #c8a020; --tier-req-text: #1a1200; --tier-rec: #4a9a4a; --tier-rec-text: #ffffff; --tier-con: #6080c0; --tier-con-text: #ffffff; --tier-med: #c07070; --tier-med-text: #ffffff; --rust: #d4784a; --border-warm: #5a5040; --track: #3a3530; --c-temp-hi: #e05030; --c-temp-lo: #6090e0; --c-rain: #6090b0; --c-search-focus-border: #7a6a5a; --c-search-placeholder: #7a6a50; --c-section-head: #c8a060; --c-terracotta: #d4784a; --badge-top-bg: #2a1e00; --badge-top-text: #e8b060; --badge-top-bd: #7a5810; --badge-warn-bg: #2a1408; /* canonical dark RED bg */ --badge-warn-text: #e8a880; /* canonical dark RED text */ --badge-warn-bd: rgba(232,168,128,0.4); /* canonical dark RED border */ --badge-ok-bg: #0a200a; --badge-ok-text: #80cc80; --badge-ok-bd: #306030; } ::selection { background: rgba(200,160,64,.35); } } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Text selection ── */ ::selection { background: rgba(122,59,30,.35); color: inherit; } /* ── Base ── */ body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; min-height: 100vh; min-height: 100dvh; --pb: 80px; padding-bottom: var(--pb); } /* ── Layout ── */ .wrap { max-width: none; margin: 0 auto; padding: 0 32px; } .reading-col { max-width: 720px; margin-left: auto; margin-right: auto; } /* ── Heading scale — wired to CSS vars so the 3-step hierarchy is consistent. body=15px (--fs-body) · h3=16px (--fs-h3) · h2=18px (--fs-h2). Guide pages do not load this stylesheet so guide .extras-title is unaffected. ── */ h2 { font-size: var(--fs-h2); font-weight: 700; } h3 { font-size: var(--fs-h3); font-weight: 600; } /* Non-guide pages: JS injects .title-updated as a direct body child so the stamp always lands at the true visual bottom. padding-left matches .wrap gutter. */ body > .title-updated { padding-left: 32px; } /* ── Page banner (desktop only) — gradient block with centered title. Mobile overrides live in mobile.css (text-only left-accent strip). Scoped to min-width:601px so mobile.css never has to fight !important. ── */ @media (min-width: 601px), (pointer: fine) { .page-header, .header, .site-header { background: none !important; padding: 10px 0 2px !important; min-height: unset !important; width: auto !important; min-width: unset !important; display: flex !important; align-items: baseline !important; justify-content: space-between !important; border-radius: 0 !important; border-bottom: 3px solid transparent !important; border-image: linear-gradient(135deg, #7a3b1e 0%, #b85c2a 55%, #d4874a 100%) 1 !important; margin: 8px 0 20px !important; } .page-header .src-link, .header .src-link, .page-header .visa-src-link, .header .visa-src-link { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; padding-left: 16px; align-self: flex-end; } .page-header .src-link:hover, .header .src-link:hover, .page-header .visa-src-link:hover, .header .visa-src-link:hover { text-decoration: underline; } .page-header h1, .header h1, .site-header h1 { font-size: var(--fs-title) !important; /* 18px desktop (--fs-title: 18px) / 14px mobile (mobile.css override). Deliberate: desktop banners render at 18px, mobile at 14px. Use var(--fs-title) — never hardcode px here. */ font-weight: 700 !important; color: #3d3a32 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; line-height: 1.2 !important; margin: 0 !important; text-align: left !important; } .page-header p, .header p, .header-desc { font-size: var(--fs-sub) !important; color: var(--muted) !important; margin-top: 4px !important; line-height: 1.5 !important; } } /* ── Country/state group header — shared across every country-listing page (Currency-Guide, Plug-Adapter-Guide, European-Train-Guide, Lounges-Europe, Tipping-Guide, Trusted-Traveler). One canonical place/color/size/font, desktop AND mobile (mobile override below in mobile.css) — owner rule 2026-07-29 (final): gradient on the font, no box/button. Same technique as the title. */ .country-header { border-bottom: 2px solid #E8D9BC; padding-bottom: 12px; margin-bottom: 16px; } .country-name { font-size: var(--fs-title); font-weight: 700; color: #3d3a32; text-transform: uppercase; letter-spacing: 0.04em; } /* The retired top-right stamp rule (a right-aligned line just under the banner) was deleted 2026-08-10 — owner rule: the "Updated {date}" stamp is bottom-left on every page and every viewport, so no page carries that class any more. The live rule is `body > .title-updated` above. Spec: Toolbar.html Sec 10. */ /* Decorative illustration beside page title banners — sits outside .page-header */ .page-header-illus { display: block; height: 180px; width: auto; opacity: 0.92; pointer-events: none; margin: 10px 0 0 auto; } @media (max-width: 600px) and (pointer: coarse) { .page-header-illus { display: none; } } /* Hide eyebrow labels + subtitles inside banner — banner must contain only h1 */ .page-header-eyebrow, .header-label, .header-eyebrow, .header-desc, .eyebrow { display: none !important; } /* ── Links ── */ /* a:visited is intentionally NOT set here — pill-style anchors must control their own visited color. Setting a global a:visited { color: #8a6c1a } bleeds gold onto every visited pill, jump-btn, and nav chip. Individual pill classes that need a specific visited color carry their own a.class:visited rule. */ a { color: #8a6c1a; text-decoration: none; } a:hover { text-decoration: none; } /* Pills, nav-chips, cards, and styled-button anchors — never underline */ .nav-link, .nav-link:hover, .nav-link.active, .pill, .pill:hover, .pill.active, a.pill:hover, a.badge, a.badge:hover, .jump-btn, .jump-btn:hover, .jump-btn.active, .stab, .stab:hover, .stab.on, .stats-nav a, .stats-nav a:hover, .stats-nav a.active, .sibling-pill:hover, .sibling-pill:focus, .also-on-this-site-pill:hover, .also-on-this-site-pill:focus, .filter-btn, .filter-btn:hover, .filter-btn.active, a.wtg-card, a.wtg-card:hover, a.sc-card, a.sc-card:hover, a.ff-card, a.ff-card:hover, a.cf-card, a.cf-card:hover, a.city-row, a.city-row:hover, a.stat-tile, a.stat-tile:hover, a.jump-pill, a.jump-pill:visited, a.jump-pill:hover, a.rank-city, a.rank-city:visited, a.rank-city:hover, a.chip-link, a.chip-link:hover, a.apply-link, a.apply-link:hover, a.apply-btn, a.apply-btn:hover, .apply-btn, .apply-btn:hover, .book-link, .book-link:hover, .book-link:focus, .byg-link, .byg-link:hover, .program-link, .program-link:hover, .prov-link, .prov-link:hover, .card-link:hover, .card-link:active, .lounge-region-nav a, .lounge-region-nav a:hover, .section-nav a, .section-nav a:hover, .pkl-nav a, .pkl-nav a:hover, .region-jump a, .region-jump a:hover, .region-cities a, .region-cities a:hover, .dnv-jump a, .dnv-jump a:hover, .cty-guides a, .cty-guides a:hover { font-family: inherit; text-decoration: none; } /* ── Sibling pills (cross-links between Climate Finder / Weather / When to Go) ── */ .sibling-pill { font-family: inherit; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 400; color: var(--muted, #6a6660); padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .08s; } a.sibling-pill:visited { color: #6a6660; } /* literal hex — Chrome doesn't resolve var() in :visited */ /* ── Also-on-this-site strip (Trip-Essentials cross-link cluster) ── */ .also-strip { margin-top: 30px; padding: 16px 32px 0; border-top: 1px solid var(--border2,#e6e2da); } .also-strip-head { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .also-links { display: flex; flex-wrap: wrap; gap: 6px; } a.also-on-this-site-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #8a6c1a; background: #ffffff; border: 0.5px solid #c8a44a; border-radius: 6px; padding: 6px 12px; text-decoration: none; transition: background .15s, box-shadow .15s, border-color .15s, color .15s, transform .08s; } @media (hover:hover) { a.also-on-this-site-pill:hover { background: linear-gradient(135deg,#7a3b1e 0%,#b85c2a 55%,#d4874a 100%); color: #fff !important; border-color: #b85c2a; box-shadow: 0 3px 10px rgba(184,92,42,.18); } } a.also-on-this-site-pill:active { background: linear-gradient(135deg,#5a2a10 0%,#8a3f18 55%,#a85e28 100%); color: #fff !important; border-color: #b85c2a; box-shadow: 0 1px 3px rgba(184,92,42,.12); transform: scale(.97) translateY(1px); } /* ── Form B glued grid — `.tve-glue` ──────────────────────────────────────── THE one way to collapse adjacent cell borders into a single seam. Put `.tve-glue` on the grid container; the cells need nothing. Never hand-roll this with :nth-child / :first-child again — every such rule this site had was wrong or one hidden child away from being wrong (see § Why below). How it works: every cell pulls itself up and left by one border width, so it sits on top of its top/left neighbour's border — one seam, not two. The container's matching top/left padding hands that width back to row 1 and column 1, so the grid still starts flush with everything above it. Cells stretch (width:auto), so pulling the left edge out widens the cell and the right edge stays on the column line. Set the seam width with --glue-w when the cells' border isn't 1.5px: .my-grid { --glue-w: 2px; } Why not :nth-child — four ways it breaks, all of which have shipped here: 1. A hidden sibling still counts. A `display:none` filter label shifted every column by one on Scenic-Train-Journeys; #train-count plus a label shifted European-Train-Guide by two. 2. `:not(:first-child)` exempts only the very first cell, not each row's column 1 — When-to-Go's row-2 pill hung outside the grid. 3. CSS `order` decouples DOM position from visual position entirely, so no nth-* selector can address "column 1" (index.html's .pill-row). 4. iOS Safari silently ignores :nth-child-set grid-column (see mobile.css § "Also on this site"). None of them can touch a rule that names no positions. min-width:0 is part of the contract, not a nicety: a `1fr` column floors at its content's min-content width, so one long label ("Copenhagen") pushes the whole grid past its container — that is what made Neighborhoods, When-to-Go and Climate-Finder scroll sideways. Zeroing the item's automatic minimum lets the column shrink and the label wrap instead. The compensation is PADDING, and it has to be padding: Chromium rounds border-width down to a whole pixel, so a 1.5px transparent border compensates a 1.5px margin by only 1px and every column-1 cell ends up hanging half a pixel outside the strip. Padding keeps the fractional value exactly. CONTRACT — a glued container owns its padding-left and padding-top (that space IS the compensation) and states any spacing of its own as margin or as padding-right/padding-bottom. Cells must stretch, so a glued cell carries no fixed width. Two flavours. `.tve-glue` glues at every width — use it when the container is a grid at every width. `.tve-glue-m` glues only at ≤600px — use it for the many strips that are a glued grid on mobile and a flex row on desktop, so the desktop strip keeps whatever treatment it already has. Enforced by brain_check.check_form_b_glue_is_shared (hard-fail). */ .tve-glue.tve-glue.tve-glue { padding-left: var(--glue-w, 1.5px) !important; padding-top: var(--glue-w, 1.5px) !important; box-sizing: border-box; } .tve-glue.tve-glue.tve-glue > * { /* (0,3,0) — see the note on the -m twin below */ margin-top: calc(-1 * var(--glue-w, 1.5px)) !important; margin-left: calc(-1 * var(--glue-w, 1.5px)) !important; min-width: 0 !important; width: auto !important; align-self: stretch !important; } @media (max-width: 600px) and (pointer: coarse) { .tve-glue-m.tve-glue-m.tve-glue-m { padding-left: var(--glue-w, 1.5px) !important; padding-top: var(--glue-w, 1.5px) !important; box-sizing: border-box !important; } /* Tripled class = specificity (0,3,0). Not styling for its own sake: every page's own strip rules live in an inline