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

style(site): button hover like the Mensalidades cards (spinning brand edge, dark face, white text)

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:33:27 +01:00
1 parent 8e889adeb9
commit 9588f902c6
1 file changed
+62 -10
Download Patch File Download Diff File Expand all files Collapse all files
site/assets/css/style.css
+62 -10
View File
@@ -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,