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

style(site): stronger neon on button hover (inner glow, halo, neon lettering)

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:21:44 +01:00
1 parent 7bf2a8542e
commit e52709b926
1 file changed
+12 -7
Download Patch File Download Diff File Expand all files Collapse all files
site/assets/css/style.css
+12 -7
View File
@@ -371,9 +371,9 @@ section[id] {
--depth: 5px; /* lift (and bottom wall height) */ --depth: 5px; /* lift (and bottom wall height) */
--depth-x: 4px; /* shift to the left (and right wall width) */ --depth-x: 4px; /* shift to the left (and right wall width) */
--bw: 0px; /* the element's own border, so the walls start outside it */ --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: 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-line,
.site-btn.sb-ghost { --bw: 2px; } .site-btn.sb-ghost { --bw: 2px; }
@@ -418,7 +418,7 @@ section[id] {
will-change: transform; will-change: transform;
/* the face colour fades slowly so the change to near-black never "pops" */ /* 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), 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::before,
.site-btn::after, .site-btn::after,
@@ -432,9 +432,14 @@ section[id] {
.gym-switch-btn:hover, .gym-switch-btn:hover,
.gym-switch-btn:focus-visible { .gym-switch-btn:focus-visible {
transform: translate(calc(var(--depth-x) * -1), calc(var(--depth) * -1)); transform: translate(calc(var(--depth-x) * -1), calc(var(--depth) * -1));
box-shadow: 0 0 18px 2px rgba(var(--fitme-accent-rgb), .35); /* inner glow on the face (the "lit from inside" look) + a halo round the
transition-duration: 250ms, 250ms, 450ms, 450ms, 450ms; whole solid; drop-shadow follows the clipped walls, box-shadow can't */
transition-timing-function: cubic-bezier(.3, .7, .4, 1.5), cubic-bezier(.3, .7, .4, 1.5), ease, ease, ease; 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:hover::before,
.site-btn:focus-visible::before, .site-btn:focus-visible::before,
@@ -466,7 +471,7 @@ section[id] {
background: color-mix(in srgb, var(--fitme-accent) 10%, #000); background: color-mix(in srgb, var(--fitme-accent) 10%, #000);
border-color: color-mix(in srgb, var(--fitme-accent) 10%, #000); border-color: color-mix(in srgb, var(--fitme-accent) 10%, #000);
color: #fff; 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-dark:hover,
.site-btn.sb-line:hover { color: #fff; } .site-btn.sb-line:hover { color: #fff; }