/* estilo.css — folha de estilo compartilhada da CRIVA (LP + relatório + pacote + posts). Marca trocável: toda cor de identidade vive nos tokens abaixo; o nome "CRIVA" só aparece como texto (const MARCA no JS de cada página), nunca hardcoded em valor de CSS. v4 (11/08) — IDENTIDADE OFICIAL do Mini Manual de Marca v1 (Carina). Fundamentos aplicados aqui: · Paleta noturna: Tinta #101823 é a base (proporção prescrita 70/20/7/3 — tinta/papel/ocre/grafite), Papel #F2EFE9 é o texto, Ocre #C4914E é a assinatura (um destaque por peça). Painéis mais ESCUROS que o fundo, separados por linha #22303C — exatamente como as seções escuras do manual. · Tipografia: Instrument Sans (voz editorial; display 500/-2%, título 500/-1%, texto 400/160%) + IBM Plex Mono (voz do critério: rótulos, dados e metadados, caixa alta, tracking aberto). Fontes locais em /fontes/, zero CDN. · Malha: a marca é feita da trama (filete 0.0115em, passo 0.028em — valores que o manual renderiza por padrão). Abaixo de 40px a marca é SÓLIDA, por isso o topo usa lettering sólido e só o fechamento usa a malha. · Cantos: superfície reta, CONTROLE com o canto quebrado. A frase que estava aqui ("o manual não tem um raio de borda sequer") é falsa pro Manual V3 — ele não legisla canto, e a própria página dele usa 6 e 8px. Ver a nota longa em --radius / --radius-controle. Os nomes antigos (--bg2, --card, --ink, --muted2, --accent-ink, --brand-ink, --*-soft, --neutral...) continuam existindo como ALIASES dos tokens novos, porque relatorio.css e pacote.html (donos de outros agentes, não tocar) consomem essas variáveis — mudar só o VALOR aqui muda a cor em toda página. */ /* ── fontes da marca (manual §06) — arquivos locais, subset latin ───────── instrument-sans-var-latin.woff2 é a fonte VARIÁVEL oficial (wght 400–700): um arquivo de 30KB cobre 400/500/600/700. Mono só existe em 400/500 no manual, e é só o que o site usa. Total: ~60KB. */ @font-face{ font-family:'Instrument Sans';font-style:normal;font-weight:400 700; font-stretch:100%;font-display:swap; src:url('/fontes/instrument-sans-var-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url('/fontes/ibm-plex-mono-400-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url('/fontes/ibm-plex-mono-500-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{ /* ── cores nomeadas do manual (§05 Paleta restrita) ────────────────────── FONTE DE VERDADE: `marca/mini-manual-marca-v3.html` §05 — o Mini Manual de Marca V3, entregável fechado. Os cinco nomes e os cinco hex são os do manual, sem reinterpretação, com a proporção prescrita 70/20/7/3. ⚠ ERRO DE FONTE CORRIGIDO EM 12/08: até aqui o :root vinha de `marca/identidade-criva.html`, que é a PROPOSTA de identidade rodada 01 e nunca foi adotada. Ela trocava o papel quente por um off-white frio (#EDEDE9), rebaixava o ocre pra um latão de croma menor (#B08D45) e esfriava a tinta (#101519). Nenhum desses valores existe no manual. Não voltar a esse arquivo pra nada — inclusive o CONCEITO dele é o oposto do manual (lá a marca era uma interrupção; aqui a letra é feita da malha). */ --tinta:#101823; /* Base · texto — 15,55:1 sobre papel */ --papel:#F2EFE9; /* Fundo claro · o chão do site */ --ocre:#C4914E; /* Assinatura · um destaque por peça. NÃO é cor de texto sobre papel: dá 2,44:1. Ver --ocre-texto. */ --grafite:#4A5158; /* Apoio · gráficos e texto secundário — 7,01:1 no papel */ --nevoa:#D8D3C9; /* Linhas e fundos · a malha, o que não passou */ /* ── tons DERIVADOS, que o manual não traz e o AA exige ────────────────── Regra desta casa: o token do manual manda na SUPERFÍCIE; onde ele reprova como TEXTO, deriva-se um tom mais fundo do MESMO matiz, e o token do manual continua existindo pra pintar superfície. Nunca o contrário — clarear o fundo pra salvar um texto apagaria a paleta. --ocre-texto é o único caso real: o ocre do manual sobre papel dá 2,44:1, três vezes abaixo do mínimo. Escurecido em 35,5% chega a 4,51:1 no pior dos três fundos claros do sistema (papel, papel alto e a superfície afundada). A regra do manual que continua inteira: o ocre nunca passa de 7% da peça. */ --ocre-texto:#7B5B30; /* ocre como TEXTO no claro — 5,4 papel · 4,7 surface2 */ --ocre-claro:#C4914E; /* sobre fundo escuro o ocre do manual já passa: 6,38:1 na tinta, 6,92:1 na faixa funda. É o próprio. */ --linha:var(--nevoa); /* nome antigo do filete de cartão */ /* ── aliases do vocabulário anterior (páginas ainda escrevem --latao*) ─── */ --latao:var(--ocre); --latao-claro:var(--ocre-claro); --latao-texto:var(--ocre-texto); /* ── malha (§02 Construção e §04 Símbolo) ──────────────────────────────── O manual tem DUAS afinações da mesma trama, e a diferença entre elas é de ESCALA, não de gosto: assinatura (§02) filete 0,0115 em · passo 0,028 em — 41% de tinta aberta (§04) filete 0,03 em · passo 0,075 em — 40% de tinta A proporção de tinta é a mesma; o que muda é a frequência. O §04 diz quando abrir: "no favicon de 64 px a malha ABRE para dois filetes visíveis" — ou seja, quando o render é pequeno demais pro filete fino sobreviver. ESTE SITE INTEIRO ESTÁ NESSE REGIME, e por isso o token aqui é o ABERTO. O maior lettering que o site serve é o do fecho, a 64px de corpo; o do topo roda a 44px. Com a trama de assinatura, o filete a 44px de corpo tem 0,51px e a 64px tem 0,74px: meio pixel e três quartos de pixel. Renderizado em 1x lado a lado com o PRÓPRIO quadro do manual, o resultado é o que o §08 proíbe — "trama borrada vira ruído". A trama aberta dá 1,32px de filete a 44px de corpo e 1,92px a 64px: desenho limpo em 1x e em 2x, mesma mancha de tinta, mesma marca. A trama de assinatura continua valendo pra peça grande e pra impresso, onde o filete tem tamanho. ⚠ Um passo de densidade por elemento (§08). Estes dois números valem pro LOGOTIPO. A escala de densidade do §07 (grau 1 a 5) é outra coisa e mora onde ela é dado, não em superfície de UI. */ --malha-filete:0.03em; --malha-passo:0.075em; /* ── famílias ────────────────────────────────────────────────────────── */ --fonte-sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif; --fonte-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* ── TEMA CLARO (v5, 12/08 — decisão do Bruno depois de ver as duas propostas em `marca/home-light-v1.html` e `v2.html`) ────────────────────────────── A v4 era noturna: `--bg` era a tinta e a página inteira vivia no escuro. O manual §05 nomeia o lado claro e ele nunca tinha sido aplicado: Papel é "fundo claro", Tinta é "base · texto", Grafite é "apoio · gráficos", Névoa é "linhas · fundos". Agora o chão do site é papel e a tinta volta a ser texto — e a proporção 70/20/7/3 do manual passa a fazer sentido. ESTA CAMADA É A ALAVANCA: toda página (LPs, pacote, posts) consome estes tokens, então virar aqui vira o site. Cor literal dentro de página é o que escapa da virada, e por isso é defeito. O ocre #C4914E do manual sobre papel dá 2,44:1 e por isso NÃO é a ação: a ação é tinta (15,55:1). O ocre segue sendo assinatura e superfície, que é o papel que o manual §05 dá pra ele ("um destaque por peça"). Onde ele precisa virar texto, entra o --ocre-texto derivado acima. */ --tinta-funda:#090E14; /* faixa escura única (o fecho): tinta do manual 42% mais funda, pra separar do fundo sem sair do matiz */ --papel-alto:#F8F6F3; /* cartão sobre papel: papel do manual 45% em direção ao branco — 16,54:1 com a tinta */ --bg:var(--papel); --surface:var(--papel-alto); --surface2:#E4E0D7; /* superfície afundada (input, trilho): papel do manual 55% em direção à névoa — 13,55:1 com a tinta */ --text:var(--tinta); --text2:var(--grafite); /* 7,01:1 sobre papel · 6,11:1 sobre surface2 */ /* Rótulo mono NÃO é mais claro que o texto de apoio no tema claro. Tentei #6B7480 e a conta reprovou nos três fundos do sistema (4,03 sobre papel, 4,37 sobre papel alto, 3,71 sobre surface2) — e são ~8 rótulos por página. No escuro havia folga pra escalonar cinza; no claro não há, e clarear o rótulo é exatamente o que tira legibilidade. A diferença entre rótulo e texto de apoio passa a ser de FORMA (mono, caixa alta, tracking aberto, corpo menor), que é como o doc de identidade já separa as duas vozes. */ --muted:var(--grafite); /* 7,01 papel · 7,46 papel-alto · 6,11 surface2 — é o Grafite do manual, sem tom paralelo inventado */ --line:var(--nevoa); /* filete decorativo: 1,30:1, e é o que o manual pede. Separador não é contorno de controle — quem precisa dos 3:1 da 1.4.11 usa --line-forte. */ --line-forte:#8A8781; /* contorno de INPUT/controle: névoa 46% mais funda, 3,12:1 no papel e 3,32:1 no papel alto */ --accent:var(--ocre-texto); /* ACENTO EM TEXTO: o token que a página escreve */ --accent-vivo:var(--ocre); /* ocre do manual, cheio: grafismo e preenchimento, sem função de texto sobre papel */ /* Estados: não estão na paleta de 5 do manual (§05 manda a cor ceder espaço ao dado). Ficam, e foram REMEDIDOS contra os três fundos claros novos — os que reprovavam por pouco desceram um passo, mantendo o matiz. */ --good:#1A6E46; /* era #1D7A4F: 4,04 na surface2. Agora 4,6 no pior. */ --bad:#A63A2A; /* 5,61 papel · 5,97 papel-alto · 4,89 surface2 */ /* Erro sobre a faixa escura: --bad dá só 2,9:1 na tinta funda e reprova. É o caso real do formulário do diagnóstico, que vive num cartão escuro dentro de uma página clara: a mesma página precisa das duas direções do vermelho. */ --bad-claro:#E08B75; /* 7,49:1 sobre tinta funda */ --warn:#785E28; /* era #8A6D2E: 4,25 no papel e 3,70 na surface2 */ --info:#2A5DA8; /* 5,67 papel · 6,03 papel-alto · 4,94 surface2 */ --wa:#13733A; /* era #18944A: 3,41 no papel. Verde do WhatsApp só passa como texto depois de descer 22%. */ /* ── aliases de compatibilidade (nomes antigos usados por relatorio.css/pacote.html) ── */ --bg2:var(--surface2); --card:var(--surface); --card2:#EBE8E2; /* segundo nível de cartão, um passo abaixo do papel alto */ --line2:#C2BEB5; /* linha mais marcada que --line, para divisor estrutural */ --ink:var(--text); --muted2:#3E444A; /* notas/placeholder: mais FUNDO que --muted (no claro, escurecer é o que aumenta contraste) */ /* texto sobre fundo --accent-vivo (ocre cheio): tinta dá 6,38:1; papel dá 2,44 e não passa. */ --accent-ink:var(--tinta); --accent-soft:rgba(196,145,78,.14); --brand:var(--info); --brand-ink:var(--papel-alto); --good-soft:rgba(26,110,70,.12); --warn-soft:rgba(120,94,40,.12); --bad-soft:rgba(166,58,42,.12); --info-soft:rgba(42,93,168,.12); --neutral:var(--muted); --neutral-soft:rgba(74,81,88,.12); /* ── cantos ─────────────────────────────────────────────────────────────── Estava escrito aqui que "o manual não tem um raio de borda sequer". É FALSO pro Manual V3: ele não legisla canto em lugar nenhum, e a própria página dele usa 6px e 8px (na maquete de aba de navegador do §09) e 50% (nos avatares do §04). Nenhum desses é declaração de marca — são maquetes de UI de terceiros —, mas também não sobra regra nenhuma proibindo raio. A regra de canto reto veio do documento REJEITADO, junto com a paleta errada. O reto FICA, agora por decisão de projeto e não por citação inventada: o sistema inteiro (cartão, input, faixa, tabela, o próprio lettering) é feito de arestas, e arredondar só o botão seria a única curva da página. O que o botão precisava não era raio, era relevo — ver o bloco "botões (v7)". */ --radius:0; --radius-sm:0; /* ── e o CONTROLE, que é outra coisa ─────────────────────────────────── O que ficou reto acima é SUPERFÍCIE: cartão, faixa, tabela, input, selo — tudo que existe pra ser lido. O botão não é superfície, é o único elemento da página que existe pra ser OPERADO, e a queixa do Bruno ("muito quadradão, não parece clicável") é sobre exatamente isso. A regra que entra é de FORMA CODIFICANDO FUNÇÃO: o que se lê tem aresta, o que se aperta tem canto quebrado. Não é uma exceção solta — é o que faz um controle ser identificável numa página inteira de retângulos. 6px é o valor medido. Renderizei 0/4/6/8 lado a lado a 1x: 0 e 4 são quase indistinguíveis (a 4px a curva tem meio pixel de raio depois do antialiasing e o botão continua lendo como retângulo — o que não resolve a queixa), e a 8px a placa começa a virar pastilha e sai do tom editorial do resto da página. 6px quebra o canto o suficiente pra se ver parado. Vale SÓ pra .btn — nenhum cartão, input, chip ou selo consome este token, então nada mais na página muda de forma. */ --radius-controle:6px; /* Sombra no claro é OUTRA coisa: a de fundo escuro (.35 de preto) vira uma mancha suja sobre papel. No claro quem separa superfície é o filete; a sombra só levanta o cartão de leve, com a tinta da marca em vez de preto. */ --shadow:0 8px 24px rgba(16,24,35,.08); --shadow-sm:0 2px 8px rgba(16,24,35,.06); --maxw:1080px; } /* ── ponte p/ relatorio.css (arquivo de outro agente, não editável): os dois únicos tokens --rp-* que nasceram pensando em fundo claro. html:root ganha da definição em :root do relatorio.css por especificidade, sem tocar lá. ── */ html:root{ --rp-accent-text:var(--accent); /* ocre derivado p/ texto: 5,4:1 sobre papel */ --rp-accent-ink:var(--tinta); /* texto sobre ocre é tinta (6,38:1), não papel (2,44) */ } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--text); font:16px/1.6 var(--fonte-sans); -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit} button{font-family:inherit} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;width:100%} /* escala do manual: display 500/-2%, título 500/-1% (Instrument Sans) */ h1,h2{line-height:1.15;letter-spacing:-.02em;font-weight:500;margin:0} h3,h4{line-height:1.25;letter-spacing:-.01em;font-weight:600;margin:0} p{margin:0} /* rótulo mono do manual: caixa alta, tracking aberto — a "voz do critério" */ .rotulo-mono{font-family:var(--fonte-mono);font-weight:500;letter-spacing:.1em;text-transform:uppercase} /* texto tramado da marca (manual §07): uma palavra por peça, nunca duas */ .malha-texto{ color:transparent; background-image:repeating-linear-gradient(var(--papel) 0 var(--malha-filete),transparent var(--malha-filete) var(--malha-passo)); -webkit-background-clip:text;background-clip:text; } /* ── overflow guard: qualquer conteúdo largo (tabela, código) fica dentro de um wrapper com scroll próprio, nunca estoura a viewport ──────────── */ .scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ── topo fixo ───────────────────────────────────────────────────────────── Sticky AQUI, no .topbar, para TODAS as páginas: a classe .is-sticky antiga só existia em 2 dos 8+ HTMLs — era por isso que o topo "não fixava" nas outras. Fundo sólido do token + borda inferior sutil (nada de blur). ──── */ .topbar{ position:sticky;top:0;z-index:80; padding:14px 0;background:var(--bg);border-bottom:1px solid var(--line); } .topbar.is-sticky{position:sticky}/* legado: classe ainda presente em HTML antigo, já coberta acima */ .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px} /* ── marca no topo ───────────────────────────────────────────────────────── AS MEDIDAS SÃO AS DO QUADRO "HORIZONTAL · DESCRITOR À DIREITA" DO §03, e não uma redução delas. O quadro do manual roda: lettering tramado a 44px de corpo, descritor mono 12px com tracking 0,1em em duas linhas, entrelinha 1,5, filete de 1px à esquerda com 20px de afastamento e 22px entre o lettering e o filete, tudo alinhado pela base (align-items:flex-end, com 3px de recuo no descritor). Está tudo aqui, nos mesmos números. O QUE ESTAVA ERRADO. O topo servia o lettering SÓLIDO com o descritor colado ao lado. Isso é uma quinta variação, e o manual tem quatro: a SÓLIDA é justamente a única SEM descritor ("SÓLIDA · ABAIXO DE 40 PX", lettering e nada mais). Quem tem descritor à direita é a HORIZONTAL, e ela é tramada. POR QUE A MALHA AGORA CABE. O piso do §08 é medido no CORPO: o manual roda a SÓLIDA a 26px de corpo e chama de "abaixo de 40 px", e roda a HORIZONTAL tramada a 44px. O topo servia 118px de largura de logotipo, que é corpo de 36,1px — abaixo do piso de verdade, e é por isso que o arquivo antigo era sólido. A 144px o corpo é 44px, o tamanho nativo do quadro. A trama é a ABERTA do §04 (ver o comentário dos tokens --malha-*), que é a única que sobrevive a 44px em 1x; o próprio logo-criva.svg cai pra sólido sozinho se alguém servir o arquivo abaixo de 130px. ABAIXO DE 720px O DESCRITOR SAI, e o topo passa a servir a variação POSITIVA (§03: "POSITIVA · MALHA EM TINTA" é o lettering tramado em tinta sobre papel, sem descritor). Não é o descritor "sumindo": é a outra variação do manual, escolhida porque o conjunto inteiro tem 321px e não convive com o botão do topo numa tela de 390. A assinatura com descritor continua em toda página, no fecho, na variação PRINCIPAL. ── */ .logo{display:flex;align-items:flex-end;gap:22px;text-decoration:none;color:var(--text)} .logo-svg{width:144px;height:auto;display:block;flex:none} .logo-desc{ font-family:var(--fonte-mono);font-weight:400;font-size:12px;line-height:1.5; letter-spacing:.1em;text-transform:uppercase;color:var(--text2); padding-left:20px;padding-bottom:3px;border-left:1px solid var(--line2);white-space:nowrap; } @media(max-width:720px){ .logo{gap:0} .logo-desc{display:none} } /* legado: posts em /conteudo/ ainda carregam o ícone antigo de grade — segue renderizando com os tokens novos até o agente de conteúdo trocar a marca lá */ .logo .crivaico{width:26px;height:26px;flex:none} .crivaico{color:var(--text)} .crivaico .furo{fill:var(--muted)} .crivaico .furo-passa{fill:var(--accent)} .topbar .fone{font-size:13.5px;color:var(--text2);text-decoration:none} .topbar .fone b{color:var(--text)} /* ── botões (v8, 12/08) — A ABA TRAMADA ──────────────────────────────────── O HISTÓRICO, pra ninguém repetir. A v6 pôs na borda esquerda uma "haste crivada" (filete de latão interrompido) — conceito do documento REJEITADO, e na tela um risquinho de 3px na quina. A v7 trocou por um "degrau": um filete chapado de latão 3px embaixo da placa. Renderizado a 1x, degrau de 3px embaixo de um retângulo NÃO lê como degrau: lê como sublinhado. Faltava oclusão — nada na imagem dizia que a placa estava POR CIMA da base. As duas morreram pelo mesmo motivo: eram um detalhe de 3px numa placa chapada, e a queixa do Bruno ("muito quadradão, não parece clicável") era sobre a placa. O QUE ENTROU. O botão deixa de ser uma placa lisa e passa a ter DOIS CAMPOS: o campo do rótulo, sólido, e a ABA — um campo de malha de altura inteira na ponta direita, separado por um filete. É a §07 do manual (escala de densidade) usada como matéria, não como enfeite: a placa é grau 5 (sólido, "referência da categoria") e a aba abre e fecha conforme o estado. POR QUE ISSO RESOLVE A QUEIXA, e um filete não resolvia: · o que faz um retângulo virar controle é ter ESTRUTURA INTERNA. Placa lisa é superfície; placa com dois campos e uma divisa é um objeto fabricado — a mesma leitura de um bilhete destacável, de uma tecla com pega, de um cartão de embarque. Isso se enxerga parado, sem hover, que era o pedido. · ranhura é affordance física ("isto se opera com a mão"), e por sorte é exatamente a única gramática gráfica que esta marca tem. · a densidade da aba é ESTADO LEGÍVEL: repouso grau 3, hover fecha, apertado sólido, desabilitado abre até quase sumir. O botão vira um pequeno medidor de presença — que é literalmente o que a CRIVA vende. A MEDIDA DA MALHA. Filete de 1px, e o PASSO é a variável de estado. Testei quatro grãos lado a lado a 1x (`marca/lab/`): 2px/5px e 2px/4px lêem como código de barras — barra grossa demais pra distância que o olho tem numa aba de 28px. 1px/4px fica ralo e some. 1px/3px é o grão que lê como TRAMA, e é o mesmo regime da malha aberta do §04 (que existe justamente porque filete fino não sobrevive em render pequeno). O §08 pede um passo de densidade por elemento e é o que acontece — a placa não é tramada, só a aba. E o §07 reserva o TEXTO tramado pra uma palavra por peça: aqui nenhuma letra é tramada, então a regra do título continua intacta. OS QUATRO ESTADOS SÃO QUATRO GRAUS DA ESCALA DO §07, e não quatro efeitos: desabilitado passo 6px 17% de tinta grau 1 · presença mínima repouso passo 3px 33% grau 3 · presença estável hover passo 2px 50% grau 4 · presença forte apertado sólido 100% grau 5 · referência da categoria Ou seja: encostar no botão da CRIVA aumenta a densidade da malha, e apertar fecha ela. O controle executa a tese da empresa. TRÊS CAMINHOS FORAM DESENHADOS E RENDERIZADOS ANTES DESTE — ver `marca/lab/_lab-botao-v8.html`: · LEITO TRAMADO (a v7 melhorada): placa sólida com um leito de malha de 10px aparecendo POR BAIXO. DESCARTADO na imagem: sem oclusão, faixa listrada embaixo da placa lê como sublinhado triplo, nunca como degrau — o mesmo defeito da v7, só que mais grosso. · TECLA CONVENCIONAL: raio 5px + bisel (luz no topo, sombra na base) + elevação. Funciona — foi o que mais pareceu clicável na rodada 1 — e por isso a elevação dele FICOU. Descartado como conceito porque o bisel de plástico brilhante briga com uma marca de tinta e papel, e porque não diz absolutamente nada desta empresa: é o botão de qualquer site. · BASE TRAMADA: a malha como rodapé de largura inteira DENTRO da placa. Descartada por uma medida, não por gosto: a 10px de altura e 1x, três filetes lêem como "dois traços", não como malha. A trama só se enxerga como trama com altura — e altura inteira é o que a aba lateral dá. ANATOMIA. Cada variante declara cinco coisas e herda o resto: --btn-bg a placa --btn-ink o rótulo --btn-aba a malha da aba (e o filete que a separa do rótulo) --btn-base a espessura da placa (o filete de 3px por baixo) --btn-sombra a sombra projetada e dois números controlam o desenho: --aba-larg largura da aba, um por tamanho (sm 22 · normal 28 · big 34) --aba-passo o passo da malha, um por ESTADO (6 · 3 · 2 · sólido) O OCRE É DA AÇÃO PRINCIPAL. A aba do primário e das placas de ocre é assinatura; a do secundário (.ghost, .fantasma-escuro) é o Grafite/Névoa de apoio do §05. Assim a hierarquia se lê pela COR da malha, não só pelo peso da placa — e o teto de 7% de ocre do manual continua de pé mesmo numa página com oito botões. CONTRASTE MEDIDO (planilha completa no fim do bloco). rótulo sobre placa primário / .wa papel-alto sobre tinta ........ 16,54:1 AAA .latao tinta sobre ocre .............. 6,38:1 AA .claro tinta funda sobre ocre ........ 6,92:1 AA .ghost tinta sobre papel ............. 15,55:1 AAA .fantasma-escuro papel sobre tinta funda ....... 16,87:1 AAA a MALHA DA ABA é detalhe gráfico (1.4.11 pede 3:1) e é medida contra os dois vizinhos que ela tem — a placa em que está impressa e, nos vazados, o fundo da página: ocre sobre tinta (primário) ..... 6,38:1 ✓ tinta sobre ocre (.latao) ....... 6,38:1 ✓ tinta funda sobre ocre (.claro) . 6,92:1 ✓ grafite sobre papel (.ghost) .... 7,01:1 ✓ névoa sobre tinta funda (escuro) 13,88:1 ✓ O rótulo NUNCA fica sobre a malha: o campo do rótulo é sólido e a aba tem padding reservado só pra ela. Por isso não existe o caso "texto sobre listra", que é onde trama em botão costuma reprovar. */ .btn{ --btn-bg:var(--text); --btn-ink:var(--papel-alto); --btn-aba:var(--accent-vivo); --btn-base:color-mix(in srgb,var(--tinta) 34%,transparent); --btn-sombra:color-mix(in srgb,var(--tinta) 20%,transparent); --aba-larg:28px; --aba-passo:3px; position:relative; display:inline-flex;align-items:center;justify-content:center;gap:9px; border:0;border-radius:var(--radius-controle); padding:14px calc(var(--aba-larg) + 20px) 14px 24px; font-size:15.5px;font-weight:600;line-height:1.25;letter-spacing:.005em; cursor:pointer;text-decoration:none;overflow:hidden; background:var(--btn-bg);color:var(--btn-ink); box-shadow:0 3px 0 var(--btn-base),0 8px 18px var(--btn-sombra); transition:transform .14s,box-shadow .14s; } /* A ABA. Altura inteira, encostada na borda direita, com um filete que a separa do campo do rótulo. Sem transição no background: gradiente não interpola, e um passo de densidade tem que trocar seco — é leitura, não animação. */ .btn::after{ content:"";position:absolute;right:0;top:0;bottom:0;width:var(--aba-larg); border-left:1px solid var(--btn-aba); background:repeating-linear-gradient(180deg, var(--btn-aba) 0 1px,transparent 1px var(--aba-passo)); } /* hover: a placa sobe, a base engrossa e a MALHA FECHA um grau. */ .btn:hover{ --aba-passo:2px; transform:translateY(-2px); box-shadow:0 5px 0 var(--btn-base),0 14px 26px var(--btn-sombra); } /* active: a placa encosta no chão e a aba fica SÓLIDA — grau 5, presença cheia. */ .btn:active{ transform:translateY(3px); box-shadow:0 0 0 var(--btn-base); } .btn:active::after{background:var(--btn-aba)} .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* Desabilitado: a malha ABRE até quase sumir (grau 1, "presença mínima"), a placa perde o relevo e a cor perde croma. O estado é dito pela DENSIDADE e pela falta de relevo, não por apagar o botão. POR QUE A OPACIDADE É 0,8 E NÃO 0,5. Este estado não é decorativo: os dois formulários do site trocam o rótulo enquanto desabilitam ("Abrindo pagamento…" na /mapa, e o loading do diagnóstico na home). É texto de status, e texto de status precisa ser lido. A 0,55 a placa de ocre sobre a faixa escura caía pra 2,78:1 com o próprio rótulo. A 0,8 ela dá 4,66:1, e a placa de tinta sobre papel dá 9,18:1 — os dois passam em AA. O saturate preserva luminância (é matriz de croma), então não come contraste. */ .btn[disabled],.btn[aria-disabled="true"]{ --aba-passo:6px; opacity:.8;filter:saturate(.5);cursor:not-allowed;transform:none; box-shadow:0 3px 0 var(--btn-base); } .btn[disabled]:hover,.btn[aria-disabled="true"]:hover{ --aba-passo:6px;transform:none;box-shadow:0 3px 0 var(--btn-base); } /* Assinatura: onde o ocre é a placa (o plano em destaque, o envio do formulário). A aba inverte pra tinta, e o anel de foco também — ocre sobre ocre não se vê. */ .btn.latao{ --btn-bg:var(--accent-vivo);--btn-ink:var(--accent-ink);--btn-aba:var(--text); --btn-base:color-mix(in srgb,var(--tinta) 45%,transparent); } .btn.latao:focus-visible{outline-color:var(--text)} /* Mesma placa de ocre, sobre superfície ESCURA (cartão do diagnóstico, fecho). Aba em tinta funda: 6,92:1 contra a placa. A sombra some no escuro, então a base fica preta e cheia pra placa continuar tendo espessura. */ .btn.claro{ --btn-bg:var(--latao-claro);--btn-ink:var(--tinta-funda);--btn-aba:var(--tinta-funda); --btn-base:rgba(0,0,0,.55);--btn-sombra:rgba(0,0,0,.45); } .btn.claro:focus-visible{outline-color:var(--bg)} /* Secundário sobre papel: placa vazada (grau 0 da escala — nenhuma presença de fundo), contorno de grafite a 7,01:1 e aba na MESMA cor do contorno. O ocre fica reservado pra ação principal: com aba de ocre, o vazado disputava o olho com o primário ao lado, que é o contrário do que "secundário" quer dizer. */ .btn.ghost{ --btn-bg:transparent;--btn-ink:var(--text);--btn-aba:var(--muted); --btn-base:color-mix(in srgb,var(--tinta) 18%,transparent); --btn-sombra:color-mix(in srgb,var(--tinta) 10%,transparent); border:1.5px solid var(--muted); padding:12.5px calc(var(--aba-larg) + 19px) 12.5px 22.5px; } .btn.ghost:hover{background:color-mix(in srgb,var(--text) 6%,transparent);border-color:var(--text)} /* Secundário sobre superfície escura. */ .btn.fantasma-escuro{ --btn-bg:transparent;--btn-ink:var(--bg);--btn-aba:var(--nevoa); --btn-base:rgba(0,0,0,.5);--btn-sombra:rgba(0,0,0,.35); border:1.5px solid var(--nevoa); padding:12.5px calc(var(--aba-larg) + 19px) 12.5px 22.5px; } .btn.fantasma-escuro:hover{background:color-mix(in srgb,var(--bg) 8%,transparent);border-color:var(--bg)} .btn.fantasma-escuro:focus-visible{outline-color:var(--latao-claro)} /* `.wa` deixou de ser "botão verde" e passou a ser "esta ação abre o WhatsApp" (Bruno 12/08: o verde na /gestao não padroniza com as outras LPs). Quem diz WhatsApp é o glifo + o rótulo, não um retângulo de cor de plataforma. O relatório mantém verde nos próprios contextos, por regra dele em relatorio.css. */ .btn.wa{--btn-bg:var(--text);--btn-ink:var(--papel-alto);--btn-aba:var(--accent-vivo)} .btn.brand{ --btn-bg:var(--brand);--btn-ink:var(--brand-ink);--btn-aba:var(--brand-ink); --btn-base:color-mix(in srgb,var(--tinta) 45%,transparent); } /* ── tamanhos ────────────────────────────────────────────────────────────── A aba acompanha o corpo: num botão de 14px ela seria desproporcional a 32px, e num .big de 100% de largura 32px some. Três larguras, um por tamanho. */ .btn.sm{--aba-larg:22px;padding:10px calc(var(--aba-larg) + 15px) 10px 19px;font-size:14px} .btn.ghost.sm,.btn.fantasma-escuro.sm{padding:8.5px calc(var(--aba-larg) + 13.5px) 8.5px 17.5px} .btn.big{--aba-larg:34px;padding:16px calc(var(--aba-larg) + 22px) 16px 26px;font-size:16.5px;width:100%} .btn.ghost.big,.btn.fantasma-escuro.big{padding:14.5px calc(var(--aba-larg) + 20.5px) 14.5px 24.5px} .btn small{display:block;font-weight:500;opacity:.85;font-size:12px;margin-top:2px} /* glifo do WhatsApp dentro de um botão ou link (era exclusivo da home) */ .wa-glyph{width:16px;height:16px;flex:none} /* Sem animação: a densidade da aba continua trocando (é informação de estado, não enfeite) e o mesmo vale pra base; some o deslocamento da placa. */ @media(prefers-reduced-motion:reduce){ .btn{transition:none} .btn:hover,.btn:active{transform:none} } /* ── hero ──────────────────────────────────────────────────────────────── */ .hero{padding:52px 0 60px;background: radial-gradient(ellipse 900px 420px at 50% -10%,rgba(196,145,78,.10),transparent 60%), var(--bg); border-bottom:1px solid var(--line)} .hero .kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px; font-family:var(--fonte-mono);font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px} .hero .kicker .dot{width:7px;height:7px;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} .hero h1{font-size:clamp(28px,4.6vw,44px);max-width:18ch;color:var(--text)} .hero h1 em{font-style:normal;color:var(--accent)} .hero .sub{font-size:clamp(16px,2vw,18.5px);color:var(--text2);margin-top:16px;max-width:56ch} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;margin-top:38px} @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:28px}} .hero-proof{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .hero-proof span{background:transparent;border:1px solid var(--line2);padding:7px 14px;font-size:12.5px;color:var(--text2)} .hero-proof b{color:var(--text)} /* ── formulário de diagnóstico ────────────────────────────────────────── */ .diag-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:26px;box-shadow:var(--shadow)} .diag-card h2{font-size:19px;margin-bottom:4px;color:var(--text)} .diag-card .diag-sub{font-size:14px;color:var(--text2);margin-bottom:18px} .campo{margin-bottom:14px} .campo label{display:block;font-size:12px;font-family:var(--fonte-mono);font-weight:500; letter-spacing:.06em;text-transform:uppercase;color:var(--text2);margin-bottom:6px} .campo label small{font-weight:400;color:var(--muted2);text-transform:none;letter-spacing:0} .campo input,.campo select{ width:100%;background:var(--surface2);border:1.5px solid var(--line2);border-radius:var(--radius-sm); padding:13px 14px;font-size:15.5px;font-family:inherit;color:var(--text);outline:none;transition:border-color .12s,box-shadow .12s; } .campo input::placeholder{color:var(--muted2)} .campo input:focus,.campo select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .campo-tel{display:flex;gap:8px} .campo-tel select{flex:0 0 auto;width:auto;max-width:132px;padding:13px 8px;font-size:14px} .campo-tel input{flex:1;min-width:0} .campo.tem-erro input,.campo.tem-erro select{border-color:var(--bad)} /* explicação curta debaixo do campo (usada no e-mail opcional): tom de nota, nunca compete com o label nem com a mensagem de erro, que continua vindo abaixo dela */ .campo-dica{font-size:12px;color:var(--muted2);margin-top:6px;line-height:1.45} .campo-msg{display:none;font-size:12.5px;color:var(--bad);margin-top:6px;line-height:1.4} .campo.tem-erro .campo-msg{display:block} .diag-erro{display:none;background:var(--bad-soft);color:var(--bad);border:1px solid rgba(217,122,99,.35); border-radius:var(--radius-sm);padding:11px 13px;font-size:13.5px;margin-bottom:14px;line-height:1.5} .diag-erro.on{display:block} .diag-nota{font-size:12px;color:var(--muted2);margin-top:12px;text-align:center;line-height:1.5} /* ── estado de carregamento (progresso simulado) ──────────────────────── */ .diag-loading{display:none;text-align:center;padding:10px 4px 4px} .diag-loading.on{display:block} .diag-loading .criva-spin{width:52px;height:52px;margin:0 auto 18px;position:relative} .diag-loading .criva-spin svg{width:100%;height:100%;animation:girar 2.4s linear infinite} @keyframes girar{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.diag-loading .criva-spin svg{animation:none}} .diag-loading .msg{font-size:15px;font-weight:600;color:var(--text);min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 8px} .diag-loading .barra{height:6px;background:var(--surface2);border:1px solid var(--line);overflow:hidden;margin-top:16px} .diag-loading .barra i{display:block;height:100%;width:4%;background:var(--accent);transition:width 1s linear} .diag-loading .tempo{font-size:12px;color:var(--muted2);margin-top:10px;font-family:var(--fonte-mono)} /* ── seção genérica ───────────────────────────────────────────────────── */ section.bloco{padding:56px 0} section.bloco.tinta{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .bloco-head{max-width:62ch;margin-bottom:34px} .bloco-head .eyebrow{font-size:12px;font-family:var(--fonte-mono);font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .bloco-head h2{font-size:clamp(22px,3.2vw,30px);color:var(--text)} .bloco-head p{color:var(--text2);margin-top:12px;font-size:15.5px} .campo-armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ── ícone de linha compartilhado (passos + eixos) ─────────────────────── 24px, stroke currentColor. Nome próprio (não ".ico") pra não colidir com ".estado-msg .ico" do relatório, que também vive neste arquivo. ───────── */ .icone-svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} /* ── chevron: affordance visual de "isto expande", sem texto de instrução ── */ .passo-chev,.eixo-chev{flex:none;color:var(--muted2);transition:transform .25s ease,color .25s ease} .passo-chev svg,.eixo-chev svg{width:100%;height:100%;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .passo-chev{width:16px;height:16px} .eixo-chev{width:14px;height:14px} /* ── como funciona: 4 passos numa trilha, compactos por padrão ─────────── Fechado = número + ícone + título + 1 linha de resumo. Aberto (hover/foco/ toque) revela 2 linhas extras via grid-template-rows animado. ─────────── */ .passos{--pr:0;list-style:none;margin:26px 0 0;padding:34px 0 0;display:grid; grid-template-columns:repeat(4,1fr);gap:16px;position:relative;align-items:start} .passos::before,.passos::after{content:"";position:absolute;top:12px;height:3px} .passos::before{left:0;right:0;background:var(--line)} .passos::after{left:0;width:calc(var(--pr)*100%);background:var(--accent); transition:width .7s cubic-bezier(.2,.8,.2,1)} .passo{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:18px 18px 20px;cursor:pointer; transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s} .passo-top{display:flex;align-items:center;justify-content:space-between} .passo-num{width:26px;height:26px;flex:none;font-family:var(--fonte-mono); display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:500; background:var(--surface2);border:1px solid var(--line2);color:var(--text2); transition:background-color .35s,border-color .35s,color .35s} /* Superfície de latão CHEIA (v5): `--accent` é o latão de TEXTO, e tinta funda sobre ele dá 3,37:1. Quando o latão vira fundo, o token é `--accent-vivo` (6,22:1) — o mesmo par do `.btn.latao`. */ .passo.feito .passo-num{background:var(--accent-vivo);border-color:var(--accent-vivo);color:var(--accent-ink)} .passo-ico{display:block;width:24px;height:24px;color:var(--accent);margin-top:14px} .passo h3{font-size:15.5px;margin-top:12px;color:var(--text)} .passo-resumo{font-size:13px;color:var(--text2);line-height:1.5;margin-top:6px} .passo-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)} .passo-more-in{overflow:hidden} .passo-more-in p{font-size:13px;color:var(--text2);line-height:1.5;padding-top:8px} .passo:hover,.passo:focus-visible,.passo.aberto{transform:translateY(-4px);border-color:var(--accent); box-shadow:var(--shadow-sm)} .passo:hover .passo-more,.passo:focus-visible .passo-more,.passo.aberto .passo-more{grid-template-rows:1fr} .passo:hover .passo-chev,.passo:focus-visible .passo-chev,.passo.aberto .passo-chev{transform:rotate(180deg);color:var(--accent)} .passo:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media(max-width:860px){ .passos{grid-template-columns:1fr 1fr} .passos::before,.passos::after{display:none} } @media(max-width:520px){ .passos{grid-template-columns:1fr;gap:10px} } /* ── 5 eixos: mesmo mecanismo de expansão, cartão com ícone (sem numeração) ── */ .eixos-lp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px;align-items:start} .eixo-lp{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:18px 16px 20px;cursor:pointer; transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s} .eixo-top{display:flex;align-items:center;justify-content:space-between} .eixo-ico{display:block;width:24px;height:24px;color:var(--accent);flex:none} .eixo-lp h3{font-size:14px;margin-top:14px;color:var(--text);text-wrap:balance} .eixo-resumo{font-size:12.5px;color:var(--text2);line-height:1.5;margin-top:6px} .eixo-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)} .eixo-more-in{overflow:hidden} .eixo-more-in p{font-size:12.5px;color:var(--text2);line-height:1.5;padding-top:8px} .eixo-lp:hover,.eixo-lp:focus-visible,.eixo-lp.aberto{transform:translateY(-5px);border-color:var(--accent); box-shadow:var(--shadow-sm)} .eixo-lp:hover .eixo-more,.eixo-lp:focus-visible .eixo-more,.eixo-lp.aberto .eixo-more{grid-template-rows:1fr} .eixo-lp:hover .eixo-chev,.eixo-lp:focus-visible .eixo-chev,.eixo-lp.aberto .eixo-chev{transform:rotate(180deg);color:var(--accent)} .eixo-lp:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media(max-width:900px){.eixos-lp{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:520px){.eixos-lp{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){ .passo,.passo-num,.passo-chev,.eixo-lp,.eixo-chev,.passos::after, .passo-more,.eixo-more{transition:none} } /* ── barra fixa inferior da LP: leva de volta ao formulário ─────────────── */ .cta-fixa-lp{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface); border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.35); transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1); padding:10px 0;visibility:hidden} .cta-fixa-lp.visivel{transform:none;visibility:visible} .cta-fixa-lp .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px} .cta-fixa-lp .info{font-size:13.5px;color:var(--text2);font-weight:600} .cta-fixa-lp .btn{white-space:nowrap} @media(max-width:600px){ .cta-fixa-lp .info{display:none} .cta-fixa-lp .wrap{justify-content:stretch} .cta-fixa-lp .btn{width:100%;text-align:center} } @media(prefers-reduced-motion:reduce){.cta-fixa-lp{transition:none}} /* link de WhatsApp com ícone (rodapé) */ .wa-link{display:inline-flex;align-items:center;gap:6px} .wa-link svg{flex:none} /* ── planos: exatamente dois (CONTRATO.md v2) ──────────────────────────── */ .planos-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch} @media(max-width:760px){.planos-grid{grid-template-columns:1fr}} .plano{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:28px 26px;display:flex;flex-direction:column;position:relative; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; } .plano:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)} .plano h3{font-size:19px;color:var(--text)} .plano .preco{margin-top:14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .plano .preco b{font-size:29px;font-family:var(--fonte-mono);font-weight:500;color:var(--text); letter-spacing:-.02em;font-variant-numeric:tabular-nums} .plano .preco small{font-size:12.5px;color:var(--muted2)} .plano .desc{font-size:14px;color:var(--text2);margin-top:14px;line-height:1.55} .plano ul{list-style:none;padding:0;margin:16px 0 0;font-size:13.5px;color:var(--text2);display:flex;flex-direction:column;gap:8px} .plano ul li{padding-left:22px;position:relative} .plano ul li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:800} .plano .rodape-plano{font-size:12px;color:var(--muted2);margin-top:14px} .plano .btn{margin-top:20px;align-self:flex-start;width:auto} .plano .btn.big{width:100%;align-self:stretch} .plano.destaque{ border-color:var(--accent); box-shadow:0 20px 40px rgba(196,145,78,.10); } .plano .badge{ position:absolute;top:-13px;left:26px;background:var(--accent-vivo);color:var(--accent-ink); font-size:11px;font-family:var(--fonte-mono);font-weight:500;letter-spacing:.08em; text-transform:uppercase;padding:5px 12px; } .planos-nota{text-align:center;font-size:12.5px;color:var(--muted2);margin-top:22px} /* ── FAQ / objeções ────────────────────────────────────────────────────── */ .faq{max-width:74ch} .faq details{border-bottom:1px solid var(--line);padding:16px 0} .faq details:first-child{border-top:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:15.5px;color:var(--text);display:flex; justify-content:space-between;align-items:center;gap:12px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';font-size:20px;color:var(--accent);flex:none;font-weight:400} .faq details[open] summary::after{content:'–'} .faq .a{color:var(--text2);font-size:14.5px;margin-top:12px;line-height:1.6} /* ── CTA final / blocos de conversão ──────────────────────────────────── */ .cta-block{background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:36px 28px;text-align:center} .cta-block h2{font-size:clamp(20px,3vw,27px);max-width:34ch;margin:0 auto;color:var(--text)} .cta-block p{color:var(--text2);margin-top:12px;max-width:52ch;margin-left:auto;margin-right:auto;font-size:15px} .cta-block .botoes{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap} .cta-inline{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .cta-inline p{font-size:15px;color:var(--text);max-width:40ch} .cta-inline p b{color:var(--accent)} /* ── rodapé ────────────────────────────────────────────────────────────── */ footer.rodape{padding:32px 0 44px;border-top:1px solid var(--line);color:var(--muted2);font-size:12.5px} footer.rodape .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} footer.rodape a{color:var(--muted2);text-decoration:underline} /* ═══════════════════════ LP — marquee, depoimentos, reveal ═══════════════════════ */ /* .btn.sm mora no bloco "botões (v8)" lá em cima, junto com .big — os três tamanhos precisam declarar a largura da aba, e separá-los deixava o .sm com a aba do tamanho normal. */ /* .topbar.is-sticky antigo (fundo translúcido + blur) morreu: o sticky agora é regra do próprio .topbar, com fundo sólido — ver bloco "topo fixo" acima. */ /* ── marquee de prova social (stats com fonte) ─────────────────────────── */ .prova-social .bloco-head{margin-bottom:0} .prova-marquee{ overflow:hidden;margin-top:30px;padding:6px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .prova-track{display:flex;gap:14px;width:max-content;animation:provaScroll 46s linear infinite;padding:0 20px} .prova-marquee:hover .prova-track{animation-play-state:paused} @keyframes provaScroll{to{transform:translateX(-50%)}} .prova-card{ flex:0 0 auto;width:246px;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-sm);padding:16px 18px; } .prova-card.stat b{display:block;font-size:22px;font-family:var(--fonte-mono);font-weight:500; color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .prova-card.stat p{font-size:12.5px;color:var(--text2);margin-top:6px;line-height:1.5} .prova-card.stat span{display:block;font-size:10.5px;color:var(--muted2);margin-top:8px;font-family:var(--fonte-mono)} @media(prefers-reduced-motion:reduce){ .prova-track{animation:none;overflow-x:auto;-webkit-overflow-scrolling:touch} .prova-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none} } /* ── depoimentos: carrossel lateral, separado do marquee de stats ──────── Só entra em tela via ?demo=depoimentos (ver JS) — enquanto não há cliente real, a seção fica [hidden] por padrão. ─────────────────────────────── */ .dep-marquee{ overflow:hidden;margin-top:30px;padding:6px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .dep-track{display:flex;gap:14px;width:max-content;animation:depScroll 55s linear infinite;padding:0 20px} .dep-marquee:hover .dep-track{animation-play-state:paused} @keyframes depScroll{to{transform:translateX(-50%)}} .dep-card{ flex:0 0 auto;width:288px;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-sm);padding:18px 20px;position:relative; } .dep-card .dep-tag{display:inline-block;font-size:9.5px;font-family:var(--fonte-mono);font-weight:500; letter-spacing:.08em;text-transform:uppercase;color:var(--warn);background:var(--warn-soft); padding:3px 9px;margin-bottom:10px} .dep-quote{font-size:13.5px;color:var(--text);line-height:1.55;font-style:italic} .dep-nome{font-size:13px;font-weight:600;color:var(--text);margin-top:12px} .dep-tipo{font-size:11.5px;color:var(--muted2);margin-top:2px} @media(prefers-reduced-motion:reduce){ .dep-track{animation:none;overflow-x:auto;-webkit-overflow-scrolling:touch} .dep-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none} } /* ── reveal on scroll ───────────────────────────────────────────────────── */ .rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease} .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}} @media(max-width:480px){ .plano{padding:22px 20px} .prova-card{width:206px} .dep-card{width:240px} } /* ══ FECHO — a faixa escura que termina TODA página ═══════════════════════ Era um componente pela metade: as regras que faziam o fecho ser escuro viviam presas em `body.home-v5 .criva-final*`, e só a home carrega essa classe. Nas outras a mesma marcação herdava um fecho CLARO, e o Bruno viu duas casas diferentes na mesma marca. Agora o componente é um só e vale pra `/`, `/mapa`, `/gestao`, `/pacote`, `/conteudo/` e os 60 posts. A home não sobrescreve nada de cor aqui — só o que é dela (respiro maior, largura do miolo). A FAIXA é a única superfície em tinta funda do site, com a malha do §07 em grau 1 (presença mínima) como estrutura de fundo: filete de 1px a cada 7px, 3% de papel sobre a tinta funda. Era uma GRADE de quadrados 11×11 — trama cruzada, que o §08 não admite ("a malha é sempre horizontal") e que nem malha era. Agora são faixas horizontais, um passo só de densidade. A ASSINATURA é a variação PRINCIPAL · COM DESCRITOR do §03: lettering tramado com o descritor embaixo, alinhado à esquerda dele. No topo mora a HORIZONTAL; as duas juntas são as duas variações que o manual desenha pra assinatura, cada uma no espaço que pede por ela. O FUNDO REDEFINE OS BOTÕES. Quem escreve `.btn` dentro do fecho não precisa saber que caiu num fundo escuro: o próprio fecho troca as variáveis (ver o bloco de botões no fim daqui). É o que faz os 60 posts, que escrevem `.btn big`, ficarem certos sem tocar em 60 arquivos. `.cta-block` continua servindo relatorio.html sem mudar. ─────────────── */ .criva-final{ position:relative;overflow:hidden; background-color:var(--tinta-funda);color:var(--bg); background-image:repeating-linear-gradient(180deg, color-mix(in srgb,var(--bg) 3%,transparent) 0 1px,transparent 1px 7px); border-top:0;padding:72px 0 0; } /* o facho de luz do fecho claro não existe mais: numa faixa em tinta funda ele virava uma mancha suja. Fica a regra vazia porque as 65 páginas ainda trazem a
no HTML, e some sozinha quando o motor de posts limpar a marcação. */ .criva-final-beam{display:none} .criva-final-in{position:relative;z-index:1;max-width:640px;margin:0 auto;text-align:center} /* Assinatura PRINCIPAL (§02/§03): semibold, tracking 0,08em, trama horizontal em PAPEL sobre a tinta funda. O corpo vai de 44px a 64px — os dois tamanhos em que o manual desenha a marca tramada. A trama é a aberta do §04, a mesma do topo, pra que a mesma página não tenha duas texturas de marca. */ .criva-final-marca{ display:inline-block;font-family:var(--fonte-sans);font-weight:600; font-size:clamp(44px,7vw,64px);line-height:1;letter-spacing:.08em;margin-right:-.08em; text-transform:uppercase; color:transparent; background-image:repeating-linear-gradient(var(--papel) 0 var(--malha-filete),transparent var(--malha-filete) var(--malha-passo)); -webkit-background-clip:text;background-clip:text; } /* descritor da assinatura principal: mono, caixa alta, tracking 0,33em, alinhado à esquerda do lettering (§02). 12,98:1 sobre a tinta funda. */ .criva-final-desc{display:block;font-family:var(--fonte-mono);font-weight:500;font-size:11px; letter-spacing:.33em;margin:14px -.33em 0 0;text-transform:uppercase;color:var(--nevoa)} /* O ícone de grade que vivia aqui era da proposta REJEITADA (a marca como grade, com o C em negativo). Some da tela; a marcação continua nos 60 posts até o motor de conteúdo limpar. Nas 5 páginas desta frente ele já saiu do HTML. */ .criva-final-ico{display:none} .criva-final-kicker{display:block;font-size:11.5px;font-family:var(--fonte-mono);font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--latao-claro);margin:52px 0 14px} .criva-final h2{font-size:clamp(24px,3.4vw,33px);color:var(--bg);max-width:26ch;margin:0 auto} .criva-final .criva-final-in > p{color:var(--nevoa);margin-top:14px;font-size:15.5px; max-width:50ch;margin-left:auto;margin-right:auto} .criva-final-botoes{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap} .criva-final-botoes .btn{width:auto;min-width:230px} .criva-final-quiet{display:inline-block;color:var(--nevoa);font-size:13px;text-decoration:underline} .criva-final-quiet:hover{color:var(--bg)} /* o .criva-final-quiet sozinho é um link solto embaixo dos botões (home, posts); dentro de .criva-final-nota ele é o link de uma frase (pacote) */ .criva-final-in > .criva-final-quiet{margin-top:22px} .criva-final .criva-final-in > p.criva-final-nota{margin-top:22px;font-size:13px;color:var(--nevoa)} /* ── os botões dentro do fecho falam a língua do fundo escuro ────────────── */ .criva-final .btn{ --btn-bg:var(--latao-claro);--btn-ink:var(--tinta-funda);--btn-aba:var(--tinta-funda); --btn-base:rgba(0,0,0,.55);--btn-sombra:rgba(0,0,0,.45); } .criva-final .btn.ghost,.criva-final .btn.fantasma-escuro{ --btn-bg:transparent;--btn-ink:var(--bg);--btn-aba:var(--nevoa); --btn-base:rgba(0,0,0,.5);--btn-sombra:rgba(0,0,0,.35); border:1.5px solid var(--nevoa); } .criva-final .btn.ghost:hover,.criva-final .btn.fantasma-escuro:hover{ background:color-mix(in srgb,var(--bg) 8%,transparent);border-color:var(--bg); } .criva-final .btn:focus-visible{outline-color:var(--latao-claro)} .criva-final .btn.ghost:focus-visible,.criva-final .btn.fantasma-escuro:focus-visible{outline-color:var(--latao-claro)} /* ── o rodapé mora DENTRO da faixa: uma faixa só, como o manual fecha ───── Duas formas de marcação convivem sem divergir de aparência: a home aninha o