@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:wdth,wght@100..200,100..900&family=Inter:wght@300..700&display=swap'); /* V1.1: transição entre páginas — View Transitions API "cross-document" (Chrome/Edge 126+; navegadores sem suporte simplesmente navegam sem transição nenhuma, sem quebrar nada). Não precisa de JS pra navegação normal: basta essa regra existir nas duas páginas envolvidas (a que sai e a que entra) — como base.css carrega em todas, toda navegação interna do site já entra automaticamente. (Pra troca de aba trabalhos/bio do diretor, que não é uma navegação de verdade — é hash mudando dentro da mesma página — `js/diretor-tabs.js` aciona a versão "same-document" da mesma API, `document.startViewTransition()`, pra ganhar o mesmo efeito.) V1.1.1: o cross-fade padrão do navegador (antiga e nova sobrepostas, opacidade trocando ao mesmo tempo) foi trocado por um "dip to white" — a página antiga dissolve pro branco, e só depois o branco dissolve pra nova página. Duas animações em sequência, cada uma cobrindo metade do tempo total (`--t-page`), em vez do crossfade simultâneo do browser. */ @view-transition { navigation: auto; } ::view-transition-image-pair(root) { background-color: #fff; } @keyframes dip-to-white-out { to { opacity: 0; } } @keyframes dip-to-white-in { from { opacity: 0; } } ::view-transition-old(root) { animation: dip-to-white-out calc(var(--t-page) / 2) var(--ease-out) both; } ::view-transition-new(root) { animation: dip-to-white-in calc(var(--t-page) / 2) var(--ease-out) calc(var(--t-page) / 2) both; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* V1.17.6: "a página, na versão mobile, parece 'solta' pros lados" — não é overflow de conteúdo (nenhuma página mede `scrollWidth` maior que a viewport, conferido via Playwright); é o bounce elástico que Safari/Chrome mobile dão ao arrastar a página além da borda, mesmo sem nada pra rolar. `overscroll-behavior-x` mata só esse bounce horizontal, sem mexer em `overflow` — não esbarra no aviso abaixo (`overflow-x` não pode subir de `body`, `overscroll-behavior` pode, são propriedades diferentes, uma não quebra o `position: sticky` do título que a outra quebraria). */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overscroll-behavior-x: none; } /* V1.17.2: `body` vira coluna flex de altura mínima igual à viewport — junto com `.feed { flex: 1 }` (layout.css), é o que gruda o rodapé no fim da tela quando o conteúdo é mais curto que ela (poucos projetos, caso da Daniela por ora). Sem isso, o rodapé some no fim do `
` e sobra uma faixa vazia até o fim da viewport — normal em qualquer página curta, mas só ficou visível agora que uma página real tem pouco conteúdo. `100dvh`, não `100vh` (única exceção da convenção do projeto, que usa `vh`): no Safari mobile `100vh` conta a barra de endereço como se estivesse sempre recolhida, então a viewport "real" é menor que `100vh` — exatamente o tipo de gap que este fix existe pra fechar. `.logo`/`.burger`/`.panel`/os modais são todos `position: fixed`, fora do fluxo — só `
` e `