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