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

static/js/modules/ChromeTint.js

@@ -28,8 +28,10 @@
  * Colors:
  *   - HEADER_COLOR (#032F46) is the darker end of the .site-header
  *     gradient.
- *   - FOOTER_COLOR (#102C45) is the sRGB equivalent of the
- *     --color-cwc-blue-02 token used by .site-footer.
+ *   - FOOTER_COLOR (#F26B53) is the orange of the .site-footer
+ *     `border-bottom` (the secondary color token, --color-cwc-orange-01).
+ *     The home indicator area tints to this so the chrome matches
+ *     the last visible color when the footer is in view.
  *
  * "In view" = any pixel of the element overlaps the viewport.
  *
@@ -38,7 +40,7 @@
  */
 
 const HEADER_COLOR = '#032F46';
-const FOOTER_COLOR = '#102C45';
+const FOOTER_COLOR = '#F26B53';
 const THEME_META_NAME = 'theme-color';
 
 function ensureThemeColorMeta() {

styles/base/global.css

@@ -81,9 +81,11 @@ main#maincontent {
  * backgroundColor is updated at runtime by
  * static/js/modules/ChromeTint.js.
  *
- * The elements have no background by default — they only become
- * opaque when the matching element (header / footer) is in view.
- * pointer-events: none ensures they never intercept clicks.
+ * The elements are kept as small as possible (12px tall) so they
+ * stay well within the iOS safe-area insets and don't intrude into
+ * the page content. They have no background by default — they only
+ * become opaque when the matching element (header / footer) is in
+ * view. pointer-events: none ensures they never intercept clicks.
  *
  * (iOS 26 ignores <meta name="theme-color">; this technique is
  *  what replaced it.)
@@ -96,9 +98,10 @@ main#maincontent {
 
 .chrome-tint--top {
     left: 0;
-    min-height: 15px;
+    min-height: 12px;
     top: 4px;
-    /* 4px from top + 15px tall = within the 4px-to-12px sampling window. */
+    /* 4px from top + 12px tall = within the 4px-to-12px iOS 26
+       sampling window for top status bar tinting. */
     width: 90%;
     /* width: 90% > 80% iOS minimum for being sampled. */
 }
@@ -107,6 +110,6 @@ main#maincontent {
     bottom: 3px;
     /* 3px from bottom = within the 3px iOS sampling window. */
     left: 0;
-    min-height: 15px;
+    min-height: 12px;
     width: 90%;
 }

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);
     });
 });