, o recuo da topbar, o token --content (que dimensiona os blocos centrais) e --vw-util (que dimensiona a maquete do hero). Transicionar `width` e deixar os dois tokens trocarem de valor de uma vez dava exatamente a quebra que se via: metade da tela deslizava, a outra metade pulava. Pendurando as quatro contas na MESMA variável, todas caminham juntas. Quem move a variável é o script (ver `empurra()` no iara-drawer.js), com um tween em requestAnimationFrame. A rota CSS — registrar a variável com @property e transicioná-la — foi tentada primeiro e não vinga: medida ao vivo, a propriedade registrada fica congelada no valor inicial enquanto a transição estiver declarada no (com `transition: none` o mesmo valor aplica na hora). Um tween em JS não depende desse canto do motor e dá o mesmo resultado em qualquer navegador. -------------------------------------------------------------------------- */ body { --iara-empurrao: 0px; } /* ========================================================================== 0. O EMPURRÃO — só no desktop -------------------------------------------------------------------------- No desktop a gaveta NÃO cobre a página: ela abre espaço. O conteúdo encolhe 370px e a topbar fixa recua o mesmo tanto, como no original (.site-public-main { width: calc(100% - 370px) } + #nav { right: 370px }). Em tablet e celular o comportamento é o contrário — a gaveta passa por cima —, e é por isso que este bloco vive inteiro dentro de min-width 1024. Aqui não existe .site-public-main: o equivalente são os dois blocos que toda página do projeto tem,