feat: add theme assets and tokens

docs/theme-assets.md

@@ -0,0 +1,61 @@
+# Theme assets and Tailwind tokens
+
+Legacy source ref: `origin/main` at `93d55c91102b75174a3b078e707767d602f8a5db`. Files were read with `git show`; the working tree was not switched to the legacy branch.
+
+## Static asset provenance
+
+| New path | Legacy path | SHA-256 | Git blob |
+| --- | --- | --- | --- |
+| `static/css/fonts/WOFF2/VAR/SourceSansVariable-Italic.ttf.woff2` | `SgfDevs/wwwroot/css/fonts/WOFF2/VAR/SourceSansVariable-Italic.ttf.woff2` | `2bfce090130cd2878715edf9479f449d01e3733283d31bc7673fc4e9def59f3f` | `13bcc865e392ae54da7eb4d20e18ed8cd7c78e9b` |
+| `static/css/fonts/WOFF2/VAR/SourceSansVariable-Roman.ttf.woff2` | `SgfDevs/wwwroot/css/fonts/WOFF2/VAR/SourceSansVariable-Roman.ttf.woff2` | `e27286b157603ed26dcc4dda11861c101ee00a27791f49e7d9473772d3579d93` | `b60988fe2e9dfa71c4e6acfc6c99ed9f6ff6b7ca` |
+| `static/images/checkbox_checked.svg` | `SgfDevs/wwwroot/images/checkbox_checked.svg` | `79a2b4bcc5daadf226690c81046bcecf65ecff8e0e59b015c9b63e9e22b91a8e` | `0f7d89b0a76eb5f034bbc912c5772da182dd3fd7` |
+| `static/images/checkbox_unchecked.svg` | `SgfDevs/wwwroot/images/checkbox_unchecked.svg` | `f86e2d82fec93aedb72739e063f13777049e1c7a75dae3123ebb7486768f89ad` | `534cd955fb288a675c2c0ad7c1b05611d01dc7bf` |
+| `static/images/circuit_line.svg` | `SgfDevs/wwwroot/images/circuit_line.svg` | `4c9698986cdd0fe96d82968be5b8591dde68fb8ec1254bacfdaeed9188bd2e15` | `17ab7407c58facf1334a99d27230523d972b3176` |
+| `static/images/circuit_oval.svg` | `SgfDevs/wwwroot/images/circuit_oval.svg` | `651ba148e53f8c30d1dd66fb75ef7bae28e2f08c4c61661ed56c1c5b992ed9c0` | `1ff0a2505a2dec38c0cd1e9f2d3b2c6dae3ad67c` |
+| `static/images/circuitry/circuit_graphic.svg` | `SgfDevs/wwwroot/images/circuitry/circuit_graphic.svg` | `b4005e1b1e13924960c27265891dad4724539a90622cac75df5be6df30076dd3` | `571cb3c7d882be1942096b64798338db2d807b22` |
+| `static/images/circuitry/header.svg` | `SgfDevs/wwwroot/images/circuitry/header.svg` | `88cc974e2c2d53759f96d64bdc00fb7572f1bf2bcd186cc74b82dd461df96e56` | `46cdc79e0a966ad138e745c898fcb075487c3ff9` |
+| `static/images/circuitry/mobile_lines_bottom_left.svg` | `SgfDevs/wwwroot/images/circuitry/mobile_lines_bottom_left.svg` | `327709be4928312387b66a04906bd5953764d66397f8f85a33014feaecec06be` | `b4f8ac1d23ae5b35d14e8748effb3ed31be50fe4` |
+| `static/images/circuitry/mobile_lines_bottom_right.svg` | `SgfDevs/wwwroot/images/circuitry/mobile_lines_bottom_right.svg` | `565a2bb2293efbfb1b1bcca934cae2d88e681a74eec50c398759c529e3c88abe` | `27cd4012f6ac7e31e5c7114066ee2f1c4026a6a7` |
+| `static/images/circuitry/mobile_lines_mid_right.svg` | `SgfDevs/wwwroot/images/circuitry/mobile_lines_mid_right.svg` | `c2061183847bae3eb5f78c7e7a9bde15646e1529d9f427f08b8d348813ae93a1` | `f4ec7be6c85525380f61383d2476811ccbe30d97` |
+| `static/images/circuitry/mobile_lines_top_left.svg` | `SgfDevs/wwwroot/images/circuitry/mobile_lines_top_left.svg` | `ffed1980f4d63e22c0ff8aebed6031a183f7899ad9319ec6804fd0d3b22e6f82` | `d66fdd1965c653a0b87291c8c8896f80c6bd0308` |
+| `static/images/circuitry/sponsor_lower_left.svg` | `SgfDevs/wwwroot/images/circuitry/sponsor_lower_left.svg` | `03bfae86c4ca7b6ea91bdca850a5376a81744969d864a3252871fe822011273f` | `a0ac95815c01481d1af07789939200c72b259db8` |
+| `static/images/circuitry/sponsor_lower_left_2.svg` | `SgfDevs/wwwroot/images/circuitry/sponsor_lower_left_2.svg` | `9a4562405cf5d63e68eecbf9553935f5b6fafdfc08df73ec0a4a908aa85984fd` | `599837a562ac4d2f1fe358fb6d8637274bbeffd1` |
+| `static/images/circuitry/sponsor_lower_right.svg` | `SgfDevs/wwwroot/images/circuitry/sponsor_lower_right.svg` | `71be86b67c8ea89de3dc4dfce53f4f35b8d1bef8abb3a62628d6d872776c8879` | `7143c4209d2e8a27112d099e1d87324fff533571` |
+| `static/images/circuitry/sponsor_upper_left.svg` | `SgfDevs/wwwroot/images/circuitry/sponsor_upper_left.svg` | `7655c4f13e6ac7691b98deb161ca273e0009524c2086bb329648dba8110e4cfb` | `03bdf0184e8384fe251d8d439ef73d3d26d3bf31` |
+| `static/images/circuitry/sponsor_upper_right.svg` | `SgfDevs/wwwroot/images/circuitry/sponsor_upper_right.svg` | `696bf6f94878e0c170759ee845bf2447463997b8a8a389799d9b4f6fbd387841` | `224ff1277d0c3c25479eee58849fe9a0c31f5b93` |
+| `static/images/headlines/dev_night.svg` | `SgfDevs/wwwroot/images/headlines/dev_night.svg` | `1ad1682e0645bdcbc0e204a0ca011cd48b4527d7b6e23bdfff84304094555317` | `9f26c4aac14265e26d636185814750e59ab9e407` |
+| `static/images/headlines/directory.svg` | `SgfDevs/wwwroot/images/headlines/directory.svg` | `01e88e2e3e0c9cba62fcc8bf8b0da27909d36026b896551b8cb19264842bcf74` | `1e824ab689fd76ab3f60efbcb726e07a019e315a` |
+| `static/images/headlines/events.svg` | `SgfDevs/wwwroot/images/headlines/events.svg` | `a30b40479b46b985c3b1558136df0a2d259496acdd9eb55b2ebf4cd16dc96a3e` | `218f0ff5a2c752b31276ca8b4863226d709dfc81` |
+| `static/images/headlines/groups.svg` | `SgfDevs/wwwroot/images/headlines/groups.svg` | `fd0267553d6496b88dcd745ec8a2d6632b293645202beed0ad3517c64fa4969f` | `b406f9588726e6635c1a7d67761d256f530ae768` |
+| `static/images/headlines/history.svg` | `SgfDevs/wwwroot/images/headlines/history.svg` | `6e0c5ac0f33ede148c1bae6f04410179d3bec0de6c09f7157f50b6fd2e29ac53` | `ba76cda9e172a28cb183ff7b927752a8a04b7707` |
+| `static/images/headlines/jobs.svg` | `SgfDevs/wwwroot/images/headlines/jobs.svg` | `f279786ab136903c1a65a6d092a5b61bfc5efbb21c33d2dadb60299bb669b563` | `4d92ad266085fbf7397b8f31ae0b37215d3e57cb` |
+| `static/images/headlines/leadership_bg.svg` | `SgfDevs/wwwroot/images/headlines/leadership_bg.svg` | `f48c92fcc5c6e0d1055584814270841d7e9960e8e6211a218ba7a27a9b97139e` | `15c53ad527124bb6cd1713fdb1c76ebd2c5f70bf` |
+| `static/images/headlines/leadership_bg_3.svg` | `SgfDevs/wwwroot/images/headlines/leadership_bg_3.svg` | `efc077f7438536725d3df0e0e5fd406db6c00e52ee21c3ae1fcd66f5bd5fe2f9` | `f0186834229ab4dc835947ffbe31d108f8418a8c` |
+| `static/images/headlines/sponsor.svg` | `SgfDevs/wwwroot/images/headlines/sponsor.svg` | `92b8787b7e9e6ca41a1d485d7bfade439c344ddfd0daf8e1b3ab505c271ffbb9` | `b9ed91bc1305f2abbd8ce47d3adfbfe7ad0acff9` |
+| `static/images/logo.svg` | `SgfDevs/wwwroot/images/logo.svg` | `5688153712b0c190e999fe99c35cf81ebda65fc819bc4b43f1f64924c52edce0` | `f1a254b7904c212910c4bc945cc79095ac948152` |
+| `static/images/logo_short.svg` | `SgfDevs/wwwroot/images/logo_short.svg` | `412071cfbf8c17742d78a6b65fcdd0fa2c2570ec5005a20f5a02467a4e6ad87a` | `01f3e5d66c9d5ca9ac7839e342a02e93237bd1a1` |
+| `static/images/og.jpg` | `SgfDevs/wwwroot/images/og.jpg` | `dcff27f11ba8fbb91793dcf7206332750b8f36e4deccc46bfa5fe74349f90524` | `52074adaa715dff39cca42b9af103a214cd82d6c` |
+| `static/images/pipey.jpg` | `SgfDevs/wwwroot/images/pipey.jpg` | `5896fa9c0319265a88521e23e54b96aa4e7d7f44d16cb2228c7e01c20c46ee49` | `df956e25c528ab0806824f3648a470dc6d971009` |
+| `static/images/radio_checked.svg` | `SgfDevs/wwwroot/images/radio_checked.svg` | `1b60ed2ac74beb50e148b33da191eea0ae1e524bff08ad8fde5e8ab3258471b1` | `f9b1499d4c87de1d220f6d1902e3244c99a24144` |
+| `static/images/radio_unchecked.svg` | `SgfDevs/wwwroot/images/radio_unchecked.svg` | `a23a5085702a9d09ec16351fc98912bcd5e5d5772f2585144ae5cffc89f0706b` | `ef20a3f971bc24fcf0b3ead5c3221ff19580137c` |
+
+## Font license
+
+`static/licenses/source-sans-variable-OFL-1.1.txt` is the Adobe Source Sans 3.006R SIL Open Font License 1.1 notice fetched from `https://raw.githubusercontent.com/adobe-fonts/source-sans/3.006R/LICENSE.md`; SHA-256 `f698b3361368a7ad7cf77234e58bc7a8502bf9fe0678f8e30a67d593f47206c2`.
+
+The copied Roman and Italic variable WOFF2 files match Adobe's `source-sans-pro-3.006R.zip` release asset at `https://github.com/adobe-fonts/source-sans/releases/tag/3.006R`, paths `WOFF2/VAR/SourceSansVariable-Roman.ttf.woff2` and `WOFF2/VAR/SourceSansVariable-Italic.ttf.woff2`. Only those two legacy Source Sans Variable WOFF2 files were copied. Font Awesome 5 Pro, `fa-light`, and `fa-duotone` files were not copied because their licensing is not verified for redistribution in this frontend layer.
+
+## Tailwind 4 theme tokens
+
+- Colors: `sgf-dark-blue` `#153557`, `sgf-light-blue` `#619ECE`, `sgf-grey`/`sgf-gray` `#e6e6e6`, `sgf-light-grey`/`sgf-light-gray` `#f3f3f3`, `sgf-text` `rgb(37 65 81)`.
+- Font: `font-sans` maps to `Source Sans Variable`, then `Open Sans`, then `sans-serif`.
+- Body base: 18px, weight 400, line-height 1.666, text color `rgb(37 65 81)`.
+- Breakpoint tokens: `sgf-480`, `sgf-700`, `sgf-768`, `sgf-950`, `sgf-1024`, `sgf-1060`, `sgf-1400`, all in px to avoid mixed-unit ordering surprises.
+- Legacy max-width variants: `sgf-max-480`, `sgf-max-700`, `sgf-max-768`, `sgf-max-950`, `sgf-max-1024`, `sgf-max-1060`, `sgf-max-1400`; plus `sgf-min-951` for the legacy greater-than-small-desktop case. The source declares max variants from largest to smallest so narrower max-width utilities win in Tailwind's compiled CSS. `sgf-min-951` sits between `sgf-max-1024` and `sgf-max-950`, matching the legacy `951px` split.
+- Radius and sizing: `radius-sgf-card` 27px, `radius-sgf-button` 25.5px, `radius-sgf-button-tall` 33px, `spacing-sgf-button` 40px, `spacing-sgf-button-tall` 64px.
+
+## Intentional gaps
+
+- No header, footer, menu, page migration, API/auth behavior, CI, Docker, release, or icon-system work belongs to this layer.
+- The root route remains a minimal placeholder. Full site visual parity should not be claimed until the next shell and page layers are implemented and captured against the baseline matrix.
+- Upcoming shell work still needs an icon plan. Do not add Font Awesome Pro webfonts or a public CDN until the project confirms licensing, or replace each needed glyph with a known-licensed SVG.

package.json

@@ -15,7 +15,8 @@
 		"api:generate": "tsx scripts/generate-sgf-api.ts",
 		"api:check": "tsx scripts/generate-sgf-api.ts --check",
 		"api:schema:fetch": "tsx scripts/fetch-sgf-api-schema.ts",
-		"test:api": "svelte-kit sync && tsc --noEmit --project tsconfig.test.json && node --test --import tsx tests/api/*.test.ts"
+		"test:api": "svelte-kit sync && tsc --noEmit --project tsconfig.test.json && node --test --import tsx tests/api/*.test.ts",
+		"test:theme": "node --test --import tsx tests/theme/*.test.ts"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-node": "6.0.0",

src/app.css

@@ -1 +1,74 @@
 @import 'tailwindcss';
+
+@font-face {
+	font-family: 'Source Sans Variable';
+	font-style: normal;
+	font-stretch: normal;
+	font-weight: 200 900;
+	src: url('/css/fonts/WOFF2/VAR/SourceSansVariable-Roman.ttf.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Source Sans Variable';
+	font-style: italic;
+	font-stretch: normal;
+	font-weight: 200 900;
+	src: url('/css/fonts/WOFF2/VAR/SourceSansVariable-Italic.ttf.woff2') format('woff2');
+}
+
+@theme {
+	--font-sans: 'Source Sans Variable', 'Open Sans', sans-serif;
+
+	--color-sgf-dark-blue: #153557;
+	--color-sgf-light-blue: #619ECE;
+	--color-sgf-grey: #e6e6e6;
+	--color-sgf-gray: #e6e6e6;
+	--color-sgf-light-grey: #f3f3f3;
+	--color-sgf-light-gray: #f3f3f3;
+	--color-sgf-text: rgb(37 65 81);
+
+	--breakpoint-sgf-480: 480px;
+	--breakpoint-sgf-700: 700px;
+	--breakpoint-sgf-768: 768px;
+	--breakpoint-sgf-950: 950px;
+	--breakpoint-sgf-1024: 1024px;
+	--breakpoint-sgf-1060: 1060px;
+	--breakpoint-sgf-1400: 1400px;
+
+	--radius-sgf-card: 27px;
+	--radius-sgf-button: 25.5px;
+	--radius-sgf-button-tall: 33px;
+
+	--spacing-sgf-button: 40px;
+	--spacing-sgf-button-tall: 64px;
+
+	--text-sgf-body: 18px;
+	--leading-sgf-body: 1.666;
+}
+
+@custom-variant sgf-max-1400 (@media (width <= 1400px));
+@custom-variant sgf-max-1060 (@media (width <= 1060px));
+@custom-variant sgf-max-1024 (@media (width <= 1024px));
+/* Keep the legacy 951px desktop split between 1024px and 950px max variants. */
+@custom-variant sgf-min-951 (@media (width >= 951px));
+@custom-variant sgf-max-950 (@media (width <= 950px));
+@custom-variant sgf-max-768 (@media (width <= 768px));
+@custom-variant sgf-max-700 (@media (width <= 700px));
+@custom-variant sgf-max-480 (@media (width <= 480px));
+
+@layer base {
+	html {
+		font-family: var(--font-sans);
+		color: var(--color-sgf-text);
+		background: white;
+	}
+
+	body {
+		font-family: var(--font-sans);
+		font-size: var(--text-sgf-body);
+		font-weight: 400;
+		line-height: var(--leading-sgf-body);
+		color: var(--color-sgf-text);
+		background: white;
+	}
+}