/* Cookie consent banner — LGPD. Era uma tira de borda a borda; virou um cartao glass no canto inferior ESQUERDO, com no maximo metade da pagina de largura (pedido do Jose, 14/08: "mais disfarcada"). Pode ser discreto porque a base legal e legitimo interesse (D043): isto e um aviso com saida, nao uma porteira de consentimento. */ /* COMPACTO (05/09, D205). Media de producao: 74px no desktop (tapava o titulo do hero, que mora no canto de baixo do carrossel) e 128px no celular — 15% da tela. O pedido do Jose, literal: "o botao Entendi poderia ser OK e ser menor, na lateral". Tres coisas mudaram: o rotulo virou "OK", o botao encolheu de 88x40 pra ~46x32 e o cartao ficou 80px MAIS LARGO no desktop, o que derruba o texto de 3 linhas pra 2. Fundo, opacidade, texto do aviso e o link da politica seguem byte a byte iguais. */ .cookie-banner{position:fixed;left:14px;right:auto;bottom:14px;z-index:9999;max-width:min(50%,620px);background:rgba(37,45,92,.55);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border:1px solid rgba(255,255,255,.18);border-radius:16px;box-shadow:0 10px 30px rgba(10,27,61,.25);color:#dbe2f7;padding:8px 10px 8px 16px;display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.4;font-family:'Inter',sans-serif} .cookie-banner[hidden]{display:none} .cookie-banner .cookie-text{flex:1;min-width:0} .cookie-banner .cookie-text a{color:var(--mint,#A4D3BC);text-decoration:underline;text-underline-offset:2px} .cookie-banner .cookie-actions{display:flex;gap:8px;flex-shrink:0} .cookie-banner .cookie-btn{border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;border:1px solid;font-family:inherit;letter-spacing:.02em;line-height:1.2} /* Desenho de portal (D046): o banner e um aviso com um botao so. A recusa e um botao de verdade dentro de /privacidade, pra onde o "Saber mais" aponta. O botao tambem ficou glass: no cartao translucido, o pill mint solido era o que mais gritava. */ .cookie-banner .cookie-accept{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff;padding:6px 14px;min-height:32px;min-width:44px} .cookie-banner .cookie-accept:hover{background:var(--mint,#A4D3BC);border-color:var(--mint,#A4D3BC);color:var(--navy,#252D5C)} /* A recusa (v3, so aparece com AdSense ligado) e o botao secundario: mesma altura e mesmo raio do aceite, sem preenchimento. Sem esta regra ela herda o botao cru do sistema — cinza, quadrado, sem respiro — e vira o elemento mais gritante do cartao, que e o oposto do que o desenho quer dizer. */ .cookie-banner .cookie-recusar{background:transparent;border-color:rgba(255,255,255,.32);color:#fff;padding:6px 12px;min-height:32px;min-width:44px} .cookie-banner .cookie-recusar:hover{background:rgba(255,255,255,.14)} /* O "Saber mais" partia em duas linhas na variante de anuncio, deixando "mais." sozinho — viuva, regra da casa. O seletor pende de [data-txt-ads], que so existe com o AdSense ligado: assim o texto do aviso de hoje nao muda um byte. NBSP no dicionario resolveria igual, mas a chave e COMPARTILHADA com o aviso da D043 e mexeria nas 165 paginas. */ .cookie-banner[data-txt-ads] .cookie-text a{white-space:nowrap} .consent-toggle{margin:18px 0;padding:16px 18px;background:#F5F3FB;border:1px solid #E2DEF2;border-radius:12px} .consent-toggle p{margin:0 0 10px;font-size:14px;color:#3A3560} .consent-toggle button{background:var(--navy,#252D5C);color:#fff;border:none;border-radius:999px;padding:12px 22px;min-height:44px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit} .consent-toggle button:hover{background:#323C74} /* Botao fora de uso precisa PARECER fora de uso: sem isto o de anuncios fica navy e com cursor de mao enquanto o clique nao faz nada (a medicao esta desligada). */ .consent-toggle button:disabled{background:#C9C5DC;color:#5B5878;cursor:not-allowed} .consent-toggle button:disabled:hover{background:#C9C5DC} /* No celular o cartao deixa de ser uma caixa de 340px com o botao numa LINHA PROPRIA (era o que fazia os 128px: 4 linhas de texto + 8 de respiro + 38 de botao + padding) e vira um bloco em que o "OK" flutua a direita, com o texto correndo por baixo dele. Sem coluna reservada pro botao, a frase ganha a largura inteira do cartao e perde linha. Segue flutuando, glass, sem tomar a tela. */ @media(max-width:600px){ .cookie-banner{left:8px;right:8px;bottom:10px;max-width:none;display:block;padding:8px 10px 8px 12px;font-size:12px;line-height:1.35;text-align:left} .cookie-banner::after{content:"";display:block;clear:both} /* O encaixe do botao. Float so empurra o que vem DEPOIS dele no fonte, e o botao vem depois do texto — floatar o proprio botao jogava ele pra uma linha inteira embaixo da frase (medido: 100,6px). Entao quem flutua e um vazio do tamanho do botao, na frente do texto; a frase corre em volta e o botao de verdade fica ancorado por cima dele. A ordem de leitura (aviso, depois botao) nao muda um byte. */ .cookie-banner .cookie-text{min-width:0} .cookie-banner .cookie-text::before{content:"";float:right;width:56px;height:32px} .cookie-banner .cookie-actions{position:absolute;top:8px;right:10px;gap:6px} .cookie-banner .cookie-accept{padding:6px 12px;font-size:12px;min-height:32px;min-width:44px;white-space:nowrap} .cookie-banner .cookie-recusar{padding:6px 10px;font-size:12px;min-height:32px;min-width:44px;white-space:nowrap} } /* Com DOIS botoes (v3, so com AdSense ligado) e tela estreita, a dupla flutuando come metade da largura e espreme a frase numa coluna de tres palavras por linha — medido em 390px e pior ainda em 320px. So NESSE caso os botoes descem pra baixo do texto e ocupam a largura do cartao. Com um botao so, que e o site de hoje, nada disso vale. */ @media(max-width:430px){ .cookie-banner[data-txt-ads]{display:flex;flex-wrap:wrap;gap:8px} .cookie-banner[data-txt-ads] .cookie-text{flex:1 1 100%} .cookie-banner[data-txt-ads] .cookie-text::before{content:none} .cookie-banner[data-txt-ads] .cookie-actions{position:static;margin:0;flex:1 1 100%;justify-content:flex-end} } /* == As fontes do Bora, servidas de /fontes/ (D187) ========================= Os arquivos sao os MESMOS bytes que o Google servia (baixados do proprio Google Fonts; licenca OFL em assets/fontes/OFL-*.txt), e as declaracoes abaixo sao copia da folha que o Google emitia: mesma familia, mesmo peso, mesmo unicode-range. Isso e de proposito — o navegador enxerga o mesmo conjunto de @font-face que enxergava, entao nenhuma letra troca de desenho. EXCECAO (D195, 05/09): as seis declaracoes de inter-latin-ext.woff2 abaixo NAO sao mais copia byte a byte do Google — o unicode-range original tinha U+20AD-20C0 e virou U+20AD-20B1, U+20B3-20C0, com um buraco de um unico ponto de codigo: U+20B2, o cifrao do guarani (₲), que a cotacao (motor/render/cambio.mjs) mostra em toda pagina que exibe cambio. Esse UM glifo bastava pra baixar os ~85KB inteiros do latin-ext. O ponto retirado ganhou arquivo proprio, inter-guarani.woff2 (~1,3KB, subconjunto de 1 glifo via fontTools, eixo wght 100-900 preservado — mesma fonte variavel, so com o glifo de sobra cortado), declarado logo depois de cada peso. Pela OFL isso e "Modified Version": a licenca fica onde esta e o nome de familia ('Inter') nao muda — a mesma pratica que o proprio Google ja usa pra fatiar fontes em subsets como este arquivo inteiro ja e. Poppins e estatico: um arquivo por peso (e o italico 600, que a .pullquote usa em 81 paginas). Inter e Crimson Pro sao variaveis: UM arquivo por subset serve todos os pesos, declarado uma vez por peso (de novo, como o Google fazia). Por isso o nome do arquivo variavel nao leva peso. O que NAO esta aqui, e o Google servia: Crimson Pro reto 600 e 700. A unica regra que pede Crimson Pro e .fonte-contraste, que sempre casa com italico — as duas variantes retas nunca chegaram a carregar em nenhuma medicao. Sem local(): fonte instalada na maquina do leitor com o mesmo nome mascararia a nossa e a pagina renderizaria diferente de maquina pra maquina. O PRELOAD no head anuncia dois dos catorze arquivos: Poppins 700, que desenha todo titulo, e Inter, que desenha todo corpo (um arquivo variavel cobre de 400 a 900). Sao os dois que aparecem na primeira dobra de qualquer pagina; anunciar os outros doze roubaria banda deles. E o crossorigin daqueles links e obrigatorio mesmo sendo mesma origem — arquivo de fonte se busca em modo CORS sempre, e sem o atributo o preload nao casa com a requisicao de verdade e o navegador baixa duas vezes. Peso declarado sem par aqui, ou arquivo aqui sem peso que o use, reprova em scripts/checar-tipografia.mjs. */ @font-face{font-family:'Poppins';font-style:italic;font-weight:600;font-display:swap;src:url(/fontes/poppins-italic-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Poppins';font-style:italic;font-weight:600;font-display:swap;src:url(/fontes/poppins-italic-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fontes/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fontes/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fontes/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fontes/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(/fontes/poppins-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(/fontes/poppins-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url(/fontes/poppins-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url(/fontes/poppins-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fontes/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B1, U+20B3-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fontes/inter-guarani.woff2) format('woff2');unicode-range:U+20B2} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fontes/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fontes/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B1, U+20B3-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fontes/inter-guarani.woff2) format('woff2');unicode-range:U+20B2} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fontes/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fontes/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B1, U+20B3-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fontes/inter-guarani.woff2) format('woff2');unicode-range:U+20B2} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fontes/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fontes/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B1, U+20B3-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fontes/inter-guarani.woff2) format('woff2');unicode-range:U+20B2} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fontes/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(/fontes/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B1, U+20B3-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(/fontes/inter-guarani.woff2) format('woff2');unicode-range:U+20B2} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(/fontes/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url(/fontes/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B1, U+20B3-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url(/fontes/inter-guarani.woff2) format('woff2');unicode-range:U+20B2} @font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url(/fontes/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Crimson Pro';font-style:italic;font-weight:600;font-display:swap;src:url(/fontes/crimson-pro-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Crimson Pro';font-style:italic;font-weight:600;font-display:swap;src:url(/fontes/crimson-pro-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Crimson Pro';font-style:italic;font-weight:700;font-display:swap;src:url(/fontes/crimson-pro-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Crimson Pro';font-style:italic;font-weight:700;font-display:swap;src:url(/fontes/crimson-pro-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root{ /* ── Identidade Bora: FONTE UNICA da paleta (17-handoff-ux-cx.md, secao 2) ── Todo par de cor abaixo foi medido e passa WCAG AA. Site e guias usam estes mesmos valores; o `_materias-seo/gerar-previews.py` carrega a tabela irma em `MUDANCA-ID-VISUAL.md`, que aponta pra ca. Regra de manutencao: cor nova entra AQUI, com o contraste medido no comentario. Cor crava da no meio do CSS e o proximo que mexer nao acha. */ /* Marinho da PRANCHA de identidade, e nao do arquivo do Illustrator. O README do pacote registrava a divergencia como decisao em aberto: a prancha dizia #0A1B3D e o arquivo #252D5C, e o sistema seguiu o arquivo "porque e a arte que existe". O Jose decidiu pela prancha em 11/08. O motivo tem numero: o navy do MaisCha era #0B1F5C (matiz 225, saturacao 79%) e o #252D5C e matiz 231 com saturacao 43% — o MESMO azul, 36 pontos mais lavado. Por isso lia como a marca antiga, so que apagado. O #0A1B3D sai dessa faixa. Todos os pares MELHORARAM: branco 13,06 -> 16,98; mint 7,85 -> 10,2; dim do strip 9,03 -> 11,75. Nenhum caiu. */ --navy:#0A1B3D; /* faixa do topo, rodape, aviso de cookie, banda Fronteira Viva */ --ink:#1B2445; /* corpo e titulos — 15,2:1 sobre o cinza */ --suave:#5C6787; /* timestamp, credito, rotulo de patrocinado — 5,6:1 */ --teal:#00ABAA; /* fios, hover, icone de 3px pra cima. NUNCA texto em fundo claro (2,8:1) */ --teal-tinta:#007A79; /* link, botao primario, nav ativa, foco — 5,2:1 */ --mint:#A4D3BC; /* botao secundario e acento sobre o navy — par mint/navy 7,9:1 */ --cinza:#F1F3F8; /* fundo da pagina */ --fita:linear-gradient(90deg,#A4D3BC,#00ABAA); /* barra de secao, sublinhado da nav ativa. No Bora Bonito vira #A6D9EF→#17C6F4 */ /* ── Editorias: a MESMA cor serve de texto no claro e de fundo de selo com branco ── */ --c-compras:#167A41; /* era #1F9D55 — 3,5:1 subiu pra 5,4:1 */ --c-cotidiano:#2A66B8; /* era #4A90E2 — 3,3:1 subiu pra 5,7:1 */ --c-gastronomia:#C22A5B; /* era #E94B7A — 3,7:1 subiu pra 5,6:1 */ --c-esporte:#B54708; /* laranja-queimado, 5,4:1 — categoria nova de 01/09 */ --c-fronteira-viva:#5B2D8A; /* 9,6:1, so escureceu do #6B3FA0 pra fechar com o navy */ /* Acento quente dos mockups do Jose (14/08): a palavra em Crimson Pro nos titulos especiais e o ponto do fio do manifesto. Medido: 3,63:1 sobre o cinza da pagina e 4,21:1 sobre o navy — passa AA SO em texto grande (>=24px). NUNCA em texto corrido, rotulo pequeno ou fundo de selo. */ --laranja:#D9531E; /* Cor da palavra em Crimson Pro nos titulos de FUNDO CLARO (D205). O laranja acima e heranca do MaisCha — entrou por um mockup do Jose em 13/08 e nunca fez parte da paleta da identidade, entao o mesmo recurso aparecia laranja no claro e teal no navy do rodape, como se fossem dois sistemas. Aqui vira um so: --teal-tinta, 5,17:1 sobre branco e 4,66:1 sobre o cinza da pagina. Pra voltar ao laranja basta esta linha: --contraste-claro: var(--laranja). */ --contraste-claro:var(--teal-tinta); /* ── Nomes herdados do preview aprovado (D001) ── Eles APONTAM pros tokens acima em vez de carregar cor propria. E o que faz a paleta ter um lugar so: o CSS antigo continua funcionando sem ter sido reescrito, e quem mexer amanha mexe em cima. */ --azul:var(--teal-tinta); --azul-escuro:#005E5D; --azul-claro:var(--teal); --azul-deep:var(--navy); --terra:var(--ink); --texto:var(--ink); --bg:var(--cinza); /* Era #2E2E2E, um cinza-chumbo neutro que nao vinha da paleta e brigava com o navy do resto do chassi (D205). Passa a valer o MESMO valor de --texto/--ink. O unico uso vivo hoje e o botao de compartilhar da materia, texto sobre branco, e la o contraste SOBE: 13,58 pra 15,16:1. As outras regras que citam o token (.top-strip, .top-date, .menu a, .relogio-cidade .dim, .tag, o apoio do cartao de familia) sao de chassi antigo e nao pintam nada no site de hoje — varrido em 12 paginas. O nome fica: e apontador, como --terra e --texto, nao cor propria. */ --grafite:#1B2445; --linha:#E3E7F0; --linha-2:#EDEFF3; --bg-card:#FFFFFF; --sombra:0 2px 10px rgba(37,45,92,.06); --sombra-hover:0 6px 22px rgba(37,45,92,.10); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} html,body{background:#fff;color:var(--texto);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .serif,h1,h2,h3,h4{font-family:'Poppins',system-ui,sans-serif;font-weight:700;letter-spacing:-0.03em} /* Crimson Pro (D0xx, manual de tipografia e estilo, 13/08/2026): fonte de CONTRASTE, so pra uma palavra, expressao ou citacao dentro de titulo institucional, especial ou de campanha (ex. /sobre/). PROIBIDA em manchete de noticia, titulo de card e texto corrido -- o contraste e pontual, nao um estilo de uso geral. */ .fonte-contraste{font-family:'Crimson Pro',serif;font-style:italic;font-weight:600} /* No h1 do hub de guias a palavra de contraste ganha cor propria. Era o laranja do mockup do Jose (14/08); desde 05/09 (D205) e --contraste-claro, o mesmo token que a home usa no titulo dos guias. A regra mora aqui, e nao no guias.css, porque aquele arquivo e GERADO (scripts/exportar-css-guias.mjs) e este template ja veste toda pagina de guia. */ .guia h1 .fonte-contraste{color:var(--contraste-claro)} /* Icone e do sprite proprio, nao mais ligadura de fonte (D163). O 1em faz toda regra de `font-size` que ja existia continuar dimensionando o icone. */ .material-icons{display:inline-block;width:1em;height:1em;fill:currentColor;font-size:18px;vertical-align:middle} .wrap{max-width:1280px;margin:0 auto;padding:0 20px} /* Preview bar */ .preview-bar{background:#000;color:#fff;font-size:12px;padding:6px 20px;text-align:center} .preview-bar b{color:#FFD27A} .preview-bar a{color:#FFD27A;border-bottom:1px dotted #FFD27A} .brand-bar{height:8px;background:linear-gradient(90deg,var(--azul-claro) 0%,var(--azul) 55%,var(--azul-escuro) 100%)} /* Topo */ /* Selo das cidades (17, secao 5b — decisao do Jose). Emoji de bandeira saiu: ele renderiza diferente por sistema (no Windows vira "BR PY" em letras) e briga com a faixa tipografica. Bandeira e SVG chapado, o MESMO desenho do guia e do mock. */ .relogio-cidade{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .relogio-cidade .bandeirinha{display:block;flex:0 0 auto} .relogio-cidade b{color:var(--terra);font-weight:800;letter-spacing:.01em} .relogio-cidade .dim{color:var(--grafite);font-weight:500} .sep-relogio{color:#CDD6F5;opacity:.5} .top-strip{background:var(--bg);border-bottom:1px solid var(--linha);color:var(--grafite);font-size:12px;padding:8px 0} .top-strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} @media(max-width:780px){ .top-strip{font-size:10.5px;padding:5px 0} .top-strip .wrap{justify-content:center;gap:10px;flex-wrap:wrap} .ticker{gap:10px;font-size:10.5px;justify-content:center;flex-wrap:wrap} .ticker-item{gap:4px} .top-date{display:none} } @media(max-width:480px){ .city-pill span:not(.flag){display:none} .ticker{gap:8px} .ticker .ticker-item:nth-child(3){display:none} } .ticker{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .ticker-item{display:flex;gap:6px;align-items:center} .ticker-item b{color:var(--terra);font-weight:700} .ticker-item .up{color:#0F7A48} .ticker-item .dn{color:#C0392B} .top-meta{display:flex;gap:10px;align-items:center;font-size:11px;color:#9AA6D4;text-transform:uppercase;letter-spacing:.06em;flex-wrap:wrap} .city-pill{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:5px 12px;color:#fff;font-weight:500;text-transform:none;letter-spacing:0;font-size:12px} .city-pill .flag{font-size:14px;line-height:1} .city-pill b{font-weight:700} .city-pill .sep{opacity:.4;margin:0 2px} .temp-pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--linha);border-radius:999px;padding:5px 11px 5px 9px;color:var(--terra);font-weight:700;font-size:12px;text-decoration:none;transition:all .2s} .temp-pill:hover{background:var(--bg);color:var(--terra);transform:translateY(-1px)} .temp-pill .material-icons{font-size:15px;color:#FFC857} .temp-pill .arrow{opacity:.55;font-size:10px;margin-left:1px} .top-date{margin-left:4px;font-size:11px;color:var(--grafite);font-weight:600} /* HEADER em 1 linha — hide on scroll */ header.main{background:#fff;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:30;box-shadow:0 1px 0 rgba(20,30,80,.04);transition:transform .3s ease} header.main.is-hidden{transform:translateY(-100%)} /* O padding lateral de 20px e o mesmo de todo `.wrap` do site. O `.head` era o UNICO sem ele (`padding:14px 0`), entao o cabecalho ficava 20px fora do alinhamento do conteudo em qualquer largura, e no celular a logo encostava na borda da tela: medido, comecava em 0px. */ .head{display:flex;align-items:center;gap:24px;padding:14px 20px} .logo{display:inline-flex;align-items:center;line-height:1;flex-shrink:0} .logo img{height:30px;width:auto;display:block} .logo .logo-negativa{display:none} .menu{display:flex;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;flex:1;justify-content:center} .menu a{position:relative;padding:14px 18px;color:var(--grafite);white-space:nowrap;border-bottom:3px solid transparent;transition:all .2s} .menu a:hover{color:var(--terra)} .menu a[data-c="cotidiano"]{color:var(--c-cotidiano);border-color:var(--c-cotidiano)} .menu-search{display:flex;align-items:center;flex-shrink:0} .menu-search input{background:var(--bg);border:1px solid var(--linha);border-right:none;border-radius:999px 0 0 999px;padding:9px 14px;font-size:13px;width:180px;color:var(--terra);font-family:inherit} .menu-search input:focus{outline:none;border-color:var(--azul)} /* FOCO VISIVEL (D205). `outline:none` acima e (0,2,1) e vencia o anel generico `input:focus-visible` (0,1,1) da linha do skip link: quem navega por teclado via so a borda mudar de cinza pra teal, 1px, dentro do proprio campo. O anel volta, em --azul (= --teal-tinta #007A79), o MESMO anel do skip link, do hamburguer e da logo. Mint aqui seria 1,66:1 contra o branco — o erro que esta regra conserta. */ .menu-search input:focus-visible{outline:2px solid var(--azul);outline-offset:2px} .menu-search button{background:var(--azul);border:1px solid var(--azul);color:#fff;width:38px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:0 999px 999px 0;cursor:pointer} .menu-search button:hover{background:var(--azul-escuro);border-color:var(--azul-escuro)} /* Seletor de idioma (item 9, 13/08). Mesma regra do 1-preview-home.html: globo, borda em --suave (a antiga dava 1,24:1 contra os 3:1 que contorno de componente pede) e 44px de alvo de toque. Sem chevron, porque no site publicado ele ja e link direto. */ /* SELETOR DE IDIOMA SEGMENTADO (decisao de 11/08, feita em 01/09). Era um botao unico que mostrava a OUTRA lingua: em portugues aparecia "ES", em espanhol aparecia "PT". Quem chega sem saber onde esta le "ES" e nao tem como dizer se isso significa "voce esta em espanhol" ou "clique pra ir pro espanhol". Segmentado resolve sem texto de ajuda: as duas linguas ficam visiveis, a de agora preenchida e a outra clicavel. A casca continua com a classe `.lang-btn` de proposito — as regras que a escondem na materia, a pintam de branco na barra escura e a encolhem no celular continuam valendo sem uma linha mudada. */ .lang-btn{display:inline-flex;align-items:center;gap:0;min-height:44px;padding:0;overflow:hidden;border:1px solid var(--suave);border-radius:999px;color:var(--grafite);font-weight:600;background:#fff;font-family:'Poppins',sans-serif;font-size:13px;flex:none} .lang-seg{display:inline-flex;align-items:center;gap:7px;align-self:stretch;padding:0 14px;color:inherit;text-decoration:none;font-weight:600} .lang-seg + .lang-seg{border-left:1px solid var(--suave)} /* D196: intocada de proposito. O defeito do celular (linha solta) era o padding/gap que sobrava no `.frontier-mainbar .lang-btn` do @media abaixo empurrando o segmento preenchido pra longe da borda — ali sim o divisor ficava orfao. Com padding/gap zerados o divisor volta a encostar nos dois segmentos, igual ja funciona no desktop (medido: 1px solid, sem gap, em ambos). Testado remover este border-left via `.lang-seg[aria-current] + .lang-seg{border-left:0}`: some o divisor tambem no desktop, porque a regra nao tem media query — quebraria "zero diferenca fora do celular". motor/seo/meta.mjs sempre poe o idioma atual PRIMEIRO (`${segAtual}${segOutra}`), entao o preenchido nunca e o segundo .lang-seg e a regra `.lang-seg[aria-current]{border-left:...}` nunca teria alvo — nao adicionada. */ .lang-seg[aria-current]{background:var(--azul);color:#fff;font-weight:700} .lang-btn svg{width:18px;height:13px;flex:none;border-radius:2px} .lang-code{font-family:'Poppins',sans-serif;font-weight:700;letter-spacing:.02em} a.lang-seg:hover{color:var(--azul)} a.lang-seg:focus-visible{outline:2px solid var(--azul);outline-offset:-2px} /* Busca do menu mobile (F0). O CSS de `.menu.is-open .menu-search-inline` existia desde maio e o ELEMENTO nunca foi escrito, entao abaixo de 640px o site ficava sem busca em lugar nenhum: a `.menu-search` do topo some nessa largura e nao havia substituta. Base escondida; so o menu aberto no mobile mostra. */ .menu-search-inline{display:none} .menu-search-inline input{flex:1;background:var(--bg);border:1px solid var(--linha);border-right:none;border-radius:999px 0 0 999px;padding:11px 14px;font-size:14px;color:var(--terra);font-family:inherit;min-height:44px} .menu-search-inline input:focus{outline:none;border-color:var(--azul)} .menu-search-inline input:focus-visible{outline:2px solid var(--azul);outline-offset:2px} .menu-search-inline button{background:var(--azul);border:1px solid var(--azul);color:#fff;width:48px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:0 999px 999px 0;cursor:pointer} /* ── Header em DUAS LINHAS (17, secao 5 item 0 — o de linha unica foi vetado) ── Linha branca com logo, busca larga e idioma; abaixo, barra navy full-width com as editorias em branco e a ativa sublinhada pela fita. Por que a barra e full-width e o conteudo dela nao: a cor precisa sangrar de ponta a ponta pra funcionar como faixa, mas os links tem que alinhar com o resto da pagina. Por isso o `.navbar` pinta e o `.navbar .wrap` alinha. `white-space:nowrap` nos rotulos e regra do doc: "Fronteira Viva" nunca quebra em duas linhas. */ /* O menu antigo do header vira EXCLUSIVO do mobile: no desktop quem manda e a navbar de pilulas. Sem isso as editorias apareceriam duas vezes na mesma tela. */ @media(min-width:1025px){ .menu{display:none} /* Busca central e larga (mockup do Jose, 14/08), mesma regra do 1-preview-home. */ .menu-search{flex:1;justify-content:center} .menu-search input{width:100%;max-width:480px;padding:11px 18px;font-size:14px} .menu-search button{width:48px;height:40px} } /* ── Navbar de PILULAS (mockup do Jose, 14/08 — substitui a barra navy da secao 5 item 0 do 17). Mesmo desenho do 1-preview-home; aqui nenhuma pilula nasce ativa. */ .navbar{background:#fff;border-bottom:1px solid var(--linha)} .navbar .wrap{display:flex;align-items:center;gap:10px;padding:12px 20px 16px} .navbar a{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border:1px solid var(--linha);border-radius:13px;background:#fff;color:var(--ink);font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:600;white-space:nowrap;text-decoration:none;transition:border-color .18s,color .18s,background .18s} .navbar a .material-icons{font-size:19px;color:var(--suave);transition:color .18s} .navbar a:hover{border-color:var(--teal);color:var(--teal-tinta)} .navbar a:hover .material-icons{color:var(--teal-tinta)} .navbar a.is-ativo{background:#E9F6F0;border-color:#BFE3D2;color:var(--teal-tinta)} .navbar a.is-ativo .material-icons{color:var(--teal-tinta)} .navbar a.pill-inicio{padding:0 14px} .navbar .slogan-nav{margin-left:auto;display:inline-flex;align-items:center;gap:2px;height:46px;padding:0 10px 0 16px;border:1px solid var(--linha);border-radius:13px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;color:var(--teal-tinta);white-space:nowrap} .navbar .slogan-nav .material-icons{font-size:18px;color:var(--teal-tinta)} .navbar .slogan-nav:hover{border-color:var(--teal)} @media(max-width:1024px){ .navbar{display:none} } .hamburger{display:none;width:42px;height:42px;border:1px solid var(--linha);border-radius:10px;background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;color:var(--grafite)} /* Selo (i) do credito da foto — a versao visivel e SO da materia imersiva, dentro do media query pg-materia mais abaixo. Base escondida aqui garante que ele nao apareca como link solto nas outras paginas que usam este mesmo cabecalho (guia, ficha, agenda, categoria...), nem no desktop de materia nenhuma. */ .cover-info-pill{display:none} .hamburger:hover{border-color:var(--azul);color:var(--azul)} .hamburger .material-icons{font-size:24px} .hamburger .ham-ico{display:inline-flex} .hamburger .ham-fechar{display:none} .hamburger[aria-expanded="true"] .ham-abrir{display:none} .hamburger[aria-expanded="true"] .ham-fechar{display:inline-flex} @media(max-width:1024px){ .hamburger{display:inline-flex} .menu{display:none} .menu.is-open{ display:flex;flex-direction:column; position:absolute;top:100%;left:0;right:0; background:#fff;border-top:1px solid var(--linha); box-shadow:0 12px 24px rgba(0,0,0,.10); padding:8px 0;z-index:25; } .menu.is-open a{padding:14px 24px;border-bottom:1px solid var(--linha-2);width:100%;text-align:left;font-size:14px} .menu.is-open a:last-child{border-bottom:none} .menu-search input{width:140px} .head{padding:12px 20px;gap:14px;position:relative} } @media(max-width:640px){ .menu-search{display:none} .lang-btn{padding:0;font-size:12px} .lang-seg{padding:0 11px} .logo img{height:26px} } /* Breadcrumb */ .crumbs{padding:18px 0 8px;font-size:12px;color:var(--suave);font-weight:600;text-transform:uppercase;letter-spacing:.06em;display:flex;gap:10px;align-items:center;flex-wrap:wrap} /* ALVO DE TOQUE (D205). O elo da trilha media 41x18 no desktop, contra os 24px que a regra da casa pede pra link solto de navegacao. O padding sobe a altura pra 26 e a margem negativa devolve o desenho: a trilha ocupa exatamente as mesmas linhas. No celular a pilula de 40px logo abaixo ja resolvia e continua mandando. */ .crumbs a{color:var(--suave);padding-block:4px;margin-block:-4px} .crumbs a:hover{color:var(--azul)} .crumbs .sep{opacity:.5} /* === ARTICLE MASTHEAD === */ /* GEOMETRIA REVERTIDA por ordem do Jose (01/09). A D167 ("uma borda esquerda so") tirou a centralizacao (`margin:0 auto` virou so `margin-right:auto`, ou seja, encostado na borda esquerda do `.wrap`, x=100) e a D160 ("76 caracteres") estreitou a coluna pra 660px atras de `body.pg-leitura`/`pg-materia`. No ar, ele rejeitou o resultado: quer de volta o padrao antigo, coluna de 840px CENTRADA (`margin:0 auto`) — que na tela pousa por volta de x=300, o que ele descreve como "alinhado a esquerda mas um pouco mais a direita" (nao colado no cabecalho, mas tambem nao e texto centralizado — so a CAIXA de 840px que centraliza dentro do wrap). A reclamacao e literal: o padrao restaurado aqui e byte a byte o que existia ANTES da D160 tocar este arquivo, sem interpretacao. E um reverte PARCIAL das duas decisoes, so na geometria de titulo/corpo desta pagina — o resto de cada uma continua valendo: idioma segmentado e Fronteira Viva por Historia (D167), os dois contrastes AA (D160, nao mexem neste arquivo). Ver D168 em DECISIONS.md. A GRADE unificada de x=100 nas outras 12 paginas (guia, agenda, cambio, feriados, sobre, eleicoes...) NAO foi tocada aqui — fica pra quando o padrao da materia virar referencia do site (proxima etapa, com levantamento antes de mudar em massa). */ .article-masthead{padding:14px 0 28px;max-width:840px;margin:0 auto} .article-cat{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:3px;color:#fff;background:var(--c-cotidiano);margin-bottom:18px} .article-cat::before{content:"";width:6px;height:6px;background:#fff;border-radius:50%} .article-headline{font-family:'Poppins',sans-serif;font-size:48px;line-height:1.0;color:var(--terra);font-weight:700;letter-spacing:-.04em} @media(min-width:780px){ .article-headline{font-size:56px} } .article-dek{margin-top:18px;font-family:'Poppins',sans-serif;font-size:20px;line-height:1.45;color:#3a3a3a;font-weight:600} /* Byline */ .byline{margin-top:24px;padding:16px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .byline-author{display:flex;align-items:center;gap:12px} /* A marca no lugar das iniciais (item 2 do Jose, 13/08). O fundo claro fica porque o simbolo tem cor propria; gradiente atras dele suja o desenho. */ .author-avatar{width:44px;height:44px;border-radius:50%;background:var(--bg);border:1px solid var(--linha);display:block;padding:7px;object-fit:contain;flex-shrink:0} .author-info{font-size:13px;line-height:1.3} .author-info b{display:block;font-weight:800;color:var(--terra);font-size:14px} .author-info span{color:var(--suave)} .byline-meta{display:flex;gap:18px;align-items:center;font-size:12px;color:var(--suave);font-weight:600} .byline-meta .material-icons{font-size:15px;margin-right:4px;vertical-align:-2px} /* Cover */ /* A capa esta dentro do
, mas no desktop ela continua DEPOIS do texto: o header vira coluna flex e o order poe cada um no lugar. Sem isso a foto subiria pro topo em toda largura, o que so vale no mobile. */ header.wrap{display:flex;flex-direction:column} header.wrap > .article-masthead{order:1} header.wrap > .article-cover{order:2} .article-cover{margin:32px 0 8px;max-width:1100px;margin-left:auto;margin-right:auto} .article-cover img{width:100%;height:auto;max-height:600px;object-fit:cover;border-radius:6px} .article-cover figcaption{font-size:12.5px;color:var(--suave);margin-top:10px;padding:0 4px;line-height:1.4;font-style:italic} .article-cover figcaption b{font-weight:700;font-style:normal} /* Escondido no DESKTOP de propósito (01/09, pedido do José): o crédito da foto já aparece certo no
logo acima, embaixo da própria imagem. Este parágrafo (`.article-cover-credito`) só existe pra reaparecer na materia imersiva do celular — ver a regra `.pg-materia .article-cover-credito` no media query de 780px, que devolve `display:block`. Sem este `display:none` de base, o parágrafo saía sem estilo nenhum no desktop, duplicando o crédito logo abaixo da linha fina — o "sub sub" que o José reclamou no print da pesquisa-senado. */ .article-cover-credito{display:none} /* === BODY === */ /* Coluna unica desde 13/08: o share-rail saiu do topo (virou fileira no fim da materia, depois do corpo — ver .share-rail abaixo) e a trilha de 60px que existia so pra ele ficou sem uso. Antes disso o grid era 60px+1fr em desktop e so colapsava pra 1 coluna abaixo de 780px; a `.article-body{grid-column:2}` daquela era existia pra pagina sem rail (institucional) nao cair sozinha na trilha errada — com o rail fora do grid pra todo mundo, a trilha extra nem existe mais. */ /* COLUNA REVERTIDA (01/09) — mesma ordem do comentario da D167 em `.article-masthead`, acima. A D160 estreitava esta grade pra 660px atras de `body.pg-leitura`/`pg-materia` (medida de 76 caracteres por linha); sem esse seletor aqui, o corpo volta a herdar os 840px centrados de sempre, na mesma largura do masthead. A capa continua FORA desta grade (`.article-cover`, 1100px) e segue larga. */ .article-grid{max-width:840px;margin:30px auto 0} /* ===== Materia no celular (item 14, referencia do Jose) ===== Foto sangrando na largura toda, e o texto num cartao branco de cantos arredondados logo abaixo. O recuo negativo cancela EXATAMENTE os 20px do .wrap do pai mais os 20px do proprio .wrap da figura, entao ninguem precisa de 100vw (que soma a barra de rolagem e cria rolagem lateral). */ @media(max-width:780px){ header.wrap > .article-cover{order:0} .article-cover{margin:0;padding:0;max-width:none;margin-left:-20px;margin-right:-20px;position:relative} .article-cover img{border-radius:0;max-height:none;aspect-ratio:4/3;height:auto;display:block} /* Credito vira legenda SOBRE a propria foto (pedido do Jose, 13/08 — revoga o "cartao sobe sobre a faixa, nao sobre a foto" de antes): canto superior direito, bem pequena, com scrim escuro atras pra garantir contraste em foto clara ou escura. Continua
no DOM, associada a
— leitor de tela enxerga igual, so a posicao visual mudou. */ .article-cover figcaption{ position:absolute; top:12px; right:12px; max-width:64%; margin:0; padding:5px 10px; font-size:10.5px; line-height:1.35; font-style:normal; text-align:right; color:#fff; background:rgba(15,20,40,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); border-radius:7px; } .article-cover figcaption b{font-weight:700} /* O cartao agora sobe sobre a FOTO (nao sobre uma faixa atras dela — essa faixa saiu junto com o credito). -34px de recuo negativo faz o canto arredondado aparecer visivelmente por cima da imagem. */ .article-masthead{ position:relative; z-index:1; margin:-34px -20px 0; padding:26px 20px 4px; background:#fff; border-radius:18px 18px 0 0; } .article-cat{margin-bottom:14px} .article-headline{font-size:33px;line-height:1.0;letter-spacing:-.04em} .article-dek{margin-top:14px;font-size:17px;line-height:1.5} .byline{margin-top:20px;padding:14px 0;gap:12px} /* Corpo com mais ar: a referencia respira, a nossa media de linha estava apertada. */ .article-body{font-size:16px;line-height:1.6} } /* ===== Materia IMERSIVA no celular (spec do Jose, 14/08) ===== So vale na pagina de MATERIA: o buildPost poe pg-materia no body (cuidado: escrever a tag literal neste comentario ja quebrou o replace uma vez), e guia, ficha, agenda e institucional (que usam este mesmo template, varias sem foto de capa) continuam com o cabecalho normal de cima. A primeira dobra vira foto + noticia: ticker, breadcrumb e billboard do topo saem, e o cabecalho fica so logo + sanduiche, flutuando SOBRE a foto sem ocupar linha propria. */ @media(max-width:780px){ body.pg-materia{background:#F6F7FA} .pg-materia .brand-bar, .pg-materia .top-strip, .pg-materia .navbar, .pg-materia .crumbs, .pg-materia .ad-billboard{display:none} .pg-materia header.main{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom:none;box-shadow:none;z-index:20} /* O hide-on-scroll do header nao faz sentido num cabecalho absoluto: ele ja sai de cena rolando junto com a foto. */ .pg-materia header.main.is-hidden{transform:none} .pg-materia .head{padding:10px 16px;gap:12px} .pg-materia .logo img:first-child{display:none} .pg-materia .logo .logo-negativa{display:block;height:28px} .pg-materia .lang-btn{display:none} .pg-materia .hamburger{background:rgba(10,27,61,.30);border-color:rgba(255,255,255,.38);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} /* Selo (i) do credito da foto (pedido do Jose, 14/08 — revoga o badge de canto que existia aqui: credito comprido quebrava em 3-4 linhas sobre a imagem e virava parede). 14px de circulo visual, na QUINA de verdade — nao colado no hamburguer, ancorado em position:absolute no proprio .head (que ja tem position:relative neste breakpoint), com o MESMO right padding do .head, pra ficar rente a borda igual o resto do layout. O alvo de toque real fica maior (44px) via pseudo-elemento invisivel, porque um circulo de 14px sozinho fica pequeno demais pro dedo (regra de alvo minimo, mesma logica do .lang-btn em min-height:44px). So existe na materia (escondido nas outras paginas que usam este template — ver a regra base de .cover-info-pill mais abaixo — e o proprio buildPost remove a tag inteira quando a materia nao tem legenda de capa: nada de selo levando a lugar nenhum). */ .pg-materia .cover-info-pill{ position:absolute;top:50%;right:16px;transform:translateY(-50%); display:inline-flex;align-items:center;justify-content:center; width:14px;height:14px;border-radius:999px;flex-shrink:0; background:rgba(10,27,61,.34);border:1px solid rgba(255,255,255,.42); color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); text-decoration:none; } .pg-materia .cover-info-pill::before{content:"";position:absolute;inset:-15px} .pg-materia .cover-info-pill .material-icons{font-size:9px} /* A foto abre a pagina na largura toda. O gradiente do topo existe pra logo branca nao sumir em foto clara; nos ~120px finais a imagem perde nitidez (backdrop-filter) e se dissolve no fundo da pagina (mask), em vez de terminar em corte seco. */ .pg-materia .article-cover{margin:0 -20px} /* Altura em svh (D126): o 432px fixo jogava o titulo pra fora da primeira dobra em aparelho baixo. svh nao se mexe com a barra de endereco; o px e a reserva. */ .pg-materia .article-cover img{aspect-ratio:auto;height:432px;height:min(432px,55svh);object-fit:cover} /* O dissolve mora no QUADRO: preso na foto, viajaria junto com a deriva. */ .pg-materia .article-cover{ -webkit-mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.5) 84%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.5) 84%,rgba(0,0,0,0) 100%)} .pg-materia .article-cover::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,rgba(10,27,61,.52),rgba(10,27,61,0));z-index:1;pointer-events:none} .pg-materia .article-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); -webkit-mask-image:linear-gradient(180deg,transparent,#000 78%);mask-image:linear-gradient(180deg,transparent,#000 78%);pointer-events:none} /* A foto fica limpa: o figcaption original some (o texto dele reaparece, INTEIRO, no .article-cover-credito dentro do cartao branco — ver a regra logo abaixo). */ .pg-materia .article-cover figcaption{display:none} /* Cartao da materia na LARGURA TODA (pedido do Jose, 14/08 — revoga a margem lateral de 16px que existia aqui): em celular pequeno a margem comia coluna de texto. O -20px cancela exatamente o padding do .wrap (nada de 100vw, que soma a barra de rolagem); o canto de 30px continua aparecendo por cima da foto, que a essa altura ja esta desfocada pelo dissolve do ::after. */ /* A capa FICA e o cartao branco sobe por cima dela (D126). O pai delimita o sticky, entao ela desgruda sozinha quando o
acaba. */ .pg-materia header.wrap{position:relative} .pg-materia .article-cover{position:sticky;top:0;z-index:0;overflow:hidden} .pg-materia .article-masthead{position:relative;z-index:2} /* A foto AFASTA dentro do quadro travado, em vez de deslizar: deslizar dava tres velocidades na mesma cena e lia como vidro (D126). A escala nunca desce de 1. */ @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: scroll()){ .pg-materia .article-cover img{ animation:capa-afasta linear both; animation-timeline:scroll(root block); animation-range:0 400px; } @keyframes capa-afasta{ from{scale:1.22} to{scale:1.05} } /* O logo pousa JUNTO da capa (Jose, 22/08 - opcao A da bancada bora-logo-devagar): o header absoluto de hoje sobe 1:1 com o scroll e some antes da foto. Aqui ele passa a pertencer a cena da capa: preso na tela (fixed = fora do fluxo, CLS zero por construcao) e se dissolve no MESMO trecho de 400px em que a foto assenta (capa-afasta). No fim do trecho, visibility:hidden - nada de logo fantasma clicavel nem reaparecendo por cima do corpo la embaixo, porque corpo e rodape nao criam stacking context. z-index 1 = acima da foto (0), abaixo do cartao branco (2). Fora deste bloco (sem suporte a animation-timeline, ou com movimento reduzido) vale o comportamento de hoje: header absoluto que sai rolando com a pagina. So a materia - a home manchete (D127) tem cena propria e nao muda. */ .pg-materia header.main{ position:fixed; z-index:1; animation:logo-junto-da-capa linear both; animation-timeline:scroll(root block); animation-range:0 400px; } @keyframes logo-junto-da-capa{ from{opacity:1} to{opacity:0;visibility:hidden} } } } .pg-materia .article-masthead{margin:-64px -20px 0;padding:28px 24px 10px;border-radius:30px 30px 0 0;background:#fff;box-shadow:0 -10px 30px rgba(10,27,61,.06)} /* Pilula da editoria comendo espaco demais no celular (pedido do Jose, 14/08): era um retangulo solido de 11px com padding generoso, empurrando o titulo pra baixo. Vira chip glass — fundo bem claro na cor da editoria (nao a cor solida: o texto passa a SER a cor, herdando o mesmo contraste AA ja calibrado contra branco nos --c-* do topo do arquivo) com blur, menor em fonte e em padding. */ .pg-materia .article-cat{gap:6px;padding:4px 10px 4px 8px;font-size:10px;letter-spacing:.11em;border-radius:999px;margin-bottom:10px;color:var(--c-cotidiano);background:color-mix(in srgb, var(--c-cotidiano) 10%, #fff);border:1px solid color-mix(in srgb, var(--c-cotidiano) 28%, transparent);-webkit-backdrop-filter:blur(6px) saturate(160%);backdrop-filter:blur(6px) saturate(160%)} .pg-materia .article-cat::before{width:4px;height:4px;background:currentColor} /* Titulo grande demais no celular (pedido do Jose, 14/08 — revoga o clamp de 32-42px): num aparelho comum de 375-414px o 10.5vw batia 39-41px, e um titulo de uma linha virava 6-7 linhas, empurrando o subtitulo pra fora da primeira dobra. Reduzido pra 26-36px; a manchete continua grande, so nao domina a tela toda. */ .pg-materia .article-headline{font-size:clamp(26px,8vw,36px);line-height:1.08} .pg-materia .article-dek{margin-top:14px;font-size:17px;line-height:1.5} /* Credito da foto, discreto, DEPOIS da caixa de autoria (pedido do Jose, 14/08; reposicionado em 01/09 — morava logo apos a linha fina, e ele rejeitou: lia como um "sub sub" interrompendo titulo->linha fina->autoria). So o buildPost escreve este paragrafo, e so quando a materia tem legenda de capa — texto corrido no papel branco quebra a vontade, sem a parede que o credito comprido virava em cima da foto. `display:block` porque a regra base (fora deste media query) esconde este paragrafo no desktop — ver `.article-cover-credito` acima. */ .pg-materia .article-cover-credito{display:block;margin:12px 0 0;font-size:11.5px;line-height:1.45;color:var(--suave);font-style:italic} .pg-materia .article-cover-credito b{font-weight:700;font-style:normal} /* Identidade Bora depois do subtitulo: a autoria vira uma caixa arredondada com o avatar da marca, em vez de duas linhas de fio aberto. */ .pg-materia .byline{margin-top:20px;padding:12px 14px;background:#F6F7FA;border-top:none;border-bottom:none;border-radius:14px;gap:10px} .pg-materia .byline-meta{font-size:11.5px} /* O corpo continua no MESMO papel branco do cartao (mesmos -20px), sem cartao novo: ele so escorre do masthead e fecha embaixo com canto arredondado. */ .pg-materia .article-grid{max-width:none;margin:0 -20px;background:#fff;border-radius:0 0 26px 26px;padding:2px 24px 22px} .pg-materia .article-body{font-size:18px;line-height:1.62} } /* Fileira, nao mais coluna sticky: o rail saiu do topo e foi pro fim da materia (depois do corpo, antes do aviso editorial — pedido do Jose, 13/08). Ninguem compartilha antes de ler; no topo ficou so a linha de tempo de leitura. */ .share-rail{display:flex;flex-direction:row;align-items:center;gap:10px;margin:36px 0 8px;padding-top:28px;border-top:1px solid var(--linha)} .share-rail span.lbl{font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--suave)} /* Os botões de compartilhar NÃO são link de texto: a regra de link do corpo (.article-body a:not(.btn), cor + sublinhado) ganhava por especificidade e pintava o ícone da MESMA cor do fundo de hover — ícone sumia no mouse (José, 14/08, duas vezes). Estas duas regras têm especificidade maior que qualquer regra de link do corpo, de propósito: repouso grafite no branco, hover ícone BRANCO. */ .article-body .share-rail a.share-btn{color:var(--grafite);text-decoration:none;border-bottom:none} .article-body .share-rail a.share-btn:hover{background:var(--azul);color:#fff;border-color:var(--azul)} .share-btn{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--linha);display:inline-flex;align-items:center;justify-content:center;color:var(--grafite);transition:all .2s} .share-btn:hover{background:var(--azul);color:#fff;border-color:var(--azul)} /* Preferred Sources (Google): so espaçamento — o botão em si é desenhado e traduzido pelo script do Google (motor/render/blocos.mjs, renderPreferredSource), nada aqui redesenha nada. */ .preferred-source-rail{margin:14px 0 8px} .article-body{font-size:18px;line-height:1.6;color:var(--texto)} .article-body p{margin-bottom:24px} .article-body p strong{color:var(--terra);font-weight:700} /* A capitular e do PRIMEIRO paragrafo da materia, e so dele. Sem o `>` o seletor casava tambem o primeiro

de QUALQUER descendente: o aviso editorial do fim virava "E ssa materia e sobre voce" com um E de 74px flutuando, e a bio do autor virava "S obre o Bora Fronteira". Os dois estavam assim no ar. */ .article-body > p:first-of-type::first-letter{font-family:'Poppins',sans-serif;font-size:74px;font-weight:900;line-height:.85;float:left;color:var(--c-cotidiano);margin:6px 12px 0 0;padding-top:2px} .article-body h2{font-family:'Poppins',sans-serif;font-size:32px;line-height:1.15;color:var(--terra);font-weight:700;margin:42px 0 16px;letter-spacing:-.03em} .article-body h3{font-family:'Poppins',sans-serif;font-size:22px;color:var(--terra);font-weight:700;margin:32px 0 12px} .article-body ul,.article-body ol{margin:0 0 24px 24px} .article-body li{margin-bottom:10px} .article-body a:not(.btn){color:var(--azul);font-weight:600;text-decoration:underline;text-decoration-color:rgba(42,82,212,.35);text-underline-offset:3px} .article-body a:not(.btn):hover{text-decoration-color:var(--azul)} /* MEDIDA DE LINHA (D205). A coluna de 840px em 18px dava 94 a 97 caracteres por linha (medido nesta materia, 6 paragrafos, com `measureText(texto).width / largura do p`). Tipografia de leitura pede 68 a 75; acima disso o olho perde a volta da linha. A D160 ja tinha tentado isso estreitando a GRADE inteira pra 660px, e o Jose vetou em 01/09 junto com o recuo do titulo (D167/D168) — a grade voltou pros 840. Entao aqui nao se mexe na grade: ela continua 840px em x=300, e com ela o h1, a linha fina, a caixa de autoria, a capa, os headings, as figuras, o rail de compartilhar e o box de CTA (largos por desenho). So o TEXTO CORRIDO ganha teto, encostado na esquerda da mesma coluna. 56ch = 635px com o Inter de 18px, que da 72 caracteres por linha. So na materia (`.pg-materia`): guia, ficha, agenda e institucional usam este mesmo `.article-body` com outra diagramacao e ficam fora. */ .pg-materia .article-body > p, .pg-materia .article-body > ul, .pg-materia .article-body > ol{max-width:56ch} /* Pullquote */ .pullquote{margin:36px 0;padding:24px 28px;background:var(--cinza);border-left:4px solid var(--teal);border-radius:0 8px 8px 0;position:relative} .pullquote::before{content:"\201C";position:absolute;top:-12px;left:14px;font-family:'Poppins',sans-serif;font-size:90px;color:var(--teal);opacity:.3;line-height:1} .pullquote p{font-family:'Poppins',sans-serif;font-size:22px;line-height:1.4;color:var(--terra);font-style:italic;margin-bottom:14px;font-weight:600;letter-spacing:-.01em} .pullquote cite{font-style:normal;font-size:13px;color:var(--suave);font-weight:700;text-transform:uppercase;letter-spacing:.06em} /* Inline image */ .inline-fig{margin:32px 0} .inline-fig img{width:100%;border-radius:6px;height:auto;max-height:480px;object-fit:cover} .inline-fig figcaption{font-size:13px;color:var(--suave);margin-top:10px;line-height:1.4;font-style:italic} /* Video (YouTube) — fachada de clique. O iframe SO nasce depois que o leitor toca: antes disso a pagina nao chama o Google, nao grava cookie de terceiro e nao paga o peso do player. O cartaz e hospedado aqui, como toda imagem do site (nada de hotlink no thumb do YouTube). */ .video-embed{margin:32px 0} .video-embed .video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--navy,#0A1B3D)} .video-embed[data-vertical="1"] .video-frame{aspect-ratio:9/16;max-width:340px;margin:0 auto} .video-embed .video-frame img,.video-embed .video-frame video{width:100%;height:100%;object-fit:cover;display:block} .video-embed .video-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center} .video-embed .video-play::before{content:"";width:84px;height:84px;border-radius:50%;background:rgba(10,27,61,.82);box-shadow:0 6px 26px rgba(0,0,0,.35)} .video-embed .video-play::after{content:"";position:absolute;border-style:solid;border-width:16px 0 16px 27px;border-color:transparent transparent transparent #fff;margin-left:8px} .video-embed .video-play:hover::before{background:rgba(10,27,61,.94)} .video-embed .video-play:focus-visible{outline:3px solid var(--teal,#00807F);outline-offset:3px} .video-embed iframe{width:100%;height:100%;border:0;display:block} .video-embed figcaption{font-size:13px;color:var(--suave);margin-top:10px;line-height:1.4;font-style:italic} .video-embed .video-nota{font-size:12px;color:var(--suave);margin-top:6px;line-height:1.4} /* Ad inline */ .ad-inline{margin:36px 0;display:flex;align-items:center;justify-content:center;background:#fff;border:1px dashed #C9CFD8;color:#7A8294;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;border-radius:4px;position:relative;height:130px} .ad-inline::before{content:"Publicidade";position:absolute;top:-9px;left:14px;background:#fff;padding:0 6px;color:#9099A8;font-size:9px} /* Banner generico (topo) */ .ad{display:flex;align-items:center;justify-content:center;background:#fff;border:1px dashed #C9CFD8;color:#7A8294;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;border-radius:4px;position:relative} .ad-billboard{height:280px;margin:28px 0} /* Source / fonte */ .article-source{margin:30px 0;padding:16px 18px;background:var(--bg);border-radius:8px;font-size:13.5px;color:#3a3a3a} .article-source b{color:var(--terra);font-weight:700} /* Tags */ /* Ponte noticia -> guia (regra 8.3). Caixa discreta no fim do corpo. */ .guias-da-materia{margin:28px 0 8px;padding:16px 18px;background:var(--bg);border-left:3px solid transparent;border-image:linear-gradient(180deg,#A4D3BC,#00ABAA) 1;border-radius:0 10px 10px 0} .guias-da-materia h4,.guias-da-materia h3{font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--suave);margin:0 0 8px} .guias-da-materia a{display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:15.5px;color:var(--teal-tinta);text-decoration:none;padding:3px 0} .guias-da-materia a:hover{text-decoration:underline} .article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0;padding-top:24px;border-top:1px solid var(--linha)} .tag{display:inline-block;padding:6px 12px;background:#F0F2F6;color:var(--grafite);font-size:12px;font-weight:700;border-radius:999px;text-transform:lowercase;letter-spacing:.02em} .tag:hover{background:var(--azul);color:#fff} /* Caixa "Apoie o Bora Fronteira" / CTA */ .cta-box{margin:32px 0;padding:24px;background:linear-gradient(135deg,#FAF8F2 0%,#F4ECDE 100%);border-radius:10px;border:1px solid #E8E0CE;display:flex;gap:18px;align-items:center;flex-wrap:wrap} .cta-box .cta-icon{width:48px;height:48px;border-radius:50%;background:var(--teal-tinta);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0} .cta-box .cta-icon .material-icons{font-size:24px} .cta-box .cta-text{flex:1;min-width:200px} .cta-box h4,.cta-box h3{font-family:'Poppins',sans-serif;font-size:18px;font-weight:600;color:var(--teal-tinta);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px} .cta-box p{font-size:14.5px;color:var(--terra);line-height:1.4;font-weight:500} /* A caixa de autoria do fim da materia saiu a pedido do Jose (13/08). O CSS dela foi junto: regra orfa em 121 paginas e o proximo que ler o arquivo nao sabe se pode mexer. */ /* Leia também */ .related-section{max-width:1100px;margin:60px auto 80px;padding:0 20px} .section-title{display:flex;align-items:center;gap:10px;margin:0 0 22px} .section-title h2{font-size:18px;line-height:1.2;color:var(--terra);font-weight:800;letter-spacing:-.02em} .section-title.section-title-pill h2{display:inline-flex;align-items:center;width:max-content;padding:6px 15px;border:1px solid var(--linha);border-radius:999px;background:#fff;color:var(--ink);font-weight:800;box-shadow:0 5px 14px -13px rgba(10,27,61,.55)} .related-grid{display:grid;grid-template-columns:1fr;gap:18px} @media(min-width:680px){ .related-grid{grid-template-columns:repeat(3,1fr)} } .related-card{background:#fff;border:1px solid var(--linha);border-radius:10px;overflow:hidden;box-shadow:var(--sombra);transition:all .2s;display:flex;flex-direction:column} .related-card:hover{transform:translateY(-2px);box-shadow:var(--sombra-hover)} .related-card img{width:100%;height:180px;object-fit:cover} .related-card .body{padding:16px 18px 20px} .related-card .ic{font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px} .related-card h3{font-family:'Poppins',sans-serif;font-size:18px;font-weight:600;line-height:1.25;color:var(--terra)} .related-card time{display:block;margin-top:8px;font-size:11px;color:var(--suave);text-transform:uppercase;letter-spacing:.06em} /* Foto do "leia tambem" com parallax no scroll (D125), irmao do card da home. */ @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ .related-card{view-timeline-name:--foto-card;view-timeline-axis:block} /* Sem quadro proprio aqui: o corpo sobe uma camada e cobre o excedente. */ .related-card .body{position:relative;z-index:1;background:#fff} .related-card img{ scale:1.10; animation:foto-card-parallax linear both; animation-timeline:--foto-card; animation-range:cover 0% cover 100%; } @keyframes foto-card-parallax{ from{translate:0 -4%} to{translate:0 4%} } } } .ic[data-c="compras"]{color:var(--c-compras)} .ic[data-c="fronteira-viva"]{color:var(--c-fronteira-viva)} .ic[data-c="cotidiano"]{color:var(--c-cotidiano)} .ic[data-c="gastronomia"]{color:var(--c-gastronomia)} .ic[data-c="esporte"]{color:var(--c-esporte)} /* Faixa patrocinada */ .sponsored-band{background:linear-gradient(180deg,#FAFAFB 0%,#fff 100%);padding:36px 0 44px;margin:50px 0 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)} .publi-tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9099A8;background:#F0F2F6;padding:2px 7px;border-radius:2px;margin-bottom:10px} /* Manifesto: banda navy entre o conteudo e o rodape (mockup do Jose, 14/08). Mesmo desenho do 1-preview-home: chamada institucional do manual (doc 20), "Bora" em Crimson Pro teal (teal/navy 5,99:1) e fio com ponto laranja. */ .manifesto{background:var(--navy);margin-top:50px;padding:64px 0 68px} .manifesto + footer{margin-top:0;border-top:1px solid rgba(255,255,255,.10)} .manifesto-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center} .manifesto-titulo{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-.035em;color:#fff;margin:0} /* O 1.22em compensa o olho da Crimson, menor que o da Poppins no mesmo corpo: sem ele o "Bora" encolhia perto do resto da frase e nao correspondia ao wordmark. */ .manifesto-titulo .manifesto-bora{color:var(--teal);font-weight:600;font-size:1.22em;line-height:1} .manifesto-apoio p{color:#E4E9F7;font-size:16px;line-height:1.6;margin:0 0 30px;max-width:52ch} @media(max-width:900px){ .manifesto{padding:44px 0 48px;margin-top:40px} .manifesto-grid{grid-template-columns:1fr;gap:26px} .manifesto-apoio p{margin-bottom:22px} } /* Footer */ footer{margin-top:0;background:var(--azul-deep);color:#a7b2d4;padding:60px 0 24px;border-top:6px solid var(--azul)} .foot-grid{display:grid;grid-template-columns:1fr;gap:30px} @media(min-width:780px){.foot-grid{grid-template-columns:2.4fr 1fr 1fr 1fr}} footer .foot-title{color:#fff;font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px} footer .logo img{height:34px} footer p.tagline{font-size:14px;color:#a7b2d4;margin-top:10px;max-width:380px;line-height:1.55} /* Redes sociais no rodape (Jose, 24/08). Facebook fica de fora por decisao dele, mesmo existindo e estando conectado no Metricool. Alvo de toque de 44px: a D098 cobra 24 como minimo, mas link de icone num rodape escuro merece folga. */ .foot-social{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap} .foot-social a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;text-decoration:none;transition:border-color .18s,background .18s} .foot-social a:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06)} .foot-social svg{width:17px;height:17px;fill:currentColor;flex-shrink:0} /* O slogan saiu do rodape em 14/08 (Jose, emenda a D059): com o manifesto logo acima e a pilula "Bora pra fronteira!" na navbar, aqui ele repetia — e o mint dele batia com o teal do manifesto como dois verdes diferentes lado a lado. Fica o descritivo geografico. */ footer ul{list-style:none} footer ul li{padding:5px 0;font-size:13.5px} footer ul li a:hover{color:#fff} .foot-bottom{margin-top:36px;padding-top:24px;border-top:1px solid #1c2e6e;display:flex;justify-content:space-between;font-size:12px;color:#7E8BBA;flex-wrap:wrap;gap:10px} .skeleton{display:inline-block;background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.25),rgba(255,255,255,.1));background-size:200% 100%;animation:shimmer 1.2s infinite;color:transparent;border-radius:3px;min-width:50px} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} /* Mosaico de famílias de guia: o hub /guias/ usa o MESMO desenho da home desde 14/08 (pedido do José, identidade única). O CSS vive nos dois templates porque eles são arquivos separados — quem mexer num, mexe no outro. */ /* Faixa de guias da home, mosaico (D0xx, 14/08). Um card por familia, levando ao indice dela — o tamanho de cada caixa segue o volume real (motor/render/home.mjs, papelDoMosaico), nao e decoracao: a familia com mais lugares vira o destaque largo, as duas do meio ganham coluna propria, as duas menores dividem a ultima coluna. */ .faixa-guias{ display:grid; grid-template-columns:1.55fr 1fr 1fr 1fr; grid-template-areas: "destaque solo-1 solo-2 par-cima" "destaque solo-1 solo-2 par-baixo"; gap:20px; height:520px; margin-bottom:8px; } .faixa-guias .card-familia{position:relative;border-radius:18px;color:#fff;text-decoration:none;display:block;z-index:1; /* O crescimento do hover mora AQUI, no cartao inteiro, e nao na caixa da imagem. Quando estava na .caixa-familia, so a imagem crescia: o texto (que e irmao dela, nao filho) ficava parado, e a caixa escalada vazava por baixo do card mostrando um retangulo de canto vivo. Era isso que o José via como "contorno quadrado da imagem" ao passar o mouse. */ transform-origin:50% 0; transition:transform .45s cubic-bezier(.22,.9,.35,1), filter .45s cubic-bezier(.22,.9,.35,1); } .faixa-guias .card-familia.papel-destaque{grid-area:destaque} .faixa-guias .card-familia.papel-solo-1{grid-area:solo-1} .faixa-guias .card-familia.papel-solo-2{grid-area:solo-2} .faixa-guias .card-familia.papel-par-cima{grid-area:par-cima} .faixa-guias .card-familia.papel-par-baixo{grid-area:par-baixo} .faixa-guias .caixa-familia{ position:absolute;inset:0;border-radius:18px;overflow:hidden; box-shadow:0 14px 20px -14px color-mix(in srgb, var(--cor-familia) 55%, transparent), 0 26px 44px -20px color-mix(in srgb, var(--cor-familia) 48%, transparent); transition:box-shadow .45s cubic-bezier(.22,.9,.35,1); } .faixa-guias .fundo-familia{position:absolute;inset:0;background:var(--cor-familia)} .faixa-guias img.foto{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; object-position:var(--foco, 50% 28%); -webkit-mask-image:linear-gradient(115deg, transparent 0%, transparent 10%, #000 42%); mask-image:linear-gradient(115deg, transparent 0%, transparent 10%, #000 42%); } /* Sem foto (nenhuma familia hoje, ver comentario no FAMILIA_META — fica pronto pra quando uma 6a familia entrar sem ilustracao ainda): so o gradiente da cor, mais forte no canto onde a foto entraria, e o selo avisa que falta curadoria. */ .faixa-guias .card-familia.sem-foto .fundo-familia{ background:radial-gradient(140% 120% at 100% 100%, color-mix(in srgb, var(--cor-familia) 68%, #000 18%) 0%, var(--cor-familia) 62%); } .faixa-guias .conteudo-familia{position:relative;height:100%;display:flex;flex-direction:column;padding:20px; /* Veu sob o texto. As ilustracoes de CENA tinham o canto de baixo escuro por acaso da foto; as de OBJETO tem o objeto claro no meio do quadro, e nos cards baixos (160px) a imagem so pode deslizar 36px, entao o objeto cai exatamente onde o titulo vive. O degrade garante o fundo em vez de depender do que a imagem tem ali. */ /* O veu e da COR DA FAMILIA, nao preto: preto sobre vinho/dourado suja o card e aparece como mancha cinza. Com a propria cor ele le como o fundo do card subindo por tras do objeto, que e o que o card ja faz na parte de cima. */ /* Diagonal, e nao reto de baixo pra cima: o texto mora no canto INFERIOR ESQUERDO e o objeto no centro-direita. Veu reto cobria a largura toda e apagava o objeto junto; ancorado no canto do texto ele cobre o que precisa e deixa o objeto respirar do outro lado. */ background:radial-gradient(92% 88% at 0% 100%, color-mix(in srgb, var(--cor-familia) 88%, #000 22%) 0%, color-mix(in srgb, var(--cor-familia) 74%, #000 10%) 36%, color-mix(in srgb, var(--cor-familia) 34%, transparent) 62%, transparent 86%)} /* Nos cards baixos o texto nao fica na base: ele ocupa quase toda a altura pela esquerda, entao veu que sobe da base passa por baixo dele e nao resolve nada. Ali o veu vem da ESQUERDA, cobrindo a coluna do titulo e deixando o objeto limpo na direita. Foi o que faltava no Cassino e no Morar, onde titulo branco caia em cima de objeto creme claro. */ .faixa-guias .papel-solo-3 .conteudo-familia, .faixa-guias .papel-solo-4 .conteudo-familia, .faixa-guias .papel-solo-5 .conteudo-familia, .faixa-guias .papel-par-cima .conteudo-familia, .faixa-guias .papel-par-baixo .conteudo-familia{ background:linear-gradient(100deg, color-mix(in srgb, var(--cor-familia) 90%, #000 24%) 0%, color-mix(in srgb, var(--cor-familia) 78%, #000 12%) 38%, color-mix(in srgb, var(--cor-familia) 38%, transparent) 66%, transparent 88%)} .faixa-guias .selo-ico-familia{width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px rgba(0,0,0,.14)} .faixa-guias .selo-ico-familia .material-icons{color:var(--cor-familia);font-size:22px} .faixa-guias .texto-familia{margin-top:auto} .faixa-guias .tit-familia{font-family:'Poppins',sans-serif;font-weight:700;font-size:23px;line-height:1.15;letter-spacing:-.01em;margin:0 0 9px;text-shadow:0 1px 2px rgba(0,0,0,.58),0 2px 15px rgba(0,0,0,.45)} .faixa-guias .papel-destaque .tit-familia{font-size:31px} .faixa-guias .linha-familia{width:26px;height:2px;background:rgba(255,255,255,.55);margin:0 0 9px;border-radius:2px} .faixa-guias .conteudo-familia p{font-family:'Inter',sans-serif;font-weight:400;font-size:13px;color:rgba(255,255,255,.94);margin:0;text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.4)} .faixa-guias .conteudo-familia p b{font-family:'Poppins',sans-serif;font-weight:700;font-size:14px} .faixa-guias .pendente{position:absolute;top:16px;right:16px;z-index:2;font-family:'Poppins',sans-serif;font-weight:700;font-size:9px;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.94);color:var(--cor-familia);padding:4px 9px;border-radius:999px} /* Grupo: passar o mouse cresce o card sob o cursor e recua os outros junto, suave dos dois lados — nao e so o card sob o cursor reagindo sozinho. */ .faixa-guias:hover .card-familia:hover{z-index:5;transform:scale(1.045)} .faixa-guias:hover .card-familia:hover .caixa-familia{ box-shadow:0 20px 26px -14px color-mix(in srgb, var(--cor-familia) 62%, transparent), 0 38px 64px -22px color-mix(in srgb, var(--cor-familia) 55%, transparent); } .faixa-guias:hover .card-familia:not(:hover){transform:scale(.965);filter:saturate(.9) brightness(.96)} .faixa-guias:hover .card-familia:not(:hover) .caixa-familia{ box-shadow:0 10px 16px -14px color-mix(in srgb, var(--cor-familia) 40%, transparent), 0 18px 30px -20px color-mix(in srgb, var(--cor-familia) 32%, transparent); } @media(prefers-reduced-motion:reduce){ .faixa-guias .caixa-familia, .faixa-guias .card-familia{transition:none} .faixa-guias:hover .card-familia:hover, .faixa-guias:hover .card-familia:not(:hover){transform:none;filter:none} } @media(max-width:780px){ .faixa-guias{display:flex;flex-direction:column;gap:16px;height:auto} .faixa-guias .card-familia{aspect-ratio:16/10} .faixa-guias .papel-destaque .tit-familia{font-size:20px} } /* No hub /guias/ o mosaico não cabe na coluna de leitura: `.guia` tem max-width 760px porque texto longo se lê em 65-75 caracteres, e dentro dela os cards esticam e o título quebra em três linhas. O mosaico escapa da coluna e volta pra largura do site, mantendo o centro — a coluna continua valendo pro texto, que é quem precisa. */ header.wrap > .faixa-guias{ width:min(1240px, 100%); margin:26px auto 8px; } /* Grade da página de família: os guias DA família nos cards da identidade da home. Reusa todo o visual de .faixa-guias, só troca o mosaico de áreas fixas por uma grade uniforme — aqui a quantidade de cards varia por família (1 a 8). */ .faixa-guias.grade-familia{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); grid-template-areas:none; height:auto; width:min(1240px, 100%); margin:26px auto 8px; } .faixa-guias.grade-familia .card-familia{grid-area:auto;min-height:0} /* Card LEGÍVEL da página de família (pedido do José, 14/08: "menos gradiente e texto embaixo, tá muito ruim de ler"). A foto fica limpa em cima, com um véu leve da cor só pra segurar o ícone; o título desce pra área branca, em tinta escura, sem sombra de texto. A identidade continua na cor da família (véu, linha, ícone), mas quem manda aqui é a leitura. */ .faixa-guias.grade-familia .caixa-familia{position:relative;height:172px;border-radius:18px 18px 0 0} .faixa-guias.grade-familia .card-familia{background:#fff;border:1px solid var(--linha);border-radius:18px;overflow:hidden;display:flex;flex-direction:column} .faixa-guias.grade-familia img.foto{-webkit-mask-image:none;mask-image:none;object-position:50% 40%} .faixa-guias.grade-familia .fundo-familia{background:color-mix(in srgb, var(--cor-familia) 20%, transparent);z-index:1} .faixa-guias.grade-familia .card-familia.sem-foto .fundo-familia{background:radial-gradient(140% 120% at 100% 100%, color-mix(in srgb, var(--cor-familia) 68%, #000 18%) 0%, var(--cor-familia) 62%)} .faixa-guias.grade-familia .conteudo-familia{position:static;height:auto;flex:1;padding:16px 18px 18px} .faixa-guias.grade-familia .selo-ico-familia{position:absolute;top:14px;left:14px;z-index:2} .faixa-guias.grade-familia .texto-familia{margin-top:0} .faixa-guias.grade-familia .tit-familia{color:var(--terra);text-shadow:none;font-size:19px} .faixa-guias.grade-familia .linha-familia{background:var(--cor-familia)} .faixa-guias.grade-familia .conteudo-familia p{color:var(--grafite)} /* Sombra e hover do card branco (José, 14/08: "sombra muito forte... quando mexe a imagem sai do lugar"). A sombra colorida era do card cheio de cor; no card branco vira mancha. E o hover de escala era na caixa da foto — agora que ela é só o topo, escalar move a imagem sozinha. Aqui: sombra neutra leve, hover só aprofunda a sombra e acende a borda na cor da família. NADA se move. */ .faixa-guias.grade-familia .caixa-familia{box-shadow:none;border-radius:0} .faixa-guias.grade-familia .card-familia{box-shadow:0 6px 16px -12px rgba(15,23,42,.22);transition:box-shadow .3s, border-color .3s} .faixa-guias.grade-familia:hover .card-familia:hover .caixa-familia, .faixa-guias.grade-familia:hover .card-familia:not(:hover) .caixa-familia{transform:none;filter:none;box-shadow:none} .faixa-guias.grade-familia .card-familia:hover{box-shadow:0 14px 28px -14px rgba(15,23,42,.30);border-color:color-mix(in srgb, var(--cor-familia) 45%, var(--linha))} /* Breadcrumb no celular (opção A, 15/08 — a v1 de 14/08 cortava palavra no meio da trilha inteira; o José escolheu entre A/B e A venceu): a trilha completa some e sobra só o ÚLTIMO passo, como link de "voltar" numa pílula com alvo de dedo confortável (44px) — o título logo abaixo (nível 1) já diz onde a pessoa está, a trilha inteira era redundante nesse tamanho de tela. Puro CSS: esconde os elos do meio via nth-last-child, sem tocar nos três renders que emitem .crumbs (guia, matéria, ficha). No desktop a trilha completa continua como estava. */ @media(max-width:780px){ .crumbs{flex-wrap:nowrap;gap:6px;padding:14px 0 6px} .crumbs > a:not(:nth-last-child(3)), .crumbs > .sep:not(:last-of-type){display:none} .crumbs > a:nth-last-child(3){ display:inline-flex;align-items:center;gap:7px;min-height:40px; padding:8px 14px 8px 10px;margin:-8px 0; background:var(--bg,#F6F7FA);border:1px solid var(--linha);border-radius:999px; font-size:13.5px;font-weight:600;text-transform:none;letter-spacing:0; color:var(--teal-tinta,#00ABAA);max-width:none } .crumbs > a:nth-last-child(3)::before{ content:"";width:7px;height:7px;flex-shrink:0; border-left:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translate(1px,-1px) } .crumbs > span:last-child{display:none} } /* Caixa de serviço: valor nunca vaza (URL longa quebra dentro da caixa), e no celular o par rótulo/valor empilha com o valor à esquerda. */ .serv-box .linha{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--linha);font-size:13.5px} .serv-box .linha .rotulo{color:var(--suave);font-weight:600;flex-shrink:0} .serv-box .linha .valor{color:var(--terra);font-weight:700;text-align:right;min-width:0;overflow-wrap:anywhere} .serv-box .linha .valor a{color:var(--teal-tinta, #00ABAA)} @media(max-width:780px){ .serv-box .linha{flex-direction:column;gap:2px} .serv-box .linha .valor{text-align:left} } /* ====== Acessibilidade (auditoria 14/08) ====== */ /* Pular direto pro conteudo: primeiro Tab da pagina. Fora da tela ate receber foco. */ .skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--navy);color:#fff;font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;padding:12px 20px;border-radius:0 0 10px 0;text-decoration:none} .skip-link:focus{left:0} /* Anel de foco do teclado em TODO interativo, nao so no botao de idioma. No rodape navy o teal-tinta some, entao la o anel vira mint. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--azul);outline-offset:2px} footer a:focus-visible{outline-color:var(--mint)} /* Alvo de toque >=24px (WCAG 2.5.8) nos links soltos de navegacao, sem mexer no desenho: padding compensado por margem negativa nao desloca nada em volta. */ footer .foot-grid li a{display:inline-block;padding:6px 0;margin:-6px 0} .brand-bar{display:none} header.main{background:var(--navy);border:0;box-shadow:none} .frontier-mainbar{background:linear-gradient(112deg,var(--navy),#0D3277)} .frontier-mainbar .head{min-height:82px;padding:18px 20px;gap:18px} .frontier-mainbar .logo{flex:1} .frontier-mainbar .logo img{height:34px} .frontier-mainbar .menu,.frontier-mainbar .menu-search{display:none} /* BUSCA VISIVEL NO DESKTOP (D183). O CSS de `.menu-search` existia desde maio e o ELEMENTO nunca foi escrito: medido em 04/09, `a[href*="busca"]` devolvia ZERO em toda pagina do dist, e o unico campo era o do menu sanduiche, que so aparece abaixo de 640px. Quem lia no computador nao tinha como buscar. Aqui a barra escura precisa do proprio traje: o campo claro de `.menu-search` some dentro do navy. Contrastes medidos sobre a ponta CLARA do gradiente (#0D3277, o pior caso): texto branco 12,07:1, placeholder #D8E1F4 9,19:1, icone navy sobre mint 10,2:1. Altura de 44px, acima dos 24 que a D098 pede. A logo perde o `flex:1` so aqui: com a busca no meio, quem estica e ela. Nada abaixo do `.frontier-strip` (clima, horarios, cambio) e tocado. */ @media(min-width:1025px){ .frontier-mainbar .logo{flex:none} .frontier-mainbar .menu-search{display:flex;flex:1;justify-content:center} .frontier-mainbar .menu-search input{width:100%;max-width:420px;min-height:44px;padding:11px 18px;font-size:14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.45);border-right:none;color:#fff} .frontier-mainbar .menu-search input::placeholder{color:#D8E1F4;opacity:1} .frontier-mainbar .menu-search input:focus{outline:none;border-color:var(--mint);background:rgba(255,255,255,.16)} /* Mesmo conserto na barra escura; aqui o anel e mint, que e o par do navy. */ .frontier-mainbar .menu-search input:focus-visible{outline:2px solid var(--mint);outline-offset:2px} .frontier-mainbar .menu-search button{width:52px;height:auto;min-height:44px;background:var(--mint);border-color:var(--mint);color:var(--navy)} .frontier-mainbar .menu-search button:hover{background:#fff;border-color:#fff} } .frontier-mainbar .hamburger{display:inline-flex;width:44px;height:44px;background:transparent;border-color:rgba(255,255,255,.45);color:#fff} .frontier-mainbar .hamburger:hover{border-color:var(--mint);color:#fff} .frontier-mainbar .lang-btn{min-height:44px;background:transparent;border-color:rgba(255,255,255,.45);color:#fff} .frontier-mainbar .lang-seg + .lang-seg{border-left-color:rgba(255,255,255,.45)} /* Na barra escura o preenchimento tem que ser CLARO pra se distinguir do fundo: com rgba(255,255,255,.16) os dois segmentos ficavam quase iguais e o seletor voltava a nao dizer onde voce esta, que e o defeito que ele veio consertar. */ .frontier-mainbar .lang-seg[aria-current]{background:#fff;color:var(--terra);font-weight:700} .frontier-mainbar .lang-btn:hover{border-color:var(--mint);color:#fff} .frontier-mainbar .menu.is-open{display:flex;position:absolute;top:100%;left:0;right:0;z-index:40;flex-direction:column;padding:8px 0;background:#fff;border-top:1px solid #dce4f1;box-shadow:0 12px 22px rgba(4,24,63,.14)} .frontier-mainbar .menu.is-open a{width:100%;padding:14px 24px;border-bottom:1px solid #e8edf5;text-align:left;font-size:14px} .frontier-mainbar .menu.is-open a:last-child{border-bottom:0} .frontier-mainbar .menu.is-open .menu-search-inline{display:flex;padding:10px 20px;border-bottom:1px solid var(--linha-2)} .frontier-strip{background:linear-gradient(112deg,#0C2C69,#082255);border-top:1px solid rgba(255,255,255,.14);color:#fff} .frontier-services{display:grid;grid-template-columns:1.45fr 1fr 1.2fr;gap:8px;padding:8px 20px} .frontier-services.sem-cambio{grid-template-columns:1.45fr 1fr} .frontier-services.sem-clima{grid-template-columns:1.45fr 1.2fr} .frontier-services.sem-cambio.sem-clima{grid-template-columns:1fr} .frontier-card{min-height:70px;display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:10px;color:#fff} .frontier-card[hidden]{display:none} /* PISO DE 10px (D205, manual de tipografia doc 20: etiqueta e 10-12px). O strip do topo vinha a 9px nas duas telas — abaixo do piso, e ele aparece em toda pagina. */ .frontier-label{margin:0 0 4px;color:#A6E3E0;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex-basis:100%} .frontier-clock-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%} .frontier-clock-grid > div{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px} .frontier-clock-grid > div + div{border-left:1px solid rgba(255,255,255,.18);padding-left:10px} .frontier-clock-grid b,.frontier-value{display:block;font-family:'Poppins',sans-serif;font-size:20px;font-weight:700;line-height:1} .frontier-clock-grid span,.frontier-note{display:block;margin-top:0;color:#D8E1F4;font-size:10px} .frontier-city{display:inline-flex!important;align-items:center;gap:5px;white-space:nowrap} .frontier-clima > span,.frontier-cambio > span{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px} .frontier-city-full,.frontier-city-short{display:inline!important;margin:0!important} .frontier-city-short{display:none!important} .frontier-txt-full,.frontier-txt-short{display:inline} .frontier-txt-short{display:none} .frontier-flag{display:block;flex:none} .frontier-weather-icon{width:28px;height:28px;display:block;flex:none;color:#FFD44E} .frontier-cambio-coin{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:50%;background:#18AF3B;color:#fff;font-family:'Poppins',sans-serif;font-size:20px;font-weight:700} .frontier-action{color:#A6E3E0!important;font-weight:700} .frontier-services-lite{display:none} .frontier-fx[hidden]{display:none} .frontier-card:focus-visible{outline:3px solid #F5C518;outline-offset:3px} .navbar{display:block;background:var(--cinza);border-bottom:1px solid var(--linha)} .navbar .wrap{min-height:60px;padding:8px 20px;gap:26px;overflow-x:auto} .navbar a{height:44px;padding:0;border:0;background:transparent;color:var(--ink);border-radius:999px;font-size:14px} .navbar a .material-icons{display:none} .navbar a.pill-inicio{padding:0 14px} .navbar a.is-ativo{background:#E2F4EF;border:0;color:var(--teal-tinta)} .navbar .slogan-nav{display:none} #clima{scroll-margin-top:285px} section.hero-carousel{display:grid;grid-template-columns:1.75fr 1fr;gap:18px;align-items:stretch;padding:28px 0 38px} .hero-main-carousel{position:relative;min-height:510px;overflow:hidden;border-radius:16px;background:#07142F} .hero-slide{display:none;position:absolute;inset:0;color:#fff} .hero-slide.is-active{display:block} .hero-slide-cover{position:absolute;inset:0;display:block} .hero-slide-cover img{width:100%;height:100%;object-fit:cover} .hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,20,47,.96) 0%,rgba(7,20,47,.82) 46%,rgba(7,20,47,.06) 100%);pointer-events:none} .hero-slide-copy{position:absolute;z-index:1;right:38px;bottom:36px;left:42px} .hero-slide-copy .cat-pill{margin:0 0 12px;background:transparent;color:#7CE4DF;padding:0;border-radius:0} .hero-slide-copy h1,.hero-slide-copy h2{max-width:20ch;margin:0;color:#fff;font-family:'Poppins',sans-serif;font-size:36px;font-weight:800;line-height:1.08;letter-spacing:-.045em;text-wrap:balance} .hero-slide-copy h1.tit-medio,.hero-slide-copy h2.tit-medio{font-size:32px} .hero-slide-copy h1.tit-curto,.hero-slide-copy h2.tit-curto{font-size:28px;line-height:1.1} .hero-slide-copy h1 a,.hero-slide-copy h2 a{color:#fff} .hero-slide-copy .by{margin:18px 0 0;color:#D2DCF0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em} .hero-carousel-controls{position:absolute;z-index:2;right:24px;bottom:21px;display:none;align-items:center;gap:8px} .hero-carousel-arrow{width:44px;height:44px;border:1px solid rgba(255,255,255,.62);border-radius:50%;background:rgba(6,17,42,.52);color:#fff;font-size:25px;line-height:1} .hero-carousel-dots{display:flex;gap:2px} .hero-carousel-dot{position:relative;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent} .hero-carousel-dot::before{content:"";position:absolute;top:8px;left:8px;width:8px;height:8px;border-radius:99px;background:#9AA7C4} .hero-carousel-dot[aria-current="true"]::before{left:1px;width:22px;background:var(--teal)} .hero-carousel-arrow:focus-visible,.hero-carousel-dot:focus-visible{outline:3px solid #F5C518;outline-offset:2px} .hero-side-rail{display:grid;grid-template-rows:1fr 1fr;gap:18px} .hero-side-story{position:relative;min-height:246px;overflow:hidden;border-radius:16px;background:#07142F;color:#fff} .hero-side-story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-side-story::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,20,47,.94),rgba(7,20,47,.05) 75%);pointer-events:none} .hero-side-story-copy{position:absolute;z-index:1;right:20px;bottom:18px;left:20px} .hero-side-story .cat-pill{margin:0 0 7px;background:transparent;color:#7CE4DF;padding:0;border-radius:0;font-size:10px} .hero-side-story h3{margin:0;color:#fff;font-family:'Poppins',sans-serif;font-size:20px;font-weight:700;line-height:1.16;letter-spacing:-.035em;text-wrap:balance} .hero-side-story:focus-visible{outline:3px solid #F5C518;outline-offset:3px} @media(max-width:780px){ .frontier-mainbar .head{min-height:66px;padding:11px 20px;gap:12px} .frontier-mainbar .logo{justify-content:center} .frontier-mainbar .logo img{height:28px} /* D196: sobrou daqui o botao UNICO antigo (padding:0 12px + gap:6px), de antes do seletor virar segmentado em 01/09. No segmentado o segmento preenchido precisa encostar nas quatro bordas internas da casca pro overflow:hidden dela recortar ele no formato da pilula — com padding e gap, sobrava folga navy em volta e o canto do branco ficava reto. padding/gap voltam a 0, iguais ao resto dos breakpoints; min-width e justify-content continuam servindo pra centralizar a casca quando ela encolhe. */ .frontier-mainbar .lang-btn{min-width:44px;width:auto;padding:0;justify-content:center;gap:0} .frontier-mainbar .lang-btn svg{width:19px;height:14px} .frontier-services{display:grid;grid-template-columns:1.26fr 1fr 1fr;gap:6px;overflow:visible;padding:6px 12px} .frontier-services.sem-cambio{grid-template-columns:1.26fr 1fr} .frontier-services.sem-clima{grid-template-columns:1.26fr 1fr} .frontier-services.sem-cambio.sem-clima{grid-template-columns:1fr} .frontier-card{min-width:0;min-height:60px;padding:7px 8px} .frontier-clima,.frontier-cambio{position:relative;min-width:0;gap:0} .frontier-clima > span:last-child,.frontier-cambio > span:last-child{width:100%;padding-right:20px;box-sizing:border-box} .frontier-label{font-size:10px} .frontier-clock-grid{gap:7px} .frontier-clock-grid > div + div{padding-left:7px} .frontier-clock-grid b,.frontier-value{font-size:16px} .frontier-clock-grid span,.frontier-note{margin-top:2px;font-size:9px} .frontier-city-full{display:none!important} .frontier-city-short{display:inline!important} .frontier-txt-full{display:none} .frontier-txt-short{display:inline} .frontier-weather-icon,.frontier-cambio-coin{position:absolute;top:7px;right:7px;width:20px;height:20px} .frontier-cambio-coin{font-size:14px} .frontier-services{display:none} /* Os tres blocos (hora, temperatura, cotacao) sao todos white-space:nowrap e nenhum encolhe: a barra fecha em 390px no PT e ja estourava no ES ANTES desta rodada (medido na main: scrollWidth 395 no /es/ contra 390 no /, porque "Previsao" vira "Pronostico" e "Cotacao" vira "Cotizacion"). O piso de 10px no rotulo somaria mais 4px, entao o gap interno de cada bloco desce de 3 pra 2 e o separador das horas perde a margem — devolve o que a fonte tomou, sem tocar no ES, que precisa de decisao de texto (ver relatorio). */ .frontier-services-lite{display:flex;align-items:stretch;padding:0 8px} .frontier-fx{display:flex;align-items:center;gap:2px;text-decoration:none;color:#fff;position:relative;padding:9px 4px;min-width:0} .frontier-fx+.frontier-fx::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:18px;background:rgba(255,255,255,.16)} .frontier-fx-val{font-family:'Poppins',sans-serif;font-weight:700;font-size:12.5px;white-space:nowrap;color:#fff;display:inline-block;max-width:72px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;flex-shrink:0} .frontier-fx-link{flex-shrink:0} .frontier-fx-sep{color:rgba(255,255,255,.35);font-size:11px;margin:0} .frontier-fx-link{color:#A6E3E0;font-size:10px;font-weight:700;white-space:nowrap;margin-left:2px} .frontier-fx-clocks{flex:1.22;min-width:0} .frontier-fx-clima,.frontier-fx-cambio{flex:1;min-width:0} .frontier-fx-coin{width:13px;height:13px;border-radius:50%;background:#18AF3B;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:none;color:#fff} .frontier-fx-flag{flex:none;border-radius:2px} .frontier-fx-weather{width:14px;height:14px;flex:none;color:#FFD44E} .frontier-fx:focus-visible{outline:2px solid #F5C518;outline-offset:2px;border-radius:4px} .navbar .wrap{gap:22px;min-height:58px} .navbar a{font-size:13px} section.hero-carousel{display:block;padding:16px 0 22px} .hero-main-carousel{min-height:420px;border-radius:14px} .hero-slide-copy{right:18px;bottom:68px;left:18px} .hero-slide-copy h1,.hero-slide-copy h2{font-size:25px} .hero-slide-copy h1.tit-medio,.hero-slide-copy h2.tit-medio{font-size:23px} .hero-slide-copy h1.tit-curto,.hero-slide-copy h2.tit-curto{font-size:21px;line-height:1.12} .hero-slide-copy .by{margin-top:12px;font-size:10px} .hero-carousel-controls{display:flex;right:12px;bottom:11px;gap:4px} .hero-carousel-arrow{width:40px;height:40px} .hero-side-rail{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:10px;margin-top:12px} .hero-side-story{min-height:150px;border-radius:12px} .hero-side-story-copy{right:12px;bottom:11px;left:12px} .hero-side-story h3{font-size:14px} .hero-side-story .cat-pill{font-size:10px} } @media(max-width:780px){ .pg-materia .frontier-mainbar{background:transparent} .pg-materia .frontier-strip,.pg-materia .navbar{display:none} } /* BARRA FINA DO TOPO EM TELA ESTREITA (D205). No /es/ ela vazava 5px (scrollWidth 395 num viewport de 390, defeito anterior a esta branch): "Pronostico →" e "Cotizacion →" sao ~10px mais largos que "Previsao →" e "Cotacao →" e o bloco da cotacao nao cabia. A causa nao e falta de espaco na barra — os tres blocos somam 331px de conteudo em 382px uteis. E o `flex:1.22 / 1 / 1` acima, que e `flex-basis:0`: cada bloco recebe uma FATIA FIXA da barra, sem olhar o que tem dentro. As horas ficavam com 144px pra ocupar 101 e a cotacao com 119 pra ocupar 127. Aqui a base passa a ser o conteudo (`flex-basis:auto`) e os mesmos 1,22/1/1 distribuem so a SOBRA — nenhum texto muda, nenhuma fonte encolhe (ja estao no piso de 10px do doc 20), nada ganha reticencia, e padding, gap e separador ficam exatamente como estavam. So abaixo de 400px: de 414px pra cima a barra ja fechava e continua identica. Medido (Chromium, iPhone 14 emulado), scrollWidth PT/ES: 390px 390/395 -> 390/390; 375px 375/385 -> 375/375; 360px 363/376 -> 360/360; 320px 336/347 -> 320/326. De 414 pra cima nao mudou nada (414/414 e 430/430, antes e depois). Sobra so o espanhol em 320px, 6px: la os 331px de conteudo nao entram em 304px uteis de jeito nenhum, e a saida seria rotulo espanhol mais curto — decisao de texto, nao de CSS. Nenhum aparelho em uso hoje tem 320px de largura logica. */ @media(max-width:400px){ .frontier-fx-clocks{flex:1.22 1 auto} .frontier-fx-clima,.frontier-fx-cambio{flex:1 1 auto} } /* capa 4:5 (D206) — bloco proprio, no fim, de proposito: ele so REVOGA, pra capa-arte, tres regras calibradas pra FOTO que ficam logo acima (a altura fixa do quadro imersivo, o parallax e o dissolve do pe). A classe `article-cover--arte` sai do render (motor/render/materia.mjs) e so existe quando a capa e arte gerada; foto de verdade nao casa nenhum destes seletores e continua exatamente como estava. POR QUE REVOGAR. A arte tem o dado DESENHADO dentro. No celular o quadro de foto e 476x527 e a arte 1200x630 perdia 52,6% da largura ("200 vagas" virava "vagas"); o `` do render troca pela gemea 4:5, e sem `aspect-ratio:4/5` aqui o quadro continuaria 0,90 e cortaria 11,4% dela. O parallax (`scale:1.22` no inicio da rolagem) e outro recorte por cima desse — numa foto ele da profundidade, numa arte com numero ele come letra. E o dissolve, que apaga os 40% de baixo do quadro, apagaria o rodape da arte, onde moram o credito da fonte e a marca: pra ela o esmaecimento fica nos ultimos 10%, e o desfoque do pe sai. */ @media(max-width:780px){ .pg-materia .article-cover--arte img{aspect-ratio:4/5;height:auto;object-fit:cover;animation:none;scale:1} .pg-materia .article-cover--arte{ -webkit-mask-image:linear-gradient(180deg,#000 90%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,#000 90%,rgba(0,0,0,0) 100%)} .pg-materia .article-cover--arte::after{display:none} }