feat(site): centred home logo that docks on scroll, slashed nav underline, square defocused hero event

site/assets/css/style.css

@@ -365,14 +365,17 @@ section[id] {
   position: relative;
 }
 
+/* Underline: a short bar with slashed ends (top-left and bottom-right cut, like
+   the "in" box of the FitMe in logo), tucked right under the text. */
 .nav-link:after {
   content: '';
   position: absolute;
-  bottom: -2px;
-  left: 0;
-  width: 100%;
-  height: 2px;
+  bottom: 3px;
+  left: var(--bs-navbar-nav-link-padding-x, .5rem);
+  right: var(--bs-navbar-nav-link-padding-x, .5rem);
+  height: 4px;
   background: var(--fitme-accent);
+  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform var(--fitme-transition);
@@ -590,6 +593,25 @@ section[id] {
   to { background-position: 150% 0; }
 }
 
+/* Brand logo: 150px in the bar. On the home page (.has-center-logo) it starts
+   bigger on its own centred row (.is-top) and docks back on scroll (navbar.php). */
+.navbar-brand img {
+  width: 150px;
+  height: auto;
+  transition: width .35s ease;
+}
+@media (min-width: 992px) {
+  .header-section.is-top .navbar { flex-wrap: wrap; }
+  .header-section.is-top .navbar-brand {
+    flex: 0 0 100%;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 14px 1rem 0 0;   /* 1rem offsets the nav's left padding: true centre */
+  }
+  .header-section.is-top .navbar-brand img { width: 240px; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .header-section::before, .header-section::after { animation: none; }
 }
@@ -3247,19 +3269,33 @@ h3.contact-title {
   align-items: center;
   gap: 16px;
   width: min(640px, 92vw);
-  padding: 12px 14px 12px 18px;
-  background: rgba(11, 11, 13, .55);
+  min-height: 88px;
+  padding: 18px 18px 18px 22px;
+  background: linear-gradient(90deg, rgba(11, 11, 13, .62), rgba(11, 11, 13, .42));
   border: 1.5px solid rgba(var(--fitme-accent-rgb), .55);
-  border-radius: 999px;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
   text-decoration: none;
   text-align: left;
   animation: hero-event-glow 2.8s ease-in-out infinite;
   transition: transform var(--fitme-transition), box-shadow var(--fitme-transition), border-color var(--fitme-transition);
 }
-/* The event's own image as a frosted (blurred + darkened) backdrop inside the
-   pill — only when --ev-img is set; otherwise the translucent dark bg shows. */
+/* Defocus gradient: ::after blurs whatever is behind it (the event image in
+   ::before, or the hero photo through the translucent bg), masked so the left is
+   sharp and the right most out of focus. .hero-event itself must not get
+   filter/backdrop-filter/opacity/mask, or it becomes the backdrop root and the
+   blur stops reaching the hero photo. */
+.hero-event::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
+  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 90%);
+  mask-image: linear-gradient(90deg, transparent 10%, #000 90%);
+}
+/* The event's own image as a darkened backdrop inside the card, only when
+   --ev-img is set; otherwise the translucent dark bg shows. */
 .hero-event.has-img::before {
   content: '';
   position: absolute;
@@ -3268,11 +3304,11 @@ h3.contact-title {
   background-image: var(--ev-img);
   background-size: cover;
   background-position: center;
-  filter: blur(6px) saturate(1.15) brightness(.5);
-  transform: scale(1.18);   /* hide the blur's transparent edges */
+  filter: saturate(1.15) brightness(.5);
+  transform: scale(1.04);
   transition: transform var(--fitme-transition);
 }
-.hero-event.has-img:hover::before { transform: scale(1.24); }
+.hero-event.has-img:hover::before { transform: scale(1.1); }
 /* Keep the content above the image layer. */
 .hero-event > * { position: relative; z-index: 1; }
 @keyframes hero-event-glow {
@@ -3296,7 +3332,6 @@ h3.contact-title {
   text-transform: uppercase;
   color: var(--fitme-accent);
   background: rgba(var(--fitme-accent-rgb), .14);
-  border-radius: 999px;
 }
 .hero-event-text {
   flex: 1 1 auto;
@@ -3331,7 +3366,6 @@ h3.contact-title {
   white-space: nowrap;
   color: var(--fitme-dark);
   background: var(--ev-accent);
-  border-radius: 999px;
 }
 .hero-event-go i { transition: transform var(--fitme-transition); }
 .hero-event:hover .hero-event-go i { transform: translateX(4px); }
@@ -3341,9 +3375,8 @@ h3.contact-title {
     flex-wrap: wrap;
     justify-content: center;
     text-align: center;
-    border-radius: 18px;
     gap: 10px;
-    padding: 14px;
+    padding: 18px 14px;
   }
   .hero-event-text { flex-basis: 100%; align-items: center; }
   .hero-event-title, .hero-event-sub { white-space: normal; }