feat(site): slow brand-colour sweep along the bottom of the navbar
This commit is contained in:
1 parent
3ffcf0fe38
commit
bab6eb87bf
2 files changed
+36
-1
No files matched your search
@@ -537,6 +537,41 @@ section[id] {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
/* Bottom edge: the Mensalidades sweep in the current gym's colour (:root
|
||||
--fitme-accent from gym_brand_css()), always on and much slower. A wide
|
||||
gradient slides along a 2px line (::after); ::before is the same strip
|
||||
blurred, the soft glow under it. Same peak/fade shape as the cards. */
|
||||
.header-section::before,
|
||||
.header-section::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -1px;
|
||||
height: 2px;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(var(--fitme-accent-rgb), .15) 0%, rgba(var(--fitme-accent-rgb), .15) 30%,
|
||||
var(--fitme-accent) 42%, color-mix(in srgb, var(--fitme-accent) 45%, #fff) 50%, var(--fitme-accent) 58%,
|
||||
rgba(var(--fitme-accent-rgb), .15) 70%, rgba(var(--fitme-accent-rgb), .15) 100%)
|
||||
0 0 / 300% 100% repeat-x;
|
||||
animation: nav-sweep 14s linear infinite;
|
||||
}
|
||||
.header-section::before {
|
||||
height: 6px;
|
||||
bottom: -4px;
|
||||
filter: blur(6px);
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
@keyframes nav-sweep {
|
||||
to { background-position: 150% 0; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.header-section::before, .header-section::after { animation: none; }
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
max-width: 150px;
|
||||
padding: 12px 0;
|
||||
|
||||
Reference in new issue
Block a user