/* * CSS global do tema (site inteiro): cover pré-paint da transição de tela, * o overlay da transição de tela em círculo, e a ondinha de feedback de * clique. (O cursor customizado que seguia o mouse foi removido a pedido * do usuário em 2026-09-17 — cursor do sistema normal agora, só o efeito * de clique ficou.) * * Extraído de header.php/footer.php (onde vivia inline, duplicado a cada * carregamento de página) para cá, um arquivo enfileirado e cacheável pelo * navegador. Ver functions.php (temanovo_scripts) para o enqueue. * * Convenção de z-index deste bloco: faixa 100000+, acima da WP Admin Bar * (z-index: 99999, só visível pra usuário logado) — sem isso, esses * elementos ficavam escondidos atrás da admin bar sempre que apareciam * perto do topo da tela (achado em 2026-09-17, quando ainda existia o * cursor customizado). Continua nunca um valor próximo do máximo (ex.: * 999999), pra nunca competir com o que o mediador de anúncios inserir * pro visitante comum (ver _docs-internas/README.md, seção 5) — a admin * bar nunca aparece pra visitante, então subir acima dela não viola essa * regra. * * Exceção deliberada à regra "anúncio sempre ganha" (2026-09-17, ver * README): esses elementos são decorativos e momentâneos — não ocupam um * "espaço de conteúdo" que um anúncio precisaria pra aparecer, diferente * do mini player (assets/content-single.css), que É uma caixa de * conteúdo real competindo pelo mesmo canto da tela que um anúncio * âncora usaria. Por isso só o mini player foi forçado a perder sempre * (z-index: 0); esses continuam nessa faixa alta. */ /* ============================================ COVER PRÉ-PAINT DA TRANSIÇÃO DE TELA A classe "tn-pt-cover" é adicionada por um script síncrono no (header.php), antes do wp_head() — cobre a tela ANTES do primeiro paint da página nova, evitando o flash de conteúdo sem estilo. Essa regra em si pode morar num arquivo externo com segurança: um no já bloqueia a renderização até carregar, então o efeito "sem flash" continua garantido mesmo com o CSS fora do HTML. ============================================ */ html.tn-pt-cover::before { content: ''; position: fixed; inset: 0; z-index: 100030; background: var(--tn-color-primary, #6c5ce7); } /* ============================================ EFEITO DE CLIQUE (site inteiro) Cursor do sistema normal, sem nada customizado seguindo o mouse — só uma ondinha em degradê que expande no ponto clicado. ============================================ */ .tn-cursor-ripple { position: fixed; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--tn-color-primary); pointer-events: none; z-index: 100040; transform: translate(-50%, -50%) scale(0.4); opacity: 0.7; animation: tnCursorRipple 0.5s ease-out forwards; } @keyframes tnCursorRipple { to { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .tn-cursor-ripple { animation: none; display: none; } } /* ============================================ TRANSIÇÃO DE TELA AO NAVEGAR (site inteiro, todo dispositivo) Um círculo em degradê expande a partir do ponto clicado até cobrir a tela toda, só então troca de página; na página seguinte ele faz o caminho inverso (encolhe a partir do mesmo ponto), revelando o conteúdo por baixo. O cursor customizado (bolinha branca) fica por cima de tudo, dando a impressão de que só o ponto do mouse continua claro enquanto o resto da tela muda de cor. ============================================ */ .tn-page-transition { position: fixed; inset: 0; z-index: 100030; pointer-events: none; overflow: hidden; } .tn-page-transition.is-active { pointer-events: auto; } .tn-page-transition__circle { position: absolute; top: 0; left: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; /* Sem branco no centro do degradê aqui de propósito: como o círculo cresce via "scale()", qualquer stop percentual cresceria junto e o "ponto branco" viraria uma mancha enorme. */ background: radial-gradient(circle, var(--tn-color-primary) 0%, var(--tn-color-secondary) 100%); transform: scale(0); transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; } .tn-page-transition.is-no-transition .tn-page-transition__circle { transition: none; } @media (prefers-reduced-motion: reduce) { .tn-page-transition__circle { transition: none; } }