From 7037077b4877e9093a9f4040125f82bf2838214b Mon Sep 17 00:00:00 2001
From: andre <andre.filipe6@gmail.com>
Date: Fri, 25 Sep 2026 16:55:56 +0100
Subject: [PATCH] fix(css): anima transform/opacity em vez de layout (auditoria
 5.5)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 site/assets/css/style.css | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/site/assets/css/style.css b/site/assets/css/style.css
index 7f55c5f..bca14cd 100644
--- a/site/assets/css/style.css
+++ b/site/assets/css/style.css
@@ -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 {