/* ========================================================================== ARQUIBANCADA — TOKENS ADR-0011 (linguagem visual) + ADR-0009 (duas camadas). ESTE ARQUIVO É O CORPO DO @theme DO TAILWIND v4, VERBATIM. Portar = copiar o conteúdo de :root para dentro de @theme { } em src/app/globals.css. Nenhuma tradução, nenhuma reinterpretação. REGRA QUE GOVERNA O RESTO: nenhum componente consome a camada 1. Um seletor que escreve var(--color-azul-900) está errado mesmo com o resultado certo na tela. Componente consome só a camada semântica. Todo contraste anotado ao lado do valor foi MEDIDO, não estimado. Fontes: docs/research/direcao-visual.md e referencias-arquibancada.md. ========================================================================== */ :root { /* ====================================================================== CAMADA 1 — PALETA CRUA ====================================================================== */ --color-azul-800: #162F60; --color-azul-900: #0F2143; --color-verde-500: #1E9E5A; --color-verde-600: #10794A; --color-verde-700: #0B5C38; /* Âmbar. Existe SÓ dentro do bloco escuro — ver --color-cta-no-bloco. Sobre branco dá 2,13:1: reprova até como componente de UI. */ --color-ambar-500: #F0A202; --color-neutro-0: #FFFFFF; --color-neutro-100: #F2F4F7; --color-neutro-300: #D3D8E0; --color-neutro-600: #4A5163; --color-neutro-900: #111827; /* ====================================================================== CAMADA 2 — SEMÂNTICA É só isto que componente usa. ====================================================================== */ /* --- Superfícies --- */ --color-surface: var(--color-neutro-0); --color-surface-sutil: var(--color-neutro-100); --color-bloco: var(--color-azul-900); /* branco sobre ele: 15,92:1 */ /* --- Texto --- */ --color-fg: var(--color-neutro-900); /* 17,74:1 sobre branco */ --color-fg-suave: var(--color-neutro-600); /* 7,93:1 sobre branco */ --color-fg-invertido: var(--color-neutro-0); --color-enfase: var(--color-verde-700); /* 8,07:1 sobre branco */ /* --- Ação --- Dois CTAs, porque o contraste do PREENCHIMENTO contra o que está atrás dele muda com a superfície (WCAG 1.4.11, 3:1). Sobre superfície clara: verde-600, branco por cima. botão vs branco 5,45:1 · texto vs botão 5,45:1 (é o mesmo par — contraste é simétrico. Passa nos dois critérios: 4,5:1 do 1.4.3 para o texto e 3:1 do 1.4.11 para a superfície.) Dentro do bloco escuro: âmbar, tinta por cima. botão vs bloco 7,49:1 · texto vs botão 8,34:1 O verde-600 dentro do bloco daria 2,92:1 e REPROVA por 0,08. Medido em referencias-arquibancada.md, Parte 3.2. */ --color-cta: var(--color-verde-600); --color-cta-fg: var(--color-neutro-0); --color-cta-hover: var(--color-verde-700); --color-cta-no-bloco: var(--color-ambar-500); --color-cta-no-bloco-fg: var(--color-neutro-900); --color-cta-no-bloco-hover: #D18E02; /* --- Grafismo --- 3,45:1 sobre branco: passa como componente de UI (1.4.11), NÃO serve para texto. */ --color-grafismo: var(--color-verde-500); /* --- Enfase e segundo plano DENTRO do bloco escuro --- Medidos contra `--color-bloco` (#0F2143), nao contra branco. `verde-500` sobre branco da 3,45:1 e por isso o `--color-grafismo` acima esta marcado como "nao serve para texto". Sobre o BLOCO ele da 4,62:1 e passa como texto normal (1.4.3) com folga em texto grande. Sao dois papeis diferentes e por isso sao dois tokens: quem consome enfase sobre o bloco nao pode achar que pode usar a mesma cor sobre branco. AMBAR, e nao verde. Decisao do Marcos em 2026-08-26, e ele esta certo no numero: ambar sobre o bloco da 7,49:1 contra os 4,62:1 do verde-500. Isto custa a exclusividade do ambar como cor de acao, que era o motivo de eu ter proposto verde. A distincao passa a ser PREENCHIMENTO vs TINTA: o botao continua sendo a unica SUPERFICIE ambar da tela; o titulo e so tinta. Se algum dia entrar uma segunda superficie ambar, o CTA perde o sinal e este comentario e o aviso de que isso foi previsto. Continua valendo a regra dura da ADR-0011: ambar so existe DENTRO do bloco escuro. Sobre branco ele da 2,13:1 e reprova ate como grafismo. */ --color-enfase-sobre-bloco: var(--color-ambar-500); /* 7,49:1 sobre o bloco */ /* Segundo plano sobre o bloco. Branco a 62% compoe ~#A4AAB7 sobre o azul-900 e da 6,87:1 — recua sem chegar perto do limite. Recuar contraste e legitimo; recuar ABAIXO do minimo nao e, e por isso o valor esta calculado e anotado em vez de escolhido no olho. */ --color-fg-invertido-suave: rgba(255, 255, 255, 0.62); /* 6,87:1 sobre o bloco */ --color-borda: var(--color-neutro-300); --color-regua: var(--color-neutro-900); /* --- Foco --- */ --color-foco: var(--color-verde-700); /* 8,07:1 sobre claro */ --color-foco-sobre-bloco: var(--color-verde-500); /* 4,62:1 sobre o bloco */ /* --- Camadas translúcidas --- A linguagem manda medir contraste contra cor sólida, nunca contra a foto. Translucidez não é exceção a isso: é o mesmo cálculo com a composição resolvida antes. A pesquisa mediu o limiar — camada lisa de `azul-900` com texto branco passa 4,5:1 a partir de **α ≥ 0,62**, considerando o pior caso, que é uma foto branca por baixo. Os dois valores abaixo estão acima do limiar de propósito, com folga: o painel do hero carrega texto grande e CTA, e não pode ficar no limite. Gradiente continua PROIBIDO como base de texto — só camada lisa é verificável, porque a posição do texto muda com o comprimento da tradução (PT/EN/ES). */ --alpha-painel: 0.90; --alpha-veu: 0.72; /* --- Degradê preto sobre foto --- Duas camadas, e a divisão de trabalho entre elas é o ponto: · O DEGRADÊ é efeito. Vai sobre a foto inteira, do transparente ao quase preto, e ninguém mede contraste nele — não dá: a posição do texto muda com o comprimento da tradução, e PT é 44% mais longo que EN em rótulo curto (medido em direcao-visual.md). · O PISO é garantia. Camada LISA embaixo do bloco de texto, com α acima do limiar. Preto liso a α 0,54 já dá 4,5:1 com texto branco; usamos 0,66, e o degradê só escurece mais. O pior caso é o piso sozinho. Sem o piso, o degradê seria bonito e indefensável. */ --degrade-foto: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.45) 68%, rgba(0, 0, 0, 0.78) 100% ); --piso-texto: rgba(0, 0, 0, 0.66); /* --- Sombra lateral sobre foto --- Escurece um lado da imagem e deixa o outro limpo. Usada no hero da pagina de produto, onde a foto vale mais inteira do que coberta por um bloco. O ponto que a torna defensavel e o PLATO: ela e CHAPADA em `--piso-texto` ate 48% da largura e so depois comeca a abrir. A regra da linguagem proibe degrade como base de texto porque a posicao do texto muda com o comprimento da traducao (PT/EN/ES) e o contraste passaria a depender de onde a linha quebrou. Com plato, o texto nunca sai da faixa de opacidade constante: a coluna de texto e travada por `max-inline-size` e termina bem antes dos 48%. Medido a 1442px: o apoio de 38ch acaba em ~35%. O degrade so existe DEPOIS do texto, onde e puro efeito. Pior caso do plato, com foto branca por baixo: preto a 0,66 compoe #575757 e da **7,23:1** com texto branco. */ --sombra-lateral: linear-gradient( to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.66) 48%, rgba(0, 0, 0, 0.28) 68%, rgba(0, 0, 0, 0) 84% ); /* --- Sombras --- A linguagem original dizia "camada, não sombra". Revertido por decisão do decisor em 2026-08-25: sobre foto, camada sozinha não separa o suficiente. Sombra fria, puxada para o azul da paleta — sombra neutra cinza suja o azul-marinho e denuncia template. */ --sombra-1: 0 1px 2px rgba(15, 33, 67, 0.08), 0 2px 8px rgba(15, 33, 67, 0.06); --sombra-2: 0 2px 4px rgba(15, 33, 67, 0.10), 0 12px 28px rgba(15, 33, 67, 0.12); --sombra-flutuante: 0 4px 10px rgba(15, 33, 67, 0.16), 0 24px 48px rgba(15, 33, 67, 0.20); /* Curvas. Uma entrada e uma saída, usadas em tudo — transição com curva diferente a cada componente é o que faz um site parecer remendado. */ --curva-entrada: cubic-bezier(0.16, 0.84, 0.44, 1); --curva-saida: cubic-bezier(0.5, 0, 0.75, 0); --tempo-curto: 180ms; --tempo-medio: 320ms; --tempo-longo: 620ms; --color-painel: color-mix(in srgb, var(--color-azul-900) calc(var(--alpha-painel) * 100%), transparent); --color-veu: color-mix(in srgb, var(--color-azul-900) calc(var(--alpha-veu) * 100%), transparent); /* Cabeçalho translúcido quando a página rola. Branco alto, para o texto tinta continuar em 17,74:1 no pior caso. */ --color-header-rolado: color-mix(in srgb, var(--color-neutro-0) 86%, transparent); /* Faixa de aviso quando ela vive DENTRO do hero, por cima da foto. Verde de acento por decisao do Marcos em 2026-08-26. Alfa 0,90 e nao 0,72: o pior caso e foto branca por baixo, e ali o composto vira ~#233F2E, que da **6,30:1** com texto branco. A 0,72 cairia para 4,4:1 e reprovaria o 1.4.3 por pouco -- que e exatamente o tipo de "por pouco" que so aparece quando alguem troca a foto. */ --color-aviso-no-hero: color-mix(in srgb, var(--color-verde-700) 90%, transparent); /* ====================================================================== GEOMETRIA — a assinatura da marca ====================================================================== */ /* O ângulo da diagonal é CONSTANTE da linguagem: idêntico em 375px e no desktop. Medido na Allianz Arena, o único de 16 sites varridos que ainda usa corte diagonal em CSS: matrix(1,0,±0.32801,1,0,0). Nunca exprima a diagonal em porcentagem. Em %, o ângulo muda com a altura do bloco e a assinatura se achata entre breakpoints (medido na maquete anterior: 8,8° → 6,7°). */ --diag-tan: 0.328; --diag-angulo: 18.17deg; /* Aresta full-bleed é outro elemento, e precisa de outro ângulo. 18,17° numa largura de 1920px desloca 630px — a diagonal viraria a página inteira. A própria pesquisa registra que o ângulo da Allianz só funciona porque lá os blocos são BAIXOS (83–104px). Aqui o deslocamento é proporcional à LARGURA da viewport, que é o que mantém o ângulo constante entre breakpoints — ~3,4°. Valor efetivo declarado mais abaixo, junto das invariantes. */ --raio: 0.25rem; --regua-fina: 1px; /* fio: fica em px de propósito, não deve engordar */ --regua-pesada: 0.5rem; /* ====================================================================== TIPOGRAFIA — Archivo, uma família, dois eixos No projeto: Archivo({ subsets: ['latin'], axes: ['wdth'] }) Verificado em build no Next 16.3.3. PISO DE line-height: 1,10 em display, H1, H2 e H3. Sem exceção de "é de uma linha só". Mínimo de tinta da Archivo medido: 1,08. Convergência de cinco referências independentes: 1,10. ====================================================================== */ --font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif; /* Larguras por papel. Um arquivo de fonte, duas vozes. Medido: "segunda-feira" a 16px — wdth 100 = 97,6px · 85 = 85,7px · 75 = 77,8px. A folga do condensado para o português é real. */ --wdth-display: 75; --wdth-titulo: 85; --wdth-corpo: 100; --text-display: 2.625rem; --text-display--line-height: 3rem; /* 42/48 = 1,14 */ --text-h1: 2rem; --text-h1--line-height: 2.25rem; /* 32/36 = 1,13 */ --text-h2: 1.5rem; --text-h2--line-height: 1.75rem; /* 24/28 = 1,17 */ --text-h3: 1.1875rem; --text-h3--line-height: 1.625rem; /* 19/26 = 1,37 */ --text-corpo: 1rem; --text-corpo--line-height: 1.625rem; /* 16/26 = 1,63 */ --text-meta: 0.8125rem; --text-meta--line-height: 1.125rem; /* 13/18 */ /* Caixa alta pede tracking POSITIVO; caixa mista, negativo. Sempre em em — em px não escala entre breakpoints. Medido em 6 referências: −0,02em em caixa mista, +0,028em em alta. */ --tracking-display: 0.025em; --tracking-titulo: -0.02em; --tracking-meta: 0.08em; /* ====================================================================== ESPAÇO — escala de 4px ====================================================================== */ /* Escala de espaço em REM, razão ~1,5. Em rem e não em px porque rem responde ao tamanho de fonte que o usuário configurou no navegador — quem aumenta a fonte por necessidade recebe o espaçamento junto, e o layout não aperta. Com px, a fonte cresce e o espaço não, que é como um layout quebra para quem mais precisa dele. Os comentários trazem o equivalente em px na raiz padrão de 16px. */ --e-1: 0.25rem; /* 4px */ --e-2: 0.5rem; /* 8px */ --e-3: 0.75rem; /* 12px */ --e-4: 1rem; /* 16px */ --e-5: 1.5rem; /* 24px */ --e-6: 2rem; /* 32px */ --e-7: 3rem; /* 48px */ --e-8: 4rem; /* 64px */ --e-9: 6rem; /* 96px */ --espaco-secao: var(--e-7); --espaco-bloco: var(--e-6); --espaco-card: var(--e-4); --gap-grid: var(--e-4); /* Ritmo interno de um bloco de texto: título -> régua -> corpo -> ação. */ --ritmo-titulo: var(--e-4); --ritmo-corpo: var(--e-5); --ritmo-acao: var(--e-6); --medida-linha: 64ch; --largura-container: 1120px; --pad-container: 16px; /* ====================================================================== INVARIANTES — não são estilo, são restrição ====================================================================== */ /* 2.5.8 fixa 24 CSS px como mínimo absoluto. Em rem, quem aumenta a fonte recebe alvo maior; quem não aumenta continua no piso da norma. */ --tamanho-alvo-min: 1.5rem; /* 24px na raiz padrão — WCAG 2.5.8 AA */ --altura-alvo-conforto: 2.75rem; /* 44px */ --altura-header: 4rem; /* Geometria da FAIXA do hero. Reescrita em 2026-08-26 sobre `docs/research/hero-referencias-futebol.md`. A altura é um NÚMERO DECLARADO, e é essa a decisão. Ela não vem do `aspect-ratio` da foto (regra 4 da linguagem) nem do viewport. Duas consequências, e as duas importam: · o conteúdo seguinte aparece na dobra. A versão anterior tinha o hero em 74% da janela nos dois breakpoints e empurrava as experiências para fora — medido em 1442×732 e em 390×844; · com a altura conhecida, o deslocamento da costura é calculável, e o ângulo do corte fica exato. É por isso que a Allianz fixa 226px de altura e 72px de deslocamento em vez de usar porcentagem. Referências medidas: Allianz 226px (31% da janela), Museu do Futebol 360px (49%). A nossa fica acima das duas porque elas usam título de 28px e 44px e nós carregamos um display — mas bem abaixo dos 74% de antes. */ /* Revisto em 2026-08-26, por decisão do Marcos: o hero passa a ocupar quase a tela toda. Isso afasta a peça das referências medidas (Allianz 31% da janela, Museu do Futebol 49%) e o registro fica aqui para não se perder. O que NÃO muda com a altura, e é o que consertou a peça: o texto continua sobre cor sólida, a foto continua vizinha e não cama. O defeito da versão original nunca foi o hero ser alto — era o texto estar em cima da foto. `min(rem, svh)` e não `svh` puro: o rem dirige e o viewport só limita. Sem o teto em svh, um celular baixo joga o CTA para fora da dobra; sem o piso em rem, um monitor alto estica a faixa até virar tela vazia. E `min()` dentro de `calc()` é válido, então a costura continua derivando do mesmo token e o ângulo continua exato nos dois ramos. */ --altura-hero: min(46rem, 86svh); --largura-bloco-hero: 58%; /* medido na Allianz: 742 numa faixa de 1280 */ /* Deslocamento horizontal da costura no desktop, derivado da altura pela tangente da linguagem. Depende da ALTURA, nunca da largura: é isso que mantém o ângulo constante entre breakpoints. */ /* TRANSBORDO DO BLOCO - conserto de 2026-08-26. O bloco e desenhado MAIS ALTO que a faixa, e o excedente e cortado pelo `overflow: clip` do hero. Existe por causa do parallax: o bloco sobe 12% ao rolar e, com altura igual a da faixa, ele expunha a propria borda de baixo. Medido a 600px de rolagem: 73px de foto crua com uma aresta HORIZONTAL dura atravessando a composicao - e a linguagem so tem a diagonal, entao essa segunda aresta lia como peca descolada do fundo. 1,2 da 20% de folga contra os ~14,4% que o deslocamento consome no pior caso. Quem mexer no -12% do keyframe tem de mexer aqui junto. O ANGULO NAO MUDA com isso, e e por isso que o fator entra nos dois lugares: a costura vira `altura x transbordo x tan` e a altura do bloco vira `altura x transbordo`. A razao entre as duas continua sendo `tan`. */ --hero-transbordo: 1.2; --costura-hero: calc(var(--altura-hero) * var(--hero-transbordo) * var(--diag-tan)); --sobreposicao-cards: 3.5rem; /* A diagonal continua proporcional à LARGURA: ângulo constante é requisito geométrico, não escolha de dimensionamento — em rem ele mudaria a cada breakpoint. O `clamp` limita os extremos em rem para não virar um corte de 8px num relógio nem de 200px num monitor ultrawide. */ --corte-diagonal: max(1.25rem, 6vw); } @media (min-width: 768px) { :root { --text-display: 4.75rem; --text-display--line-height: 5.25rem; /* 76/84 = 1,105 */ --text-h1: 3rem; --text-h1--line-height: 3.375rem; /* 48/54 = 1,13 */ --text-h2: 2rem; --text-h2--line-height: 2.375rem; /* 32/38 = 1,19 */ --text-h3: 1.3125rem; --text-h3--line-height: 1.75rem; /* 21/28 */ --text-corpo: 1.0625rem; --text-corpo--line-height: 1.75rem; /* 17/28 */ --espaco-secao: var(--e-9); --espaco-bloco: var(--e-8); --gap-grid: var(--e-5); --pad-container: var(--e-5); --ritmo-corpo: var(--e-6); --ritmo-acao: var(--e-7); --altura-hero: min(48rem, 88svh); --sobreposicao-cards: 5.5rem; } }