/* Theme Name: PraxisCorp Author: PraxisCorp Author URI: https://www.praxiscorp.com.br/ Description: Tema de blocos (FSE) do site da PraxisCorp. Cor, tipografia, espaçamento e estilo de bloco moram no theme.json; este arquivo guarda apenas o que não tem equivalente nativo — cada regra com o motivo declarado. Paleta escura de identidade: Cinza Ardósia Profundo no corpo, Cinza Grafite nas faixas, Prata Metálico nos acentos e Azul Petróleo nos CTAs. Version: 1.1.8 Requires at least: 6.7 Tested up to: 7.0 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: praxis Tags: block-patterns, full-site-editing, accessibility-ready, one-column, wide-blocks, custom-logo */ /* ========================================================================== Regra de admissão deste arquivo -------------------------------------------------------------------------- Só entra aqui o que o theme.json não expressa. Cor, tamanho e espaçamento vêm SEMPRE de var(--wp--preset--…): nenhum literal (hex/rgb/hsl) neste arquivo, e nenhum SVG embutido — o esconderijo que a varredura de CSS não alcança. Cada bloco abaixo declara por que não pôde ser nativo. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Token de altura do cabeçalho fixo Motivo: o valor é consumido por duas regras que precisam concordar entre si (o recuo de âncora e a camada do cabeçalho). O theme.json não expõe custom property arbitrária de layout, então o token nasce aqui, em uma fonte só. O valor cobre a altura MEDIDA do cabeçalho no navegador, e ele mudou na revisão da marca: o cabeçalho passou a ser o lockup centrado da identidade — símbolo e assinatura em cima, menu embaixo. Medido no HTML publicado, nas nove páginas: 97px de 768px a 1440px de viewport, e 117px em 390px, onde o botão do menu compacto entra numa linha própria. O token vale 7,4rem = 118,4px, que é o MAIOR dos dois — reservar a mais só afasta a âncora do topo, e reservar a menos a esconde debaixo da barra, que é o defeito que a regra 2 existe para impedir. Errar para o lado seguro é decisão, não arredondamento. -------------------------------------------------------------------------- */ :root { --praxis-altura-cabecalho: 9.6rem; --praxis-camada-cabecalho: 100; --praxis-camada-overlay: 200; --praxis-alvo-minimo: 44px; --praxis-marca: 48px; --praxis-marca-rodape: 36px; } /* -------------------------------------------------------------------------- 2. Âncoras sob o cabeçalho fixo Motivo (armadilha medida): com cabeçalho sticky, navegar para `#secao` aterrissa com o alvo EMBAIXO da barra. Não existe controle nativo para reservar esse espaço. `scroll-padding-top` na raiz resolve para toda âncora do site de uma vez — inclusive as que o conteúdo criar depois. -------------------------------------------------------------------------- */ html { scroll-padding-top: calc(var(--praxis-altura-cabecalho) + var(--wp--preset--spacing--sm)); } /* -------------------------------------------------------------------------- 3. Invólucro das regiões de template part Motivo (armadilha medida): `position: sticky` fica preso ao bloco contentor, e o bloco `core/template-part` SEMPRE renderiza um invólucro com a altura exata do cabeçalho — o sticky não teria para onde deslizar e não grudaria. `display: contents` remove a caixa do invólucro (não remove o elemento do DOM nem da árvore de acessibilidade, porque é um `div` sem semântica), de modo que o
do part resolve o sticky contra o fluxo da página. Efeito colateral desejado: o invólucro sem caixa também não recebe o `margin-block-start` que o blockGap da raiz aplica a `.wp-site-blocks > *`. -------------------------------------------------------------------------- */ .praxis-regiao { display: contents; } /* -------------------------------------------------------------------------- 4. Cabeçalho fixo Motivo: `position: sticky` não é um controle do theme.json nem do bloco Group. Fica no wrapper
— NUNCA em um Group interno (o Group interno tem por contentor um invólucro da altura do próprio cabeçalho e não gruda). PROIBIÇÃO PERMANENTE, e o motivo por escrito: nem este
nem qualquer ancestral do painel do menu compacto pode declarar `backdrop-filter`, `transform`, `filter`, `perspective`, `contain` ou `will-change`. Cada uma dessas propriedades cria BLOCO CONTENTOR para descendentes `position: fixed` — o painel `inset: 0` passaria a resolver contra o cabeçalho, não contra o viewport (medido a 390px: overlay de 390x76 dentro de um cabeçalho de 77px; sem a propriedade, 390x844). Se um efeito desses for exigido no futuro, ele precisa ser SUPRIMIDO enquanto o painel estiver aberto. -------------------------------------------------------------------------- */ .praxis-cabecalho { position: sticky; inset-block-start: 0; z-index: var(--praxis-camada-cabecalho); border-block-end: 1px solid var(--wp--preset--color--prata); } /* -------------------------------------------------------------------------- 4b. A MARCA: o defeito do logotipo 0x0, medido no site publicado Motivo, e a cadeia inteira porque ela não é óbvia: o bloco `core/site-logo` serializa a largura como ATRIBUTO do bloco, e o WordPress a devolve no `width` do `` — não no invólucro. O invólucro `.wp-block-site-logo` fica sem largura, o `` é `inline-block` e se dimensiona pelo conteúdo, e a folha do core aplica `max-width: 100%` ao ``. As três coisas juntas fecham um ciclo: o `` resolve 100% contra um pai cuja largura vem do próprio ``. Medido no navegador contra o HTML publicado em www.praxiscorp.com.br: `getBoundingClientRect()` do logotipo devolvia `0x0` e a marca simplesmente não existia na tela, com o arquivo servido em 200 e íntegro (512x512). Nenhuma checagem do pacote pegava isso: markup e binário estavam certos, e o defeito só aparece no layout resolvido. A correção quebra o ciclo dando largura ao invólucro e ao link, e liberando o teto do core no ``. `block-size: auto` preserva a proporção. -------------------------------------------------------------------------- */ .praxis-cabecalho .wp-block-site-logo { inline-size: var(--praxis-marca); flex: 0 0 auto; } .praxis-rodape .wp-block-site-logo { inline-size: var(--praxis-marca-rodape); flex: 0 0 auto; } .wp-block-site-logo .custom-logo-link { display: block; inline-size: 100%; } .wp-block-site-logo img { inline-size: 100%; block-size: auto; max-inline-size: none; } /* -------------------------------------------------------------------------- 4c. Lockup da marca e menu em UMA linha Motivo (medido, e era o segundo defeito visível): com marca, assinatura, sete itens de menu e um botão de conversão na mesma faixa, o cabeçalho fechava 152px em TRÊS linhas em qualquer largura de 768px a 1440px, e a palavra "DIAGNÓSTICO" quebrava no meio dentro do botão espremido. O brand book descreve outro cabeçalho, e é ele que resolve: marca centrada no topo, menu minimalista embaixo. O botão saiu do cabeçalho — a conversão continua no herói, na faixa de fechamento de toda página e na página de contato. Medido depois: uma linha de menu de 768px a 1440px, e o menu compacto assume abaixo disso. A assinatura não quebra: ela é o nome da marca. UMA TENTATIVA INTERMEDIÁRIA FOI DESFEITA AQUI, e o registro fica porque o erro é de método, não de código: o botão voltou por um tempo ancorado em `position: absolute` na ponta direita da linha da MARCA, sob o argumento de que ali sobrava espaço. Sobrar espaço é resposta para "onde cabe", e a pergunta era "onde pertence". Medido no site publicado: o botão fechava 246x52px = 12.792px² contra 2.090px² da assinatura e 2.304px² do logotipo — 6,1x a assinatura, 5,6x o logotipo, cerca de 2,9x o lockup inteiro — a 30px da assinatura e dentro do MESMO grupo visual. Um elemento de conversão com seis vezes o peso da identidade, colado nela, faz o leitor ler a marca como moldura do botão. Pior: ancorado à direita da coluna de TEXTO e não do contêiner largo, ele flutuava em terra de ninguém a x=906..1152. A linha da marca carrega identidade; ação vai onde a leitura termina. O botão saiu de vez. -------------------------------------------------------------------------- */ .praxis-cabecalho .wp-block-site-title { white-space: nowrap; } /* -------------------------------------------------------------------------- 4e. Eixo da página: texto e grade CENTRADOS REVERTIDO EM 04/09/2026, por medição do cliente na tela. A versão anterior desta regra zerava a margem esquerda dos filhos `constrained` para criar um eixo vertical único, alinhando o texto à borda esquerda da medida larga. O cálculo estava certo e o defeito que ela corrigia era real — mas a conta que ela não fez é a do espaço que SOBRA: com medida de leitura de 45rem dentro de medida larga de 88rem, o texto ocupava 720px de uma caixa de 1408px e deixava ~690px de vazio à DIREITA, em toda seção, em toda página. Medido em 1440px na página de Método: todo bloco de texto com left=28 e 692px de sobra à direita. Vazio de 690px é defeito mais grave do que borda alternada. A correção tem duas metades. AQUI: margem automática dos DOIS lados, que é o comportamento do core — texto e grade voltam a ser centrados e a página fica simétrica. NO `theme.json`: a distância entre as duas medidas foi FECHADA — `contentSize` de 45rem para 50rem e `wideSize` de 88rem para 76rem. É essa segunda metade que trata a queixa original da revisão anterior: o recuo entre a borda do texto e a borda da grade cai de 344px para 208px por lado, agora simétrico — o olho lê como hierarquia, e não como desalinhamento. O `!important` continua necessário: a regra do core carrega `margin-left: auto !important`, e sem `!important` do nosso lado o seletor perde por mais específico que seja. O texto abaixo é o registro da versão anterior e fica de propósito: ele descreve o defeito que a regra original corrigia, e esse defeito VOLTA se alguém alargar `wideSize` outra vez sem reler isto. --- registro da versão anterior --- Motivo (medido em 1600px nas cinco páginas publicadas, e é o defeito de disposição mais grave que a revisão encontrou): a página tinha DUAS bordas esquerdas alternadas. As seções com grade de cartão são `alignfull` e o conteúdo delas nascia em x=96px; todas as outras seções eram `constrained` e nasciam em x=440px — 344px de diferença, alternando de seção em seção descendo a página. Na home a alternância era 440, 96, 440, 96, 440, 440; e a caixa da fórmula do EVA acrescentava uma TERCEIRA borda em x=468. O olho reancora a cada seção e a página passa a parecer montada em blocos que não conversam — que é também o que faz um site de coluna estreita parecer mais estreito do que é: não existe uma linha vertical que sustente a leitura. A correção tem duas metades, e as duas são necessárias. A primeira está no CONTEÚDO: toda seção passou a ser `alignfull`, para que a CAIXA da seção meça o mesmo em todas elas. Só `alignfull` serve: `alignwide` dá caixa de 88rem, e sobre ela o padding de raiz (28px) desloca o filho para x=124 em vez de x=96. Com `alignfull` a caixa mede a viewport, o padding de raiz entra uma vez só, e a conta bate com a das grades. A segunda está AQUI: o layout `constrained` do core centra cada filho na medida de leitura com `margin-inline: auto`; esta regra zera a margem da ESQUERDA e deixa só a da direita automática. O recuo não é zero — é o mesmo que a grade usa: metade da sobra entre a largura disponível e a medida larga. `max(0px, …)` anula o recuo quando a viewport é menor que a medida larga, que é quando a grade já ocupa tudo. Medido depois: x=96 em 1600px, x=28 em 1280px e em 768px, em TODAS as seções de TODAS as páginas, sem estouro horizontal. A medida de leitura fica intacta em 45rem: o que muda é de que lado sobra o espaço, não quanto texto cabe na linha. A grade de cartões fica de fora da regra: ela é `alignwide` e precisa das duas margens automáticas para ocupar os 88rem centrados. A FAIXA DE FECHAMENTO É A ÚNICA EXCEÇÃO, e é deliberada: `praxis-secao-contato` continua centrada. Numa página que ganhou um eixo à esquerda, a faixa centrada no fim funciona como ponto final — é a única seção cujo trabalho é interromper a leitura, e não continuá-la. O herói da home também segue centrado: ele mora na template part, fora de `post-content`, e o seletor não o alcança. O TÍTULO DA PÁGINA MORA NO TEMPLATE, e por isso ele precisa de um seletor próprio: `post-title` fica num grupo irmão de `post-content`, então a página de contato exibia "Contato" em x=440 sobre um corpo que já nascia em x=96 — uma quarta borda, e logo na primeira linha da página. A classe `praxis-eixo` é declarada nos templates (page, single, index, archive, search, 404 e landing) exatamente para os grupos que o seletor de `post-content` não alcança, e faz o título, o índice do blog e a paginação caírem no mesmo eixo. DUAS COISAS QUE A PRIMEIRA VERSÃO DESTA REGRA ERROU, e as duas foram medidas: zerar a margem não alinha com a grade — põe o título na borda do PADDING da seção, 84px à esquerda da grade, que é o mesmo defeito espelhado. E a tentativa de alargar as seções por CSS, com margem negativa contra o pai de 45rem, estourou o conteúdo para fora da borda esquerda da viewport: alargar caixa é trabalho do atributo `align` do bloco, que o core já clampa por viewport. E a regra do core carrega `margin-left: auto !important` — sem `!important` do nosso lado ela vence, por mais específicos que sejamos. É o terceiro e último `!important` deste arquivo. -------------------------------------------------------------------------- */ .praxis-com-grade > :not(.wp-block-columns), .praxis-eixo > :not(.wp-block-columns), .wp-block-post-content > [class*="praxis-secao-"]:not(.praxis-secao-contato) > :not(.wp-block-columns) { margin-inline: auto !important; } /* -------------------------------------------------------------------------- 5. Supressão do gap de raiz sob o cabeçalho Motivo: o blockGap da raiz existe para espaçar blocos DENTRO do conteúdo; aplicado também entre as regiões de nível raiz, abre uma faixa da cor do corpo entre o cabeçalho fixo e a primeira seção. Suprimir pelo atributo do bloco exigiria estilo inline com valor literal (`margin-top:0px`), proibido no contrato — a supressão mora aqui, restrita ao
do tema. -------------------------------------------------------------------------- */ .wp-site-blocks > main { margin-block-start: 0px; } /* -------------------------------------------------------------------------- 6. Link "pular para o conteúdo" Motivo: não existe bloco nativo para o link de salto, e ele precisa ser o PRIMEIRO nó focável do DOM, sair da tela por padrão e voltar ao receber foco. A técnica de recorte mantém o link na árvore de acessibilidade (ao contrário de `display:none`), que é o que a sonda de a11y precisa encontrar. -------------------------------------------------------------------------- */ .praxis-pular { box-sizing: border-box; display: inline-flex; align-items: center; min-block-size: var(--praxis-alvo-minimo); padding-block: var(--wp--preset--spacing--xs); padding-inline: var(--wp--preset--spacing--sm); background-color: var(--wp--preset--color--primaria); color: var(--wp--preset--color--contraste); font-size: var(--wp--preset--font-size--normal); text-decoration: underline; } .praxis-pular:not(:focus):not(:active) { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .praxis-pular:focus { position: absolute; inset-block-start: var(--wp--preset--spacing--xs); inset-inline-start: var(--wp--preset--spacing--xs); z-index: var(--praxis-camada-overlay); } /* -------------------------------------------------------------------------- 7. Menu compacto — botão de abrir e de fechar Motivo: o bloco Navigation traz o comportamento do overlay (por isso o tema não carrega script próprio para o menu), mas entrega os botões com área menor que o alvo mínimo de 24x24px da WCAG 2.2 AA. Aqui só se corrige o tamanho do alvo e o foco; nenhum comportamento é reimplementado. -------------------------------------------------------------------------- */ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--praxis-alvo-minimo); min-block-size: var(--praxis-alvo-minimo); padding: var(--wp--preset--spacing--xs); color: currentColor; } /* -------------------------------------------------------------------------- 8. Menu compacto — painel overlay Motivo: o painel precisa cobrir o viewport inteiro e ter respiro nas bordas; o bloco não expõe esses dois controles. `inset: 0` é declarado aqui de forma explícita para que a checagem meça o retângulo do viewport, e não um retângulo herdado. Ver a proibição do item 4: este painel é `position: fixed` e nenhum ancestral seu pode criar bloco contentor. -------------------------------------------------------------------------- */ .wp-block-navigation__responsive-container.is-menu-open { position: fixed; inset: 0; z-index: var(--praxis-camada-overlay); padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding-block: var(--wp--preset--spacing--xs); } /* -------------------------------------------------------------------------- 9. Caixa dos cartões e painéis próprios Motivo (armadilha medida): contêiner fora de `.wp-block-*` é `content-box` — o reset do core não o alcança —, e `max-width: 34rem` virou 618px reais com o padding somado por fora. Cada cartão e cada painel mede o que declara. -------------------------------------------------------------------------- */ .praxis-cartao, .praxis-consentimento-rodape, .praxis-consentimento-abrir, .praxis-consentimento-banner, .praxis-consentimento-banner *, .praxis-consentimento-caixa, .praxis-formulario, .praxis-formulario * { box-sizing: border-box; } /* -------------------------------------------------------------------------- 9b. Cartões lado a lado terminam na MESMA linha de base Motivo (armadilha medida, e recorrente neste tipo de instalação): em `core/columns` a COLUNA já estica — `.wp-block-columns` é flex e o `align-items` padrão é `normal`, então cada `.wp-block-column` ocupa a altura da linha inteira. O que NÃO estica é o Group do cartão dentro dela: ele é um bloco de fluxo, alto o quanto o texto pedir. O resultado é o defeito da foto — três cartões com fundos de alturas diferentes e a régua inferior irregular, com a coluna certa por trás. Não existe controle nativo para isto: o alinhamento vertical do bloco Columns move o conteúdo (topo/centro/base), não faz o filho crescer. Por isso é CSS, e por isso é escopado em `.praxis-cartao` — não vale para toda coluna do site, só para o padrão de cartão do tema. `height: 100%` resolve porque a coluna é item flex esticado e, por isso, tem altura definida — não é o caso de percentual sobre altura automática. Escolhida em vez de `:has()` para não pendurar o layout numa dependência de seletor. Empilhado no móvel (o core troca para uma coluna) a regra fica inerte, porque cada coluna passa a ter a altura do próprio conteúdo. O cartão já é `border-box` pela regra 9, então o padding não estoura os 100%. -------------------------------------------------------------------------- */ .wp-block-column > .praxis-cartao { height: 100%; } /* -------------------------------------------------------------------------- 9bb. A linha de QUATRO cartões dobra em 2x2 antes de espremer a palavra Motivo (medido no navegador, nas nove páginas, de 390px a 1440px): a linha de quatro cartões dos pilares é a única do site que fica mais estreita que a palavra que ela contém. Entre 782px e 1100px de viewport, a coluna mede menos que "Direcionamento" no corpo do H3, e o core aplica `word-break: break-word` à coluna — o título parte no meio da palavra. As linhas de TRÊS cartões nunca chegam lá, e por isso a regra é escopada por classe declarada no conteúdo, e não global: dobrar toda coluna do site por causa de uma seria mudar o layout onde não há defeito. Sem `:has()`, pela mesma razão da regra 9b — o layout não fica pendurado numa dependência de seletor. DUAS COISAS PRECISAM ACONTECER JUNTAS, e a primeira tentativa só fez a segunda: o layout do core emite `flex-wrap: nowrap` no contêiner, então mudar só a base do item não dobra nada — a linha continuava inteira e a medição continuava acusando o corte. A regra troca o `flex-wrap` E a base. O limite inferior de 782px também é medido, e não estético: abaixo dele o core empilha com `flex-basis: 100% !important`, e uma regra nossa entrando ali brigaria com um `!important` que já faz a coisa certa. A especificidade também é deliberada — `.wp-block-columns.praxis-cartoes-quatro > .wp-block-column` empata com a regra do core e vence pela ordem, que é a folha do tema depois das folhas de bloco. O `!important` do `flex-wrap` é o segundo item da lista curta deste arquivo, e tem o mesmo tipo de motivo do primeiro: a folha do bloco Columns declara `@media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap !important } }`, e declaração com `!important` só cede para outra com `!important`. A nossa é mais específica (duas classes contra uma) e vive dentro de uma faixa de viewport declarada — ela não desliga o `nowrap` do core em lugar nenhum além das linhas de cartão, e só nas faixas medidas. A FAIXA DA LINHA DE QUATRO deixou de ter teto superior, e a razão veio da crítica de UX: mesmo em 1440px, quatro cartões numa fileira dão 283px de caixa e cerca de 25 caracteres por linha. Não é só a palavra cortada abaixo de 1100px — é que a seção que EXPLICA O PRODUTO vira a menos legível da página. Em 2x2 cada cartão mede cerca de 590px, e o corpo respira. AS LINHAS DE TRÊS têm a própria faixa, e ela é mais estreita: elas só cortam palavra entre 782px e 900px — medido em "Execução e monitoramento" e em "Gestão estratégica e sustentabilidade" —, e ali empilham, que é o que o core já faz um pixel abaixo. Duas colunas de metade para três cartões deixaria o terceiro órfão em meia largura; empilhar não deixa nada órfão. O limite de 900px não é redondo por acaso: é onde a medição parou de acusar corte. -------------------------------------------------------------------------- */ @media (min-width: 782px) { .wp-block-columns.praxis-cartoes-quatro { flex-wrap: wrap !important; } .wp-block-columns.praxis-cartoes-quatro > .wp-block-column { flex-basis: calc(50% - (var(--wp--preset--spacing--md) / 2)); flex-grow: 0; } } @media (min-width: 782px) and (max-width: 900px) { .wp-block-columns.praxis-cartoes-tres { flex-wrap: wrap !important; } .wp-block-columns.praxis-cartoes-tres > .wp-block-column { flex-basis: 100%; flex-grow: 0; } } /* -------------------------------------------------------------------------- 9c. Borda do cartão Motivo (medido nesta paleta, e é o preço de uma identidade escura): o fundo do cartão (`superficie`, Cinza Médio) mede 1,41:1 contra o fundo da página (`base`, Cinza Ardósia Profundo). Diferença de fundo abaixo de 3:1 não delimita nada — o cartão existe no theme.json e não existe na tela. Quem desenha a borda do cartão é esta regra, com `prata` (4,84:1 sobre o fundo do cartão, 6,85:1 sobre o da página), e não um atributo de bloco: largura e estilo de borda em atributo de conteúdo seriam valor avulso — `1px` não é preset —, e `conteudo.sem_estilo_avulso` os acusaria com razão. A cor vem do preset; a espessura é apresentação do tema. -------------------------------------------------------------------------- */ .praxis-cartao { border: 1px solid var(--wp--preset--color--prata); border-radius: 2px; } /* -------------------------------------------------------------------------- 9d. Faixa de números — a régua de leitura dos indicadores Motivo: os KPIs da faixa de credibilidade precisam terminar na mesma linha de base e ficar centrados na coluna, e a identidade pede respiro generoso entre eles. `core/columns` alinha a caixa, não o conteúdo dentro dela. Cor e tamanho continuam vindo do preset, pelo atributo do bloco; aqui só o alinhamento, que não tem controle nativo no ponto certo. -------------------------------------------------------------------------- */ .praxis-indicador { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs); align-items: center; text-align: center; } /* -------------------------------------------------------------------------- 9e. Sobretítulo e número — as duas marcas tipográficas da identidade Motivo, e ele é do CONTRATO e não do gosto: caixa alta, espaçamento de letra ampliado e peso de fonte são exatamente o acabamento que a identidade define para o sobretítulo e para o KPI. Declará-los no CONTEÚDO exigiria estilo inline com valor literal (`text-transform:uppercase`, `font-weight:500`), e `conteudo.sem_estilo_avulso` varre o atributo `style=` do markup publicado SEM a lista de isenções que vale para o atributo de bloco — ele reprovaria, com razão: valor literal no conteúdo é como o sistema de design vaza. Aqui as duas viram classe, e o conteúdo carrega só `className`. Cor e tamanho continuam vindo do preset, pelo atributo do bloco: nada de cor aqui. -------------------------------------------------------------------------- */ .praxis-sobretitulo { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .praxis-numero { font-weight: 500; line-height: 1.1; } /* -------------------------------------------------------------------------- 9f. O algarismo do pilar Motivo (achado da crítica de UX): a página de pilares repete o MESMO bloco quatro vezes — sobretítulo prata, título Playfair, corpo, lista —, e a única variação entre elas é a cor de fundo. Sem variação de forma o leitor não rastreia onde está na rolagem, e as quatro seções pedem a mesma atenção, o que na prática significa que nenhuma recebe. O algarismo romano em corpo grande e peso leve dá âncora visual a cada bloco sem acrescentar elemento novo: é o mesmo lugar que o sobretítulo ocupava, com outro tratamento. Peso 300 e não 500 como o KPI: aqui o número é marca de posição, não dado — e um "03" pesado competiria com o título que vem logo abaixo. ARÁBICO, e não romano: a primeira versão usou I, II, III e IV, e em Montserrat Light um "I" isolado é uma haste vertical sem serifa — na tela ele lê como um pipe, não como um número, e o "II" lê como dois. Numeral romano precisa de fonte com serifa ou de contexto ("Pilar I") para ser lido como numeral; sem os dois, ele vira ruído gráfico exatamente no lugar que existe para orientar. -------------------------------------------------------------------------- */ .praxis-algarismo { font-weight: 300; line-height: 1; letter-spacing: 0.06em; } /* -------------------------------------------------------------------------- 10. Campos de formulário próprios Motivo (armadilha medida): `

` usado como linha de campo mantém a margem padrão do navegador — o reset do core só alcança `.wp-block-*`. Cada campo somava ~2x1em à altura por cima do gap da grade (cartão de 609px para três campos; 346px com as margens zeradas). Quem espaça é o layout, não a margem. `.praxis-formulario` é o contrato de apresentação entre o tema e o site-core: o tema estiliza, o comportamento do formulário é do plugin (princípio 4). -------------------------------------------------------------------------- */ .praxis-formulario p, .praxis-formulario label, .praxis-formulario ul, .praxis-formulario .praxis-campo { margin: 0; } .praxis-formulario { display: grid; gap: var(--wp--preset--spacing--sm); } /* -------------------------------------------------------------------------- 11. Tamanho do texto dos controles de formulário Motivo (armadilha medida): controle com `font: inherit` herda o tamanho do contexto — dentro de uma chamada com texto `medio`, inputs e botão renderizam maiores e engordam ~6px por controle. O tamanho é fixado em 1rem, explícito. -------------------------------------------------------------------------- */ .praxis-formulario input, .praxis-formulario select, .praxis-formulario textarea, .praxis-formulario button { font-family: inherit; font-size: 1rem; line-height: 1.4; color: var(--wp--preset--color--contraste); background-color: var(--wp--preset--color--superficie); border: 1px solid var(--wp--preset--color--prata); border-radius: 2px; padding-block: var(--wp--preset--spacing--xs); padding-inline: var(--wp--preset--spacing--xs); min-block-size: var(--praxis-alvo-minimo); } .praxis-formulario button { background-color: var(--wp--preset--color--primaria); border-color: var(--wp--preset--color--prata); color: var(--wp--preset--color--contraste); font-weight: 600; padding-inline: var(--wp--preset--spacing--md); cursor: pointer; } /* -------------------------------------------------------------------------- 12. Quebra de palavra longa Motivo (armadilha medida): o valor `anywhere` desta propriedade COLAPSA títulos dentro de flex/grid (a largura mínima do conteúdo vai a zero). `break-word` quebra só a palavra que não cabe e preserva a medida do título. O valor que colapsa nunca aparece neste arquivo. -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, .wp-block-post-title, .wp-block-query-title, .wp-block-site-title { overflow-wrap: break-word; } /* -------------------------------------------------------------------------- 12b. O rodapé: três faixas curtas, e não uma lista de títulos de página Motivo (medido no site publicado, e a causa raiz era de MARKUP, não de CSS): o rodapé fechava 548px de altura — mais que a dobra de um notebook de 13" — com um menu que ocupava 704x127px em TRÊS linhas. A causa: o bloco `core/navigation` do rodapé trazia `` como bloco interno, e a segunda guarda de `praxis_navegacao_ref()` deixa passar intacto todo bloco que já tem filhos próprios. Sem `ref`, o que renderizava não era o menu declarado (sete rótulos curtos) e sim a lista automática de páginas, com o TÍTULO INTEIRO de cada uma: "Transformando incerteza em clareza estratégica" sozinho media 380px, "Pilares da Gestão Estratégica" 230px, "Produção Intelectual" 165px. Um rodapé não é um sumário do site. A correção do tamanho é no arquivo da part — a navegação virou auto-fechada e voltou a receber o `ref` do menu declarado. O que sobra para o CSS é a proporção: padding de seção (`xl`, 80px) num rodapé de três linhas reservava 160px só de respiro vertical, e virou `lg`; a assinatura desceu para junto da marca em vez de ocupar uma faixa própria; as três faixas passaram a correr na medida LARGA, que é a mesma das grades de cartão do conteúdo — um bloco de 864px centrado numa faixa escura de 1408px é uma ilha, não um rodapé. As duas regras abaixo cobrem o que o layout de blocos não expressa: a linha da assinatura não deve esticar até a metade da faixa, e o menu alinhado à direita só faz sentido enquanto ele divide a linha com a marca — quando ele quebra para a linha de baixo, alinhar à direita descola o menu da borda de leitura de tudo o que está acima. -------------------------------------------------------------------------- */ .praxis-rodape-marca p { max-inline-size: 34ch; } @media (max-width: 781px) { .praxis-rodape-menu .wp-block-navigation__container { justify-content: flex-start; } } /* -------------------------------------------------------------------------- 13. Controle de consentimento no rodapé — LINK DE TEXTO, e nada mais Motivo: o controle existe em toda página publicada (mora na template part do rodapé, por construção), mas não há bloco nativo para ele. O tema fornece a apresentação; abrir o banner, desligar as tags, persistir a negativa pelo TTL e religar no re-aceite são comportamento do site-core (princípio 4). Sem JavaScript o controle não opera — perda declarada no relatório. ELE CONTINUA SENDO UM `