andre/fitme3070.pt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(navbar): smaller centred logo, hero clears the bar, liquid-glass backdrop

Browse Source
This commit is contained in:
andre committed 2026-10-26 11:34:11 +00:00
1 parent c2b1f98e96
commit 2e8b6d20f6
2 files changed
+29 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

site/assets/css/style.css
+21 -5
View File
@@ -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; }
site/includes/include.php
+8
View File
@@ -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>