/* ============================================================ BORA — Design System · tokens.css Direção: PULSO NEON · Cenário A (sistematiza o manual de marca) Status: proposta · 20/07/2026 · rev. 21/07/2026 (ratificações pós-review da página de vendas: contexto-branco completo, contexto-preto sancionado p/ stats, contexto-foto oficial) · rev. 22/07/2026 (3 diretrizes do Patrick: título sem caixa-alta + mix de pesos; pattern lateral grande; neon em ícones/traços no branco e verde-profundo rebaixado a exceção rara) ------------------------------------------------------------ CONSUMO: a produção usa SÓ os tokens semânticos e de componente. Camada primitiva é a paleta/grandezas cruas da marca (não usar direto em página, salvo raríssima exceção documentada no CONTRATO.md). Cor crua (hex) só existe AQUI. Fora daqui, tudo via var(). ============================================================ */ /* ---------- Fontes da marca (Altone — família única) ---------- Arquivos .ttf em design-system/fontes/ (copiados de insumos/bora-identidade/3. TIPOGRAFIA). url() resolve relativo a este arquivo. */ @font-face { font-family:'Altone'; font-weight:400; font-style:normal; font-display:swap; src:url('fontes/Altone-Regular.woff2') format('woff2'), url('fontes/Altone-Regular.ttf') format('truetype'); } @font-face { font-family:'Altone'; font-weight:400; font-style:italic; font-display:swap; src:url('fontes/Altone-Oblique.woff2') format('woff2'), url('fontes/Altone-Oblique.ttf') format('truetype'); } @font-face { font-family:'Altone'; font-weight:500; font-style:normal; font-display:swap; src:url('fontes/Altone-Medium.woff2') format('woff2'), url('fontes/Altone-Medium.ttf') format('truetype'); } @font-face { font-family:'Altone'; font-weight:600; font-style:normal; font-display:swap; src:url('fontes/Altone-SemiBold.woff2') format('woff2'), url('fontes/Altone-SemiBold.ttf') format('truetype'); } @font-face { font-family:'Altone'; font-weight:700; font-style:normal; font-display:swap; src:url('fontes/Altone-Bold.woff2') format('woff2'), url('fontes/Altone-Bold.ttf') format('truetype'); } @font-face { font-family:'Altone'; font-weight:700; font-style:italic; font-display:swap; src:url('fontes/Altone-BoldOblique.woff2') format('woff2'), url('fontes/Altone-BoldOblique.ttf') format('truetype'); } @font-face { font-family:'Altone'; font-weight:800; font-style:normal; font-display:swap; src:url('fontes/Altone-ExtraBold.woff2') format('woff2'), url('fontes/Altone-ExtraBold.ttf') format('truetype'); } @font-face { font-family:'Altone'; font-weight:900; font-style:normal; font-display:swap; src:url('fontes/Altone-Heavy.woff2') format('woff2'), url('fontes/Altone-Heavy.ttf') format('truetype'); } :root { /* ============================================================ CAMADA 1 — PRIMITIVA (paleta e grandezas cruas da marca) ============================================================ */ /* Cor · verdes da marca (fonte da verdade: manual p.26) */ --bora-verde: #ceff00; /* verde BORA neon — cor de marca, superfície de impacto */ --bora-verde-oliva: #c4de47; /* verde secundário do manual — apoio/tom da onda */ --bora-verde-pressed: #a6cf00; /* neon escurecido p/ hover/pressed do botão neon (preto sobre = 11.5:1) */ --bora-verde-profundo: #5c6e00; /* DERIVADO p/ AA: verde de texto/ícone/link sobre branco (5.70:1). Decisão registrada em DIRECAO.md */ /* Cor · neutros (manual p.26) */ --bora-preto: #000000; --bora-branco: #ffffff; /* Cor · neutros derivados do preto (interface — lacuna preenchida sem matiz novo) */ --neutro-900: #000000; --neutro-700: #3a3a3a; /* 11.4:1 no branco */ --neutro-600: #565656; /* 7.3:1 — texto secundário sobre branco */ --neutro-400: #9a9a9a; /* placeholder/desabilitado (não-texto essencial) */ --neutro-300: #d9d9d9; /* bordas */ --neutro-200: #ececec; /* superfície sutil */ --neutro-100: #f5f5f5; /* superfície alternada */ /* Cor · pretos e brancos com alpha (texto sutil sobre campo de cor) */ --preto-72: rgba(0,0,0,.72); /* texto sutil sobre verde: equivale a #3E4D00, 7.9:1 */ --preto-18: rgba(0,0,0,.18); /* borda sobre verde */ --preto-08: rgba(0,0,0,.08); --branco-72: rgba(255,255,255,.72); /* texto sutil sobre preto */ --branco-16: rgba(255,255,255,.16); /* borda sobre preto */ --branco-08: rgba(255,255,255,.08); /* superfície sutil sobre preto/foto (véu claro) */ /* Cor · sistema (FUNCIONAL, não de marca — o manual não define) */ --sys-erro: #c21a45; /* 5.95:1 no branco */ --sys-erro-fundo: #fdecf0; --sys-aviso: #8a5a00; /* 5.93:1 no branco */ --sys-aviso-fundo: #fbf1dd; --sys-info: #1d5fb8; /* 6.21:1 no branco */ --sys-info-fundo: #eaf1fb; /* sucesso reaproveita o verde-profundo da marca (a BORA já é energia verde) */ /* Tipografia · famílias (fallback só técnico; Altone é a protagonista) */ --fonte-titulo: 'Altone', 'Helvetica Neue', Helvetica, Arial, sans-serif; --fonte-texto: 'Altone', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Tipografia · pesos (Altone) */ --peso-regular: 400; --peso-medio: 500; --peso-semibold: 600; --peso-bold: 700; --peso-extrabold: 800; --peso-heavy: 900; /* Tipografia · escala fluida (clamp: mobile → desktop) */ --txt-xs: clamp(0.72rem, 0.70rem + 0.1vw, 0.78rem); --txt-sm: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem); --txt-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); --txt-md: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem); --txt-lg: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); --txt-xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem); --txt-2xl: clamp(2.2rem, 1.6rem + 2.8vw, 3.75rem); --txt-3xl: clamp(2.9rem, 1.9rem + 4.6vw, 5.5rem); --txt-hero: clamp(3.4rem, 2rem + 6.6vw, 7.5rem); /* Tipografia · entrelinhas e tracking */ --lh-apertada: 1.0; --lh-titulo: 1.06; --lh-media: 1.3; --lh-texto: 1.55; --ls-titulo: -0.02em; --ls-caps: 0.01em; --ls-kicker: 0.16em; /* eyebrows em caixa-alta espaçada */ /* Espaçamento · escala base 8 */ --esp-3xs: 0.25rem; --esp-2xs: 0.5rem; --esp-xs: 0.75rem; --esp-sm: 1rem; --esp-md: 1.5rem; --esp-lg: 2rem; --esp-xl: 3rem; --esp-2xl: 4rem; --esp-3xl: 6rem; --esp-secao: clamp(3.5rem, 2rem + 7vw, 8rem); /* Raios */ --raio-xs: 0.25rem; --raio-sm: 0.5rem; --raio-md: 0.875rem; --raio-lg: 1.25rem; --raio-xl: 2rem; --raio-pill: 999px; --raio-circulo:50%; /* Elevação (sistema flat — mínima; profundidade vem da onda, não de sombra) */ --elev-0: none; --elev-1: 0 1px 2px rgba(0,0,0,.10); --elev-2: 0 12px 32px -12px rgba(0,0,0,.32); /* Larguras de container */ --cont-texto: 65ch; --cont-estreito:42rem; --cont-padrao: 72rem; --cont-largo: 90rem; /* Breakpoints (referência — media query não lê var; documentado no CONTRATO) */ --bp-sm: 40rem; --bp-md: 48rem; --bp-lg: 64rem; --bp-xl: 80rem; /* Motion — tokens semânticos por intenção */ --dur-rapida: 120ms; --dur-padrao: 220ms; --dur-entrada: 420ms; --dur-pulso: 2600ms; /* pulso da assinatura (onda de energia) */ --ease-padrao: cubic-bezier(.2,.6,.2,1); --ease-enfase: cubic-bezier(.16,1,.3,1); --ease-saida: cubic-bezier(.4,0,1,1); /* Motion de coreografia (rev. 06/08/2026, noite — medidos na rodada 5 do hero BORA vendas, aprovada em pixel; pendente ratificação do Patrick). Um easing só na página inteira (--ease-enfase, o expo-out da Wolverine). */ --dur-coreografia: 820ms; /* entrada de linha de manchete por máscara */ --dur-chegada: 600ms; /* peça secundária que chega depois da manchete */ --stagger-linha: 115ms; /* compasso entre linhas/peças da coreografia */ --dur-vida: 7000ms; /* ciclo do elemento com vida própria: movimento em ~12%, descanso em 88% */ /* ============================================================ CAMADA 2 — SEMÂNTICA (o papel; é o que a produção usa) Padrão = contexto BRANCO (fundo de conteúdo). Contextos .contexto-verde / .contexto-preto remapeiam abaixo. ============================================================ */ --cor-fundo: var(--bora-branco); --cor-superficie: var(--bora-branco); --cor-superficie-sutil: var(--neutro-100); --cor-superficie-alt: var(--neutro-200); --cor-texto: var(--bora-preto); --cor-texto-sutil: var(--neutro-600); --cor-texto-fraco: var(--neutro-400); --cor-borda: var(--neutro-300); --cor-borda-forte: var(--bora-preto); --cor-marca: var(--bora-verde); /* superfície/fill de marca (neon) */ --cor-marca-texto: var(--bora-verde-profundo);/* EXCEÇÃO RARA (rev. 22/07/2026): verde textual AA sobre branco. Usos sancionados: anel de foco no branco (--cor-foco), mensagens de sucesso (--cor-sucesso) e o raro texto que PRECISA ser verde no branco. Eyebrow/label/link padrão no branco = PRETO. */ --cor-destaque: var(--bora-verde); --cor-sobre-destaque: var(--bora-preto); /* texto sobre o verde neon = sempre preto */ --cor-grafico: var(--bora-verde); /* rev. 22/07/2026: ícones, traços, sublinhados e marcadores. No BRANCO é o NEON — DECORATIVO (1.17:1): nunca carrega informação sozinho; ícone informativo = glifo preto sobre chip --cor-destaque, ou acompanhado de texto preto. */ --cor-foco: var(--bora-verde-profundo);/* anel de foco visível sobre branco */ --cor-sucesso: var(--bora-verde-profundo); --cor-erro: var(--sys-erro); --cor-erro-fundo: var(--sys-erro-fundo); --cor-aviso: var(--sys-aviso); --cor-aviso-fundo: var(--sys-aviso-fundo); --cor-info: var(--sys-info); --cor-info-fundo: var(--sys-info-fundo); --cor-desabilitado: var(--neutro-300); --cor-desabilitado-texto: var(--neutro-400); /* Scrim sobre foto (garante AA de texto sobre imagem — regra 7 do Patrick) */ --scrim-forte: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 55%, rgba(0,0,0,.15) 100%); --scrim-lateral:linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.34) 48%, rgba(0,0,0,0) 78%); --cor-sobre-foto: var(--bora-branco); --cor-sobre-foto-sutil: var(--branco-72); /* ============================================================ CAMADA 3 — COMPONENTE (override pontual; mínimo possível) ============================================================ */ /* Título (rev. 22/07/2026 — fim da caixa-alta como padrão + mix de pesos) Sentence case (capitalização natural de frase). Caixa-alta fica reservada a eyebrows, labels e CTAs. Título com 2+ linhas: linha de contexto no peso SUAVE, linha de ênfase no peso FORTE (Regular 400 → Bold 700: contraste claro sem engrossar — Heavy/ExtraBold seguem vetados como base). */ --titulo-peso-suave: var(--peso-regular); /* linha de contexto do mix */ --titulo-peso-forte: var(--peso-bold); /* linha de ênfase / título de 1 linha */ /* Traço gráfico (rev. 22/07/2026 — verde neon como traço/marcador no branco) */ --traco-alt: 3px; /* grossura do traço/sublinhado neon */ --traco-larg: 1.5rem; /* comprimento do traço de eyebrow */ /* Registro DISPLAY (rev. 06/08/2026, noite — sessão delegada, pendente confirmação do Patrick). Régua medida nas 3 referências dele (day one® Run, Wolverine, Performance Lab): manchete de dobra protagonista em peso MÉDIO, entrelinha fechada e tracking negativo. Vale SÓ para o registro de monumento (hero e aberturas protagonistas); as seções de leitura seguem na régua padrão (--lh-titulo 1.06 / --ls-titulo -0.02em / mix 400→700). Nenhuma das 3 referências usa Bold ou mais pesado em manchete. */ --display-peso: var(--peso-medio); /* 500 */ --display-lh: 0.86; --display-ls: -0.035em; --txt-display: clamp(3rem, 0.9rem + 6.8vw, 6.6rem); /* Palco (rev. 07/08/2026 — extraídos do hero da página de vendas quando ele travou, via lei-scan; ver Clientes/BORA/leis/vendas.md, campo 1). São as duas medidas de PALCO: onde o serviço (rótulo, apoio, ação) mora na margem, e onde a manchete nasce, mais colada na borda porque ela sangra. Viraram token porque a lei da página as nomeia e a auditoria não aceita nome inventado na página: medida que atravessa seções é do sistema. */ --margem-palco: clamp(1.4rem, 3.4vw, 3rem); --recuo-manchete: clamp(1rem, 2.6vw, 2.4rem); /* Botão */ --botao-raio: var(--raio-pill); --botao-alt-min: 2.9rem; /* alvo de toque >= 44px */ --botao-pad-y: var(--esp-xs); --botao-pad-x: var(--esp-lg); --botao-peso: var(--peso-extrabold); --botao-primario-bg: var(--bora-verde); --botao-primario-fg: var(--bora-preto); --botao-primario-bg-hover: var(--bora-verde-pressed); /* Card */ --card-raio: var(--raio-lg); --card-borda: var(--cor-borda); --card-pad: var(--esp-md); --card-fundo: var(--cor-superficie); /* Foco */ --foco-anel: 3px; --foco-offset: 2px; /* Assinatura — Pattern do raio (curvas de contorno do raio "Z", BORA PATTERN) Asset real da marca (2. PATTERN/BORA PATTERN.png), copiado em marca/bora-pattern.png. Aplicado como MÁSCARA: as linhas do pattern assumem `currentColor`, o resto é transparente. Nunca é círculo perfeito — segue a silhueta orgânica do raio. Sempre discreto: tonal (tom sobre tom) quando full-bleed, ou de apoio no canto. */ --pattern-img: url('marca/bora-pattern.png'); /* resolvido relativo a este arquivo */ --pattern-op-tonal: 0.12; /* opacidade tom-sobre-tom em superfície de impacto (full-bleed) */ --pattern-op-canto: 0.20; /* opacidade de apoio quando ancorado no canto (cards, blocos pequenos) */ --pattern-tam: clamp(180px, 30vw, 420px); /* tamanho do pattern no canto */ /* Pattern LATERAL (rev. 22/07/2026 — variante oficial de seção, ref. cartão placa.ai): o pattern ENORME, ancorado na borda/canto esquerdo ou direito, sangrando pra fora do quadro, sempre TONAL (tom sobre tom, baixo contraste). Ocupa até ~metade da área da seção sem competir com foto/conteúdo. Cor via --cor-grafico do contexto; opacidade via --pattern-op-lateral (remapeada por contexto): branco 0.50 (neon já é naturalmente tonal sobre branco, 1.17:1) verde 0.14 (preto tom-sobre-tom, como a camiseta da marca) preto 0.12 (neon rebaixado) foto 0.16 (neon; SEMPRE com scrim por baixo do texto, nunca sobre rosto) */ --pattern-tam-lateral: clamp(28rem, 52vw, 58rem); --pattern-op-lateral: 0.50; /* valor do contexto branco (padrão do :root) */ } /* ============================================================ CONTEXTOS DE SEÇÃO — a estrutura real da marca (1º verde de impacto · 2º branco de conteúdo · 3º preto raro · foto = hero/bloco sobre fotografia escura + scrim) Remapeiam a camada semântica; componentes se adaptam sozinhos. Regra de completude: todo .contexto-* redefine o CONJUNTO inteiro de papéis (verificado pela auditoria, passo 2c) — remap parcial vaza token do contexto pai p/ componente aninhado. ============================================================ */ /* Impacto: fundo verde neon dominando a tela (regra 2). Texto = preto. */ .contexto-verde { --cor-fundo: var(--bora-verde); --cor-superficie: var(--bora-verde); --cor-superficie-sutil: var(--bora-verde-oliva); --cor-texto: var(--bora-preto); --cor-texto-sutil: var(--preto-72); --cor-borda: var(--preto-18); --cor-borda-forte: var(--bora-preto); --cor-marca-texto: var(--bora-preto); /* sobre verde, "texto de marca" é preto */ --cor-destaque: var(--bora-preto); --cor-sobre-destaque: var(--bora-verde); --cor-grafico: var(--bora-preto); /* ícone/traço tonal sobre verde */ --pattern-op-lateral: 0.14; /* preto tom-sobre-tom (ref. placa.ai) */ --cor-foco: var(--bora-preto); --botao-primario-bg: var(--bora-preto); --botao-primario-fg: var(--bora-verde); --botao-primario-bg-hover: var(--neutro-700); --card-fundo: var(--bora-branco); color: var(--cor-texto); background-color: var(--cor-fundo); } /* Conteúdo: fundo branco respirando (regra 3). Padrão já é este; classe p/ marcar seção. Remap COMPLETO (não só fundo/texto): quando aninhado dentro de .contexto-verde/.contexto-preto (ex.: card de formulário branco numa virada verde), os tokens de componente do contexto pai vazavam por herança — botão primário virava preto/verde e o anel de foco virava preto. Corrigido: restaura todos os papéis ao padrão do :root. RATIFICADO pelo Patrick em 21/07/2026 (achado do review da página de vendas, 20/07). */ .contexto-branco { --cor-fundo: var(--bora-branco); --cor-superficie: var(--bora-branco); --cor-superficie-sutil: var(--neutro-100); --cor-texto: var(--bora-preto); --cor-texto-sutil: var(--neutro-600); --cor-borda: var(--neutro-300); --cor-borda-forte: var(--bora-preto); --cor-marca-texto: var(--bora-verde-profundo); --cor-destaque: var(--bora-verde); --cor-sobre-destaque: var(--bora-preto); --cor-grafico: var(--bora-verde); /* neon decorativo: ícones/traços/marcadores (rev. 22/07/2026) */ --pattern-op-lateral: 0.50; --cor-foco: var(--bora-verde-profundo); --botao-primario-bg: var(--bora-verde); --botao-primario-fg: var(--bora-preto); --botao-primario-bg-hover: var(--bora-verde-pressed); --card-fundo: var(--cor-superficie); color: var(--cor-texto); background-color: var(--cor-fundo); } /* Preto: fundo raríssimo, só quando muito justificado (regra 4). Verde vira acento. USO SANCIONADO (ratificado pelo Patrick em 21/07/2026): barra de prova/stats logo após o hero — números neon gritando sobre preto, faixa curta, nunca fundo padrão. */ .contexto-preto { --cor-fundo: var(--bora-preto); --cor-superficie: var(--neutro-900); --cor-superficie-sutil: #141414; /* NÃO usar fora daqui — sombra do preto; documentado */ --cor-texto: var(--bora-branco); --cor-texto-sutil: var(--branco-72); --cor-borda: var(--branco-16); --cor-borda-forte: var(--bora-branco); --cor-marca-texto: var(--bora-verde); /* neon sobre preto = 17.9:1 */ --cor-destaque: var(--bora-verde); --cor-sobre-destaque: var(--bora-preto); --cor-grafico: var(--bora-verde); --pattern-op-lateral: 0.12; --cor-foco: var(--bora-verde); --botao-primario-bg: var(--bora-verde); --botao-primario-fg: var(--bora-preto); --botao-primario-bg-hover: var(--bora-verde-pressed); --card-fundo: var(--bora-branco); color: var(--cor-texto); background-color: var(--cor-fundo); } /* Foto: seção/bloco construído sobre fotografia escura — hero, card de prova grande, CTA sobre imagem. A FOTO é o fundo (por isso este contexto não seta background-color); --cor-fundo preto fica só como papel de fallback p/ componente que leia o token. OBRIGATÓRIO: scrim tokenizado por baixo do texto (--scrim-forte ou --scrim-lateral). Texto branco, foco NEON: o anel padrão (verde-profundo) some sobre foto escura — achado real do review de vendas; substitui o remap manual de --cor-foco que o hero fazia. RATIFICADO pelo Patrick em 21/07/2026 como contexto oficial do sistema. */ .contexto-foto { --cor-fundo: var(--bora-preto); --cor-superficie: var(--neutro-900); --cor-superficie-sutil: var(--branco-08); --cor-texto: var(--cor-sobre-foto); --cor-texto-sutil: var(--cor-sobre-foto-sutil); --cor-borda: var(--branco-16); --cor-borda-forte: var(--bora-branco); --cor-marca-texto: var(--bora-verde); --cor-destaque: var(--bora-verde); --cor-sobre-destaque: var(--bora-preto); --cor-grafico: var(--bora-verde); --pattern-op-lateral: 0.16; /* lateral sobre foto: sempre com scrim, nunca sobre rosto */ --cor-foco: var(--bora-verde); --botao-primario-bg: var(--bora-verde); --botao-primario-fg: var(--bora-preto); --botao-primario-bg-hover: var(--bora-verde-pressed); --card-fundo: var(--bora-branco); color: var(--cor-texto); } /* ============================================================ VERIFICAÇÃO DE CONTRASTE (WCAG) — pares semânticos ------------------------------------------------------------ APROVADOS (entram no sistema): preto sobre verde #ceff00 .............. 17.93 AAA (texto sobre impacto) verde #ceff00 sobre preto ............... 17.93 AAA (acento sobre preto) preto sobre branco ...................... 21.0 AAA (corpo padrão) branco sobre preto ....................... 21.0 AAA verde-profundo #5c6e00 sobre branco ...... 5.70 AA (verde como texto/link) neutro-600 #565656 sobre branco .......... 7.34 AAA (texto secundário) preto-72 sobre verde (=~#3e4d00) ......... 7.91 AAA (texto sutil sobre impacto) branco-72 sobre preto .................... ~11 AAA (texto sutil no preto) preto sobre verde-pressed #a6cf00 ........ 11.55 AAA (botão hover) erro #c21a45 / info #1d5fb8 / aviso #8a5a00 sobre branco .. 5.9–6.2 AA branco sobre erro #c21a45 ................ 5.95 AA (badge) PROIBIDOS (nunca entram): branco sobre verde #ceff00 ............... 1.17 FAIL verde #ceff00 como TEXTO sobre branco ... 1.17 FAIL -> usar --cor-marca-texto verde-oliva #c4de47 como texto sobre branco 1.51 FAIL NOTA (rev. 22/07/2026): o neon sobre branco É permitido como --cor-grafico DECORATIVO (traço, sublinhado de link preto, marcador, pattern) — nunca carregando informação sozinho. Ícone informativo no branco = glifo preto sobre chip neon (--cor-destaque + --cor-sobre-destaque, 17.93:1). ============================================================ */ /* Base tipográfica / reset leve de consumo */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--fonte-texto); font-weight: var(--peso-regular); font-size: var(--txt-base); line-height: var(--lh-texto); color: var(--cor-texto); background-color: var(--cor-fundo); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Movimento respeitando preferência do usuário (global) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }