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

style(navbar): match head slash in the colour of the gym it links to

Browse Source
This commit is contained in:
andre committed 2026-10-26 12:03:30 +00:00
1 parent e7ab661f4c
commit 0bc14f5f72
2 files changed
+9 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

site/assets/css/style.css
+8 -9
View File
@@ -635,11 +635,10 @@ section[id] {
}
.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); }
(geometry per breakpoint below): everything in the OTHER gym's brand (its
vars are inline on .gym-switch): a strip in its accent on the slashed edge,
a face a shade darker so the strip reads, its logo in that gym's on-accent
ink. */
.header-section .gym-switch::before,
.header-section .gym-switch::after {
content: '';
@@ -648,7 +647,7 @@ section[id] {
z-index: -1;
pointer-events: none;
}
.header-section .gym-switch::before { background: var(--site-accent); }
.header-section .gym-switch::before { background: var(--fitme-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));
@@ -698,7 +697,7 @@ section[id] {
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.
accent strip on the cut, a face a shade darker and a shadow just inside it.
::before = strip, ::after = head. */
.header-section .gym-switch {
--slash: 22px;
@@ -718,7 +717,7 @@ section[id] {
.header-section .gym-switch::after {
background:
radial-gradient(70% 90% at 10% 50%, rgba(0, 0, 0, .28), transparent 70%),
linear-gradient(180deg, var(--fitme-accent), var(--fitme-accent-dark));
linear-gradient(180deg, var(--fitme-accent-dark), color-mix(in srgb, var(--fitme-accent-dark) 82%, #000));
}
.header-section.is-top .navbar-brand { opacity: 0; visibility: hidden; }
.header-section.is-top .navbar-brand-hero { opacity: 1; visibility: visible; }
@@ -772,7 +771,7 @@ section[id] {
.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));
linear-gradient(180deg, var(--fitme-accent-dark), color-mix(in srgb, var(--fitme-accent-dark) 82%, #000));
}
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {