/* ═════════════════════════════════════════════════════════════ wordmark.css — o texto grande desenhado sobre a capa ═════════════════════════════════════════════════════════════ Extraído do style.css em 05/09/2026, quando o painel ganhou a prévia ao vivo do wordmark. POR QUE VIVE SOZINHO: a prévia do admin precisa das MESMAS regras que o site usa — se ela tivesse uma cópia própria, poderia ficar bonita enquanto a página publicada quebra, que é justamente a divergência que a prévia existe para eliminar. E carregar o style.css inteiro dentro do painel não é opção: são ~2.500 linhas escritas para o layout público (body, títulos, grades) que atropelariam o admin.css. Então: uma fonte só, carregada nos dois lugares — components/header.php (site) os quatro formulários de fb-admin/ (painel) Quem edita isto edita os dois ao mesmo tempo. É o objetivo. ═════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── TEXTO SOBREPOSTO NA FOTO DE DESTAQUE (coluna imagem_texto) Substitui o texto que antes vinha CRAVADO na imagem gerada por IA. Texto em pixel fica ilegível em thumb pequeno, é cortado de um jeito diferente por cada rede social no compartilhamento, não é indexado pelo Google e não existe pra leitor de tela. Aqui ele é HTML de verdade por cima de uma arte limpa: nítido em qualquer resolução, escalando pela largura do próprio hero (unidade cqw, ver acima). ───────────────────────────────────────────────────────────── */ /* Fonte do wordmark. Hospedada no próprio servidor de propósito: a CSP em .htaccess declara font-src 'self', então puxar do Google Fonts exigiria abrir a política para dois domínios externos (googleapis + gstatic) e pagar mais um DNS + TLS no carregamento. O arquivo tem 9,9 KB (subset latino, só o peso 700 que usamos) — menos que a maioria dos ícones da página. font-display: swap faz o texto aparecer na hora com a fonte de sistema e trocar quando a Chakra Petch chega, em vez de deixar buraco branco no lugar do título. */ @font-face { font-family: 'Chakra Petch'; src: url('../fonts/chakra-petch-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } .hero-overlay { /* ── As medidas que governam o tamanho do wordmark ──────────────── Todas em cqw (1cqw = 1% da largura do container), e todas redefinidas por variante mais abaixo. Ficam aqui, juntas e nomeadas, porque o font-size lá embaixo é uma conta entre elas: mexer numa e não na outra foi o que produziu o bug de 05/09. --wm-escala presença desejada: o tamanho que o texto TERIA se coubesse folgado. É o teto, nunca o valor final. --wm-pad-base respiro HORIZONTAL entre o texto e a borda, por contexto. O hero é largo e comporta 10cqw; os cards usam 7, porque num retângulo de 260px uma margem proporcionalmente igual espremeria o texto. É fixo por contexto — não é o que o slider move. --wm-pad-v-base respiro VERTICAL de referência, por contexto. É este que o slider do admin multiplica. --wm-pad-mult o slider de respiro do admin (0 a 2.5). --wm-desloc o slider lido como DESLOCAMENTO, para quando o texto está centralizado: (mult − 1) × base. Negativo sobe, positivo desce, e 1,00× dá exatamente zero — é o que mantém "centralizado" como o neutro do controle e o que impede este recurso de mexer nas capas já publicadas, que estão todas em 1,00× ou perto disso. --wm-pad-v-usado quanto de altura o respiro consome NESTA combinação. Não é o mesmo que o deslocamento: um texto empurrado 3cqw para baixo por padding assimétrico gasta 6cqw de altura (ver abaixo). Quem define esse valor são as classes .wm-v-*. É variável, e não conta repetida, porque entra em dois lugares que precisam concordar: o padding e o teto de altura. --wm-folga quanto fica reservado para a ARTE ao lado do texto. É o que impede o wordmark de encostar no lado oposto e ocupar a capa inteira. --wm-altura altura máxima do bloco inteiro de linhas. Existe por causa do destaque da home, onde o título sobreposto ocupa a metade de baixo do card e o wordmark de três linhas descia por cima dele. DESCONTA o respiro vertical: o espaço que o respiro consome não pode ser oferecido ao texto também, ou o texto desceria de volta por cima do título. ── POR QUE O SLIDER É VERTICAL (06/09/2026) ────────────────────── Ele nasceu horizontal: mexia em --wm-pad-base e, por tabela, na faixa de largura. O efeito visível era o texto encolher, não se deslocar — porque na horizontal o wordmark já está encostado na borda que interessa, e o que sobrava era espremer. A pedido do Fabiano ele passou a controlar o eixo vertical, que é onde existe de fato um espaço a distribuir. ── E POR QUE ELE VALE TAMBÉM NO CENTRO ─────────────────────────── A primeira versão do eixo vertical só agia nas âncoras (superior e inferior), porque "distância até a borda" pressupõe uma borda. No centro o controle ficava inerte — e centro é justamente a posição mais usada. O slider passa então a ter DOIS sentidos, conforme a âncora: superior/inferior → distância até aquela borda; 0 = colado. centro → deslocamento a partir do meio; 1 = neutro, abaixo de 1 sobe, acima de 1 desce. O truque do centro é padding assimétrico, não transform: com justify-content: center, encher só um lado desloca o bloco pela METADE do que se encheu, e o max(0px, …) escolhe o lado sem precisar de regra por sinal. Transform teria arrastado o véu escuro junto e desalinhado o contraste da arte. */ --wm-escala: 12; --wm-pad-base: 10; --wm-pad-v-base: 8; --wm-pad-mult: 1; --wm-desloc: calc((var(--wm-pad-mult) - 1) * var(--wm-pad-v-base)); /* O padrão do hero e dos cards é centralizado, então o padrão daqui é a conta do centro. O destaque da home, que ancora no topo, a substitui no próprio bloco. */ --wm-pad-v-usado: max(calc(var(--wm-desloc) * 2), calc(var(--wm-desloc) * -2)); --wm-folga: 10; --wm-altura: max(8, calc(46 - var(--wm-pad-v-usado))); /* ── A faixa é CALCULADA a partir do padding, nunca fixa ────────── Era um 70 cravado, e 70 só estava certo enquanto o padding era fixo em 10: sobra = 100 − 10 − 10 (os dois lados) − 10 (a folga da arte) = 70. Um número fixo mente no instante em que alguém mexe no respiro lateral de um contexto — com padding maior, a faixa autorizaria um texto que já não cabe. Repare que --wm-pad-mult saiu daqui quando o slider virou vertical: a largura disponível não depende mais do controle do admin. A conta continua sendo conta porque --wm-pad-base ainda varia por contexto (10 no hero, 7 nos cards) e porque o dia em que alguém ajustar esses números, a faixa precisa acompanhar sozinha — foi justamente o acoplamento esquecido que produziu o bug abaixo. E aqui um texto que não cabe não aparece cortado: a linha de destaque é pintada com background-clip: text, então o pedaço que passa da caixa fica sem gradiente e, sendo transparent, some da tela. Foi assim que "AO VENTOY" virou "AO VENTO" no ambiente local. Em produção o bug nunca chegou a aparecer: o único wordmark publicado lá ("CLAUDE"/"SKILLS") é curto o bastante para caber na caixa. Ou seja, era uma bomba armada esperando a primeira capa com palavra longa. Por isso esta conta precisa continuar sendo uma conta. O max() é o piso: mesmo com respiro e folga grandes a faixa nunca chega a zero, que zeraria o font-size e apagaria o wordmark. */ --wm-faixa: max(12, calc(100 - 2 * var(--wm-pad-base) - var(--wm-folga))); position: absolute; inset: 0; /* cobre o hero inteiro */ display: flex; flex-direction: column; justify-content: center; /* centralizado na vertical */ align-items: flex-start; /* alinhado à esquerda, como o desenho original */ /* O respiro lateral, fixo por contexto: a base (10cqw no hero) é a mesma margem que a arte original usava quando o texto ainda vinha cravado na imagem. Mexer nele move a faixa calculada acima junto — as duas coisas são a mesma medida vista de dois lados. Na vertical vale a conta do CENTRO, que é o padrão desta caixa. Só um dos dois lados recebe valor — o max(0px, …) descarta o negativo, e é isso que dispensa uma regra por sinal. As classes .wm-v-cima / .wm-v-baixo substituem por distância até a borda. Longhand, e não o atalho `padding`: as variantes e as classes de posição redefinem os lados separadamente, e um shorthand em qualquer uma delas zeraria os outros três em silêncio. */ padding-left: calc(var(--wm-pad-base) * 1cqw); padding-right: calc(var(--wm-pad-base) * 1cqw); padding-top: max(0px, calc(var(--wm-desloc) * 2cqw)); padding-bottom: max(0px, calc(var(--wm-desloc) * -2cqw)); gap: 0; pointer-events: none; /* não rouba clique/seleção da imagem */ /* Véu escuro da esquerda pra direita: garante contraste do texto mesmo se a arte por baixo tiver uma região clara bem onde ele cai. Para no meio (60%) pra não apagar o lado direito da ilustração. */ background: linear-gradient( to right, oklch(12% 0.03 273 / 0.72) 0%, oklch(12% 0.03 273 / 0.45) 35%, transparent 60% ); } .hero-overlay-linha { font-family: 'Chakra Petch', 'Segoe UI', Arial, sans-serif; /* ── O tamanho da fonte é CALCULADO, não estipulado ─────────────── O menor entre três limites — o primeiro que apertar, vence: 1. var(--wm-escala) a presença que se quer dar ao wordmark; 2. faixa ÷ --wm-em o tamanho em que este texto, com ESTAS letras, ainda cabe na largura reservada. --wm-em vem do PHP e diz quantos "em" a linha ocupa (ver largura_em_wordmark()); 3. altura ÷ linhas o tamanho em que o bloco todo ainda cabe na altura reservada. O 0.95 é o line-height declarado logo abaixo — se ele mudar, mude aqui junto, senão a conta descola do desenho. POR QUE ISSO SUBSTITUIU UM `12cqw` SECO: o valor fixo ignorava o texto. "CLAUDE" ficava pequeno e "ALTERNATIVA" transbordava — e transbordo aqui não aparece como corte, aparece como letra que some (ver o bloco sobre max-width logo abaixo). Agora palavra longa encolhe sozinha e palavra curta usa a escala inteira, sem media query e sem ninguém precisar conferir cada capa nova à mão. O clamp continua sendo cinto de segurança nos extremos: não some num celular estreito nem vira outdoor num ultrawide. */ --wm-em: 8; /* fallback conservador: se o PHP não mandar a medida, o texto sai pequeno em vez de sair quebrado. */ font-size: min( /* ── Os dois tetos invioláveis: caber na largura e caber na altura. Estão FORA do max() de propósito. Num clamp() comum o piso de legibilidade poderia superá-los num container estreito, e o piso venceria — devolvendo texto que não cabe, que é a origem exata do bug. A ordem aqui é explícita e proposital: caber vem antes de qualquer mínimo estético. Se um dia o wordmark precisar sair a 7px para caber, ele sai a 7px; o que ele não faz mais é transbordar em silêncio. */ var(--wm-faixa) * 1cqw / var(--wm-em), var(--wm-altura) * 1cqw / (var(--wm-linhas, 1) * 0.95), max( /* Piso de legibilidade: abaixo disso o wordmark vira sujeira. Só vale quando não briga com os dois tetos acima. */ 14px, min( /* --wm-mult é o slider de tamanho do admin (0.6 a 1.6). Multiplica a escala da VARIANTE em vez de substituir um tamanho: assim um ajuste feito pensando no hero acompanha proporcionalmente o card de 260px, e o wordmark continua sendo o mesmo desenho nos dois. Um valor em pixel ficaria bom num contexto e absurdo nos outros. Mexer nele é seguro por construção: os dois tetos acima vencem sempre, então no limite o texto para de crescer — nunca transborda. */ var(--wm-escala) * var(--wm-mult, 1) * 1cqw, 126px /* não vira outdoor num monitor ultrawide */ ) ) ); /* Sem quebra no meio da palavra: nesta escala qualquer wrap partiria "SKILLS" ao meio em vez de reduzir. Se não couber, é sinal de que o font-size passou do ponto. */ white-space: nowrap; font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 12px oklch(12% 0.03 273 / 0.55); /* NÃO devolva um `max-width` para cá — foi ele que causou o bug de 05/09/2026, e o modo de falhar é traiçoeiro. Com max-width a caixa do fica menor que o texto (que é nowrap e não encolhe), e a linha de destaque é pintada com background-clip: text: o gradiente termina onde a CAIXA termina, não onde o texto termina. O pedaço que passava ficava sem gradiente e, com color: transparent, ficava INVISÍVEL — não cortado, invisível, sem erro nem aviso. "AO VENTOY" virou "AO VENTO" no ambiente local, com o Y presente no HTML, no Google e no leitor de tela, só não desenhado. Em produção o mesmo código estava no ar sem sintoma, porque o único wordmark publicado lá é curto o bastante para caber — a falha esperava conteúdo. Quem limita a largura agora é o font-size calculado acima: ele aperta o TEXTO, em vez de espremer a caixa em volta dele. */ } /* Linha de destaque: a cor que o conteúdo escolheu na paleta do admin, com o roxo da marca como padrão de quem nunca escolheu nada. A cor sólida vem SEMPRE, mesmo quando a escolha é o gradiente: ela é o fallback de quem não tem background-clip: text (sem ela o texto ficaria transparente, ou seja, invisível) e é o que a impressão usa, porque background-image não sai no papel. O valor sai de paleta_wordmark() em config/helpers.php, nunca do banco direto — a coluna guarda só a chave da cor. */ .hero-overlay-linha--destaque { color: var(--wm-cor-destaque, oklch(70% 0.21 300)); text-shadow: none; /* sombra atrapalha o recorte do gradiente */ } /* ── O MESMO wordmark nos thumbs (cards de listagem e destaque da home) ── Aqui está a razão de todo o overlay ser CSS e não pixel: a mesma marca aparece no hero de 840px, no card de 260px e no destaque da home de ~540px, sempre nítida, porque cada contexto vira seu próprio container de consulta e o texto se dimensiona pela largura de quem o contém. Card estreito pede proporção MAIOR (10cqw contra 8cqw do hero): num retângulo pequeno, texto proporcionalmente pequeno demais vira sujeira ilegível em vez de marca. */ .post-img-wrapper, .hero { container-type: inline-size; } .hero-overlay--card, .hero-overlay--destaque { /* Cards usam respiro base menor que o hero (7 contra 10): num retângulo de 260px, uma margem proporcionalmente igual à do hero de 840px espremeria o texto até ele virar um selo perdido no meio da arte. O multiplicador do admin age sobre os dois, preservando essa diferença — que é o que faz o wordmark parecer o mesmo desenho em escalas tão distantes. */ --wm-pad-base: 7; --wm-pad-v-base: 7; --wm-folga: 12; /* Só os lados: o vertical continua vindo do bloco base (card também nasce centralizado) ou das classes de posição. */ padding-left: calc(var(--wm-pad-base) * 1cqw); padding-right: calc(var(--wm-pad-base) * 1cqw); } .hero-overlay--card .hero-overlay-linha, .hero-overlay--destaque .hero-overlay-linha { text-shadow: 0 1px 6px oklch(12% 0.03 273 / 0.6); } /* Card de listagem: nada disputa a arte com o wordmark (o título fica ao LADO da imagem, não sobre ela), então ele pode usar quase toda a caixa — faixa larga e altura quase inteira. A escala sobe de 12 para 15 porque num retângulo de 260px um texto proporcionalmente pequeno não vira discrição, vira sujeira ilegível. */ .hero-overlay--card { --wm-escala: 15; /* A faixa sai da conta em .hero-overlay: 100 − 2×7 (respiro) − 12 (folga da arte) = 74, o mesmo valor que antes estava cravado aqui. A folga é 12 e não 10 porque com 10 o texto ficava tecnicamente dentro da caixa mas encostando nas duas bordas — cabia sem parecer que cabia. Com 12 a linha mais longa ocupa ~71% do card, a mesma proporção que o hero usa. */ --wm-altura: max(8, calc(78 - var(--wm-pad-v-usado))); } /* No destaque da home o título já vem sobreposto na base do card, dentro do .hero-content. Por isso aqui o wordmark sobe para o topo: os dois textos dividem a arte em vez de disputar o mesmo espaço. */ .hero-overlay--destaque { /* ── A CAIXA para antes do título, e é isso que torna a posição segura ── O destaque da home tem o título sobreposto na metade de baixo. Antes, o overlay cobria o card inteiro (`inset: 0` do bloco base) e só o teto de altura evitava a colisão — mas teto de altura limita o TAMANHO da fonte, não onde o bloco fica. Bastava o conteúdo escolher `meio-centro` ou `baixo-*` no admin para o wordmark ser centralizado no card TODO e descer por cima do título de novo (medido em 05/09/2026: a segunda linha ia até 288px com o título começando em 220px). Recortar a caixa em 57% resolve a classe inteira: qualquer uma das nove posições passa a se resolver DENTRO da área livre, porque não existe área fora dela. O 57% é onde o .hero-content começa, medido no destaque real. Se o layout do card mudar e o título subir ou descer, este número muda junto — ele descreve o desenho, não é preferência. */ inset: 0 0 43% 0; justify-content: flex-start; --wm-escala: 15; --wm-pad-v-base: 6; /* O destaque nasce alinhado ao topo (justify-content logo acima), então aqui — ao contrário do hero e do card, que nascem centralizados — o respiro vertical já vale no padrão, sem depender de o conteúdo ter escolhido uma posição. É o único contexto em que o slider faz efeito com a posição em "Padrão de cada contexto". */ --wm-pad-v-usado: calc(var(--wm-pad-v-base) * var(--wm-pad-mult)); padding-top: calc(var(--wm-pad-v-usado) * 1cqw); /* Zera o lado que a conta do centro poderia ter enchido no bloco base: com o slider abaixo de 1,00× ela produz padding-bottom, e aqui embaixo não há nada a afastar — o texto está ancorado no topo. Sem isto o destaque ganharia um empurrão fantasma vindo da regra genérica. */ padding-bottom: 0; /* ── O número mais importante deste bloco ────────────────────────── 26cqw é o espaço que sobra ACIMA do título sobreposto. Medido no destaque real da home: o .hero-content começa a 34,4cqw do topo do card e o overlay já gasta 6cqw de padding-top, deixando 28,4cqw — 26 fica com folga. Sem esse teto o wordmark de TRÊS linhas descia por cima do título e do badge de categoria: em 05/09/2026 o destaque do Easy2Boot mostrava "ALTERNATIVA / AO / VENTOY" com a terceira linha atrás do título branco, ilegível. Empurrar o texto para o topo (o justify-content acima) resolvia para duas linhas e falhava para três, porque tratava a POSIÇÃO e não o ESPAÇO disponível. Agora três linhas simplesmente encolhem até caber na metade de cima, que é o que o desenho sempre pediu. E o teto DESCONTA o respiro vertical, em vez de ser um 26 fixo: o espaço acima do título é 32cqw, dos quais o respiro come a primeira parte. Com o multiplicador em 1 a conta dá exatamente os 26 de antes; com o respiro no máximo ela aperta sozinha, em vez de deixar o texto descer sobre o título de novo. O max() garante que sobre altura para pelo menos uma linha legível. Esse desconto é o que torna o slider vertical seguro: ele empurra o texto para baixo E encolhe o teto na mesma medida, então o bloco nunca avança sobre o título por causa do respiro. */ --wm-altura: max(8, calc(32 - var(--wm-pad-v-usado))); } /* O véu escuro do hero desce da esquerda para a direita e serve para texto centralizado na vertical. No destaque, com o texto no topo, o degradê acompanha: escurece em cima, some antes de chegar no título. */ .hero-overlay--destaque { background: linear-gradient( to bottom, oklch(12% 0.03 273 / 0.7) 0%, oklch(12% 0.03 273 / 0.3) 45%, transparent 70% ); } /* O recorte do gradiente nas letras vale só para a linha que REALMENTE escolheu um degradê — a classe --gradiente é emitida pelo PHP nesse caso, e só nele. Cor sólida fica com `color` puro do bloco acima: recortar um gradiente de uma cor só não mudaria nada na tela e ainda colocaria a linha na rota da falha da letra invisível, que depende justamente de background-clip (ver o comentário sobre max-width). */ @supports ((background-clip: text) or (-webkit-background-clip: text)) { .hero-overlay-linha--gradiente { background-image: var(--wm-fundo-destaque, linear-gradient( 100deg, oklch(78% 0.15 225), oklch(62% 0.24 278) 45%, oklch(70% 0.23 330) )); -webkit-background-clip: text; background-clip: text; color: transparent; } } /* ───────────────────────────────────────────────────────────── POSIÇÃO DO WORDMARK SOBRE A CAPA (coluna imagem_texto_pos) Duas classes, uma por eixo, em vez de nove combinadas: seis regras cobrem as nove âncoras. O PHP emite o par (ver posicoes_wordmark() em config/helpers.php). Especificidade proposital: `.hero-overlay.wm-v-*` tem duas classes e por isso vence `.hero-overlay--destaque`, que ancora no topo por padrão. Ou seja, escolher a posição no admin SOBREPÕE o padrão da variante — que é exatamente o que o usuário espera ao mexer no controle. Sem posição escolhida nenhuma classe é emitida, e cada variante segue com o padrão que sempre teve. ───────────────────────────────────────────────────────────── */ /* Eixo vertical. O overlay é flex-direction: column, então quem move o bloco na vertical é justify-content (não align-items). ── E É AQUI QUE O RESPIRO VERTICAL É DECIDIDO ──────────────────── O slider do admin não vira padding diretamente. Ele é lido de dois jeitos, conforme a âncora — e são estas regras que escolhem qual: cima → DISTÂNCIA até o topo (0 = colado na borda) baixo → DISTÂNCIA até a base (0 = colado na borda) meio → DESLOCAMENTO a partir do meio (1,00× = centralizado, abaixo sobe, acima desce) Dois sentidos para o mesmo número é uma concessão consciente, e vale a pena porque a alternativa era pior: com uma leitura só, o controle ficava inerte justamente no centro, que é a posição mais usada. O painel explica a diferença na dica do campo. No centro o deslocamento sai de padding assimétrico: com justify-content: center, encher um lado só move o bloco pela METADE do que se encheu — por isso o *2 nas contas. O max(0px, …) escolhe qual lado encher sem precisar de regra por sinal, e --wm-pad-v-usado guarda o TOTAL consumido (2× o deslocamento), que é o que o teto de altura precisa descontar para o texto não vazar da caixa. Cada regra zera o lado oposto de propósito. O destaque da home define padding-top no próprio bloco, e a regra base define padding vertical pela conta do centro; sem os zeramentos, "inferior" somaria respiros de duas origens e jogaria o texto para o meio. */ .hero-overlay.wm-v-cima, .hero-overlay.wm-v-baixo { --wm-pad-v-usado: calc(var(--wm-pad-v-base) * var(--wm-pad-mult)); } .hero-overlay.wm-v-cima { justify-content: flex-start; padding-top: calc(var(--wm-pad-v-usado) * 1cqw); padding-bottom: 0; } .hero-overlay.wm-v-meio { justify-content: center; --wm-pad-v-usado: max(calc(var(--wm-desloc) * 2), calc(var(--wm-desloc) * -2)); padding-top: max(0px, calc(var(--wm-desloc) * 2cqw)); padding-bottom: max(0px, calc(var(--wm-desloc) * -2cqw)); } .hero-overlay.wm-v-baixo { justify-content: flex-end; padding-top: 0; padding-bottom: calc(var(--wm-pad-v-usado) * 1cqw); } /* Eixo horizontal. */ .hero-overlay.wm-h-esquerda { align-items: flex-start; text-align: left; } .hero-overlay.wm-h-centro { align-items: center; text-align: center; } .hero-overlay.wm-h-direita { align-items: flex-end; text-align: right; } /* ── O véu escuro acompanha a posição ───────────────────────────── O véu não é decoração: é o que garante contraste quando a arte por baixo tem uma região clara bem onde o texto cai. Um véu fixo à esquerda com o texto movido para a direita seria pior que véu nenhum — escureceria a ilustração no lado errado e deixaria o texto sem apoio justamente onde ele está. Centro leva véu plano e mais fraco, de propósito: com o texto no meio não há lado para onde o degradê possa desaparecer, e um véu direcional ali só escureceria metade da arte sem ajudar o texto. */ .hero-overlay.wm-h-esquerda { background: linear-gradient( to right, oklch(12% 0.03 273 / 0.72) 0%, oklch(12% 0.03 273 / 0.45) 35%, transparent 60% ); } .hero-overlay.wm-h-direita { background: linear-gradient( to left, oklch(12% 0.03 273 / 0.72) 0%, oklch(12% 0.03 273 / 0.45) 35%, transparent 60% ); } .hero-overlay.wm-h-centro { background: oklch(12% 0.03 273 / 0.38); } /* A impressão precisa desfazer o recorte do gradiente: navegador só imprime background-image se o usuário marcar "gráficos de fundo" no diálogo, e sem isso a linha de destaque (que é color: transparent recortando um gradiente) sairia INVISÍVEL no papel. Volta a ser cor sólida branca — a foto por baixo é imagem, essa sim sempre impressa. */ @media print { /* — Texto sobreposto: o gradiente das letras é um background-image, e navegador só imprime background se o usuário marcar "gráficos de fundo" no diálogo de impressão. Sem esta regra, a linha de destaque (que é color: transparent recortando o gradiente) sairia INVISÍVEL no papel. No print ela volta a ser cor sólida — a foto em si é imagem, essa sim sempre impressa, então branco sobre ela funciona. — */ .hero-overlay-linha--destaque, .hero-overlay-linha--gradiente { background-image: none !important; color: #fff !important; } }