/* ============================================================================ I-Metrics Asia-Pacific — Design System 2026 "Instrument" — a precision design language for a measurement company. Blends Microsoft Fluent 2 (tokens, elevation ramp, motion curves, 4px spacing) with Apple's web language (typographic hierarchy, generosity of space, restrained chrome, one accent used with discipline). Single file, zero dependencies, no webfonts — the system UI stack gives authentic Segoe UI Variable on Windows and SF Pro on Apple platforms. ========================================================================= */ /* ---------------------------------------------------------------- tokens */ :root { color-scheme: light; /* --- Ink: type + iconography ------------------------------------------ */ --ink-1: #0B1220; /* headings, primary type 18.7:1 */ --ink-2: #39424F; /* body copy 10.2:1 */ --ink-3: #5A6376; /* secondary / meta 6.0:1 */ --ink-4: #6B7488; /* placeholder, captions 4.7:1 */ /* --- Surfaces --------------------------------------------------------- */ --surface-1: #FFFFFF; --surface-2: #F7F8FA; --surface-3: #EFF2F6; --surface-4: #E6EAF0; --surface-inverse: #0B1220; --surface-inverse-2: #151C2C; --header-bg: rgba(255, 255, 255, .82); /* Text that sits on a white surface must stay dark in BOTH themes. */ /* white on the lifted blue is 2.42:1 — the button uses the deep blue in dark mode so the label keeps AA */ --on-accent: #FFFFFF; --on-light: #0B1220; /* --- Lines ------------------------------------------------------------ */ --line-1: #E4E8EE; /* decorative dividers only */ --line-2: #D3D9E2; /* stronger separation (decorative) */ --line-control: #7C8698; /* interactive control borders — 3.67:1, meets SC 1.4.11 */ --line-inverse: rgba(255, 255, 255, 0.14); /* --- Brand: blue. Validated for contrast in both themes -------- Every value below is derived from this one ramp, and every pairing is checked against WCAG 2.2 AA in both light and dark. */ --accent: #1273CE; /* brand blue — graphics only (3.29:1) */ --accent-text: #0B4F8A; /* accessible blue for links/labels (5.37:1) */ --accent-deep: #083C6B; /* pressed / strongest (6.38:1) */ --accent-soft: #EAF3FB; /* wash */ --accent-line: #C3DDF2; /* blue-tinted hairline */ --accent-on-dark: #62ABF5; /* blue on ink bands (8.90:1) */ /* Legacy brand slots resolve to the blue ramp so every existing component picks up the real brand colour. */ --brand-900: #062E52; --brand-800: #083C6B; --brand-700: #0B4F8A; --brand-600: #0E63AC; --brand-500: #1273CE; --brand-200: #C3DDF2; --brand-100: #EAF3FB; --brand-050: #F5FAFE; /* --- Signal: blue is the measurement accent --------------------------- */ --signal: #1273CE; --signal-text: #0B4F8A; --signal-soft: #EAF3FB; --up: #0B7A45; /* expansion (> 50.0) */ --up-soft: #E6F4EC; --down: #B42318; /* contraction (< 50.0) */ --down-soft: #FCEDEB; --flat: #6B7488; /* unchanged */ --flat-soft: #EEF0F4; --warn: #B54708; --warn-soft: #FDF3E7; /* --- Type ------------------------------------------------------------- */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; /* Fluent-derived type ramp, tuned for editorial web use */ --t-display: 600 4.25rem/1.04 var(--font-display); /* 68px */ --t-h1: 600 3.25rem/1.08 var(--font-display); /* 52px */ --t-h2: 600 2.25rem/1.16 var(--font-display); /* 36px */ --t-h3: 600 1.625rem/1.25 var(--font-display); /* 26px */ --t-h4: 600 1.1875rem/1.4 var(--font-ui); /* 19px */ --t-body-lg: 400 1.1875rem/1.6 var(--font-ui); /* 19px */ --t-body: 400 1rem/1.62 var(--font-ui); /* 16px */ --t-sm: 400 0.875rem/1.55 var(--font-ui); /* 14px */ --t-xs: 400 0.78125rem/1.45 var(--font-ui); /* 12.5px */ --t-label: 600 0.75rem/1.3 var(--font-ui); /* 12px, tracked caps */ --track-tight: -0.03em; --track-snug: -0.018em; --track-wide: 0.08em; /* --- Space: 4px base (Fluent ramp) ------------------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 128px; /* --- Radius ----------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* --- Elevation: Fluent shadow ramp, dialled back for a corporate feel -- */ --sh-2: 0 1px 2px rgba(11,18,32,.06), 0 0 2px rgba(11,18,32,.04); --sh-4: 0 2px 4px rgba(11,18,32,.06), 0 0 2px rgba(11,18,32,.04); --sh-8: 0 4px 8px rgba(11,18,32,.07), 0 0 2px rgba(11,18,32,.04); --sh-16: 0 8px 16px rgba(11,18,32,.08), 0 0 2px rgba(11,18,32,.04); --sh-28: 0 14px 28px rgba(11,18,32,.10), 0 0 8px rgba(11,18,32,.04); --sh-64: 0 32px 64px rgba(11,18,32,.14), 0 0 8px rgba(11,18,32,.04); /* --- Motion: Fluent duration + curve tokens --------------------------- */ --d-1: 100ms; --d-2: 200ms; --d-3: 300ms; --d-4: 400ms; --d-5: 500ms; --ease-standard: cubic-bezier(0.33, 0, 0.67, 1); --ease-decel: cubic-bezier(0.10, 0.90, 0.20, 1); --ease-accel: cubic-bezier(0.70, 0.00, 1.00, 0.50); --ease-soft: cubic-bezier(0.25, 0.10, 0.25, 1); /* --- Layout ----------------------------------------------------------- */ --w-page: 1200px; --w-wide: 1400px; --w-prose: 68ch; --gutter: var(--s-6); --header-h: 84px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:hover { --btn-bg: var(--accent-deep); --btn-fg: var(--on-accent); } } :root[data-theme="dark"] .btn:hover { --btn-bg: var(--accent-deep); --btn-fg: var(--on-accent); } /* ── Dark theme ───────────────────────────────────────────────────────── Automatic from the OS, overridable by an explicit choice. ─────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* --- Surfaces --------------------------------------------------------- */ --surface-1: #0D1117; --surface-2: #141A24; --surface-3: #1B2330; --surface-4: #222B3A; --surface-inverse: #05080D; /* the tape and CTA band sit deeper */ --surface-inverse-2: #0A0E15; --header-bg: rgba(13, 17, 23, .82); /* --- Ink -------------------------------------------------------------- */ --ink-1: #F0F3F8; --ink-2: #C2CAD7; --ink-3: #9AA5B6; --ink-4: #7E8A9E; /* --- Lines ------------------------------------------------------------ */ --line-1: #222B39; --line-2: #2F3A4A; --line-control: #5F6B7C; --line-inverse: rgba(255, 255, 255, 0.14); /* --- Brand: the blue lifts so it holds on a dark ground ---------------- */ --accent: #62ABF5; --accent-text: #9CC9F8; --accent-deep: #8FBCF2; --accent-soft: rgba(98, 171, 245, .14); --accent-line: rgba(98, 171, 245, .32); --accent-on-dark: #62ABF5; --brand-900: #D6EAFB; --brand-800: #9CC9F8; --brand-700: #9CC9F8; --brand-600: #62ABF5; --brand-500: #62ABF5; --brand-200: rgba(98, 171, 245, .34); --brand-100: rgba(98, 171, 245, .14); --brand-050: rgba(98, 171, 245, .07); --signal: #62ABF5; --signal-text: #9CC9F8; --signal-soft: rgba(98, 171, 245, .14); /* --- Direction semantics ---------------------------------------------- */ --up: #45C97D; --up-soft: rgba(69, 201, 125, .14); --down: #FF7A6B; --down-soft: rgba(255, 122, 107, .14); --flat: #9AA5B6; --flat-soft: rgba(154, 165, 182, .14); --warn: #E9A93F; --warn-soft: rgba(233, 169, 63, .14); /* --- Elevation: shadows read as depth only against a light ground ------ */ --sh-2: 0 1px 2px rgba(0,0,0,.5); --sh-4: 0 2px 4px rgba(0,0,0,.5); --sh-8: 0 4px 10px rgba(0,0,0,.55); --sh-16: 0 8px 18px rgba(0,0,0,.6); --sh-28: 0 14px 30px rgba(0,0,0,.65); --sh-64: 0 32px 64px rgba(0,0,0,.7); } } :root[data-theme="dark"] { color-scheme: dark; /* --- Surfaces --------------------------------------------------------- */ --surface-1: #0D1117; --surface-2: #141A24; --surface-3: #1B2330; --surface-4: #222B3A; --surface-inverse: #05080D; /* the tape and CTA band sit deeper */ --surface-inverse-2: #0A0E15; --header-bg: rgba(13, 17, 23, .82); /* white on the lifted blue is 2.42:1 — the button uses the deep blue in dark mode so the label keeps AA */ --on-accent: #06243C; /* white on blue in both themes */ --on-light: #0B1220; /* --- Ink -------------------------------------------------------------- */ --ink-1: #F0F3F8; --ink-2: #C2CAD7; --ink-3: #9AA5B6; --ink-4: #7E8A9E; /* --- Lines ------------------------------------------------------------ */ --line-1: #222B39; --line-2: #2F3A4A; --line-control: #5F6B7C; --line-inverse: rgba(255, 255, 255, 0.14); /* --- Brand: the blue lifts so it holds on a dark ground ---------------- */ --accent: #62ABF5; --accent-text: #9CC9F8; --accent-deep: #8FBCF2; --accent-soft: rgba(98, 171, 245, .14); --accent-line: rgba(98, 171, 245, .32); --accent-on-dark: #62ABF5; --brand-900: #D6EAFB; --brand-800: #9CC9F8; --brand-700: #9CC9F8; --brand-600: #62ABF5; --brand-500: #62ABF5; --brand-200: rgba(98, 171, 245, .34); --brand-100: rgba(98, 171, 245, .14); --brand-050: rgba(98, 171, 245, .07); --signal: #62ABF5; --signal-text: #9CC9F8; --signal-soft: rgba(98, 171, 245, .14); /* --- Direction semantics ---------------------------------------------- */ --up: #45C97D; --up-soft: rgba(69, 201, 125, .14); --down: #FF7A6B; --down-soft: rgba(255, 122, 107, .14); --flat: #9AA5B6; --flat-soft: rgba(154, 165, 182, .14); --warn: #E9A93F; --warn-soft: rgba(233, 169, 63, .14); /* --- Elevation: shadows read as depth only against a light ground ------ */ --sh-2: 0 1px 2px rgba(0,0,0,.5); --sh-4: 0 2px 4px rgba(0,0,0,.5); --sh-8: 0 4px 10px rgba(0,0,0,.55); --sh-16: 0 8px 18px rgba(0,0,0,.6); --sh-28: 0 14px 30px rgba(0,0,0,.65); --sh-64: 0 32px 64px rgba(0,0,0,.7); } /* ---------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s-6)); } body { font: var(--t-body); color: var(--ink-2); background: var(--surface-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } a { color: inherit; text-decoration: none; } ul, ol { padding: 0; list-style: none; } table { border-collapse: collapse; width: 100%; } hr { border: 0; border-top: 1px solid var(--line-1); } h1, h2, h3, h4, h5, h6 { color: var(--ink-1); font-family: var(--font-display); } h1 { font: var(--t-h1); letter-spacing: var(--track-tight); } h2 { font: var(--t-h2); letter-spacing: var(--track-snug); } h3 { font: var(--t-h3); letter-spacing: var(--track-snug); } h4 { font: var(--t-h4); } ::selection { background: var(--accent-soft); color: var(--brand-900); } /* Focus indication. A accent ring would be 1.00:1 on a accent button, so the ring is ink by default (18.7:1 on white, 5.7:1 on accent) and white on dark bands. */ :focus-visible { outline: 2px solid var(--ink-1); outline-offset: 2px; border-radius: var(--r-xs); } .section--ink :focus-visible, .cta-band :focus-visible, .pres-head :focus-visible, .topbar :focus-visible, .chart__tip :focus-visible { outline-color: #fff; } /* Numbers must align in columns — non-negotiable for a data company. */ .num, .tnum, time, .post__date, .delta, .catalog-count, .index-tile__value, .track-card__value, .facts__v, .instrument__value, .data-table td, .chart__axis, .chart__tip-val, .chart__tip-delta { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ------------------------------------------------------------- layout */ .wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); } .wrap--wide { max-width: var(--w-wide); } .wrap--narrow { max-width: 880px; } .section { padding-block: var(--s-12); } .section--tight { padding-block: var(--s-10); } .section--loose { padding-block: var(--s-13); } .section--alt { background: var(--surface-2); } .section--ink { background: var(--surface-inverse); color: rgba(255,255,255,.78); } .section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; } .section--rule { border-top: 1px solid var(--line-1); } .stack > * + * { margin-top: var(--s-5); } .stack-sm > * + * { margin-top: var(--s-3); } .stack-lg > * + * { margin-top: var(--s-8); } .grid { display: grid; gap: var(--s-6); } .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-10); } .grid--sidebar-left { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-10); } .row { display: flex; align-items: center; gap: var(--s-4); } .row--between { justify-content: space-between; } .row--wrap { flex-wrap: wrap; } .spacer { flex: 1 1 auto; } /* ------------------------------------------------------------- eyebrow */ .eyebrow { font: var(--t-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: var(--s-3); } .eyebrow--brand { color: var(--accent-text); } .eyebrow::before { content: ""; width: 20px; height: 1.5px; background: var(--accent); flex: none; } .eyebrow--plain::before { display: none; } .eyebrow--plain { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); } .lede { font: var(--t-body-lg); color: var(--ink-2); max-width: 62ch; } .muted { color: var(--ink-3); } .small { font: var(--t-sm); } .tiny { font: var(--t-xs); color: var(--ink-3); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8); margin-bottom: var(--s-9); } .section-head__text { max-width: 640px; } .section-head h2 { margin-top: var(--s-3); } .section-head p { margin-top: var(--s-4); color: var(--ink-3); font: var(--t-body-lg); } /* ------------------------------------------------------------- buttons */ .btn { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 0 var(--s-5); height: 44px; border-radius: var(--r-sm); background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); font: 600 0.9375rem/1 var(--font-ui); letter-spacing: -0.005em; white-space: nowrap; transition: background var(--d-2) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard), transform var(--d-1) var(--ease-standard), border-color var(--d-2) var(--ease-standard); } .btn:hover { --btn-bg: var(--accent-deep); box-shadow: var(--sh-4); } .btn:active { transform: translateY(0.5px); } .btn svg { width: 16px; height: 16px; flex: none; } .btn--secondary { --btn-bg: var(--surface-1); --btn-fg: var(--ink-1); --btn-bd: var(--line-2); } .btn--secondary:hover { --btn-bg: var(--surface-2); --btn-bd: var(--ink-4); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--accent-text); } .btn--ghost:hover { --btn-bg: var(--accent-soft); box-shadow: none; } .btn--ink { --btn-bg: var(--ink-1); --btn-fg: var(--surface-1); } .btn--ink:hover { --btn-bg: var(--ink-2); } .btn--on-ink { --btn-bg: #fff; --btn-fg: var(--on-light); } .btn--on-ink:hover { --btn-bg: var(--surface-3); } .btn--sm { height: 36px; padding: 0 var(--s-4); font-size: 0.875rem; } .btn--lg { height: 52px; padding: 0 var(--s-7); font-size: 1rem; } .btn--block { width: 100%; } /* A text link with a quiet underline that reveals on hover — Apple-ish */ .link { color: var(--accent-text); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid transparent; transition: border-color var(--d-2) var(--ease-standard), color var(--d-2) var(--ease-standard); } .link:hover { border-bottom-color: currentColor; } .link svg { width: 15px; height: 15px; transition: transform var(--d-2) var(--ease-decel); } .link:hover svg { transform: translateX(3px); } /* -------------------------------------------------------------- header */ .header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: var(--header-bg); /* No backdrop-filter on the header: it makes this element the containing block for position:fixed descendants, which pinned the mobile drawer to the header's 128px height instead of the viewport. Decorative only. */ border-bottom: 1px solid var(--line-1); } .header__inner { /* Three equal-ish tracks with the nav in the middle. The side tracks are minmax(0,1fr) so they cannot push the centre off — but that only holds if the actions block FITS its track, so the secondary button stands down before the row runs out of room. Absolute centring was tried and overlapped the actions; the grid reserves every column. */ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-5); height: var(--header-h); width: 100%; max-width: none; margin: 0; padding-inline: var(--gutter); } .header__inner > .brand { justify-self: start; min-width: 0; } .header__inner > .nav { justify-self: center; margin-left: 0; } .header__inner > .header__cta { justify-self: end; min-width: 0; } .brand { display: flex; align-items: center; gap: var(--s-3); flex: none; } .brand__name { font: 600 1rem/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--ink-1); } .brand__sub { display: block; font: 400 0.6875rem/1.3 var(--font-ui); color: var(--ink-3); letter-spacing: 0.02em; } .nav { display: flex; align-items: stretch; gap: 2px; flex-wrap: nowrap; } .nav__item { position: relative; } .nav__item:hover, .nav__item:focus-within { z-index: 61; } .nav__link { /* stacked: icon, then the label, then the caret — the format the nav is specified in. Every item is the same height so the row reads as one band. */ display: grid; grid-template-rows: 22px auto 10px; justify-items: center; align-content: center; gap: 5px; padding: 8px 14px 7px; border-radius: var(--r-sm); font: 500 0.875rem/1.1 var(--font-ui); color: var(--ink-2); white-space: nowrap; transition: background var(--d-2) var(--ease-standard), color var(--d-2) var(--ease-standard); } .nav__link > span { white-space: nowrap; } /* an item without a dropdown still reserves the caret row, so all align */ .nav__link:not(:has(.nav__caret))::after { content: ''; display: block; height: 10px; } .nav__link:hover { background: var(--surface-3); color: var(--ink-1); } .nav__link[aria-current="page"] { color: var(--accent-text); font-weight: 600; } .nav__caret { width: 11px; height: 11px; opacity: .55; transition: transform var(--d-2) var(--ease-standard); } .nav__item:hover .nav__caret { transform: rotate(180deg); } /* ------------------------------------------------------------ mega menu Compact and in the header's own language: same icon registry, same accent-on-hover, same type scale. The panel is sized to its content rather than to a fixed 520px, and each level-1 item carries an icon so the panel reads as a continuation of the nav rather than a list of words. */ .mega-wrap { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 60; padding-top: 10px; /* a transparent bridge, not a dead gap */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s var(--ease-decel), visibility .16s, transform .16s var(--ease-decel); } .nav__item:hover > .mega-wrap, .nav__item:focus-within > .mega-wrap { opacity: 1; visibility: visible; pointer-events: auto; } .mega { position: static; /* Rows flow downward in two readable columns. `grid-auto-flow: column` with a fixed row count produced 87px-wide columns and a 458px-tall panel. */ display: grid; /* 216px holds "Our Business Philosophy" on one line at .875rem; 180px wrapped every two-word label. minmax(max-content, 1fr) lets a long label widen its own column instead of breaking. */ grid-template-columns: repeat(2, minmax(max-content, 1fr)); gap: 2px var(--s-4); min-width: 0; max-width: min(620px, calc(100vw - 48px)); padding: var(--s-3); background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); box-shadow: var(--sh-28); list-style: none; margin: 0; } /* the panel's own title row, so it says what it belongs to */ .mega__head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); padding: var(--s-2) var(--s-3) var(--s-3); margin-bottom: var(--s-2); border-bottom: 1px solid var(--line-1); } .mega__eyebrow { font: 600 .6875rem/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); } .mega__all { display: inline-flex; align-items: center; gap: 5px; font: 500 .8125rem/1 var(--font-ui); color: var(--accent-text); text-decoration: none; } .mega__all:hover { text-decoration: underline; text-underline-offset: 3px; } .mega__all svg { width: 11px; height: 11px; } .mega__item { position: relative; } .mega__item > a { display: flex; align-items: center; gap: var(--s-3); padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font: 500 .875rem/1.35 var(--font-ui); transition: background .14s var(--ease-standard), color .14s; } .mega__item > a:hover, .mega__item > a:focus-visible { background: var(--accent-soft); color: var(--accent-text); } /* the same icon treatment as the nav link, one step down */ .mega__icon { flex: none; width: 17px; height: 17px; color: var(--ink-4); transition: color .14s; } .mega__item > a:hover .mega__icon { color: var(--accent-text); } .mega__dot { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); margin-inline: 6.5px; transition: background .14s; } .mega__item > a:hover .mega__dot { background: var(--accent); } .mega__label { flex: 1; min-width: 0; white-space: nowrap; } .mega__desc { display: block; font-weight: 400; font-size: .78rem; color: var(--ink-4); margin-top: 1px; white-space: normal; } .mega__arrow { flex: none; width: 11px; height: 11px; color: var(--ink-4); } .mega__group-title { font: var(--t-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-3); padding: var(--s-2) var(--s-3) var(--s-1); } .mega a { display: block; padding: 9px var(--s-3); border-radius: var(--r-sm); font: 500 0.9375rem/1.35 var(--font-ui); color: var(--ink-2); transition: background var(--d-1) var(--ease-standard), color var(--d-1) var(--ease-standard); } .mega a:hover { background: var(--accent-soft); color: var(--accent-text); } .mega a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mega a span { display: block; font: var(--t-xs); color: var(--ink-3); font-weight: 400; margin-top: 2px; } .header__cta { margin-left: var(--s-5); display: flex; align-items: center; gap: var(--s-2); flex: none; } /* Mobile menu trigger — hidden until the primary nav collapses. */ .nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-sm); align-items: center; justify-content: center; border: 1px solid var(--line-1); background: var(--surface-1); margin-left: var(--s-2); transition: background var(--d-2) var(--ease-standard), border-color var(--d-2) var(--ease-standard); } .nav-toggle:hover { background: var(--surface-2); border-color: var(--line-2); } .nav-toggle__box { display: block; width: 18px; height: 12px; position: relative; } .nav-toggle__box span { position: absolute; left: 0; width: 100%; height: 1.75px; border-radius: 2px; background: var(--ink-1); transition: transform var(--d-3) var(--ease-decel), opacity var(--d-2) var(--ease-standard); } .nav-toggle__box span:nth-child(1) { top: 0; } .nav-toggle__box span:nth-child(2) { top: 5px; } .nav-toggle__box span:nth-child(3) { top: 10px; } .nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .nav-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(11, 18, 32, .42); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--d-3) var(--ease-standard), visibility var(--d-3); } .nav-scrim.is-on { opacity: 1; visibility: visible; } body.nav-open { overflow: hidden; } /* Utility bar above the header — carries what shipped and where we are. The Subscriber login and Send us an RFQ links that used to sit here duplicated the header's own buttons three lines below, so they are gone. */ .topbar { background: var(--surface-inverse); color: rgba(255,255,255,.74); font: 500 .8125rem/1 var(--font-ui); padding-inline: var(--s-5); } .topbar__inner { display: flex; align-items: center; gap: var(--s-4); min-height: 34px; padding-block: 0; flex-wrap: nowrap; } .topbar__release { display: inline-flex; align-items: center; gap: var(--s-3); white-space: nowrap; } .topbar__release .pulse__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--accent); box-shadow: 0 0 0 3px rgba(18,115,206,.25); animation: topbar-pulse 2.4s var(--ease-standard) infinite; } @keyframes topbar-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(18,115,206,.25); } 50% { box-shadow: 0 0 0 6px rgba(18,115,206,.08); } } .topbar__label { font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.5); } .topbar__release strong { font-weight: 600; color: #fff; } .topbar__sep { width: 1px; height: 13px; background: rgba(255,255,255,.2); flex: none; } .topbar__place { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.7); white-space: nowrap; } .topbar__place svg { opacity: .7; flex: none; } @media (prefers-reduced-motion: reduce) { .topbar__release .pulse__dot { animation: none; } } @media (max-width: 620px) { .topbar__label, .topbar__sep { display: none; } .topbar__inner { min-height: 30px; font-size: .75rem; gap: var(--s-3); } } /* ---------------------------------------------------------------- hero */ .hero { padding: var(--s-13) 0 var(--s-12); border-bottom: 1px solid var(--line-1); } .hero--tight { padding-block: var(--s-11) var(--s-10); } .hero__grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: var(--s-12); align-items: center; } .hero h1 { font: var(--t-display); letter-spacing: var(--track-tight); } .hero__lede { font: var(--t-body-lg); color: var(--ink-2); margin-top: var(--s-6); max-width: 54ch; } .hero__actions { display: flex; gap: var(--s-3); margin-top: var(--s-8); flex-wrap: wrap; } .hero--page { padding-block: var(--s-11) var(--s-10); background: var(--surface-2); border-bottom: 1px solid var(--line-1); } .hero--page h1 { font: var(--t-h1); letter-spacing: var(--track-tight); margin-top: var(--s-4); max-width: 20ch; } .hero--page .lede { margin-top: var(--s-5); } .hero--page .eyebrow { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; font-weight: 600; } /* --------------------------------------------------- index tiles (signature) */ /* The signature component: a PMI/index reading. Value, movement, period. */ .index-tile { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--s-5); transition: border-color var(--d-2) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard); } .index-tile:hover { border-color: var(--line-2); box-shadow: var(--sh-8); } .index-tile__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); } .index-tile__name { font: 600 0.9375rem/1.3 var(--font-ui); color: var(--ink-1); } .index-tile__period { font: var(--t-xs); color: var(--ink-3); } .index-tile__value { font: 600 2.75rem/1 var(--font-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; margin-top: var(--s-4); color: var(--ink-1); } .index-tile__value--sm { font-size: 2rem; } .index-tile__unit { font-size: 0.9rem; color: var(--ink-3); font-weight: 500; margin-left: 4px; letter-spacing: 0; } .delta { display: inline-flex; align-items: center; gap: 4px; font: 600 0.8125rem/1 var(--font-ui); font-variant-numeric: tabular-nums; } .delta svg { width: 13px; height: 13px; } .delta--up { color: var(--up); } .delta--down { color: var(--down); } .delta--flat { color: var(--flat); } /* The 50.0 line is the PMI expansion/contraction threshold — show it. */ .spark { margin-top: var(--s-4); } .spark svg { width: 100%; height: 40px; overflow: visible; } .spark__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .spark__line--up { stroke: var(--up); } .spark__line--down { stroke: var(--down); } .spark__threshold { stroke: var(--ink-2); stroke-width: 1.25; stroke-dasharray: 5 4; } .spark__area { opacity: .10; } .spark__area--up { fill: var(--up); } .spark__area--down { fill: var(--down); } /* status pill */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--r-full); font: 600 0.75rem/1.4 var(--font-ui); } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .pill--up { background: var(--up-soft); color: var(--up); } .pill--down { background: var(--down-soft); color: var(--down); } .pill--flat { background: var(--flat-soft); color: var(--ink-3); } .pill--brand { background: var(--brand-100); color: var(--brand-700); } .pill--signal { background: var(--signal-soft); color: var(--signal-text); } .pill--warn { background: var(--warn-soft); color: var(--warn); } /* --------------------------------------------------------------- cards */ .card { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--d-2) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard), transform var(--d-2) var(--ease-decel); } .card:hover { border-color: var(--line-2); box-shadow: var(--sh-16); transform: translateY(-2px); } .card__media { aspect-ratio: 16 / 9; background: var(--surface-3); overflow: hidden; position: relative; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-5) var(--ease-decel); } .card:hover .card__media img { transform: scale(1.03); } .card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; } .card__title { font: var(--t-h4); color: var(--ink-1); letter-spacing: -0.012em; } .card__text { font: var(--t-sm); color: var(--ink-3); } .card__foot { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line-1); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .card__meta { display: flex; align-items: center; gap: var(--s-3); font: var(--t-xs); color: var(--ink-3); } .card--flat { border-radius: var(--r-md); } .card--flat:hover { transform: none; } .card--row { flex-direction: row; align-items: stretch; } .card--row .card__media { aspect-ratio: auto; width: 260px; flex: none; } /* article list item — text-led, no image, editorial */ .post { display: grid; grid-template-columns: 128px minmax(0,1fr); gap: var(--s-6); padding-block: var(--s-6); border-bottom: 1px solid var(--line-1); } .post:first-child { border-top: 1px solid var(--line-1); } .post__date { font: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 3px; } .post__title { font: var(--t-h4); color: var(--ink-1); letter-spacing: -0.012em; transition: color var(--d-2) var(--ease-standard); } .post:hover .post__title { color: var(--brand-700); } .post__excerpt { font: var(--t-sm); color: var(--ink-3); margin-top: var(--s-2); max-width: 68ch; } .post__tags { display: flex; gap: var(--s-2); margin-top: var(--s-3); } /* ------------------------------------------------------- reading layout Long-form pages need their own rhythm: a measured column, generous leading, real space between paragraphs, and emphasis that is emphasis rather than a wall of bold. The imported articles carried 15 runs across 10 paragraphs, which is why the page read as solid bold. */ .article-body { max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; color: var(--ink-2); } .article-body > * + * { margin-top: 1.35em; } /* explicit, because the paragraphs arrive inside whatever wrapper the import produced and a combinator alone left them touching (measured 0px) */ .article-body p { margin: 0 0 1.35em; } .article-body p:last-child { margin-bottom: 0; } .article-body > p + p, .article-body div > p + p { margin-top: 1.35em; } .article-body h2 { font: var(--t-h3); color: var(--ink-1); margin-top: 2.1em; margin-bottom: .6em; letter-spacing: -.02em; } .article-body h3 { font: var(--t-h4); color: var(--ink-1); margin-top: 1.8em; margin-bottom: .5em; } /* only the opening sentence keeps weight; the rest returns to body colour */ .article-body strong { font-weight: 600; color: var(--ink-1); } .article-body p strong:only-child { font-weight: 600; } .article-body em { font-style: italic; color: var(--ink-2); } .article-body ul, .article-body ol { padding-left: 1.4em; } .article-body li + li { margin-top: .5em; } .article-body blockquote { margin: 1.8em 0; padding: var(--s-5) var(--s-6); border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--ink-1); font-size: 1.0625rem; } .article-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } .article-body img { border-radius: var(--r-md); margin: 1.6em 0; } .article-body > p:first-of-type { font-size: 1.1875rem; line-height: 1.7; color: var(--ink-1); } /* the dateline that opens a press release is a label, not a lede */ .article-body > p:first-of-type strong:first-child { font-weight: 600; } /* a lede that got cut mid-word by the import */ .lede { text-wrap: pretty; } .entry-content, .prose, .article-body { text-wrap: pretty; } /* -------------------------------------------------------------- prose */ /* Archive images arrive at wildly different natural sizes — one partner logo renders 811px wide beside another at 688px, overflowing the 68ch prose column. Box them all so a row reads as a set. */ /* --------------------------------------------------- content images One blanket size flattened everything — article photography shrank to a logo box. Sizing is per CONTEXT instead: .article-body editorial photos → full column width .logo-grid/.logo-cell brand marks → contained in an identical plate .prose img archive art → capped, but generously Archive images arrive at wildly different natural sizes and aspect ratios, so a run of them still needs a common box — that is what .logo-grid is for. */ /* 1. editorial photography: fill the measure, keep the aspect ratio */ .article-body img, .single-post .entry-content img { display: block; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; object-fit: cover; margin: 1.8em 0; border-radius: var(--r-lg); background: var(--surface-3); } /* 2. a brand mark inside a logo grid is contained in an identical plate */ .logo-cell img { max-height: 52px !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain; margin: 0; border: 0; border-radius: 0; padding: 0; background: transparent; } /* 3. anything else in a prose body: generous cap, not a thumbnail */ .prose img, .entry-content img, .wrap .prose img { display: block; width: auto !important; height: auto !important; max-width: min(100%, 520px) !important; max-height: 340px !important; object-fit: contain; margin: var(--s-6) 0; border-radius: var(--r-lg); background: transparent; border: 0; padding: 0; } /* a mark that is alone in its paragraph is a lockup, not body art */ .prose > p > img:only-child, .entry-content > p > img:only-child { max-height: 96px !important; background: #fff; border: 1px solid var(--line-1); border-radius: var(--r-md); padding: var(--s-5); } .prose img[src*="AVANZA"], .prose img[src*="BonAuxilium"] { background: transparent; border: 0; padding: 0; } /* 4. portraits always crop square */ .person-card__photo, .person__photo, .avatar { object-fit: cover; } /* Pull stat inside prose */ .callout { background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r-md); padding: var(--s-7); margin-block: var(--s-8); } .callout__label { font: 600 0.875rem/1.4 var(--font-ui); color: var(--ink-1); } .callout p { margin-top: var(--s-3); font: var(--t-body); color: var(--ink-2); } /* data table */ .data-table { font: var(--t-sm); } .data-table caption { text-align: left; font: 600 0.875rem/1.4 var(--font-ui); color: var(--ink-2); padding-bottom: var(--s-3); } .data-table th, .data-table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-1); text-align: left; } .data-table th { font: 600 0.8125rem/1.4 var(--font-ui); color: var(--ink-3); background: var(--surface-2); } .data-table td.num, .data-table th.num { text-align: right; } .data-table tbody tr:hover { background: var(--surface-2); } /* -------------------------------------------------------- testimonials */ .quote-card { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--s-7); display: flex; flex-direction: column; gap: var(--s-5); } .quote-card__text { font: 500 1.0625rem/1.6 var(--font-ui); color: var(--ink-1); } .quote-card__who { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; } .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); flex: none; display: grid; place-items: center; font: 600 0.8125rem/1 var(--font-ui); color: var(--ink-3); } .quote-card__name { font: 600 0.875rem/1.3 var(--font-ui); color: var(--ink-1); } .quote-card__role { font: var(--t-xs); color: var(--ink-3); } /* --------------------------------------------------------------- forms */ .field { display: flex; flex-direction: column; gap: var(--s-2); } .field__label { font: 600 0.875rem/1.3 var(--font-ui); color: var(--ink-1); } .field__hint { font: var(--t-xs); color: var(--ink-3); } .field__req { color: var(--down); } .input, .select, .textarea { width: 100%; padding: 0 var(--s-4); height: 44px; background: var(--surface-1); border: 1px solid var(--line-control); border-radius: var(--r-sm); color: var(--ink-1); font: var(--t-body); transition: border-color var(--d-2) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard); } .textarea { padding: var(--s-3) var(--s-4); height: auto; min-height: 132px; resize: vertical; line-height: 1.6; } .input::placeholder, .textarea::placeholder { color: var(--ink-4); } .input:hover, .select:hover, .textarea:hover { border-color: var(--ink-4); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent-text); /* 5.37:1 — carries the state */ box-shadow: 0 0 0 3px rgba(18, 115, 206, .22); } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%236B7488' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-4) center; padding-right: var(--s-9); } .check { display: flex; gap: var(--s-3); align-items: flex-start; } .check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-700); flex: none; } .check label { font: var(--t-sm); color: var(--ink-2); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-5); } .form-grid .span-2 { grid-column: 1 / -1; } .form-card { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--s-8); } /* --------------------------------------------------------- breadcrumbs */ .crumbs { display: flex; align-items: center; gap: var(--s-2); font: var(--t-xs); color: var(--ink-3); flex-wrap: wrap; } .crumbs a { color: var(--ink-3); transition: color var(--d-2) var(--ease-standard); } .crumbs a:hover { color: var(--brand-700); } .crumbs__sep { color: var(--ink-4); } .crumbs [aria-current] { color: var(--ink-1); font-weight: 500; } /* ------------------------------------------------------------- sidebar */ .side-nav { position: sticky; top: calc(var(--header-h) + var(--s-6)); } .side-nav__title { font: var(--t-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-4); } .side-nav a { display: block; padding: 9px var(--s-4); border-left: 2px solid var(--line-1); font: 500 0.9375rem/1.4 var(--font-ui); color: var(--ink-3); transition: color var(--d-2) var(--ease-standard), border-color var(--d-2) var(--ease-standard), background var(--d-2) var(--ease-standard); } .side-nav a:hover { color: var(--ink-1); background: var(--surface-2); } .side-nav a[aria-current="page"] { color: var(--accent-text); border-left-color: var(--accent); font-weight: 600; background: var(--accent-soft); } .side-card { background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--s-6); } .side-card h3 { font: var(--t-h4); } .side-card p { font: var(--t-sm); color: var(--ink-3); margin-top: var(--s-2); } /* facts list (key/value) */ .facts { display: grid; gap: 0; } .facts__row { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: var(--s-4); padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--line-1); } .facts__row:first-child { border-top: 1px solid var(--line-1); } .facts__k { font: 600 0.8125rem/1.5 var(--font-ui); color: var(--ink-3); } .facts__v { font: var(--t-sm); color: var(--ink-1); } /* --------------------------------------------------------------- tabs */ .tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line-1); overflow-x: auto; } .tab { padding: var(--s-4) var(--s-4) calc(var(--s-4) - 1px); font: 500 0.9375rem/1 var(--font-ui); color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--d-2) var(--ease-standard), border-color var(--d-2) var(--ease-standard); } .tab:hover { color: var(--ink-1); } .tab[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 600; } /* filter chips */ .chips { display: flex; gap: var(--s-2); flex-wrap: wrap; } .chip { padding: 6px 14px; border-radius: var(--r-full); border: 1px solid var(--line-control); background: var(--surface-1); font: 500 0.8125rem/1.4 var(--font-ui); color: var(--ink-2); transition: all var(--d-2) var(--ease-standard); } .chip:hover { border-color: var(--ink-4); color: var(--ink-1); } .chip[aria-pressed="true"] { background: var(--ink-1); border-color: var(--ink-1); color: var(--surface-1); } /* --------------------------------------------------------------- steps */ .steps { counter-reset: step; display: grid; gap: var(--s-7); } .step { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: var(--s-5); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font: 600 0.8125rem/32px var(--font-mono); color: var(--accent-text); background: var(--accent-soft); width: 32px; height: 32px; border-radius: 50%; text-align: center; } .step__title { font: var(--t-h4); } .step__text { font: var(--t-sm); color: var(--ink-3); margin-top: var(--s-2); } /* ---------------------------------------------------------------- CTA */ .cta-band { background: var(--surface-inverse); border-radius: var(--r-xl); padding: var(--s-11) var(--s-10); display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: var(--s-10); align-items: center; position: relative; overflow: hidden; } .cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 88% 12%, rgba(18, 115, 206, .26), transparent 58%); pointer-events: none; } .cta-band h2 { color: #fff; max-width: 22ch; } .cta-band p { color: rgba(255,255,255,.72); margin-top: var(--s-4); max-width: 52ch; font: var(--t-body-lg); } .cta-band__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; position: relative; z-index: 1; } /* -------------------------------------------------------------- footer */ .footer { background: var(--surface-2); border-top: 1px solid var(--line-1); padding-block: var(--s-11) var(--s-8); } /* balance: the brand column carried 1.6fr against three 1fr columns and left ~190px of dead space on the right. 1.35fr with a slightly wider gap reads evenly without crowding the link lists. */ .footer__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: var(--s-9) var(--s-11); align-items: start; } .footer__label { font: 600 0.8125rem/1.4 var(--font-ui); color: var(--ink-1); margin-bottom: var(--s-4); } .footer a { font: var(--t-sm); color: var(--ink-2); display: block; padding-block: 5px; transition: color var(--d-2) var(--ease-standard); } .footer a:hover { color: var(--brand-700); } .footer__bottom { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--line-1); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; font: var(--t-xs); color: var(--ink-3); } .footer__legal { display: flex; gap: var(--s-5); flex-wrap: wrap; } .footer__social { display: flex; gap: var(--s-3); } .footer__social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line-1); background: var(--surface-1); padding: 0; } .footer__social a:hover { border-color: var(--ink-4); } .footer__social svg { width: 16px; height: 16px; } /* ---------------------------------------------------------- pagination */ .pager { display: flex; align-items: center; gap: var(--s-2); justify-content: center; padding-top: var(--s-9); } .pager a, .pager span { min-width: 38px; height: 38px; padding-inline: 10px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line-1); background: var(--surface-1); font: 500 0.875rem/1 var(--font-ui); color: var(--ink-2); transition: all var(--d-2) var(--ease-standard); } .pager a:hover { border-color: var(--ink-4); color: var(--ink-1); } .pager [aria-current="page"] { background: var(--ink-1); border-color: var(--ink-1); color: var(--surface-1); font-weight: 600; } .pager .is-disabled { opacity: .4; } /* -------------------------------------------------------------- misc */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink-1); color: var(--surface-1); padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0; font: 600 0.875rem/1 var(--font-ui); } .skip-link:focus { left: 0; } .divider { height: 1px; background: var(--line-1); } .kbd { font: 500 0.75rem/1 var(--font-mono); background: var(--surface-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: var(--r-xs); padding: 3px 6px; color: var(--ink-2); } /* Scroll-reveal (progressive enhancement; content is visible without JS) */ .reveal { opacity: 1; } .js .reveal { opacity: 0; transform: translateY(14px); } .js .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--d-5) var(--ease-decel), transform var(--d-5) var(--ease-decel); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; } } /* ------------------------------------------------ the instrument (homepage) These lived in index.html's inline