/* ========================================================================== LA'CARV ADVOGADOS ASSOCIADOS · branding.css (a pele: tokens de marca) Estrutura e comportamento ficam em site.css. Nunca escrever hex aqui fora do bloco de paleta, e nunca escrever hex dentro de site.css. Criado em 18/08/2026. PALETA FECHADA. Sao estas cores e so estas. Cor nova depois disto e decisao consciente, documentada aqui, e revalidada por tools/verifica-contraste.php antes de entrar. token hex papel contraste medido --deep #15333B fundo principal (petroleo) base --ink #183236 cards e superficie escura secundaria base --slate #243D3E grafismos, faixas, arvore base --gold #CAB070 destaque, icone, filete, TEXTO/escuro 6.35 sobre deep AA --gold-lift #D2BD87 hover do gold sobre escuro 7.25 sobre deep AA --gold-ink #78643A gemeo legivel: TEXTO dourado/papel 4.71 sobre paper+atmosfera AA --brand #B59D64 preenchimento de botao 5.08 sobre deep AA --edge #A3874C bordas e detalhes (nunca texto) 3.91 sobre deep --gold-dim #8B7343 filete discreto, hover (nunca texto) 2.95 sobre deep --support #7F7656 apoio decorativo (nunca texto) 2.95 sobre deep --text-1 #B3B3B1 texto corrido sobre escuro 6.38 sobre deep AA --text-2 #BAB094 texto secundario quente sobre escuro 6.20 sobre deep AA --paper #F4F1E9 superficie clara (derivada) 11.86 vs deep AA --paper-2 #FBF9F3 superficie clara maxima (derivada) 12.72 vs deep AA DERIVADAS: --paper e --paper-2 nao vieram da lista original do cliente. Foram acrescentadas porque a lista nao tinha superficie clara, e uma pagina inteira em petroleo cansa a leitura. Ambas sao papel quente, na familia da marca, e passam AA com folga contra o ink. EXCECAO DOCUMENTADA (lista KEEP, §28.6): o VERDE DO WHATSAPP entra como cor funcional isolada, e so no botao flutuante e no cartao do desenvolvedor. Ele nao e cor de marca da La'Carv e nunca deve aparecer em texto, filete, icone de secao ou fundo. Os CTAs dentro da pagina seguem dourados. Os tons NAO sao os da marca do app crua: #25D366 com glifo branco da 1.98:1, e o minimo para grafico e 3:1. Medido e escolhido: --wa #17A74F disco, glifo branco a 3.15:1, 4.26:1 sobre petroleo --wa-deep #0B7A4F fim do degrade do disco --wa-vivid #25D366 SO no halo e no pulso, nunca sob o glifo PROFUNDIDADE VEM DE color-mix, NAO DE MATIZ NOVO (§28.1). TETO DA CAMADA DE ATMOSFERA (medido, nao chutado). A atmosfera fica ENTRE o fundo solido e o texto, entao o contraste que vale e o do fundo COMPOSTO. Cada tema tem um teto de opacidade acima do qual o texto mais fraco daquele tema cai abaixo de 4.5:1: hero/deep 10.2% · deep 11.5% · ink 16.2% · slate 8.2% Os valores em uso ficam abaixo do teto, com folga. Mexeu na atmosfera, roda tools/verifica-contraste.php de novo antes de publicar. ========================================================================== */ :root{ /* ---- 1. paleta ------------------------------------------------------ */ --deep:#15333B; --ink:#183236; --slate:#243D3E; --gold:#CAB070; --gold-lift:#D2BD87; --gold-ink:#78643A; --brand:#B59D64; --edge:#A3874C; --gold-dim:#8B7343; --support:#7F7656; --text-1:#B3B3B1; --text-2:#BAB094; --paper:#F4F1E9; --paper-2:#FBF9F3; /* verde funcional do WhatsApp, fora da paleta de marca (ver nota acima) */ --wa:#17A74F; --wa-deep:#0B7A4F; --wa-vivid:#25D366; /* ---- 1b. cor de categoria (arco de matiz) ---------------------------- */ /* A paleta de MARCA continua fechada. Estas nao sao cores de marca, sao cores de CATEGORIA, e seguem o padrao aprovado do portfolio: um arco de matiz continuo entre as duas cores-mae. O petroleo esta em ~194 e o dourado em ~40, entao o arco desce por teal, verde, oliva e ambar sem passar por matiz nenhum de fora da marca. Cada uma se adapta ao tema por color-mix com a tinta da secao (ver --cat-on em site.css), entao UM token serve claro e escuro. Contraste medido do resultado: pior caso 4.13:1, e o minimo para icone e filete e 3:1. Ordem FIXA, nunca ciclada (§28.5). */ --cat-1:#43889D; /* estatutos e regularizacao */ --cat-2:#439D91; /* atas e assembleias */ --cat-3:#439D70; /* contratos e pareceres */ --cat-4:#439D4F; /* editais e chamamentos */ --cat-5:#589D43; /* fomento e convenios */ --cat-6:#799D43; /* governanca e compliance */ --cat-7:#9A9D43; /* execucao de projetos */ --cat-8:#9D7F43; /* prestacao de contas */ /* ---- 2. container unico (§5.4) -------------------------------------- */ /* Um valor so. Header, hero, toda secao e footer usam .container. */ --container-w:1220px; --container-pad:clamp(20px,5vw,44px); --container-narrow:820px; /* ---- 3. tipografia --------------------------------------------------- */ /* Archivo (grotesca institucional) para display, Inter para leitura. */ /* Serifa e italico banidos globalmente, ver reset em site.css. */ /* Instrument Sans no lugar da Archivo. A Archivo 800 e uma grotesca de peso institucional pesado: em caixa alta ela vira bloco. A Instrument Sans tem eixo mais estreito, terminais mais finos e desenho editorial, entao o mesmo tamanho le como sofisticado em vez de grosso. Continua sans, sem italico e sem serifa (§4.2). Peso maximo de titulo caiu de 800 para 600 pelo mesmo motivo. */ --f-display:"Instrument Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; /* Piso de 11.5px no eyebrow: caixa alta com tracking largo abaixo disso */ /* fica cansativa de ler no celular. */ --fs-eyebrow:clamp(.72rem,.66rem + .2vw,.78rem); --fs-micro:clamp(.75rem,.7rem + .2vw,.82rem); --fs-sm:clamp(.86rem,.83rem + .16vw,.94rem); --fs-body:clamp(.98rem,.94rem + .22vw,1.075rem); --fs-lead:clamp(1.06rem,1rem + .42vw,1.28rem); --fs-h4:clamp(1.06rem,1rem + .38vw,1.24rem); --fs-h3:clamp(1.24rem,1.12rem + .62vw,1.62rem); --fs-h2:clamp(1.72rem,1.4rem + 1.72vw,3rem); /* O H1 sao TRES frases, nao uma. Escala calibrada para o bloco inteiro */ /* caber na primeira dobra sem virar parede de letra: a hierarquia entre */ /* as tres linhas e que carrega a mensagem, nao o tamanho bruto. */ /* Calibrado para cada uma das TRES frases caber em UMA linha na coluna de texto do hero (700px no desktop). Antes, a 51px, o bloco quebrava em 5 linhas e virava parede. Menos corpo, mais leitura. */ --fs-h1:clamp(1.78rem,1.35rem + 1.55vw,2.55rem); --fs-display:clamp(2.6rem,1.7rem + 4.3vw,5.6rem); --fs-stat:clamp(2.1rem,1.5rem + 2.9vw,3.8rem); --lh-tight:1.04; --lh-head:1.12; --lh-body:1.68; --ls-display:-.035em; --ls-head:-.022em; --ls-eyebrow:.19em; /* ---- 4. raio --------------------------------------------------------- */ /* A marca e organica (folha, copa, prato de balanca): raio suave, nunca */ /* quadrado seco. Pill so em botao e chip. */ --r-xs:5px; --r-sm:9px; --r:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px; /* ---- 5. sombra (empilhada, nunca uma so) ----------------------------- */ --sh-sm: 0 1px 2px rgba(6,20,24,.24), 0 2px 8px rgba(6,20,24,.16); --sh: 0 2px 4px rgba(6,20,24,.20), 0 10px 26px rgba(6,20,24,.24), inset 0 1px 0 rgba(244,241,233,.05); --sh-lg: 0 4px 10px rgba(6,20,24,.22), 0 24px 60px rgba(6,20,24,.34), inset 0 1px 0 rgba(244,241,233,.07); --sh-gold: 0 2px 6px rgba(21,51,59,.28), 0 12px 30px rgba(202,176,112,.24), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(21,51,59,.20); --sh-paper: 0 1px 2px rgba(21,51,59,.05), 0 8px 24px rgba(21,51,59,.07); --sh-paper-lg: 0 2px 4px rgba(21,51,59,.05), 0 20px 48px rgba(21,51,59,.11); /* ---- 6. movimento ---------------------------------------------------- */ --e-out:cubic-bezier(.22,1,.36,1); --e-in-out:cubic-bezier(.65,0,.35,1); --e-spring:cubic-bezier(.34,1.56,.64,1); --t-fast:.18s; --t:.32s; --t-slow:.62s; /* ---- 7. estrutura ---------------------------------------------------- */ --header-h:104px; --dock-h:66px; --sec-pad:clamp(72px,9.5vw,148px); --gap:clamp(16px,2.2vw,28px); /* ---- 8. escala de ritmo vertical -------------------------------------- */ /* Um degrau so, usado em toda a pagina. Substitui os margin-top soltos */ /* escritos no HTML, que faziam cada bloco respirar diferente. */ --sp-1:8px; --sp-2:12px; --sp-3:18px; --sp-4:26px; --sp-5:clamp(30px,3.2vw,40px); --sp-6:clamp(38px,4.4vw,58px); --sp-7:clamp(50px,5.8vw,80px); --sp-8:clamp(62px,7.2vw,104px); /* ---- 8b. motion por categoria ---------------------------------------- */ /* Quatro faixas de duracao, uma por natureza de movimento. Sem isto todo efeito acaba em .32s e a pagina fica com um so ritmo, o que e o mesmo erro de ter um so tipo de reveal. Os tokens antigos (--t, --t-fast, --t-slow) continuam validos: estes complementam, nao substituem. */ --t-micro:.16s; /* hover, icone, press, sublinhado */ --t-ui:.30s; /* menu, acordeao, header, drawer */ --t-enter:.60s; /* bloco, imagem, grafico entrando na tela */ --t-story:.95s; /* diagrama, linha, momento assinatura */ --e-emph:cubic-bezier(.2,.8,.2,1); --e-draw:cubic-bezier(.35,.9,.25,1); --shift-micro:2px; --shift-enter:22px; /* ---- 8c. camada de efeito (opacidade, nunca cor nova) ------------------ */ --fx-grid:64px; --fx-grid-opacity:5.5%; --fx-line-opacity:18%; --fx-glow-opacity:14%; --blur-ui:18px; --blur-hero:24px; /* ---- 8d. sistema de camadas (z-index) --------------------------------- */ /* Um valor por papel. Nada de 9999 improvisado. */ --z-atmo:-2; /* iluminacao da secao */ --z-pattern:-1; /* estrutura quase invisivel */ --z-content:1; /* conteudo */ --z-detail:2; /* detalhe flutuante local */ --z-float:45; /* CTA flutuante */ --z-dock:50; --z-mega:55; --z-header:60; --z-scrim:70; --z-drawer:80; /* ---- 9. elevacao ------------------------------------------------------ */ /* Duas camadas sempre: luz que bate na aresta de cima (inset) + sombra */ /* projetada. Sem o inset o card fica recortado, colado no fundo. */ --el-1: 0 1px 1px rgba(6,20,24,.20), 0 2px 6px rgba(6,20,24,.14), inset 0 1px 0 rgba(244,241,233,.055); --el-2: 0 2px 4px rgba(6,20,24,.20), 0 12px 28px rgba(6,20,24,.24), inset 0 1px 0 rgba(244,241,233,.075); --el-3: 0 4px 10px rgba(6,20,24,.22), 0 28px 64px rgba(6,20,24,.36), inset 0 1px 0 rgba(244,241,233,.10); --el-p1: 0 1px 1px rgba(21,51,59,.045), 0 3px 8px rgba(21,51,59,.055), inset 0 1px 0 #FFFFFF; --el-p2: 0 2px 4px rgba(21,51,59,.05), 0 14px 32px rgba(21,51,59,.08), inset 0 1px 0 #FFFFFF; --el-p3: 0 4px 8px rgba(21,51,59,.05), 0 30px 64px rgba(21,51,59,.12), inset 0 1px 0 #FFFFFF; } /* ========================================================================== TEMAS DE SECAO (§29): a secao DECLARA, nao pinta.
e todo filho consome --s-*. Inverter uma secao passa a ser trocar uma palavra. Proibido escrever cor crua dentro de secao. ========================================================================== */ [data-sec]{ background:var(--s-bg); color:var(--s-ink-2); } /* --- superficies escuras ------------------------------------------------ */ [data-sec="deep"], [data-sec="ink"], [data-sec="slate"]{ --s-ink:var(--paper); /* titulo 11.9 */ --s-ink-2:var(--text-1); /* corpo 6.4 */ --s-ink-3:var(--text-2); /* meta 6.2 */ --s-accent:var(--gold); /* texto 6.4 */ --s-accent-hover:var(--gold-lift); --s-accent-fill:var(--gold); --s-on-accent:var(--deep); --s-scheme:dark; } [data-sec="deep"]{ --s-bg:var(--deep); /* luz vindo do alto a DIREITA */ --s-atmo: radial-gradient(118% 78% at 88% -12%, color-mix(in srgb,var(--gold) 10%,transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb,#FFFFFF 2.4%,transparent), transparent 22%, transparent 74%, rgba(6,20,24,.30)); --s-edge:color-mix(in srgb,var(--gold) 17%,transparent); --s-card:color-mix(in srgb,#FFFFFF 4.5%,var(--deep)); --s-card-2:color-mix(in srgb,#FFFFFF 8%,var(--deep)); --s-line:color-mix(in srgb,#FFFFFF 13%,var(--deep)); --s-line-soft:color-mix(in srgb,#FFFFFF 7%,var(--deep)); } [data-sec="ink"]{ --s-bg:var(--ink); /* luz vindo do alto a ESQUERDA: duas secoes escuras seguidas nao podem ter a mesma iluminacao, senao viram a mesma tela duas vezes */ --s-atmo: radial-gradient(104% 72% at 8% -8%, color-mix(in srgb,var(--gold) 8%,transparent), transparent 58%), linear-gradient(180deg, rgba(6,20,24,.20), transparent 18%, transparent 78%, rgba(6,20,24,.24)); --s-edge:color-mix(in srgb,var(--gold) 15%,transparent); --s-card:color-mix(in srgb,#FFFFFF 5%,var(--ink)); --s-card-2:color-mix(in srgb,#FFFFFF 9%,var(--ink)); --s-line:color-mix(in srgb,#FFFFFF 13%,var(--ink)); --s-line-soft:color-mix(in srgb,#FFFFFF 7%,var(--ink)); } [data-sec="slate"]{ --s-bg:var(--slate); /* luz zenital, centralizada */ --s-atmo: radial-gradient(92% 74% at 50% -16%, color-mix(in srgb,var(--gold) 7%,transparent), transparent 60%), linear-gradient(180deg, rgba(6,20,24,.22), transparent 20%, transparent 78%, rgba(6,20,24,.26)); --s-edge:color-mix(in srgb,var(--gold) 19%,transparent); --s-card:color-mix(in srgb,#FFFFFF 5.5%,var(--slate)); --s-card-2:color-mix(in srgb,#FFFFFF 10%,var(--slate)); --s-line:color-mix(in srgb,#FFFFFF 15%,var(--slate)); --s-line-soft:color-mix(in srgb,#FFFFFF 8%,var(--slate)); } /* --- superficies claras ------------------------------------------------- */ [data-sec="paper"], [data-sec="paper-2"]{ --s-ink:var(--deep); /* titulo 11.9 */ --s-ink-2:color-mix(in srgb,var(--deep) 80%,var(--s-bg)); /* corpo ~7.7 */ /* 64% reprovava: dava 3.88:1 sobre o papel ja composto com a atmosfera. Token DERIVADO nunca tinha passado pelo validador, que so olhava os hex declarados. 30 elementos abaixo de AA. Corrigido em 18/08/2026. */ --s-ink-3:color-mix(in srgb,var(--deep) 71%,var(--s-bg)); /* meta 4.71 no pior fundo */ --s-accent:var(--gold-ink); /* texto 4.7 */ --s-accent-hover:var(--deep); --s-accent-fill:var(--gold); /* preenchimento e filete, nunca texto */ --s-on-accent:var(--deep); --s-scheme:light; } [data-sec="paper"]{ --s-bg:var(--paper); /* papel iluminado por cima, com um leve calor dourado no canto */ --s-atmo: radial-gradient(88% 58% at 94% -4%, color-mix(in srgb,var(--gold) 12%,transparent), transparent 56%), linear-gradient(180deg, var(--paper-2), transparent 32%); --s-edge:color-mix(in srgb,var(--gold) 40%,transparent); --s-card:var(--paper-2); --s-card-2:#FFFFFF; --s-line:color-mix(in srgb,var(--deep) 15%,var(--paper)); --s-line-soft:color-mix(in srgb,var(--deep) 8%,var(--paper)); } [data-sec="paper-2"]{ --s-bg:var(--paper-2); --s-atmo: radial-gradient(80% 54% at 6% -4%, color-mix(in srgb,var(--gold) 12%,transparent), transparent 54%); --s-edge:color-mix(in srgb,var(--gold) 36%,transparent); --s-card:var(--paper); --s-card-2:#FFFFFF; --s-line:color-mix(in srgb,var(--deep) 14%,var(--paper-2)); --s-line-soft:color-mix(in srgb,var(--deep) 7%,var(--paper-2)); } /* --- faixa de marca ----------------------------------------------------- */ /* Fundo dourado solido com tinta petroleo: 6.35:1, o par mais forte da */ /* paleta. Usada so em faixa curta de CTA, nunca em bloco longo de leitura. */ [data-sec="brand"]{ --s-bg:var(--gold); /* brilho de metal atravessando a faixa, nao um chapado de tinta */ --s-atmo: radial-gradient(66% 130% at 76% 46%, color-mix(in srgb,#FFFFFF 30%,transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb,#FFFFFF 14%,transparent), transparent 42%, color-mix(in srgb,var(--deep) 9%,transparent)); --s-edge:color-mix(in srgb,var(--deep) 22%,transparent); --s-ink:var(--deep); --s-ink-2:color-mix(in srgb,var(--deep) 88%,var(--gold)); --s-ink-3:color-mix(in srgb,var(--deep) 72%,var(--gold)); --s-accent:var(--deep); --s-accent-hover:var(--ink); --s-accent-fill:var(--deep); --s-on-accent:var(--gold); --s-card:color-mix(in srgb,#FFFFFF 26%,var(--gold)); --s-card-2:color-mix(in srgb,#FFFFFF 40%,var(--gold)); --s-line:color-mix(in srgb,var(--deep) 26%,var(--gold)); --s-line-soft:color-mix(in srgb,var(--deep) 14%,var(--gold)); --s-scheme:light; }