/* ============================================================ Alves & Freire — páginas internas e movimento Depende de af.css e componentes.css. Nada aqui altera o que já foi aprovado na home; só acrescenta o que as páginas internas precisam. ============================================================ */ /* ---------- transição entre páginas ---------- Movimento de navegação: a página nova entra por cima da anterior com um deslocamento curto. Discreto de propósito — o registro é institucional. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: sai .22s cubic-bezier(.4,0,1,1) both; } ::view-transition-new(root) { animation: entra .34s cubic-bezier(.2,.7,.2,1) both; } @keyframes sai { to { opacity: 0; transform: translateY(-6px); } } @keyframes entra { from { opacity: 0; transform: translateY(10px); } } .marca { view-transition-name: marca; } /* ---------- revelação na rolagem ---------- */ .rev { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); } .rev.visto { opacity: 1; transform: none; } .rev:nth-child(2) { transition-delay: .06s; } .rev:nth-child(3) { transition-delay: .12s; } .rev:nth-child(4) { transition-delay: .18s; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .rev { opacity: 1; transform: none; transition: none; } } /* ---------- caminho de volta ---------- */ .trilha { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: baseline; font-size: var(--peq); color: var(--ink-3); margin-bottom: var(--e4); } .trilha a { text-decoration: none; color: var(--ink-2); } .trilha a:hover { color: var(--acento); } .trilha span[aria-hidden] { color: var(--linha-2); } /* ---------- capa de página interna ---------- */ /* 30/07: "em diversas outras páginas não tem nada de fundo, apenas uma página com fundo branco". Era verdade — a textura só existia na home, e a regra escrita mais abaixo ("teses, equipe e artigos ficam LIMPAS de propósito") vale DENTRO da home, onde faixa vestida e faixa nua se alternam e é o contraste entre as duas que faz as duas lerem. Numa página interna não há alternância: há uma faixa só, e ela sai lisa. A gravura é a mesma da home — já está carregada, não custa um byte. Duas tentativas descartadas antes desta, e as duas por motivo concreto: 1. presa à capa: virava um carimbo no topo e o resto da página voltava a ser branco, que é exatamente a reclamação; 2. camada FIXA na viewport, com `body` transparente para não cobri-la: a página ficava certa (o navegador computava html #F8F8F6 e texto rgb(60,75,81), ~7:1), mas a varredura acusou 14 reprovações de contraste. Não era a página: a subida do verificador procura fundo opaco e para ANTES do — com o body transparente ela terminava sem achar cor nenhuma. Em vez de afrouxar o verificador para acomodar o truque, o truque saiu. Aqui não há fixed, não há máscara e o `body` continua opaco: dois carimbos da gravura em cantos opostos do
, que é a altura do conteúdo. Tamanho declarado em px em vez de `cover` porque `cover` numa página de 5.000px ampliaria o desenho até virar três curvas gigantes. */ main { position: relative; isolation: isolate; } body:not(.pg-home) main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("midia/textura-contornos.svg?v=7741fad7"), url("midia/textura-contornos.svg?v=7741fad7"); background-repeat: no-repeat, no-repeat; background-size: 1500px auto, 1200px auto; background-position: right -320px top -180px, left -280px bottom -140px; opacity: .5; } .capa { padding-block: var(--e7) var(--e6); } .capa h1 { max-width: 20ch; } .capa .lead { margin-top: var(--e4); } .capa__acoes { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e5); } /* ---------- lista de itens internos (acontecimentos, artigos, teses) ---------- */ .lista { border-top: 1px solid var(--linha); } .item { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: var(--e5); padding-block: var(--e5); border-bottom: 1px solid var(--linha); text-decoration: none; color: inherit; position: relative; transition: padding-left .3s cubic-bezier(.2,.7,.2,1); } .item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acento); transform: scaleY(0); transform-origin: top; transition: transform .3s cubic-bezier(.2,.7,.2,1); } .item:hover { padding-left: var(--e4); } .item:hover::before, .item:focus-visible::before { transform: scaleY(1); } .item__idx { color: var(--ink-3); font-size: var(--peq); padding-top: .5em; } .item h3 { color: var(--ink); } /* 05/08: este parágrafo lista TODAS as situações da área, numa linha só — 306 caracteres num caso. `--peq` (15px) é o tamanho de legenda e rótulo, não de um bloco desse comprimento. O piso declarado do projeto é 18px para corpo; 17px aqui é o meio-termo que não reflui a grade das áreas e tira o pior caso do site da faixa de legenda. */ /* 05/08, segunda passada: os 17px acima viraram 18px e nada mudou na tela, porque quem manda aqui é `.item p` — classe + tipo (0,1,1) ganha de `.item__sits` (0,1,0) esteja onde estiver no arquivo. Mudei a regra que não se aplicava e o medidor continuou acusando o mesmo 17px. Mesma armadilha do atributo `style` embutido: o que decide não é a regra mais específica que EU escrevi, é a mais específica que EXISTE. */ .item p { color: var(--ink-2); margin-top: var(--e2); font-size: 18px; line-height: 1.55; } .item__ir { color: var(--ink-3); font-size: var(--peq); white-space: nowrap; padding-top: .7em; transition: color .25s ease, transform .25s ease; } .item:hover .item__ir { color: var(--acento); transform: translateX(3px); } /* ---------- blocos "aplica-se / não se aplica" ---------- */ .criterios { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e7); margin-top: var(--e5); } .criterio ul { margin: var(--e4) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e3); } .criterio li { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--e2); font-size: 17px; color: var(--ink-2); max-width: 54ch; } .criterio li::before { content: ""; width: 10px; height: 10px; margin-top: .45em; border: 1.5px solid var(--acento); } .criterio--nao li::before { border-color: var(--ink-3); background: var(--ink-3); height: 1.5px; margin-top: .85em; border: 0; width: 12px; } /* 05/08: esta coluna era terciária e reprovava a 4,18:1. O erro não é só de cor — é de hierarquia. "Aplica-se se" e "Não se aplica se" servem à mesma decisão: a pessoa lê as duas para saber se o caso é dela. Rebaixar uma dizia, em tinta, que ela importa menos. A diferença entre as colunas fica por conta do marcador (traço x quadrado), que é onde ela sempre esteve. */ .criterio--nao li { color: var(--ink-2); } /* ---------- passos do que fazemos ---------- */ .passos { counter-reset: p; margin-top: var(--e5); display: flex; flex-direction: column; gap: var(--e4); } .passo { counter-increment: p; display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--e4); padding-bottom: var(--e4); border-bottom: 1px solid var(--linha); max-width: 68ch; } .passo:last-child { border-bottom: 0; } .passo::before { content: counter(p, decimal-leading-zero); font-family: 'Newsreader', serif; font-size: 19px; color: var(--ink-3); font-variant-numeric: tabular-nums; } /* ---------- documentos ---------- */ .docs { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); padding: 0; list-style: none; } .docs li { border: 1px solid var(--linha-2); border-radius: var(--raio); padding: var(--e2) var(--e3); font-size: var(--peq); color: var(--ink-2); } /* ---------- caixa de tese vinculada ---------- */ .tesebox { border-left: 2px solid var(--acento); padding-left: var(--e5); margin-top: var(--e5); max-width: 72ch; } /* ---------- formulário ---------- */ .form { display: grid; gap: var(--e4); max-width: 620px; margin-top: var(--e5); } .campo { display: flex; flex-direction: column; gap: var(--e2); } .campo label { font-size: var(--peq); font-weight: 500; } .campo input, .campo textarea, .campo select { font: inherit; font-size: 17px; color: var(--ink); background: var(--paper); border: 1px solid var(--linha-2); border-radius: var(--raio); padding: var(--e3) var(--e4); min-height: 50px; transition: border-color .18s ease, box-shadow .18s ease; } .campo textarea { min-height: 130px; resize: vertical; } .campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgb(20 81 92 / .14); } .campo .ajuda { font-size: var(--peq); color: var(--ink-2); } .consent { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--e3); font-size: var(--peq); color: var(--ink-2); align-items: start; } .consent input { min-height: 0; width: 20px; height: 20px; margin-top: 2px; } /* ---------- aviso e ressalva com o mesmo peso do resultado ---------- */ /* 17px era 1px abaixo do piso declarado no invariante 11 (corpo ≥ 18px, para o público de 50 a 65 anos). Passava despercebido porque 1px não se vê — mas este bloco é justamente o que o leitor PRECISA ler: é a ressalva que diz que o texto não substitui análise do caso. Aparece em 27 páginas. */ .ressalva { border: 1px solid var(--linha-2); border-left: 3px solid var(--ink-2); border-radius: var(--raio); padding: var(--e4) var(--e5); margin-top: var(--e5); font-size: var(--corpo); color: var(--ink-2); max-width: 72ch; } .ressalva strong { color: var(--ink); } /* ---------- ferramenta que ainda não calcula ---------- */ /* Este SAI na página pública, de propósito: quem chegou querendo fazer a conta merece saber que ela ainda não existe, em vez de procurar o botão. O texto é para o visitante — a versão anterior falava em "motor de cálculo no repositório do Agente Tributário", que não quer dizer nada para ele. */ .aviso-obra { border: 1px solid var(--linha-2); border-left: 3px solid var(--acento); border-radius: var(--raio); padding: var(--e4) var(--e5); margin-top: var(--e5); font-size: var(--corpo); color: var(--ink-2); max-width: 72ch; } .aviso-obra b { color: var(--ink); } /* ---------- pendências internas: NUNCA para produção ---------- */ /* Este comentário já dizia isso e não impediu nada: em 05/08 duas notas internas estavam no ar — uma no contato, outra na política de privacidade, esta avisando ao visitante que a política era "minuta, não parecer". Agora o bloco só é gerado com AF_RASCUNHO=1 (ver gerar.py) e `publicar.py` recusa publicar se encontrar um. Intenção escrita não protege; mecanismo sim. */ .pendente { border: 1px dashed var(--ink-3); border-radius: var(--raio); padding: var(--e4); font-size: var(--peq); color: var(--ink-2); margin-top: var(--e4); } .pendente b { color: var(--ink); } /* ---------- pessoa ---------- */ /* 05/08: estava em --linha-2, cor de BORDA usada como tinta de texto: 1,52:1. O "·" separa nome, OAB e função; invisível, os três campos correm juntos. */ .capa .sep { color: var(--ink-3); padding-inline: 2px; } .pessoa-capa { display: grid; grid-template-columns: 260px 1fr; gap: var(--e7); align-items: start; } /* mesmo tratamento dos cartões: sem painel, com chão e aresta dissolvida */ .pessoa-capa .pessoa__foto { aspect-ratio: 3/4; position: relative; } .pessoa__foto::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2px; height: 16px; background: radial-gradient(ellipse at center, rgb(16 26 30 / .17), transparent 72%); } .pessoa__foto img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; position: relative; -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); } /* O que a pessoa faz. Lista silenciosa, separada por filete — a gramática de separação que .lista e .leva já usam. Sem o marcador quadrado, que aqui já significa outra coisa: "aplica-se / não se aplica" nas páginas de situação. */ .faz { margin: var(--e2) 0 0; padding: 0; list-style: none; max-width: 48ch; } .faz li { padding-block: var(--e2); border-bottom: 1px solid var(--linha-2); font-size: 17px; color: var(--ink-2); } .faz li:last-child { border-bottom: 0; } /* Dentro de texto corrido a mesma lista acompanha a coluna. Os 48ch acima são da página da pessoa, onde ela divide a linha com o retrato; herdados aqui, quebravam bem antes da margem dos parágrafos vizinhos. */ .artigo-corpo .faz { max-width: none; margin-top: var(--e4); } .artigo-corpo .faz li { font-size: var(--corpo); line-height: 1.55; padding-block: var(--e3); } /* ---------- artigo ---------- */ .artigo-capa { margin: 0 0 var(--e6); border-radius: var(--raio); overflow: hidden; box-shadow: 0 2px 5px rgb(16 26 30 / .05), 0 16px 36px rgb(16 26 30 / .10); max-width: 900px; } .artigo-capa img { width: 100%; height: auto; display: block; } .artigo-corpo { max-width: 68ch; } .artigo-corpo p { margin-top: var(--e4); font-size: 19px; line-height: 1.66; } .artigo-corpo h2 { margin-top: var(--e6); font-size: 27px; } .artigo-corpo h3 { margin-top: var(--e5); } /* ---------- cartões de ferramenta ---------- */ .ferrs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e5); margin-top: var(--e6); } .ferr { border: 1px solid var(--linha-2); border-radius: var(--raio); padding: var(--e5); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: var(--e2); transition: border-color .2s ease, transform .2s ease; } .ferr:hover { border-color: var(--acento); transform: translateY(-2px); } .ferr .meta { margin-top: auto; padding-top: var(--e4); } /* ---------- contato ---------- */ .contato { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e7); align-items: start; } .canais { display: flex; flex-direction: column; gap: var(--e4); margin-top: var(--e4); } .canal { display: grid; grid-template-columns: 1fr auto; gap: var(--e4); padding-bottom: var(--e3); border-bottom: 1px solid var(--linha); text-decoration: none; color: inherit; } .canal:hover { color: var(--acento); } .canal b { font-weight: 500; } @media (max-width: 860px) { .criterios, .escritorio, .contato, .ferrs { grid-template-columns: 1fr; gap: var(--e5); } .pessoa-capa { grid-template-columns: 1fr; gap: var(--e5); } .pessoa-capa .pessoa__foto { max-width: 220px; } .item { grid-template-columns: 2.2rem 1fr; } .item__ir { grid-column: 2; padding-top: var(--e2); } .capa { padding-block: var(--e6) var(--e5); } .artigo-corpo p { font-size: 18px; } } /* ---------- pular para o conteúdo ---------- */ .pular { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: var(--e3) var(--e5); border-radius: var(--raio); text-decoration: none; } .pular:focus { left: var(--margem); top: var(--e3); } /* ---------- a área virou link ---------- */ a.area { text-decoration: none; color: inherit; } a.area:hover h3 { color: var(--acento); } .marca { text-decoration: none; color: inherit; display: inline-block; } /* ---------- rodapé em grade ---------- */ .rodape__grade { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--e7); align-items: start; } .rodape .marca { font-size: 17px; } @media (max-width: 860px) { .rodape__grade { grid-template-columns: 1fr; gap: var(--e5); } } /* ---------- ferramentas do rodapé escuro na home ---------- */ .faixa--escura .ferramentas a { color: var(--sobre-escuro); } /* ---------- alvos de toque ---------- Achados da varredura de 27/07: a marca no cabeçalho e a caixa de consentimento ficavam abaixo de 44px de altura. Links dentro de frase são isentos pela norma e permanecem como estão. */ /* inline-flex colapsava os espaços em volta do "&" e virava ALVES&FREIRE. inline-block com padding dá o mesmo alvo de 44px sem tocar no espaçamento. */ .marca { display: inline-block; padding-block: 10px; } .consent { min-height: 44px; align-items: center; } .consent input { width: 24px; height: 24px; margin-top: 0; accent-color: var(--acento); } .rodape .marca { min-height: 0; } /* link de texto isolado (fora de frase) precisa de caixa clicável ≥24px */ .link { display: inline-block; padding-block: 3px; } /* ============================================================ Busca do site — pedido do Moabe, 27/07: pesquisar nos artigos e no site. Sem servidor, então o índice é gerado em build (busca_indice.js) e o filtro roda no navegador (busca.js). Nada a ver com a busca de município da calculadora de ITBI logo abaixo — nomes parecidos, componentes distintos. ============================================================ */ .busca-local { max-width: 480px; } .busca-local__label { display: block; font-size: var(--peq); font-weight: 500; margin-bottom: var(--e2); } .busca-local input { width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: var(--paper); border: 1px solid var(--linha-2); border-radius: var(--raio); padding: var(--e3) var(--e4); min-height: 48px; transition: border-color .18s ease, box-shadow .18s ease; } .busca-local input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgb(20 81 92 / .14); } .busca-local__vazio { margin-top: var(--e4); color: var(--ink-2); font-size: var(--peq); } .busca-resultados { border-top: 1px solid var(--linha); margin-top: var(--e5); } /* sem resultado na tela o filete fica solto, parecendo divisória sem função */ .busca-resultados:empty { border-top: 0; margin-top: 0; } .busca-item { display: block; text-decoration: none; color: inherit; padding-block: var(--e4); border-bottom: 1px solid var(--linha); } .busca-item h3 { margin-top: var(--e1); transition: color .2s ease; } .busca-item:hover h3, .busca-item:focus-visible h3 { color: var(--acento); } .busca-item .peq { margin-top: var(--e1); } /* ============================================================ Calculadora de ITBI — interface no padrão novo. O motor e os textos normativos vieram da landing original sem alteração. ============================================================ */ .itbi-passos { display: flex; gap: var(--e2); list-style: none; padding: 0; margin: 0 0 var(--e6); flex-wrap: wrap; } .itbi-passo { display: flex; align-items: center; gap: var(--e2); font-size: var(--peq); color: var(--ink-3); padding: var(--e2) var(--e3); border: 1px solid var(--linha); border-radius: var(--raio); } .itbi-passo::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--linha-2); } .itbi-passo.atual { color: var(--ink); border-color: var(--acento); } .itbi-passo.atual::before { background: var(--acento); border-color: var(--acento); } .itbi-passo.feito { color: var(--ink-2); } .itbi-passo.feito::before { background: var(--ink-3); border-color: var(--ink-3); } .itbi-tela { max-width: 620px; } .itbi-tela h3 { outline: none; } .itbi-acoes { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e5); } .itbi-secundario { background: none; border: 0; padding: var(--e2) 0; font: inherit; font-size: var(--peq); color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; } .itbi-secundario:hover { color: var(--acento); } .busca { position: relative; } .sug-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; background: var(--paper); border: 1px solid var(--linha-2); border-radius: var(--raio); box-shadow: 0 10px 24px rgb(0 0 0 / .1); max-height: 280px; overflow-y: auto; } .sug { display: flex; justify-content: space-between; gap: var(--e3); align-items: center; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--linha); font: inherit; font-size: 17px; color: var(--ink); padding: var(--e3) var(--e4); min-height: 48px; cursor: pointer; } .sug:hover, .sug:focus-visible { background: var(--paper-2); } .sug__tag { font-size: 12px; color: var(--acento); border: 1px solid var(--acento); border-radius: var(--raio); padding: 2px 7px; white-space: nowrap; } .nota-campo { font-size: var(--peq); color: var(--ink-2); margin-top: var(--e2); border-left: 2px solid var(--acento); padding-left: var(--e3); } .erro { font-size: var(--peq); color: #8C2F1E; margin-top: var(--e2); } @media (prefers-color-scheme: dark) { .erro { color: #E7A08E; } } /* resultado — a ressalva tem o MESMO peso visual do número, por regra do mapa §7 */ .itbi-res { border: 1px solid var(--linha-2); border-radius: var(--raio); padding: var(--e6); margin-top: var(--e5); max-width: 720px; } .itbi-res--ok { border-left: 4px solid var(--acento); } .itbi-res--neutro { border-left: 4px solid var(--ink-3); } .itbi-res--warn { border-left: 4px solid var(--ink-2); } .itbi-res--stop { border-left: 4px solid var(--ink); } .itbi-res__k { font-size: var(--kicker); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0; } .itbi-res__t p { margin-top: var(--e3); font-size: 18px; } .faixa-valor { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--linha); } .faixa-valor p { margin: 0; } .faixa-valor .rot { font-size: var(--kicker); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .faixa-valor .val { font-family: 'Newsreader', serif; font-size: clamp(27px, 4vw, 38px); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: var(--e2); line-height: 1.05; } .res-aviso { margin-top: var(--e5); padding: var(--e4) var(--e5); border: 1px solid var(--linha-2); border-radius: var(--raio); font-size: 18px; color: var(--ink); background: var(--paper-2); } .res-alerta { margin-top: var(--e4); font-size: var(--peq); color: var(--ink); border-left: 3px solid var(--ink-2); padding-left: var(--e3); } @media (max-width: 700px) { .faixa-valor { grid-template-columns: 1fr; gap: var(--e4); } } /* o convite para as análises fecha a seção de teses, não a abre */ .teses__fim { grid-column: 1 / -1; margin-top: var(--e6); } @media (max-width: 860px) { .teses__fim { margin-top: var(--e5); } } /* ============================================================ Textura, sombra e microinterações — 27/07 Regra: textura em ALGUMAS seções, não em todas. Se toda faixa tiver fundo, nenhuma tem destaque, e o site volta a parecer forrado. Escolhidas: "O escritório" (a faixa escura, onde a gravura some no breu e dá profundidade) e "Ferramentas" (onde a lista é longa e o chão vazio pesa). Teses, equipe e artigos ficam LIMPAS de propósito — é o contraste entre faixa vestida e faixa nua que faz as duas lerem. ============================================================ */ .faixa--textura { position: relative; isolation: isolate; overflow: hidden; } /* 30/07: a máscara tinha UM foco só, em 88% 8%, então o desenho existia no canto superior direito e a metade de baixo ficava lisa — "só está com risco na parte superior direita", nas palavras dele. Agora são dois focos em diagonal oposta. Duas máscaras se somam por padrão (o valor inicial de mask-composite é `add`), então não é preciso declarar composição. O foco de baixo é menor e mais fraco de propósito: ele acompanha, não compete — se os dois tivessem o mesmo peso, a seção viraria papel estampado e o texto perderia o chão. */ .faixa--textura::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("midia/textura-contornos.svg?v=7741fad7"); background-size: cover; background-position: center; opacity: .5; -webkit-mask-image: radial-gradient(120% 100% at 88% 8%, #000 6%, rgb(0 0 0 / .4) 46%, transparent 82%), radial-gradient(78% 82% at 6% 98%, #000 4%, rgb(0 0 0 / .3) 42%, transparent 76%); mask-image: radial-gradient(120% 100% at 88% 8%, #000 6%, rgb(0 0 0 / .4) 46%, transparent 82%), radial-gradient(78% 82% at 6% 98%, #000 4%, rgb(0 0 0 / .3) 42%, transparent 76%); } /* ---------- carbono na faixa escura ---------- A gravura de contornos, mesmo invertida, sumia no breu — desenho grande precisa de área clara para se ler, e ali não há. O carbono resolve porque é micro: duas diagonais cruzadas de 1px num módulo de 14px, o mesmo desenho da landing do ITBI (afv2-carbon). Fio a 3,4% de branco: aparece como matéria, não como padrão, e não disputa com o texto. */ /* 28/07: a faixa escura passou a cobrir também a equipe, mas a textura ficou só na primeira metade — as duas são
separadas e o ::before só existe em quem tem a classe. A equipe ganhou .faixa--textura também, e a continuação precisa de dois ajustes: · o HALO sai. Ele é um radial em 84% 4% — restartado na segunda faixa, acenderia um ponto claro bem no meio do bloco, exatamente onde o par deveria ler como uma coisa só · o carbono fica. É padrão de 14px que ladrilha sozinho, e a máscara corre a 105° (quase horizontal), então a queda esquerda-direita se repete igual nas duas — o degrau na emenda não aparece */ .faixa--escura.faixa--continua.faixa--textura::before { --fio: rgb(255 255 255 / .034); background-image: repeating-linear-gradient(45deg, var(--fio) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, var(--fio) 0 1px, transparent 1px 5px); background-size: 14px 14px; background-position: 0 0, 7px 7px; opacity: 1; /* 90°, não 105°: a 105 o gradiente tem componente vertical, então o valor da máscara no PÉ da primeira faixa é diferente do valor no TOPO da segunda — e o degrau aparece justamente na emenda que deveria sumir. Na horizontal pura, as duas faixas têm exatamente a mesma queda esquerda-direita. */ -webkit-mask-image: linear-gradient(90deg, #000 30%, rgb(0 0 0 / .6) 66%, rgb(0 0 0 / .3) 100%); mask-image: linear-gradient(90deg, #000 30%, rgb(0 0 0 / .6) 66%, rgb(0 0 0 / .3) 100%); } .faixa--escura:has(+ .faixa--continua).faixa--textura::before { background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / .034) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, rgb(255 255 255 / .034) 0 1px, transparent 1px 5px) !important; } .faixa--escura.faixa--textura::before { --fio: rgb(255 255 255 / .034); /* o halo entra como PRIMEIRA camada do mesmo ::before, não num ::after — aquele já carrega a sombra de emenda entre seções e seria atropelado */ background-image: radial-gradient(72% 80% at 84% 4%, rgb(255 255 255 / .05), transparent 66%), repeating-linear-gradient(45deg, var(--fio) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, var(--fio) 0 1px, transparent 1px 5px); background-size: auto, 14px 14px, 14px 14px; background-position: 0 0, 0 0, 7px 7px; opacity: 1; -webkit-mask-image: linear-gradient(90deg, #000 30%, rgb(0 0 0 / .6) 66%, rgb(0 0 0 / .3) 100%); mask-image: linear-gradient(90deg, #000 30%, rgb(0 0 0 / .6) 66%, rgb(0 0 0 / .3) 100%); } /* ============================================================ EMENDA ENTRE SEÇÕES — três tipos, escolhidos pelo salto de contraste 27/07, à noite. O que existia era meia solução: sombra no ALTO de toda faixa que muda de cor. Isso cobre a passagem claro→escuro, onde a faixa escura recebe sombra de quem está em cima. Faltavam as outras duas: claro → escuro sombra recebida no alto + fio de luz na quina (a dobra pegando luz, que é o que faz a emenda ler como matéria) escuro → claro a faixa escura PROJETA sombra para baixo, na faixa clara seguinte. Sem isso o escuro termina em corte seco — era a emenda mais dura da home claro → claro sem sombra: um filete que nasce e morre nas margens. Sombra entre dois papéis quase iguais só suja Nenhuma delas anima em rolagem por si; quem anima é o conteúdo (.rev). Emenda que pisca a cada rolada vira efeito, e o registro aqui é institucional. ============================================================ */ .faixa--alt, .faixa--escura { position: relative; } /* claro → escuro: sombra recebida */ .faixa--alt::after, .faixa--escura::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: linear-gradient(to bottom, rgb(16 26 30 / .05), transparent); pointer-events: none; } .faixa--escura::after { height: 26px; background: linear-gradient(to bottom, rgb(0 0 0 / .30), rgb(0 0 0 / .07) 62%, transparent); border-top: 1px solid rgb(255 255 255 / .07); /* o fio de luz na quina */ } /* escuro → claro: a faixa escura projeta sombra na seção de baixo. Precisa de z-index: irmão anterior não pinta sobre irmão posterior sem ele. */ .faixa--escura { z-index: 1; box-shadow: 0 22px 40px -20px rgb(6 14 16 / .48); } /* claro → claro: só o filete, e ele se dissolve nas margens */ .faixa--alt:not(.faixa--textura)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(to right, transparent, var(--linha) 12%, var(--linha) 88%, transparent); pointer-events: none; } /* ---------- profundidade nos blocos que já eram planos ---------- */ .tese { transition: transform .25s cubic-bezier(.2,.7,.2,1); } .tese:hover { transform: translateX(3px); } .ferr-item { border-radius: var(--raio); transition: padding-left .28s cubic-bezier(.2,.7,.2,1), background-color .25s ease, box-shadow .25s ease; } .ferr-item:hover { background: rgb(255 255 255 / .7); box-shadow: 0 1px 2px rgb(16 26 30 / .04), 0 10px 26px rgb(16 26 30 / .07); } .artigo-card__img { box-shadow: 0 1px 2px rgb(16 26 30 / .05); transition: box-shadow .3s ease; } .artigo-card:hover .artigo-card__img { box-shadow: 0 2px 4px rgb(16 26 30 / .06), 0 14px 30px rgb(16 26 30 / .12); } .ferr { box-shadow: 0 1px 2px rgb(16 26 30 / .04); } .ferr:hover { box-shadow: 0 2px 5px rgb(16 26 30 / .05), 0 16px 34px rgb(16 26 30 / .10); } /* ---------- o número da área acompanha a abertura ---------- */ .area__idx { transition: color .28s ease, transform .28s cubic-bezier(.2,.7,.2,1); } .area.acesa .area__idx { color: var(--acento); transform: translateX(2px); } /* ---------- botão flutuante: sombra que responde ---------- */ .flutua { transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease, box-shadow .25s ease; } .flutua:hover { box-shadow: 0 10px 30px rgb(0 0 0 / .26); } @media (prefers-reduced-motion: reduce) { .tese:hover, .pcartao:hover .pcartao__foto img, .area.acesa .area__idx { transform: none; } } /* ============================================================ Artigo: os blocos que fazem a página levar para dentro 29/07. Antes ela informava e terminava. A entrada destacada segura quem vem do Google nos primeiros segundos; a chamada, o bloco de atuação e os três caminhos são o que existe depois do ponto final. ============================================================ */ .artigo-entrada { font-size: var(--lead); line-height: 1.5; color: var(--ink); padding-left: var(--e5); border-left: 3px solid var(--acento); max-width: 62ch; margin-bottom: var(--e6); } /* O fecho inteiro numa medida só. Eram quatro (68ch, 72ch, 760, 860) e a borda direita saía serrilhada — medido: 909 · 939 · 914 · 914 · 1014. A referência é a coluna do texto, que a 68ch dá 68 caracteres por linha. */ .artigo-corpo + .ressalva { max-width: 760px; } .artigo-cta, .artigo-nos, .artigo-leva { max-width: 760px; } .artigo-cta { margin-top: var(--e7); padding: var(--e6); background: var(--paper-2); border-radius: var(--raio); border-left: 3px solid var(--acento); } .artigo-cta__linha { font-size: 17px; color: var(--ink); max-width: 56ch; margin-bottom: var(--e5); } .artigo-nos { margin-top: var(--e7); } /* Não é legenda, é texto para ler: sobe ao piso de 18px do invariante 11 e ganha medida. A 15px numa caixa de 760px dava 97 caracteres por linha. */ .artigo-nos .peq { margin-top: var(--e3); font-size: var(--corpo); line-height: 1.6; max-width: 66ch; } .artigo-leva { margin-top: var(--e7); } .leva-lista { display: flex; flex-direction: column; border-top: 1px solid var(--linha); margin-top: var(--e4); } /* Cada filho recebe posição explícita. Com a seta declarando só a LINHA (grid-row) e deixando a coluna automática, o algoritmo de grade a coloca antes dos itens totalmente automáticos: ela ficava na coluna 1 e o título era empurrado para a 2, alinhado à direita. */ .leva { display: grid; grid-template-columns: 1fr auto; column-gap: var(--e4); row-gap: 2px; align-items: start; min-height: 52px; padding-block: var(--e4); border-bottom: 1px solid var(--linha); text-decoration: none; color: inherit; transition: padding-left .24s cubic-bezier(.2,.7,.2,1), color .18s ease; } .leva:hover, .leva:focus-visible { padding-left: var(--e3); color: var(--acento); } .leva__t { grid-area: 1 / 1; font-weight: 500; } .leva__d { grid-area: 2 / 1; font-size: var(--peq); color: var(--ink-2); } .leva__s { grid-area: 1 / 2 / 3 / 3; color: var(--acento); align-self: center; transition: transform .18s ease; } .leva:hover .leva__s { transform: translateX(4px); } @media (max-width: 700px) { .artigo-cta { padding: var(--e5); } .artigo-entrada { padding-left: var(--e4); } } /* ---------- campo-isca e estados do formulário ---------- 03/08, com o envio ligado à API. A isca sai da tela sem `display:none` e sem `visibility:hidden`: robô de formulário ignora campo escondido por essas duas, e o objetivo é justamente que ele preencha. Fora da ordem de tabulação e com aria-hidden, quem usa teclado ou leitor de tela nunca esbarra nela. */ .isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } /* Os três estados. Cor NÃO é o único sinal — cada um tem glifo e texto próprios, porque quem não distingue verde de vermelho precisa saber se a mensagem chegou. */ .form__aviso { margin-top: var(--e4); padding: var(--e4) var(--e5); border-left: 3px solid var(--linha); border-radius: var(--raio); background: var(--paper); font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; } .form__aviso b { color: var(--ink); } .form__aviso::before { font-weight: 600; margin-right: var(--e2); } .form__aviso[data-estado="enviando"]::before { content: "…"; } .form__aviso[data-estado="ok"] { border-left-color: var(--acento); background: #EDF3F2; } .form__aviso[data-estado="ok"]::before { content: "✓"; color: var(--acento); } .form__aviso[data-estado="erro"] { border-left-color: #A33A2A; background: #FAF0EE; } .form__aviso[data-estado="erro"]::before { content: "!"; color: #8C3123; } .form__aviso[data-estado="erro"] b { color: #8C3123; } /* A lista de situações de cada área — até 306 caracteres numa linha só. Estava com o tamanho cravado no atributo `style` do parágrafo, o que vencia qualquer regra de folha: a correção anterior não pegou por isso, e o medidor continuou acusando 15px enquanto o CSS dizia 17. */ .item__sits { color: var(--ink-2); font-size: 18px; line-height: 1.55; margin-top: var(--e2); }