/* ============================================================================ NovidadesIA — sistema visual v2, tema claro Referencias aprovadas: dev.to e developer.nvidia.com/blog. O que foi medido no navegador em cada uma: dev.to fundo quente rgb(247,247,245) em vez de branco puro; texto rgb(55,53,47) em vez de preto; cartao branco com fio de 1px feito por box-shadow e nao por border; raio de 4px; grade de tres colunas 240/717/358 com vao de 16px; tudo em sans. NVIDIA sans tambem; manchete em peso 300, leve e nao pesado; cartao conduzido pela imagem, sem raio e sem borda. DECISOES QUE SEGUEM DISSO: 1. Tema CLARO por padrao, e escuro automatico para quem pede no sistema. As duas paletas foram medidas em design/contrast_check.py. 2. Serifa no display, sans na estrutura. Invertido em 29/07/2026, quando o editor escolheu a direcao "jornal" entre quatro paletas comparadas na home real. A Newsreader carrega manchete, destaques e titulo de secao; a Inter fica com a cauda longa do feed, a interface e o corpo do texto. Antes a serifa estava nos subtitulos do corpo, onde brigava com a Inter ao lado. Peso do display em 420 a 450, e nao 550: a Wired usa 400 no display de 64px, e peso alto em manchete grande e vocabulario de blog. 3. NENHUMA sombra. Revisto em 29/07/2026 contra os sistemas de design da Wired e do The Verge: os dois proibem box-shadow para elevacao e resolvem hierarquia com contraste de superficie e fio. A elevacao tem tres niveis — plano, fio de 1px, borda de 2px na tinta. O fio virou border de verdade, o que entra no calculo de caixa; com box-sizing border-box global e trilha em minmax(0,1fr), isso nao desloca a grade, e foi verificado nos tres motores depois da troca. 4. Transbordo lateral: REPRODUZIDO e corrigido em 29/07/2026. Nao era transbordo do documento — era a .nav deslizando de lado dentro do proprio contentor de rolagem durante a rolagem vertical, com scrollWidth igual a viewport, o que cegava toda medicao baseada nele. Detalhe em design/BUG_TRANSBORDO.md. A correcao e estrutural: abaixo de 768px a navegacao tem faixa propria, sem linha compartilhada com o logotipo. Seguem valendo overflow-x clip na raiz e min-width zero em filho de grid e de flex, e mask-image continua fora. ============================================================================ */ @import url('/assets/fonts/fonts.css'); :root{ /* ========================================================================== ARQUITETURA DE TOKEN EM TRES CAMADAS, aplicada em 30/07/2026. PRIMITIVO valor cru, sem significado --tijolo-500, --s4 | SEMANTICO papel na interface --accent, --ink, --bg | COMPONENTE ajuste de um componente so --nav-fg, --chip-bg POR QUE, e nao e enfeite de organizacao: antes desta passada o CSS tinha UMA camada. `--accent:#5a63c4` era ao mesmo tempo o valor cru, o papel de acento e o que cada componente consumia. Consequencia pratica medida neste projeto: ao trocar a paleta em 29/07, o favicon nao mudou porque um dono paralelo tinha copia do valor, e nenhum componente podia divergir do acento sem escrever hex na regra — foi assim que 123 valores crus apareceram em regra. REGRA DE USO, e e o que faz a camada valer: - regra de componente consome token de COMPONENTE ou de SEMANTICO; - token de componente aponta para SEMANTICO, nunca para primitivo; - token semantico aponta para PRIMITIVO, nunca para outro semantico; - hex, rgb e px cru so existem na camada PRIMITIVO. Verificar com: node ~/.kiro/skills/design-system/scripts/validate-tokens.cjs --dir site/assets ========================================================================== */ /* ------------------------------------------------------------ 1 PRIMITIVO */ /* PILHA DE FONTE — tres papeis, trocada em 01/08/2026. Antes era UMA familia fazendo os tres trabalhos: display, corpo e interface, com `--font-serif` apontando para ela mesma. Isso nao e escolha, e ausencia de escolha — a pagina nao tinha personalidade tipografica porque nao havia contraste entre papeis. O que decidiu a troca foi um dado funcional, nao gosto: a Instrument Sans vai de 400 a 700 de peso e nao tem NENHUM peso leve. Manchete usada com restricao pede peso leve, e a familia nao oferecia. A Archivo vai de 100 a 900. A mono e o terceiro papel e nao existia. Ela serve o DADO: toda materia deste portal tem uma cifra que a qualifica, e figura tabular alinhada em coluna e o que faz percorrer a home virar percorrer um feed de dados. E a metade "terminal de inteligencia" da referencia do editor, entrando pelo dado e nao por cenografia. Custo medido: 49,6 KB contra 40,3 KB de antes, ou +8,4 KB. O eixo de largura da Archivo custaria 55 KB sozinho e ficou fora; uma serifa de leitura custaria 86 a 122 KB e ficou fora. Detalhe da conta em fetch_fonts.py. */ --fam-display:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif; --fam-sans:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif; --fam-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* ========================================================================== PALETA — tokens definidos pelo editor em 31/07/2026, junto com a marca nova. Encerra tres dias de tentativa e erro sobre temperatura, e vale registrar a conclusao porque ela contraria duas coisas que eu mesmo defendi: - a base NAO e creme. As duas versoes quentes que eu propus (croma 7,8 e 6,7) foram reprovadas com "muito bege". O fundo agora e #F6F6F3, croma 3, e a unica cor com croma alto na interface e a tinta secundaria #626A78, que e FRIA. Cinza azulado tolera croma e le como limpo; cinza amarelado, no mesmo croma, le como sujo. Foi o erro que eu repeti tres vezes; - a marca deixa de ser indigo e passa a ser VERMELHO PROFUNDO #A62D22, que e a cor do bloco "IA" da arte enviada. A identidade agora manda na paleta, e nao o contrario. Os degraus de linha ganharam dois papeis, `--border` e `--border-strong`, em vez de um fio unico servindo para tudo. ========================================================================== */ --branco:#FFFFFF; --branco-0:rgba(255,255,255,0); --neutro-000:#FFFFFF; /* superficie: painel, cartao */ --neutro-025:#FAFAF8; /* superficie sutil */ --neutro-050:#F6F6F3; /* FUNDO da pagina */ --neutro-150:#E5E5E1; /* borda */ --neutro-250:#D5D5CF; /* borda forte */ /* DIVERGENCIA MEDIDA do briefing. O editor especificou `--text-tertiary:#8B909B`. Medido sobre o fundo #F6F6F3 da propria especificacao: 2,96:1 — reprova AA, que pede 4,5:1 em texto pequeno. E o portal usa a terciaria justamente em rotulo de 10 e 12px: fonte, data, contagem, versalete de secao. Nao e caso de arredondar. Escureci APENAS a luminosidade, de 58% para 44%, mantendo matiz 221 e saturacao 7% — a cor continua sendo a mesma familia fria que ele escolheu, so legivel: 4,79:1 na pagina e 4,96:1 no painel. */ --neutro-500:#686D79; /* tinta terciaria; era #8B909B, 2,96:1 */ --neutro-700:#626A78; /* tinta secundaria — a unica fria da paleta */ --neutro-900:#191918; /* tinta de leitura */ --tijolo-500:#A62D22; /* MARCA: o vermelho do bloco IA */ --tijolo-600:#84231B; /* marca em hover */ --tijolo-050:#F7E9E6; /* marca em fundo suave */ --tijolo-500-30:rgba(166,45,34,.30); --verde-500:#16834A; /* preenchimento e indicador */ /* Terceira divergencia medida do briefing, e a mais sutil: `--success:#16834A` sobre `--success-soft:#E8F5ED` da 4,27:1, e o indicador "N no acervo" usa exatamente esse par em 13px. Reprova AA. Este tom escurecido 2% e usado SO como TINTA sobre o verde suave; o #16834A original continua para preenchimento. */ --verde-600:#157A45; --verde-050:#E8F5ED; /* Mesma situacao, por margem minima: o `--warning:#9A6700` do briefing da 4,496:1, e reprova por 0,004. Escurecido 1% de luminosidade. */ --ambar-500:#986600; /* era #9A6700, 4,496:1 */ --ambar-050:#FBF1D6; /* QR: as duas UNICAS cores do sistema que nao obedecem ao tema. Leitor de codigo precisa de contraste alto e previsivel — QR escuro sobre fundo escuro nao e lido por camera nenhuma, e um QR que muda de cor com o tema e um QR que as vezes nao funciona. Ficam como primitivo, e nao cruas na regra, porque foi cor crua em regra que deixou o tema escuro com texto invisivel em 30/07. */ --qr-fundo:#FFFFFF; --qr-legenda:#5A5A58; /* TEMA ESCURO — derivado dos mesmos tokens, nao inventado ao lado. A tinta secundaria fria do tema claro (#626A78) e o eixo: no escuro ela sobe de luminosidade e mantem o matiz, o que faz os dois temas parecerem a mesma marca em dois ambientes, e nao duas marcas. Conferido em design/contrast_check.py. */ --noite-000:#121315; /* fundo da pagina */ --noite-100:#1A1C1F; /* superficie */ --noite-200:#22252A; /* superficie sutil */ --noite-fio:#2E3238; /* borda */ --noite-fio-2:#3C424B; /* borda forte */ --neve-500:#8A929F; /* tinta terciaria */ --neve-700:#AEB6C2; /* tinta secundaria */ --neve-900:#EDEDEA; /* tinta de leitura */ --tijolo-300:#E8897C; /* marca no escuro */ --tijolo-300-hover:#F2A79C; --tijolo-900:#2E1512; --tijolo-300-38:rgba(232,137,124,.38); --verde-300:#4FBE7E; --verde-900:#0E2A19; --ambar-300:#D9A227; --ambar-900:#2C2109; /* Escala de corpo. E uma escala de PAINEL, apertada e uniforme — a referencia usa 12px 90x, 16px 88x, 14px 75x, 11px 72x, 10px 54x, 13px 21x, 18px 4x, 24px 1x, e nada de manchete de 48px. A escala de LEITURA e outra coisa e esta na camada semantica: 14px para ler 460 palavras seria erro. */ --txt-10:.625rem; --txt-11:.6875rem; --txt-12:.75rem; --txt-13:.8125rem; --txt-14:.875rem; --txt-16:1rem; --txt-18:1.125rem; --txt-20:1.25rem; --txt-22:1.375rem; --txt-24:1.5rem; /* Espaco, base de 4px. */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:2.5rem; --s8:3rem; --s9:4rem; /* Sub-passo abaixo de 4px. Existe para ajuste OPTICO — espessura de fio, deslocamento de sublinhado, folga interna de chip — e nunca para ritmo de layout. Se um bloco novo precisar de 2px de respiro entre secoes, o valor errado e o 2px, nao a escala. */ --fio:1px; --s-micro:2px; --s-min:3px; --s-meio:6px; --s-cheio:10px; /* Raio, por frequencia medida na referencia: 6px 50x, 8px 30px, 4px 20x. */ --r-3:3px; --r-4:4px; --r-6:6px; --r-8:8px; /* Tempo e curva, medidos: cor e box-shadow em 150ms com curva de entrada e saida; transform em 200ms com curva de saida. Nada acima de 200ms. */ --dur-rapida:150ms; --dur-media:200ms; --curva-inout:cubic-bezier(.4,0,.2,1); --curva-out:cubic-bezier(0,0,.2,1); /* Altura de linha e espacamento de letra: valor cru sem primitivo abaixo, porque nao ha o que reaproveitar entre eles. */ --lh-tight:1.2; --lh-snug:1.35; --lh-normal:1.5; --lh-body:1.62; --ls-tight:-.022em; --ls-snug:-.011em; --ls-normal:0; --ls-label:.04em; --ls-caps:.06em; /* versalete de divisor e de rotulo de secao */ --ls-selo:-.01em; /* duas letras dentro do selo de 36px */ /* ------------------------------------------------------------ 2 SEMANTICO */ --font-display:var(--fam-display); --font-sans:var(--fam-sans); /* O token de serifa aponta para a MESMA pilha desde a unificacao. Fica no lugar para nao quebrar regra que ainda o use, e some quando nao houver mais. */ /* o token de serifa fica apontando para a sans desde a unificacao de 30/07; nao ha serifa no sistema, e a decisao esta medida: custaria 86 a 122 KB. Fica no lugar para nao quebrar regra que ainda o use, e sai quando nao houver mais. */ --font-serif:var(--fam-sans); --font-mono:var(--fam-mono); /* ESCADA DE SUPERFICIE, refeita em 30/07/2026 a pedido do editor: "o contraste do branco esta um pouco estranho, branco demais, fica complicado identificar as separacoes entre as estruturas". Ele esta certo, e o diagnostico e preciso: a pagina e o painel eram O MESMO branco #ffffff, entao a unica coisa que separava um do outro era o anel de 1px. Tirando esse fio, nao havia nenhuma informacao de profundidade — e fio de 1px em tela de celular, com brilho baixo, praticamente desaparece. A correcao e a escada de superficie, que e como as marcas premium sem sombra resolvem profundidade (Linear, Vercel, Figma, Claude, medidos em awesome-design-md): a pagina desce um tom, o painel fica branco, e o painel passa a FLUTUAR por diferenca de tom em vez de por moldura. --bg #f1f2f7 pagina, um tom com leve viés indigo do acento --surface #ffffff painel, cartao, cabecalho --surface-2 #f6f7fa realce dentro do painel (hover, bloco de fontes) --surface-3 #fafbff realce mais frio, selo O viés indigo nao e enfeite: cinza neutro sobre acento indigo puxa a pagina para um cinza sujo. Deslocar o fundo na direcao do acento mantem a paleta coerente com uma cor so de marca. */ --bg:var(--neutro-050); --surface:var(--neutro-000); --surface-0:var(--branco-0); --surface-2:var(--neutro-025); --surface-3:var(--neutro-025); --ink:var(--neutro-900); --ink-2:var(--neutro-700); --ink-3:var(--neutro-500); --hairline:var(--neutro-150); --linha-forte:var(--neutro-250); --hairline-2:var(--tijolo-500-30); --accent:var(--tijolo-500); --accent-hover:var(--tijolo-600); --accent-soft:var(--tijolo-050); --accent-fg:var(--branco); --ok:var(--verde-500); --ok-soft:var(--verde-050); --ok-fg:var(--verde-600); /* CAIXA DE DESTAQUE. Ganhou token em 30/07/2026 porque era o UNICO lugar do CSS com cor crua em regra — `background:#fffdf5` — e o tema escuro entrou por cima dela sem mudar nada: tinta #eceef5 sobre creme #fffdf5 da 1,05:1, texto invisivel. Achado pelo axe-core, nao pelo gate de paleta, porque o gate le a tabela de tokens e este valor nao era token. Licao: cor fora da camada de primitivo nao e falta de organizacao, e defeito esperando o proximo tema. */ --destaque-bg:var(--ambar-050); --destaque-anel:inset 0 0 0 var(--fio) rgba(154,103,0,.26); --ok-anel:inset 0 0 0 var(--fio) rgba(22,131,74,.30); --warn:var(--ambar-500); /* papel tipografico */ --text-hero:var(--txt-24); --text-h1:var(--txt-24); --text-h2:var(--txt-22); --text-lead:var(--txt-18); --text-entrada:var(--txt-18); --text-body:var(--txt-18); /* leitura: fora da escala do painel */ --text-card:var(--txt-16); /* titulo de item do feed */ --text-dek:var(--txt-14); /* descricao */ --text-ui:var(--txt-14); --text-cifra:var(--txt-20); /* numero em destaque no acervo e na ficha */ --text-meta:var(--txt-12); --text-label:var(--txt-10); /* forma */ --radius:var(--r-6); --radius-sm:var(--r-4); --radius-lg:var(--r-8); /* ELEVACAO POR ANEL POR DENTRO, nao por sombra projetada. Foi o achado que mais importa na medicao da referencia: a elevacao dela e `rgb(218,220,231) 0 0 0 1px inset`, repetida em toda superficie. Como o anel nao sai da caixa, nao empurra vizinho, nao soma com margem e nao desaparece no hover — o que muda e a COR dele. E por isso que a transicao declarada la e de box-shadow, e nao de transform. A tentativa anterior deste projeto usou sombra projetada em quatro camadas, a pedido do editor. Era o modelo errado: sombra empilhada e vocabulario de painel de controle; anel e vocabulario de produto acabado. */ --anel:inset 0 0 0 var(--fio) var(--hairline); --anel-ativo:inset 0 0 0 var(--fio) var(--hairline-2); --fio-1:var(--fio) solid var(--hairline); --fio-2:var(--fio) solid var(--hairline); --mov:var(--dur-rapida) var(--curva-inout); --mov-mov:var(--dur-media) var(--curva-out); /* medida de leitura. 66ch a 17px dava 726px; a 18px daria 770px, longe demais para portugues, que tem palavra mais longa que ingles. 62ch a 18px cai em ~700px, dentro da faixa que se le sem perder a linha. */ --measure:62ch; /* A unidade ch e relativa a fonte DO ELEMENTO: um bloco com texto de 13px resolvia 62ch em 496px e desalinhava 93px da coluna de leitura, medido em 29/07/2026. Para bloco cujo corpo nao esta no tamanho de leitura, usa-se este valor fixo, que e a mesma medida convertida. */ --medida-px:682px; /* CAIXA DO ARTIGO — contrato unico, definido em 30/07/2026 depois de o editor apontar "a imagem esta alinhada a esquerda e vejo outras inconsistencias". Medido em 1440px antes da correcao: a pagina tinha CINCO bordas de conteudo diferentes, e a figura nem estava centralizada. bloco borda esquerda causa h1 e resumo 214 caixa 744 com 28 de folga paragrafo 214 igual, por acaso caixa de repo 210 caixa 744 com 24 de folga fontes 202 caixa 744 com 16 de folga etiquetas 186 caixa 744 sem folga ressalva 241 max-width 682, o valor velho da medida FIGURA 72 `margin:18px 0` anulou `margin-inline:auto` A figura era o caso grave: 142px fora do centro. E a mesma armadilha que este projeto ja documentou uma vez (atalho `margin` anulando `margin-inline`), so que em outro seletor — sinal de que corrigir caso a caso nao resolve. Daqui em diante a geometria vem DESTES tres tokens e de UMA regra: --texto largura da linha de texto. E o numero que decide leitura. --pad-artigo folga lateral entre a moldura do bloco e o texto. --caixa-texto a caixa externa, derivada. Ninguem escreve este valor. */ --texto:688px; --pad-artigo:var(--s5); --caixa-texto:calc(var(--texto) + 2 * var(--pad-artigo)); --maxw:1400px; --maxw-artigo:1080px; /* alvo de toque. 44px e o minimo do criterio 2.5.5 da WCAG; o 2.5.8 da 2.2 exige 24px em AA. O portal mira 44 no que for tocavel de verdade, e 24 e piso absoluto de qualquer coisa clicavel — inclusive migalha de pao. */ --toque:44px; --toque-min:38px; --toque-piso:24px; /* Camada. O cartao do feed usa um pseudo-elemento esticado para virar alvo unico; tudo que precisa ser clicavel POR CIMA dele sobe uma camada. Um valor nomeado evita a escalada de z-index arbitrario que sempre acontece depois. */ --acima-do-cartao:1; /* ----------------------------------------------------------- 3 COMPONENTE */ /* So componente com ESTADO entra aqui. O ganho e o da fase 1 da revisao de design: hover, foco e ativo precisam existir e diferir, e com token nomeado isso da para ler numa linha em vez de caçar em tres regras. */ /* faixa de navegacao */ --nav-fg:var(--ink-2); --nav-fg-hover:var(--ink); --nav-bg-hover:var(--surface-2); --nav-fg-atual:var(--accent); --nav-bg-atual:var(--accent-soft); --nav-bg-atual-hover:var(--hairline-2); --nav-alt:var(--toque-min); --nav-pad:var(--s2) var(--s3); /* caixa de busca no cabecalho */ --busca-bg:var(--bg); --busca-fg:var(--ink-3); --busca-fg-hover:var(--ink-2); --busca-anel:var(--anel); --busca-anel-hover:var(--anel-ativo); --busca-alt:var(--toque-min); /* chip de secao e de formato */ --chip-bg:var(--accent-soft); --chip-fg:var(--accent); --chip-bg-hover:var(--hairline-2); --chip-pad:var(--s-micro) var(--s2); --chip-alt:var(--s5); /* linha do feed */ --feed-bg:var(--surface); --feed-bg-hover:var(--surface-2); --feed-titulo:var(--accent); --feed-titulo-hover:var(--ink); --feed-pad:var(--s4) var(--s5); /* trilha lateral */ --rail-fg:var(--ink-2); --rail-fg-hover:var(--ink); --rail-bg-hover:var(--surface-2); --rail-fg-atual:var(--accent); --rail-bg-atual:var(--accent-soft); /* paginacao */ --pag-fg:var(--accent); --pag-bg-hover:var(--accent-soft); --pag-alvo:var(--toque); /* etiqueta de assunto */ --tag-fg:var(--ink-2); --tag-fg-hover:var(--accent); --tag-anel:var(--anel); --tag-anel-hover:var(--anel-ativo); /* MARCA. O bloco "IA" e vermelho nos DOIS temas, de proposito: e a cor da marca, nao um estado da interface. O que muda entre temas e so a palavra ao lado, que herda a tinta de leitura. Trocar o bloco por um vermelho mais claro no escuro faria a marca ter duas cores — e marca com duas cores nao e marca. */ --marca-bloco:#A62D22; --marca-bloco-fg:#FFFFFF; /* pilula de filtro e indicador ao vivo */ --pilula-alt:34px; /* selo com o numero da pauta */ --selo-bg:var(--surface-3); --selo-fg:var(--accent); --selo-lado:36px; --selo-lado-min:28px; } /* ============================================================================ TEMA ESCURO — ligado por CONTROLE EXPLICITO em 30/07/2026, a pedido do editor. Historico que importa para nao repetir: o escuro ja existiu aqui, aplicado automaticamente por `prefers-color-scheme`, e foi DESLIGADO em 29/07 porque o editor disse "achei muito ruim de visualizacao nesse tom escuro" — o problema nao era o escuro, era nao ter escolha. Agora ele volta preso a um botao. COMO FUNCIONA, e por que assim: - o unico gatilho e o atributo `data-tema` no . Nao ha regra de prefers-color-scheme aplicando tema sozinha; - um script de 4 linhas no escreve esse atributo ANTES da primeira pintura, lendo a escolha salva e, na falta dela, a preferencia do sistema. Se isso rodasse no fim do corpo, a pagina piscaria branca antes de escurecer; - so a camada SEMANTICA e reapontada. Nenhum componente sabe que existe tema, o que e exatamente o motivo de a arquitetura ter tres camadas; - `color-scheme` acompanha, senao barra de rolagem, campo de formulario e menu nativo continuam claros dentro de uma pagina escura. ========================================================================== */ [data-tema="escuro"]{ color-scheme:dark; --bg:var(--noite-000); --surface:var(--noite-100); --surface-0:rgba(26,28,31,0); --surface-2:var(--noite-200); --surface-3:var(--noite-200); --ink:var(--neve-900); --ink-2:var(--neve-700); --ink-3:var(--neve-500); --hairline:var(--noite-fio); --linha-forte:var(--noite-fio-2); --hairline-2:var(--tijolo-300-38); --accent:var(--tijolo-300); --accent-hover:var(--tijolo-300-hover); --accent-soft:var(--tijolo-900); --accent-fg:var(--noite-000); --ok:var(--verde-300); --ok-fg:var(--verde-300); --ok-soft:var(--verde-900); --ok-anel:inset 0 0 0 var(--fio) rgba(79,190,126,.34); --warn:var(--ambar-300); --destaque-bg:var(--ambar-900); --destaque-anel:inset 0 0 0 var(--fio) rgba(217,162,39,.30); } /* A capa tipografica e a imagem de fonte nasceram para fundo claro. No escuro, branco puro de imagem vira um retangulo que grita ao lado do texto: um leve rebaixamento de brilho e saturacao devolve a imagem ao plano da pagina, e `filter` nao repinta pixel, so ajusta a exibicao. */ [data-tema="escuro"] .fig img{filter:brightness(.88) saturate(.92)} *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; /* clip nao cria contexto de rolagem como o hidden, entao nao quebra o sticky */ overflow-x:clip; max-width:100%; } body{ margin:0;overflow-x:clip; background:var(--bg);color:var(--ink); font-family:var(--font-sans);font-size:var(--text-body); line-height:var(--lh-body);letter-spacing:var(--ls-normal); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; font-optical-sizing:auto; } /* filho de grid e de flex precisa poder encolher: sem isto, um texto longo empurra a coluna e a pagina ganha rolagem lateral */ .layout>*,.grid>*,.card>*,.header-inner>*,.footer-grid>*,.card-body>*{min-width:0} img{max-width:100%;height:auto;display:block} svg{display:block;max-width:100%} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:2px} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} ::selection{background:var(--accent-soft)} /* ============================================================================ O DADO EM MONO TABULAR — a assinatura visual do portal, 01/08/2026. Toda materia daqui tem uma cifra que a qualifica: 2,8 trilhoes de parametros, 27.220 estrelas, 1,56 TB de pesos, 385 pontos, 55 falhas no V8. Antes esses numeros usavam a mesma sans do texto, com `tnum` ligado — alinhavam, mas nao se distinguiam. Em mono eles passam a ler como COLUNA: percorrer a home vira percorrer um feed de dados, e a leitura vertical dos numeros funciona sozinha. E o unico elemento aqui que concorrente brasileiro nao copia sem ter o dado extraido por materia. Nos temos; eles publicam texto. `font-feature-settings:"tnum" 1` continua, e nao e redundante: a Plex Mono e tabular por natureza, mas o token tambem cai em elemento que usa a sans. */ /* MONO NO NUMERO, SANS NO ROTULO. A primeira tentativa poe a mono no elemento inteiro — e "pontos no Hacker News", "Ultima atualizacao: segunda-feira" e "no acervo" viraram mono junto com a cifra. Rotulo e texto, nao dado: em mono ele fica largo, cansa e rouba a distincao que a mono deveria dar ao numero. A regra e: recebe mono o elemento que carrega SO digito. */ .cifra b,.repo-grid dd,.rail a b,.rail-acervo dd,.count,time, .pagination a,.pagination span{ font-family:var(--font-mono);font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;letter-spacing:-.02em} /* o rotulo ao lado do numero fica na sans, e em corpo menor */ .cifra span,.rail-acervo dt{font-family:var(--font-sans)} .meta{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent); color:var(--accent-fg);padding:var(--s3) var(--s4);font-weight:600; border-radius:0 0 var(--radius) 0} .skip:focus{left:0} .wrap{width:100%} @media (min-width:768px){.wrap{padding:0 var(--s5)}} /* CORRECAO DO BUG DE "EXPANSAO LATERAL", reproduzido em 29/07/2026. O sintoma nao era transbordo do documento: era a .nav deslizando de lado dentro do proprio contentor de rolagem durante a rolagem vertical. Um gesto de trackpad com componente horizontal movia nav.scrollLeft de 0 para 120 enquanto document.scrollWidth ficava igual a viewport, e os links colidiam com o logotipo. Por isso 60 combinacoes medindo scrollWidth nao acharam nada. Conteudo da nav: 659px fixos. Escondido: 356px em 320, 301px em 375, 0 em 768. A correcao e estrutural: abaixo de 768px a nav ganha faixa propria de largura total, entao nao ha linha compartilhada onde colidir. */ .header-inner{min-height:56px} .logo{line-height:0} .logo:hover{text-decoration:none;opacity:.8} .nav{overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; width:100%; order:3; margin:0 calc(var(--s4) * -1); border-top:1px solid var(--hairline); padding-top:var(--s2); scroll-snap-type:x proximity; /* pista visual de que a faixa rola. Feita com camadas de background e background-attachment local/scroll: as camadas 'local' acompanham o conteudo e descobrem a sombra quando ha conteudo alem da borda. NAO usar mask-image, que foi removida daqui por variar entre motores. */ background-image: linear-gradient(to right,var(--surface) 60%,var(--surface-0)), linear-gradient(to left,var(--surface) 60%,var(--surface-0)), linear-gradient(to right,var(--hairline-2),var(--surface-0)), linear-gradient(to left,var(--hairline-2),var(--surface-0)); background-position:left center,right center,left center,right center; background-repeat:no-repeat; background-size:32px 100%,32px 100%,14px 100%,14px 100%; background-attachment:local,local,scroll,scroll} .nav::-webkit-scrollbar{display:none} .nav a{display:flex; align-items:center; min-height:38px; scroll-snap-align:start} .nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft); font-weight:600} @media (min-width:768px){ .header-inner{min-height:62px;flex-wrap:nowrap} .logo img{height:40px} /* ALTURA DA MARCA, calibrada em 01/08/2026 depois de o editor dizer que ela ficou "muito exagerada". O diagnostico: ela estava em 34px de altura e 296px de largura — 21% da largura util do cabecalho, quase o tamanho do campo de busca, que tem 394px. E a razao deste lockup e 8,69:1, muito mais larga que a marca anterior (5,21:1), entao a mesma altura ocupa quase o dobro do espaco. A referencia usada para calibrar foi o TEXTO DA NAVEGACAO, que tem 14px: uma marca de 20px de altura da 174px de largura e 1,43 vez o corpo do texto ao lado — le como marca sem dominar a linha. A 34px dava 2,43 vezes, e era o exagero. */ /* a partir de 768px os seis links cabem: medido, 0px escondido. Sem conteudo fora de vista nao ha o que deslizar, e a nav volta para a linha do logo. */ .nav{width:auto;order:0;margin-left:auto;margin-right:0;padding:0; border-top:0;background-image:none;overflow-x:visible} } /* h1 presente para leitor de tela e para o buscador, sem gastar a dobra */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* Titulo de secao e de indice: mesma familia da manchete, para a pagina de categoria pertencer ao mesmo veiculo que a home. Fio de 2px acima, como no titulo de bloco. */ /* grade de tres colunas como no dev.to: trilha de secoes, feed, apoio. A regra base da trilha vem ANTES das media queries: colocada depois, ela sobrescrevia o display:block por ter a mesma especificidade e vir por ultimo, e a trilha nunca aparecia. */ .rail{min-width:0} @media (min-width:1024px){ .layout{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s6)} } @media (min-width:1280px){ /* DUAS colunas, nao tres. Com a lista de categorias fora da barra — ela era copia da trilha — sobrava um unico widget e mais de 4.000px de coluna vazia ao lado do feed. Tres colunas com uma de enchimento e pior que duas boas. A trilha assume a navegacao e a barra sai de cena. */ .layout{grid-template-columns:216px minmax(0,1fr);gap:var(--s6)} .rail{display:block} .sidebar{display:none} } /* Contentor do feed mais estreito que o do site. O feed do dev.to mede 717px em 1440 (medido em 29/07/2026); com 1040px de contentor, a trilha de 216 e o vao de 32, a coluna de conteudo fica em 792px. Sem isso, em 1600 o feed abriria para 1.120px e o cartao perderia leitura. */ .rail h2{margin:0 0 var(--s2);font-size:var(--text-meta);font-weight:600; letter-spacing:var(--ls-normal);text-transform:none;color:var(--ink-3)} .rail ul{list-style:none;margin:0 0 var(--s5);padding:0} .rail a{font-weight:500; min-height:38px} .rail a[aria-current="page"]{background:var(--accent-soft);color:var(--accent); font-weight:600} .rail-acervo dd a:hover{color:var(--accent);text-decoration:none} /* O dev.to nao tem UM rotulo em caixa-alta na pagina inteira: medido em 29/07/2026, em 375, 768 e 1440. A pagina de artigo daqui tinha mais de dez. Caixa-alta com entreletra virou muleta de hierarquia; ela fica reservada ao chip de categoria, que e o unico lugar onde precisa competir com o titulo. */ /* HIERARQUIA DO FEED, em tres camadas com tratamento diferente e nao com tres tamanhos do mesmo cartao. 1. Manchete: sem moldura. Cartao dentro de pagina que ja e um cartao achata a hierarquia; a NVIDIA poe a manchete direto sobre o fundo. 2. Destaques: text-first, separados por fio. 3. Cauda longa: LISTA. Era aqui que a home gastava 5.300px para 20 itens, com laje de imagem de 256px em cada linha. O dev.to tira densidade de linha compacta, nao de cartao grande. */ /* Manchete sem imagem. Com a politica de procedencia, 13 das 27 imagens sairam e este virou o caso comum. Em vez de moldura vazia, a hierarquia vem do tipo: titulo maior, fio acima e respiro. */ @media (min-width:768px){ } /* destaques secundarios: sem imagem, sem moldura, fio entre eles */ /* cauda longa em lista: miniatura pequena a esquerda, texto a direita */ .feed-list{flex-direction:column} .feed-row{position:relative} .feed-row:first-child{border-top:0} /* Manchete sem figura nenhuma: nao ha o que reservar, entao ela ocupa a largura toda e ganha um fio de 2px no topo para nao flutuar solta na pagina. */ /* Divisor de dia. Nao e cabecalho de secao: e regua com a data, no lugar onde o jornal poe a quebra de ritmo. Fica em sans, pequeno e em tinta cheia, para marcar sem competir com o titulo da materia. */ .feed-dia{padding-top:var(--s2); font-variant-numeric:tabular-nums} .feed-dia + .feed-row{border-top:0} .feed-row h3{text-wrap:pretty} .feed-row h3 a::after{content:"";position:absolute;inset:0} .feed-row:hover h3 a{color:var(--accent);text-decoration:none} .feed-row .dek{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} @media (min-width:560px){ .feed-row{grid-template-columns:96px minmax(0,1fr); column-gap:var(--s4);align-items:start} } @media (min-width:640px){ } @media (min-width:1280px){ /* repetido de proposito: sem isto, a regra acima sobrescreve a coluna unica e o cartao sem imagem fica com a faixa de texto em zero pixel */ } .chip{position:relative; z-index:1} .chip:hover{text-decoration:none;filter:brightness(.96)} .chip-neutral{background:var(--surface-2);color:var(--ink-2)} .meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:center; font-size:var(--text-meta);font-weight:500;color:var(--ink-3)} .dot::before{content:"\00b7";margin-right:var(--s3);color:var(--hairline-2)} /* pontuacao e estrela sao metadado, nao manchete. O ambar era a unica cor quente da pagina e puxava o olho para o dado menos importante. */ .stars{color:var(--ink-3);font-weight:500} /* Capa tipografica gerada. O SVG herda a tinta por currentColor, entao muda com a paleta sem precisar de segundo arquivo. */ .fig--capa{background:var(--surface-2);color:var(--ink);overflow:hidden; border:var(--fio-1)} .fig--capa svg{display:block;width:100%;height:auto;aspect-ratio:16/9} .fig--capa-alta svg{aspect-ratio:2/1} .fig{margin:0;position:relative;background:var(--surface-2)} .fig img{width:100%;object-fit:cover;display:block} .fig figcaption{padding:var(--s2) var(--s4);font-size:var(--text-meta); line-height:var(--lh-normal);color:var(--ink-3);display:flex;gap:var(--s2); flex-wrap:wrap;align-items:baseline;background:var(--surface)} .fig figcaption a{color:var(--ink-2);position:relative;z-index:1} .prov{font-size:var(--text-meta);font-weight:500;text-transform:none; white-space:nowrap;color:var(--ink-3)} .article-fig .fig{border-radius:var(--radius-lg);overflow:hidden; border:var(--fio-1)} .article-fig .fig img{aspect-ratio:16/9} /* Captura de interface nao se recorta: recortada a 16:9 com cover, ela perde justamente o que tinha para mostrar. Cabe inteira, em moldura neutra. */ .article-fig .fig--captura{background:var(--surface-2);padding:var(--s4)} .article-fig .fig--captura img{aspect-ratio:auto;max-height:62vh;width:auto; max-width:100%;margin-inline:auto;object-fit:contain} .sidebar{flex-direction:column; gap:var(--s4); min-width:0} @media (min-width:1024px){.sidebar{position:sticky;top:76px;align-self:start}} /* a ordem importa: esta regra tem de vir DEPOIS de .sidebar{display:flex}, que e da mesma especificidade. Posta antes, na media query do .layout, ela era anulada e a barra reaparecia empilhada no fim do feed. */ @media (min-width:1280px){.sidebar{display:none}} /* A pagina de artigo tinha a coluna de 726px grudada a esquerda dentro de um contentor de 1400px: 870px de vazio a direita em 1600. Duas correcoes: o contentor do artigo e mais estreito, e todo bloco de leitura e centrado. */ .breadcrumb{font-size:var(--text-meta);color:var(--ink-3);margin-bottom:var(--s4)} .breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2); margin:0;padding:0} .breadcrumb li:not(:last-child)::after{content:"/";margin-left:var(--s2); color:var(--hairline-2)} /* ALVO DE TOQUE DA MIGALHA, corrigido em 30/07/2026. Medido: os links da migalha tinham 15px de altura ("Inicio" 29x15, "Noticias" 45x15, "Modelos e LLMs" 90x15) em 375 e 768px, abaixo dos 24px que o criterio 2.5.8 da WCAG 2.2 exige em NIVEL AA. A isencao de "alvo dentro de frase" nao se aplica: migalha e lista de links com separador, nao texto corrido. O conserto e inline-flex com altura minima em vez de padding: padding aumentaria a area mas tambem empurraria o separador "/" e mudaria o desenho da linha. Assim a area cresce e a aparencia do texto fica igual. */ .breadcrumb a{color:var(--ink-2);display:inline-flex;align-items:center; min-height:var(--toque-piso)} .breadcrumb li{display:inline-flex;align-items:center} /* a serifa fica so aqui, no titulo da materia. Nos subtitulos ela brigava com o Inter do corpo; as duas referencias aprovadas sao inteiramente sans, e a hierarquia delas vem de tamanho, peso e espaco. */ .article-head h1{text-wrap:balance; hyphens:none} .article-dek{text-wrap:pretty} .byline{padding:var(--s3) 0; border-top:1px solid var(--hairline)} .prose{font-size:var(--text-body); line-height:var(--lh-body); /* portugues tem palavra longa e a coluna e estreita no celular: sem hifenizacao sobra rio de espaco no meio do paragrafo */ hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:7 3 3} .prose>p{margin:0 0 var(--s4);text-wrap:pretty} /* paragrafo de entrada: da porta de leitura sem depender de cor */ .prose>p:first-of-type{font-size:var(--text-entrada);line-height:1.52; color:var(--ink);margin-bottom:var(--s5)} /* Continuacao do corpo depois da caixa de numeros. ORDEM IMPORTA: esta regra tem de vir DEPOIS de .prose>p:first-of-type, que tem a mesma especificidade. Posta antes, o primeiro paragrafo da continuacao herdava o tamanho do paragrafo de entrada e o texto seguia em 21px ate o fim da materia. Quarta vez que a ordem da cascata morde neste arquivo. */ .prose--segue{padding-top:0} .prose--segue>p:first-of-type{font-size:var(--text-body); line-height:var(--lh-body);color:var(--ink-2);margin-bottom:var(--s4)} /* Subtitulo do corpo em serifa. Voltou a serifa depois que a direcao "jornal" foi escolhida: com a Newsreader carregando manchete, destaque e titulo de secao, um subtitulo em Inter 650 era o unico display em sans da pagina, e lia como rotulo de interface no meio da leitura. Peso 500, nao 650, pela mesma razao do display: peso alto em serifa grande engorda a pagina. */ .prose h2{font-family:var(--font-sans);font-size:var(--text-h2);font-weight:600; line-height:1.18;letter-spacing:-.015em; margin:var(--s7) 0 var(--s3);scroll-margin-top:76px;text-wrap:balance; hyphens:none} .prose h2:first-child{margin-top:0} .prose ul,.prose ol{margin:0 0 var(--s4);padding-left:1.3em} .prose li{margin-bottom:var(--s2)} .prose li::marker{color:var(--accent)} .prose strong{font-weight:600;color:var(--ink)} .prose code{font-family:var(--font-mono);font-size:.88em; background:var(--surface-2);border-radius:4px;padding:.12em .35em} .prose a{color:var(--accent);text-decoration:underline; text-decoration-thickness:1px;text-underline-offset:3px} .prose a:hover{text-decoration-thickness:2px} .repo-box{margin:var(--s6) auto; padding:var(--s5); background:var(--surface); border-radius:var(--radius-lg); border:var(--fio-1); border-left:3px solid var(--accent)} .repo-box h2{font-family:var(--font-sans);margin:0 0 var(--s4); font-size:var(--text-ui);font-weight:600;letter-spacing:var(--ls-normal); text-transform:none;color:var(--ink)} .repo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4);margin:0} @media (min-width:560px){ /* Tres colunas, e nao quatro nem auto-fit. Medido no acervo de 29/07/2026: as fichas tem 2, 3, 7, 9 ou 11 campos, com 9 no caso mais comum (13 de 35). Em tres colunas, 23 das 35 fecham a ultima linha exata; em quatro, nenhuma. O auto-fit com minmax de 128px deixava um campo sozinho na ultima linha. */ .repo-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } .repo-grid dt{font-size:var(--text-meta);text-transform:none; letter-spacing:var(--ls-normal); color:var(--ink-3);margin-bottom:var(--s-micro)} .repo-grid dd{margin:0;font-size:var(--txt-16);font-weight:600;color:var(--ink); overflow-wrap:break-word} .faq{margin:var(--s7) auto 0} .faq h2{font-family:var(--font-sans);font-size:var(--text-h2);font-weight:600; letter-spacing:var(--ls-snug);margin:0 0 var(--s3)} .faq details{background:var(--surface);border-radius:var(--radius); border:var(--fio-1);margin-bottom:var(--s2)} .faq summary{cursor:pointer;padding:var(--s3) var(--s4);font-weight:600; font-size:var(--text-ui);list-style:none;display:flex; justify-content:space-between;gap:var(--s3);align-items:center;min-height:44px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--accent);font-size:1.2rem;flex-shrink:0} .faq details[open] summary::after{content:"\2212"} .faq details p{margin:0;padding:0 var(--s4) var(--s3);color:var(--ink-2); font-size:var(--text-ui);line-height:var(--lh-normal)} .sources{margin:var(--s7) auto 0; padding:var(--s4); background:var(--surface-2); border-radius:var(--radius-lg)} .sources h2{font-family:var(--font-sans);margin:0 0 var(--s3); font-size:var(--text-ui);font-weight:600;letter-spacing:var(--ls-normal); text-transform:none;color:var(--ink)} .sources ul{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:var(--s2)} .sources li{font-size:var(--text-ui);padding-left:1.1em;position:relative} .sources li::before{content:"\2192";position:absolute;left:0;color:var(--accent)} .sources a{overflow-wrap:anywhere;color:var(--ink-2)} .sources a:hover{color:var(--accent)} .tags-row{display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s5) auto 0} .related{margin:var(--s8) 0 0;padding-top:var(--s5); border-top:1px solid var(--hairline)} .related h2{margin:0 0 var(--s4);font-size:var(--text-ui);font-weight:600; letter-spacing:var(--ls-normal);text-transform:none;color:var(--ink)} .pagination{align-items:center; flex-wrap:wrap} .pagination a,.pagination span{min-width:44px; min-height:44px; border:var(--fio-1); display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius); background:var(--surface); border:var(--fio-1); font-weight:500} .pagination a:hover{color:var(--accent); border-color:var(--hairline-2)} .pagination [aria-current="page"]{background:var(--accent);color:var(--accent-fg); font-weight:700;border-color:var(--accent)} /* Transparencia sobre uso de IA. Estava em 13px cinza sobre cinza, com peso visual de rodape. Num veiculo com texto assistido por modelo de linguagem, este bloco e a ancora de confianca: ganha o tamanho do texto de apoio, fio de acento e a largura da coluna de leitura. */ .disclosure{margin:var(--s6) auto 0; padding:var(--s4) var(--s5); background:var(--surface); border-radius:var(--radius-lg); border:var(--fio-1); border-left:3px solid var(--accent); color:var(--ink-2); font-size:var(--text-ui); line-height:var(--lh-normal)} .footer-grid{display:grid;gap:var(--s5);margin-bottom:var(--s5)} @media (min-width:768px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr}} .footer-grid h2{margin:0 0 var(--s3);font-size:var(--text-ui);font-weight:600; letter-spacing:var(--ls-normal);text-transform:none;color:var(--ink)} .footer-grid p{margin:0;color:var(--ink-2);font-size:var(--text-ui);max-width:44ch} .footer-grid ul{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:var(--s1)} .footer-grid a{color:var(--ink-2);font-size:var(--text-ui); display:inline-flex;align-items:center;min-height:32px} .footer-grid a:hover{color:var(--accent)} .footer-brand img{height:26px;width:auto;margin-bottom:var(--s3)} .colofao{border-top:1px solid var(--hairline);padding:var(--s5) 0; margin-bottom:var(--s5);display:grid;gap:var(--s3)} .colofao h2{margin:0;font-size:var(--text-ui);font-weight:600;color:var(--ink); text-transform:none;letter-spacing:var(--ls-normal)} .colofao p{margin:0;color:var(--ink-2);font-size:var(--text-meta); line-height:var(--lh-normal);max-width:78ch} @media (min-width:900px){ .colofao{grid-template-columns:180px minmax(0,1fr) minmax(0,1fr); align-items:start;gap:var(--s5)} .colofao h2{grid-row:span 1} } .footer-bottom{border-top:1px solid var(--hairline);padding-top:var(--s4); color:var(--ink-3);font-size:var(--text-meta);display:flex;flex-wrap:wrap; gap:var(--s2) var(--s5)} .empty{text-align:center} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} } @media (prefers-contrast:more){ :root{--ink-2:#332f28;--ink-3:#443f36;--hairline:rgba(28,27,24,.3); --hairline-2:rgba(28,27,24,.5)} } /* ============================================================================ CAMADA DO PAINEL — 30/07/2026 Substitui o sistema de jornal chapado que existia antes. As regras aqui vem DEPOIS das antigas de proposito: quando o seletor e o mesmo, esta vence; quando e uma classe nova (prefixo pnl-), nao ha conflito. As regras antigas que sobraram sem uso saem numa passada de limpeza. Origem: medicao de trendshift.io no navegador, escolhido pelo editor. O que define o visual e o ANEL POR DENTRO, nao a sombra: nenhuma regra desta camada usa box-shadow com deslocamento. ============================================================================ */ /* ------------------------------------------------------------------ cabecalho */ .site-header{position:sticky;top:0;z-index:40;background:var(--bg); border-bottom:var(--fio-1);height:56px;display:flex;align-items:center; padding:0} /* nowrap explicito: em 375px o cabecalho quebrava linha, o conteudo media 64px de altura dentro dos 56px da faixa e a marca saia cortada. */ .header-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s5); display:flex;align-items:center;gap:var(--s5);flex-wrap:nowrap} .logo{min-width:0} /* A ancora da marca media 115x22. Dentro de uma faixa de 56px ha espaco de sobra para os 44px de alvo confortavel — o que faltava era a ancora ocupar a altura, nao a imagem crescer. */ .logo{display:flex;align-items:center;gap:var(--s2);font-size:19px;font-weight:700; letter-spacing:-.02em;flex-shrink:0;color:var(--ink);min-height:44px} .logo img{height:22px;width:auto;display:block} /* Caixa de busca: e o elemento central do cabecalho da referencia. Aqui e um link para a listagem com a mesma caixa e o mesmo anel — busca de verdade em site estatico exige indice em JavaScript, e isso fica para depois. Nao e um input falso: e um link, anunciado como link, com area de toque de 38px. */ .busca{flex:1;max-width:768px;height:var(--busca-alt);border-radius:var(--radius); box-shadow:var(--busca-anel);background:var(--busca-bg);display:flex;align-items:center; gap:var(--s2);padding:0 var(--s3);color:var(--busca-fg);font-size:var(--text-ui); transition:box-shadow var(--mov),color var(--mov)} .busca:hover{box-shadow:var(--busca-anel-hover);color:var(--busca-fg-hover); text-decoration:none} .busca svg{width:16px;height:16px;flex-shrink:0} .nav{display:flex;align-items:center;gap:var(--s1);margin-left:auto; overflow-x:visible;padding:0;border:0;background:none} .nav a{padding:var(--nav-pad);border-radius:var(--radius);font-size:var(--text-ui); font-weight:500;color:var(--nav-fg);white-space:nowrap; transition:color var(--mov),background-color var(--mov)} .nav a:hover{color:var(--nav-fg-hover);background:var(--nav-bg-hover);text-decoration:none} .nav a[aria-current]{color:var(--accent);background:var(--accent-soft); font-weight:600} /* O item ATIVO nao tinha estado de hover: a regra de aria-current vem depois de :hover e vence com especificidade igual, entao passar o mouse no item atual nao dava retorno nenhum. Oitavo caso de cascata neste projeto — todos da mesma familia: ordem e especificidade decidindo o que eu achava que estava decidido. Medido pela fase 1 do metodo de revisao. */ .nav a[aria-current]:hover{background:var(--hairline-2);color:var(--accent)} .nav a.cta{background:var(--accent);color:var(--accent-fg);font-weight:600; transition:filter var(--mov)} .nav a.cta:hover{filter:brightness(1.08);background:var(--accent); color:var(--accent-fg)} /* ---------------------------------------------------------------------- grade */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)} .layout{max-width:var(--maxw);margin:0 auto;padding:var(--s5);display:grid; gap:var(--s5);align-items:start;grid-template-columns:1fr} @media (min-width:1024px){.layout{grid-template-columns:240px minmax(0,1fr)}} @media (min-width:1320px){ .layout{grid-template-columns:240px minmax(0,1fr) 300px} } /* --------------------------------------------------------- trilha de secoes */ .rail{position:sticky;top:80px;display:block} .rail-grupo{margin-bottom:var(--s5)} .rail-tit{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3); margin:0 0 var(--s-meio);font-size:var(--text-ui);font-weight:600;color:var(--ink); text-transform:none;letter-spacing:-.01em} .rail-tit svg{width:15px;height:15px;color:var(--ink-3);flex-shrink:0} .rail a{display:flex;align-items:center;justify-content:space-between;gap:var(--s2); padding:var(--nav-pad);border-radius:var(--radius);font-size:var(--text-ui); color:var(--rail-fg); transition:color var(--mov),background-color var(--mov)} .rail a:hover{background:var(--rail-bg-hover);color:var(--rail-fg-hover); text-decoration:none} .rail a[aria-current]{background:var(--rail-bg-atual);color:var(--rail-fg-atual); font-weight:600} .rail a[aria-current]:hover{background:var(--nav-bg-atual-hover)} /* A contagem no item ativo dava 4,49:1 (--ink-3 sobre --accent-soft) e reprovava AA por um centesimo. Medido pelo axe-core, nao estimado: sobre o fundo tingido o tom terciario nao serve. --ink-2 da 5,62:1. */ .rail a[aria-current] b{color:var(--ink-2)} .rail a b{font-weight:500;font-size:var(--text-meta);color:var(--ink-3); font-variant-numeric:tabular-nums} .rail a.rail-btn{justify-content:center;height:40px;margin-top:var(--s2); background:var(--accent);color:var(--accent-fg);font-weight:600; transition:filter var(--mov)} .rail a.rail-btn--apoio{background:none;color:var(--accent); box-shadow:var(--anel);font-weight:600} /* SECUNDARIO de proposito: contorno e nao preenchimento. O preenchido e o "Assinar", que e a acao que o portal quer de todo leitor; apoio e para quem ja voltou. Dois botoes preenchidos lado a lado anulam a hierarquia dos dois. */ .rail a.rail-btn--apoio:hover{background:var(--accent-soft); box-shadow:var(--anel-ativo);filter:none} .rail a.rail-btn:hover{filter:brightness(1.08);background:var(--accent); color:var(--accent-fg)} /* -------------------------------------------------------------------- painel */ .painel{background:var(--surface);border-radius:var(--radius-lg); box-shadow:var(--anel);overflow:hidden;min-width:0} .painel-cab{padding:var(--s5) var(--s5) 0} .painel-cab h1{margin:0 0 var(--s-meio);font-family:var(--font-display); /* peso 300, nao 600. A familia anterior nao tinha peso leve; esta vai a 100. Uma manchete pesada ao lado de um lockup pesado compete com a marca em vez de conviver com ela. Restricao aqui e o que deixa a marca ser a coisa mais forte da tela, que e o correto num veiculo. */ font-size:var(--text-hero);font-weight:300;letter-spacing:var(--ls-tight); line-height:var(--lh-tight);color:var(--ink)} .painel-cab p{margin:0;font-size:var(--text-dek);color:var(--ink-2); line-height:var(--lh-normal);max-width:70ch} .abas{display:flex;gap:var(--s1);padding:var(--s4) var(--s5) 0;flex-wrap:wrap} .abas a{padding:var(--s2) var(--s3);border-radius:var(--radius);font-size:var(--txt-13); font-weight:500;color:var(--ink-2); transition:color var(--mov),background-color var(--mov)} .abas a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none} .abas a[aria-current]{background:var(--accent-soft);color:var(--accent); font-weight:600} .abas a[aria-current]:hover{background:var(--hairline-2)} .filtros{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap; padding:var(--s4) var(--s5);border-bottom:var(--fio-1);margin-top:var(--s3)} .pilula{height:var(--pilula-alt);padding:0 var(--s3);border-radius:var(--radius); box-shadow:var(--anel);font-size:var(--txt-13);color:var(--ink-2);display:flex; align-items:center;gap:var(--s2);background:var(--surface)} .pilula svg{width:13px;height:13px} .vivo{margin-left:auto;height:var(--pilula-alt);padding:0 var(--s3);border-radius:var(--radius); box-shadow:var(--ok-anel);color:var(--ok-fg); font-size:var(--txt-13);font-weight:600;display:flex;align-items:center;gap:var(--s2); background:var(--ok-soft)} .vivo i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block; flex-shrink:0} /* ------------------------------------------------------------ item da lista */ .feed-list{list-style:none;margin:0;padding:0;display:block} .feed-row{display:grid;grid-template-columns:var(--selo-lado) minmax(0,1fr) auto; gap:0 var(--s3);padding:var(--feed-pad);border-bottom:var(--fio-1);border-top:0; background:var(--feed-bg);border-radius:0;margin:0;box-shadow:none; transition:background-color var(--mov); content-visibility:auto;contain-intrinsic-size:auto 132px} .feed-row:last-child{border-bottom:0} .feed-row:hover{background:var(--feed-bg-hover);transform:none;box-shadow:none} /* Selo: a referencia usa o avatar do repositorio. Nao temos avatar, e hotlinkar imagem de terceiro esta descartado pela politica de procedencia. Entao e a inicial da secao num quadrado com anel: mesma area de 36px, mesmo peso visual, procedencia propria. */ /* 13px e nao 15px: com duas letras, 15px transbordava os 36px do quadrado em alguns pares. Medido. */ .selo{grid-column:1;grid-row:1/3;width:var(--selo-lado);height:var(--selo-lado); border-radius:var(--radius);box-shadow:var(--anel);background:var(--selo-bg); display:flex;align-items:center;justify-content:center;font-size:var(--txt-13); font-weight:700;color:var(--selo-fg);letter-spacing:var(--ls-selo)} .feed-row .meta{grid-column:2;display:flex;align-items:center;gap:var(--s2); flex-wrap:wrap;margin:0 0 var(--s-meio);font-size:var(--text-label)} .feed-row h3{grid-column:2;margin:0 0 var(--s1);font-family:var(--font-sans); font-size:var(--text-card);font-weight:600;line-height:var(--lh-snug); letter-spacing:var(--ls-snug)} .feed-row h3 a{color:var(--feed-titulo);transition:color var(--mov)} .feed-row h3 a:hover{color:var(--feed-titulo-hover);text-decoration:none} .feed-row .dek{grid-column:2;margin:0;font-family:var(--font-sans); font-size:var(--text-dek);line-height:var(--lh-normal);color:var(--ink-2)} .tags{grid-column:2;display:flex;gap:var(--s-meio);flex-wrap:wrap;margin-top:var(--s2)} /* A etiqueta precisa de posicao e camada PROPRIAS. Sem isso ela nao recebe o clique: o `h3 a::after{position:absolute;inset:0}` que torna a linha inteira clicavel cobre tambem a etiqueta, e o ponteiro cai no link do titulo. Medido em 30/07/2026 com o proprio Playwright recusando o clique (" from

subtree intercepts pointer events") e com document.elementFromPoint no centro da etiqueta devolvendo o titulo. O .chip escapava por acidente: tinha position:relative e z-index vindos da camada de CSS antiga, que a etiqueta nunca recebeu. Agora e explicito nos dois. */ .tag{font-size:var(--text-meta);color:var(--tag-fg);padding:var(--s1) var(--s2); border-radius:var(--radius);box-shadow:var(--tag-anel); position:relative;z-index:var(--acima-do-cartao); transition:box-shadow var(--mov),color var(--mov)} a.tag:hover{box-shadow:var(--tag-anel-hover);color:var(--tag-fg-hover); text-decoration:none} /* Cifra: numeral tabular, alinhado a direita, com o rotulo embaixo — e o "★ 29 / Gained today" da referencia. */ .cifra{grid-column:3;grid-row:1/3;text-align:right;white-space:nowrap} .cifra b{display:block;font-size:var(--text-ui);font-weight:600;color:var(--ink); font-variant-numeric:tabular-nums} .cifra span{display:block;font-size:var(--txt-11);color:var(--ink-3);margin-top:1px} /* Divisor de dia dentro do painel */ .feed-dia{display:flex;align-items:center;gap:var(--s-cheio);margin:0;padding:var(--s-cheio) var(--s5); background:var(--surface-2);border-bottom:var(--fio-1);border-top:0; font-size:var(--text-label);font-weight:700;letter-spacing:var(--ls-caps); color:var(--ink-3);list-style:none;text-transform:uppercase} .feed-dia::after{content:"";flex:1;height:1px;background:var(--hairline)} /* chip agora e etiqueta de secao dentro do item */ /* min-height de 24px: o chip media 109x20 e reprovava o criterio 2.5.8 da WCAG 2.2, que e o MINIMO AA para area de alvo. Medido em 375px. inline-flex com alinhamento centralizado cresce a area sem mudar a aparencia do rotulo. */ .chip{background:var(--chip-bg);color:var(--chip-fg);border:0; display:inline-flex;align-items:center;min-height:var(--chip-alt); border-radius:var(--radius-sm);padding:var(--chip-pad);font-size:var(--text-label); font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase; transition:background-color var(--mov)} a.chip:hover{background:var(--chip-bg-hover);text-decoration:none; color:var(--chip-fg)} .fonte-sel{font-size:var(--text-label);font-weight:600;letter-spacing:.04em; color:var(--ink-3);text-transform:uppercase} .pagination{padding:var(--s4) var(--s5);display:flex;justify-content:center;gap:var(--s2); border-top:0;margin:0} .pagination a{font-size:var(--text-ui);font-weight:600;color:var(--pag-fg); padding:var(--s2) var(--s4);border-radius:var(--radius);border:0;background:none; min-width:var(--pag-alvo);min-height:var(--pag-alvo); display:inline-flex;align-items:center;justify-content:center; transition:background-color var(--mov)} .pagination a:hover{background:var(--pag-bg-hover);text-decoration:none} .pagination span{font-size:var(--text-ui);color:var(--ink-3);padding:var(--s2) var(--s1)} /* -------------------------------------------------------- trilha da direita */ .sidebar{display:none} @media (min-width:1320px){.sidebar{display:grid;gap:var(--s4);position:sticky; top:80px}} .caixa{border-radius:var(--radius-lg);box-shadow:var(--anel);overflow:hidden; background:var(--surface)} .caixa-cab{padding:var(--s3) var(--s4);border-bottom:var(--fio-1); font-size:var(--txt-11);font-weight:700;letter-spacing:var(--ls-caps);color:var(--ink-3); display:flex;align-items:center;gap:var(--s2);text-transform:uppercase} .caixa-cab i{width:6px;height:6px;border-radius:50%;background:var(--warn); display:block;flex-shrink:0} .caixa-cab.is-vivo i{background:var(--ok)} .caixa-corpo{padding:var(--s4)} .destaque-box{border-radius:var(--radius); box-shadow:var(--destaque-anel);background:var(--destaque-bg); padding:var(--s3);margin-bottom:var(--s3)} .destaque-box a{font-size:var(--text-ui);font-weight:600;color:var(--ink); line-height:1.35;display:block;margin-bottom:var(--s1); transition:color var(--mov)} .destaque-box a:hover{color:var(--accent);text-decoration:none} .destaque-box p{margin:0;font-size:var(--text-meta);color:var(--ink-2); line-height:1.45} .caixa-corpo>p{margin:0;font-size:var(--txt-13);color:var(--ink-2); line-height:var(--lh-normal)} .caixa-num{font-size:var(--text-ui);font-weight:600;margin:0 0 var(--s1); color:var(--ink)} .mini{list-style:none;margin:0;padding:0} .mini li{padding:var(--s-cheio) var(--s4);border-bottom:var(--fio-1); transition:background-color var(--mov)} .mini li:last-child{border-bottom:0} .mini li:hover{background:var(--surface-2)} .mini a{font-size:var(--txt-13);font-weight:600;line-height:1.35;color:var(--ink); display:block;transition:color var(--mov)} .mini a:hover{color:var(--accent);text-decoration:none} .mini div{display:flex;justify-content:space-between;gap:var(--s2);margin-top:var(--s1); font-size:var(--txt-11);color:var(--ink-3)} .rail-acervo{margin:0;display:grid;gap:var(--s-cheio)} .rail-acervo div{display:grid;gap:1px} .rail-acervo dt{font-size:var(--text-meta);color:var(--ink-3);line-height:1.3} .rail-acervo dd{margin:0;font-size:var(--text-ui);font-weight:600; color:var(--ink);font-family:var(--font-sans); font-variant-numeric:tabular-nums;letter-spacing:-.01em} .rail-acervo dd a{color:var(--accent)} .rail-nota{margin:var(--s3) 0 0;font-size:var(--text-meta);color:var(--ink-3); line-height:var(--lh-normal);max-width:none} /* -------------------------------------------------------------------- artigo */ /* No artigo a trilha esquerda sai: quem esta lendo nao precisa do mapa de secoes na frente, e a coluna de leitura ganha o espaco. Fica painel mais trilha de apoio, e em tela estreita so o painel. */ .layout--artigo{grid-template-columns:1fr} /* Pagina institucional e 404: painel sozinho, centrado, com medida de leitura. O /sobre tinha o mesmo texto grudado na esquerda de 1400px. */ .layout--solo{grid-template-columns:minmax(0,1fr);max-width:860px} @media (min-width:1024px){ .layout--artigo{grid-template-columns:minmax(0,1fr) 300px} } /* O painel do artigo tem a mesma moldura, mas a coluna de leitura NAO herda a escala de 14px do painel: corpo em 18px com entrelinha 1.62, que foi medido nesta base como a combinacao que se le. Escala de interface para navegar, escala de leitura para ler. */ .wrap--artigo{max-width:var(--maxw);padding:var(--s5)} .article-head{padding:var(--s5) 28px 0} .article-head h1{font-family:var(--font-display); font-size:clamp(1.75rem,1.25rem + 2.1vw,2.6rem); /* 420 e nao 600, e o corpo subiu de 36 para 41px no teto. A manchete da materia ganha presenca por TAMANHO e nao por peso — que e como veiculo editorial trata titulo, e o oposto de como painel de software trata. */ font-weight:420;line-height:1.12;letter-spacing:-.026em;margin:var(--s2) 0 var(--s-cheio)} .article-dek{font-family:var(--font-sans); font-size:var(--txt-18); line-height:1.5; color:var(--ink-2); margin:0 0 14px} .byline{display:flex;flex-wrap:wrap;gap:var(--s-cheio);align-items:baseline; font-size:var(--text-meta);color:var(--ink-3);padding-bottom:var(--s4); border-bottom:var(--fio-1)} .byline .author{font-weight:600;color:var(--ink-2)} .prose{padding:0 28px} .article-fig{padding:0 28px;margin:18px 0} /* Link DENTRO de bloco de texto precisa de sublinhado: a diferenca de cor entre o indigo do link e o cinza do texto ao redor e de 1,22:1, e a WCAG 2.2 exige 3:1 ou uma distincao que nao dependa de cor. Medido pelo axe-core em quatro paginas. Fora de bloco de texto — titulo, navegacao, aba — o link nao precisa, porque ali ele nao esta imerso em texto corrido. */ .prose p a,.prose li a,.disclosure a,.rail-nota a,.caixa-corpo p a, .article-dek a,.fig figcaption a,.colofao a{ text-decoration:underline;text-underline-offset:2px; text-decoration-thickness:1px} .prose p a:hover,.prose li a:hover,.disclosure a:hover{ text-decoration-thickness:2px} /* -------------------------------------------------------------------- busca */ .busca-form{display:flex;gap:var(--s2);padding:var(--s4) var(--s5) 0} .busca-form input{flex:1;min-width:0;height:42px;padding:0 14px; border:0;border-radius:var(--radius);box-shadow:var(--anel); font-family:var(--font-sans);font-size:var(--txt-16);color:var(--ink); background:var(--surface);transition:box-shadow var(--mov)} .busca-form input:hover{box-shadow:var(--anel-ativo)} .busca-form input:focus{outline:2px solid var(--accent);outline-offset:2px} .busca-form button{height:42px;padding:0 18px;border:0; border-radius:var(--radius);background:var(--accent);color:var(--accent-fg); font-family:var(--font-sans);font-size:var(--text-ui);font-weight:600; cursor:pointer;transition:filter var(--mov)} .busca-form button:hover{filter:brightness(1.08)} .busca-dica{margin:var(--s2) var(--s5) 0;font-size:var(--text-meta);color:var(--ink-3)} .busca-conta{margin:0;padding:var(--s4) var(--s5);border-bottom:var(--fio-1); font-size:var(--text-meta);color:var(--ink-3)} .busca-sec{margin:0;padding:var(--s3) var(--s5);background:var(--surface-2); border-bottom:var(--fio-1);border-top:var(--fio-1); font-size:var(--text-label);font-weight:700;letter-spacing:var(--ls-caps); text-transform:uppercase;color:var(--ink-3)} #busca-res{margin-top:var(--s4)} .empty{margin:0;padding:var(--s5);font-size:var(--text-ui);color:var(--ink-2)} /* ------------------------------------------------------------------- rodape */ .site-footer{border-top:var(--fio-1);margin-top:var(--s2);background:var(--surface-2); padding:var(--s6) 0} .footer-grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)} /* Os links do rodape mediam 71x15 e reprovavam o criterio 2.5.8. Como estao em coluna, ganhar altura nao muda o desenho — muda so a area clicavel. */ .site-footer a{display:inline-flex;align-items:center;min-height:24px} .colofao a,.site-footer p a{display:inline;min-height:0} /* ------------------------------------------------------- telas pequenas */ /* Abaixo de 1024px a busca sai. Medido: com marca, busca e navegacao na mesma faixa, o cabecalho pedia 580px de conteudo dentro de 375px de viewport e empurrava a pagina 205px para o lado. */ /* --------------------------------------------------------------------------- TRILHA COMO FAIXA, abaixo de 1024px. Medido em 30/07/2026: a trilha tem 597px de altura e vinha ANTES do painel, entao em 375px a primeira noticia comecava em y=1030 e em 768px em y=918 — o leitor abria o portal e via so navegacao. E o mesmo erro do slogan na dobra, corrigido antes e reintroduzido pela grade nova. A correcao nao e esconder a navegacao: e virar faixa de rolagem horizontal de 38px, com os grupos em linha e os titulos escondidos. Rolagem horizontal aqui e segura porque a faixa tem largura total e linha propria — o bug antigo vinha de a navegacao dividir linha com o logotipo. --------------------------------------------------------------------------- */ @media (max-width:1023px){ .rail{position:static;display:flex;gap:var(--s-meio);overflow-x:auto;margin:0; padding:0 0 var(--s1);scroll-snap-type:x proximity; scrollbar-width:none;-webkit-overflow-scrolling:touch} .rail::-webkit-scrollbar{display:none} .rail-grupo{display:flex;gap:var(--s-meio);margin:0;flex-shrink:0} .rail-tit{display:none} /* CONTROLE DE PERIODO DUPLICADO, resolvido em 30/07/2026. A faixa da trilha trazia Recentes / Esta semana / Este mes / Tudo e o painel, 60px abaixo, trazia Recentes / Semana / Mes / Tudo — conferido: os quatro destinos sao os MESMOS (/, /noticias/semana/, /noticias/mes/, /noticias/). Dois controles para o mesmo estado, um em cima do outro. No estreito quem fica e a aba do painel, que esta junto do conteudo que ela filtra; a faixa passa a ser so secao, o que tambem devolve espaco de rolagem para as secoes. */ .rail-grupo--periodo{display:none} .rail a{white-space:nowrap;box-shadow:var(--anel);scroll-snap-align:start; padding:0 var(--s3);min-height:38px;gap:var(--s-meio);flex-shrink:0} .rail a.rail-btn{display:none} /* BUSCA NO CELULAR — reorganizada em 30/07/2026, em duas rodadas. Primeira rodada: era `display:none` abaixo de 1024px, e /busca/ ficava INALCANCAVEL no telefone (a faixa da trilha cobre periodo, secoes, /noticias/ e /sobre/, mas nao a busca). Virou um alvo quadrado de 44px com o icone. Segunda rodada: com a marca aumentada, a linha do cabecalho passou a ter marca 177 + busca 44 + tema 40 + Assinar 90 + folgas = mais que os 343px uteis de uma tela de 375, e o cabecalho transbordou nos tres motores. Detalhe que custou uma tentativa: o bloco do painel declara `.header-inner{flex-wrap:nowrap}` SEM media query, entao a faixa nunca quebrava sozinha — a busca de 343px ficava na mesma linha e empurrava o cabecalho para 674px. A quebra tem de ser reativada aqui de propria mao. A saida nao e encolher a marca de novo, e dar a busca a FAIXA PROPRIA que ela ja merecia: no vocabulario que o editor escolheu a busca e peca central, e campo de 343px de largura serve melhor que icone de 44. A linha de cima fica com marca, tema e Assinar; a busca vem abaixo, inteira; e a faixa de secoes abaixo dela. Cada faixa com uma funcao. */ /* `min-width:0` nos dois nao e detalhe: filho de flex tem min-width AUTO, e o rotulo com `white-space:nowrap` mede cerca de 300px de conteudo minimo. Sem isso o campo empurrou o cabecalho para 674px numa tela de 375 — 314 falhas de transbordo nos tres motores, na primeira tentativa desta faixa. */ .busca{order:2;width:100%;max-width:none;height:40px;flex:0 0 auto; min-width:0;padding:0 var(--s3);margin:0} .busca span{position:static;width:auto;height:auto;margin:0;min-width:0; clip-path:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav{order:3} /* O cabecalho do painel foi escrito com ALTURA FIXA de 56px e `nowrap` explicito, de proposito, para ser uma barra unica. No estreito ele passa a ter faixas — marca e acoes, busca, secoes — e altura fixa ali significa conteudo de 155px dentro de caixa de 56: as faixas vazavam para fora, com a marca em T-42 e o "Assinar" flutuando sobre a lista de secoes. Medido em 375px. Aqui a altura volta a ser automatica, e so aqui. */ .site-header{height:auto} .header-inner{padding:var(--s2) var(--s4);gap:var(--s2);row-gap:var(--s2); flex-wrap:wrap;min-height:0} .layout,.wrap--artigo{padding:var(--s4)} .wrap{padding:0 var(--s4)} .feed-row{padding:var(--s4) var(--s4)} .painel-cab,.abas,.filtros,.pagination,.feed-dia{padding-left:var(--s4); padding-right:var(--s4)} /* a folga lateral do artigo encolhe junto com a tela, e por token: o contrato de caixa recalcula --caixa-texto sozinho. Antes eram 18px crus aplicados a tres seletores, e os outros seis blocos ficavam com folga diferente. */ :root{--pad-artigo:var(--s4)} .rail{position:static} } /* Os links de texto da navegacao so aparecem quando ha espaco de fato. O limite estava em 560px e, em 561px exatos, os seis links voltavam e o botao "Assinar" passava 7px da borda — achado em 60 das 4.320 medicoes, so no Chromium, porque Firefox e WebKit arredondam a largura do texto para baixo. Conta medida: marca 115px + seis links ~450px + botao 90px + respiros 32px = cerca de 690px, entao o limite honesto e 900px, nao 560px. Abaixo disso a navegacao por secao nao desaparece: a trilha empilha acima do painel e traz a lista inteira com contagem. LIMITE REVISTO de 900 para 1024 em 30/07/2026. Os 900px foram medidos para o cabecalho de UMA linha, sem botao de tema e com a busca na mesma faixa. Com a busca em faixa propria abaixo de 1024, a antiga faixa de 900 a 1023 virava um cabecalho de TRES linhas e 156px de altura — grudado no topo, comendo um sexto da tela do tablet. Agora e simples e coerente: abaixo de 1024 o cabecalho tem faixas e os links de texto ficam fora; de 1024 para cima e uma linha unica com tudo. Medido: 109px de altura no compacto, 56px na linha unica. */ @media (max-width:1023px){ .nav a:not(.cta){display:none} /* Com os links de texto fora, a navegacao guarda SO o botao "Assinar" — e ai nao faz sentido ela continuar ocupando uma faixa inteira de largura total, com fio no topo e fundo de pista de rolagem: sobrava uma linha quase vazia com o botao encostado na esquerda. Medido em 375px: marca 177 + tema 40 + Assinar 74 + duas folgas + 32 de respiro = 339px, cabe na primeira faixa. A busca fica com a faixa de baixo, inteira, que e o lugar dela. */ .nav{width:auto;order:1;margin:0;padding:0;border-top:0;background:none; overflow:visible;flex:0 0 auto} .tema{margin-left:auto} } @media (max-width:560px){ .feed-row{grid-template-columns:28px minmax(0,1fr);gap:0 var(--s-cheio)} .selo{width:28px;height:28px;font-size:var(--txt-13)} .cifra{grid-column:2;grid-row:auto;text-align:left;margin-top:var(--s2)} .cifra b,.cifra span{display:inline} .cifra span{margin-left:5px} } /* -------------------------------------------------------------------- apoio */ /* O codigo Copia e Cola e o elemento principal desta pagina, e por isso ele ocupa largura inteira e usa a mono: e uma cadeia de 136 caracteres sem espaco, e em fonte proporcional ela vira um bloco ilegivel que o leitor nao consegue conferir. */ .pix-copia{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:stretch; margin:var(--s4) 0;padding:var(--s4);background:var(--surface-2); border-radius:var(--radius-lg);box-shadow:var(--anel)} .pix-copia code{flex:1;min-width:0;font-family:var(--font-mono); font-size:var(--txt-12);line-height:1.5;color:var(--ink-2);word-break:break-all; user-select:all} .pix-copia button{flex:0 0 auto;align-self:flex-start;min-height:var(--toque); padding:0 var(--s4);border:0;border-radius:var(--radius);background:var(--accent); color:var(--accent-fg);font-family:var(--font-sans);font-size:var(--text-ui); font-weight:600;cursor:pointer;transition:filter var(--mov)} .pix-copia button:hover{filter:brightness(1.08)} .pix-copia button[data-copiado]{background:var(--ok);pointer-events:none} .pix-nota{font-size:var(--text-meta);color:var(--ink-3)} /* O QR e SECUNDARIO: fica depois do texto, com largura contida, e nao acompanha o tema. Leitor de QR precisa de contraste alto e previsivel — e o unico elemento do site que nao pode obedecer ao tema escuro. */ .pix-qr{margin:var(--s5) 0 0;padding:var(--s4);background:var(--qr-fundo);width:max-content; max-width:100%;border-radius:var(--radius-lg);box-shadow:var(--anel)} .pix-qr img{width:220px;height:220px;max-width:100%} .pix-qr figcaption{margin-top:var(--s2);font-size:var(--text-meta);color:var(--qr-legenda); max-width:220px} /* ------------------------------------------------------------------ icones */ /* Um icone acompanha rotulo de texto; nunca o substitui. Por isso o tamanho e relativo ao CORPO do texto ao lado (`1em`) e nao um valor fixo: onde o rotulo tem 10px o icone tem 10px, e a linha nao desalinha. `vertical-align:-.14em` foi medido: com `middle` o icone subia acima da altura-x em versalete de 10px, e com `baseline` afundava. O traco engrossa um pouco em tamanho pequeno porque 2px em 10px de caixa quase desaparece. */ .ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em; flex-shrink:0;stroke-width:2.2} .meta .ic,.fonte-sel .ic,.byline .ic,.tag .ic,.repo-grid dt .ic,.pilula .ic, .rail a .ic,.caixa-cab .ic,.sources h2 .ic,.faq h2 .ic,.colofao h2 .ic{ margin-right:.34em} /* marca de terceiro e desenho cheio, nao traco: herda a cor pelo fill */ .ic--marca{fill:currentColor;stroke:none} /* link externo: o icone vem DEPOIS do rotulo, e mais discreto que o texto */ .ic--depois{margin-left:.3em;margin-right:0;width:.82em;height:.82em; color:var(--ink-3)} /* seta da paginacao: sem rotulo ao lado em tela estreita, entao ganha corpo */ .pagination .ic{width:1.15em;height:1.15em;vertical-align:-.22em} .cifra b .ic{width:.86em;height:.86em;margin-right:.06em;vertical-align:-.06em} /* -------------------------------------------------------- marca e tema */ /* A marca e SVG em linha: a altura vem do CSS e a largura acompanha pela razao do viewBox. Foi aumentada em 30/07/2026 — o editor disse "a imagem da logo esta muito pequena". Medida: 28px de altura no estreito e 32px no largo, para 34 e 40px. No estreito o teto e a soma da linha: marca 177px + busca 44 + botao de tema 40 + Assinar 90 + folgas nao pode passar de 343px em 375px de tela. */ .marca,.marca-selo{width:auto;display:block;color:var(--ink)} /* 16px no estreito, 18px no largo. Calibrado contra o TEXTO DA NAVEGACAO, que tem 14px: a marca fica 1,14 e 1,29 vez o corpo do texto ao lado. Estava em 34px, que dava 2,43 vezes e 296px de largura — 21% da largura util do cabecalho, quase o tamanho do campo de busca. Foi o que o editor chamou de exagerado. A razao deste lockup e 8,69:1, contra 5,21:1 da marca anterior: a mesma altura ocupa quase o dobro de largura, e por isso a altura tinha de cair junto. */ .marca{height:16px} /* o simbolo pode ser MAIOR que o nome completo: ele tem 32 de 40 unidades de altura util no viewBox recortado, contra 32 de 48 do logotipo inteiro */ /* A responsiva mora AQUI, junto da base, e nao no bloco de 768px la em cima: aquele bloco vem ANTES desta regra na folha e, com a mesma especificidade, perde por posicao. Foi a quinta vez que esta base caiu nessa armadilha — a marca ficava em 16px no desktop e a media query parecia nao existir. */ @media (min-width:768px){.marca{height:18px}} .marca-selo{height:26px;display:none} .logo:hover .marca,.logo:hover .marca-selo{opacity:.8} /* O RECUO PARA O BLOCO SAIU em 01/08/2026. Ele existia porque o lockup disputava a faixa com o botao "Assinar"; com o botao fora a conta mudou: em 320px a linha precisa de marca 139 + tema 40 + duas folgas + respiro, e sobra espaco. Medido nos tres motores em 22 larguras, sem transbordo de documento em nenhuma. Ou seja: tirar um botao falso devolveu a marca inteira ao telefone. O .marca-selo continua definido e serve o favicon e o avatar, mas nao aparece mais no cabecalho. */ /* Botao de tema. Alvo de 40px, do tamanho do CTA ao lado, e nao 24: e controle que se usa com o dedo. Mostra o icone do estado ALVO, nao do atual. */ .tema{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center; justify-content:center;padding:0;border:0;border-radius:var(--radius); background:none;color:var(--ink-2);cursor:pointer; box-shadow:var(--anel); transition:color var(--mov),box-shadow var(--mov),background-color var(--mov)} .tema:hover{color:var(--ink);background:var(--surface-2); box-shadow:var(--anel-ativo)} .tema svg{width:19px;height:19px} .tema .sol,.tema svg:last-child{display:none} [data-tema="escuro"] .tema svg:first-child{display:none} [data-tema="escuro"] .tema svg:last-child{display:block} /* ============================================================================ CONTRATO DE CAIXA DO ARTIGO — vale para TODO bloco de nivel superior da materia, de texto ou de moldura. Fica de proposito no fim da folha: vence por posicao, entao nenhuma regra anterior consegue desalinhar um bloco de novo. Usa propriedade LONGA (`padding-inline`, `margin-inline`) exatamente porque as regras anteriores usam o ATALHO (`padding`, `margin`): atalho anterior perde para propriedade longa posterior, e a folga vertical de cada bloco continua valendo, que e o que se quer preservar. Resultado: o texto tem UMA borda em toda a pagina, e a moldura de qualquer cartao fica a --pad-artigo dela, sempre a mesma distancia. ========================================================================== */ .article-head,.article-dek,.prose,.tags-row,.related-artigo,.faq, .article-fig,.repo-box,.sources,.disclosure{ max-width:var(--caixa-texto); margin-inline:auto; padding-inline:var(--pad-artigo)} /* o resumo mora DENTRO do cabecalho, entao nao leva folga propria: levaria duas */ .article-dek{max-width:none;padding-inline:0} @media print{ /* Reescrita em 30/07/2026 junto com o sistema do painel. A anterior escondia .hero, .card-lead e .wrap--feed, classes que deixaram de existir — e nao escondia a trilha nem a caixa de busca, que passaram a sair na folha. Principio: imprime-se o TEXTO e a ATRIBUICAO; navegacao, filtro e recirculacao nao existem no papel. */ *{box-shadow:none!important;background:transparent!important} .site-header,.rail,.sidebar,.abas,.filtros,.pagination,.skip, .busca-form,.busca-dica,.tags,.cifra,.selo,.feed-dia,.related, .site-footer nav{display:none!important} .layout,.layout--artigo,.layout--solo{display:block!important;padding:0!important; max-width:none!important} .painel{border-radius:0!important} .article-head,.prose,.article-fig,.painel-cab{padding:0!important} body{font-family:Georgia,'Times New Roman',serif;font-size:11pt; line-height:1.45;color:#000} .article-head h1{font-size:20pt;line-height:1.15;margin:0 0 8pt} .article-dek{font-size:12pt;color:#333;margin:0 0 10pt} .byline{font-size:9pt;color:#333;border-bottom:1px solid #999; padding-bottom:6pt} .prose,.prose--segue{max-width:none} .prose h2{font-size:13pt;margin:14pt 0 4pt;page-break-after:avoid} .prose p{orphans:3;widows:3} .feed-row{display:block!important;break-inside:avoid; border-bottom:1px solid #ccc!important;padding:6pt 0!important} .feed-row h3{font-size:12pt;margin:0 0 2pt} .feed-row .dek{font-size:10pt;color:#333} .chip,.fonte-sel{font-size:8pt;color:#555} /* a procedencia da imagem, a ficha e o colofao SAO impressos: e a atribuicao da fonte, e some justamente em quem imprime para arquivar */ .fig figcaption,.colofao,.repo-box,.fontes,.disclosure{display:block!important; font-size:9pt;color:#333} .repo-box{border:1px solid #999!important;padding:6pt!important; break-inside:avoid} .article-fig .fig--captura{padding:0;border:1px solid #ccc} img{max-width:100%!important} a{color:#000;text-decoration:underline} a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555; word-break:break-all} @page{margin:16mm} }