/* 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:var(--bg);color:var(--texto);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.4} 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} /* 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{background:#000;color:#fff;font-size:12px;padding:6px 20px;text-align:center} .preview-bar b{color:#FFD27A} .brand-bar{height:8px;background:linear-gradient(90deg,var(--azul-claro) 0%,var(--azul) 55%,var(--azul-escuro) 100%)} /* TOPO ticker */ /* 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;font-weight:500} .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:7px;background:#fff;border:1px solid var(--linha);border-radius:999px;padding:5px 11px 5px 8px;color:var(--terra);font-weight:700;font-size:12px;text-decoration:none;transition:all .2s;cursor:pointer} .temp-pill:hover{background:var(--bg);color:var(--terra);transform:translateY(-1px)} .temp-pill svg{width:18px;height:18px;filter:drop-shadow(0 0 6px rgba(255,200,87,.35))} .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} /* Âncora do clima — espaço pro header sticky */ #clima{scroll-margin-top:130px} /* HEADER em uma linha só: logo + menu + busca + idioma; some no scroll down */ 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} .menu{display:flex;gap:0;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;overflow-x:auto;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="compras"]:hover{color:var(--c-compras);border-color:var(--c-compras)} .menu a[data-c="gastronomia"]:hover{color:var(--c-gastronomia);border-color:var(--c-gastronomia)} .menu a[data-c="cotidiano"]:hover{color:var(--c-cotidiano);border-color:var(--c-cotidiano)} .menu a[data-c="esporte"]:hover{color:var(--c-esporte);border-color:var(--c-esporte)} .menu a[data-c="fronteira-viva"]:hover{color:var(--c-fronteira-viva);border-color:var(--c-fronteira-viva)} .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). Ganhou globo e virou pilula de contorno visivel. A borda era --linha, que da 1,24:1 no branco: contorno de componente pede 3:1, entao passou pra --suave (5,61:1). E o alvo de toque tinha 36px de altura contra os 44 que o resto do header usa. NAO tem chevron: no site publicado o botao ja e um link direto pra outra lingua (motor/seo/meta.mjs), entao seta pra baixo prometeria uma gaveta que nao existe. */ /* 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} /* Hamburger (mobile/tablet) */ /* 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): com o menu fora desta linha, a busca vira a peca do meio do cabecalho em vez de um campo encolhido no canto. */ .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} } /* House ad de 64px (17, secao 5 item 1). Ele nao e enfeite: a etapa 1 colapsou os slots vazios porque caixa tracejada e pior que nada, e este bloco e o que ocupa o lugar com algo REAL enquanto nao ha anunciante. Altura fixa reservada, entao no dia em que o AdSense entrar o layout nao se mexe (D034, cerca 1). */ /* Hero de 390px com o texto SOBRE a foto (17, secao 5 item 2). Antes o texto ficava ABAIXO da imagem, o que empurrava tudo pra baixo e desperdicava a foto grande — no celular a manchete comecava depois de 390px de imagem. O gradiente navy por tras do texto nao e estetica: sem ele o branco sobre foto clara reprova contraste em qualquer medicao. Com ele, o texto tem fundo garantido. */ /* Banda Fronteira Viva em navy com kicker mint (17, secao 5 item 6). A editoria e o acervo evergreen do portal; a banda escura a separa do fluxo de noticia sem precisar de titulo maior. O kicker vai em mint porque o par mint/navy mede 7,85:1 (D064). */ .banda-viva{background:var(--navy);margin:34px 0 0;padding:26px 0 30px;border-radius:14px} .banda-viva .section-title{margin:0 0 18px;padding:0 24px} .banda-viva .section-title h2{color:#fff} .banda-viva .section-title .meta{color:#CDD6F5} .banda-viva .micro-row{padding:0 24px} .banda-viva .micro-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)} .banda-viva .micro-card h4 a,.banda-viva .micro-card h3 a{color:#fff} .banda-viva .micro-card h4 a:hover,.banda-viva .micro-card h3 a:hover{color:var(--mint)} /* CONTRASTE, segunda passada (05/09, D205). A correcao de 01/09 trocou o mint por --teal-tinta contando um fundo BRANCO — mas dentro da banda o card nao e branco: `.banda-viva .micro-card` pinta rgba(255,255,255,.06) sobre o navy, o que resolve em rgb(25,41,73). Medido no navegador, --teal-tinta ali da 2,80:1 — pior do que antes de "consertar". Sobre esse fundo quem passa e o mint: 8,7:1. O rotulo dos OUTROS blocos (Cotidiano azul, Compras verde) fica como esta: aquele si e sobre branco e ja passa. */ .banda-viva .micro-card .ic{color:var(--mint)} @media(max-width:640px){ .banda-viva{border-radius:0;margin-left:-20px;margin-right:-20px;padding:22px 0 24px} .banda-viva .section-title,.banda-viva .micro-row{padding:0 20px} } .featured{position:relative} .featured a.cover{display:block;position:relative} /* A foto volta aos 390px fixos, o tamanho de antes da 8586798. Aquele commit trocou 390 fixos por "preenche o bloco" pra consertar o texto que caia embaixo da foto. So que quem manda na altura da linha do grid e a coluna vizinha (528px), entao a capa passou a ser AMPLIADA em 138px e cortada nas laterais pelo object-fit. Em capa que e arte de 1200x630 com texto embutido, isso decepa o texto da propria peca: sobrava "DE", "R DE", "HA". O texto do hero continua sobre a foto sem precisar esticar a imagem, porque o alinhamento do grid virou start e a coluna da direita passou a medir os mesmos 390px (regra no fim do bloco do hero). */ .featured a.cover img{height:390px;object-fit:cover;border-radius:10px;display:block;width:100%} .featured .body{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 22px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,rgba(37,45,92,0) 0%,rgba(27,36,69,.62) 42%,rgba(20,26,54,.93) 100%);color:#fff} .featured .body h1 a{color:#fff} .featured .body h1 a:hover{color:var(--mint)} .featured .body p.dek{color:#E4E9F7;margin-top:8px;max-width:52ch} .featured .body .by{color:#CDD6F5;margin-top:10px} .featured .cat-pill{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px)} @media(max-width:640px){ /* Esta regra pedia 300px e nunca valeu: o min-height:390px da regra base anulava. Na pratica o mobile sempre renderizou 390px. Com o min-height fora, 300px passaria a valer de verdade e o texto do hero vazaria por cima do topo da foto, porque o .body e absoluto e cresce pra cima. Fica em 390px, que e o que sempre esteve no ar. */ .featured a.cover img{height:390px} .featured .body{padding:18px 16px 16px} } /* A foto da manchete AFASTA enquanto a home rola, como a capa da materia (D127). O quadro passa a cortar, e o raio muda de lugar pra ele. Razoes no DECISIONS.md. */ @media(max-width:640px){ .featured a.cover{overflow:hidden;border-radius:10px} .featured a.cover img{border-radius:0} @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline:scroll()){ .featured a.cover img{ animation:manchete-afasta linear both; animation-timeline:scroll(root block); animation-range:0 450px; } @keyframes manchete-afasta{ from{scale:1.22} to{scale:1.05} } } } } /* O padding de baixo e o respiro entre a faixa branca da publicidade e o comeco do conteudo (pedido do Jose, 14/08: o bloco terminava colado na cor das noticias). */ .housead{background:var(--bg-card);padding:14px 0 24px} .housead .rotulo{font-family:'Poppins',sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--suave);margin-bottom:6px} .housead .box{height:64px;border-radius:12px;background:var(--cinza);border:1px solid var(--linha);color:var(--ink);display:flex;align-items:center;gap:14px;padding:0 18px 0 22px;position:relative;overflow:hidden;text-decoration:none} .housead .box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--fita)} .housead b{font-family:'Poppins',sans-serif;font-size:18px;font-weight:700} .housead span.sub{font-size:12.5px;color:var(--suave)} .housead .cta{margin-left:auto;background:var(--navy);color:#fff;font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:8px;white-space:nowrap} .housead .box:hover .cta{background:var(--teal-tinta)} @media(max-width:640px){ .housead .box{height:auto;padding:14px 16px;flex-wrap:wrap;gap:8px} .housead span.sub{display:none} .housead .cta{margin-left:0} } /* ── Navbar de PILULAS (mockup do Jose, 14/08 — substitui a barra navy da secao 5 item 0 do 17). Cada editoria vira um botao branco de contorno com icone; a ativa ganha fundo mint claro. A faixa continua full-width branca e o conteudo alinha pelo .wrap, como antes. `white-space:nowrap` segue: "Fronteira Viva" nunca quebra. */ .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)} .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} .menu.is-open .menu-search-inline{display:flex;padding:10px 20px;border-bottom:1px solid var(--linha-2)} .lang-btn{padding:0;font-size:12px} .lang-seg{padding:0 11px} .logo img{height:26px} } .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="conquistas"]:hover{color:var(--c-conquistas);border-color:var(--c-conquistas)} .menu a[data-c="economia"]:hover{color:var(--c-economia);border-color:var(--c-economia)} .menu a[data-c="cultura"]:hover{color:var(--c-cultura);border-color:var(--c-cultura)} .menu a[data-c="educacao"]:hover{color:var(--c-educacao);border-color:var(--c-educacao)} .menu a[data-c="saude"]:hover{color:var(--c-saude);border-color:var(--c-saude)} .menu a[data-c="fronteira"]:hover{color:var(--c-fronteira);border-color:var(--c-fronteira)} .menu a[data-c="compras"]:hover{color:var(--c-compras);border-color:var(--c-compras)} .menu a[data-c="gastronomia"]:hover{color:var(--c-gastronomia);border-color:var(--c-gastronomia)} .menu a[data-c="cotidiano"]:hover{color:var(--c-cotidiano);border-color:var(--c-cotidiano)} .menu a[data-c="esporte"]:hover{color:var(--c-esporte);border-color:var(--c-esporte)} .menu a[data-c="fronteira-viva"]:hover{color:var(--c-fronteira-viva);border-color:var(--c-fronteira-viva)} /* Ad */ .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::before{content:"Publicidade";position:absolute;top:-9px;left:14px;background:var(--bg);padding:0 6px;color:#9099A8;font-size:9px} .ad-leaderboard{height:110px;margin:22px 0} .ad-billboard{height:280px;margin:28px 0} .ad-rectangle{height:250px} .ad-native{height:130px} /* Section title */ /* Widget de cambio da barra lateral. O numero de USD/BRL e o protagonista, a variacao entra com seta em SVG (regra de 01/09: zero emoji na interface) e a minisserie e desenhada no build por motor/render/cambio-home.mjs, entao nao pisca nem empurra layout. O CTA principal aponta pra /cambio/, que e a pagina com o grafico; o guia de lojistas virou link de apoio. */ .cambio-widget .cambio-topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px} .cambio-widget .cambio-topo h4{margin:0} .cambio-widget .cambio-fonte{font-size:11.5px;font-weight:600;color:var(--suave);white-space:nowrap} .cambio-widget .cambio-destaque{display:block;text-decoration:none;color:inherit;padding:2px 0 6px;border-radius:8px} .cambio-widget .cambio-destaque:hover .cambio-linha-valor strong{color:var(--teal-tinta)} .cambio-widget .cambio-par{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--suave)} .cambio-widget .cambio-linha-valor{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .cambio-widget .cambio-linha-valor strong{font-family:'Inter',sans-serif;font-weight:800;font-size:30px;line-height:1.15;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .15s ease} .cambio-widget .cambio-var{display:inline-flex;align-items:center;gap:3px;font-family:'Inter',sans-serif;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;padding:2px 7px;border-radius:999px} .cambio-widget .cambio-var.sobe{color:var(--c-compras);background:rgba(22,122,65,.10)} .cambio-widget .cambio-var.cai{color:var(--c-gastronomia);background:rgba(194,42,91,.10)} .cambio-widget .cambio-spark{display:block;width:100%;height:56px;margin:2px 0 14px;overflow:visible} .cambio-widget .spark-linha{fill:none;stroke:var(--teal-tinta);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .cambio-widget .spark-area{fill:rgba(0,122,121,.09);stroke:none} .cambio-widget .spark-fim{fill:var(--teal-tinta);stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke} .cambio-widget .cambio-lista{list-style:none;margin:0 0 12px;padding:0;border-top:1px solid var(--linha-2)} .cambio-widget .cambio-lista li{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--linha-2);font-size:13px} .cambio-widget .cambio-lista li:last-child{border-bottom:none} .cambio-widget .cambio-lista span{color:var(--suave);font-weight:600;letter-spacing:.04em} .cambio-widget .cambio-lista b{font-family:'Inter',sans-serif;font-weight:800;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums} .cambio-widget .cambio-cta{display:inline-block;font-size:12.5px;font-weight:700;color:var(--teal-tinta);text-decoration:none} .cambio-widget .cambio-cta:hover{text-decoration:underline} .cambio-widget .cambio-ctas{display:flex;flex-direction:column;align-items:flex-start;gap:2px} .cambio-widget .cambio-cta-apoio{font-size:12px;font-weight:600;color:var(--suave);text-decoration:none} .cambio-widget .cambio-cta-apoio:hover{color:var(--teal-tinta);text-decoration:underline} /* 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} /* A nuvem do clima seguia derivando com "reduzir movimento" ligado — medido no navegador com reducedMotion=reduce (D205). So a nuvem: o resto do bloco do clima fica como esta, por decisao do Jose. O seletor leva o #weather-fx de proposito: `.cloud{animation:cloud-drift}` mora ~200 linhas ABAIXO desta media query, e entre dois seletores de mesmo peso quem vem depois ganha — com `.cloud` puro a regra media zero (conferido no navegador). O id poe o peso acima e o pai e sempre esse: as nuvens nascem por JS dentro de #weather-fx. */ #weather-fx .cloud{animation: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} } /* Títulos-editoria: Guias e Agenda usam a mesma régua visual — Poppins de 46px no máximo e a última palavra em Crimson Pro compensada a 1,25em. A cor da palavra saiu do laranja e virou --contraste-claro em 05/09 (D205), o mesmo token do h1 do hub de guias: o recurso passa a ter UMA cor no fundo claro. */ .titulo-guias-home{margin:46px 0 22px} .titulo-guias-home h2{font-family:'Poppins',sans-serif;font-weight:900;font-size:clamp(29px,4vw,46px);letter-spacing:-.055em;color:var(--navy);line-height:.96} .titulo-guias-home h2 .fonte-contraste{color:var(--contraste-claro);font-size:1.25em;font-weight:700;letter-spacing:-.065em} .titulo-guias-home .meta{display:block;margin-top:7px;font-size:14px;color:var(--suave)} @media(max-width:700px){.titulo-guias-home h2{font-size:32px}} /* Manifesto: banda navy entre o conteudo e o rodape (mockup do Jose, 14/08). A chamada institucional e a do manual (doc 20, "Chamada institucional"); "Bora" vai em Crimson Pro teal (teal/navy medido: 5,99:1) e o fio termina no 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} } /* Títulos de faixa: uma única escala em toda a capa. O destaque vem do selo, não de uma barra decorativa solta à esquerda. */ .section-title{display:flex;align-items:center;gap:10px;margin:40px 0 20px} .section-title h2{font-size:18px;line-height:1.2;color:var(--terra);font-weight:800;letter-spacing:-.02em} .section-title .meta{margin-left:auto;font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.06em} /* Selos editoriais: dão a cada faixa uma assinatura visual, sem disputar com o conteúdo. */ .section-title.section-title-pill{gap:10px} .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)} .banda-viva .section-title.section-title-pill h2{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:#fff;box-shadow:none} /* ====== HERO ESTILO G1/WSJ ====== */ .hero{display:grid;grid-template-columns:1fr;gap:20px;padding:18px 0 14px} @media(min-width:1024px){ .hero{grid-template-columns:1.75fr 1fr} } /* Featured card: image full top + heavy headline below (estilo G1) */ .featured{background:#fff;border:1px solid var(--linha);border-radius:10px;overflow:hidden;box-shadow:var(--sombra);transition:box-shadow .25s;display:flex;flex-direction:column} .featured:hover{box-shadow:var(--sombra-hover)} .featured a.cover{display:block;position:relative;overflow:hidden} .featured img{width:100%;height:520px;object-fit:cover;transition:transform .8s} .featured a.cover:hover img{transform:scale(1.03)} .featured .body{padding:26px 30px 30px} .cat-pill{display:inline-flex;align-items:center;gap:6px;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} .cat-pill.compras{background:var(--c-compras)} .cat-pill.cotidiano{background:var(--c-cotidiano)} .cat-pill.gastronomia{background:var(--c-gastronomia)} .cat-pill.esporte{background:var(--c-esporte)} .cat-pill.fronteira-viva{background:var(--c-fronteira-viva)} .featured h1{font-size:clamp(28px,6.4vw,48px);line-height:1.0;color:var(--terra);font-weight:700;margin-top:14px;letter-spacing:-.04em} .featured h1 a:hover{color:var(--azul)} /* Degrau por comprimento do titulo (ver heroTitleTier em motor/render/home.mjs). O card tem 390px fixos em toda largura de tela (nao so mobile), entao sem isso uma manchete longa cresce mais alta que o card e o overflow:hidden do .featured corta a primeira linha por cima. tit-cheio fica com o clamp de cima (nenhum titulo do site cai nela hoje — o mais curto tem 67 char — mas fica pronta). */ .featured h1.tit-medio{font-size:clamp(22px,5.2vw,34px)} .featured h1.tit-curto{font-size:clamp(19px,4.4vw,28px)} /* Titulo >60 char (tit-medio e tit-curto — na pratica, quase todo titulo real: o mais curto do site hoje tem 67) sozinho ja cabe no card (D085), mas cabe DEMAIS: com o dek junto sobrava 15-22% de foto visivel em desktop — o Jose pediu de volta a foto como contexto. O dek some nesses dois degraus; titulo + byline contam a historia sozinhos. Só tit-cheio (≤60 char, nenhum titulo real hoje) mantém o dek. */ .featured h1.tit-medio ~ p.dek, .featured h1.tit-curto ~ p.dek{display:none} .featured p.dek{margin-top:14px;font-family:'Poppins',sans-serif;font-weight:600;font-size:18px;color:#3a3a3a;max-width:64ch;line-height:1.5} .featured .by{margin-top:16px;font-size:12px;color:#777;text-transform:uppercase;letter-spacing:.06em;display:flex;gap:10px;align-items:center} .featured .by .live{display:inline-flex;align-items:center;gap:5px;color:var(--c-saude);font-weight:800} .featured .by .live::before{content:"";width:8px;height:8px;background:var(--c-saude);border-radius:50%;animation:pulse 1.5s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} /* Side image-overlay cards (estilo da sua referência) */ .side-stack{display:grid;grid-template-rows:1fr 1fr;gap:18px;height:100%} .img-overlay{position:relative;border-radius:10px;overflow:hidden;box-shadow:var(--sombra);min-height:255px;display:block;transition:box-shadow .25s} .img-overlay:hover{box-shadow:var(--sombra-hover)} /* Hero de duas colunas: a linha do grid para de esticar e as duas colunas medem os mesmos 540px da foto. Precisa vir DEPOIS de .side-stack e .img-overlay, senao o height:100% e o min-height:255px de cima ganham por ordem. 540px (nao mais 390px) e pedido do Jose comparando com o G1: o destaque ficava pequeno demais em desktop, e os cards da direita — refens do mesmo numero via side-stack — junto. Só ≥1024px; mobile continua 390px (aprovado, intocado). */ @media(min-width:1024px){ .hero{align-items:start} .featured a.cover img{height:540px} .side-stack{height:540px} .side-stack .img-overlay{min-height:0} /* Degrau de fonte recalibrado pro card maior (mesmo motivo do height acima). Os clamps de linha 350-351 dao conta do mobile/tablet; aqui, com o card maior, cabe subir pra ~46/40px sem repetir o erro da D085 (cabia, mas cabia DEMAIS — o dek ja saiu daqueles dois degraus e continua fora aqui). Calibrado contra o titulo mais longo (129 char, ACEPP) e o mais curto (67, Centro Juan Pablo II) do site. */ .featured h1.tit-medio{font-size:46px} .featured h1.tit-curto{font-size:40px} } .img-overlay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s} .img-overlay:hover img{transform:scale(1.04)} .img-overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.30) 60%,rgba(0,0,0,.85) 100%);pointer-events:none} .img-overlay .ov-body{position:absolute;left:20px;right:20px;bottom:18px;color:#fff;z-index:2} .img-overlay .ov-cat{font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.92;margin-bottom:8px} .img-overlay h3,.img-overlay h2{font-family:'Poppins',sans-serif;font-weight:700;font-size:22px;line-height:1.18;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.4)} .img-overlay .ov-cat .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:6px;vertical-align:middle} /* Titulares de la frontera (faixa de 4 micro abaixo do hero) */ .micro-row{display:grid;grid-template-columns:1fr;gap:14px;margin-top:12px} @media(min-width:680px){ .micro-row{grid-template-columns:repeat(2,1fr)} } @media(min-width:1024px){ .micro-row{grid-template-columns:repeat(4,1fr)} } /* Equilibrio fonte × imagem (pedido do Jose, 14/08): o titulo de 18px sobre uma foto de 110×82 fazia o card ler como texto com um selo perdido do lado. Titulo desce um degrau (manual doc 20: card fica na faixa 15-18px) e a foto cresce e cobre a altura do card, entao os dois lados pesam parecido. */ .micro-card{background:#fff;border:1px solid var(--linha);border-radius:10px;padding:12px;display:grid;grid-template-columns:1fr 122px;gap:14px;align-items:center;box-shadow:var(--sombra);transition:box-shadow .2s} .micro-card:hover{box-shadow:var(--sombra-hover)} .micro-card > div:first-child{padding:4px 0 4px 4px} .micro-card .ic{font-family:'Poppins',sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px} .micro-card h4,.micro-card h3{font-family:'Poppins',sans-serif;font-weight:600;font-size:15.5px;line-height:1.3;color:var(--terra)} /* Alvo de toque >=28px (D194, auditoria de 04/09): o link do titulo mede 15.5px*1.3 = ~20px de altura clicavel em titulo de uma linha (a foto ao lado nao e link, entao o alvo real e so o texto). Mesma receita do `.event-title a` (regra da casa, D098): `inline-block` deixa o padding valer como area de clique; a margem negativa do mesmo tamanho cancela o espaco extra no fluxo, entao a altura visual da linha (e o grid `1fr 122px` com a foto ao lado) nao muda. Titulo de duas ou mais linhas ja passava do piso sozinho e continua do mesmo jeito, so ganha a mesma folga extra nas pontas. */ .micro-card h4 a,.micro-card h3 a{display:inline-block;padding:5px 0;margin:-5px 0} .micro-card h4 a:hover,.micro-card h3 a:hover{color:var(--azul)} .micro-card img{width:122px;height:110px;object-fit:cover;border-radius:8px} .micro-card.is-publi{background:var(--cinza);border-color:var(--linha);border-left:3px solid var(--suave)} .micro-card.is-publi .publi-tag{margin-bottom:6px} /* CLIMA CSS: início (compartilhado com a página /clima/, ver motor/render/clima.mjs) */ /* ══════════ BLOCO NOVO DA HOME ══════════ */ .climate-row{display:grid;grid-template-columns:1fr;gap:18px;margin:22px 0 10px} @media(min-width:980px){.climate-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}} /* Card grande (herói) — o card inteiro é um botão que abre a previsão completa */ .wx-hero{position:relative;text-align:left;border-radius:14px;padding:22px 24px;color:#fff;overflow:hidden;box-shadow:var(--sombra);min-height:200px;width:100%;display:flex;flex-direction:column;transition:transform .2s,box-shadow .25s} .wx-hero:hover{transform:translateY(-2px);box-shadow:var(--sombra-hover)} .wx-bg{position:absolute;inset:0;z-index:0;transition:background 1s} [data-w="clear"] .wx-bg{background:linear-gradient(160deg,#2E7BD7 0%,#1A4FA8 55%,#0E2D6E 100%)} [data-w="partly"] .wx-bg{background:linear-gradient(160deg,#5A8FD8 0%,#2E5DAE 60%,#1A3F84 100%)} [data-w="cloudy"] .wx-bg{background:linear-gradient(160deg,#6B7A92 0%,#3F4D66 60%,#222B3D 100%)} [data-w="rainy"] .wx-bg{background:linear-gradient(160deg,#3A4459 0%,#1F2536 60%,#0E1320 100%)} [data-w="storm"] .wx-bg{background:linear-gradient(160deg,#222B3D 0%,#0E1320 60%,#000 100%)} [data-w="fog"] .wx-bg{background:linear-gradient(160deg,#8A95A8 0%,#5C6678 60%,#3D4659 100%)} [data-w="night"] .wx-bg{background:linear-gradient(160deg,#1C2B55 0%,#0F1B3A 55%,#070D1F 100%)} .wx-hero::before{content:"";position:absolute;top:-60px;right:-40px;width:280px;height:280px;background:radial-gradient(circle,rgba(255,236,180,.18) 0%,transparent 65%);pointer-events:none;z-index:1} .wx-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .cloud{position:absolute;width:90px;height:30px;background:rgba(255,255,255,.08);border-radius:50px;filter:blur(2px);animation:cloud-drift linear infinite} .cloud::before,.cloud::after{content:"";position:absolute;background:rgba(255,255,255,.08);border-radius:50%;filter:blur(2px)} .cloud::before{width:38px;height:38px;top:-16px;left:14px}.cloud::after{width:30px;height:30px;top:-10px;right:18px} @keyframes cloud-drift{from{transform:translateX(-120px)}to{transform:translateX(120%)}} .sun-glow{position:absolute;top:18px;right:24px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,#FFE066 0%,rgba(255,224,102,.6) 30%,transparent 70%);animation:sun-pulse 3.5s ease-in-out infinite} @keyframes sun-pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.15);opacity:1}} .wx-content{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;gap:6px 16px;flex:1} .wx-title{grid-column:1;grid-row:1} .wx-title h3{font:700 24px/1.1 'Poppins',sans-serif;letter-spacing:-.02em;margin:0;color:#fff} .wx-title p{font-size:13px;opacity:.8;margin:4px 0 0;display:flex;gap:6px;align-items:center} .wx-title p svg{width:13px;height:13px;flex:none} .wx-temp{grid-column:2;grid-row:1;font:200 76px/1 'Inter',sans-serif;letter-spacing:-.045em;text-align:right;color:#fff} .wx-temp small{font-size:15px;font-weight:500;letter-spacing:0;display:block;margin-top:2px;opacity:.85} .wx-cond{grid-column:1;grid-row:3;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500} .wx-cond svg{width:26px;height:26px} .wx-mm{grid-column:2;grid-row:3;text-align:right;font-size:13px;opacity:.92;display:flex;gap:14px;justify-content:flex-end;align-items:center} .wx-mm b{font-weight:600} .wx-resumo{grid-column:1/-1;grid-row:4;margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);font-size:14px;line-height:1.45;opacity:.95;max-width:56ch;text-wrap:pretty} .wx-cta{grid-column:1/-1;grid-row:5;font:600 12px/1 'Poppins',sans-serif;color:var(--mint);display:flex;align-items:center;gap:6px;margin-top:10px} .wx-cta::after{content:"→"} .wx-alerta-chip{vertical-align:middle;margin-left:10px;font:700 10px/1 'Poppins',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#3B1F00;background:#FFD44E;border-radius:999px;padding:6px 10px;display:flex;align-items:center;gap:6px} .wx-alerta-chip[hidden],.alertas[hidden]{display:none} .wx-alerta-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:#3B1F00} .wx-alerta-chip{display:inline-flex} /* Selo por nível de severidade (D209, INMET ao vivo): amarelo é o padrão acima (Perigo Potencial); laranja (Perigo) e vermelho (Grande Perigo) escurecem o texto ou trocam pra branco, sempre AA 4,5:1. */ .wx-alerta-chip.laranja{background:#F28C28;color:#3B1F00} .wx-alerta-chip.laranja::before{background:#3B1F00} .wx-alerta-chip.vermelho{background:#D9531E;color:#fff} .wx-alerta-chip.vermelho::before{background:#fff} /* Modo leve (comparação): sem a lista de dias na home, herói mais baixo */ #dias-home{display:none} /* Painel interativo (direita) */ .wx-panel{background:#E9F4F0;border:1px solid #CFE3DA;border-radius:14px;padding:18px 20px 16px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:14px;min-width:0} .wx-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:3px solid var(--teal-tinta)} .wx-head h4{font:700 13px/1.2 'Poppins',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-tinta);margin:0} .wx-head h4 span{font:600 12px 'Inter',sans-serif;letter-spacing:0;text-transform:none;color:var(--suave);margin-left:6px} /* Reset do