/* hub_web components — the web sibling of hub_flutter's widgets.
*
* Authored by hand (unlike hub-tokens.css, which is generated). The rule that makes this a
* design system rather than a stylesheet: EVERY value here is a `--hub-*` token. No raw hex,
* no ad-hoc px for spacing or type. If a value you need has no token, the fix is a token —
* not a literal.
*
* Type follows ADR 0076: five roles, one weight each — title / headline / body / footnote /
* caption. Emphasis is the `headline` role, never a heavier weight on `body`. There is no
* `font-weight: 600` anywhere below, deliberately.
*
* Requires hub-tokens.css first:
*
*
*
* Accessibility is built in rather than added later (ADR 0057): every interactive target is
* ≥44px, focus is always visible, and each component reflows at 320px and survives 200% text
* because it sizes in `rem`/`ch` and wraps rather than shrinking. The catalog page has a
* narrow/large-text panel to check that by eye.
*/
/* ── the brand face ─────────────────────────────────────────────────────────────
*
* Noto Sans, self-hosted. hub-tokens.css has always declared
* `--hub-font-family-sans: "Noto Sans", system-ui, sans-serif`, but nothing ever loaded it —
* so every page of this site has been rendering in whatever `system-ui` happens to be on the
* visitor's machine. The token said one thing and the pixels said another.
*
* SELF-HOSTED, not linked from fonts.gstatic.com. Hub's positioning says "no ads, no
* tracking"; a font to Google hands every visitor's IP and user-agent to a third party
* on every page load, which German courts have found to breach the GDPR. The analytics are
* self-hosted for the same reason. It is also faster — no second DNS lookup, TLS handshake and
* connection to set up for one file.
*
* ONE file, because it is the VARIABLE font: `wght` 100–900 in 35KB covers 500 for
* title/body/footnote/caption and 700 for headline, and anything added later. The static cuts
* already in the repo (packages/asset-templates/fonts, for asset-studio) could not have done
* this — they are 400/600/700/900 with no Medium 500, the weight four of the six roles use.
*
* `swap`, not `optional` or `block`: the text is readable in a fallback face from the first
* paint and re-renders when the font lands. On a public-safety site the words must never wait
* for the typography. Paired with a preload in the document head, the swap is usually
* invisible; on a slow connection it is a reflow, which is the correct thing to trade.
*
* Provenance, licence and the Latin-only limit: packages/hub_web/fonts/README.md.
*/
@font-face {
font-family: "Noto Sans";
src: url("/hub/fonts/NotoSans-latin-var.afc7a910.woff2") format("woff2-variations");
/* The range the FILE covers, not the range the site uses — declaring it honestly lets the
browser interpolate any weight instead of synthesising a fake one. */
font-weight: 100 900;
font-style: normal;
font-display: swap;
/* DERIVED FROM THE FONT'S OWN cmap, not from Google's stylesheet.
The range must describe what the FILE contains. The previous value was copied from
fonts.googleapis.com, which describes the range that SERVICE covers — 387 codepoints
against the 232 actually in this file. Overstating it is worse than understating: the
browser believes the face covers the character, so it does not fall back, and renders
tofu. That was live for 59 printable characters including U+2010 HYPHEN, U+2011
NON-BREAKING HYPHEN, U+2020 DAGGER, U+2030 PER MILLE and both U+2191/U+2193 arrows.
Regenerate with tools/hub-web/font-range.py after changing the font file. */
unicode-range:
U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2002, U+2009, U+200B,
U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044,
U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
/* ── primitives ─────────────────────────────────────────────────────────────── */
.hub-page {
margin: 0;
background: var(--hub-surface-base);
color: var(--hub-content-primary);
font-family: var(--hub-font-family-sans);
font-size: var(--hub-body-regular-size);
font-weight: var(--hub-body-regular-weight);
line-height: 1.55;
/* WCAG 1.4.10 reflow + 1.4.4 resize-text, and the ONE declaration that fixes both.
*
* At 200% text on a 320dp viewport the heading roles are genuinely large — .hub-title computes
* to 56px — while .hub-container leaves a 208px content box. Any word wider than that box has
* no break opportunity under the initial `overflow-wrap: normal`, so it paints straight out of
* the page. The type scale is NOT the bug: at 200% the text is supposed to be that size. The
* missing break opportunity is.
*
* Two distinct failures, both from the same missing property, measured on www.ph.app:
*
* 1. TEXT OVERFLOWING ITS OWN BOX. "government" in the CTA strip measures 330px in a 208px
* box and pushed /accessibility-compliance to 379px of horizontal scroll.
* 2. A BOX SIZED TO AN UNBREAKABLE WORD. `.hub-split` is `grid-template-columns: 1fr`, and
* `1fr` means `minmax(auto, 1fr)` — an AUTO minimum, i.e. min-content. "implementation"
* at 56px is ~420px, so the track became 420px inside a 272px container and
* /public-health scrolled to 444px.
*
* `anywhere` and NOT `break-word`, which was the first fix here and only solved (1).
* The two differ in exactly one respect and it is the one that matters: break-word breaks a
* word when laying out a line but is explicitly ignored when computing min-content, so a grid
* or flex track still sizes itself to the longest unbreakable word. Measured: break-word alone
* left /public-health at 444px. Narrowing the track instead (`minmax(0, 1fr)`) only got to
* 369px, because the same class of overflow recurs in nested lists. `anywhere` took every
* measured page to exactly the viewport width.
*
* The cost of `anywhere` is that it also shrinks intrinsic min-content, so content-sized boxes
* can get narrower. Measured rather than assumed, before and after, on the same pages: at
* 1280px/100% the layout is byte-identical — same button widths, same card widths, same split
* columns — and at 320px/100% nothing moves either. It only acts where the alternative was
* overflowing the viewport, and there it also pulled a 416px button back to 272px.
*
* Why an element-level audit missed all of this: an overflowing text run does not change its
* element's box. The h2's rect stayed a well-behaved 208px while the glyphs sat outside it, so
* every "does any element exceed the viewport" scan came back clean while the page still
* scrolled sideways. Measure TEXT NODES with a Range, not elements.
*
* Set here rather than on the six type roles because overflow-wrap inherits — one declaration
* covers headings, prose, footer links and authored blog bodies alike, including whatever the
* corpus grows next. */
overflow-wrap: anywhere;
}
/* Content measure caps at ~72ch so long-form prose stays readable, and the gutter is a
* spacing token so it scales with the system rather than drifting per page. */
.hub-container {
width: 100%;
max-width: 1140px;
margin-inline: auto;
padding-inline: var(--hub-spacing-xl);
box-sizing: border-box;
}
.hub-section {
padding-block: calc(var(--hub-spacing-xxl) * 2);
}
/* A full-bleed hero owns its own vertical space, so the section must not add any: the section
padding is page background, and above a dark hero it reads as a stray light band across the
top of the site. Keyed on CONTAINING a hero rather than on being first, because "first" is
true today by accident of the route table and would silently stop being true. */
.hub-section:has(> .hub-hero) { padding-block: 0; }
.hub-section--tight { padding-block: var(--hub-spacing-xxl); }
.hub-section--flush-top { padding-block-start: 0; }
.hub-section--flush-bottom { padding-block-end: 0; }
.hub-section--alt { background: var(--hub-surface-elevated); }
/* ── the web type scale ──────────────────────────────────────────────────────
*
* SIZES are web-specific and defined here; WEIGHTS still come from the generated tokens, so
* "one weight per role" (ADR 0076) is unchanged. Only the sizes are re-pitched.
*
* Why this exists, because the obvious shortcut is a trap. hub-tokens.css is generated from
* the Figma source and emits exactly one scale, labelled `typography (mobile)`: title 24 /
* headline 19 / body 19. On a phone that is right. On a marketing page at desktop width it
* gives an h1 only 1.26x body, and a headline the SAME SIZE as the paragraph under it —
* separated by weight alone. That is the flatness, and it is why the site read as undesigned.
*
* The trap: the Figma source does carry per-role "Desktop" variants, and reaching for them makes
* it worse — they are macOS-app-chrome sizes (Title 17, Headline 13, Body 13, Caption 10),
* measured in packages/design_tokens/tokens/textStyles.json. They describe PHapp in a desktop
* WINDOW, not a marketing page. The generator is right to emit only the mobile scale; the web
* surface simply needs its own, which is what packages/hub_web/README.md already anticipated
* ("mobile scale by default; per-platform variants can be added").
*
* Fluid rather than breakpointed: each size interpolates with the viewport, so there is no
* step where the page suddenly re-pitches. Every clamp keeps a `rem` term in its preferred
* value — that is what makes it survive 200% text zoom (WCAG 1.4.4); a pure-vw formula would
* ignore the user's setting entirely.
*/
:root {
/* 320px → 1440px */
--hub-web-display-size: clamp(2.5rem, 1.55rem + 4.20vw, 4rem); /* 40 → 64 */
--hub-web-title-size: clamp(1.75rem, 1.40rem + 1.55vw, 2.5rem); /* 28 → 40 */
--hub-web-headline-size: clamp(1.125rem, 1.06rem + 0.30vw, 1.3125rem); /* 18 → 21 */
--hub-web-body-size: clamp(1.0625rem, 1.03rem + 0.16vw, 1.1875rem); /* 17 → 19 */
--hub-web-footnote-size: 0.9375rem; /* 15 */
--hub-web-caption-size: 0.875rem; /* 14 */
/* Leading tightens as type grows — a 64px headline set at body leading looks unset. */
--hub-web-display-leading: 1.05;
--hub-web-title-leading: 1.15;
--hub-web-headline-leading: 1.3;
--hub-web-body-leading: 1.6;
/* Optical tracking on large sizes only. Systematic, defined once — not the per-use
* `letterSpacing:` ADR 0076 bans. Small text gets none: negative tracking hurts legibility. */
--hub-web-display-tracking: -0.022em;
--hub-web-title-tracking: -0.012em;
/* Line length. Prose past ~68 characters loses the return sweep. */
--hub-web-measure: 68ch;
/* Position of an element within a revealed group; hub-motion.js sets it per element to
* stagger a row of cards. Declared here so it is a real token with a real default rather
* than a name that only exists inside a JS string. */
--hub-reveal-index: 0;
}
/* The type roles. Nothing else sets font-size or font-weight.
*
* `display` is a SIXTH role, and only on web. It exists because a hero is the one place a
* marketing page has to carry presence that no app screen needs — and adding it is what let
* `title` stop doing two jobs badly. It borrows the title weight rather than introducing one. */
.hub-display { font-size: var(--hub-web-display-size); font-weight: var(--hub-title-regular-weight); line-height: var(--hub-web-display-leading); letter-spacing: var(--hub-web-display-tracking); margin: 0; }
.hub-title { font-size: var(--hub-web-title-size); font-weight: var(--hub-title-regular-weight); line-height: var(--hub-web-title-leading); letter-spacing: var(--hub-web-title-tracking); margin: 0; }
.hub-headline { font-size: var(--hub-web-headline-size); font-weight: var(--hub-headline-regular-weight); line-height: var(--hub-web-headline-leading); margin: 0; }
/* Hyphenate the HEADING roles, and only those.
*
* The `overflow-wrap: anywhere` on .hub-page is what stops a heading escaping the viewport at
* 200% text, but on its own it breaks wherever the character happens to land: measured on
* hub.inc/about at 320dp, the display role is 80px in a 272px box and "verified" (289px),
* "information" (456px) and "coordinated" (462px) genuinely cannot fit on a line, so the break
* is mandatory — it rendered as "verifie / d" and "inform / ation", which reads as a typo rather
* than as a continuation. With hyphenation the same line becomes "veri- / fied in- / forma- /
* tion", where the hyphen says what happened.
*
* NOT on .hub-page, for two reasons. It would be a site-wide typographic change to body copy as
* a side effect of an accessibility fix, which is not this rule's decision to make. And body
* copy is where URLs appear — a soft hyphen inserted into a displayed URL is not a typographic
* nicety, it is a URL that reads as though it contains a character it does not. Headings do not
* contain URLs, so scoping to them buys the readability without that risk.
*
* `hyphens` needs the document language to pick break points; the layout sets lang="en" on
* . -webkit- prefix for Safari, which still requires it. */
.hub-display,
.hub-title,
.hub-headline {
-webkit-hyphens: auto;
hyphens: auto;
}
.hub-body { font-size: var(--hub-web-body-size); font-weight: var(--hub-body-regular-weight); line-height: var(--hub-web-body-leading); margin: 0; }
.hub-footnote { font-size: var(--hub-web-footnote-size); font-weight: var(--hub-footnote-regular-weight); line-height: var(--hub-web-body-leading); margin: 0; }
.hub-caption { font-size: var(--hub-web-caption-size); font-weight: var(--hub-caption-regular-weight); line-height: var(--hub-web-body-leading); margin: 0; }
.hub-muted { color: var(--hub-content-secondary); }
/* Links were styled only inside .hub-prose, so every other link on the site fell back to the
browser default #0000EE. That already measured 3.4:1 on a light card; on the dark theme's
elevated surface it is 1.11:1. Styling them is therefore not polish, it is the thing that
makes a dark site legible.
Underline always, never colour alone — the affordance has to survive for anyone who cannot
separate the hue (ADR 0057 name/role/value). */
/* :not(.hub-btn) is load-bearing. `.hub-page a` is specificity (0,1,1) and `.hub-btn--primary`
is (0,1,0), so without the exclusion this rule WINS over the button's own colour and paints
the label in the link colour — on a button whose background IS the link colour. The label
does not go low-contrast, it disappears entirely. Caught on the hero CTA. */
/* Scoped to MAIN. "Underline always, never colour alone" is a rule about links inside running
text, where nothing else marks them; it is not a rule about navigation, where position and
the surrounding landmark already say what the thing is (WCAG 1.4.1 is about information
conveyed by colour, and a nav is not conveying information by colour). Applied globally it
also outranked the chrome's own rules — specificity (0,2,1) against (0,1,0) — and painted
the header nav and the wordmark link-blue and underlined, which is the same specificity trap
that erased the hero button's label one commit earlier. */
.hub-page main a:not(.hub-btn) {
color: var(--hub-content-link);
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* On an ELEVATED surface the link token does not clear AA in dark (#47A3FF on #393E5B is
3.95:1), so links there take the content colour and lean entirely on the underline:
9.99:1 dark, 12.75:1 light. Buttons opt out — they are their own contrast pair. */
/* Every component that paints --hub-surface-elevated, enumerated rather than guessed:
grep the file for surface-elevated and this list is what comes back. Missing one is not a
subtle regression — it is a link at 3.95:1, which is how the trust panel was found. */
.hub-page main .hub-section--alt a:not(.hub-btn),
.hub-page main .hub-card a:not(.hub-btn),
.hub-page main .hub-trust a:not(.hub-btn),
.hub-page main .hub-faq__item a:not(.hub-btn),
.hub-page main .hub-quote a:not(.hub-btn) { color: var(--hub-content-primary); }
.hub-page .hub-skip-link { text-decoration: none; }
/* Focus is never removed, only restyled — the ring is a token so it matches the app. */
.hub-focusable:focus-visible,
.hub-btn:focus-visible,
.hub-card:focus-visible,
a:focus-visible {
outline: 2px solid var(--hub-focus-ring-color);
outline-offset: 2px;
border-radius: var(--hub-spacing-xs);
}
/* ── button ─────────────────────────────────────────────────────────────────── */
/* min-height 44px is the WCAG 2.1 AA target size, expressed once here so no caller has to
* remember it. Buttons wrap rather than truncate: a clipped label at 200% text is the exact
* defect that shipped in the Flutter HubButton. */
.hub-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--hub-spacing-sm);
min-height: 44px;
padding: var(--hub-spacing-md) var(--hub-spacing-xl);
border-radius: var(--hub-spacing-sm);
border: 1px solid transparent;
font-family: inherit;
font-size: var(--hub-web-body-size);
font-weight: var(--hub-body-regular-weight);
line-height: 1.2;
text-decoration: none;
cursor: pointer;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
}
.hub-btn--primary {
background: var(--hub-interactive-primary-surface);
color: var(--hub-interactive-primary-content);
}
.hub-btn--primary:hover { background: var(--hub-interactive-primary-surface-hover); }
.hub-btn--secondary {
background: var(--hub-interactive-secondary-surface);
color: var(--hub-interactive-secondary-content);
border-color: var(--hub-interactive-secondary-border);
}
.hub-btn[aria-disabled="true"] {
background: var(--hub-interactive-primary-surface-disabled);
color: var(--hub-interactive-primary-content-disabled);
pointer-events: none;
}
.hub-btn-group {
display: flex;
flex-wrap: wrap;
gap: var(--hub-spacing-md);
margin-block-start: var(--hub-spacing-xl);
}
/* ── hero ───────────────────────────────────────────────────────────────────── */
.hub-hero {
position: relative;
padding-block: calc(var(--hub-spacing-xxl) * 3);
background: var(--hub-surface-base);
overflow: hidden;
}
.hub-hero__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--hub-spacing-xxl);
align-items: center;
}
@media (min-width: 900px) {
.hub-hero__grid { grid-template-columns: 1fr 1fr; }
.hub-hero--full .hub-hero__grid { grid-template-columns: 1fr; }
}
/* Display type wants a SHORTER measure than body, not the same one: at 64px a 68ch line is
* over a metre of reading on a wide monitor and the eye loses the row. ~22ch gives a headline
* two or three deliberate lines instead of one long ribbon. Both caps are max-widths, so a
* narrow viewport is unaffected and 320px reflow still holds. */
.hub-hero__title { margin-block-end: var(--hub-spacing-lg); max-width: 22ch; }
.hub-hero__sub { color: var(--hub-content-secondary); margin-block-end: var(--hub-spacing-lg); max-width: var(--hub-web-measure); }
/* The hero's authored prose sits beside the sub and needs the same cap. */
.hub-hero__grid > div > .hub-prose { max-width: var(--hub-web-measure); }
.hub-hero__media img,
.hub-hero__media video { width: 100%; height: auto; border-radius: var(--hub-spacing-md); display: block; }
/* Badge carries meaning as TEXT, never colour alone (ADR 0057 name/role/value). */
.hub-badge {
display: inline-block;
padding: var(--hub-spacing-xs) var(--hub-spacing-md);
border-radius: var(--hub-spacing-xl);
background: var(--hub-accent-surface);
color: var(--hub-accent-content);
font-size: var(--hub-caption-regular-size);
font-weight: var(--hub-caption-regular-weight);
margin-block-end: var(--hub-spacing-lg);
}
/* ── cards ──────────────────────────────────────────────────────────────────── */
/* auto-fit + minmax means reflow is automatic: at 320px it is one column with no media query
* and no horizontal scroll. */
.hub-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: var(--hub-spacing-xl);
margin-block-start: var(--hub-spacing-xxl);
padding: 0;
list-style: none;
}
.hub-card {
background: var(--hub-surface-elevated);
border: 1px solid var(--hub-border-subtle);
border-radius: var(--hub-spacing-md);
padding: var(--hub-spacing-xl);
display: flex;
flex-direction: column;
gap: var(--hub-spacing-md);
}
.hub-card__title { color: var(--hub-content-primary); }
.hub-card__body { color: var(--hub-content-secondary); }
.hub-card__media img { width: 100%; height: auto; border-radius: var(--hub-spacing-sm); display: block; }
/* ── split ──────────────────────────────────────────────────────────────────── */
.hub-split {
display: grid;
grid-template-columns: 1fr;
gap: var(--hub-spacing-xxl);
align-items: center;
}
@media (min-width: 900px) {
.hub-split { grid-template-columns: 1fr 1fr; }
/* Media-first reads correctly in RTL too because order is logical, not left/right. */
.hub-split--media-first .hub-split__media { order: -1; }
}
.hub-split__media img { width: 100%; height: auto; border-radius: var(--hub-spacing-md); display: block; }
/* Third-party embeds must reflow like everything else (WCAG 1.4.10).
*
* HubSpot's meetings embed (MeetingsEmbedCode.js, on /feedback-sessions) injects an iframe with
* `min-width: 312px` as an INLINE style, which is 40px wider than the 272px content box at
* 320dp and put the page 16px into horizontal scroll. `!important` because an inline style
* written by someone else's script is the one case a stylesheet cannot otherwise beat, and
* min-width wins over max-width whenever the two disagree — so max-width: 100% alone is inert
* here.
*
* Scoped to iframes rather than applied broadly: this overrides an author's explicit intent,
* and the only intent worth overriding is "this embed may exceed its container".
*
* NOTE: that embed is itself a cutover liability — it loads a script from HubSpot and points at
* a HubSpot-hosted meetings page. This rule makes it reflow today; it does not make it survive
* HubSpot being switched off. */
.hub-prose iframe,
.meetings-iframe-container iframe {
max-width: 100%;
min-width: 0 !important;
}
.hub-split__title { margin-block-end: var(--hub-spacing-lg); }
.hub-split__body { color: var(--hub-content-secondary); }
/* ── stats ──────────────────────────────────────────────────────────────────── */
.hub-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: var(--hub-spacing-xl);
margin: 0;
padding: 0;
}
/* Each figure is a CARD, which is what the live site does and what the port had dropped: a bare
* grid of numbers on the page background reads as one block of text, and the whole point of a
* stats band is that each figure is separately legible. Matches the original's measurements —
* 12px radius, ~24px padding, and the elevated surface (the live markup hardcodes
* rgba(57,62,91), which is exactly --hub-surface-elevated in dark).
*
* The border is not decoration. On the dark theme, elevated against base is a 1.4:1 step, so
* without an edge the card is a suggestion rather than a boundary — the same failure the feed
* cards hit (ADR 0057 / WCAG 1.4.11 non-text contrast). */
.hub-stat {
display: flex;
flex-direction: column;
gap: var(--hub-spacing-xs);
padding: var(--hub-spacing-xl);
background: var(--hub-surface-elevated);
border: 1px solid var(--hub-border-subtle);
border-radius: 12px;
}
/* The figure uses the TABULAR variant so digits align across the row — that is what the
* tabular role exists for, rather than a bespoke font-feature-settings. It also stops the count-up
* from reflowing the card on every frame, since each digit then has the same advance width.
*
* --hub-web-title-size, not --hub-title-regular-size: the app tokens are raw px and cannot
* respond to the user's text-size setting (WCAG 1.4.4). */
.hub-stat__value {
font-size: var(--hub-web-title-size);
font-weight: var(--hub-title-regular-weight);
font-variant-numeric: tabular-nums;
color: var(--hub-content-primary);
}
.hub-stat__label { color: var(--hub-content-secondary); }
/* The qualifier under a figure's label ("Jan 1 - Dec 31, 2025"). It lives INSIDE the