From db28427c1ec84f7d7f407753672a4421b5529901 Mon Sep 17 00:00:00 2001 From: andre Date: Tue, 13 Oct 2026 18:24:57 +0100 Subject: [PATCH] style(site): single neon blink after a moment of hover Co-Authored-By: Claude Sonnet 5.5 --- site/assets/css/style.css | 32 +++++++++++++------------------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/site/assets/css/style.css b/site/assets/css/style.css index 51a2c84..3d47e44 100644 --- a/site/assets/css/style.css +++ b/site/assets/css/style.css @@ -450,12 +450,12 @@ 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. */ + /* Neon blink: after a moment of hovering, one short stutter — like a tube + that isn't quite seated — then steady again. 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; } + .gym-switch-btn:focus-visible { animation: neon-flicker-glow 600ms linear 1.4s 1; } .site-btn:hover::before, .site-btn:hover::after, .site-btn:focus-visible::before, @@ -463,7 +463,7 @@ section[id] { .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; } + .gym-switch-btn:focus-visible::after { animation: neon-flicker-tube 600ms linear 1.4s 1; } .site-btn:active, .gym-switch-btn:active { @@ -477,23 +477,17 @@ section[id] { } @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; } + 0%, 100% { opacity: 1; } + 15% { opacity: .3; } + 30% { opacity: 1; } + 50% { opacity: .55; } + 65% { 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)); } + 0%, 100% { filter: drop-shadow(0 0 5px rgba(var(--fitme-accent-rgb), .9)) drop-shadow(0 0 14px rgba(var(--fitme-accent-rgb), .55)); } + 15% { filter: drop-shadow(0 0 1px rgba(var(--fitme-accent-rgb), .3)); } + 30% { filter: drop-shadow(0 0 5px rgba(var(--fitme-accent-rgb), .9)) drop-shadow(0 0 14px rgba(var(--fitme-accent-rgb), .55)); } + 50% { filter: drop-shadow(0 0 2px rgba(var(--fitme-accent-rgb), .45)); } } /* Hover: white text on an almost-black face keeping ~10% of the brand colour —