/* ========================================================================== FLIGHTPROOF BRAND LAYER — one design system for the whole site -------------------------------------------------------------------------- Why this file exists (2026-10-22, owner: "country pages, main page and partner page are not harmonic in design and responsiveness"): The three page families each grew their own skin and drifted apart. family sheet(s) body face display face figures ----------------------------------------------------------------------- homepage styles.css + instrument DM Sans Outfit IBM Plex Mono country guide instrument.css Outfit(!) Outfit JetBrains Mono partner portal inline styles only DM Sans Outfit ui-monospace The drift was not in the palettes — those are all the brand's navy/amber. The drift was in the three things a visitor can actually see: 1. TYPE. The two biggest families loaded NO webfont at all. The country guides asked for "Outfit" and "DM Sans" in CSS and got the system fallback instead, so 2,281 pages rendered in Segoe UI next to a marketing site rendered in Outfit. The mono face differed too: IBM Plex Mono on the homepage, JetBrains Mono on the guides, ui-monospace on the partner page — and 83 locale homepages carried a BROKEN font URL (`css2?IBM+Plex+Mono…`, no `family=`, so Google served nothing). 2. THE PROOF STRIP. Three surfaces say the same three facts — tickets sold, delivery time, coverage — in three different grammars: an uppercase mono micro-row on the homepage, a 3-cell card grid on the guides, a navy bar on the partner page. Same facts, three voices. 3. THE BUTTON. A 50px-radius pill on the legacy homepage hero, a 0px-radius hard block on the guides, a 10px soft-shadow block on the partner page. The guide's own buy button (10px) and the homepage's band button (10px) agreed; everything around them did not. Render proof (2026-10-22, 1280px) counted six action radii on one guide page alone — 12px (band CTA), 14px (in-article CTA), 4px (the stub's buy button), 6px (the Pass button), 10px (the destination picker's buy), plus the homepage's 6px rescue button — and the modal's pay button in the UA's Arial. All of them are in section 3 now, at 12px, in the display face. This file is the seam. It does NOT repaint the families: the homepage's ticket band and the guides' paper ticket stay theirs. It makes the TYPE identical, gives the proof strip one grammar, gives the buttons one grammar, and sets a shared responsive floor. Rules for this file: * Namespace is --fpb-* (FlightProof Brand). The --fp-* namespace is already taken by per-page tokens (--fp-sans, --fp-ink, --fp-amber on the locale homes) — never collide with it. * Palette values are the e-ticket email's (ADR 0001): navy #1a1a2e, amber #FFE66D, paper #ece8df. No new colours without an ADR. * It loads LAST, after styles.css and instrument.css, so it can settle the disagreements between them — see scripts/add-brand-layer.cjs. * It is SELF-SUFFICIENT: every custom property it READS is defined in this file. It may not lean on --sans / --mono / --i-* from the other sheets, because a page can load this file without them. ========================================================================== */ :root { /* The pages without instrument.css (10 of 2,938) still need the light declaration, or their native controls follow the OS dark preference while the page stays white. See the note at the top of instrument.css. */ color-scheme: light; /* ── palette (from the e-ticket email — ADR 0001) ────────────────────── */ --fpb-ink: #1a1a2e; --fpb-amber: #FFE66D; --fpb-paper: #ece8df; --fpb-card: #ffffff; --fpb-edge: rgba(255, 255, 255, .22); /* edges on a DARK surface */ --fpb-edge-light: #e2ddcf; /* edges on a LIGHT surface */ --fpb-dash: #d7d2c2; --fpb-dim: #67624f; --fpb-grey: #6a6555; --fpb-ok: #22c55e; /* ── type: three roles, one stack, site-wide ──────────────────────────── */ /* Display: Outfit. Text: DM Sans. Figures: JetBrains Mono. The Noto names are not decoration — they are how the Bengali, Devanagari, Thai, Arabic and CJK pages keep a designed face instead of dropping to a system font mid-sentence. */ --fpb-display: "Outfit", "Segoe UI", system-ui, -apple-system, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Thai", "Noto Sans Arabic", "Noto Sans CJK SC", sans-serif; --fpb-sans: "DM Sans", "Segoe UI", system-ui, -apple-system, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Thai", "Noto Sans Arabic", "Noto Sans CJK SC", sans-serif; --fpb-mono: "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace; /* ── fluid scale (the "responsive" half of the harmony) ───────────────── */ --fpb-fs-xs: clamp(11.5px, 0.36vw + 10.6px, 13px); --fpb-fs-sm: clamp(13px, 0.3vw + 12.2px, 14.5px); --fpb-fs-body: clamp(14.5px, 0.25vw + 13.8px, 16px); --fpb-fs-lead: clamp(15.5px, 0.42vw + 14.4px, 18px); --fpb-fs-h3: clamp(16px, 0.5vw + 14.6px, 19px); --fpb-fs-h2: clamp(21px, 1.1vw + 17.6px, 28px); --fpb-fs-h1: clamp(27px, 2.1vw + 20.3px, 40px); --fpb-gap: clamp(10px, 1.1vw, 16px); --fpb-gap-lg: clamp(16px, 2vw, 28px); --fpb-pad: clamp(16px, 2.4vw, 30px); --fpb-r-sm: 10px; --fpb-r-md: 12px; --fpb-r-lg: 18px; --fpb-shadow: 0 18px 44px -18px rgba(26, 26, 46, .45); } /* ========================================================================== 1. TYPE HARMONY — one stack, three roles -------------------------------------------------------------------------- The families each named their own faces, so the same word rendered in three different ones. This file does not rewrite the rules that use the families' own tokens (that would be 2,000+ pages' worth of churn); it assigns the ROLES at the source: body copy → DM Sans (text face, one size, one line-height) headings → Outfit (display face) figures → JetBrains Mono, tabular (the PNR, the price, the count) Two mechanisms, because the families disagree about where the family is named: a) The legacy token names. The instrument layer and the homepage sheet ask for --sans, --i-sans, --mono, --i-mono and --mono-font. Those are remapped here, so every rule that already asks for one of those names gets the brand's answer with no markup change and no new class. NOTE: the instrument layer REDEFINES --sans and --mono on .inst, so on the guides the remap below is shadowed — that is exactly why (b) exists. b) The elements themselves. The body face and the heading face are set here, so they win whatever the family does with its own tokens. ========================================================================== */ :root { --sans: var(--fpb-sans); --i-sans: var(--fpb-display); --mono: var(--fpb-mono); --i-mono: var(--fpb-mono); --mono-font: var(--fpb-mono); } /* The `!important` on the body rule is deliberate. Two reasons: 1. The 43 locale homepages and the widget carry `body{font-family:Inter,'DM Sans',…!important}` — Inter is a face the site NEVER requests, so on a machine that happens to have it installed those pages would render in Inter while every other page renders in DM Sans. That is the same drift the owner is looking at, one step removed. 2. The guides set the body face with a `font:` shorthand on .inst, which is a normal declaration; this one is important, so it wins the family while leaving the shorthand's size and line-height alone. The per-locale rules in styles.css (`html[lang="zh"] body{…!important}` and friends) out-specify this one, so the CJK / Arabic / Bengali body faces keep their native stack. The guide body therefore becomes DM Sans — the same text face as the homepage — instead of Outfit, which is a display face and was never meant to carry a screen of copy. */ body { font-family: var(--fpb-sans) !important; } /* The instrument layer sets the body face on .inst / .inst-map with a shorthand; this is the same statement for the case where .inst is not the body element (the guide's ticket shell is , but the map shell is not). */ .inst, .inst-map { font-family: var(--fpb-sans) !important; } /* The UA default nobody asked for. Chrome's UA stylesheet gives every