/* ===================================================================== page-transition.css — continuidade entre páginas, com o logotipo ===================================================================== v14 — as DUAS linhas encostam nas bordas e, no centro, as cores trocam de lado — em degradê, não em corte. A página que sai desliza para CIMA e a nova sobe atrás dela. Entre as duas abre um vão, e o logotipo está fixo no meio da tela: o vão passa por cima dele como uma fresta e o revela inteiro justamente quando cruza o centro — que é onde a curva desacelera. É ali, com o logotipo inteiro à vista, que as duas cores trocam de lugar: a faixa rosa de letras laranja vira faixa laranja de letras rosa, num degradê rápido de uns três décimos de segundo. A nova página termina de subir já com as cores invertidas. O logotipo é feito dos MESMOS paths do SVG do rodapé, redistribuídos em duas linhas. Medidas reais dos dois grupos, em unidades do viewBox original: S̄AMU 244,50 x 75,25 C.LIMA 290,50 x 82,25 Como o S̄AMU nasce mais estreito, ele é ampliado por 290,50 / 244,50 = 1,188139 para chegar à mesma largura. A escala é UNIFORME: esticar só a largura engordaria as hastes verticais e desenharia outra letra. Consequência natural disso é que a linha de cima fica ~19% maior que a de baixo — é o mesmo efeito de uma capa de revista com as duas linhas justificadas nas duas margens. COMO LIGAR ---------- Uma linha no de TODAS as páginas que participam, esta, igual, sem número de versão: IGUAL em todas é o que faz a transição ser sempre a mesma. Numa transição entre páginas, quem desenha a animação é a página de DESTINO: o estilo da página que sai é ignorado. Duas páginas pedindo endereços diferentes — uma com ?v=12, outra com ?v=13, ou uma delas sem a linha — são dois arquivos diferentes para o navegador e para o CDN, e a inversão passa a acontecer só nas navegações que chegam na página certa. É isso que faz o defeito parecer aleatório. Sem ?v=, o cache se resolve no servidor, uma vez, sem editar página nenhuma: purge no CDN ao publicar e Cache-Control: public, max-age=0, s-maxage=31536000 que deixa o CDN guardar o arquivo e o navegador revalidar a cada visita — um 304 não custa nada. ONDE FUNCIONA ------------- Chrome/Edge 126+ e Safari 18.2+, desktop e mobile. No Firefox ainda não: lá o clique navega direto. Precisa ser http/https. ===================================================================== */ :root { /* ---------------------------------------------------------------- Os botões de ajuste. ---------------------------------------------------------------- */ /* Largura do logotipo. 100vw = as duas linhas encostando nas bordas. É o controle de tamanho principal: como a altura é 0,598 x a largura, cair para 80vw deixa o logotipo com 47.8vw de altura em vez de 59.8vw. */ --pt-logo-w: 100vw; /* O respiro acima e abaixo do logotipo: faixa = logotipo (59.779vw) + respiro x 2 Em 4vw a faixa dá 67.8vw. Em 0, termina exatamente na borda das letras. Para outra altura: respiro = (altura desejada - 59.779vw) / 2 */ --pt-pad: 4vw; /* Cor da faixa nas duas metades da passagem. A cor das LETRAS de cada metade está dentro do data URI correspondente, mais abaixo. 1ª metade faixa --pt-band-bg · letras do --pt-logo-img 2ª metade faixa --pt-band-bg-2 · letras do --pt-logo-img-2 A faixa caminha de uma à outra em degradê, então no meio da passagem ela é uma cor que não está escrita em lugar nenhum: a mistura das duas. Estas duas cores e as duas imagens aparecem repetidas, mais abaixo, como valor de reserva dentro de cada var(). Uma var() sem reserva que aponte para nada não deixa a declaração de lado: ela ANULA a declaração inteira — a faixa ficaria transparente, ou o logotipo sumiria por completo. Com a reserva escrita ali, o pior caso é a transição rodar com a cor antiga, e nunca sem cor. Se trocar a paleta, troque nos dois lugares. Para a inversão ser uma inversão de verdade, a faixa de cada metade tem de ser a cor das letras da outra — são quatro valores para manter em par, dois aqui e dois dentro dos data URIs. */ --pt-band-bg: #FFC7C6; --pt-band-bg-2: #E8501A; /* Duração da passagem das duas páginas. Acompanha a faixa: as páginas viajam uma tela MAIS a faixa, então faixa mais alta é mais distância — sem subir o tempo, a transição fica mais apressada em vez de igual. */ --pt-dur: 1.35s; /* Curva. Ease-out-in: sai rápido, desacelera no meio da tela — é o que dá tempo de LER o logotipo — e sai rápido de novo. Para uma passagem lisa, troque por cubic-bezier(.76, 0, .24, 1). */ --pt-ease: cubic-bezier(.25, .9, .75, .1); /* O logotipo, já em contorno (sem texto, sem fonte para carregar), embutido como data URI — a faixa nunca aparece sem ele por causa de um arquivo baixando. O `data:image/svg+xml,` na frente é obrigatório: é ele que diz ao navegador que o que vem depois é a imagem, e não um caminho. COR DAS LETRAS: o %23E8501A logo no começo, depois de de dentro: · o primeiro grupo é o S̄AMU. O `scale(1.188139)` é o que o faz chegar às bordas; baixando esse número ele volta a ficar mais curto que o C.LIMA. · o segundo é o C.LIMA. O segundo número do translate dele (91.41) é o espaço entre as linhas. */ --pt-logo-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='290.50'%20height='173.66'%20viewBox='0%200%20290.50%20173.66'%3E%3Cg%20fill='%23E8501A'%3E%3Cg%20transform='translate(-0.00,-4.46)%20scale(1.188139)'%3E%3Cpath%20d='M40.7,33.83C36,32,31.73,28.5,26.34,28.88c-3.79.27-8.77,3-8.4,7.31.94,11.1,33.28,5.84,30.7,27.06C46.19,83.4,11.85,82.46.16,70.86c-1.28-2.33,5.6-7.22,7.21-8.86,6.64,3.71,12.9,8.36,21.1,5.08,4.64-1.85,6-7,1.77-10.25C22,50.42,1.89,53.51,2.79,35.48c1-20.49,33.08-22,44.92-10.14Z'/%3E%3Crect%20x='3.73'%20y='5.84'%20width='49'%20height='8'/%3E%3Cpath%20d='M80.68,3.89l14,74-7.89-.1-3-14.46-19.19.14-3,14.32-6.91.1L68.61,4.42Zm-6.94,10-8,41.43,2,1.16,13.5.17,1.4-2.15Z'/%3E%3Cpath%20d='M174.73,78.84h-16.5c-1.78-1.52-2.26-3.23-2.52-5.48-1.84-15.75,1.43-34.86,0-51l-1.38-2.63c-5.65-2.35-7.19.28-7.63,5.56-.86,10.15-1.19,33.27,0,43.07.51,4.17,4,6,3,10.47h-18c.25-1.88-2-5.34-2-6.5v-52l-2.45-1.51-5.55,2v49.5c0,.48,5.17,4.66,3,8.5h-21.5l-1.52-2.45c0-2.07,2.32-3.6,2.78-5.29,1.24-4.62,1.12-47.68.29-53.81-.25-1.85-5.46-8.45-1.55-8.45h18.5v6c3.22-.35,4.46-3.67,7.29-5.2,7.66-4.14,13.63-1.47,18.31,5.17,10.08-9,23.67-11.66,25.39,5.54,1.51,15.18-2.09,34.5-.05,49.05.45,3.13,3.2,5.61,2.06,9.44'/%3E%3Cpath%20d='M204.48,11.1c1.92,2.23.37,8.11-.08,10.93-1.91,12.27-9.11,29.24-9.7,40.36-.79,14.92,17.14-1.12,21-6.07,3.46-4.43,4.83-8.21,6.52-13.48,1.62-5,6.14-27.8,8-30,1.7-2,7.79-.58,10.52-1L227.08,67.22c.47,8.12,12.76-3.65,15.16-6.37l2.48,2.48c-10.52,12.09-35.5,28.58-27-2.49-5.81,5.61-25.25,22.24-33.33,17.08-2.52-1.61-1.74-10.33-1.38-13.3,1.63-13.85,9.4-29,10.76-43.25-.92-6.49-12.44,3.95-14.54,6.46l-2.5-3.46c4.17-3.52,22.78-19,27.75-13.27'/%3E%3C/g%3E%3Cg%20transform='translate(-254.25,91.41)'%3E%3Cpath%20d='M274.91,71c.25.81,3.13,2.58,4.2,2.59,5.94,0,6.84-13.15,6.76-17.44h6.91c4.54,26-25.67,34.22-35.27,9.43-6.95-18-4-72.78,26-60.88,14.88,5.88,11.47,31.75.28,23.74-6.09-4.36-.41-14.42-2.23-17-1.67-2.32-6.69-.93-6.69.65Z'/%3E%3Cpath%20d='M308.24,78.48c-6.88,6.44-16.68-3.43-11-12.8,7-11.58,20,4.36,11,12.8'/%3E%3Cpolygon%20points='327.77%204.3%20327.77%2069.18%20347%2069.18%20347%2078.79%20315.76%2078.79%20315.76%204.3%20327.77%204.3'/%3E%3Cpath%20d='M373.27,18.88c3,4.8-10,43.19-6.86,53.12a2.56,2.56,0,0,0,2.79,2l9-9c1.1-1.61,3.63.66,3.6,1.23-.07,1.72-13.38,13.9-16.09,15.11-7.8,3.44-10.59-.34-10.41-7.9.34-14.88,6.32-31.28,7.3-46.25-6.64-.45-8.78,5.71-12.63,9.6l-3-3c7.1-6.7,15.25-18.43,26.27-14.88'/%3E%3Cpath%20d='M367.71,2.19c7.93-7.95,14.82,8.08,4.54,11.25-6.78,2.09-7.66-8.13-4.54-11.25'/%3E%3Cpath%20d='M406.47,11.51l3.6,7.19c8-11.24,27.4-11.75,34.83,0C456,7.36,479.91,6,487.26,22c.46,1,2.71,7.68,2.71,8.11V76.39H468.34v-39c0-6.28-8.46-12.22-14.38-7.16a35.8,35.8,0,0,0-3.64,6V76.39H427.49V34.94c0-.54-3.3-5-4.12-5.49-6.22-3.82-13.9,3.57-13.9,9.1V76.39H387.84V11.51Z'/%3E%3Cpath%20d='M526,70.38c-22.18,18.39-29.12-2.51-26.31-23.32,2.17-16,24.2-15.07,26.13-20.72,1.09-3.18,1.07-13.66-4-13.66-5.3,0-3.62,7.1-4.46,10-1.63,5.69-13.91,6.24-16,2.07-4.75-20.45,30.69-24,38.87-10,7.63,13-2,44.7,4.93,59.74-5.43,5.38-17.24,4-19.18-4.06m0-36c-10.66.12-9.25,18.18-8.48,25.9,1,10.14,8.48,6.27,8.48,2.33Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* O MESMO logotipo com as letras da segunda metade — byte por byte igual ao de cima, só com outro valor depois de