/* Theme Name: Philon Author: PraxisCorp Gestão e Tecnologia Author URI: https://praxiscorp.fator3.chatgpt.site Description: Tema de blocos (FSE) do site PHILON — Strategy Intelligence, by 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. Version: 1.2.1 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: philon 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 (respiro `xs` em cima e embaixo + alvo de 44px do botão do menu compacto + a borda inferior). -------------------------------------------------------------------------- */ :root { --philon-altura-cabecalho: 5.5rem; --philon-camada-cabecalho: 100; --philon-camada-overlay: 200; --philon-alvo-minimo: 44px; --philon-instrumento-largura: 26rem; /* Transparências derivadas dos presets. Nenhum literal de cor entra aqui: color-mix() recebe SEMPRE var(--wp--preset--color--…) e devolve a mesma cor com opacidade. O modelo de referência é feito de filetes e véus, e filete de 14% não existe como preset — existe como derivação de um. */ --philon-filete: color-mix(in srgb, var(--wp--preset--color--primaria-forte) 14%, transparent); --philon-filete-forte: color-mix(in srgb, var(--wp--preset--color--primaria-forte) 22%, transparent); --philon-filete-inverso: color-mix(in srgb, var(--wp--preset--color--superficie) 18%, transparent); --philon-malha: color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent); --philon-malha-clara: color-mix(in srgb, var(--wp--preset--color--primaria-forte) 5%, transparent); --philon-anel: color-mix(in srgb, var(--wp--preset--color--destaque) 20%, transparent); --philon-anel-forte: color-mix(in srgb, var(--wp--preset--color--destaque) 45%, transparent); --philon-ouro-tenue: color-mix(in srgb, var(--wp--preset--color--destaque) 18%, transparent); --philon-veu: color-mix(in srgb, var(--wp--preset--color--inverso) 88%, transparent); --philon-inverso-suave: color-mix(in srgb, var(--wp--preset--color--superficie) 72%, transparent); --philon-inverso-tenue: color-mix(in srgb, var(--wp--preset--color--superficie) 45%, transparent); --philon-sombra-barra: 0 14px 48px color-mix(in srgb, var(--wp--preset--color--inverso) 20%, transparent); --philon-sombra-cartao: 0 16px 40px color-mix(in srgb, var(--wp--preset--color--primaria-forte) 8%, transparent); --philon-respiro-barra: 1.125rem; } /* -------------------------------------------------------------------------- 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(--philon-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 > *`. -------------------------------------------------------------------------- */ .philon-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. -------------------------------------------------------------------------- */ .philon-cabecalho { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--philon-camada-cabecalho); padding-block-start: var(--philon-respiro-barra); padding-inline: var(--philon-respiro-barra); } /* O cabeçalho saiu do fluxo: quem não tem herói para correr por baixo dele precisa reservar a altura, senão a primeira linha da página nasce coberta. O herói é a exceção por desenho — o gradiente escuro passa SOB a barra — e reserva a mesma altura no próprio padding. */ .wp-site-blocks > main:not(:has(> .philon-heroi)) { padding-block-start: var(--philon-altura-cabecalho); } /* -------------------------------------------------------------------------- 4b. A barra flutuante dentro do cabeçalho Motivo: o cabeçalho deste site é uma BARRA de largura limitada, com respiro em volta, sobre o conteúdo que rola por baixo — e não uma faixa de borda a borda. Fundo, borda, raio e respiro interno são atributos do bloco Group e moram no markup da template part, não aqui; o que não tem equivalente nativo é a LARGURA da barra dentro de um cabeçalho que precisa continuar sendo o contêiner sticky de largura total. `wideSize` resolve a medida, e o resto do visual continua editável no editor. -------------------------------------------------------------------------- */ .philon-cabecalho > .philon-barra { box-sizing: border-box; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--wp--preset--spacing--md); max-inline-size: var(--wp--style--global--wide-size); min-block-size: 4rem; margin-inline: auto; padding-block: var(--wp--preset--spacing--xs); padding-inline: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xs); background-color: var(--philon-veu); border: 1px solid var(--philon-filete-inverso); border-radius: 8px; box-shadow: var(--philon-sombra-barra); } .philon-cabecalho > .philon-barra > :first-child { justify-self: start; } .philon-cabecalho > .philon-barra > :last-child { justify-self: end; } /* -------------------------------------------------------------------------- 4c. Etiqueta de seção (a "sobrancelha" acima do título) Motivo: caixa alta e espaçamento de letra existem como controles de bloco — e usá-los ali gravaria `text-transform` e `letter-spacing` como ESTILO INLINE no markup publicado, que é justamente o que `conteudo.sem_estilo_avulso` proíbe (o conteúdo só referencia preset). Papel de tipografia recorrente é sistema de design, não decisão por bloco: mora numa classe, propaga sozinho e deixa o texto editável no editor. Tamanho e cor continuam vindo de preset, pelos atributos do bloco. -------------------------------------------------------------------------- */ .philon-etiqueta { font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 4d. Filete superior do rodapé Motivo: o mesmo do item 4b — o filete é borda de UM lado, e declará-la pelo atributo do bloco gravaria `border-top-width: 1px` como estilo inline avulso. A cor vem do preset. -------------------------------------------------------------------------- */ .philon-rodape { border-block-start: 1px solid var(--wp--preset--color--borda); } /* -------------------------------------------------------------------------- 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. -------------------------------------------------------------------------- */ .philon-pular { box-sizing: border-box; display: inline-flex; align-items: center; min-block-size: var(--philon-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--base); font-size: var(--wp--preset--font-size--normal); text-decoration: underline; } .philon-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; } .philon-pular:focus { position: absolute; inset-block-start: var(--wp--preset--spacing--xs); inset-inline-start: var(--wp--preset--spacing--xs); z-index: var(--philon-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(--philon-alvo-minimo); min-block-size: var(--philon-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(--philon-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. -------------------------------------------------------------------------- */ .philon-cartao, .f3base-consentimento-rodape, .f3base-consentimento-abrir, .f3base-consentimento-banner, .f3base-consentimento-caixa, .f3base-consentimento-aviso, .philon-formulario, .philon-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 `.philon-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 > .philon-cartao { height: 100%; } /* -------------------------------------------------------------------------- 9c. Instrumento do herói — o círculo do ciclo contínuo Motivo: as quatro etapas do ciclo aparecem DISPOSTAS EM VOLTA de um núcleo, nos quatro pontos cardeais. Não existe layout nativo que posicione filhos em torno de um centro: `flex` e `grid` distribuem em linha, coluna ou célula, e `constrained`/`flow` empilham. O posicionamento absoluto é o único caminho, e por isso ele mora aqui, escopado na classe do padrão. O que NÃO virou CSS continua no bloco, e é o que mantém o editor útil: cada rótulo é um Parágrafo com o texto editável, e cor, tamanho, borda e raio do círculo são atributos do Group no markup. `transform` aparece nos rótulos — e só neles. A proibição do item 4 vale para ANCESTRAIS de elemento `position: fixed`; nenhum rótulo deste bloco é ancestral do painel do menu compacto nem do painel de consentimento, que são filhos do cabeçalho e do corpo. Um `transform` no contêiner `.philon-instrumento` seria outra história e por isso não existe. -------------------------------------------------------------------------- */ .philon-instrumento { position: relative; box-sizing: border-box; display: grid; place-items: center; inline-size: min(100%, var(--philon-instrumento-largura)); aspect-ratio: 1; margin-inline: auto; border: 1px solid var(--wp--preset--color--destaque); border-radius: 50%; } .philon-instrumento__nucleo { margin: 0; } .philon-instrumento__rotulo { position: absolute; margin: 0; padding-block: var(--wp--preset--spacing--xs); padding-inline: var(--wp--preset--spacing--xs); background-color: var(--wp--preset--color--inverso); white-space: nowrap; } /* Os rótulos ficam DENTRO da caixa do círculo, e isto é medição, não estética: com o deslocamento de metade da própria largura para fora, os rótulos leste e oeste ultrapassavam o viewport — 1039 px de rolagem horizontal numa tela de 1024, e 422 em 390. Overflow horizontal é reprovação da definição de pronto, e o custo de trazê-los para dentro é os rótulos tangenciarem o anel em vez de o atravessarem. Topo e base continuam centrados no eixo X, que é deslocamento horizontal de um elemento mais estreito que o círculo e não sai da caixa. */ .philon-instrumento__topo { inset-block-start: 0; inset-inline-start: 50%; transform: translateX(-50%); } .philon-instrumento__base { inset-block-end: 0; inset-inline-start: 50%; transform: translateX(-50%); } .philon-instrumento__esquerda { inset-block-start: 50%; inset-inline-start: 0; transform: translateY(-50%); } .philon-instrumento__direita { inset-block-start: 50%; inset-inline-end: 0; transform: translateY(-50%); } /* -------------------------------------------------------------------------- 9e. Proporção das duas colunas do herói Motivo (medido): o título do herói é a maior palavra do site em Georgia, e ele só cabe em duas linhas quando a coluna de texto tem a medida da referência. Com as colunas em 50/50 a coluna ficou em 556 px e "operacionalização" quebrou NO MEIO DA PALAVRA a 1440 px — três linhas em vez de duas, com um "ão" órfão. A largura de coluna existe como controle do bloco, e usá-la gravaria `flex-basis: 55%` como estilo inline no markup publicado, que `conteudo.sem_estilo_avulso` proíbe: proporção de layout recorrente é sistema de design, e mora aqui, escopada na classe do herói. Abaixo do ponto em que o core empilha as colunas a regra fica inerte, porque cada coluna passa a ocupar a linha inteira. -------------------------------------------------------------------------- */ .philon-heroi .wp-block-columns > .wp-block-column:first-child { flex: 1 1 55%; } .philon-heroi .wp-block-columns > .wp-block-column:last-child { flex: 1 1 45%; } /* -------------------------------------------------------------------------- 9d. Tabela larga rola dentro da própria caixa Motivo (medido): a tabela de comparação tem quatro colunas e largura mínima de conteúdo maior que a tela pequena — 416 px de tabela em 390 px de viewport, e o documento inteiro passava a rolar na horizontal. Não existe controle nativo do bloco Table para isso, e a saída correta não é encolher a fonte até caber: é a tabela rolar DENTRO da própria caixa, com o resto da página parado. -------------------------------------------------------------------------- */ .wp-block-table.philon-comparacao { overflow-x: auto; } /* -------------------------------------------------------------------------- 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. `.philon-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). -------------------------------------------------------------------------- */ .philon-formulario p, .philon-formulario label, .philon-formulario ul, .philon-formulario .philon-campo { margin: 0; } .philon-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. -------------------------------------------------------------------------- */ .philon-formulario input, .philon-formulario select, .philon-formulario textarea, .philon-formulario button { font-family: inherit; font-size: 1rem; line-height: 1.4; color: var(--wp--preset--color--contraste); background-color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--borda); border-radius: 2px; padding-block: var(--wp--preset--spacing--xs); padding-inline: var(--wp--preset--spacing--xs); min-block-size: var(--philon-alvo-minimo); } .philon-formulario button { background-color: var(--wp--preset--color--primaria); border-color: var(--wp--preset--color--primaria); color: var(--wp--preset--color--base); 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; } /* -------------------------------------------------------------------------- 13. Controle de consentimento no rodapé 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 painel, 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. ARMADILHA MEDIDA (corrigida): a regra do painel declarava `display: grid` sem qualificar `[hidden]`. CSS de autor sempre vence a folha padrão do navegador, então o `hidden` do JavaScript nunca escondia nada — o painel renderizava aberto assim que era criado, e "Fechar" não tinha efeito visível nenhum. `.f3base-consentimento-painel[hidden]` abaixo é a correção, e precisa continuar mais específica que a regra base. Também existia `.f3base-consentimento-caixa`, pensada como caixa central de diálogo — mas o JavaScript nunca chegou a criar esse elemento. O efeito real sempre foi o conteúdo cru espalhado sobre o véu inteiro, sem caixa nenhuma (o "abre uma tela" relatado). A regra morta saiu; o painel agora É a faixa inferior, com os elementos que o JavaScript de fato cria estilizados abaixo. -------------------------------------------------------------------------- */ /* Link de texto simples, igual aos demais links do rodapé (ex.: Política de Privacidade) — sem caixa nem alvo mínimo de botão. Continua