release: promote beta to main (gyms, brand colours, JPEG XL, SEO per gym) #3
@@ -450,6 +450,21 @@ section[id] {
|
|||||||
.gym-switch-btn:hover::after,
|
.gym-switch-btn:hover::after,
|
||||||
.gym-switch-btn:focus-visible::after { transform: scaleX(1); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); }
|
.gym-switch-btn:focus-visible::after { transform: scaleX(1); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); }
|
||||||
|
|
||||||
|
/* Neon flicker: a stuttering switch-on while it lifts, then steady with the
|
||||||
|
odd short glitch, like a tube that isn't quite seated. Opacity + filter only. */
|
||||||
|
.site-btn:hover,
|
||||||
|
.site-btn:focus-visible,
|
||||||
|
.gym-switch-btn:hover,
|
||||||
|
.gym-switch-btn:focus-visible { animation: neon-flicker-glow 5s linear 150ms infinite; }
|
||||||
|
.site-btn:hover::before,
|
||||||
|
.site-btn:hover::after,
|
||||||
|
.site-btn:focus-visible::before,
|
||||||
|
.site-btn:focus-visible::after,
|
||||||
|
.gym-switch-btn:hover::before,
|
||||||
|
.gym-switch-btn:hover::after,
|
||||||
|
.gym-switch-btn:focus-visible::before,
|
||||||
|
.gym-switch-btn:focus-visible::after { animation: neon-flicker-tube 5s linear 150ms infinite; }
|
||||||
|
|
||||||
.site-btn:active,
|
.site-btn:active,
|
||||||
.gym-switch-btn:active {
|
.gym-switch-btn:active {
|
||||||
transform: translate(-1px, -1px);
|
transform: translate(-1px, -1px);
|
||||||
@@ -461,6 +476,26 @@ section[id] {
|
|||||||
.gym-switch-btn:active::after { transform: scaleX(.25); transition-duration: 34ms; }
|
.gym-switch-btn:active::after { transform: scaleX(.25); transition-duration: 34ms; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes neon-flicker-tube {
|
||||||
|
0%, 4%, 8%, 12%, 100% { opacity: 1; }
|
||||||
|
2% { opacity: .35; }
|
||||||
|
6% { opacity: .65; }
|
||||||
|
10% { opacity: .4; }
|
||||||
|
70% { opacity: 1; }
|
||||||
|
71% { opacity: .5; }
|
||||||
|
72% { opacity: 1; }
|
||||||
|
73% { opacity: .6; }
|
||||||
|
74% { opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes neon-flicker-glow {
|
||||||
|
0%, 4%, 8%, 12%, 100% { filter: drop-shadow(0 0 5px rgba(var(--fitme-accent-rgb), .9)) drop-shadow(0 0 14px rgba(var(--fitme-accent-rgb), .55)); }
|
||||||
|
2% { filter: drop-shadow(0 0 1px rgba(var(--fitme-accent-rgb), .3)); }
|
||||||
|
6% { filter: drop-shadow(0 0 3px rgba(var(--fitme-accent-rgb), .5)); }
|
||||||
|
10% { filter: drop-shadow(0 0 2px rgba(var(--fitme-accent-rgb), .35)); }
|
||||||
|
71% { filter: drop-shadow(0 0 2px rgba(var(--fitme-accent-rgb), .4)); }
|
||||||
|
73% { filter: drop-shadow(0 0 3px rgba(var(--fitme-accent-rgb), .5)); }
|
||||||
|
}
|
||||||
|
|
||||||
/* Hover: white text on an almost-black face keeping ~10% of the brand colour —
|
/* Hover: white text on an almost-black face keeping ~10% of the brand colour —
|
||||||
the bright neon faces around it then stand out against it. The dark and
|
the bright neon faces around it then stand out against it. The dark and
|
||||||
ghost variants keep their own backgrounds. */
|
ghost variants keep their own backgrounds. */
|
||||||
|
|||||||
Reference in new issue
Block a user