style(site): button hover wall 4px with graded sides and lit bevel

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
andreandClaude Sonnet 5.5 committed 2026-10-13 18:13:20 +01:00
1 parent 2a4596e7e3
commit 251644c393
1 file changed
+6 -4
+6 -4
View File
@@ -363,7 +363,7 @@ section[id] {
.gym-switch-btn { .gym-switch-btn {
--neon: color-mix(in srgb, var(--fitme-accent) 70%, #fff); --neon: color-mix(in srgb, var(--fitme-accent) 70%, #fff);
--neon-edge: var(--fitme-accent-dark); --neon-edge: var(--fitme-accent-dark);
--depth: 3px; --depth: 4px;
} }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { @media (hover: hover) and (prefers-reduced-motion: no-preference) {
@@ -381,11 +381,13 @@ section[id] {
settling toward the wall) and a soft glow round the whole solid. The settling toward the wall) and a soft glow round the whole solid. The
face itself stays plain — no second outline, so nothing reads as a copy. */ face itself stays plain — no second outline, so nothing reads as a copy. */
box-shadow: box-shadow:
inset 1px 1px 0 rgba(var(--fitme-accent-rgb), .55), /* lit top-left bevel on the face */
1px 1px 0 var(--neon), 1px 1px 0 var(--neon),
2px 2px 0 var(--fitme-accent), 2px 2px 0 var(--fitme-accent),
3px 3px 0 color-mix(in srgb, var(--fitme-accent) 70%, #000), 3px 3px 0 color-mix(in srgb, var(--fitme-accent) 75%, #000),
0 0 18px 3px rgba(var(--fitme-accent-rgb), .45), 4px 4px 0 color-mix(in srgb, var(--fitme-accent) 50%, #000),
3px 3px 22px 2px rgba(var(--fitme-accent-rgb), .3); 0 0 18px 3px rgba(var(--fitme-accent-rgb), .4),
4px 4px 22px 2px rgba(var(--fitme-accent-rgb), .3);
} }
.site-btn:active, .site-btn:active,