From 9588f902c6e869d38c9a59624a3e3ad6ff5f5cb9 Mon Sep 17 00:00:00 2001
From: andre <andre.filipe6@gmail.com>
Date: Tue, 13 Oct 2026 18:33:27 +0100
Subject: [PATCH] style(site): button hover like the Mensalidades cards
 (spinning brand edge, dark face, white text)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 site/assets/css/style.css | 72 +++++++++++++++++++++++++++++++++------
 1 file changed, 62 insertions(+), 10 deletions(-)

diff --git a/site/assets/css/style.css b/site/assets/css/style.css
index 8cc2b88..fd33ce1 100644
--- a/site/assets/css/style.css
+++ b/site/assets/css/style.css
@@ -309,6 +309,8 @@ section[id] {
 
 /* ── Buttons ───────────────────────────────────────────────────────────────── */
 .site-btn {
+  position: relative;
+  z-index: 0;
   text-decoration: none;   /* Bootstrap underlines every <a>; buttons never */
   display: inline-block;
   border: none;
@@ -414,6 +416,8 @@ section[id] {
 
 /* ── Other-gym button (right end of the navbar) ────────────────────────────── */
 .gym-switch-btn {
+  position: relative;
+  z-index: 0;
   display: inline-block;
   background: var(--fitme-accent);
   color: var(--fitme-on-accent);
@@ -440,11 +444,63 @@ section[id] {
   mask: var(--logo) center / contain no-repeat;
 }
 
-.gym-switch-btn:hover,
-.gym-switch-btn:focus-visible {
-  background: var(--fitme-dark);
-  border-color: var(--fitme-dark);
-  color: var(--fitme-accent);
+/* ── Button hover: the same spinning edge as the Mensalidades cards ───────────
+   Reuses their registered --pc-a angle + pc-spin keyframes. On hover the face
+   turns near-black (10% brand colour) with WHITE text, lifts a few px, and a
+   conic brand-colour edge sweeps round it with a soft blurred glow behind.
+   ::before = the face + 2px edge, ::after = the glow. --elb is the element's own
+   border (sb-line / sb-ghost), so the ring always sits outside it. */
+:is(.site-btn, .gym-switch-btn) {
+  --btn-face: color-mix(in srgb, var(--fitme-accent) 10%, #000);
+  --elb: 0px;
+  --ring: 2px;
+}
+.site-btn.sb-line, .site-btn.sb-ghost { --elb: 2px; }
+
+.site-btn::before, .site-btn::after,
+.gym-switch-btn::before, .gym-switch-btn::after {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  border-radius: calc(var(--fitme-radius) + var(--ring) + var(--elb));
+  opacity: 0;
+  transition: opacity .3s ease;
+}
+.site-btn::before, .gym-switch-btn::before {
+  inset: calc(-1 * (var(--ring) + var(--elb)));
+  z-index: -1;
+  border: var(--ring) solid transparent;
+  background:
+    linear-gradient(var(--btn-face), var(--btn-face)) padding-box,
+    conic-gradient(from var(--pc-a), rgba(var(--fitme-accent-rgb), 0) 0deg, rgba(var(--fitme-accent-rgb), 0) 150deg,
+        var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg,
+        rgba(var(--fitme-accent-rgb), 0) 360deg) border-box;
+}
+.site-btn::after, .gym-switch-btn::after {
+  inset: calc(-1 * (var(--ring) + var(--elb)) - 2px);
+  z-index: -2;
+  background: conic-gradient(from var(--pc-a), rgba(var(--fitme-accent-rgb), 0) 0deg, rgba(var(--fitme-accent-rgb), 0) 150deg,
+      var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg,
+      rgba(var(--fitme-accent-rgb), 0) 360deg);
+  filter: blur(10px);
+}
+
+.site-btn.site-btn:is(:hover, :focus-visible),
+.gym-switch-btn:is(:hover, :focus-visible) {
+  background: var(--btn-face);
+  border-color: transparent;
+  color: #fff;
+  transform: translateY(-3px);
+  box-shadow: none;
+}
+.site-btn:is(:hover, :focus-visible)::before,
+.gym-switch-btn:is(:hover, :focus-visible)::before { opacity: 1; animation: pc-spin 3.2s linear infinite; }
+.site-btn:is(:hover, :focus-visible)::after,
+.gym-switch-btn:is(:hover, :focus-visible)::after { opacity: .75; animation: pc-spin 3.2s linear infinite; }
+
+@media (prefers-reduced-motion: reduce) {
+  .site-btn:is(:hover, :focus-visible)::before, .site-btn:is(:hover, :focus-visible)::after,
+  .gym-switch-btn:is(:hover, :focus-visible)::before, .gym-switch-btn:is(:hover, :focus-visible)::after { animation: none; }
 }
 
 /* ── Sticky Navbar ─────────────────────────────────────────────────────────── */
@@ -625,11 +681,7 @@ section[id] {
   padding: 14px 36px;
 }
 
-.site-btn.sb-ghost:hover {
-  background: #fff;
-  color: var(--fitme-dark);
-  box-shadow: none;
-}
+/* .sb-ghost hover: handled by the shared button hover above (dark face, white text, spinning edge) */
 
 /* ── CSS performance: skip rendering off-screen sections ──────────────────── */
 .trainers-section,