diff --git a/site/assets/css/style.css b/site/assets/css/style.css index d2f6d5a..51a2c84 100644 --- a/site/assets/css/style.css +++ b/site/assets/css/style.css @@ -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. */