/* ========================================================================== tokens.css — TOKENS DO DESIGN SYSTEM · BankAI · LP Estruturação de Funil -------------------------------------------------------------------------- ESTE ARQUIVO **VAI** PARA A LANDING PAGE. É a primeira folha carregada. Nada de estilo mora aqui: só valores. Nenhum outro arquivo deste projeto pode escrever um px, um ms, um hex ou um peso solto — tudo sai daqui. Regra que vale para o projeto inteiro, inclusive nomes de classe: uma classe chamada `.delay-200` carrega o valor no nome e some do alcance do token. Escalonamento se faz com `--i` + `calc()` sobre --mov-passo. ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. TIPOGRAFIA — famílias ------------------------------------------------------------------------ DUAS famílias, e a divisão entre elas é uma regra de conteúdo, não de gosto: A PROMESSA É DUPINCEL, A PROVA É INTER. Nenhum algarismo da página é escrito na fonte editorial. · DUPINCEL DISPLAY — a fonte de display/editorial da marca (assets/brand/fonts, brand-guide), que nunca tinha sido usada. É uma serifada de alto contraste, com dois arquivos de peso REAL (Regular 400 e Bold 700) — nada de peso sintético. Ocupa só o que é manchete: display, h1 e h2. Abaixo de 28px ela sai de cena, porque a hairline dela some no corpo pequeno e ela começa a ler como serifada de texto. Acentuação do pt-BR conferida em corpo de display (ã à ç Ç é É ó Ó õ Õ â  ú Ú ü ª º): todos desenhados, nenhum composto por fallback, e o til do à para em 892/1000 contra uma ascendente de 1020 — sobra de 0,13em para a linha de cima mesmo com altura 0.94. · INTER — continua sendo tudo o mais: corpo, rótulo, micro-label, UI, cifra, numeração, spec. É ela que carrega os dados, por ter tabular-nums e por ser a fonte digital da marca. NÃO adotamos uma terceira família. O digital-architect usa `font-mono` em todo micro-rótulo; o papel do mono é recriado com Inter: peso 600 + caixa alta + --tracking-label + tabular-nums. NEXA foi avaliada e recusada: o arquivo Nexa-Regular do kit vem com o bit ITALIC ligado no OS/2 e subfamília "Italic" (o navegador a serviria como itálico), e ela é outra geométrica sem serifa — trocaria a Inter por uma vizinha e não compraria contraste nenhum. ------------------------------------------------------------------------ */ --fonte-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* O fallback da display é serifado de propósito: se a Dupincel não chegar, a manchete continua sendo uma serifada e a página não troca de personalidade no meio do carregamento. */ --fonte-display: 'Dupincel', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif; /* Pesos da display — dois arquivos, dois pesos reais. Os nomes dizem o PAPEL (leve/sólido), não o número, porque é o papel que a manchete consome: o que carrega a promessa é sólido, o resto é leve. */ --peso-display-leve: 400; --peso-display-solido: 700; --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; /* ------------------------------------------------------------------------ 2. TIPOGRAFIA — escala ------------------------------------------------------------------------ Fluida entre 390px (mobile de referência) e 1440px. A escala é a mesma da v2, degrau por degrau — o que mudou foi a FAMÍLIA que ocupa os três degraus de cima. O contraste entre o display e o corpo é a hierarquia inteira: 104px de Dupincel contra 16px de Inter. ------------------------------------------------------------------------ */ /* A escala fluida usa cqi (1% da largura do CONTAINER), não vw. Com vw, o hero renderizado dentro da moldura de 390px da documentação ganharia 128px de manchete num container de 390px e estouraria — o número viria da janela de 1440px, não da caixa em que ele está. Com cqi o tipo responde à largura que recebeu, na moldura ou no aparelho. Fora de qualquer container, cqi cai na largura da viewport, que é o comportamento certo para os espécimes desta documentação. O teto do display é 104px: dentro da faixa 8xl–9xl que a referência usa, e o bastante para a última linha da manchete parar antes da margem — o vazio à direita é parte da composição. */ --tipo-display: clamp(2.5rem, 7.4cqi, 6.5rem); /* 40px → 104px */ --tipo-h1: clamp(2.25rem, 5cqi, 4.5rem); /* 36px → 72px */ --tipo-h2: clamp(1.75rem, 3.4cqi, 3rem); /* 28px → 48px */ --tipo-h3: clamp(1.375rem, 2.6cqi, 2.25rem); /* 22px → 36px */ --tipo-h4: 1.5rem; /* 24px */ --tipo-h5: 1.25rem; /* 20px */ --tipo-h6: 1.125rem; /* 18px */ --tipo-corpo-g: 1.125rem; /* 18px */ --tipo-corpo: 1rem; /* 16px */ --tipo-corpo-p: 0.875rem; /* 14px */ --tipo-micro: 0.75rem; /* 12px — label uppercase */ --tipo-nano: 0.6875rem; /* 11px — caption / spec */ /* Cifra dos cases: grande, mas dois degraus abaixo do display, para que nenhum número dispute a manchete. O teto é 64px e não 80px por uma razão medida: na régua de quatro colunas a célula útil tem ~300px, e “R$ 15 mil” a 80px estoura e quebra em duas linhas, desalinhando a régua inteira. */ --tipo-cifra: clamp(2.25rem, 4.6cqi, 4rem); /* 36px → 64px */ --tipo-cifra-p: clamp(1.5rem, 2.9cqi, 2.5rem); /* 24px → 40px */ /* Proporções internas da cifra, em em: acompanham o corpo do numeral em vez de brigar com ele. Ficam aqui porque são valor, não estilo. */ --cifra-unidade: 0.46em; /* R$, mil, dias */ --cifra-prefixo: 0.3em; /* "menos de" */ /* Alturas de linha */ --altura-display: 0.94; --altura-apertada: 1.08; --altura-titulo: 1.2; --altura-corpo: 1.65; --altura-solta: 1.5; --altura-rente: 1; /* Tracking — negativo cresce com o tamanho, positivo só em caixa alta. O display tem DOIS trackings porque tem duas famílias. A referência (digital-architect) usa −0.05em com leading 1 numa grotesca; a v2 usava −0.045em para a Inter. A Dupincel não aguenta esse aperto: ela é uma serifada de alto contraste e as serifas terminais já ocupam parte da goteira entre letras — a −0.045em o "rí" de "escritório" encosta e o "çã" vira uma mancha só. −0.02em é o valor em que as serifas quase se tocam sem se tocar, que é o aperto certo para uma manchete grande. A Inter continua com −0.045em, e ela ainda ocupa o papel de display em um lugar: a cifra dos cases, que é número e por isso não é Dupincel. A altura 0.94 fica: o til do à da Dupincel para em 892/1000 contra ascendente 1020, então entre a cedilha de uma linha (−264) e o til da seguinte sobram 0,21em — mais folga do que a Inter tinha. */ --tracking-display: -0.02em; /* Dupincel — manchete, h1, h2 */ --tracking-display-inter: -0.045em; /* Inter — só a cifra dos cases */ --tracking-h2: -0.025em; --tracking-h3: -0.02em; --tracking-corpo: 0em; --tracking-label: 0.14em; /* micro-label em caixa alta — o papel do mono */ --tracking-cod: 0.02em; /* números e specs tabulares */ /* ------------------------------------------------------------------------ 3. COR — valores de marca (assets/brand/brand-guide.md) ------------------------------------------------------------------------ Só os dois tokens que de fato geram variante de opacidade carregam os canais RGB (--cor-fundo e --cor-texto): é deles que saem os véus e os tons sobre fundo escuro, sem inventar um segundo hex. Declarar canal para os outros seis seria valor sem consumidor. ------------------------------------------------------------------------ */ --cor-fundo: #f2ece9; --cor-fundo-rgb: 242 236 233; --cor-superficie: #ffffff; --cor-borda: #e5dad4; --cor-texto: #2b2b2b; --cor-texto-rgb: 43 43 43; --cor-texto-2: #666666; --cor-accent: #a64f03; --cor-terracota: #bf5b45; /* #999999 — Cinza claro da marca. REPROVADO como cor de texto: 2,44:1 sobre o creme, abaixo até do piso de texto grande (3:1). Não existe substituto: o cinza mais claro que ainda passa AA sobre #F2ECE9 é #6B6B6B (4,55:1), visualmente igual ao #666666. Conclusão: nota, caption e helper text usam --cor-texto-2 e se diferenciam por tamanho, peso e tracking — não por cor. O #999999 fica só em papel NÃO textual: filete decorativo, marca d'água e controle desabilitado (isento pela WCAG 1.4.3). */ --cor-inativo: #999999; /* --- Variantes derivadas ------------------------------------------------ Nenhuma é um hex novo: todas nascem de um token de marca. ACCENT HOVER — a marca não tem esse valor; ele é proposta desta v2. Direção: MAIS ESCURO, e isso não é gosto. O accent tem dois papéis e clarear degrada os dois ao mesmo tempo: · como preenchimento de CTA, o branco sobre #A64F03 mede 5,61:1 — clarear até ~#BF5D0A derruba para 4,39:1 e reprova AA; · como texto/numeração sobre o creme, #A64F03 mede 4,80:1, apenas 0,30 acima do piso de 4,5 — qualquer clareada reprova. Escurecer melhora os dois. Magnitude: 14% de preto (86% do accent), que dá #8F4403 — luminância −27%, o bastante para ler como mudança de estado, pouco o bastante para continuar a mesma cor (matiz intacto em 28°). Resultado: branco sobre o hover 7,01:1 (AAA) e hover sobre creme 5,99:1 — o estado ativo fica MAIS legível que o de repouso, que é a assimetria certa para um alvo sob o cursor. O fallback é o mesmo valor medido, para navegador sem color-mix. */ --cor-accent-hover: #8f4403; --cor-accent-hover: color-mix(in srgb, var(--cor-accent) 86%, #000); /* BADGE — a terracota pura reprova nos dois papéis de badge (branco sobre ela 4,38:1; ela sobre creme 3,74:1). 88% da terracota dá #A8503D: 5,41:1 e 4,63:1, ambos AA, com o matiz preservado em 11°. A terracota original fica no arquivo como origem, não como pintura. */ --cor-badge: #a8503d; --cor-badge: color-mix(in srgb, var(--cor-terracota) 88%, #000); /* Borda em estado de foco/hover e filete de ligação: a própria borda puxada 45% na direção do texto. Não é um hex de marca — é uma cor computada, e por isso vai documentada com o valor medido. */ --cor-borda-forte: #918b88; --cor-borda-forte: color-mix(in srgb, var(--cor-borda) 55%, var(--cor-texto)); /* Opacidades — sempre a partir dos canais, nunca de um hex novo */ --op-forte: 0.72; --op-media: 0.55; --op-fraca: 0.32; --op-tenue: 0.12; --cor-texto-forte: rgb(var(--cor-texto-rgb) / var(--op-forte)); --cor-texto-media: rgb(var(--cor-texto-rgb) / var(--op-media)); --cor-texto-fraca: rgb(var(--cor-texto-rgb) / var(--op-fraca)); --cor-texto-tenue: rgb(var(--cor-texto-rgb) / var(--op-tenue)); /* Cor sobre fundo escuro (bloco invertido) */ --cor-texto-inv: var(--cor-fundo); --cor-texto-2-inv: rgb(var(--cor-fundo-rgb) / var(--op-forte)); --cor-borda-inv: rgb(var(--cor-fundo-rgb) / var(--op-fraca)); /* ------------------------------------------------------------------------ 4. ESPAÇO — escala calculada a partir de uma unidade única ------------------------------------------------------------------------ Os degraus reproduzem o ritmo do digital-architect: 32/48 dentro das células, 96 entre capítulos, 128 no momento de maior ar. ------------------------------------------------------------------------ */ --esp-unidade: 0.25rem; /* 4px */ --esp-1: calc(var(--esp-unidade) * 1); /* 4px */ --esp-2: calc(var(--esp-unidade) * 2); /* 8px */ --esp-3: calc(var(--esp-unidade) * 3); /* 12px */ --esp-4: calc(var(--esp-unidade) * 4); /* 16px */ --esp-5: calc(var(--esp-unidade) * 6); /* 24px */ --esp-6: calc(var(--esp-unidade) * 8); /* 32px */ --esp-7: calc(var(--esp-unidade) * 10); /* 40px */ --esp-8: calc(var(--esp-unidade) * 12); /* 48px */ --esp-9: calc(var(--esp-unidade) * 16); /* 64px */ --esp-10: calc(var(--esp-unidade) * 20); /* 80px */ --esp-11: calc(var(--esp-unidade) * 24); /* 96px */ --esp-12: calc(var(--esp-unidade) * 32); /* 128px */ /* ------------------------------------------------------------------------ 5. LINHA, MOLDURA E MEDIDA ------------------------------------------------------------------------ */ --fio: 1px; --fio-grosso: 2px; --largura-max: 87.5rem; /* 1400px — a moldura do digital-architect */ --largura-leitura: 42rem; /* 672px — medida de leitura confortável */ --largura-estreita: 24rem; /* 384px — descrição dentro de card */ --raio-caixa: 0; /* o sistema é de fios retos: card sem raio */ /* Larguras de coluna dos componentes de lista */ --col-etapa: 14rem; /* período + título da etapa */ --col-case: 20rem; /* cabeçalho do case ao lado da régua */ --col-bullet: 22rem; /* afirmação do bullet, antes da explicação */ /* RAIO DE BOTÃO — canto reto, nunca pílula. A pílula do futureui foi testada e recusada: numa página que vende sobriedade operacional para advogado, o canto totalmente arredondado deixa o botão com cara de plástico e briga com o resto do sistema, que é todo de fio reto e --raio-caixa: 0. 2px não é "pílula pequena": é o mesmo canto de um carimbo, o bastante para o botão não ficar afiado. */ --raio-botao: 0.125rem; /* 2px — todo botão da página */ /* A pílula continua existindo, mas só onde o formato SIGNIFICA redondo: o badge (que é uma etiqueta) e o numeral da etapa (que é um disco). */ --raio-pilula: 62.4375rem; /* 999px — badge e disco de numeração */ /* Não existe token de sombra, e isso é proposital: a página inteira não tem uma única sombra. Hierarquia se faz com fio de 1px, respiro e escala — é o que separa "planta técnica" de "cartão de agência". */ /* Área de respiro obrigatória em volta da logo: PROPORCIONAL à altura dela (brand-guide). A razão é o token; cada contexto calcula a sua a partir da própria altura — por isso --logo-respiro é 0.5 e não um px. --respiro-logo é só o atalho do contexto mais comum, a navbar. */ --logo-alt-nav: 1.75rem; /* 28px */ --logo-alt-rodape: 2rem; /* 32px */ --logo-alt-marca: 3rem; /* 48px — vitrine da doc */ --logo-respiro: 0.5; --respiro-logo: calc(var(--logo-alt-nav) * var(--logo-respiro)); /* Opacidade da logo no rodapé: 0.7, o valor do brand-guide. Não usa --op-forte (0.72) de propósito — a marca tem um número escrito, e encostar nele "quase" é pior do que ter um token a mais. */ --logo-op-rodape: 0.7; /* ------------------------------------------------------------------------ 5.1 PRIMEIRA DOBRA — a espinha vertical e as três bandas ------------------------------------------------------------------------ --hero-margem é a espinha: o primeiro campo da ficha, a manchete, o subtítulo, a nota, o botão e o numeral da prova nascem todos neste mesmo x. É variável, não coincidência de padding — mudar aqui move a dobra inteira junto. ------------------------------------------------------------------------ */ --hero-margem: var(--esp-5); /* 24px no mobile; 48px a partir de 48rem */ /* A altura mínima da dobra subiu de 34rem para 36.75rem, e o número não é arredondado por acaso: 588px + os 77px da barra dão 665px, que é onde a tela de um iPhone 14 termina antes da rolagem (--doc-dobra-mobile: 664px). Com a ficha fora da dobra o conteúdo encolheu para ~480px, e sem esse ajuste a banda de prova parava no meio da tela, com um vão morto embaixo dela. Agora ela encosta no corte, e a folga que sobra vai toda para cima da manchete — que é o vazio que a composição quer. */ --hero-alt: 36.75rem; /* 588px — altura mínima da dobra */ --hero-alt-g: 44rem; /* 704px — a partir de 48rem de container */ /* A trava da manchete subiu de 17ch para 19ch, e não é afrouxamento: ch é a largura do "0" da fonte CORRENTE, e o "0" da Dupincel mede 540/1000 contra 600/1000 da Inter. 19ch de Dupincel (10,3em) é uma caixa MAIS ESTREITA que os 17ch de Inter (10,2em)… por 1%. O número mudou para o resultado ficar igual: a linha mais longa da cláusula grifada — "não depende de indicação", 9,9em com o tracking aplicado — cabe inteira, e o rag à direita continua vazio. */ --hero-medida: 19ch; /* trava da manchete: o rag fica vazio */ --prova-num: 1.875rem; /* 30px — a prova é linha, não display */ --prova-fio: var(--esp-5); /* 24px — o filete que liga nº e rótulo */ --prova-fio-alinha: 0.32em; /* onde o filete cruza a altura-x do nº */ /* ------------------------------------------------------------------------ 5.2 A CLÁUSULA EM PESO SÓLIDO — e a regra do sublinhado ------------------------------------------------------------------------ A cláusula que carrega a promessa ("não depende de indicação") vai em Dupincel Bold contra o Regular do resto da manchete. Esse é o contraste tipográfico da dobra, e é TUDO o que ela recebe. NÃO EXISTE TOKEN DE SUBLINHADO NESTE ARQUIVO, e é de propósito. A v4 tinha aqui seis tokens que desenhavam um traço de caneta por baixo da cláusula (--grifo-espessura, -pouso, -folga, -antes, -depois, -inclina). Eles saíram por decisão do Gustavo, e a decisão virou regra do sistema: sublinhado está fora, em qualquer forma — text-decoration, borda inferior ou traço desenhado. Ênfase se faz com peso, escala, cor ou vazio, que é o que o resto deste arquivo oferece. O que a saída do traço levou junto: a goteira extra depois da linha sólida. Ela existia porque um traço de largura inteira colidia com as ascendentes da linha seguinte a 0.94 de altura de linha. Sem o traço, o cruzamento volta a ser só de caixa — o mesmo que já acontece entre a primeira e a segunda linha da manchete, e que a página sempre aceitou. A manchete inteira volta a 0.94, sem exceção. */ /* ------------------------------------------------------------------------ 6. ÍCONE — escala do green-museum (16/20/24/32/40), 24 canônico ------------------------------------------------------------------------ */ --icone-p: 1rem; /* 16px */ --icone-m: 1.25rem; /* 20px */ --icone: 1.5rem; /* 24px — tamanho canônico de UI */ --icone-g: 2rem; /* 32px */ --icone-gg: 2.5rem; /* 40px */ --icone-traco: 1.6; /* espessura do traço, em unidades do viewBox 24 */ /* ------------------------------------------------------------------------ 7. MOVIMENTO ------------------------------------------------------------------------ Um easing de saída só, o do digital-architect. Duração curta no hover (300ms, do futureui) e longa na revelação (1s). Nada em loop, nada que chame atenção para si. ------------------------------------------------------------------------ */ --mov-instante: 120ms; --mov-rapido: 180ms; --mov-medio: 300ms; /* hover de botão e de card — futureui */ --mov-lento: 1000ms; /* revelação por scroll — digital-architect */ --mov-mascara: 1200ms; /* revelação mascarada do título — só no hero */ --mov-saida: cubic-bezier(0.16, 1, 0.3, 1); --mov-suave: cubic-bezier(0.4, 0, 0.2, 1); /* Escalonamento de entrada. O elemento declara a própria posição em --i (um inteiro, no atributo style) e o atraso sai de um calc() no ponto de uso: `transition-delay: calc(var(--i, 0) * var(--mov-passo))`. O calc NÃO pode morar aqui: custom property é substituída no elemento em que é declarada, então um `--mov-atraso` no :root congelaria --i em 0 e todo mundo entraria junto. Nenhuma classe carrega o valor. */ --mov-passo: 90ms; --desloca-revela: var(--esp-6); /* 32px — de onde o elemento sobe */ --desloca-mascara: 110%; /* de quanto a linha do título sobe */ --desloca-conta: var(--esp-3); /* 12px — a cifra sobe menos */ /* 8px e não os 4px do green-museum: lá a seta acompanha um rótulo de texto normal; aqui ela anda ao lado de um rótulo de 12px em caixa alta com tracking de 0.14em, e 4px não chega a ser percebido como resposta. */ --desloca-seta: var(--esp-2); /* 8px — quanto a seta anda no hover */ --desloca-ativo: var(--fio); /* 1px — afundamento no :active */ /* Foco visível — mesmo anel em todo controle. A COR é token à parte porque o laranja sobre o bloco escuro mede 2,52:1 e reprova o piso de 3:1 da WCAG 2.1 para indicador de foco; dentro de .inverso o anel passa a ser creme, que dá 12,10:1. */ --cor-foco: var(--cor-accent); --foco-largura: var(--fio-grosso); --foco-desloca: var(--esp-1); /* ------------------------------------------------------------------------ 8. BOTÃO — variáveis de estado consumidas por .btn (lp.css) ------------------------------------------------------------------------ */ --btn-alt: 3rem; /* 48px — alvo de toque confortável */ --btn-alt-p: 2.75rem; /* 44px — piso do botão pequeno */ --btn-pad-x: var(--esp-6); /* 32px, do futureui */ --btn-pad-y: var(--esp-3); /* 12px */ --btn-fundo-hover: var(--cor-accent-hover); --btn-texto-hover: var(--cor-superficie); --btn-borda-hover: var(--cor-accent-hover); --btn-fundo-ativo: var(--cor-accent-hover); --btn-borda-ativo: var(--cor-accent-hover); /* ------------------------------------------------------------------------ 9. MEDIDAS EXCLUSIVAS DA PÁGINA DE DOCUMENTAÇÃO ------------------------------------------------------------------------ Ficam aqui porque a regra "nenhum valor chumbado" vale também para o andaime. Nenhuma delas é usada por lp.css. ------------------------------------------------------------------------ */ --doc-col-swatch: 13rem; --doc-alt-swatch: 5rem; --doc-col-opacidade: 7rem; --doc-alt-barra: 2.5rem; --doc-col-estado: 11rem; --doc-col-icone: 6.5rem; --doc-col-marca: 17rem; --doc-alt-marca: 11rem; --doc-col-anim: 15rem; --doc-alt-anim: 7rem; --doc-peca-anim: 2.75rem; --doc-col-notas: 18rem; --doc-larg-mobile: 24.375rem; /* 390px — o mobile de referência */ --doc-alt-mobile: 51.25rem; /* 820px — altura útil de um iPhone 14 */ --doc-dobra-mobile: 41.5rem; /* 664px — onde a primeira dobra termina */ --doc-larg-distorcida: 13rem; --doc-alt-distorcida: 2.25rem; /* ------------------------------------------------------------------------ 10. BREAKPOINTS ------------------------------------------------------------------------ Declarados aqui para existirem num lugar só, mas ATENÇÃO: o CSS não aceita var() dentro da condição de uma @container ou @media — a condição é avaliada antes da cascata. Os números abaixo são, portanto, repetidos literalmente nas queries de lp.css e docs.css por imposição da linguagem, não por descuido. Mudou aqui, mudou lá. --bp-pp 30rem / 480px · o rótulo do CTA da navbar volta a ser o longo --bp-p 34rem / 544px · a régua de cifras vira duas colunas --bp-m 40rem / 640px · a grade de cards vira duas colunas --bp-g 48rem / 768px · o corte estrutural do sistema (o `md` da referência) --bp-gg 64rem / 1024px · três colunas, quatro cifras, navbar completa --bp-doc 60rem / 960px · só docs.css: a doc ganha respiro lateral maior ------------------------------------------------------------------------ */ --bp-pp: 30rem; --bp-p: 34rem; --bp-m: 40rem; --bp-g: 48rem; --bp-gg: 64rem; --bp-doc: 60rem; /* exclusivo do andaime da documentação */ } /* Quem pediu menos movimento recebe menos movimento: as durações caem a zero na origem, e todo componente que usa os tokens obedece de graça. */ @media (prefers-reduced-motion: reduce) { :root { --mov-instante: 1ms; --mov-rapido: 1ms; --mov-medio: 1ms; --mov-lento: 1ms; --mov-mascara: 1ms; --mov-passo: 0ms; --desloca-revela: 0px; --desloca-seta: 0px; } }