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: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. */