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>
This commit is contained in:
1 parent
8e889adeb9
commit
9588f902c6
1 file changed
+62
-10
+62
-10
@@ -309,6 +309,8 @@ section[id] {
|
|||||||
|
|
||||||
/* ── Buttons ───────────────────────────────────────────────────────────────── */
|
/* ── Buttons ───────────────────────────────────────────────────────────────── */
|
||||||
.site-btn {
|
.site-btn {
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
text-decoration: none; /* Bootstrap underlines every <a>; buttons never */
|
text-decoration: none; /* Bootstrap underlines every <a>; buttons never */
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: none;
|
border: none;
|
||||||
@@ -414,6 +416,8 @@ section[id] {
|
|||||||
|
|
||||||
/* ── Other-gym button (right end of the navbar) ────────────────────────────── */
|
/* ── Other-gym button (right end of the navbar) ────────────────────────────── */
|
||||||
.gym-switch-btn {
|
.gym-switch-btn {
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: var(--fitme-accent);
|
background: var(--fitme-accent);
|
||||||
color: var(--fitme-on-accent);
|
color: var(--fitme-on-accent);
|
||||||
@@ -440,11 +444,63 @@ section[id] {
|
|||||||
mask: var(--logo) center / contain no-repeat;
|
mask: var(--logo) center / contain no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gym-switch-btn:hover,
|
/* ── Button hover: the same spinning edge as the Mensalidades cards ───────────
|
||||||
.gym-switch-btn:focus-visible {
|
Reuses their registered --pc-a angle + pc-spin keyframes. On hover the face
|
||||||
background: var(--fitme-dark);
|
turns near-black (10% brand colour) with WHITE text, lifts a few px, and a
|
||||||
border-color: var(--fitme-dark);
|
conic brand-colour edge sweeps round it with a soft blurred glow behind.
|
||||||
color: var(--fitme-accent);
|
::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 ─────────────────────────────────────────────────────────── */
|
/* ── Sticky Navbar ─────────────────────────────────────────────────────────── */
|
||||||
@@ -625,11 +681,7 @@ section[id] {
|
|||||||
padding: 14px 36px;
|
padding: 14px 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-btn.sb-ghost:hover {
|
/* .sb-ghost hover: handled by the shared button hover above (dark face, white text, spinning edge) */
|
||||||
background: #fff;
|
|
||||||
color: var(--fitme-dark);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── CSS performance: skip rendering off-screen sections ──────────────────── */
|
/* ── CSS performance: skip rendering off-screen sections ──────────────────── */
|
||||||
.trainers-section,
|
.trainers-section,
|
||||||
|
|||||||
Reference in new issue
Block a user