From e52709b926bfcc81d30a9ac6d2ad27e755dc67f0 Mon Sep 17 00:00:00 2001 From: andre Date: Tue, 13 Oct 2026 18:21:44 +0100 Subject: [PATCH] style(site): stronger neon on button hover (inner glow, halo, neon lettering) Co-Authored-By: Claude Sonnet 5.5 --- site/assets/css/style.css | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/site/assets/css/style.css b/site/assets/css/style.css index 41e2d11..f46b35f 100644 --- a/site/assets/css/style.css +++ b/site/assets/css/style.css @@ -371,9 +371,9 @@ section[id] { --depth: 5px; /* lift (and bottom wall height) */ --depth-x: 4px; /* shift to the left (and right wall width) */ --bw: 0px; /* the element's own border, so the walls start outside it */ - --wall-hi: color-mix(in srgb, var(--fitme-accent) 70%, #fff); + --wall-hi: color-mix(in srgb, var(--fitme-accent) 45%, #fff); /* hot core of the tube */ --wall: var(--fitme-accent); - --wall-lo: color-mix(in srgb, var(--fitme-accent) 45%, #000); + --wall-lo: color-mix(in srgb, var(--fitme-accent) 65%, #000); } .site-btn.sb-line, .site-btn.sb-ghost { --bw: 2px; } @@ -418,7 +418,7 @@ section[id] { will-change: transform; /* the face colour fades slowly so the change to near-black never "pops" */ transition: transform 600ms cubic-bezier(.3, .7, .4, 1), box-shadow 600ms cubic-bezier(.3, .7, .4, 1), - background-color 450ms ease, border-color 450ms ease, color 450ms ease; + background-color 450ms ease, border-color 450ms ease, color 450ms ease, filter 450ms ease; } .site-btn::before, .site-btn::after, @@ -432,9 +432,14 @@ section[id] { .gym-switch-btn:hover, .gym-switch-btn:focus-visible { transform: translate(calc(var(--depth-x) * -1), calc(var(--depth) * -1)); - box-shadow: 0 0 18px 2px rgba(var(--fitme-accent-rgb), .35); - transition-duration: 250ms, 250ms, 450ms, 450ms, 450ms; - transition-timing-function: cubic-bezier(.3, .7, .4, 1.5), cubic-bezier(.3, .7, .4, 1.5), ease, ease, ease; + /* inner glow on the face (the "lit from inside" look) + a halo round the + whole solid; drop-shadow follows the clipped walls, box-shadow can't */ + box-shadow: inset 0 0 18px 2px rgba(var(--fitme-accent-rgb), .55), + inset 0 0 4px 0 rgba(var(--fitme-accent-rgb), .8), + 0 0 22px 3px rgba(var(--fitme-accent-rgb), .45); + filter: drop-shadow(0 0 5px rgba(var(--fitme-accent-rgb), .9)) drop-shadow(0 0 14px rgba(var(--fitme-accent-rgb), .55)); + transition-duration: 250ms, 250ms, 450ms, 450ms, 450ms, 450ms; + transition-timing-function: cubic-bezier(.3, .7, .4, 1.5), cubic-bezier(.3, .7, .4, 1.5), ease, ease, ease, ease; } .site-btn:hover::before, .site-btn:focus-visible::before, @@ -466,7 +471,7 @@ section[id] { background: color-mix(in srgb, var(--fitme-accent) 10%, #000); border-color: color-mix(in srgb, var(--fitme-accent) 10%, #000); color: #fff; - text-shadow: 0 1px 2px rgba(0, 0, 0, .35); + text-shadow: 0 0 8px rgba(var(--fitme-accent-rgb), .9), 0 0 2px rgba(255, 255, 255, .6); /* neon lettering */ } .site-btn.sb-dark:hover, .site-btn.sb-line:hover { color: #fff; }