/* ========================================================= MOTRIZ · Movimento e superfícies Todos os estilos abaixo correspondem aos "Estilos" de bloco que aparecem no editor. O usuário aplica com um clique. ========================================================= */ :root { --motriz-ease: var(--wp--custom--transicao--suave, cubic-bezier(0.22, 0.61, 0.21, 1)); --motriz-ease-rapida: var(--wp--custom--transicao--rapida, cubic-bezier(0.33, 1, 0.68, 1)); --motriz-dur: 0.85s; } html { scroll-behavior: smooth; } /* NÃO usar overflow-x aqui. A versão 1.12.3 tinha "html, body { overflow-x: clip }" para conter a rolagem lateral das animações. Funciona no Chrome, mas é uma causa conhecida de quebra do position:sticky no Safari — e o cabeçalho fixo sumiu no iPhone justamente depois dessa mudança. A rolagem lateral agora é resolvida na origem: as entradas horizontais não são usadas em tela estreita (ver seção de animações). */ /* Palavras longas nunca vazam para fora da tela. Sem isto, uma única palavra grande (comum em português: "eletrônicas", "profissionais"…) no tamanho Colossal/Gigante pode ficar mais larga que a própria tela em celulares — o CSS não quebra uma palavra no meio por padrão. */ .wp-block-heading, .wp-block-post-title { /* SEM hyphens:auto de propósito. A hifenização do CSS não espera a palavra estourar: ela quebra sempre que "melhora" o preenchimento da linha. Resultado real em iPhone: "POR QUE ES-COLHER", quando ESCOLHER cabia inteira na linha seguinte. Com apenas overflow-wrap, a palavra inteira desce naturalmente, e a quebra no meio só acontece quando a palavra sozinha é mais larga que a linha. */ overflow-wrap: break-word; } ::selection { background: var(--wp--preset--color--ambar-diesel, #F5871F); color: var(--wp--preset--color--gelo, #F4F6FA); } img { height: auto; max-width: 100%; } /* --------------------------------------------------------- 1 · REVELAR AO ROLAR (aplicável a quase todo bloco) O JS adiciona .em-cena quando o elemento entra na tela. --------------------------------------------------------- */ .motriz-js [class*="is-style-revelar"], .motriz-js [class*="motriz-mov-revelar"] { opacity: 0; transform: translateY(32px); transition: opacity var(--motriz-dur) var(--motriz-ease), transform var(--motriz-dur) var(--motriz-ease); will-change: opacity, transform; } /* Entradas laterais: só a partir de 48rem (~768px). Em tela estreita, deslocar 48px na horizontal faz o bloco sair da tela enquanto a animação corre — o navegador passa a oferecer rolagem lateral, e ela desaparece quando a animação termina. Foi exatamente o sintoma relatado em iPhone. Abaixo desse ponto a entrada acontece na vertical: mesmo efeito de revelação, sem deslocamento horizontal e sem precisar recortar a página inteira. */ @media (min-width: 48rem) { .motriz-js :is(.is-style-revelar-esquerda, .motriz-mov-revelar-esquerda) { transform: translateX(-48px); } .motriz-js :is(.is-style-revelar-direita, .motriz-mov-revelar-direita) { transform: translateX(48px); } } .motriz-js :is(.is-style-revelar-zoom, .motriz-mov-revelar-zoom) { transform: scale(0.9); } .motriz-js [class*="is-style-revelar"].em-cena, .motriz-js [class*="motriz-mov-revelar"].em-cena { opacity: 1; transform: none; } /* Máscara de texto — o título "sobe" de dentro de um recorte. */ .motriz-js :is(.is-style-revelar-mascara, .motriz-mov-mascara) { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(0.35em); transition: clip-path 1s var(--motriz-ease), transform 1s var(--motriz-ease); } .motriz-js :is(.is-style-revelar-mascara, .motriz-mov-mascara).em-cena { clip-path: inset(-10% -10% -10% -10%); transform: none; } /* Cascata — os filhos do grupo/colunas entram um após o outro. */ .motriz-js :is(.is-style-cascata, .motriz-mov-cascata) > * { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--motriz-ease), transform 0.7s var(--motriz-ease); } .motriz-js :is(.is-style-cascata, .motriz-mov-cascata).em-cena > * { opacity: 1; transform: none; } .motriz-js :is(.is-style-cascata, .motriz-mov-cascata).em-cena > *:nth-child(1) { transition-delay: 0.05s; } .motriz-js :is(.is-style-cascata, .motriz-mov-cascata).em-cena > *:nth-child(2) { transition-delay: 0.15s; } .motriz-js :is(.is-style-cascata, .motriz-mov-cascata).em-cena > *:nth-child(3) { transition-delay: 0.25s; } .motriz-js :is(.is-style-cascata, .motriz-mov-cascata).em-cena > *:nth-child(4) { transition-delay: 0.35s; } .motriz-js :is(.is-style-cascata, .motriz-mov-cascata).em-cena > *:nth-child(5) { transition-delay: 0.45s; } .motriz-js :is(.is-style-cascata, .motriz-mov-cascata).em-cena > *:nth-child(6) { transition-delay: 0.55s; } .motriz-js :is(.is-style-cascata, .motriz-mov-cascata).em-cena > *:nth-child(7) { transition-delay: 0.65s; } .motriz-js :is(.is-style-cascata, .motriz-mov-cascata).em-cena > *:nth-child(8) { transition-delay: 0.75s; } /* --------------------------------------------------------- 2 · PARALLAX E MOVIMENTO CONTÍNUO --------------------------------------------------------- */ figure:is(.is-style-parallax-lento, .motriz-mov-parallax) { overflow: hidden; border-radius: var(--wp--custom--raio--imagem, 14px); } :is(.is-style-parallax-lento, .motriz-mov-parallax) img { transform: scale(1.12); will-change: transform; transition: none; } /* Zoom cinematográfico contínuo em Capas (cover). */ :is(.is-style-ken-burns, .motriz-mov-ken-burns) .wp-block-cover__image-background, :is(.is-style-ken-burns, .motriz-mov-ken-burns) .wp-block-cover__video-background { animation: motriz-kenburns 22s var(--motriz-ease) infinite alternate; } @keyframes motriz-kenburns { from { transform: scale(1); } to { transform: scale(1.15); } } /* Flutuar — movimento ambiente sutil (nuvens, selos, badges). */ :is(.is-style-flutuar, .motriz-mov-flutuar) { animation: motriz-flutuar 7s ease-in-out infinite; } @keyframes motriz-flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* Letreiro — faixa com rolagem infinita (logos, frases). */ :is(.is-style-letreiro, .motriz-mov-letreiro) { display: flex !important; /* As faixas TÊM de ficar numa linha só. O grupo costuma estar em layout "Linha", e o layout flex do WordPress entrega "flex-wrap: wrap" por padrão (.is-layout-flex, nos estilos globais): com a faixa mais larga que a tela — que é o caso normal de um letreiro — o clone quebra para uma segunda linha e a faixa aparece em duas alturas, uma embaixo da outra. Aqui isso fica declarado em vez de depender da ordem em que as folhas são impressas. No editor a quebra volta de propósito (editor.css), para dar para editar tudo à vista. */ flex-wrap: nowrap !important; overflow: hidden; gap: 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } :is(.is-style-letreiro, .motriz-mov-letreiro) .letreiro-faixa { display: flex; align-items: center; gap: clamp(2rem, 6vw, 4.5rem); padding-right: clamp(2rem, 6vw, 4.5rem); flex: 0 0 auto; /* A velocidade é ajustável bloco a bloco: o painel "Movimento" grava --motriz-letreiro-duracao no estilo do próprio grupo. O valor de fábrica mora no fallback do var() e não é declarado em lugar nenhum — mesmo formato do vidro (v1.62.3), que é o que permite escrever a variável em qualquer ancestral (a raiz, uma seção, o bloco) e ainda assim ela chegar até aqui. Declarar na .letreiro-faixa mataria a herança e nenhum ajuste desceria. */ animation: motriz-letreiro var(--motriz-letreiro-duracao, 18s) linear infinite; } /* A pausa ao passar o mouse existe SÓ onde existe mouse (v1.66.1). No celular não há "sair de cima": o navegador aplica :hover ao encostar o dedo e MANTÉM esse estado até a pessoa tocar em outro lugar da página. Numa faixa que pausa no hover, isso não é um detalhe estético — o letreiro trava no primeiro toque e não volta a rolar. É o "hover grudado" clássico do toque, e ele não se resolve no JavaScript: quem aplica o estado é o navegador. "hover: hover" pergunta se o ponteiro consegue pairar sem clicar; "pointer: fine" pergunta se ele é preciso (mouse, trackpad, caneta) em vez de um dedo. Notebook com tela sensível ao toque responde sim às duas e continua pausando normalmente. */ @media (hover: hover) and (pointer: fine) { :is(.is-style-letreiro, .motriz-mov-letreiro):hover .letreiro-faixa { animation-play-state: paused; } } :is(.is-style-letreiro, .motriz-mov-letreiro) .letreiro-faixa > * { margin: 0 !important; flex: 0 0 auto; } @keyframes motriz-letreiro { to { transform: translateX(-100%); } } /* --------------------------------------------------------- 3 · SUPERFÍCIES · cartão, vidro, borda em degradê --------------------------------------------------------- */ /* Mesma lógica dos botões: a aparência padrão fica em :where() (força zero), então cor de fundo, borda, raio e sombra escolhidos no painel do bloco sempre vencem — cartão por cartão, de forma independente. */ :where(.is-style-cartao) { background: var(--wp--preset--color--branco, #fff); border: 1px solid var(--wp--preset--color--azul-nevoa, #6E7B95); border-radius: var(--wp--custom--raio--cartao, 20px); box-shadow: var(--wp--preset--shadow--suave); padding: clamp(1.5rem, 3vw, 2.25rem); } .is-style-cartao { transition: transform 0.45s var(--motriz-ease), box-shadow 0.45s var(--motriz-ease); } .is-style-cartao:hover { transform: translateY(-6px); } /* ACHADO REAL E CORRIGIDO (mais uma rodada) — reproduzido ao vivo pelo Lucas: Grupo com fundo "Gelo" (cor escolhida no próprio painel do bloco) + estilo "Vidro fosco", trocando a opacidade de 70% pra 100% sem NENHUMA mudança visual. Causa: a versão anterior desta regra pintava "background" de propósito com especificidade ZERO (:where()), pra nunca brigar com a variável de cor que o painel do bloco define (motivo documentado mais abaixo, na seção do Sistema de Vidro configurável). Só que isso tem um preço que não tinha sido medido: QUALQUER cor de fundo que o Lucas escolher pelo seletor de cor nativo do bloco (ex.: "Gelo") vira uma classe ".has-gelo-background-color" — especificidade normal (0,1,0), SEMPRE maior que zero — e apaga o vidro por completo, sem deixar rastro. É o mesmo tipo de problema já visto com a foto de fundo (Cover/Grupo, correção logo abaixo), só que por outro caminho: lá era ORDEM DE CAMADA (imagem sempre por cima da cor no mesmo elemento); aqui é ESPECIFICIDADE (cor do usuário sempre vence um :where() zerado). Correção definitiva, que resolve os dois caminhos de uma vez: o vidro para de pintar "background" no próprio bloco — em vez disso só grava as variáveis (mesmo sistema --motriz-vidro-* usado por "Vidro leve/intenso/claro"), e quem desenha de fato é a camada única em ::before mais abaixo, que nunca compete por especificidade OU por ordem de camada com nada que o Lucas escolher no painel — simplesmente não é a mesma propriedade, no mesmo elemento. */ .is-style-vidro { --motriz-vidro-cor: 255 255 255; --motriz-vidro-opacidade: 0.08; --motriz-vidro-desfoque: 16px; --motriz-vidro-saturacao: 130%; --motriz-vidro-brilho: 0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--wp--custom--raio--cartao, 20px); padding: clamp(1.5rem, 3vw, 2.25rem); } .is-style-borda-gradiente { --motriz-fundo: var(--wp--preset--color--gelo, #F4F6FA); border: 2px solid transparent; border-radius: var(--wp--custom--raio--cartao, 20px); background: linear-gradient(var(--motriz-fundo), var(--motriz-fundo)) padding-box, var(--wp--preset--gradient--sinal) border-box; padding: clamp(1.5rem, 3vw, 2.25rem); } .has-preto-grafite-background-color .is-style-borda-gradiente, .has-indigo-escuro-background-color .is-style-borda-gradiente { --motriz-fundo: var(--wp--preset--color--indigo-escuro, #272948); } /* --------------------------------------------------------- 4 · LOGOS QUE NÃO ESTOURAM --------------------------------------------------------- */ :where(.is-style-caixa-logo) { background: var(--wp--preset--color--branco, #fff); border: 1px solid var(--wp--preset--color--azul-nevoa, #6E7B95); border-radius: 16px; } .is-style-caixa-logo { display: flex !important; align-items: center; justify-content: center; min-height: 6.5rem; padding: 1.25rem 1.5rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .is-style-caixa-logo:hover { box-shadow: var(--wp--preset--shadow--linha); } .is-style-caixa-logo > * { margin: 0 !important; } .is-style-caixa-logo img, .is-style-logo-contida img { max-height: 2.75rem; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.72; transition: filter 0.3s ease, opacity 0.3s ease; } .is-style-caixa-logo:hover img, .is-style-logo-contida:hover img { filter: none; opacity: 1; } .grade-logos { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .grade-logos > * { margin: 0 !important; } /* --------------------------------------------------------- 4b · LOGOS PADRONIZADAS · "Logos em cinza" e "Logos em silhueta" (v1.64.0) O problema que esta seção resolve não é "deixar cinza". Logo de parceiro chega de oito lugares diferentes e em oito formatos: uma em PNG preto, outra em SVG colorido, outra branca sobre fundo transparente; umas quadradas, outras deitadas e compridas. Postas lado a lado sem tratamento, a faixa vira um mural de adesivos. Padronizar de verdade exige igualar TRÊS coisas, não uma: 1 · TAMANHO ÓPTICO — mesma altura para todas e uma largura máxima. Com object-fit: contain a marca deitada e a quadrada passam a ocupar caixas do mesmo tamanho, cada uma respirando dentro da sua. 2 · COR — grayscale() tira a cor. 3 · PESO — e este é o passo que quase todo mundo esquece: grayscale SOZINHO não padroniza nada. Um logo preto continua preto, um logo claro quase some. contrast() aproxima os dois extremos de um cinza médio e brightness() decide de que lado do cinza a faixa toda fica. É essa dupla que faz oito marcas parecerem uma família. Quando os logos são tão diferentes que nem isso resolve, existe o segundo estilo: "Logos em silhueta" descarta o desenho interno e devolve TODAS as marcas exatamente no mesmo tom. É a padronização total, pelo preço do detalhe — e só funciona com logo de fundo transparente (PNG ou SVG), porque um JPEG de fundo branco vira um retângulo preto. Os valores de fábrica moram no fallback do var(): nenhuma destas variáveis é declarada em lugar nenhum. É o que permite escrevê-las na raiz, na seção ou num bloco só e o ajuste chegar até aqui — mesmo formato do vidro (v1.62.3). Declarar aqui mataria a herança e nenhum ajuste desceria. --------------------------------------------------------- */ /* --- 1 · tamanho óptico (vale para os dois estilos) --- */ /* O !important não é preguiça: o bloco Imagem grava largura e altura DIRETO no atributo style quando alguém arrasta a alça para redimensionar, e a folha do WordPress ainda declara .wp-block-image img { height: auto }. Sem !important bastaria um logo redimensionado sem querer para a faixa perder o alinhamento — que é justamente o que este estilo existe para garantir. Para mudar a medida, a porta é a variável. */ :is( .is-style-logos-mono, .logos-mono, .is-style-logos-silhueta, .logos-silhueta ) img { /* Medido em 390px antes de virar clamp: com 11rem fixos, um logo deitado ocupava 176px dos 375px úteis — quase metade da tela para uma marca só, e passavam menos de duas por vez. As duas medidas acompanham a tela e param nos mesmos valores de sempre no computador (2,5rem de altura e 11rem de largura). */ height: var(--motriz-logos-altura, clamp(2rem, 4.5vw, 2.5rem)) !important; width: auto !important; max-width: var(--motriz-logos-largura, clamp(7rem, 14vw, 11rem)) !important; object-fit: contain; transition: filter 0.35s ease, opacity 0.35s ease; } :is( .is-style-logos-mono, .logos-mono, .is-style-logos-silhueta, .logos-silhueta ) :is(figure, .wp-block-image) { margin: 0; line-height: 0; } /* Logo pede mais respiro que palavra: a faixa de texto usa o vão padrão do letreiro, a de marcas abre mais para cada uma ser lida como uma unidade. Só alcança o letreiro — na grade estática quem manda no vão continua sendo .grade-logos. */ :is( .is-style-logos-mono, .logos-mono, .is-style-logos-silhueta, .logos-silhueta ) .letreiro-faixa { gap: var(--motriz-logos-respiro, clamp(2.5rem, 7vw, 5.5rem)); padding-right: var(--motriz-logos-respiro, clamp(2.5rem, 7vw, 5.5rem)); } /* --- 2 · tom, sobre fundo CLARO --- */ :is(.is-style-logos-mono, .logos-mono) img { filter: grayscale(var(--motriz-logos-cinza, 1)) contrast(var(--motriz-logos-contraste, 0.55)) brightness(var(--motriz-logos-brilho, 0.78)); opacity: var(--motriz-logos-forca, 0.85); } :is(.is-style-logos-silhueta, .logos-silhueta) img { filter: grayscale(1) brightness(0); opacity: var(--motriz-logos-forca, 0.55); } /* --- 3 · tom, sobre fundo ESCURO (negativo) --- Vira sozinho quando a faixa está dentro de uma seção com uma das cores escuras da paleta — mesma ideia da "Borda em degradê", que já lê o fundo da seção para saber que cor usar por baixo. O seletor do ancestral vai em :where() para não somar especificidade: assim uma linha em "CSS adicional" ainda vence, e a classe logos-em-negativo (para fundo escuro fora da paleta, uma foto por exemplo) vence sempre. Aqui o brilho fecha ANTES do invert: quanto mais escuro o pixel entra no invert, mais claro ele sai. É o mesmo cinza médio da versão clara, do outro lado. E é por isso que o brilho tem nome PRÓPRIO aqui (--motriz-logos-brilho-negativo). O contraste e a força são a mesma ideia nos dois fundos e podem ser um só ajuste; o brilho anda em direções opostas. Com um nome só, quem clareasse a faixa clara escureceria a escura na mesma linha — medido na bancada antes de separar. */ :where( .has-preto-grafite-background-color, .has-indigo-escuro-background-color, .has-azul-profundo-background-color, .has-azul-fd-background-color, .has-azul-aco-background-color ) :is(.is-style-logos-mono, .logos-mono) img, :is(.is-style-logos-mono, .logos-mono).logos-em-negativo img { filter: grayscale(var(--motriz-logos-cinza, 1)) contrast(var(--motriz-logos-contraste, 0.55)) brightness(var(--motriz-logos-brilho-negativo, 0.52)) invert(1); opacity: var(--motriz-logos-forca, 0.82); } :where( .has-preto-grafite-background-color, .has-indigo-escuro-background-color, .has-azul-profundo-background-color, .has-azul-fd-background-color, .has-azul-aco-background-color ) :is(.is-style-logos-silhueta, .logos-silhueta) img, :is(.is-style-logos-silhueta, .logos-silhueta).logos-em-negativo img { filter: grayscale(1) brightness(0) invert(1); opacity: var(--motriz-logos-forca, 0.62); } /* --- 4 · passar o mouse --- No claro, a marca volta a ser ela mesma: cor original, força total. Combina com a pausa que o letreiro já dá no hover — a faixa para e a marca acende debaixo do cursor. No escuro isso NÃO se faz, e é decisão: devolver a cor original a um logo preto sobre fundo preto faz a marca sumir. Lá o hover só acende — mesma leitura, força total. Tudo isto vive dentro do mesmo cerco da pausa do letreiro (v1.66.1), e pelo mesmo motivo: no toque o :hover gruda. Sem o cerco, um logo tocado por engano ficava colorido no meio da faixa cinza — e continuava colorido enquanto a faixa rolava, porque no celular não existe "sair de cima". No dedo as marcas ficam como devem ficar: todas iguais. */ @media (hover: hover) and (pointer: fine) { :is( .is-style-logos-mono, .logos-mono, .is-style-logos-silhueta, .logos-silhueta ) img:hover { filter: none; opacity: 1; } :where( .has-preto-grafite-background-color, .has-indigo-escuro-background-color, .has-azul-profundo-background-color, .has-azul-fd-background-color, .has-azul-aco-background-color ) :is(.is-style-logos-mono, .logos-mono) img:hover, :is(.is-style-logos-mono, .logos-mono).logos-em-negativo img:hover { filter: grayscale(var(--motriz-logos-cinza, 1)) contrast(var(--motriz-logos-contraste, 0.55)) brightness(var(--motriz-logos-brilho-aceso, 0.35)) invert(1); opacity: 1; } :where( .has-preto-grafite-background-color, .has-indigo-escuro-background-color, .has-azul-profundo-background-color, .has-azul-fd-background-color, .has-azul-aco-background-color ) :is(.is-style-logos-silhueta, .logos-silhueta) img:hover, :is(.is-style-logos-silhueta, .logos-silhueta).logos-em-negativo img:hover { filter: grayscale(1) brightness(0) invert(1); opacity: 1; } } /* --------------------------------------------------------- 5 · IMAGENS · moldura, sombra deslocada --------------------------------------------------------- */ .is-style-moldura img { border: 1px solid var(--wp--preset--color--preto-grafite, #0E1116); padding: 8px; background: var(--wp--preset--color--branco, #fff); border-radius: var(--wp--custom--raio--imagem, 14px); } .is-style-risco img { border-radius: var(--wp--custom--raio--imagem, 14px); box-shadow: var(--wp--preset--shadow--dura); } /* --------------------------------------------------------- 6 · BOTÕES · contorno, fantasma, seta, brilho, reto --------------------------------------------------------- */ .wp-block-button__link { transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--motriz-ease-rapida), box-shadow 0.3s ease, border-color 0.3s ease; } .wp-block-button__link:hover { transform: translateY(-2px); } .wp-block-button__link:active { transform: translateY(0); } /* Os estilos de botão abaixo usam ":root" antes do :where() — mesmo padrão que o próprio theme.json usa para o botão padrão do tema (":root :where(.wp-element-button, ...)"). Histórico: antes eram só ":where(...)", pensando que isso bastava para a cor escolhida no painel sempre vencer. Era baseado numa suposição errada — que o padrão do TEMA tivesse especificidade zero também. Ele não tem: o ":root" ali fora do :where() já vale uma classe (0,1,0). Com a regra inteira em :where() (0,0,0), o botão padrão do tema sempre vencia — testado ao vivo: "Contorno" saía com fundo âmbar sólido e borda 0px, em vez de transparente com contorno; "Vidro" saía idêntico, sem nenhuma transparência. Igualando o ":root" na frente, a especificidade fica igual à do tema — e ainda perde corretamente para a escolha do usuário: cor preset chega com !important nativo do WordPress, cor customizada chega como estilo inline (que já vence qualquer regra sem !important, não importa a especificidade). Testado ao vivo nas duas direções antes de aplicar. */ :root .is-style-contorno .wp-block-button__link { background: transparent; border: 2px solid currentColor; } :root .is-style-contorno .wp-block-button__link:hover { background: color-mix(in srgb, currentColor 16%, transparent); } :root .is-style-fantasma .wp-block-button__link { background: transparent; padding-left: 0.4rem; padding-right: 0.4rem; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; } :root .is-style-fantasma .wp-block-button__link:hover { background: transparent; opacity: 0.72; } .is-style-seta .wp-block-button__link::after { content: "→"; display: inline-block; margin-left: 0.6em; transition: transform 0.3s var(--motriz-ease-rapida); } .is-style-seta .wp-block-button__link:hover::after { transform: translateX(5px); } /* Brilho / Brilho ciano — o box-shadow aqui é só o PADRÃO visual do estilo escolhido, não deveria brigar com uma sombra escolhida à mão no painel Estilos → Efeitos. Só que o suporte nativo de "shadow" do WordPress não usa style="" inline (que venceria de graça) — ele gera uma folha própria com seletor de classe, ".wp-elements-xxx .wp-block- button__link", (0,2,0) de especificidade — igual a esta regra sem nenhuma proteção. Empate de especificidade cai pra ordem de carga, e essa folha do WordPress entra ANTES do motriz.css — confirmado ao vivo com o mesmo mecanismo no vidro do cabeçalho. CORRIGIDO 2x: a primeira tentativa envolveu a regra inteira em :where() → (0,0,0). Isso quebrou o visual padrão do Brilho, porque o border-radius/cor padrão do BOTÃO vem do theme.json como ":root :where(.wp-element-button, .wp-block-button__link)" — (0,1,0) de especificidade. Zero sempre perde pra 1; o brilho parou de aparecer mesmo sem ninguém ter tocado no Efeitos. Confirmado com uma calculadora de especificidade real antes de reaplicar. A faixa certa é (0,1,0): empata com o padrão do tema (motriz.css carrega depois, então vence o empate) e ainda fica abaixo do (0,2,0) do Efeitos, que continua podendo vencer quando o Lucas escolhe uma sombra à mão. ":root" fora do :where() garante essa faixa exata — só ele soma especificidade; o resto do seletor fica a custo zero. */ :root :where(.is-style-brilho .wp-block-button__link) { box-shadow: var(--wp--preset--shadow--brasa); } :root :where(.is-style-brilho-ciano .wp-block-button__link) { box-shadow: var(--wp--preset--shadow--ciano-brilho); } /* Mesmo caso do brilho acima — e mesma correção: ":root" fora do :where() mantém a especificidade em (0,1,0), suficiente pra vencer o raio de 999px que vem do theme.json, mas ainda abaixo do (0,2,0) da folha gerada pelo painel Bordas. */ :root :where(.is-style-reto .wp-block-button__link) { border-radius: 6px; } /* --------------------------------------------------------- 7 · CABEÇALHO · fixo com desfoque ao rolar --------------------------------------------------------- */ /* Barra do cabeçalho — nada de quebra de linha. "flexWrap: nowrap" no painel só impede o CONTAINER de quebrar em duas linhas; os itens continuam sendo espremidos e o texto quebra DENTRO deles. Por isso os itens são travados aqui. O escopo cobre três casos de propósito, porque a classe disponível muda conforme onde o cabeçalho está sendo renderizado: .cabecalho-site -> site publicado e editor de página .barra-cabecalho -> arquivo do tema e edição da parte isolada header.wp-block-... -> rede de segurança, se as duas faltarem (Depender de uma só já causou correção que não chegou ao site.) */ :is(.cabecalho-site, .barra-cabecalho, header.wp-block-template-part) :is( .wp-block-site-title, .wp-block-site-title a, .wp-block-button__link, .wp-block-navigation-item__label ) { white-space: nowrap; } /* Quem NUNCA encolhe: logo, menu e botão. Se o título entrasse aqui, ele se recusaria a ceder espaço e empurraria o botão para fora da tela — foi exatamente o que aconteceu na primeira versão desta correção. */ :is(.cabecalho-site, .barra-cabecalho, header.wp-block-template-part) :is( .wp-block-site-logo, .wp-block-buttons, .wp-block-button ) { flex-shrink: 0; } /* Quem cede espaço é o título: encolhe e corta com reticências, em vez de quebrar linha ou empurrar o resto para fora. */ :is(.cabecalho-site, .barra-cabecalho, header.wp-block-template-part) > .wp-block-group:first-child { min-width: 0; flex-shrink: 1; } :is(.cabecalho-site, .barra-cabecalho, header.wp-block-template-part) > .wp-block-group:last-child { flex-shrink: 0; } :is(.cabecalho-site, .barra-cabecalho, header.wp-block-template-part) .wp-block-site-title { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Em telas pequenas o botão fica compacto — sem quebrar e sem estourar. */ @media (max-width: 700px) { :is(.cabecalho-site, .barra-cabecalho, header.wp-block-template-part) .wp-block-button__link { padding: 0.7rem 1.05rem; font-size: 0.75rem; } } :is(.cabecalho-site, .barra-cabecalho, header.wp-block-template-part) .wp-block-navigation__container { flex-wrap: nowrap; } /* Entre 600px e 900px não cabem logo + título + menu + botão lado a lado. Nessa faixa o menu vira hambúrguer, em vez de quebrar em várias linhas. */ @media (min-width: 600px) and (max-width: 899px) { :is(.cabecalho-site, .barra-cabecalho, header.wp-block-template-part) .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } :is(.cabecalho-site, .barra-cabecalho, header.wp-block-template-part) .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } /* --------------------------------------------------------- FIXAÇÃO DO CABEÇALHO — quem manda é o CONTROLE NATIVO do WordPress, e mais nada (v1.59.0). O tema NÃO fixa o cabeçalho por conta própria. A única chave é a do núcleo: Aparência → Editor → Padrões → Partes de modelo → Cabeçalho → selecione a barra → Estilos → Posição → Fixo Por que a escolha de tirar a fixação do tema: até a v1.58.1 havia DUAS fontes de verdade brigando — a regra do tema e o suporte nativo — e o controle nativo parecia não funcionar. Medido, a causa era outra e mais funda (ver abaixo). POR QUE O CONTROLE NATIVO SOZINHO NÃO BASTA, e o JavaScript precisa entrar: o suporte de posição do WordPress só é oferecido para bloco de PRIMEIRO NÍVEL, e o primeiro nível da parte do modelo é a BARRA — o grupo de dentro. Só que o
que embrulha a barra tem exatamente a altura dela, e "position: sticky" é limitado pela caixa do pai: um filho que preenche o pai inteiro não tem para onde deslizar. Medido nesta bancada: com sticky na barra, ela vai de 94px para -1106px ao rolar 1200px, ou seja, some junto com a página; com sticky no
, fica em 0px para sempre. Então o motriz.js LÊ a intenção do controle nativo (procura, dentro do cabeçalho, um grupo que o navegador esteja calculando como sticky/fixed) e a DEVOLVE ao
, que é onde ela funciona. É leitura do estado real, não uma segunda chave: desmarcar no painel apaga a intenção, e o cabeçalho para de grudar. Sem JavaScript o cabeçalho simplesmente não gruda — o conteúdo continua todo lá, só rola junto com a página. É a mesma troca já assumida pelas setas das faixas. --------------------------------------------------------- */ .cabecalho-site { /* "relative" e não "static", mesmo solto: z-index só vale em elemento posicionado, e sem ele um herói logo abaixo passaria POR CIMA da barra — no modelo com "cabecalho-claro", que puxa o herói para debaixo do cabeçalho com margem negativa, a barra sumiria atrás da foto. */ position: relative; z-index: 100; transition: color 0.4s ease; } /* O estado fixo, escrito pelo motriz.js a partir do controle nativo. O notch do iPhone fica com uma faixa sólida atrás dele quando rolado (limitação confirmada do Safari com position:sticky/fixed nesse contexto — sem solução via CSS encontrada). */ .cabecalho-site.cabecalho-fixo { position: sticky; top: 0; } /* O grupo de onde a fixação foi devolvida ao
. Deixá-lo sticky não faria mal (ele não tem para onde deslizar), mas deixaria dois elementos dizendo a mesma coisa — e um deles mentindo. (0,3,0) vence a classe ".wp-container-N" do núcleo, que é (0,1,0), sem precisar de !important. */ .cabecalho-site .wp-block-group.cabecalho-fixacao-devolvida { position: relative; } /* O desfoque ao rolar vive numa camada decorativa própria (::before), nunca diretamente no cabeçalho — porque "backdrop-filter" no próprio cabeçalho prende o menu hambúrguer (position: fixed) dentro dele em vez de deixá-lo cobrir a tela toda. */ .cabecalho-site::before { content: ""; position: absolute; inset: 0; pointer-events: none; /* Sem isto a camada de vidro pinta POR CIMA do conteúdo e desfoca o próprio logo, o título e o menu — o desfoque deve ficar atrás. */ z-index: 0; transition: background-color 0.4s ease, box-shadow 0.4s ease, -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease; } /* --------------------------------------------------------- SISTEMA DE VIDRO (configurável) — cabeçalho, menu hambúrguer aberto Tudo é controlado por estas variáveis. Para ajustar o visual sem tocar em CSS, aplique um dos estilos "Vidro …" no bloco (aba Estilos) — vale para Grupo, Capa, Colunas e Navegação comuns, mas NÃO para o cabeçalho (ver bloco :where() abaixo). Para o CABEÇALHO especificamente, afine à mão em Aparência → Editor → Estilos → CSS adicional. As 5 variáveis abaixo funcionam — todas com a mesma especificidade zero, então qualquer uma pode ser sobrescrita sozinha ou em conjunto (R G B sem vírgula; opacidade de 0 a 1; desfoque em px, 0 desliga; saturação em %, 100% = sem alterar; brilho de 0 a 1 — ver tabela de cores da paleta já convertida pra R G B no guia, seção 12): .cabecalho-site { --motriz-vidro-cor: 245 135 31; --motriz-vidro-opacidade: 0.25; --motriz-vidro-desfoque: 26px; --motriz-vidro-saturacao: 220%; --motriz-vidro-brilho: 0.1; } --------------------------------------------------------- */ /* BUG CONFIRMADO E CORRIGIDO — "2 vidros sobrepostos", desfoque não zera: esta regra e a que o guia manda o Lucas escrever em CSS adicional (".cabecalho-site { --motriz-vidro-desfoque: 0px; }") têm A MESMA especificidade, (0,1,0). Empate de especificidade é resolvido por ORDEM DE CARGA — e o CSS adicional do Editor de Site (global-styles) é enfileirado pelo núcleo do WordPress (wp_enqueue_global_styles, prioridade 10 em wp_enqueue_scripts) ANTES do motriz.css, que é enfileirado pelo tema no mesmo hook, também prioridade 10, mas registrado depois. Resultado: o valor do TEMA imprime por último e vence — a variável do painel nunca pega, para NENHUM dos três valores (cor, opacidade, desfoque...), mesmo zerando o slider. Reordenar prioridade de enqueue é frágil (depende de núcleo/versão). Especificidade zero via :where() é a solução definitiva e já é o mesmo idioma usado neste arquivo para ".is-style-cartao" e ".is-style-vidro" (seção 3): o padrão do tema cede sempre, ganhe quem ganhar a corrida de carregamento. */ /* REVERTIDO — v1.20.4 tinha trocado este formato para hex puro usando "rgb(from var(...) r g b / alfa)" (sintaxe de cor relativa do CSS). No seu teste ao vivo só o desfoque funcionou — cor, opacidade e saturação, não. Como não tenho acesso ao site publicado para confirmar a causa exata (suspeita: o parser de CSS adicional do WordPress.com ou o motor do navegador em uso não aceitou a sintaxe "rgb(from ...)"), a decisão segura é voltar ao formato "R G B" espaçado — comprovadamente funcional nos testes anteriores — em vez de arriscar produção numa sintaxe que não dá pra validar remotamente. A tabela de conversão hex → R G B da paleta está no guia, seção 12. */ :where(.cabecalho-site, .barra-cabecalho, .wp-block-navigation__responsive-container, .motriz-aviso) { --motriz-vidro-cor: 14 17 22; /* RGB do vidro */ --motriz-vidro-opacidade: 0.55; /* 0 = invisível, 1 = sólido */ --motriz-vidro-desfoque: 16px; --motriz-vidro-saturacao: 180%; --motriz-vidro-brilho: 0; /* filete de luz na borda superior */ } /* Menos denso, mais "quase vidro" */ .is-style-vidro-leve { --motriz-vidro-opacidade: 0.22; --motriz-vidro-desfoque: 22px; --motriz-vidro-saturacao: 200%; --motriz-vidro-brilho: 0; } .is-style-vidro-intenso { --motriz-vidro-opacidade: 0.78; --motriz-vidro-desfoque: 10px; --motriz-vidro-saturacao: 140%; } .is-style-vidro-claro { --motriz-vidro-cor: 244 246 250; --motriz-vidro-opacidade: 0.55; --motriz-vidro-brilho: 0; } /* Por que cabeçalho/menu ficam de fora do sistema genérico abaixo (":not(.barra-cabecalho, .cabecalho-site, .wp-block-navigation__ responsive-container)"): medido ao vivo em rodada anterior — backdrop-filter cria um "containing block" para elementos position:fixed dentro dele, mesmo mecanismo de transform/filter/ will-change que já tinha mordido este projeto antes (CTA flutuante, notch do iPhone). A barra do cabeçalho é ancestral do menu mobile (position:fixed) — ganhando backdrop-filter, ela prendia o menu dentro da própria caixa pequena da barra, e o cabeçalho "sumia" ao abrir o menu. Cabeçalho e menu já têm sistema de vidro PRÓPRIO, dedicado (::before na barra, não backdrop-filter na barra em si) — quem quiser vidro neles ajusta por lá (seção 4.2 do guia), não por este painel genérico. */ /* SISTEMA DE VIDRO — CORREÇÃO DEFINITIVA E UNIFICADA (rodada 3) Histórico resumido dos três problemas encontrados, todos com a MESMA raiz (o vidro tentava pintar "background" direto no próprio bloco, competindo com algo que o Lucas escolhe no painel do bloco), por três caminhos diferentes: 1) FOTO/VÍDEO de fundo (Capa): "background-image" do núcleo sempre desenha por CIMA de "background-color" no mesmo elemento — o vidro ficava sempre escondido atrás da foto, mesmo com opacidade 100%. 2) IMAGEM de fundo nativa (Grupo, novo recurso desta versão): mesmo problema, caminho técnico diferente (a foto vem como estilo inline no PRÓPRIO elemento, não numa filha). 3) COR de fundo escolhida no painel do bloco (ex.: "Gelo"): reproduzido ao vivo pelo Lucas — a classe ".has-gelo-background-color" tem especificidade normal e vence o "background" do vidro, seja ele um :where() zerado (Vidro fosco) ou uma regra comum (Vidro leve/intenso/claro, quando a cor escolhida vem como estilo INLINE em vez de classe — inline sempre vence especificidade externa). Correção única para os três: o vidro NUNCA mais pinta "background" no próprio bloco. Ele só grava as variáveis --motriz-vidro-* (seção acima) e uma camada dedicada em ::before — sem relação nenhuma com "background-image", "background-color" ou especificidade de classe. Como o fundo PRÓPRIO de uma caixa (cor, imagem, ou os dois) sempre desenha embaixo dos seus filhos por padrão em CSS — não é preciso "apagar"/neutralizar nada — o vidro nunca mais compete por especificidade OU por ordem de camada com o que o Lucas escolher no painel: ele simplesmente desenha por cima, sempre, seja o fundo nenhum, cor sólida, ou foto. Cobre Grupo, Colunas, Coluna (individual), Capa e Navegação — todos com o MESMO esquema de z-index (vidro atrás do conteúdo real, -1), porque o conteúdo deles é sempre texto/blocos filhos normais. core/image NÃO está aqui — tem seção própria mais abaixo ("VIDRO SOBRE FOTO"), com z-index invertido (vidro NA FRENTE), porque lá o "conteúdo" é a própria foto. "Vidro fosco" simples só existe no Grupo (não está registrado nos demais). Coluna entrou depois dos outros — ver BLOCOS_VIDRO no editor.js e $blocos_com_vidro no functions.php: as duas listas têm que ficar sempre iguais (já aconteceu de uma ficar desatualizada em relação à outra — foi exatamente esse bug que tirou o painel Vidro da Coluna por um tempo). */ /* 1) Grupo e Colunas: conteúdo real é sempre elemento estático comum (sem position), que por padrão já desenha ACIMA de qualquer z-index negativo — não precisa forçar nada nos filhos. O vidro entra com z-index NEGATIVO, só acima do fundo da própria caixa. "isolation: isolate" contém esse z-index negativo dentro dos limites do próprio bloco, pra não vazar atrás de outras seções da página. */ /* .wp-block-column (individual) ENTROU aqui — antes só a Colunas (plural, o grupo inteiro) tinha vidro. Pedido explícito: cada coluna com a própria foto de fundo (painel "Imagem de fundo", acima) e o vidro como camada opcional por cima dela, coluna a coluna. O esquema de z-index é o MESMO do Grupo/Colunas — o vidro fica ATRÁS do conteúdo real (z-index -1) — e funciona igual de bem aqui porque background-image é o fundo da PRÓPRIA caixa: pinta por baixo de tudo, inclusive do ::before com z-index negativo. */ :is(.wp-block-group, .wp-block-columns, .wp-block-column):is(.is-style-vidro, .is-style-vidro-leve, .is-style-vidro-intenso, .is-style-vidro-claro):not(.barra-cabecalho, .cabecalho-site, .wp-block-navigation__responsive-container) { position: relative; isolation: isolate; } :is(.wp-block-group, .wp-block-columns, .wp-block-column):is(.is-style-vidro, .is-style-vidro-leve, .is-style-vidro-intenso, .is-style-vidro-claro):not(.barra-cabecalho, .cabecalho-site, .wp-block-navigation__responsive-container)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: rgb(var(--motriz-vidro-cor, 14 17 22) / var(--motriz-vidro-opacidade, 0.4)); -webkit-backdrop-filter: blur(var(--motriz-vidro-desfoque, 16px)) saturate(var(--motriz-vidro-saturacao, 180%)); backdrop-filter: blur(var(--motriz-vidro-desfoque, 16px)) saturate(var(--motriz-vidro-saturacao, 180%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / var(--motriz-vidro-brilho, 0)); } /* 2) Capa (Cover): estrutura diferente — o núcleo desenha a própria foto/vídeo e a cor de overlay (dimRatio) como FILHOS com z-index próprio (imagem/vídeo z-index:0, overlay de cor z-index:1), testados ao vivo no Editor de Site sem o CSS do núcleo carregado — por isso os três z-index abaixo são forçados explicitamente aqui, sem depender do que o núcleo aplicar em cada contexto (editor ou site publicado): imagem/vídeo (0) → vidro (1) → overlay de cor do núcleo, se houver (2) → conteúdo real (3). */ .wp-block-cover:is(.is-style-vidro-leve, .is-style-vidro-intenso, .is-style-vidro-claro) { position: relative; } .wp-block-cover:is(.is-style-vidro-leve, .is-style-vidro-intenso, .is-style-vidro-claro) > .wp-block-cover__image-background, .wp-block-cover:is(.is-style-vidro-leve, .is-style-vidro-intenso, .is-style-vidro-claro) > .wp-block-cover__video-background { z-index: 0; } .wp-block-cover:is(.is-style-vidro-leve, .is-style-vidro-intenso, .is-style-vidro-claro)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgb(var(--motriz-vidro-cor, 14 17 22) / var(--motriz-vidro-opacidade, 0.4)); -webkit-backdrop-filter: blur(var(--motriz-vidro-desfoque, 16px)) saturate(var(--motriz-vidro-saturacao, 180%)); backdrop-filter: blur(var(--motriz-vidro-desfoque, 16px)) saturate(var(--motriz-vidro-saturacao, 180%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / var(--motriz-vidro-brilho, 0)); } .wp-block-cover:is(.is-style-vidro-leve, .is-style-vidro-intenso, .is-style-vidro-claro) > .wp-block-cover__background { z-index: 2; } .wp-block-cover:is(.is-style-vidro-leve, .is-style-vidro-intenso, .is-style-vidro-claro) > .wp-block-cover__inner-container { position: relative; z-index: 3; } /* --------------------------------------------------------- VIDRO SOBRE FOTO — core/image ACHADO E HABILITADO: até a 1.32.x o painel Vidro só existia em Grupo, Navegação, Capa e Colunas (functions.php, $blocos_com_vidro). Bloco de Imagem ficava de fora — sem opção nenhuma de vidro no painel Estilos ao selecionar uma foto. Registrado agora ali, e o CSS entra aqui. A DIFERENÇA em relação a Grupo/Colunas: lá o vidro fica ATRÁS do conteúdo (z-index -1 no ::before), porque o conteúdo é texto que precisa continuar legível por cima do fundo desfocado. Na Imagem não há "conteúdo" nesse sentido — a foto É o conteúdo — então o vidro precisa ficar NA FRENTE dela, tingindo e desfocando a própria imagem. Mesmo squeleto do Capa (que já resolve isso do jeito certo com z-index:1), simplificado por não ter inner-container. */ .wp-block-image:is(.is-style-vidro-leve, .is-style-vidro-intenso, .is-style-vidro-claro) { position: relative; isolation: isolate; display: inline-block; /* Mesma variável que .is-style-parallax-lento já usa para a moldura da foto — mantém as duas convenções de "cartão de imagem" do tema consistentes. Se o bloco tiver um raio DIFERENTE vindo do controle de borda do próprio editor, ele guia o recorte (overflow:hidden abaixo respeita o raio real do , não este valor) — este aqui é só o reforço do ::before, para o caso comum de raio padrão. */ border-radius: var(--wp--custom--raio--imagem, 14px); overflow: hidden; } .wp-block-image:is(.is-style-vidro-leve, .is-style-vidro-intenso, .is-style-vidro-claro) img { position: relative; z-index: 0; display: block; } .wp-block-image:is(.is-style-vidro-leve, .is-style-vidro-intenso, .is-style-vidro-claro)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: rgb(var(--motriz-vidro-cor, 14 17 22) / var(--motriz-vidro-opacidade, 0.4)); -webkit-backdrop-filter: blur(var(--motriz-vidro-desfoque, 16px)) saturate(var(--motriz-vidro-saturacao, 180%)); backdrop-filter: blur(var(--motriz-vidro-desfoque, 16px)) saturate(var(--motriz-vidro-saturacao, 180%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / var(--motriz-vidro-brilho, 0)); } /* Legenda (figcaption), quando existir: precisa ficar ACIMA do vidro, senão o texto da legenda ficaria enevoado junto com a foto. */ .wp-block-image:is(.is-style-vidro-leve, .is-style-vidro-intenso, .is-style-vidro-claro) figcaption { position: relative; z-index: 2; } .cabecalho-site.rolado::before { background: rgb(var(--motriz-vidro-cor) / var(--motriz-vidro-opacidade)); -webkit-backdrop-filter: blur(var(--motriz-vidro-desfoque)) saturate(var(--motriz-vidro-saturacao)); backdrop-filter: blur(var(--motriz-vidro-desfoque)) saturate(var(--motriz-vidro-saturacao)); box-shadow: inset 0 1px 0 rgb(255 255 255 / var(--motriz-vidro-brilho)), 0 10px 30px -14px rgb(0 0 0 / 0.5); } /* Se você escolher uma cor de fundo no painel, ela manda: o tema entra só com o desfoque, sem pintar por cima. */ .cabecalho-site.has-background.rolado::before { background: transparent; } /* Altura constante — sem isso a barra muda de altura conforme a largura da tela, porque o conteúdo reflui. */ .barra-cabecalho { /* fica acima da camada de vidro, para não ser desfocado */ position: relative; z-index: 1; min-height: var(--motriz-altura-barra, 88px); align-items: center; /* Respiro lateral próprio. Sem isto o menu hambúrguer encosta na borda da tela quando a página estreita. Ajuste com: .barra-cabecalho { --motriz-barra-lateral: 2rem; } */ padding-inline: var(--motriz-barra-lateral, clamp(1rem, 3.5vw, 2.5rem)); } /* Menu hambúrguer aberto: mesmo vidro do cabeçalho, em vez de um bloco de cor chapada. Por que este seletor tem essa forma exata (não é capricho): o núcleo do WordPress (style.min.css) já tem uma regra própria de fundo padrão para este contêiner — .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open :not(.disable-default-overlay) — com especificidade (0,5,0). Uma versão simples da nossa regra (0,2,0) nunca venceria essa, com ou sem !important "educado". Testei ao vivo: igualando a forma exata do seletor do núcleo, nossa folha de estilo vence por ORDEM (carrega depois do core), sem precisar de !important — e o ":not(.has-background)" garante que, se o usuário escolher seu próprio fundo, a escolha dele vale (confirmado ao vivo nos dois cenários). */ .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background: rgb(var(--motriz-vidro-cor) / var(--motriz-vidro-opacidade)); -webkit-backdrop-filter: blur(var(--motriz-vidro-desfoque)) saturate(var(--motriz-vidro-saturacao)); backdrop-filter: blur(var(--motriz-vidro-desfoque)) saturate(var(--motriz-vidro-saturacao)); } /* Botão de vidro — aproximação do visual translúcido do iOS. Não é o "liquid glass" real (aquilo usa refração, que o CSS não faz), mas entrega o desfoque, o brilho de borda e a profundidade. Por que ISTO vence, sem !important: o próprio theme.json gera o botão padrão como ":root :where(.wp-element-button, ...)" — o ":root" sozinho, fora do :where(), já dá especificidade (0,1,0). A versão anterior envolvia a regra INTEIRA em :where(), ficando em zero — por isso o âmbar padrão do tema sempre vencia e o vidro "não funcionava" (confirmado ao vivo: fundo saía âmbar sólido, borda em 0px). Aqui repito o mesmo padrão do WordPress (":root" fora do :where()), testado nas duas direções: vence o padrão do tema, e continua perdendo corretamente para a escolha do usuário — cor preset chega com !important do próprio WordPress, cor customizada chega como estilo inline, que já vence normalmente. */ /* Os quatro números do vidro do botão são ajustáveis (v1.62.3). Nenhum deles é DECLARADO aqui: o valor de fábrica mora no fallback do var(), dentro da própria propriedade. É o que permite escrever a variável em qualquer ancestral — no botão, na seção, no cabeçalho — e ela chegar. Declarar na raiz congelaria as derivadas, e declarar aqui mataria a herança de quem escrevesse mais acima (as duas armadilhas medidas na v1.62.2). A COR continua sendo --motriz-vidro-cor, a mesma do resto do sistema de vidro (seção 4.2 do guia). */ :root .is-style-vidro-botao .wp-block-button__link { background: rgb(var(--motriz-vidro-cor, 244 246 250) / var(--motriz-vidro-botao-opacidade, 0.18)); -webkit-backdrop-filter: blur(var(--motriz-vidro-botao-desfoque, 14px)) saturate(var(--motriz-vidro-botao-saturacao, 180%)); backdrop-filter: blur(var(--motriz-vidro-botao-desfoque, 14px)) saturate(var(--motriz-vidro-botao-saturacao, 180%)); border: 1px solid rgb(255 255 255 / var(--motriz-vidro-botao-borda, 0.25)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 -1px 0 rgb(0 0 0 / 0.15), 0 8px 24px -10px rgb(0 0 0 / 0.45); } :root .is-style-vidro-botao .wp-block-button__link:hover { background: rgb(var(--motriz-vidro-cor, 244 246 250) / var(--motriz-vidro-botao-opacidade-hover, 0.3)); } .cabecalho-site.rolado { color: var(--wp--preset--color--gelo, #F4F6FA); } /* Sobre heróis escuros, comece com texto claro. */ .cabecalho-claro { color: var(--wp--preset--color--gelo, #F4F6FA); /* Encadeada com a altura real do cabeçalho (--motriz-altura-barra). Antes tinha um valor fixo (5rem = 80px) solto aqui, dessincronizado da altura de verdade da barra (88px) — 8px de folga indevida. */ margin-bottom: calc(-1 * var(--motriz-altura-cabecalho, var(--motriz-altura-barra, 88px))); } .cabecalho-site.rolado .wp-block-navigation, .cabecalho-site.rolado .wp-block-site-title a { color: inherit; } /* --------------------------------------------------------- 7b · INDICADOR DE PÁGINA ATUAL (menu do cabeçalho) Quem acende o item é o JavaScript (assets/js/motriz.js, seção 2b): ele compara o endereço de cada item com o endereço aberto e escreve a classe "motriz-atual". Por que no JS e não no HTML do menu: o WordPress só marca sozinho (classe "current-menu-item") os itens criados pela busca de páginas — item digitado como "link personalizado" nunca recebe marca nenhuma. E o menu do cabeçalho já está montado no banco: nada que fosse escrito no arquivo do tema chegaria nele. As duas classes são atendidas aqui, então o indicador aparece venha a marca de onde vier. Para afinar sem tocar em CSS de tema, em Estilos → CSS adicional (os quatro valores são independentes): .wp-block-navigation { --motriz-atual-cor: #F5871F; --motriz-atual-espessura: 2px; --motriz-atual-folga: 0.5em; traço mais perto/longe do texto --motriz-atual-recuo: 0.9em; gaveta do traço no menu aberto } Especificidade zero (:where) de propósito — mesma armadilha de ordem de carga já documentada no sistema de vidro: com ".wp-block-navigation" cru, o valor do tema imprimiria por último e o do painel nunca pegaria. --------------------------------------------------------- */ :where(.wp-block-navigation) { --motriz-atual-cor: var(--wp--preset--color--ambar-diesel, #F5871F); --motriz-atual-espessura: 2px; --motriz-atual-folga: 0.5em; --motriz-atual-recuo: 0.9em; } /* A cor do item aceso. Sem mexer no peso da fonte de propósito: 600 → 700 mudaria a LARGURA do item, e o menu inteiro daria um pulinho lateral a cada página visitada. */ .wp-block-navigation .wp-block-navigation-item:is(.motriz-atual, .current-menu-item) > .wp-block-navigation-item__content { color: var(--motriz-atual-cor); position: relative; } /* Item-pai de um submenu cujo filho é a página aberta: acende a cor, mas não ganha traço — o traço é do item de verdade, lá dentro. */ .wp-block-navigation .wp-block-navigation-item:is(.motriz-atual-pai, .current-menu-ancestor) > .wp-block-navigation-item__content { color: var(--motriz-atual-cor); } /* O traço. Fica ABAIXO da linha do texto, e não sublinhando: o sublinhado já é o estado de passar o mouse (theme.json), e dois sinais iguais para coisas diferentes confundem. */ .wp-block-navigation .wp-block-navigation-item:is(.motriz-atual, .current-menu-item) > .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; /* O menu é caixa-alta com letter-spacing 0.1em — sobra um vão depois da última letra. Sem descontá-lo, o traço passa do fim da palavra e fica torto em relação ao texto. */ right: 0.1em; bottom: calc(-1 * var(--motriz-atual-folga)); height: var(--motriz-atual-espessura); background: currentColor; border-radius: var(--motriz-atual-espessura); pointer-events: none; } /* Menu aberto no celular: a lista fica em pé, um item embaixo do outro, e traço embaixo do texto se perde no meio da pilha. Ali o traço vira uma barra em pé, na lateral. O recuo é dado a TODOS os itens, não só ao aceso: assim a barra mora numa gaveta reservada e nenhum item se desloca ao acender — a lista continua alinhada de cima a baixo. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content { padding-inline-start: var(--motriz-atual-recuo); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:is(.motriz-atual, .current-menu-item) > .wp-block-navigation-item__content::after { left: 0; right: auto; top: 0.15em; bottom: 0.15em; width: var(--motriz-atual-espessura); height: auto; } /* A entrada do traço. Fora de "prefers-reduced-motion: reduce", como todo o resto do tema — quem pediu menos movimento recebe o indicador já pronto, sem animação. */ @media (prefers-reduced-motion: no-preference) { .wp-block-navigation .wp-block-navigation-item:is(.motriz-atual, .current-menu-item) > .wp-block-navigation-item__content::after { transform-origin: left center; animation: motriz-atual-entrar 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:is(.motriz-atual, .current-menu-item) > .wp-block-navigation-item__content::after { transform-origin: center top; animation-name: motriz-atual-entrar-vertical; } } @keyframes motriz-atual-entrar { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } @keyframes motriz-atual-entrar-vertical { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } /* --------------------------------------------------------- 7c · CABEÇALHO ILHA — o segundo modelo de cabeçalho (v1.62.0) O modelo da seção 7 é uma BARRA que atravessa a tela inteira. Este é o oposto: duas ILHAS arredondadas flutuando por cima do conteúdo — a marca numa, as ações na outra — e um botão de três traços que abre um painel com o menu inteiro e os destaques da casa. É o desenho do scoutmotors.com e do starlink.com, medido nos dois: ilha destacada das bordas, vidro por trás, e o painel crescendo a partir da mesma quina de cima da ilha. OS DOIS MODELOS CONVIVEM. Nada aqui altera a barra da seção 7: o que liga este modelo é a presença da classe ".ilha-cabecalho" dentro do cabeçalho, escrita na parte de modelo "Cabeçalho ilha (flutuante)". Trocar de modelo é trocar a parte do modelo — o resto do tema continua igual. POR QUE ":has()" E NÃO UMA CLASSE NO
: a classe do
vem do MODELO ("cabecalho-site cabecalho-claro"), não da parte. Quem troca a parte do cabeçalho pelo editor não mexe no modelo, então essa classe continua a mesma — depender dela seria depender de uma edição que o usuário não faz. A marca de verdade está na parte, e é lida de dentro para fora. (O motriz.js também escreve ".cabecalho-ilha" no
, para os estados que o CSS sozinho não alcança.) POR QUE NÃO É GATEADO POR ".motriz-js": posicionamento não depende de JavaScript, e gatear causaria um pulo visível entre o primeiro quadro e a execução do script — o cabeçalho nasceria como barra e viraria ilha na frente do visitante. Quem precisa ver a coisa "solta" é o EDITOR, e lá o desmanche está em assets/css/editor.css, que só carrega no editor. O QUE DEPENDE DE JAVASCRIPT: só a abertura do painel (o botão de três traços, o véu e a medida de altura). Sem JS o painel aparece logo abaixo das ilhas, em fluxo normal, com todos os links alcançáveis — a mesma troca que as setas das faixas já fazem desde a v1.49.0. AJUSTE FINO — em Estilos → CSS adicional (todos independentes): .cabecalho-ilha { --ilha-topo: 0.9rem; distância até a borda de cima --ilha-lateral: 1.25rem; distância até as laterais --ilha-altura: 60px; altura das ilhas --ilha-raio: 14px; arredondamento --ilha-folga: 6px; respiro entre as duas ilhas --ilha-largura: 1280px; largura máxima do conjunto --ilha-fundo: 14 17 22; R G B do vidro (sem vírgula) --ilha-opacidade: 0.62; 0 = invisível, 1 = sólido --ilha-painel-opacidade: 0.62; idem, só no painel aberto --ilha-desfoque: 18px; 0 desliga o desfoque --ilha-painel-desfoque: 30px; idem, só no painel aberto --ilha-saturacao: 170%; 100% = não mexe nas cores atrás --ilha-rolado-extra: 0.22; o quanto fecha ao rolar (0 desliga) } --------------------------------------------------------- */ /* Especificidade zero de propósito: mesma armadilha de ordem de carga já documentada no sistema de vidro (seção 7). Com o seletor cru, o valor do tema imprimiria depois do CSS adicional e o ajuste do painel nunca pegaria. POR QUE ISTO MORA NA RAIZ, e não no cabeçalho (corrigido na v1.62.2): a versão anterior declarava estas variáveis numa lista — o
, a barra E o painel. Só que declarar a MESMA variável em vários níveis quebra a herança: mesmo com o usuário escrevendo ".cabecalho-ilha { --ilha-opacidade: 0.3 }" em CSS adicional, a barra e o painel redeclaravam 0.62 em si mesmos, e o valor do usuário nunca descia. Não é questão de especificidade — declaração no próprio elemento sempre vence herança, venha ela de onde vier. Medido: o ajuste não surtia efeito nenhum. Na raiz há um valor só, e qualquer elemento abaixo pode sobrescrevê-lo para a sua parte da árvore. É o que faz ".cabecalho-ilha { ... }" alcançar a barra E o painel de uma vez, que era a intenção desde o início. */ :where(:root) { --ilha-topo: clamp(0.6rem, 1.4vw, 1.1rem); --ilha-lateral: clamp(0.75rem, 3vw, 2rem); --ilha-altura: 60px; --ilha-raio: 14px; --ilha-folga: 6px; --ilha-largura: 1280px; --ilha-fundo: 14 17 22; --ilha-opacidade: 0.62; /* --ilha-painel-opacidade NÃO é declarada aqui, de propósito. O painel usa a MESMA translucidez das ilhas: aberto, a ilha fica transparente e ele assume o lugar dela, então qualquer diferença apareceria como degrau de cor no meio da mesma superfície. "Acompanhar" tem de ser var(--ilha-painel-opacidade, var(--ilha-opacidade)) no ponto de USO, e não uma derivação escrita aqui: var() dentro de variável é resolvido no elemento que declara, então escrevê-la aqui congelaria o valor de fábrica e trocar --ilha-opacidade deixaria o painel para trás. Medido, antes da correção: ilha em 0,9 e painel teimando em 0,62. */ --ilha-desfoque: 18px; /* O painel desfoca mais que as ilhas de propósito: ele cobre meia tela de conteúdo, e com o mesmo desfoque das ilhas o que passa por trás ainda se lê como forma, o que atrapalha o texto do menu. Em variável própria para poder ser igualado. */ --ilha-painel-desfoque: 30px; --ilha-saturacao: 170%; /* Quanto o vidro das ilhas FECHA depois de 24px de rolagem — é o que as mantém legíveis ao passar por cima de uma seção clara. 0 desliga o efeito e deixa a ilha sempre com a mesma densidade. */ --ilha-rolado-extra: 0.22; --ilha-borda: 255 255 255; --ilha-borda-opacidade: 0.12; } /* O recuo real desconta a área segura do aparelho (notch, ilha dinâmica, cantos arredondados). Ele é DERIVADO de --ilha-topo e --ilha-lateral, e por isso não pode morar na raiz junto com eles: var() dentro de uma variável é resolvido no elemento que a DECLARA. Na raiz, este cálculo congelaria com o valor de fábrica e um ajuste de --ilha-topo feito no cabeçalho não chegaria aqui. Declarado nos dois consumidores, ele se recalcula em cada um com o valor que aquele elemento herdou — inclusive o do usuário. Os dois precisam do MESMO resultado: o painel é irmão da barra, e é o que faz as quinas de cima coincidirem quando ele abre. */ :where(.ilha-cabecalho, .ilha-painel) { --ilha-recuo-topo: max(var(--ilha-topo), env(safe-area-inset-top, 0px)); --ilha-recuo: max(var(--ilha-lateral), env(safe-area-inset-left, 0px)); } /* ---- O trilho: o
vira uma faixa fixa e transparente ---- "pointer-events: none" é essencial: a faixa cobre a largura toda da tela e, sólida ao clique, engoliria qualquer link do herói que passasse por baixo dela. Só as ilhas, o painel e o véu voltam a receber clique. */ .cabecalho-ilha, .cabecalho-site:has(.ilha-cabecalho), header.wp-block-template-part:has(.ilha-cabecalho) { position: fixed; top: 0; left: 0; right: 0; z-index: 120; margin: 0; pointer-events: none; color: var(--wp--preset--color--gelo, #F4F6FA); } /* A camada de vidro da barra comum (seção 7) não vale aqui: ela pinta a tela inteira de ponta a ponta, e o vidro deste modelo é o das ilhas. */ .cabecalho-ilha::before, .cabecalho-site:has(.ilha-cabecalho)::before { content: none; } /* ".cabecalho-claro" puxa o conteúdo para debaixo do cabeçalho com margem negativa — necessário quando o cabeçalho ocupa lugar no fluxo. Fixo, ele não ocupa lugar nenhum, e a margem negativa viraria um buraco de 88px no topo da página. (0,3,0) vence o (0,1,0) de ".cabecalho-claro" sem !important. */ .cabecalho-site.cabecalho-claro:has(.ilha-cabecalho), .cabecalho-site.cabecalho-claro.cabecalho-ilha { margin-bottom: 0; } /* ---- A barra que alinha as duas ilhas ---- ".wp-block-group" no seletor não é enfeite: o suporte de layout do WordPress gera uma ".wp-container-N" com gap, alinhamento e recuo próprios, e ela é impressa DEPOIS da folha do tema (é estilo de suporte de bloco, sai no no fim). Empate de especificidade se resolve por ordem — e o tema perderia. */ .wp-block-group.ilha-cabecalho { position: relative; z-index: 2; box-sizing: border-box; max-width: var(--ilha-largura); margin-inline: auto; padding: var(--ilha-recuo-topo) var(--ilha-recuo) 0; gap: var(--ilha-folga); align-items: flex-start; } /* ---- Cada ilha ---- (0,3,0) vence a ".wp-container-N" que o suporte de layout do WordPress gera para o Grupo em flex, que é (0,1,0). */ .ilha-cabecalho .wp-block-group.ilha { pointer-events: auto; position: relative; box-sizing: border-box; min-height: var(--ilha-altura); align-items: center; flex-wrap: nowrap; gap: clamp(0.55rem, 1.4vw, 1.15rem); padding-inline: clamp(0.8rem, 1.5vw, 1.25rem); border: 1px solid rgb(var(--ilha-borda) / var(--ilha-borda-opacidade)); border-radius: var(--ilha-raio); background: rgb(var(--ilha-fundo) / var(--ilha-opacidade)); -webkit-backdrop-filter: blur(var(--ilha-desfoque)) saturate(var(--ilha-saturacao)); backdrop-filter: blur(var(--ilha-desfoque)) saturate(var(--ilha-saturacao)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.10), 0 12px 34px -20px rgb(0 0 0 / 0.75); transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } /* A ilha da marca cede espaço; a das ações, nunca. Mesma divisão de trabalho da barra comum (seção 7), pelo mesmo motivo: sem isto o título empurra o botão para fora da tela. */ .ilha-cabecalho .ilha-marca { min-width: 0; flex-shrink: 1; } .ilha-cabecalho .ilha-acoes { flex-shrink: 0; } .ilha-cabecalho .wp-block-site-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(0.95rem, 1.5vw, 1.1rem); letter-spacing: 0.01em; } .ilha-cabecalho .wp-block-site-title a { text-decoration: none; color: inherit; } .ilha-cabecalho .wp-block-site-logo img { display: block; } /* O botão de ação dentro da ilha é compacto — a ilha é pequena. */ .ilha-cabecalho .wp-block-button__link { padding: 0.62rem 1.1rem; font-size: 0.78rem; white-space: nowrap; } /* Ao rolar, o vidro fecha um pouco: a ilha continua legível quando passa por cima de uma seção clara. Quem escreve ".rolado" é o mesmo trecho do motriz.js que já cuida da barra comum. */ .cabecalho-ilha.rolado .ilha { background: rgb(var(--ilha-fundo) / calc(var(--ilha-opacidade) + var(--ilha-rolado-extra))); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 14px 38px -18px rgb(0 0 0 / 0.85); } /* --------------------------------------------------------- O BOTÃO DE TRÊS TRAÇOS Não é um bloco: o motriz.js o cria. É de propósito — botão de verdade (