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

style(site): neon flicker on button hover

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
andreandClaude Sonnet 5.5 committed 2026-10-13 18:24:22 +01:00
1 parent 348e7d6848
commit d40f6d8b2d
1 file changed
+35
Download Patch File Download Diff File Expand all files Collapse all files
site/assets/css/style.css
+35
View File
@@ -450,6 +450,21 @@ section[id] {
.gym-switch-btn:hover::after,
.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,
.gym-switch-btn:active {
transform: translate(-1px, -1px);
@@ -461,6 +476,26 @@ section[id] {
.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 —
the bright neon faces around it then stand out against it. The dark and
ghost variants keep their own backgrounds. */