From 2e8b6d20f6d805d2af62e8eed10191cc15d30d2b Mon Sep 17 00:00:00 2001
From: andre <andre.filipe6@gmail.com>
Date: Mon, 26 Oct 2026 11:34:11 +0000
Subject: [PATCH] style(navbar): smaller centred logo, hero clears the bar,
 liquid-glass backdrop

---
 site/assets/css/style.css | 26 +++++++++++++++++++++-----
 site/includes/include.php |  8 ++++++++
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/site/assets/css/style.css b/site/assets/css/style.css
index 56a99a1..8eff2fb 100644
--- a/site/assets/css/style.css
+++ b/site/assets/css/style.css
@@ -556,10 +556,24 @@ section[id] {
   top: 0;
   width: 100%;
   z-index: 1000;
-  -webkit-backdrop-filter: blur(14px) saturate(140%);
-  backdrop-filter: blur(14px) saturate(140%);
+  -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.06);
+  backdrop-filter: blur(14px) saturate(180%) brightness(1.06);
   background: var(--fitme-nav-bg);
   border-bottom: 1px solid rgba(0, 0, 0, .04);
+  /* glass edge: a bright specular line on top, a faint inner rim below */
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(255, 255, 255, .25);
+}
+/* Liquid glass (Chromium only: the only engine that runs an SVG filter in
+   backdrop-filter). #nav-glass (include.php) bends the page behind the bar
+   with smooth low-frequency displacement before the blur, so it reads as
+   rippled glass, not just frost; the tint is lighter so the bending shows.
+   -webkit-app-region is a Chromium-only property, used as the engine test;
+   Safari/Firefox keep the plain frosted blur above. */
+@supports (-webkit-app-region: drag) {
+  .header-section {
+    backdrop-filter: url(#nav-glass) blur(6px) saturate(180%) brightness(1.06);
+    background: rgba(247, 248, 250, .5);
+  }
 }
 
 /* Bottom edge: the Mensalidades sweep in the current gym's colour (:root
@@ -629,13 +643,15 @@ section[id] {
     transform: translateY(-50%);
     padding: 0 !important;
   }
-  .header-section.is-top .navbar { padding-top: 96px; }   /* room for the 240px logo */
+  .header-section.is-top .navbar { padding-top: 62px; }   /* room for the 180px logo */
   .header-section.is-top .navbar-brand {
     left: 50%;
-    top: 14px;
+    top: 12px;
     transform: translate(-50%, 0);
   }
-  .header-section.is-top .navbar-brand img { width: 240px; }
+  .header-section.is-top .navbar-brand img { width: 180px; }
+  /* keep the centred hero content (event card) clear of the taller top bar */
+  .hero-section { padding-top: 120px; }
 }
 @media (prefers-reduced-motion: reduce) {
   .header-section .navbar, .header-section .navbar-brand, .navbar-brand img { transition: none; }
diff --git a/site/includes/include.php b/site/includes/include.php
index a50e908..d15373f 100644
--- a/site/includes/include.php
+++ b/site/includes/include.php
@@ -106,5 +106,13 @@ $canonical = $GLOBALS['_canonical_override'] ?? match ($page) {
     <feBlend in="SourceGraphic" in2="grain" mode="multiply" result="mix"/>
     <feComposite in="mix" in2="SourceGraphic" operator="in"/>
   </filter>
+  <!-- Liquid glass for the navbar backdrop (style.css .header-section, Chromium):
+       soft low-frequency noise, blurred so it has no grain, drives a displacement
+       that bends the page behind the bar like uneven glass. -->
+  <filter id="nav-glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
+    <feTurbulence type="fractalNoise" baseFrequency=".008 .04" numOctaves="2" seed="3" result="t"/>
+    <feGaussianBlur in="t" stdDeviation="2" result="map"/>
+    <feDisplacementMap in="SourceGraphic" in2="map" scale="38" xChannelSelector="R" yChannelSelector="G"/>
+  </filter>
 </svg>
 <a href="#conteudo" class="skip-link">Saltar para o conteúdo</a>