/* ======================================================================= PAGINA DE UMA NOTICIA — medido do InternasPage-Noticias.pdf ----------------------------------------------------------------------- Artboard de 1440 x 4065,2, entao 1pt do arquivo = 1px aqui. 🔴 O texto deste PDF vem VETORIZADO: 766 formas contra 6 objetos de texto. Nenhum corpo de fonte foi lido do arquivo -- todos saem da ALTURA DA TINTA medida no render 1:1, dividida por 0,714 (cap-height/em da Noto Sans) quando a linha nao tem descendente, ou por 0,954 (cap + descendente) quando tem. A coluna de leitura tem 930, e nao os 1170 da grade: x = 254,5 .. 1184,5, centrada na pagina. Coluna estreita e decisao de tipografia do layout, e vale manter -- linha longa demais cansa. ======================================================================= */ .nd { /* a coluna de leitura, medida: 1184,5 - 254,5 */ --coluna-leitura: 930px; /* as duas reguas da faixa de data */ --regua: #C7C9D1; display: block; padding-block: 0 0; } /** * 🔴 min(100% - 48px, X) e nao "max-width + padding". * * Este erro ja custou caro em 11/08: "max-width: 1170px" com padding dentro * dava 1122 de CONTEUDO, a coluna comecava 24px adiantada e cada foto perdia * altura por causa da proporcao fixa. Um erro so, dois sintomas. */ .nd__coluna { width: min(100% - 48px, var(--coluna-leitura)); margin-inline: auto; } /* ----------------------------------------------------------------------- TITULO maiuscula de 49px no render -> 49 / 0,714 = 68,6 -> 68px entrelinha: topo da linha 1 em y=213, topo da linha 2 em y=293 -> 80px ----------------------------------------------------------------------- */ .nd__titulo { /** * 🔴 50/63 A PEDIDO DO JONH (25/08). O PDF mede 68/80 — maiúscula de * 49px no render, 49 / 0,714 = 68,6 — mas ele decidiu um título menor. * Fica registrado que é desvio DELIBERADO do arquivo, e não erro de * medição: a regra do projeto é que correção ao PDF só vale com * autorização e anotada. * * A margem acompanha: com corpo 50 e entrelinha 63, o topo da CAIXA fica * ~15,2px acima da tinta (entrelinha negativa de 2,55 + os 17,75 entre o * topo da caixa e a maiúscula). Para a tinta cair nos 213 do arquivo, * 213 - 152 - 15,2 = 45,8. */ margin: 46px 0 0; font-size: 50px; line-height: 63px; font-weight: 700; letter-spacing: -0.01em; color: var(--verde-escuro); } /* ----------------------------------------------------------------------- FOTO DO TOPO — 930 x 463 (2:1), medida do RECORTE O arquivo posiciona 930 x 1630,7 em y = -156,2; a lista de imagens da o POSICIONAMENTO, nunca o recorte. A medida util saiu da varredura de tinta. ----------------------------------------------------------------------- */ .nd__figura { margin: 35px 0 0; /* 393 - 358 */ } .nd__foto { display: block; width: 100%; aspect-ratio: 930 / 463; object-fit: cover; /* e fotografia: recortar borda nao perde informacao */ border-radius: 4px; /* mesmo raio das fotos dos cartoes */ background: var(--faixa-clara);/* enquanto carrega, e se o arquivo faltar */ } /** * ⚠️ A LEGENDA SO EXISTE EM 44% DAS NOTICIAS (e o credito em 33%), medido em * 25/08/2026. Por isso ela e opcional na view: uma faixa vazia sob a foto * pareceria defeito de layout. */ .nd__legenda { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--cinza-azulado); } /* ----------------------------------------------------------------------- FAIXA DE DATA E TEMPO DE LEITURA reguas de 2px em y=878 e y=922; o texto entre elas, em y=895..907 🪤 O arquivo tem um retangulo LIMA de 930 x 44 em y=879,1 -- exatamente o vao entre as duas reguas. Ele NAO aparece na tela: a varredura de tinta do render acha ali so as duas reguas e o texto. Mesmo engano de 19/08, quando tomei cor solida do relatorio por cor solida na tela. Nao pintar. ----------------------------------------------------------------------- */ .nd__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 23px; /* 878 - 855 */ /** * 10, e nao 12: o PDF poe as reguas a 44px uma da outra (878,1 e 922,1) e * a linha de texto ocupa 24 de entrelinha. Sobram 20, dez de cada lado. * Com 12 a faixa saia com 52 de altura total contra os 48 do arquivo. */ padding-block: 10px; border-block: 2px solid var(--regua); font-size: 17px; line-height: 24px; color: var(--cinza-azulado); } .nd__leitura { white-space: nowrap; } /* ----------------------------------------------------------------------- AUTOR — y 958..990, altura 33 ⚠️ A FOTO fica desligada por decisao do Jonathan (25/08). O circulo continua aqui: volta so tirando o "display: none" quando houver imagem. ----------------------------------------------------------------------- */ .nd__autor { display: flex; align-items: center; gap: 14px; margin: 35px 0 0; /* 958 - 923 */ font-size: 17px; line-height: 33px; color: var(--cinza-azulado); } .nd__avatar { /** * 🔄 O círculo VOLTOU em 25/08, a pedido do Jonh. Ele fica como * marcador cinza do layout — não há foto de autor no banco (nem coluna * de autor), então ele não carrega imagem nenhuma. */ display: block; flex: none; width: 33px; height: 33px; border-radius: 50%; background: #D9D9D9; } /* ----------------------------------------------------------------------- LIDE — y 1017..1117, duas linhas, entrelinha 62 tinta de 39 com descendente -> 39 / 0,954 = 40,9 -> 40px ----------------------------------------------------------------------- */ .nd__lide { margin: 27px 0 0; /* 1017 - 990 */ /* 🔴 36/44 a pedido do Jonh (25/08). O PDF media 40/62. Desvio deliberado. */ font-size: 36px; line-height: 44px; font-weight: 700; color: var(--verde-escuro); } /* ----------------------------------------------------------------------- CORPO linhas de tinta 16 com vao 8 -> entrelinha 24 16 / 0,954 = 16,8 -> 17px 🔴 Este bloco recebe HTML do banco. Ele chega ja higienizado pelo Application\Service\HtmlSeguro -- ver o comentario na view. O CSS aqui precisa dar conta do que o conteudo real tem: p, strong, br, a, li, span, em, u, ul, div, td, tr, img, ol, h2, h3, h4, iframe, table, hr, audio e blockquote (medidos em 400 noticias). ----------------------------------------------------------------------- */ .nd__corpo { margin: 31px 0 0; font-size: 17px; line-height: 24px; color: #2E3A36; /** * ⚠️ O PADRAO DO TEXTO E A ESQUERDA (pedido do Jonh em 25/08/2026). * * Esta linha e o piso; quem faz o trabalho de verdade e o * HtmlSeguro::alinhamentoDaCasa(), no servidor -- 451 das 960 noticias * trazem text-align:justify DENTRO do proprio corpo, e estilo em linha * ganha de folha de estilo. Sem a limpeza no servidor, so um * !important mirando [style*=justify] derrubaria aquilo. */ text-align: left; } .nd__corpo > *:first-child { margin-top: 0; } .nd__corpo p { margin: 0 0 24px; } .nd__corpo h2, .nd__corpo h3, .nd__corpo h4 { margin: 36px 0 16px; font-weight: 700; line-height: 1.3; color: var(--verde-escuro); } .nd__corpo h2 { font-size: 28px; } .nd__corpo h3 { font-size: 23px; } .nd__corpo h4 { font-size: 19px; } .nd__corpo ul, .nd__corpo ol { margin: 0 0 24px; padding-left: 26px; } .nd__corpo li { margin-bottom: 8px; } .nd__corpo a { color: var(--verde-escuro); text-decoration: underline; text-underline-offset: 3px; } .nd__corpo a:hover { color: var(--lima-escuro); } /** * ⚠️ Imagem dentro do texto NAO pode passar da coluna. O conteudo real traz * `width` e `style` proprios (medidos: `style` aparece em 79% das noticias), * e sem este freio uma foto larga empurra a rolagem horizontal da pagina * inteira -- defeito que ja apareceu em /publicacoes por outro motivo. */ .nd__corpo img { max-width: 100%; height: auto; border-radius: 4px; margin-block: 8px; } /* a foto do meio do texto: 930 x 371 no layout, com legenda logo abaixo */ .nd__corpo figure { margin: 32px 0; } .nd__corpo figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--cinza-azulado); } /* tabela do conteudo antigo -- rola dentro de si, nunca empurra a pagina */ .nd__corpo table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-bottom: 24px; } .nd__corpo td, .nd__corpo th { padding: 8px 12px; border: 1px solid var(--regua); } /* video incorporado ocupa a largura da coluna, mantendo 16:9 */ .nd__corpo iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin-block: 24px; border-radius: 4px; } .nd__corpo blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--lima); color: var(--verde-escuro); } /* ----------------------------------------------------------------------- TOPICOS — as TAGs do campo `no_hashtag` (99% das noticias tem) 🔴 CORRIGIDO EM 25/08. Eu tinha feito o titulo em #91BC19 e as etiquetas com borda de 2px em lima. As duas coisas estao erradas no arquivo, e a medicao mostra: titulo "Tópicos" #A8E61E — lido do render, 1.711 px dessa cor exata etiqueta borda de 4px em #6D7994 (cinza-azulado), NAO lima etiqueta 48 de altura, vao de 12 entre elas texto #6D7994, ~18px (haste de maiuscula de 13,1 no arquivo) As bordas aparecem no PDF como quatro retangulos por pilula: topo e base de 4 de altura, laterais de 4 de largura e 36 de altura. Os 6 de folga em cada ponta sao o raio do canto. ----------------------------------------------------------------------- */ .nd__topicos { margin-top: 42px; } .nd__topicos-titulo { margin: 0 0 15px; /* tinta de 33 com acento e descendente -> 33 / 1,02 = 32,4 */ font-size: 32px; line-height: 42px; font-weight: 700; color: var(--lima); /* #A8E61E, e nao o --lima-escuro */ } .nd__etiquetas { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; } .nd__etiqueta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: 22px; /** * ⚠️ 2px É DESVIO DELIBERADO DO ARQUIVO, pedido do Jonh em 25/08/2026: * "4px está muito grosso". O PDF mede 4 (ver o bloco acima). Fica anotado * pelo mesmo motivo do título 50/63 e do lide 36/44 -- sem esta linha, * alguém confere contra o arquivo daqui a um mês e "conserta" de volta. */ border: 2px solid var(--cinza-azulado); border-radius: 6px; font-size: 18px; font-weight: 700; letter-spacing: 0.02em; color: var(--cinza-azulado); /** * A etiqueta virou LINK em 26/08 -- cada tópico leva à lista de notícias * daquele termo. * * ⚠️ `text-decoration: none` e `color` explícitos: sem eles a etiqueta * herdaria o sublinhado e o azul de link do navegador, e o desenho do * arquivo (pastilha com borda) se perderia. */ text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } /* dá para ver que é clicável -- e o foco pelo teclado aparece igual ao passar do mouse */ a.nd__etiqueta:hover, a.nd__etiqueta:focus-visible { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; } /* ----------------------------------------------------------------------- AS REDES DA ABMES — quatro circulos de 32, vao de 14 🔴 CORRIGIDO EM 25/08. Eu tinha montado botoes de COMPARTILHAR com icones desenhados a mao. O arquivo traz Instagram, Facebook, X e YouTube — as redes DA ABMES — e os caminhos agora sao os do proprio PDF. No arquivo o glifo e um FURO no circulo (regra `evenodd`), entao o branco da pagina aparece por dentro. Aqui o efeito e o mesmo: circulo lima, glifo branco. ----------------------------------------------------------------------- */ .nd__redes { display: flex; gap: 14px; /* 300,5 - 286,5 = 14, medido entre os circulos */ margin: 44px 0 0; padding: 0; list-style: none; } .nd__rede { display: inline-flex; align-items: center; justify-content: center; /** * ⚠️ 40px de ÁREA, 32px de CÍRCULO. * * O arquivo desenha 32, mas alvo de toque abaixo de 40 reprova na * varredura de responsividade da casa. O circulo visivel continua com os * 32 do layout: os 40 vem de um `outline` transparente, que aumenta a area * clicavel sem mexer no desenho nem empurrar os vizinhos. */ width: 32px; height: 32px; outline: 4px solid transparent; border-radius: 50%; background: var(--lima); color: #fff; transition: background-color .18s ease; } .nd__rede:hover { background: var(--lima-escuro); } .nd__rede:focus-visible { outline: 3px solid var(--lima-escuro); outline-offset: 3px; } /* o glifo ocupa pouco mais da metade do circulo, como no arquivo */ .nd__rede svg { width: 17px; height: 17px; fill: currentColor; } /** * O glifo vindo da fonte de ícones (Bootstrap Icons), desde 26/08. * * ⚠️ `line-height: 1` é obrigatório: a fonte traz entrelinha própria e, sem * anular, o glifo desce alguns pixels dentro do círculo -- fica quase * centralizado, que é o pior dos casos porque não parece defeito. */ .nd__rede .bi { font-size: 17px; line-height: 1; } /* o botão de copiar nasce igual aos outros -- é