/* Direção A · Cinético (V-18): tokens e componentes base para o site e para peças HTML.
Lei: C:\psds\brand-v2\DESIGN.md. Vitrine: componentes.html (componentes-claro.png, componentes-escuro.png).
Uso: , ou copie marca/build, marca/fontes
e marca/web lado a lado (o @import abaixo e as fontes usam caminho relativo).
Tema: segue o sistema; force com data-theme="light" ou "dark" no .
Sem grade aparente, sem fio, sem cartão com borda: profundidade por contraste de cor e por escala. */
@import url("../build/tokens.css"); /* paleta, papéis (--bg --surface --ink --ink-muted --line --signal --signal-text --on-signal), fontes */
:root {
/* escala tipográfica A: grande, 500, tracking negativo */
--a-t1: clamp(64px, 9.2vw, 132px); /* palavra do topo */
--a-t2: clamp(44px, 6.1vw, 88px); /* abertura de seção */
--a-t3: clamp(28px, 2.8vw, 40px); /* título de item ou cartão */
--a-destaque: clamp(88px, 12.2vw, 176px); /* palavra ou número sozinho */
--a-lead: clamp(20px, 1.8vw, 26px);
/* espaço: muito vazio */
--a-margem: clamp(16px, 4.45vw, 64px);
--a-secao: clamp(72px, 8.9vw, 128px); /* respiro de cada lado da seção: 256 px entre dois conteúdos */
--a-vao: clamp(40px, 4.45vw, 64px); /* entre itens de uma lista ou grade */
/* movimento: as mesmas curvas do filme (Remotion) e do site */
--a-corte: cubic-bezier(.76, 0, .24, 1); /* desloca: arranca seco e assenta longo */
--a-assentar: cubic-bezier(.2, 0, 0, 1); /* nasce e pousa sem passar do ponto */
--a-precisa: cubic-bezier(.65, 0, .35, 1); /* a ação dentro da composição */
--a-tipo: cubic-bezier(.16, 1, .3, 1); /* texto sobe da própria linha e trava */
--a-troca: 670ms; --a-pousa: 470ms; --a-acao: 500ms; --a-cascata: 67ms;
}
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0; background: var(--bg); color: var(--ink);
font: 400 16px/1.55 var(--font-sans);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
:where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
/* imagem só de um tema (logo claro e negativo lado a lado) */
.so-escuro { display: none; }
[data-theme="dark"] .so-claro { display: none; }
[data-theme="dark"] .so-escuro { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .so-claro { display: none; }
:root:not([data-theme="light"]) .so-escuro { display: block; }
}
/* ---------- tipografia ---------- */
.a-t1, .a-t2, .a-t3, .a-destaque { font-weight: 500; text-wrap: balance; }
.a-t1 { font-size: var(--a-t1); line-height: .94; letter-spacing: -0.045em; }
.a-t2 { font-size: var(--a-t2); line-height: .98; letter-spacing: -0.04em; }
.a-t3 { font-size: var(--a-t3); line-height: 1.1; letter-spacing: -0.025em; }
.a-destaque { font-size: var(--a-destaque); line-height: .9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.a-lead { font-size: var(--a-lead); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-muted); max-width: 30ch; text-wrap: pretty; }
.a-texto { font-size: 18px; line-height: 1.55; color: var(--ink-muted); max-width: 34em; text-wrap: pretty; }
.a-rotulo { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.a-indice { font: 500 13px/1 var(--font-mono); letter-spacing: .06em; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.a-dado { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* título que sobe da própria linha: Tecnologia...
*/
.a-sobe { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.a-sobe > span { display: block; animation: a-sobe 900ms var(--a-tipo) both; }
.a-sobe + .a-sobe > span { animation-delay: 90ms; }
/* bloco que entra: style="--i: 1" dá a ordem da cascata (90 ms entre um e outro) */
.a-entra { animation: a-entra 700ms var(--a-tipo) both; animation-delay: calc(260ms + var(--i, 0) * 90ms); }
/* ---------- ações ---------- */
.a-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 36px; }
.a-botao {
display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 16px 26px;
border: 0; border-radius: var(--radius-control); background: var(--ink); color: var(--bg);
font: 500 17px/1.2 var(--font-sans); text-decoration: none; cursor: pointer;
}
.a-botao--sinal { background: var(--signal); color: var(--on-signal); } /* só em tela sem o S grande, e é o único vermelho dela */
.a-link {
display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
color: var(--ink); font: 500 17px/1.2 var(--font-sans); text-decoration: none;
}
.a-botao svg, .a-link svg { width: 14px; height: 14px; flex: none; transition: translate 400ms var(--a-corte); }
.a-botao:hover svg, .a-link:hover svg, .a-botao:focus-visible svg, .a-link:focus-visible svg { translate: 3px 0; }
/* campo:
a aresta inferior é a única linha do sistema: limite visível do campo (WCAG 1.4.11), nunca enfeite */
.a-campo { display: grid; align-content: start; gap: 10px; max-width: 32em; }
.a-campo :is(input, textarea, select) {
min-height: 48px; padding: 14px 16px; border: 0; border-bottom: 2px solid var(--ink-muted);
border-radius: var(--radius-control) var(--radius-control) 0 0; background: var(--surface); color: var(--ink);
font: 400 16px/1.4 var(--font-sans);
}
.a-campo :is(input, textarea, select):focus-visible { border-bottom-color: var(--ink); }
.a-campo .erro { color: var(--signal-text); font-size: 15px; }
/* ---------- células do S (marcador, gráfico, composição) ---------- */
.a-celula { display: block; width: var(--a-celula, 64px); height: var(--a-celula, 64px); fill: var(--ink); flex: none; }
.a-comp { display: block; width: 100%; height: auto; fill: var(--ink); overflow: visible; }
.a-celula.acesa, :is(.a-s, .a-comp) .acesa { fill: var(--signal); }
/* o S grande: as quatro células de marca/svg/simbolo.svg, cada uma nasce do canto voltado para o centro */
.a-s { display: block; width: 100%; height: auto; overflow: visible; }
.a-s path { fill: var(--ink); transform-box: view-box; animation: a-nasce 800ms var(--a-assentar) both; transition: translate 600ms var(--a-corte); }
.a-s .tr { transform-origin: 50px 23px; animation-delay: 60ms; }
.a-s .tl { transform-origin: 46px 46px; animation-delay: 170ms; }
.a-s .br { transform-origin: 50px 50px; animation-delay: 220ms; }
.a-s .bl { transform-origin: 46px 73px; animation-delay: 270ms; }
.a-s:hover .tl { translate: -3px -3px; } .a-s:hover .tr { translate: 3px -3px; }
.a-s:hover .bl { translate: -3px 3px; } .a-s:hover .br { translate: 3px 3px; }
/* ---------- agrupamento sem caixa ---------- */
.a-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--a-vao) 48px; list-style: none; margin: 0; padding: 0; }
.a-cartao { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.a-cartao .a-celula { margin-bottom: 32px; }
.a-cartao :is(h2, h3) { font-size: var(--a-t3); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; }
.a-cartao p { color: var(--ink-muted); max-width: 22em; text-wrap: pretty; }
/* bloco sólido: a tinta vira área (Grafite no claro, Gelo no escuro); tudo dentro inverte sozinho */
.a-bloco {
--bg: var(--grafite); --surface: var(--superficie-escura); --ink: var(--texto-claro); --ink-muted: var(--aco-claro);
--line: var(--fio-escuro); --signal-text: var(--sinal-claro);
color-scheme: dark; background: var(--bg); color: var(--ink); padding: clamp(32px, 3.9vw, 56px);
}
[data-theme="dark"] .a-bloco {
--bg: var(--gelo); --surface: var(--superficie); --ink: var(--grafite); --ink-muted: var(--aco);
--line: var(--trilho); --signal-text: var(--vermelho-tinta); color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .a-bloco {
--bg: var(--gelo); --surface: var(--superficie); --ink: var(--grafite); --ink-muted: var(--aco);
--line: var(--trilho); --signal-text: var(--vermelho-tinta); color-scheme: light;
}
}
/* lista numerada sem fio: número mono, espaço entre os itens */
.a-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; counter-reset: a-item; }
.a-lista > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; counter-increment: a-item; }
.a-lista > li::before { content: counter(a-item, decimal-leading-zero); grid-row: span 2; font: 500 14px/32px var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); }
.a-lista > li > * { grid-column: 2; }
.a-lista :is(h3, strong) { display: block; font-size: 26px; font-weight: 500; line-height: 32px; letter-spacing: -0.02em; }
.a-lista p { margin-top: 8px; color: var(--ink-muted); max-width: 30em; text-wrap: pretty; }
/* tabela sem fio: cabeçalho em rótulo mono, linhas por espaço, números mono alinhados à direita */
.a-tabela { width: 100%; border-collapse: collapse; }
.a-tabela th { padding: 0 16px 20px; text-align: left; vertical-align: bottom; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.a-tabela td { padding: 14px 16px; vertical-align: baseline; }
.a-tabela :is(th, td):first-child { padding-left: 0; }
.a-tabela :is(th, td):last-child { padding-right: 0; }
.a-tabela td:first-child { font-weight: 500; }
.a-tabela .num { text-align: right; white-space: nowrap; }
.a-tabela td.num { font: 400 15px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.a-tabela td.apoio { color: var(--ink-muted); }
/* ---------- página ---------- */
.a-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; min-height: 104px; padding: 0 var(--a-margem); }
.a-topo .a-logo { display: flex; }
.a-topo .a-logo img { height: 20px; width: auto; }
.a-topo nav { display: flex; flex-wrap: wrap; gap: 0 40px; font: 500 15px/1 var(--font-sans); }
.a-topo nav a { padding: 14px 0; text-decoration: none; }
.a-secao { padding: var(--a-secao) var(--a-margem); }
.a-cabeca { display: grid; justify-items: start; gap: 28px; margin-bottom: clamp(56px, 6.7vw, 96px); }
.a-rodape {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 40px var(--a-margem);
font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
}
@media (max-width: 640px) { .a-topo nav { gap: 0 24px; font-size: 14px; } }
/* ---------- movimento ---------- */
@keyframes a-nasce { from { transform: scale(0); } }
@keyframes a-sobe { from { translate: 0 105%; } }
@keyframes a-entra { from { opacity: 0; translate: 0 18px; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}