Merge pull request 'fix(e2e): assert the brand lockup and touch icon as they are actually built' (#95) from fix/e2e-brand-assertions into main

Reviewed-on: #95

e2e/tests/journeys.spec.ts

@@ -789,9 +789,21 @@ test('the brand asset set is complete and served', async ({ page }) => {
   expect(og.ok()).toBe(true);
   expect(og.headers()['content-type']).toContain('image/png');
 
-  // iOS ignores SVG touch icons, so this must be a real raster.
+  /*
-  const apple = await page.request.get('/apple-icon');
+   * iOS ignores SVG touch icons, so this must be a real raster.
-  expect(apple.ok()).toBe(true);
+   *
+   * Read the href off the page rather than hardcoding a path. The route moved
+   * when the generated app/apple-icon.tsx became a static app/apple-icon.png:
+   * a generated icon is served at /apple-icon, a static one at /apple-icon.png
+   * with a content hash. This test kept asking for /apple-icon and got a 404 —
+   * reporting a missing icon while the icon was present and correctly linked.
+   */
+  const appleLink = page.locator('link[rel="apple-touch-icon"]');
+  await expect(appleLink).toHaveCount(1);
+  const appleHref = await appleLink.getAttribute('href');
+  expect(appleHref).toBeTruthy();
+  const apple = await page.request.get(appleHref!);
+  expect(apple.ok(), `apple touch icon at ${appleHref} should be served`).toBe(true);
   expect(apple.headers()['content-type']).toContain('image/png');
 
   // Android needs a maskable PNG or the install prompt has no icon.
@@ -912,8 +924,22 @@ test('the header carries the schoolcompare lockup', async ({ page }) => {
   // hashed at build time and change on any unrelated edit.
   await expect(home).toHaveText(/^\s*schoolcompare\s*$/);
 
-  const mark = home.locator('svg').first();
+  /*
+   * The mark is raster artwork, not an inline SVG — it has been since the
+   * supplied logo replaced the reconstruction, and this locator went on
+   * looking for an <svg> that no longer exists.
+   *
+   * Assert on naturalWidth rather than visibility: a <picture> whose sources
+   * all 404 still lays out and still passes toBeVisible(), so the weaker
+   * assertion would go green on a broken lockup.
+   */
+  const mark = home.locator('img').first();
   await expect(mark).toBeVisible();
+  const markState = await mark.evaluate((el: HTMLImageElement) => ({
+    loaded: el.complete && el.naturalWidth > 0,
+    src: el.currentSrc,
+  }));
+  expect(markState.loaded, `header mark failed to load: ${markState.src}`).toBe(true);
 });
 
 test('no visible text falls back to the browser default black', async ({ page }) => {

nextjs-app/components/HomeView.module.css

@@ -161,10 +161,22 @@
  * page and out-shouts the H1 and the search box. Dimming it in CSS is the
  * whole treatment, and the scrim then fades it into the dark panel instead of
  * into cream.
+ *
+ * Raising the brightness raises the background under light dark-theme text, so
+ * this value has a contrast floor, not just a taste range. Measured off
+ * rendered pixels, sampling background up to 120px past each line:
+ *
+ *   brightness   title      body
+ *   0.52         11.01:1    6.44:1
+ *   0.75          9.48:1    5.21:1   ← current
+ *
+ * Body text is the binding one. Going much above 0.75 walks it toward the
+ * 4.5:1 floor, and at that point the scrim needs to carry further right rather
+ * than the artwork being dimmed less.
  */
 @media (prefers-color-scheme: dark) {
   .heroArt img {
-    filter: brightness(0.52) saturate(0.72) contrast(1.02);
+    filter: brightness(0.75) saturate(0.72) contrast(1.02);
   }
   .heroPanel::before {
     background: linear-gradient(