/* ============================================================ AXIS VISA — Core tokens: color + type Premium "travel intelligence" editorial system. Load this first on every Axis Visa surface. ------------------------------------------------------------ Fonts are pulled from Google Fonts in each HTML : Newsreader — serif display & editorial Hanken Grotesk — UI / body / labels IBM Plex Mono — reference numbers, metadata, eyebrows For production/offline, download these TTFs into /fonts and swap the for @font-face. (See README → VISUAL FOUNDATIONS.) ============================================================ */ :root { /* ---- Brand palette — "Signal": modern, bright, cool ---- */ --ink: #14161C; /* primary text + dark surfaces (cool near-black) */ --ink-2: #20242E; /* raised dark surface / secondary ink */ --ink-3: #353B47; --paper: #FFFFFF; /* primary background — bright white */ --paper-2: #F2F4F9; /* sunken / alternate background (cool light) */ --card: #FFFFFF; /* raised card */ --white: #FFFFFF; --line: #E6E9F0; /* hairline border (cool light grey) */ --line-strong:#D3D7E1; /* heavier rule */ --line-ink: rgba(255,255,255,0.14); /* hairline on ink surfaces */ /* ---- Accents — single bright emerald-teal signal -------- */ --stamp: #11C08C; /* primary accent — bright emerald-teal */ --stamp-deep: #0A9067; /* pressed / hover-dark / accent text on white */ --stamp-tint: #DBF6EC; /* wash background */ --atlas: #0A9067; /* success / verified — deeper emerald */ --atlas-tint: #D6F1E3; --ochre: #C0871A; /* highlight / warning */ --ochre-tint: #F6E9C7; /* ---- Semantic text ------------------------------------- */ --fg-1: #14161C; /* primary text */ --fg-2: #4A5060; /* secondary text (cool grey) */ --fg-3: #878D9B; /* muted / meta */ --fg-on-ink-1: #F4F6FB; /* primary text on ink */ --fg-on-ink-2: rgba(244,246,251,0.66); --fg-on-ink-3: rgba(244,246,251,0.40); /* ---- Semantic state ------------------------------------ */ --success: var(--atlas); --success-tint: var(--atlas-tint); --warning: var(--ochre); --warning-tint: var(--ochre-tint); --danger: #E5484D; --danger-tint: #FBE0E1; --info: #2F6FED; --info-tint: #DEE8FD; /* ---- Type families — modern, trustworthy sans system --- */ /* Logo wordmark keeps Newsreader; everything else is sans. */ --font-display: "Plus Jakarta Sans", system-ui, sans-serif; /* headlines */ --font-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* body / UI */ --font-label: "Hanken Grotesk", system-ui, sans-serif; /* eyebrows / data (tabular) */ --font-wordmark: "Newsreader", Georgia, serif; /* logo lockup only */ /* Legacy aliases — keep existing var(--font-*) references valid */ --font-serif: var(--font-display); --font-sans: var(--font-text); --font-mono: var(--font-label); /* ---- Type scale (base 16px) ---------------------------- */ --t-display: 4.25rem; /* 68 — hero editorial */ --t-h1: 3rem; /* 48 */ --t-h2: 2.125rem; /* 34 */ --t-h3: 1.5rem; /* 24 */ --t-h4: 1.125rem; /* 18 */ --t-lead: 1.375rem; /* 22 — standfirst */ --t-body: 1.0625rem; /* 17 */ --t-body-sm: 0.9375rem; /* 15 */ --t-caption: 0.8125rem; /* 13 */ --t-eyebrow: 0.75rem; /* 12 */ --lh-tight: 1.04; --lh-snug: 1.22; --lh-body: 1.6; /* ---- Spacing scale (4px base) -------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---- Radii (crisp / editorial) ------------------------- */ --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-pill: 999px; /* ---- Elevation (used sparingly) ------------------------ */ --shadow-sm: 0 1px 2px rgba(18,23,28,0.06); --shadow-md: 0 8px 24px -12px rgba(18,23,28,0.22); --shadow-lg: 0 18px 50px -16px rgba(18,23,28,0.30); /* ---- Motion -------------------------------------------- */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur: 220ms; } /* ============================================================ SEMANTIC ELEMENT STYLES Opt-in via the .axis scope so tokens never leak into a host UI. ============================================================ */ .axis { font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-1); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Eyebrow / kicker — modern uppercase label (sans, tracked) */ .axis .eyebrow { font-family: var(--font-label); font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stamp-deep); font-variant-numeric: tabular-nums; } .axis h1, .axis .h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.03em; color: var(--fg-1); text-wrap: balance; } .axis .display { font-family: var(--font-display); font-size: var(--t-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.035em; text-wrap: balance; } .axis h2, .axis .h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.025em; color: var(--fg-1); text-wrap: balance; } .axis h3, .axis .h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.015em; color: var(--fg-1); } .axis h4, .axis .h4 { font-family: var(--font-sans); font-size: var(--t-h4); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.005em; color: var(--fg-1); } .axis .lead { font-family: var(--font-text); font-size: var(--t-lead); font-weight: 400; line-height: 1.5; color: var(--fg-2); text-wrap: pretty; } .axis p { text-wrap: pretty; } .axis .small { font-size: var(--t-body-sm); } .axis .caption { font-size: var(--t-caption); color: var(--fg-3); } .axis .meta { font-family: var(--font-label); font-size: var(--t-caption); letter-spacing: 0.01em; color: var(--fg-3); font-variant-numeric: tabular-nums; } .axis a { color: inherit; text-decoration: none; } .axis hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }