site/assets/css/style.css

@@ -377,26 +377,23 @@ section[id] {
   .gym-switch-btn:hover,
   .gym-switch-btn:focus-visible {
     transform: translate(calc(var(--depth) * -1), calc(var(--depth) * -1));
-    /* Face: lit outline + inner glow. Sides: one continuous wall that darkens
-       toward the "wall" it grew from (no alternating stripes, so it reads as a
-       solid extrusion and not as a second copy of the button). */
+    /* The extruded sides ARE the neon: three lit steps (bright at the face,
+       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 0 0 0 2px var(--neon),
-      inset 0 0 14px 1px rgba(var(--fitme-accent-rgb), .45),
-      1px 1px 0 color-mix(in srgb, var(--fitme-accent) 80%, #000),
-      2px 2px 0 color-mix(in srgb, var(--fitme-accent) 62%, #000),
-      3px 3px 0 color-mix(in srgb, var(--fitme-accent) 45%, #000),
-      0 0 16px 2px rgba(var(--fitme-accent-rgb), .4);
+      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);
   }
 
   .site-btn:active,
   .gym-switch-btn:active {
     transform: translate(-1px, -1px);
     box-shadow:
-      inset 0 0 0 2px var(--neon),
-      inset 0 0 10px 1px rgba(var(--fitme-accent-rgb), .5),
-      1px 1px 0 var(--neon-edge),
-      1px 1px 8px 1px rgba(var(--fitme-accent-rgb), .5);
+      1px 1px 0 var(--neon),
+      0 0 10px 1px rgba(var(--fitme-accent-rgb), .5);
   }
 }