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 {
--neon: color-mix(in srgb, var(--fitme-accent) 70%, #fff);
--neon-edge: var(--fitme-accent-dark);
--depth: 3px;
--depth: 4px;
}
@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
face itself stays plain — no second outline, so nothing reads as a copy. */
box-shadow:
inset 1px 1px 0 rgba(var(--fitme-accent-rgb), .55), /* lit top-left bevel on the face */
1px 1px 0 var(--neon),
2px 2px 0 var(--fitme-accent),
3px 3px 0 color-mix(in srgb, var(--fitme-accent) 70%, #000),
0 0 18px 3px rgba(var(--fitme-accent-rgb), .45),
3px 3px 22px 2px rgba(var(--fitme-accent-rgb), .3);
3px 3px 0 color-mix(in srgb, var(--fitme-accent) 75%, #000),
4px 4px 0 color-mix(in srgb, var(--fitme-accent) 50%, #000),
0 0 18px 3px rgba(var(--fitme-accent-rgb), .4),
4px 4px 22px 2px rgba(var(--fitme-accent-rgb), .3);
}
.site-btn:active,