🐞 fix: Update footer color for chrome tinting and adjust related tests for iOS compatibility

tests/chrome-tint.spec.js

@@ -24,7 +24,7 @@ import { expect, test } from "@playwright/test";
 const site = "http://community-works-collaborative.test/";
 
 const HEADER_COLOR = "#032F46";
-const FOOTER_COLOR = "#102C45";
+const FOOTER_COLOR = "#F26B53";
 
 test.describe("chrome tint", () => {
     test.use({ viewport: { width: 402, height: 874 } });
@@ -201,8 +201,8 @@ test.describe("chrome tint", () => {
             const el = document.querySelector(".chrome-tint--bottom");
             return el ? el.style.backgroundColor : "";
         });
-        // #102C45 = rgb(16, 44, 69) (with sRGB rounding)
-        expect(bg).toMatch(/^#?102[Cc]45$|^rgb\(\s*16,\s*4[34],\s*6[89]\s*\)$/);
+        // #F26B53 = rgb(242, 107, 83) (no rounding)
+        expect(bg).toMatch(/^#?F26B53$|^rgb\(\s*242,\s*107,\s*83\s*\)$/);
     });
 
     test("bottom tint element clears when footer scrolls out of view", async ({
@@ -254,7 +254,7 @@ test.describe("chrome tint", () => {
             document.querySelector(".chrome-tint--top").style.backgroundColor =
                 "#032F46";
             document.querySelector(".chrome-tint--bottom").style.backgroundColor =
-                "#102C45";
+                "#F26B53";
         });
         const data = await page.evaluate(() => ({
             top: document.querySelector(".chrome-tint--top").style.backgroundColor,
@@ -264,7 +264,7 @@ test.describe("chrome tint", () => {
         // share a value. iOS 26 should be able to sample each region
         // independently.
         expect(data.top).toMatch(/^#?032[Ff]46$|^rgb\(\s*3,\s*4[67],\s*70\s*\)$/);
-        expect(data.bottom).toMatch(/^#?102[Cc]45$|^rgb\(\s*16,\s*4[34],\s*6[89]\s*\)$/);
+        expect(data.bottom).toMatch(/^#?F26B53$|^rgb\(\s*242,\s*107,\s*83\s*\)$/);
         expect(data.top).not.toBe(data.bottom);
     });
 });