/* ═══════════════════════════════════════════════════════════════ PALETA DO AGRONEGOCIO — Pantone 3308 C · 7505 C · Warm Gray 7 C ═══════════════════════════════════════════════════════════════ Par de `cores-institucional.css`: mesmos tokens, mesmos papeis, valores diferentes. Nenhuma regra de layout aqui. Uso na pagina — as cores ANTES da estrutura: Sobre o par `-rgb` de cada cor, veja o cabecalho de `cores-institucional.css`: a explicacao vale igual aqui. ── O que distingue esta paleta ───────────────────────────────── Duas coisas, e as duas importam para quem for editar. A primeira: aqui `--marca` e `--acento` sao cores DIFERENTES. A faixa escura e o verde 3308 C; o botao e o filete sao o terracota 7505 C. Na paleta institucional os dois papeis colapsam no mesmo 296 C. E por isso que os dois tokens existem separados — se fossem um so, o agro perderia o contraste que o distingue. A segunda: o terracota e acento de FUNDO CLARO. Sobre o verde ele rende 2,3:1, ilegivel. Sobre a faixa escura quem faz esse papel e o `--claro`, o Warm Gray clareado. Trocar um pelo outro quebra o contraste nas duas direcoes. ── Quem usa esta paleta ──────────────────────────────────────── As paginas de especialidade de `/rural/` e as copias por cidade em `advogado-/rural/`. ═══════════════════════════════════════════════════════════════ */ :root { /* ── SUPERFICIE ESCURA ──────────────────────────────────────── O fundo das faixas escuras: hero, faixa de destaque, rodape. Pantone 3308 C. */ --marca: #004639; --marca-rgb: 0 70 57; /* O mesmo verde rebaixado, so para os veus sobre fotografia — o degrade que escurece a imagem do hero e o do fechamento. */ --marca-funda-rgb: 0 38 31; /* ── ACENTO SOBRE SUPERFICIE CLARA ──────────────────────────── Botao principal, filete sob o titulo, marcador de lista, foco. Pantone 7505 C. NAO usar sobre a faixa escura: sobre o verde rende 2,3:1. */ --acento: #864b34; --acento-hover: #6f3e2b; /* terracota fechado, so no hover */ --acento-rgb: 134 75 52; /* o acento em transparencia */ /* ── ACENTO SOBRE SUPERFICIE ESCURA ─────────────────────────── O papel que o terracota nao pode cumprir. Warm Gray 7 C clareado: o tom puro (#948c82) sobre o verde rende 3,27:1, abaixo de AA; clareado chega a 5,51:1. */ --claro: #bdb8b2; --claro-rgb: 189 184 178; /* ── SUPERFICIES CLARAS ─────────────────────────────────────── A primeira e a mesma da paleta institucional: Cool Gray 09 C a 6% no branco. A segunda e QUENTE — Warm Gray 7 C diluido a 30% —, e e essa diferenca de temperatura que mantem as duas faixas claras distinguiveis quando aparecem lado a lado. O tom cheio seria medio demais: o texto sobre ele rende 5,24:1, que passa AA mas cansa em leitura corrida; diluido chega a 12,74:1. */ --superficie: #f2f4f5; --superficie-2: #dfdcda; --superficie-2-rgb: 223 220 218; /* ── TINTA ──────────────────────────────────────────────────── A tinta NAO e o verde: e o Pantone 296 C, o dark da casa, que esta folha ja usava para titulos, sombras, bordas de campo e preenchimentos sutis de hover. O valor e identico ao da paleta institucional, e e proposital — o que muda entre as areas e a cor de marca, nao a cor do texto. `--tinta-suave` e o corpo de texto: o Cool Gray 09 C puro rende 4,46:1 no branco, abaixo de AA; escurecido, 6,37:1. */ --tinta: #031c2d; --tinta-rgb: 3 28 45; --tinta-suave: #5a6065; /* ── NEUTROS ────────────────────────────────────────────────── `--sombra-rgb` e preto puro, reservado as sombras que precisam de neutralidade; as demais usam `--tinta-rgb`. */ --branco: #ffffff; --branco-rgb: 255 255 255; --sombra-rgb: 0 0 0; /* ── PAPEIS FIXOS ───────────────────────────────────────────── Cores que nao mudam entre as areas, mas que ficam aqui para que a folha de estrutura nao guarde nenhum valor literal. `--rodape` e o 296 C, e NAO o verde: mesmo nesta paleta o rodape usa o dark da casa. Por isso ele nao acompanha `--marca` — sao papeis distintos. */ --rodape: #031c2d; --erro: #8a2f1c; /* mensagem de campo invalido */ /* ── BOTAO SOBRE FAIXA ESCURA ───────────────────────────────── Aqui o botao NAO inverte: o terracota se destaca sobre o verde, entao os valores repetem os do botao das faixas claras. Na paleta institucional, onde o botao seria navy sobre navy, estes tokens recebem branco e navy — e a inversao acontece so la. */ --btn-escuro-fundo: #864b34; --btn-escuro-fundo-hover: #6f3e2b; --btn-escuro-texto: #ffffff; /* ── CIRCULO DO ICONE DE SOLUCAO, NA FAIXA ESCURA ───────────── Disco opaco em terracota, sem contorno: sobre o verde ele ja se destaca. E o comportamento que esta folha sempre teve. */ --icone-fundo-escuro: #864b34; --icone-borda-escuro: 0 none; /* sem borda: o disco e opaco */ /* ── FOTOGRAFIAS DE FUNDO ───────────────────────────────────── Nao sao cor, mas sao identidade da area e mudam junto com ela. O gado atras do bloco de contato e o trigal sob o veu da secao de equipe — as duas imagens que distinguem esta area. Caminho ABSOLUTO, sempre: esta folha usava `images/…`, relativo ao proprio arquivo em /rural/. A partir da folha compartilhada, em /assets/css/, o mesmo relativo resolveria para o lugar errado. O absoluto aponta para o mesmo arquivo de antes. */ --foto-fechamento: url('/rural/images/contact-bg.jpg'); --foto-equipe: url('/rural/images/hero-bg08.jpg'); /* ── CONTEXTO: PAGINAS DE AREA (HUB) ────────────────────────── ATENCAO: aqui os valores NAO sao os mesmos de cima. A folha de hub do agro declara `:root` DUAS vezes. O primeiro bloco ainda traz os tons da identidade anterior (creme #f4efe4, texto #1a1a1a/#4a4a4a); o segundo os corrige — e e o segundo que o navegador aplica. Ou seja: a tinta do hub do agro ja e a mesma do resto do site, e so o CREME sobreviveu, porque o segundo bloco nao o redeclara. Por isso `--tinta-hub` e `--tinta-suave-hub` repetem os valores de cima, e so a superficie difere: `.hero-card`, `.sec--clara` e o hover do pilar continuam creme nesta area. */ --superficie-hub: #f4efe4; /* creme — o unico tom antigo que sobreviveu */ --cartao-fundo-rgb: 247 244 241; /* pe do gradiente dos cartoes — nem o creme, nem a superficie */ --tinta-hub: #031c2d; /* igual a `--tinta`: o hub ja foi corrigido */ --tinta-suave-hub: #5a6065; /* idem `--tinta-suave` */ /* hover do botao pintado com a cor de marca (`.btn-verde`) */ --marca-hover: #00594a; }