feat(branding): re-theme Bootstrap to the brand colour; 3D neon button hover; hide Mensalidades link without plans
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
4b2823d1e5
commit
32f8d7a613
6 files changed
+307
-1
No files matched your search
@@ -353,6 +353,51 @@ section[id] {
|
||||
color: var(--fitme-accent);
|
||||
}
|
||||
|
||||
/* ── 3D neon extrusion on hover ────────────────────────────────────────────────
|
||||
The button lifts off the "wall" toward the viewer; the faces it leaves behind
|
||||
(the extruded sides) are drawn with stacked hard shadows in the brand colour
|
||||
and lit like neon tubes (glow on top). Colours come from the gym's brand
|
||||
tokens, so each gym glows in its own colour. */
|
||||
.site-btn,
|
||||
.gym-switch-btn {
|
||||
--neon: color-mix(in srgb, var(--fitme-accent) 70%, #fff);
|
||||
--neon-edge: var(--fitme-accent-dark);
|
||||
--depth: 7px;
|
||||
}
|
||||
|
||||
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
|
||||
.site-btn,
|
||||
.gym-switch-btn {
|
||||
transition: transform .18s ease, box-shadow .18s ease, background var(--fitme-transition), color var(--fitme-transition);
|
||||
}
|
||||
|
||||
.site-btn:hover,
|
||||
.site-btn:focus-visible,
|
||||
.gym-switch-btn:hover,
|
||||
.gym-switch-btn:focus-visible {
|
||||
transform: translate(calc(var(--depth) * -1), calc(var(--depth) * -1));
|
||||
box-shadow:
|
||||
1px 1px 0 var(--neon-edge),
|
||||
2px 2px 0 var(--neon),
|
||||
3px 3px 0 var(--neon-edge),
|
||||
4px 4px 0 var(--neon),
|
||||
5px 5px 0 var(--neon-edge),
|
||||
6px 6px 0 var(--neon),
|
||||
7px 7px 0 var(--neon-edge),
|
||||
7px 7px 14px 2px rgba(var(--fitme-accent-rgb), .75),
|
||||
10px 10px 30px 4px rgba(var(--fitme-accent-rgb), .45);
|
||||
}
|
||||
|
||||
.site-btn:active,
|
||||
.gym-switch-btn:active {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow:
|
||||
1px 1px 0 var(--neon-edge),
|
||||
2px 2px 0 var(--neon),
|
||||
2px 2px 10px 1px rgba(var(--fitme-accent-rgb), .6);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Bootstrap Nav Overrides ───────────────────────────────────────────────── */
|
||||
.nav-link {
|
||||
font-weight: 700;
|
||||
|
||||
Reference in new issue
Block a user