/** * Folha global do tema — a única enfileirada em TODOS os templates. * * POR QUE ESTA FOLHA EXISTE * ========================= * Nasceu da fusão de assets/css/a11y.css com assets/css/forms-cf7.css. As duas * eram enfileiradas lado a lado, incondicionalmente, sem dependência declarada e * sem ordem relevante entre si — ou seja, eram a mesma folha servida em duas * requisições. Medido na home antes da fusão: 2.610 B e 1.457 B transferidos, em * duas requisições que bloqueiam a renderização. * * O motivo de ambas viverem fora de qualquer `if` continua valendo e é o que * torna esta folha especial: as duas templates de venda carregam output.css como * CSS-base, e o resto do site carrega main.css. Uma folha que dependa de um * desses handles some no contexto onde ele não é registrado — o WordPress * simplesmente não imprime um handle cuja dependência não existe. Foi assim que * a home ficou sendo a única página do site sem indicador de foco. * * NÃO DECLARE DEPENDÊNCIA AO ENFILEIRAR ESTA FOLHA, pelo mesmo motivo. * * As seções abaixo preservam a documentação das duas folhas de origem. */ /* ========================================================================== Acessibilidade — skip-link, foco visível, admin bar, movimento reduzido (origem: assets/css/a11y.css) ========================================================================== */ /* Skip-link: aparece quando recebe foco via teclado (Tab) */ .skip-link { position: absolute !important; top: -100px; left: 1rem; z-index: 100000; padding: 0.75rem 1.25rem !important; background-color: #0b60e0 !important; color: #fff !important; font-size: 0.9375rem !important; font-weight: 600; text-decoration: none !important; border-radius: 8px !important; box-shadow: 0 8px 20px rgba(11, 96, 224, 0.30); transition: top 200ms ease; clip: auto !important; clip-path: none !important; width: auto !important; height: auto !important; /* Desfaz o recuo negativo de `.screen-reader-text`, que o skip-link também carrega no markup: sem isto ele nasce 1px acima e à esquerda do previsto. */ margin: 0 !important; overflow: visible !important; white-space: nowrap; } /* Quando o link recebe foco, sai da posição "hidden" da .screen-reader-text */ .skip-link:focus, .skip-link:focus-visible { top: 1rem; outline: 3px solid rgba(11, 96, 224, 0.45); outline-offset: 2px; } /* * Compatibilidade com a barra de administração do WordPress * quando o header do tema é fixo no topo da página. * * Fica AQUI porque esta é a única folha do tema enfileirada em todos os * templates — inclusive nas duas de venda, que carregam outro CSS-base. As * regras viviam duplicadas em src/css/output.css (mirando `.mainMenu`, e sem * !important) e em assets/css/customized-sales-page.css (mirando `#header`), * cada cabeçalho com o seu próprio gancho. * * O gancho passa a ser um só, aplicado aos cabeçalhos do tema. Os valores não * são escolha: 46px é a altura da admin bar abaixo de 783px, 32px acima, e * 783px é o breakpoint do core. O !important é necessário porque o WordPress * injeta estilo inline na admin bar. * * O SELETOR É `.site-header--fixed`, E NÃO `.site-header`. * ======================================================= * `.site-header` está nos TRÊS cabeçalhos do tema, e só dois deles são fixos: * o das páginas de venda (`fixed top-0`, em template-parts/sale/navbar.php) e o * da Customized Sales Page (`position: fixed`, em * assets/css/customized-sales-page.css:232). O terceiro, * template-parts/header-content.php, não é fixo — mas carrega junto a classe * `navbar` do Bootstrap, e o Bootstrap 5.3 declara `.navbar{position:relative}`. * Em elemento posicionado, `top` DESLOCA. * * Medido em /temas-wordpress-em-portugues/ a 1440px, antes da correção: sem a * classe `admin-bar` no , o cabeçalho computava `top: 0px` e nascia em 0; * com ela, `top: 32px`, topo em 32 e base em 150 — enquanto o

seguinte * começa em 118. Ou seja, 32px de sobreposição do cabeçalho sobre o menu * principal, em toda página que não é de venda, acima de 992px, e só para quem * está logado. O comentário daquele arquivo afirmava que a regra era inócua ali; * a classe do Bootstrap desmentia a afirmação na mesma linha. * * O modificador é o que separa as duas situações sem depender de suposição sobre * `position`: quem é fixo declara que é. */ .admin-bar #wpadminbar { position: fixed !important; } .admin-bar .site-header--fixed { top: 46px !important; } @media (min-width: 783px) { .admin-bar .site-header--fixed { top: 32px !important; } } /* Foco visível padronizado para elementos interativos sem estilo customizado */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(11, 96, 224, 0.35); outline-offset: 2px; } /* * Preferência de movimento reduzido — WCAG 2.3.3. * * Fica AQUI pelo mesmo motivo das regras da admin bar acima: esta é a única * folha do tema enfileirada em TODOS os templates. As transições que precisam * ser neutralizadas estão espalhadas por seis arquivos — customized-sales-page, * archive-product, whatsapp-button, src/css/main, src/css/output e o skip-link * daqui —, e uma regra por folha seria seis lugares para manter em sincronia. * * O JavaScript do tema já respeitava a preferência (shared-sales-ui.js lê a * media query e a repassa ao scrollIntoView; main-sale-page.js faz o mesmo no * carrossel). O estilo não respeitava: quem marca "reduzir movimento" no sistema * recebia rolagem instantânea e, ao mesmo tempo, todas as transições de hover, * a sombra animada do cabeçalho e a abertura animada do acordeão. * * POR QUE DURAÇÃO MÍNIMA, E NÃO `animation: none` * =============================================== * `none` congelaria o spinner de archive-product.css:474 * (`tav-spinner 720ms linear infinite`), que é indicador de carregamento: parado, * ele deixa de comunicar que algo está em curso e vira ruído visual permanente. * Com duração mínima e uma iteração, o elemento continua presente e estático. * * A duração também preserva os eventos `transitionend` e `animationend`, que * `none` suprimiria — nenhum script do tema depende deles hoje, e não custa nada * manter a porta aberta. * * `!important` porque estas declarações precisam vencer regras mais específicas * de qualquer folha do tema ou de plugin; nenhuma transição autoral usa * `!important`, então não há disputa a resolver por especificidade. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Mensagens de resposta do Contact Form 7 (origem: assets/css/forms-cf7.css) ========================================================================== */ /* * Estas seis regras viviam TRIPLICADAS — em src/css/main.css, src/css/output.css * e assets/css/customized-sales-page.css —, com valores idênticos e só o * espaçamento divergindo. Nenhuma página carrega duas dessas folhas ao mesmo * tempo, então não havia conflito de cascata; o custo era de manutenção, e é o * mesmo tipo de divergência que o tema já pagou caro em template-parts/cart-link.php * e em assets/js/whatsapp-button.js. * * O formulário pode ser injetado em QUALQUER página — pelo bloco de contato das * duas templates de venda, por shortcode no conteúdo de um post ou de uma página * comum —, então precisa valer globalmente, como as regras de acessibilidade * acima. É o que motivou juntar as duas folhas numa só. * * O QUE NÃO ENTROU * ================ * Os estilos de CAMPO do formulário (input, textarea, select, botão de envio, * espaçamento entre grupos) ficaram em src/css/output.css: eles existem só na * template "Apresentação do template", que não carrega Bootstrap, e dependem do * preflight do Tailwind daquele build. Trazê-los para cá os aplicaria também ao * formulário dentro de um post comum, onde o Bootstrap já os resolve. */ .wpcf7-response-output { margin: 10px 0; padding: 10px; border-radius: 4px; font-size: 16px; } .wpcf7-validation-errors { background-color: #f2dede; border-color: #ebccd1; color: #a94442; } .wpcf7-mail-sent-ok { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; } .sent .wpcf7-response-output { padding: 10px 0 !important; background-color: #dafcec; color: #02160d; text-align: center; border-radius: 7px; } .invalid .wpcf7-response-output { padding: 10px 0 !important; background-color: #eccbcb; border-color: #eccbcb !important; color: #a00; text-align: center; border-radius: 7px; } /* * O spinner só ocupa espaço enquanto o envio acontece. * * O Contact Form 7 insere o do spinner logo depois do botão e o mantém * em `visibility: hidden` quando o formulário está parado — e visibilidade * oculta continua RESERVANDO a caixa do elemento. Com `display: block` e 10px * de margem em cima e embaixo, isso somava 34px de sobra permanente abaixo do * botão de envio, num rodapé que já tinha o espaçamento do parágrafo e o * respiro do cartão: 83px medidos contra 33px no topo do formulário. * * Tirado do fluxo em repouso, o rodapé volta a ser só o respiro do cartão. Na * hora do envio o spinner reaparece centralizado, com o mesmo tamanho de antes. * * `form.submitting` é a classe que o próprio plugin acrescenta ao formulário * enquanto a requisição está em curso — a mesma que ele usa para trocar o * `visibility`. Depender dela evita inventar um estado paralelo. */ .wpcf7-spinner { display: none; } form.submitting .wpcf7-spinner { display: block; margin: 10px auto; }