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