/* ========================================================================== IATA v3 Design Tokens Sourced from iata-unifra-ui-kit SCSS (v3 tonal palettes, typography, spacing) ========================================================================== */ /* -------------------------------------------------------------------------- AktivGrotesk @font-face — woff2 self-hosted Unified font-family matching the kit's iata-font.css -------------------------------------------------------------------------- */ @font-face { font-family: 'AktivGrotesk'; src: url('../fonts/AktivGrotesk-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; ascent-override: 92.1%; descent-override: 22.3%; line-gap-override: 2.6%; } @font-face { font-family: 'AktivGrotesk'; src: url('../fonts/AktivGrotesk-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 92.1%; descent-override: 22.3%; line-gap-override: 2.6%; } @font-face { font-family: 'AktivGrotesk'; src: url('../fonts/AktivGrotesk-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 92.1%; descent-override: 22.3%; line-gap-override: 2.6%; } @font-face { font-family: 'AktivGrotesk'; src: url('../fonts/AktivGrotesk-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 92.1%; descent-override: 22.3%; line-gap-override: 2.6%; } @font-face { font-family: 'AktivGrotesk'; src: url('../fonts/AktivGrotesk-XBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; ascent-override: 92.1%; descent-override: 22.3%; line-gap-override: 2.6%; } /* The faces above are the family the ticket supplied, served byte-for-byte — Dalton Maag's licence forbids altering them (ARMIP-158). The AktivGroteskCorp faces they replace asked, through `gasp`, for grid-fitting with no smoothing at 9–16ppem; DirectWrite honours that, so on Windows at 125% scaling body text was rendered to whole pixels and came out uneven, worst on "a", "s" and "e". These ask for symmetric smoothing at every size. Their own metrics set USE_TYPO_METRICS over a 714/-286/280 box, a 1.28em line that sits text high next to icons on Windows. The overrides pin every platform to the Corp faces' 921/-223/26, so the swap moves nothing vertically. There are no italic or 300 faces; nothing uses them, and the browser slants the upright for an in rich text. Both families' hinting may still round advances to whole pixels (`head.flags` bit 4), which FreeType on Linux does. `geometricPrecision` scales the outlines exactly and keeps advances fractional. Measured in the canonical Linux image at DPR 1.25, it took the advance-per-em spread of "assess" across 12–24px from 6.56% to 0.03%; `optimizeLegibility` and `-webkit-font-smoothing` both measured as no-ops. The smoothing pair is here for a different reason: it is what the ticket's `fonts.zip` asks for and what iata.org renders with. It is macOS-only — grayscale rather than subpixel antialiasing, so lighter stems on a Mac and no effect at all on Windows or Linux, where the distortion actually is. All three properties inherit, so the root covers both shells and the shadow DOM of every Material Web component. */ :root { text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* -------------------------------------------------------------------------- Tonal Palettes — v3 stops 0–100 Primary: IATA Blue, Neutral: IATA Grey -------------------------------------------------------------------------- */ :root { /* --- Blue tonal palette (primary brand) --- */ --iata-blue-0: #000000; --iata-blue-10: #000767; --iata-blue-20: #0010a2; --iata-blue-25: #0015c1; --iata-blue-30: #001ae2; --iata-blue-35: #1a2bd5; --iata-blue-40: #1e32fa; --iata-blue-50: #3333ff; --iata-blue-60: #4b5bfb; --iata-blue-70: #7884fc; --iata-blue-80: #a5adfd; --iata-blue-90: #d2d6fe; --iata-blue-95: #e8eafe; --iata-blue-98: #fbf8ff; --iata-blue-99: #fffbff; --iata-blue-100: #ffffff; /* --- Grey tonal palette (neutral) --- */ --iata-grey-0: #000000; --iata-grey-10: #060208; --iata-grey-20: #111111; --iata-grey-25: #161218; --iata-grey-30: #222222; --iata-grey-35: #263238; --iata-grey-40: #333333; --iata-grey-50: #525252; --iata-grey-60: #666666; /* Figma's Tertiary/Black20 is #999999, but this stop is the app's muted *text* colour — breadcrumb current page, ::placeholder, the wizard's not-yet-reached step label — and measured on the page it actually paints on (--iata-background-01, #f0f2f5, where the breadcrumb sits) #999999 is 2.54:1 against the 4.5:1 SC 1.4.3 asks of 14-16px copy. The lightest grey that clears it on that ground is #6e6e6e (4.55:1 there, 5.10:1 on white). A deliberate divergence from the kit, not a drift. Noted consequence, for a design owner rather than for us: this leaves the 70 stop four levels off the 60 stop below it (#6e6e6e against #666666). The ramp no longer has two distinguishable muted greys, so either 70 is retired and its seven call sites move to 60, or 60 lightens — both are kit decisions, so neither is taken here. */ --iata-grey-70: #6e6e6e; --iata-grey-80: #cccccc; --iata-grey-90: #d9d9d9; --iata-grey-95: #e6e6e6; --iata-grey-98: #f0f2f5; --iata-grey-99: #f2f2f2; --iata-grey-100: #f7f8fc; /* --- Semantic color aliases --- */ --iata-blue-primary: var(--iata-blue-40); --iata-grey-primary: var(--iata-grey-40); /* Figma's Tertiary/Black20, kept off the ramp: --iata-grey-70 above darkened that stop for live text, and only a disabled control — exempt from SC 1.4.3 — may use the kit's own value (ARMIP-223). */ --iata-text-disabled: #999999; --iata-yellow-primary: #fac832; --iata-yellow-30: #b54708; --iata-yellow-90: #fff5d8; --iata-green-primary: #289632; --iata-green-80: #9ed4a6; --iata-green-90: #ecfdf3; --iata-red-primary: #f04632; --iata-red-80: #f8aea5; --iata-red-85: #fde9e6; --iata-red-90: #fef3f2; /* The "Focused" column of the pill frame: one step darker on ground, rule and label than the Accent pairs above. Not new stops in the palette — hover shades of a pair — so they are named by the role they fill. */ --iata-accent-hover-border: #69b670; --iata-accent-hover-surface: #d4ead6; --iata-accent-hover-text: #207828; --iata-error-hover-border: #f36b5b; --iata-error-hover-surface: #fcdad6; --iata-error-hover-text: #c03828; /* The danger button's hover ground — one step down from IATA/Red, and like the pill trio above not a stop on the ramp. */ --iata-error-hover: #d63e2c; /* The warning alert's three values. They are the only colours in the app that come from nowhere in the IATA palette — Bootstrap's amber, carried over with the markup. Held here so the Figma set can replace them in one edit; until it does they are left at the values PROD renders. */ --iata-warn-surface: #fff3cd; --iata-warn-on-surface: #664d03; --iata-warn-icon: #f0ad4e; --iata-pink-primary: #f050c8; --iata-purple-primary: #5a14a0; --iata-white: #ffffff; --iata-black: #000000; --iata-background-01: #f0f2f5; --iata-primary: var(--iata-blue-primary); --iata-accent: var(--iata-green-primary); --iata-accent-80: var(--iata-green-80); --iata-accent-90: var(--iata-green-90); --iata-error: var(--iata-red-primary); --iata-error-80: var(--iata-red-80); --iata-error-90: var(--iata-red-90); --iata-warn: var(--iata-yellow-primary); --iata-warn-30: var(--iata-yellow-30); --iata-warn-90: var(--iata-yellow-90); /* --- Focus --- The kit declares a Focused state in exactly two component sets, `Input` (81:600) and `Date Picker` (338:3902), and draws both the same way: 2px IATA/Blue. Nothing else declares one, so every other control borrows these rather than inventing a second ring. --- */ --iata-focus-color: var(--iata-blue-40); --iata-focus-width: 2px; /* The state layer Material paints under a hovered list item: 8% of the same ink the item's text is drawn in. */ --iata-state-hover-layer: rgba(6, 2, 8, 0.08); /* --- Row actions (UNIFRA kit: Icon+Tooltip and More Information) — the icon buttons in a table's Action column, the tooltip that names them, and the menu the kebab opens. --- */ --iata-action-icon: var(--iata-blue-70); --iata-action-icon-hover: var(--iata-blue-60); --iata-action-icon-hover-surface: var(--iata-blue-95); /* Pressed goes one step deeper than hover — the kit's Clicked state. */ --iata-action-icon-pressed-surface: var(--iata-blue-90); /* A destructive action lights onto red rather than blue (Sara, 2026-09-07: "these icon buttons should be red with a red background on hover"). The kit reaches that disc a different way than the blue one: it hands Material `--mat-icon-button-state-layer-color: var(--iata-error)` and lets the default 8%/12% opacities do the mixing, where the blue set is a solid tone. Those two mixes land on #fef0ef and #fde9e6, so red-90 is already the hover step and red-85 above is the pressed one — the disc really is that pale, because #f04632 is a bright red. */ --iata-action-icon-danger-hover-surface: var(--iata-red-90); --iata-action-icon-danger-pressed-surface: var(--iata-red-85); /* Edit User and Edit Company open the Django back-end rather than a page of ours, and Kathryn asked (09-Sep) for them to read differently from the blue actions because of it. Tertiary/Black 60 glyph (ARMIP-203, Figma node 1216:14762), and the kit's neutral disc underneath rather than the blue one. */ --iata-action-icon-backend: var(--iata-grey-50); --iata-action-icon-backend-hover-surface: var(--iata-grey-95); --iata-action-icon-backend-pressed-surface: var(--iata-grey-90); /* The kebab rests grey: a handle, not an action. It joins the blue only once it is hovered. */ --iata-action-kebab-icon: var(--iata-grey-60); --iata-tooltip-surface: var(--iata-action-icon-hover-surface); --iata-tooltip-text: var(--iata-blue-40); --iata-menu-item-text: var(--iata-grey-40); --iata-menu-item-icon: var(--iata-grey-70); --iata-menu-border: var(--iata-grey-99); /* --- Spacing scale --- */ --iata-gap-xs: 5px; --iata-gap-s: 10px; /* 24px since ARMIP-201: 20px is not a step on the design system's scale, and the 20px inset it gave every card was the padding Sara measured against Figma's Spacing/24. The 8pt scale below already carries the same number; this one is corrected in place rather than shadowed by it, so the ~40 rules that read it by name move together — see ADR 024. */ --iata-gap-m: 24px; --iata-gap-l: 40px; --iata-gap-xl: 60px; --iata-gap-2xl: 100px; --iata-gap-3xl: 120px; --iata-gap-4xl: 150px; /* --- Spacing scale (8pt, Figma) — additive, use for new/edited CSS. Existing --iata-gap-* usages are left alone. --- */ --iata-space-1: 8px; --iata-space-2: 16px; --iata-space-3: 24px; --iata-space-4: 32px; --iata-space-8: 64px; --iata-space-12: 96px; /* --- Typography — Figma "UI 2026" scale (source of truth per ADR 008) --- */ --iata-txt-font-family: 'AktivGrotesk', Arial, Helvetica, sans-serif; /* H1: 40/44/500/-1.5px */ --iata-txt-heading1-size: 2.5rem; --iata-txt-heading1-line-height: 2.75rem; --iata-txt-heading1-tracking: -1.5px; /* H2: 28/32/500/0 */ --iata-txt-heading2-size: 1.75rem; --iata-txt-heading2-line-height: 2rem; /* H3: 20/24/500/0 (Bold variant 20/26/700 used ad hoc, e.g. footer title) */ --iata-txt-heading3-size: 1.25rem; --iata-txt-heading3-line-height: 1.5rem; /* title-small: unchanged, no Figma equivalent yet */ --iata-txt-heading4-size: 0.875rem; --iata-txt-heading4-line-height: 1.25rem; /* XL: 18/22/400 */ --iata-txt-xl-size: 1.125rem; --iata-txt-xl-line-height: 1.375rem; /* L: 16/20/400/0 */ --iata-txt-l-size: 1rem; --iata-txt-l-line-height: 1.25rem; --iata-txt-l-tracking: 0; /* M: 14/18/400/0 */ --iata-txt-m-size: 0.875rem; --iata-txt-m-line-height: 1.125rem; --iata-txt-m-tracking: 0; /* S: 12/16/400 */ --iata-txt-s-size: 0.75rem; --iata-txt-s-line-height: 1rem; --iata-txt-s-tracking: 0.4px; /* --- Font weights --- */ --iata-txt-weight-thin: 200; --iata-txt-weight-regular: 400; --iata-txt-weight-medium: 500; --iata-txt-weight-bold: 700; --iata-txt-weight-xbold: 900; /* --- Borders --- One place for every hairline in the app. The colour stops below are the three greys the CSS already drew, kept apart by the role they play so a Figma drop can move one without moving the others: subtle — the edge of a card, panel, accordion or toolbar default — a divider inside a surface, and the documentation tables strong — table rules and the header underline accent — a blue rule that carries meaning (area separators, tools) The composites are what a rule should normally use; the parts are there for the sides that need a different weight on one edge. */ --iata-border-width: 1px; --iata-border-width-strong: 2px; --iata-border-subtle: var(--iata-grey-95); --iata-border-default: var(--iata-grey-90); --iata-border-strong: var(--iata-grey-80); --iata-border-accent: var(--iata-blue-90); /* A rule drawn on a dark ground — the footer — where none of the greys above would show. White at 10%, so it takes the ground's own colour. */ --iata-border-inverse: rgba(255, 255, 255, 0.1); --iata-border-hairline: var(--iata-border-width) solid var(--iata-border-subtle); --iata-border-divider: var(--iata-border-width) solid var(--iata-border-default); --iata-border-rule: var(--iata-border-width) solid var(--iata-border-strong); --iata-border-rule-strong: var(--iata-border-width-strong) solid var(--iata-border-strong); /* --- Border-radius --- */ /* `card` and `surface` disagree on purpose. Ten sites round a card at 4px and thirteen round one at 2px; both shipped, so neither is silently changed here. Each now names its own token, which turns the eventual "which is it?" from Figma into a one-line edit instead of 23. See docs/analysis/ui-token-gaps.md. */ --iata-radius-card: 4px; --iata-radius-surface: 2px; --iata-radius-button: 2px; --iata-radius-form: 4px; --iata-radius-badge: 50px; --iata-radius-tooltip: 2px; /* --- Elevation / Shadows --- */ --iata-shadow-card: 0px 4px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 18px 0px rgba(0, 0, 0, 0.08); --iata-shadow-drag: 0px 1px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 4px 0px rgba(0, 0, 0, 0.01); --iata-shadow-subtle: 0px 1px 2px 0px rgba(0, 0, 0, 0.08); /* The lift under a primary button: a blue glow rather than a grey one. The blue is rgb(56 86 235), which is not a stop on the ramp — near --iata-blue-40 but not it — so the literal stays here and nowhere else. */ --iata-shadow-button-primary: 0 1px 2px rgba(56, 86, 235, 0.16), 0 6px 16px rgba(56, 86, 235, 0.24); } /* -------------------------------------------------------------------------- Typography utility classes -------------------------------------------------------------------------- */ .iata-text--thin { font-weight: var(--iata-txt-weight-thin) !important; } .iata-text--regular { font-weight: var(--iata-txt-weight-regular) !important; } .iata-text--medium { font-weight: var(--iata-txt-weight-medium) !important; } .iata-text--bold { font-weight: var(--iata-txt-weight-bold) !important; } .iata-text--xbold { font-weight: var(--iata-txt-weight-xbold) !important; } .iata-text--heading1 { font-size: var(--iata-txt-heading1-size) !important; line-height: var(--iata-txt-heading1-line-height) !important; letter-spacing: var(--iata-txt-heading1-tracking) !important; } .iata-text--heading2 { font-size: var(--iata-txt-heading2-size) !important; line-height: var(--iata-txt-heading2-line-height) !important; } .iata-text--heading3 { font-size: var(--iata-txt-heading3-size) !important; line-height: var(--iata-txt-heading3-line-height) !important; } .iata-text--heading4 { font-size: var(--iata-txt-heading4-size) !important; line-height: var(--iata-txt-heading4-line-height) !important; } .iata-text--xl { font-size: var(--iata-txt-xl-size); line-height: var(--iata-txt-xl-line-height); } .iata-text--l { font-size: var(--iata-txt-l-size); line-height: var(--iata-txt-l-line-height); letter-spacing: var(--iata-txt-l-tracking); } .iata-text--m { font-size: var(--iata-txt-m-size); line-height: var(--iata-txt-m-line-height); letter-spacing: var(--iata-txt-m-tracking); } .iata-text--s { font-size: var(--iata-txt-s-size); line-height: var(--iata-txt-s-line-height); letter-spacing: var(--iata-txt-s-tracking); } /* -------------------------------------------------------------------------- Layout utilities — driven by --iata-gap-* tokens Replace Bootstrap .row / .col-* on migrated pages -------------------------------------------------------------------------- */ .iata-stack { display: flex; flex-direction: column; gap: var(--iata-gap-m); } .iata-row { display: flex; flex-direction: row; gap: var(--iata-gap-m); } .iata-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .iata-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .iata-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } @media (max-width: 768px) { .iata-grid-2, .iata-grid-3, .iata-grid-4 { grid-template-columns: 1fr; } }