fix(css): anima transform/opacity em vez de layout (auditoria 5.5)
As 5 transições que disparavam layout (não paint) passam a usar propriedades compositáveis, sem mudar o efeito visual: - .skip-link: top -100px→8px vira transform: translateY(-108px→0) - .nav-link:after (sublinhado): width 0→100% vira transform: scaleX(0→1) (width fica estático a 100%, position:absolute não afeta o layout à volta mesmo com a largura sempre cheia) - .crossfit-nav-link, .icon-box-item .ib-icon, .sdf-btn: transition: all troca por uma lista explícita das propriedades que realmente mudam no :hover (background-color/color/border-color/transform) — o "all" também escutava mudanças de layout no resize por nada. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
ff1d0fdc07
commit
7037077b48
1 file changed
+12
-9
@@ -96,7 +96,7 @@ img {
|
||||
/* ── Skip to content (accessibility) ───────────────────────────────────────── */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
top: 8px;
|
||||
left: 16px;
|
||||
z-index: 9999;
|
||||
background: var(--fitme-accent);
|
||||
@@ -106,11 +106,12 @@ img {
|
||||
font-weight: 700;
|
||||
font-size: .9rem;
|
||||
text-decoration: none;
|
||||
transition: top .2s;
|
||||
transform: translateY(-108px);
|
||||
transition: transform .2s;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
top: 8px;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ── Focus ring (accessibility) ────────────────────────────────────────────── */
|
||||
@@ -348,15 +349,17 @@ section[id] {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--fitme-accent);
|
||||
transition: width var(--fitme-transition);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform var(--fitme-transition);
|
||||
}
|
||||
|
||||
.nav-link:hover:after,
|
||||
.nav-item.active .nav-link:after {
|
||||
width: 100%;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
@@ -374,7 +377,7 @@ section[id] {
|
||||
border: 2px solid #b71c1c;
|
||||
border-radius: var(--fitme-radius);
|
||||
padding: 6px 14px !important;
|
||||
transition: all var(--fitme-transition);
|
||||
transition: background-color var(--fitme-transition), color var(--fitme-transition);
|
||||
}
|
||||
|
||||
.crossfit-nav-link:after {
|
||||
@@ -752,7 +755,7 @@ section[id] {
|
||||
margin: 0 auto 1.5rem;
|
||||
font-size: 2.5rem;
|
||||
color: var(--fitme-accent);
|
||||
transition: all var(--fitme-transition);
|
||||
transition: background-color var(--fitme-transition), transform var(--fitme-transition);
|
||||
}
|
||||
|
||||
.icon-box-item .ib-icon img {
|
||||
@@ -2726,7 +2729,7 @@ h3.contact-title {
|
||||
padding: 9px 20px;
|
||||
border-radius: var(--fitme-radius);
|
||||
cursor: pointer;
|
||||
transition: all var(--fitme-transition);
|
||||
transition: border-color var(--fitme-transition), color var(--fitme-transition);
|
||||
}
|
||||
|
||||
.sdf-btn:hover {
|
||||
|
||||
Reference in new issue
Block a user