/* ====== design system: tokens.css ====== */
/* =============================================================================
ESTÚDIO BRASA — DESIGN SYSTEM
Tokens: cor, tipo, espaço. Fonte única de verdade.
Decidido com o Yuri em 13/08/2026, a partir do logo 2026 e dos três
carrosséis de referência em Z:\ELEMENTOS\Estudio ID Visual 2026\.
⛔ As fontes são ARQUIVO, nunca link de CDN. Página de Artifact bloqueia
host externo — fonte linkada cai em substituta sem avisar.
============================================================================= */
/* --- Fontes -----------------------------------------------------------------
Caminho relativo a este arquivo. Em página que precisa ser autossuficiente
(Artifact, PDF), embutir como data URI em vez de referenciar o arquivo. */
@font-face {
font-family: "Anton";
src: url("/fontes/Anton-Regular.ttf") format("truetype");
font-weight: 400; /* peso ÚNICO — não existe Anton Light */
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Inter";
src: url("/fontes/Inter[opsz,wght].ttf") format("truetype-variations");
font-weight: 100 900;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Fira Code";
src: url("/fontes/FiraCode[wght].ttf") format("truetype-variations");
font-weight: 300 700;
font-style: normal;
font-display: block;
}
:root {
/* ==========================================================================
COR — cinco valores, e mais nenhum.
⛔ REGRA DE IDENTIDADE: a paleta é RELEITURA das cores do Brasil, não
citação literal. O verde é limão neon, não o #009C3B da bandeira; o
âmbar não é o amarelo-ouro. Nunca "corrigir" para os tons oficiais.
(Decisão do Yuri, 13/08/2026.)
========================================================================== */
--brasa-verde: #A4FF00; /* a marca. Medido no vetor do logo 2026 */
--brasa-preto: #000000; /* impacto: tela com foto, capa, abertura */
--brasa-giz: #EDEBE1; /* leitura: case escrito, documento, artefato */
--brasa-ambar: #FFA900; /* SÓ a marcação à mão — ver regra abaixo */
--brasa-branco: #FFFFFF; /* texto sobre foto */
/* ⛔ O ÂMBAR NUNCA É FUNDO, NUNCA É TEXTO, NUNCA É ÍCONE.
Ele é exclusivamente o risco desenhado por cima da palavra.
Verificado nos 14 cards de referência: em nenhum ele tem outro papel. */
/* --- Neutros derivados ---------------------------------------------------
Viés levíssimo de verde-amarelo herdado do próprio verde da marca — é o
que faz o neutro parecer escolhido, e não cinza de sistema. */
--tinta: #0A0B09; /* preto de superfície, um pouco acima do puro */
--papel: #F2F0E8; /* segundo nível do claro: cartão sobre o Giz */
--sobre-escuro: #E8EAE2; /* texto no escuro */
--meia-escuro: #8E9287; /* texto secundário no escuro */
--fio-escuro: rgba(232, 234, 226, 0.15);
--sobre-claro: #22241C; /* texto no claro */
--meia-claro: #6B6E62; /* texto secundário no claro */
--fio-claro: rgba(34, 36, 28, 0.15);
/* Vindos do painel do BrasaChat (protótipo aprovado pelo Yuri em 08/10/2026,
acrescentados em 09/10/2026). Não são cor nova: são o Giz um degrau
abaixo, o mesmo fio do claro mais marcado e o preto pela metade.
Quem usa: a seção 7 do componentes.css (formulário e estado). */
--superf: #E4E2D7; /* passar o mouse no claro: Giz um degrau abaixo */
--fio-forte: rgba(34, 36, 28, 0.32); /* cartão e campo no claro */
--veu-modal: rgba(0, 0, 0, 0.5); /* escurece a página atrás da janela */
/* ==========================================================================
TIPO — três papéis, e cada um só faz o seu.
========================================================================== */
--fonte-titulo: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
--fonte-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--fonte-destaque: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
/* A Sink é a fonte do LOGO e SÓ do logo (decisão do Yuri, 13/08/2026).
Ela mora em logo/, fora de fonts/, de propósito. Não usar em material. */
/* --- Pesos ---------------------------------------------------------------
Anton tem peso único. Inter e Fira Code são variáveis. */
--peso-corpo: 300; /* Inter no texto longo — leve, como pedido */
--peso-corpo-claro:350; /* no Giz precisa de um toque a mais que no preto */
--peso-forte: 600; /* Inter em ênfase dentro do parágrafo */
--peso-negrito: 700; /* Inter no título de bloco, janela e "Atenção"
(painel do BrasaChat, 08/10/2026) */
--peso-black: 900; /* Inter Black — alternativa ao Anton em UI densa */
--peso-destaque: 600; /* Fira Code em rótulo e selo */
/* --- Escala de tipo (tela) -----------------------------------------------
Fluida: encolhe no celular sem quebrar hierarquia. */
--t-display: clamp(2.4rem, 7vw, 4.5rem); /* abertura de página */
--t-h1: clamp(1.9rem, 5vw, 3rem);
--t-h2: clamp(1.45rem, 3.4vw, 2.1rem);
--t-h3: 1.15rem;
--t-corpo: 1.03rem;
--t-corpo-g: 1.15rem; /* lead, primeiro parágrafo */
--t-peq: 0.9rem;
--t-rotulo: 0.68rem; /* caixa alta + tracking */
--lh-titulo: 1.04;
--lh-corpo: 1.7;
--tr-titulo: 0; /* Anton já vem apertada */
--tr-rotulo: 0.16em;
/* --- Espaço --------------------------------------------------------------
Passo de 4px. Usar sempre estes, nunca número solto. */
--e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
--e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem;
--e-9: 6rem;
--col-leitura: 64ch; /* largura máxima de texto corrido */
/* --- Toque ---------------------------------------------------------------
Tudo que se toca tem pelo menos 44px de altura, mais que os 36 do
ManyChat, porque o painel do BrasaChat é usado no celular (protótipo
aprovado pelo Yuri em 08/10/2026). */
--toque: 2.75rem;
/* --- Canto ---------------------------------------------------------------
O sistema é reto. O único canto arredondado da marca é o do losango do
logo, e ele é parte do desenho do logo — não se repete em componente. */
--canto: 0;
}
/* =============================================================================
PAPÉIS DE SUPERFÍCIE
Aplicar em um contêiner. Tudo dentro herda o par certo de cores.
============================================================================= */
.brasa-escuro {
background: var(--brasa-preto);
color: var(--sobre-escuro);
--cor-titulo: var(--brasa-branco);
--cor-meia: var(--meia-escuro);
--cor-fio: var(--fio-escuro);
--peso-do-corpo: var(--peso-corpo);
}
.brasa-claro {
background: var(--brasa-giz);
color: var(--sobre-claro);
--cor-titulo: var(--brasa-preto);
--cor-meia: var(--meia-claro);
--cor-fio: var(--fio-claro);
--peso-do-corpo: var(--peso-corpo-claro);
}
/* =============================================================================
TIPO — classes semânticas
============================================================================= */
.brasa-display,
.brasa-h1,
.brasa-h2 {
font-family: var(--fonte-titulo);
font-weight: 400;
line-height: var(--lh-titulo);
letter-spacing: var(--tr-titulo);
color: var(--cor-titulo);
text-wrap: balance;
margin: 0;
}
.brasa-display { font-size: var(--t-display); }
.brasa-h1 { font-size: var(--t-h1); }
.brasa-h2 { font-size: var(--t-h2); }
.brasa-h3 {
font-family: var(--fonte-texto);
font-variation-settings: "wght" 600, "opsz" 20;
font-size: var(--t-h3);
line-height: 1.3;
color: var(--cor-titulo);
margin: 0;
}
.brasa-corpo {
font-family: var(--fonte-texto);
font-variation-settings: "wght" var(--peso-do-corpo, 300), "opsz" 16;
font-size: var(--t-corpo);
line-height: var(--lh-corpo);
max-width: var(--col-leitura);
text-wrap: pretty;
margin: 0;
}
.brasa-lead {
font-family: var(--fonte-texto);
font-variation-settings: "wght" 250, "opsz" 20;
font-size: var(--t-corpo-g);
line-height: 1.6;
max-width: var(--col-leitura);
margin: 0;
}
.brasa-corpo strong,
.brasa-lead strong {
font-variation-settings: "wght" var(--peso-forte), "opsz" 16;
color: var(--cor-titulo);
}
.brasa-rotulo {
font-family: var(--fonte-destaque);
font-weight: var(--peso-destaque);
font-size: var(--t-rotulo);
letter-spacing: var(--tr-rotulo);
text-transform: uppercase;
color: var(--cor-meia);
}
/* Selo — o destaque em tarja verde. Fira Code, sempre. */
.brasa-selo {
display: inline-block;
font-family: var(--fonte-destaque);
font-weight: var(--peso-destaque);
font-size: var(--t-peq);
background: var(--brasa-verde);
color: var(--brasa-preto);
padding: 0.15em 0.5em;
}
/* Palavra em verde dentro do título — um destaque por frase, no máximo. */
.brasa-verde { color: var(--brasa-verde); }
/* =============================================================================
A MARCAÇÃO À MÃO
O risco de caneta em âmbar, por baixo de UMA palavra ou expressão curta.
Regras:
- um risco por peça, no máximo dois;
- só em palavra que carrega o sentido da frase;
- nunca em texto corrido, nunca em rótulo, nunca em botão;
- o traço passa POR TRÁS do glifo, encostando na palavra.
Uso:
própria
O SVG é o do arquivo marcacao.svg — copiar o path de lá.
============================================================================= */
.brasa-risco {
position: relative;
display: inline-block;
isolation: isolate; /* prende o z-index negativo dentro deste span */
}
.brasa-risco > svg {
position: absolute;
left: -0.12em;
width: calc(100% + 0.24em);
bottom: 0.04em; /* encosta na palavra, subindo um pouco na letra */
height: 0.40em;
overflow: visible;
z-index: -1; /* por trás do glifo — a letra nunca é cortada */
pointer-events: none;
}
.brasa-risco > svg path { fill: var(--brasa-ambar); }
/* ====== design system: componentes.css ====== */
/* =============================================================================
ESTÚDIO BRASA — COMPONENTES
Depende de tokens.css. Carregar os dois, nesta ordem.
O bloco base do sistema é o PAINEL: uma moldura de linha fina com uma barra
de rótulo em cima e um miolo embaixo. Foto, galeria e vídeo são o mesmo
painel com miolos diferentes — não são componentes separados.
Aprovado pelo Yuri em 13/08/2026.
============================================================================= */
/* =============================================================================
1. PAINEL — a moldura com barra de rótulo
============================================================================= */
.brasa-painel {
display: flex;
flex-direction: column;
border: 1px solid var(--cor-fio, var(--fio-escuro));
border-radius: var(--canto);
overflow: hidden;
min-width: 0; /* deixa encolher dentro de grid */
}
/* A barra de cima. Rótulo curto, em caixa alta — o que a coisa É, não frase. */
.brasa-painel > .barra {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-4);
padding: 0.6rem 1rem;
border-bottom: 1px solid var(--cor-fio, var(--fio-escuro));
font-family: var(--fonte-destaque);
font-weight: var(--peso-destaque);
font-size: var(--t-rotulo);
letter-spacing: var(--tr-rotulo);
text-transform: uppercase;
color: var(--cor-meia, var(--meia-escuro));
}
/* O lado direito da barra: contagem, duração, ano. Nunca frase. */
.brasa-painel > .barra > .marca-dir { color: var(--brasa-verde); }
.brasa-painel > .miolo {
padding: var(--e-6) var(--e-5) calc(var(--e-6) + var(--e-2));
display: flex;
flex-direction: column;
gap: var(--e-3);
flex: 1;
}
/* Miolo que recebe imagem/vídeo não tem respiro — a mídia sangra até a borda. */
.brasa-painel > .miolo.sangra {
padding: 0;
gap: 0;
}
/* =============================================================================
2. MÍDIA — a base de foto e vídeo
============================================================================= */
.brasa-midia {
position: relative;
display: block;
overflow: hidden;
background: var(--brasa-preto);
min-width: 0;
}
.brasa-midia > img,
.brasa-midia > video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Proporções. Usar sempre uma destas, nunca altura fixa. --------------- */
.brasa-r-169 { aspect-ratio: 16 / 9; } /* showreel, YouTube, LinkedIn */
.brasa-r-45 { aspect-ratio: 4 / 5; } /* feed — o formato dos carrosséis */
.brasa-r-916 { aspect-ratio: 9 / 16; } /* Reel, TikTok, Stories */
.brasa-r-11 { aspect-ratio: 1 / 1; } /* miniatura de galeria */
.brasa-r-larga{ aspect-ratio: 21 / 9; } /* faixa de abertura */
/* --- O véu -----------------------------------------------------------------
Foto com texto por cima SEMPRE leva véu. Sem ele o texto some no claro da
imagem e a peça fica ilegível em metade das fotos.
É o gesto que os carrosséis já usam. */
.brasa-veu::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.82) 0%,
rgba(0, 0, 0, 0.55) 38%,
rgba(0, 0, 0, 0.18) 70%,
rgba(0, 0, 0, 0.28) 100%
);
pointer-events: none;
}
/* Véu parelho, para quando o texto fica no meio da imagem. */
.brasa-veu-todo::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.52);
pointer-events: none;
}
/* --- Texto sobre a mídia -------------------------------------------------- */
.brasa-midia > .sobreposto {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
padding: var(--e-5) var(--e-5) var(--e-5);
display: flex;
flex-direction: column;
gap: var(--e-2);
color: var(--brasa-branco);
}
.brasa-midia > .sobreposto .tit {
margin: 0;
font-family: var(--fonte-titulo);
font-weight: 400;
font-size: clamp(1.3rem, 3vw, 2rem);
line-height: var(--lh-titulo);
color: var(--brasa-branco);
text-wrap: balance;
}
/* Assinatura do rodapé da peça — BRASA à esquerda, @ à direita.
É o padrão dos carrosséis; vale em capa e em peça de rede. */
.brasa-midia > .assinatura {
position: absolute;
inset: auto 0 0 0;
z-index: 3;
display: flex;
justify-content: space-between;
padding: var(--e-4) var(--e-5);
font-family: var(--fonte-destaque);
font-weight: var(--peso-destaque);
font-size: var(--t-rotulo);
letter-spacing: var(--tr-rotulo);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
}
/* =============================================================================
3. GALERIA — o fio fino entre as fotos
O gap é 1px e o fundo é a cor do fio: as linhas que separam as fotos são
as mesmas linhas da moldura. É o que costura a galeria ao resto.
============================================================================= */
.brasa-galeria {
display: grid;
gap: 1px;
background: var(--cor-fio, var(--fio-escuro));
min-width: 0;
}
.brasa-galeria.col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brasa-galeria.col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brasa-galeria.col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Mosaico: a primeira foto ocupa quatro células. Para capa de trabalho. */
.brasa-galeria.mosaico {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.brasa-galeria.mosaico > :first-child {
grid-column: span 2;
grid-row: span 2;
}
@media (max-width: 34rem) {
.brasa-galeria.col-3,
.brasa-galeria.col-4,
.brasa-galeria.mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brasa-galeria.mosaico > :first-child { grid-column: span 2; grid-row: span 1; }
}
/* =============================================================================
4. VÍDEO — o play em losango
A forma vem do logo. É o único lugar do sistema onde o losango se repete,
e é de propósito: ele marca "isto toca".
============================================================================= */
.brasa-play {
position: absolute;
inset: 0;
z-index: 3;
display: grid;
place-items: center;
border: 0;
background: none;
cursor: pointer;
color: inherit;
}
.brasa-play > svg {
width: clamp(3.5rem, 9vw, 5.5rem);
height: auto;
filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.45));
transition: transform 140ms ease;
}
.brasa-play:hover > svg,
.brasa-play:focus-visible > svg { transform: scale(1.06); }
.brasa-play:focus-visible {
outline: 2px solid var(--brasa-verde);
outline-offset: -4px;
}
/* Duração do vídeo, canto inferior direito. */
.brasa-duracao {
position: absolute;
right: var(--e-3);
bottom: var(--e-3);
z-index: 3;
font-family: var(--fonte-destaque);
font-weight: var(--peso-destaque);
font-size: 0.75rem;
background: rgba(0, 0, 0, 0.72);
color: var(--brasa-branco);
padding: 0.15em 0.45em;
}
/* =============================================================================
5. LEGENDA — sempre em Fira Code, sempre curta
============================================================================= */
.brasa-legenda {
font-family: var(--fonte-destaque);
font-weight: 500;
font-size: 0.78rem;
letter-spacing: 0.03em;
color: var(--cor-meia, var(--meia-escuro));
padding: var(--e-3) var(--e-4);
border-top: 1px solid var(--cor-fio, var(--fio-escuro));
}
/* =============================================================================
6. GRADE DE PAINÉIS — como os painéis se arrumam na página
============================================================================= */
.brasa-grade {
display: grid;
gap: var(--e-5);
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.brasa-grade.justa { gap: 1px; background: var(--cor-fio, var(--fio-escuro)); }
.brasa-grade.justa > .brasa-painel { border: 0; }
/* =============================================================================
7. FORMULÁRIO E ESTADO
(vindos do painel do BrasaChat, aprovados pelo Yuri em 08/10/2026)
As peças que o sistema não tinha até o painel do BrasaChat: campo, botão,
escolha, interruptor, etiqueta de estado, etiqueta de palavra, lista densa,
estado de erro, quadro "Atenção", ajuda do "?", janela e aviso rápido.
A proposta foi o protótipo aprovado
(brasa-vault/shared/raw/brasachat/prototipo/prototipo.src.html); entraram
aqui em 09/10/2026, com as cores e as fontes trocadas pelos tokens.
São peças da superfície CLARA: usar dentro de .brasa-claro. No escuro ainda
não existem; quando houver caso, propor ao Yuri antes.
O que veio junto com elas:
- Cinco cores e nenhuma a mais: não existe vermelho nem amarelo. Perigo e
aviso são feitos com o PRETO (borda grossa, tarja, caixa).
- O verde é o sinal de "no ar, tudo certo". Nunca de alerta.
- Tudo que se toca tem pelo menos 44px de altura (--toque).
- Nada de bolinha: a escolha é um quadrado com um quadrado cheio dentro.
- O foco do campo é a borda dobrada (contorno de 1px por dentro). O
protótipo fazia com box-shadow; aqui não, porque o sistema não tem sombra.
- O rótulo do campo é o .brasa-rotulo de sempre (Fira Code, caixa alta).
Os nomes são os do protótipo, menos os que já existiam no site
(web/site/), no painel (web/painel/) ou no preview deste sistema. Esses
ganharam o prefixo brasa-:
protótipo aqui por que
.campo .brasa-campo já existe no molde web/painel/prototipo-aprovacao/
.bt .brasa-bt idem
.rotulo .brasa-rotulo já existia neste sistema; é a mesma peça
.chip .brasa-chip o preview usa .chip na amostra de cor
.linhas .brasa-linhas web/painel/index.html
.bloco .brasa-bloco web/painel/index.html
.passo .brasa-passo o site usa .passo na home (web/site/site.css)
.falta .brasa-falta .falta é o selo listrado de buraco do
montar.py e do site; não confundir
Os modificadores e as peças de dentro (bt-cheio, campo-pe, bloco-cab…)
ficam com o nome do protótipo, como .barra e .miolo no painel.
============================================================================= */
/* --- 7.1 Campo de texto e área de texto --------------------------------------
Rótulo em cima, campo no Giz dentro do cartão Papel, e um pé com a ajuda à
esquerda e o contador à direita.
Até 20 letras.12/20
*/
.brasa-campo {
display: grid;
gap: 0.35rem;
min-width: 0;
}
.brasa-campo input,
.brasa-campo textarea {
box-sizing: border-box;
width: 100%;
min-height: var(--toque);
margin: 0;
padding: 0.6rem var(--e-3);
background: var(--brasa-giz);
border: 1px solid var(--fio-forte);
border-radius: var(--canto);
font-family: var(--fonte-texto);
font-size: 0.95rem;
line-height: 1.45;
color: var(--sobre-claro);
}
.brasa-campo textarea {
min-height: 5.5rem;
resize: vertical;
}
/* Foco: a borda fica preta e o contorno por dentro faz a segunda linha. */
.brasa-campo input:focus,
.brasa-campo textarea:focus {
border-color: var(--sobre-claro);
outline: 1px solid var(--sobre-claro);
outline-offset: -2px;
}
.campo-pe {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--e-3);
}
/* Texto de ajuda: embaixo do campo ou solto no bloco. */
.ajuda {
margin: 0;
font-family: var(--fonte-texto);
font-size: 0.82rem;
line-height: 1.45;
color: var(--meia-claro);
}
.ajuda b {
font-weight: var(--peso-forte);
color: var(--sobre-claro);
}
/* Contador de letras. Perto do limite (.perto) e depois dele (.passou) vira
tarja preta: o aviso é o preto, não uma cor. */
.contador {
margin-left: auto;
font-family: var(--fonte-destaque);
font-size: var(--t-rotulo);
color: var(--meia-claro);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.contador.perto,
.contador.passou {
padding: 0.1rem 0.35rem;
background: var(--brasa-preto);
color: var(--brasa-giz);
}
/* --- 7.2 Botões --------------------------------------------------------------
O contorno preto é o padrão. Cheio preto é a ação principal (uma por tela).
Leve é a secundária, tracejado é "acrescentar", pequeno e só ícone são pra
onde falta lugar. Inter 600 e nunca caixa alta: botão não é rótulo.