diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css index 9df821be..267f2d27 100644 --- a/apps/web/app/globals.css +++ b/apps/web/app/globals.css @@ -12,28 +12,32 @@ src: url("/fonts/Fraunces-Variable.woff2") format("woff2"); } -/* Logotype face used ONLY by the appbar brand mark (Tournamental - * FWC2026 in the top-left). Fraunces was reading as too editorial - * next to the gold ball icon; Archivo Black is a heavy geometric - * sans deliberately designed as a Helvetica-Bold-adjacent face, - * which gives the wordmark the squarish Pantone-card weight Tim - * was after. Two woff2 subsets (latin + latin-ext) total ~33KB - * and only fetch when the `.vt-logotype` rule is matched, so the - * body font stack is unaffected. Tim 2026-06-05. */ +/* Logotype face used ONLY by the appbar + drawer brand mark. + * Fraunces was reading as too editorial next to the gold ball + * icon; Tim 2026-06-05 picked Saira (regular width, variable + * weight axis 100..900) for a finer, modern brand mark. The + * variable woff2 means DevTools weight scrubbing actually works + * (the previous Archivo Black attempt was single-weight, which + * is why scrolling 400 -> 300 -> 200 in DevTools didn't visibly + * lighten the mark). Two subsets (latin + latin-ext) total + * ~58KB and only fetch when the `.vt-appbar-wordmark` or + * `.vt-drawer-brand-name` rule is matched. */ @font-face { - font-family: "Archivo Black"; + font-family: "Saira"; font-style: normal; - font-weight: 400; + font-weight: 100 900; + font-stretch: 100%; font-display: swap; - src: url("/fonts/ArchivoBlack-Latin.woff2") format("woff2"); + src: url("/fonts/Saira-Variable-Latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { - font-family: "Archivo Black"; + font-family: "Saira"; font-style: normal; - font-weight: 400; + font-weight: 100 900; + font-stretch: 100%; font-display: swap; - src: url("/fonts/ArchivoBlack-LatinExt.woff2") format("woff2"); + src: url("/fonts/Saira-Variable-LatinExt.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } diff --git a/apps/web/components/shell/shell.css b/apps/web/components/shell/shell.css index f7ef2e7b..368e5195 100644 --- a/apps/web/components/shell/shell.css +++ b/apps/web/components/shell/shell.css @@ -262,19 +262,18 @@ .vt-appbar-wordmark { color: var(--vt-fg-strong, #ffffff); white-space: nowrap; - /* Tim 2026-06-05: swap the editorial Fraunces face out of the - * appbar wordmark only. Archivo Black is a heavy geometric sans - * designed as a Helvetica-Bold-adjacent face, which sits as a - * logotype next to the gold ball mark in the Pantone tradition. - * Uppercase + tighter tracking + reduced size so the wordmark - * keeps its 56px row budget without overflowing. The body - * editorial Fraunces is untouched; only this rule is overridden. */ - font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif !important; - font-weight: 400 !important; + /* Tim 2026-06-05: Saira variable, light weight (300), regular + * width, sentence case. Variable axis is preserved so DevTools + * weight scrubbing actually moves the rendered weight. The + * `!important` flags beat the editorial `.vt-wordmark` utility + * still applied on the same span; body Fraunces is unaffected. */ + font-family: "Saira", "Helvetica Neue", Arial, sans-serif !important; + font-weight: 300 !important; + font-stretch: 100%; font-variation-settings: normal !important; - text-transform: uppercase; - letter-spacing: 0.02em; - font-size: 0.95rem; + text-transform: none; + letter-spacing: 0.005em; + font-size: 1.1rem; } .vt-appbar-wordmark-sub { /* "FWC2026" subtitle next to the brand wordmark. Reads as a @@ -1159,12 +1158,13 @@ /* Matches the appbar wordmark face so the drawer logo reads as * the same brand mark, not as a second editorial heading. Tim * 2026-06-05. */ - font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif; - font-weight: 400; + font-family: "Saira", "Helvetica Neue", Arial, sans-serif; + font-weight: 300; + font-stretch: 100%; font-variation-settings: normal; - text-transform: uppercase; - letter-spacing: 0.02em; - font-size: 0.95rem; + text-transform: none; + letter-spacing: 0.005em; + font-size: 1.1rem; line-height: 1; } diff --git a/apps/web/public/fonts/ArchivoBlack-Latin.woff2 b/apps/web/public/fonts/ArchivoBlack-Latin.woff2 deleted file mode 100644 index a88b0b53..00000000 Binary files a/apps/web/public/fonts/ArchivoBlack-Latin.woff2 and /dev/null differ diff --git a/apps/web/public/fonts/ArchivoBlack-LatinExt.woff2 b/apps/web/public/fonts/ArchivoBlack-LatinExt.woff2 deleted file mode 100644 index 85cf1745..00000000 Binary files a/apps/web/public/fonts/ArchivoBlack-LatinExt.woff2 and /dev/null differ diff --git a/apps/web/public/fonts/Saira-Variable-Latin.woff2 b/apps/web/public/fonts/Saira-Variable-Latin.woff2 new file mode 100644 index 00000000..7c29d748 Binary files /dev/null and b/apps/web/public/fonts/Saira-Variable-Latin.woff2 differ diff --git a/apps/web/public/fonts/Saira-Variable-LatinExt.woff2 b/apps/web/public/fonts/Saira-Variable-LatinExt.woff2 new file mode 100644 index 00000000..55d1d5c4 Binary files /dev/null and b/apps/web/public/fonts/Saira-Variable-LatinExt.woff2 differ