✨ feature: Implement dynamic browser chrome tinting for header and footer visibility

styles/base/global.css

@@ -70,3 +70,37 @@ main#maincontent {
 /* Responsive embeds */
 .embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
 .embed iframe, .embed object, .embed embed, .embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+/*
+ * Bottom chrome tint.
+ *
+ * On devices with `viewport-fit=cover` (iOS Safari), the area behind
+ * the home indicator is part of the page background. The fixed
+ * pseudo-element below fills the `env(safe-area-inset-bottom)` band
+ * and shows the footer color when the body has the `.footer-in-view`
+ * class. That class is toggled by static/js/modules/ChromeTint.js
+ * when the .site-footer is in view.
+ *
+ * No effect on browsers without safe-area-inset-bottom (height resolves
+ * to 0px and the pseudo-element is invisible).
+ */
+body::after {
+    background: var(--color-background);
+    bottom: 0;
+    content: "";
+    height: env(safe-area-inset-bottom);
+    left: 0;
+    pointer-events: none;
+    position: fixed;
+    right: 0;
+    transition: background-color 200ms ease;
+    z-index: 9999;
+}
+
+body.footer-in-view::after {
+    background: var(--color-cwc-blue-02);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    body::after { transition: none; }
+}