feat(navbar): match head shows the other gym's brand, centred logo on CrossFit, mobile band

The match head is painted in the other gym's colours with a strip in this site's accent; below 992px it is a slashed band at the bottom of the open menu (menu height from the real header height). The CrossFit page gets the centred logo crossfade, the hero logo has a fixed 52px height, and the hero h1 shadow is softer with the frosted blur at .8.

site/assets/css/style.css

@@ -634,6 +634,31 @@ section[id] {
   height: auto;
 }
 .navbar-brand-hero { display: none; }
+/* Match head paint, shared by the desktop bar end and the mobile menu band
+   (geometry per breakpoint below): the OTHER gym's accent as the face, a strip
+   in THIS site's accent on the slashed edge, its logo in that gym's on-accent
+   ink. --site-accent is resolved on the header, before .gym-switch's inline
+   vars swap --fitme-accent for the other gym's. */
+.header-section { --site-accent: var(--fitme-accent); }
+.header-section .gym-switch::before,
+.header-section .gym-switch::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+}
+.header-section .gym-switch::before { background: var(--site-accent); }
+/* the logo in that gym's on-accent ink (dark on lime, white on red) */
+.header-section .gym-switch .gym-switch-btn--logo .gym-switch-logo {
+  filter: url(#pt-noise) brightness(0) drop-shadow(0 1px 0 rgba(255, 255, 255, .25));
+}
+.header-section .gym-switch--light-ink .gym-switch-btn--logo .gym-switch-logo {
+  filter: url(#pt-noise) brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
+}
+/* the hover ring would vanish on its own accent: draw it in the ink */
+.header-section .gym-switch .gym-switch-btn--logo { border-color: rgba(11, 11, 13, .35); }
+.header-section .gym-switch--light-ink .gym-switch-btn--logo { border-color: rgba(255, 255, 255, .45); }
 @media (min-width: 992px) {
   .header-section .navbar {
     padding: 0;
@@ -661,17 +686,20 @@ section[id] {
     opacity: 0;
     visibility: hidden;
   }
-  .navbar-brand-hero img { width: 180px; height: auto; }
+  /* capped height too: the CrossFit logo is taller and would cover the links */
+  .navbar-brand-hero img { width: auto; height: 52px; max-width: none; }
   .header-section .navbar-collapse {
     min-height: 58px;
     align-items: center;
   }
   .header-section .gym-switch { position: absolute; }   /* the match head, below */
   .header-section.is-top .navbar { padding-top: 62px; }   /* room for the 180px logo */
-  /* Match head: the right end of the bar is a dark block behind the other-gym
-     button, its left side cut on the same slash as the underlines, with an
-     accent strip on the cut and an ember glow just inside it (the bar is the
-     matchstick, this is the head). ::before = accent strip, ::after = head. */
+  /* Match head: the right end of the bar is a block behind the other-gym
+     button, its left side cut on the same slash as the underlines (the bar is
+     the matchstick, this is the head). It is painted in the OTHER gym's brand
+     (navbar.php puts its vars on .gym-switch), a glimpse into that site: its
+     accent as the face, a strip in this site's accent on the cut and a shadow just inside it.
+     ::before = strip, ::after = head. */
   .header-section .gym-switch {
     --slash: 22px;
     top: 0;
@@ -684,22 +712,13 @@ section[id] {
   }
   .header-section .gym-switch::before,
   .header-section .gym-switch::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    pointer-events: none;
     clip-path: polygon(var(--slash) 0, 100% 0, 100% 100%, 0 100%);   /* .fx-slash-start */
   }
-  .header-section .gym-switch::before { left: -5px; background: var(--fitme-accent); }
+  .header-section .gym-switch::before { left: -5px; }
   .header-section .gym-switch::after {
     background:
-      radial-gradient(70% 90% at 10% 50%, rgba(var(--fitme-accent-rgb), .38), transparent 70%),
-      linear-gradient(180deg, #1b1b1f, #0b0b0d);
-  }
-  /* other-gym logos are drawn for a light bar: flip lightness, keep the hues */
-  .header-section .gym-switch .gym-switch-btn--logo .gym-switch-logo {
-    filter: url(#pt-noise) invert(1) hue-rotate(180deg) drop-shadow(0 1px 1px rgba(0, 0, 0, .4));
+      radial-gradient(70% 90% at 10% 50%, rgba(0, 0, 0, .28), transparent 70%),
+      linear-gradient(180deg, var(--fitme-accent), var(--fitme-accent-dark));
   }
   .header-section.is-top .navbar-brand { opacity: 0; visibility: hidden; }
   .header-section.is-top .navbar-brand-hero { opacity: 1; visibility: visible; }
@@ -735,7 +754,26 @@ section[id] {
   .header-section .navbar-nav { align-items: center; gap: .25rem; }
   .header-section .navbar-nav .nav-link { font-size: 1.25rem; margin: 0 !important; }
   .header-section .navbar-nav .nav-link::after { left: 0; right: 0; }   /* no side padding here */
-  .header-section .gym-switch { justify-content: center; }
+  /* the match head as a band across the bottom of the menu, its top edge on the slash */
+  .header-section .navbar-collapse { padding-bottom: 96px; }
+  .header-section .gym-switch {
+    --slash: 18px;
+    justify-content: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    padding: calc(var(--slash) + .9rem) 1rem 1.1rem !important;
+  }
+  .header-section .gym-switch::before,
+  .header-section .gym-switch::after { clip-path: polygon(0 var(--slash), 100% 0, 100% 100%, 0 100%); }
+  .header-section .gym-switch::before { top: -5px; }
+  .header-section .gym-switch::after {
+    background:
+      radial-gradient(90% 80% at 50% 0, rgba(0, 0, 0, .28), transparent 70%),
+      linear-gradient(180deg, var(--fitme-accent), var(--fitme-accent-dark));
+  }
 }
 @media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
   .header-section .navbar-collapse, .header-section .navbar-collapse.collapsing { transition: none; }
@@ -860,6 +898,7 @@ section[id] {
 .hero-section .container::before {
   -webkit-backdrop-filter: blur(22px) saturate(1.1);
   backdrop-filter: blur(22px) saturate(1.1);
+  opacity: .8;
 }
 .hero-section .container::after {
   background:
@@ -880,7 +919,7 @@ section[id] {
   font-weight: 900;
   color: #fff;
   /* tight + soft shadow so the lettering separates from the frosted band */
-  text-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 4px 28px rgba(0, 0, 0, .5), 0 6px 64px rgba(0, 0, 0, .45);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 2px 18px rgba(0, 0, 0, .18);
   line-height: 1.05;
   letter-spacing: -.5px;
 }

site/crossfit.php

@@ -1,6 +1,7 @@
 <?php
 // Was Home::crossfit.
 $current_uri_2 = 'crossfit';
+$nav_center_logo = true;   // big centred logo over the video, docks left on scroll (navbar.php)
 
 // Old /home/crossfit links → the default gym's CrossFit page.
 if (($_GET['gym'] ?? '') === '') {

site/includes/header_video.php

@@ -7,7 +7,7 @@
   <div class="container h-100">
     <div class="d-flex h-100 text-center align-items-center">
       <div class="w-100 text-white">
-        <h1 class="display-3"><img src="<?= base_url('site/assets/img/logos/logo_crossfit_white.svg')?>" alt="CrossFit 3070 — box de CrossFit em Mira" style="opacity: .85; max-width: 320px;" decoding="async"></h1>
+        <h1 class="visually-hidden">CrossFit 3070 — box de CrossFit em Mira</h1>
         <p class="lead mb-0"></p>
       </div>
     </div>

site/includes/navbar.php

@@ -66,8 +66,12 @@ $center_logo = !empty($nav_center_logo);
               if ((int) $g['id'] !== (int) current_gym()['id']) $other_gyms[] = $g;
           }
       }
-      if ($other_gyms): ?>
-      <div class="gym-switch d-flex flex-wrap gap-2 ms-lg-auto py-2 py-lg-0 pe-lg-3">
+      if ($other_gyms):
+          // The match head (style.css) is painted in the first other gym's brand.
+          $head_vars = gym_brand_vars($other_gyms[0]);
+          $head_ink  = str_contains($head_vars, 'on-accent:#FFFFFF') ? ' gym-switch--light-ink' : '';
+      ?>
+      <div class="gym-switch<?= $head_ink ?> d-flex flex-wrap gap-2 ms-lg-auto py-2 py-lg-0 pe-lg-3" style="<?= htmlspecialchars($head_vars) ?>">
         <?php foreach ($other_gyms as $g): ?>
         <?php $g_logo = gym_logo($g); ?>
         <a class="gym-switch-btn<?= $g_logo !== '' ? ' gym-switch-btn--logo' : '' ?>" href="<?= htmlspecialchars(gym_url($g)) ?>" style="<?= htmlspecialchars(gym_brand_vars($g)) ?>">
@@ -102,6 +106,14 @@ $center_logo = !empty($nav_center_logo);
         dock();
     }
 
+    /* ── Mobile menu fills the screen below the bar (style.css --nav-h) ──── */
+    var hdr = document.querySelector('.header-section');
+    if (hdr) {
+        var setNavH = function() { hdr.style.setProperty('--nav-h', hdr.offsetHeight + 'px'); };
+        window.addEventListener('resize', setNavH, { passive: true });
+        setNavH();
+    }
+
     /* ── Eased smooth-scroll helper ──────────────────────────────────────── */
     function smoothScrollTo(targetEl, duration) {
         var start = window.scrollY;