/* ═══════════════════════════════════════════════════════════════════════════ tokens.css — O MOTOR DA LANDING DO ENCICLUS Face PRISMA · TONAL (Material 3 Expressive) · condutora azul · densidade confortável, já resolvida: não há seletor de face aqui, esta landing veste uma só. POR QUE ESTE ARQUIVO EXISTE Até hoje a landing não tinha `:root`. Cada um dos doze atos declarava a sua própria paleta no próprio seletor — 1.142 declarações, 558 nomes únicos, 26 arquivos, 221 hexes, a mesma serifa com quatro nomes, `--ui` com onze valores. Este arquivo é o `:root` único que substitui isso. AS TRÊS CAMADAS, E A ORDEM É A LEI 1 · PRIMITIVOS — valores crus. Hex, px, ms, cubic-bezier. É o vocabulário, não a frase. NUNCA são usados direto num componente. 2 · PAPÉIS — o que a cor/forma SIGNIFICA: `--sup`, `--primaria`, `--raio-cartao`. É aqui que a estética mora. Só consomem var(). 3 · COMPONENTES — consomem exclusivamente papéis. Um botão nunca sabe que existe um hex; ele sabe que existe `--primaria`. A LEI: PAPEL NUNCA CONHECE HEX. Existe exatamente uma região deste arquivo onde um `#` pode ser COR: a CAMADA 1. UMA exceção, e ela não é cor: o `#000` das dez máscaras da camada 6. Numa `mask-image` o navegador lê o canal ALFA do gradiente — o preto ali quer dizer "opaco", não "preto". Amarrá-lo a `var(--sobre)` faria a máscara depender da luz do ato, que é exatamente o que uma máscara não pode fazer. Da camada 2 em diante tudo é `var()`, `calc()`, `color-mix()` ou `hsl(var(--triplete)/alfa)`. Se faltar um token, CRIE O TOKEN — não a exceção. Quando a IA escrever `background:#ffa946` dentro de um componente, o sistema morreu ali. COMO A LUZ DE ATO FUNCIONA (leia antes de mexer na camada 3) Esta landing não é uma página com um fundo: são doze cenas, cada uma com a sua luz, e a alternância é patrimônio. A camada 3 tem três blocos — creme, noite e frio — ligados a `data-ato-luz` (que a página já tem em todas as regiões) e a `data-ato-tom` (aninhável: um bloco creme dentro de um ato escuro pede `data-ato-tom="creme"` e ganha os papéis do creme inteiros). Cada bloco reescreve SÓ cor e sombra. Raio, borda, tipo, tempo e espaço são IDÊNTICOS nas três luzes — é isso que faz doze cenas parecerem um produto só, e é a mesma regra que o bloco escuro do Prisma segue. ARMADILHA DE CSS QUE VOCÊ PRECISA SABER Custom property com `var()` dentro resolve NO ELEMENTO ONDE FOI DECLARADA e herda já resolvida. Ou seja: `--elev-1` declarado no `:root` consumindo `--sombra-cor` NÃO muda quando um ato redeclara `--sombra-cor`. Por isso cada bloco de luz redeclara também tudo que deriva dele (as elevações, a chapa, o foco, o decor). O Prisma faz exatamente isso no bloco escuro dele. O QUE ESTE ARQUIVO DELIBERADAMENTE NÃO FAZ — e não é esquecimento · Nenhum `@font-face`. As fontes são auto-hospedadas em ld-integracao.css porque a produção tem CSP `'self'`. Aqui moram só as FAMÍLIAS. · Nenhum reset, nenhum seletor de elemento, nenhuma regra de componente. · Nenhuma `transition` de cor no `body`. O reset do Prisma põe uma; a topbar tem lei escrita e teste (`node _travessia.mjs`) de que a virada de luz é um PASSO, jamais interpolada — 20% de qualquer travessia interpolada fica abaixo de 4,5:1. A lei da casa ganha. · Nenhum `scroll-behavior:smooth`. O Prisma declara um; ld-integracao.css proíbe por escrito (quebra o pino da hero). A lei da casa ganha. PREFIXO RESERVADO: `--x-*` Mais de trinta custom properties desta landing NÃO são tokens: são canais que o JS escreve quadro a quadro (progresso de cena, ângulo de capa, fração de grifo). Elas não moram aqui e não devem ser tokenizadas. Quando forem renomeadas, que seja para `--x-`. Apagar uma delas quebra a animação sem erro nenhum no console. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ RETUNE DE 12/09/2026 — a direção mudou, e este é o registro O dono olhou a rodada de 11/09 e reprovou a PELE, não o corpo: "meio editorial, meio creme — quero premium, moderno, vivo, azul first, preto premium onde houver contraste, cantos redondos, marca-texto melhor". A referência que ele aprovou é o Design System Tonal de 11/09 (branco frio, azul de ação, Instrument Serif só no display, banda amarela de marca-texto, quatro cores com emprego). O que este retune mudou, e SÓ isso: · 1.3 CREME → agora é o PAPEL FRIO (#F8F9FC). O nome ficou porque 26 arquivos o consomem; o valor é o do DS aprovado. Mesma escada, mesmos empregos, todos os pares de contraste remedidos abaixo. · 1.4 NOITE → o preto premium frio (#0B0E14, matiz 222), não mais oliva. · 1.5 TINTA → tinta fria (#12161E), o token nº 1 da casa. · 2.5 REALCE → o MARCA-TEXTO AMARELO do produto (#FFD54A), não mais o âmbar laranja. O âmbar continua existindo (1.6) e só faz LUZ: a porta da dor, a alva do acervo, a mesa da prova, a poça do montador. Cor de luz cênica não é cor de grifo — eram a mesma variável e agora são duas. · 2.3b QUATRO CORES com emprego declarado; 2.8 raio de chip e campo sobem um degrau; 2.8b nasce o raio de SEÇÃO (a virada de ato não pode ser reta). · 4.2 LEGENDA sai do Garamond itálico e vai para a sans — o dono apontou "1 de 6", "Centros", "faltam 3 h 50 min" pelo nome. · 3.1 o --fundo-decor do claro ganha o tint da condutora (7%): azul first. Contraste remedido nesta ordem: --tinta-500 sobre --creme-100 = 5,2:1; --creme-600 sobre --noite-900 = 7,3:1; --amar-900 sobre --creme-100 = 6,6:1. O que NÃO mudou: escala, ritmo, raios de objeto, materiais (--mat-*), as cinco famílias, o grão como mecanismo, a lei papel-nunca-conhece-hex. ═══════════════════════════════════════════════════════════════════════════ */ /* ███████████████████████████████████████████████████████████████████████████ CAMADA 1 · PRIMITIVOS O ÚNICO lugar do sistema onde existe um hex. PROVENIÊNCIA, conferida linha a linha: os blocos 1.1, 1.2 e as famílias de fonte de 1.12 vêm do Prisma, literais; 1.3 a 1.11 e 1.13 a 1.19 são os primitivos desta casa, com o valor MEDIDO da landing, não arredondado — criados pela regra de ouro nº 1. (A versão anterior deste cabeçalho creditava "1.1 a 1.9" ao Prisma. Era falso: o creme, a noite, os materiais e as famílias do currículo são medição desta landing. Num arquivo que se vende pela medição, um número errado custa mais que um token faltando.) ESTA CAMADA TEM DUAS METADES, e a lei "primitivo nunca direto num componente" só vale para UMA delas. · metade SEMÂNTICA — as rampas, os neutros, o creme, a noite, a tinta, o âmbar: vocabulário. Vira papel antes de virar regra, sempre. · metade CATALOGAL — escala (--e-*, --t-*, --raio-*, --d-*, --z-*), matéria (--mat-*, --trama-*), taxonomia (--fam-*, --pano-*) e figura (--figura-*): consumida DIRETO pelo componente, porque nomear cada uma como papel seria um papel por objeto, e sessenta papéis que ninguém lembra. O TESTE: se o valor MUDA com a luz do ato, ele precisa de papel. Se é a cor de uma coisa (o pano, a madeira, a família, a curva da figura), o primitivo JÁ É o papel. ███████████████████████████████████████████████████████████████████████████ */ :root{ /* ─── 1.1 · As quatro rampas do Prisma ───────────────────────────────────── Emprego fixo por rampa — é isso que separa "paleta" de "confete". Azul: ação e navegação, o que se clica. Vermelho: erro e destruição, e só isso. Amarelo: atenção sem culpa (só 700+ em texto). Verde: sucesso. */ --azul-50:#EAF1FE; --azul-100:#D3E2FD; --azul-200:#A8C7FA; --azul-300:#7CACF8; --azul-400:#5E97F6; --azul-500:#4285F4; --azul-600:#1B6EF3; --azul-700:#0B57D0; --azul-800:#0842A0; --azul-900:#062E6F; --azul-950:#041E4A; --verm-50:#FCEEED; --verm-100:#F9DEDC; --verm-200:#F2B8B5; --verm-300:#EC928E; --verm-400:#F2685C; --verm-500:#EA4335; --verm-600:#C5221F; --verm-700:#A50E0E; --verm-800:#7F0D0D; --verm-900:#5B0A0A; --verm-950:#3A0606; --amar-50:#FEF7E0; --amar-100:#FEEFC3; --amar-200:#FDE293; --amar-300:#FDD663; --amar-400:#FCC934; --amar-500:#FBBC04; --amar-600:#F29900; --amar-700:#E37400; --amar-800:#C26401; --amar-900:#8B4700; --amar-950:#5A2E00; --verd-50:#E6F4EA; --verd-100:#CEEAD6; --verd-200:#A8DAB5; --verd-300:#81C995; --verd-400:#5BB974; --verd-500:#34A853; --verd-600:#1E8E3E; --verd-700:#188038; --verd-800:#137333; --verd-900:#0D652D; --verd-950:#0A4A21; /* A tinta que a face Tonal põe sobre o amarelo cheio. Existe porque branco sobre âmbar reprovou na auditoria do Prisma. */ --amar-tinta:#241800; /* ─── 1.2 · Neutro frio, papel e tinta do Prisma ─────────────────────────── Matiz ~225°. "Cinza puro envelhece mal ao lado de uma paleta saturada; o toque de azul costura tudo." É o neutro da FACE — não é o neutro dos atos desta landing, que é quente (ver 1.3 e 1.4). */ --n-0:#FFFFFF; --n-25:#FCFCFE; --n-50:#F7F8FB; --n-100:#EFF1F6; --n-200:#E1E5EE; --n-300:#CBD1DE; --n-400:#9AA2B4; --n-500:#6E7686; --n-600:#525968; --n-700:#3B404C; --n-800:#252932; --n-900:#161920; --n-950:#0D0F15; --n-1000:#06070A; /* Papel quente do Prisma (lá é exclusivo do Manifesto). Fica como semente da rampa creme desta casa — e como prova de que a família já existia. */ --papel-50:#FEFCF6; --papel-100:#F9F5EA; --papel-200:#EFE8D6; /* A tinta do Prisma É, dígito por dígito, a noite desta landing. O primitivo que a casa precisava já estava no gabarito, sem emprego. */ --tinta:#0B0E14; /* 12/09: era #14140F (oliva). Agora o preto premium frio */ /* Os doze tons próprios da face Tonal. O gabarito os escreve literais DENTRO do bloco [data-skin="tonal"] — ou seja, hex na camada de papel. Aqui eles sobem para a camada 1 para que a lei "papel nunca conhece hex" valha sem uma exceção sequer. Mesmos valores, outro lugar. */ --tonal-fundo:#F4F5FB; --tonal-sup:#FDFCFF; --tonal-sup-2:#F2F3FA; --tonal-sup-3:#EAECF6; --tonal-sup-4:#E1E4F1; --tonal-sobre:#171A21; --tonal-sobre-2:#464A55; --tonal-sobre-3:#666C7B; --tonal-sobre-inv:#F3F4F8; --tonal-contorno:#D4D8E4; --tonal-contorno-forte:#8A90A3; --tonal-contorno-sutil:#E7EAF2; /* ─── 1.3 · CREME — a rampa dos atos claros · RETUNADA 12/09: É O PAPEL FRIO ─ (o nome é histórico; o valor é o do DS Tonal aprovado. Ver a nota do topo.) DECISÃO, e é a mais importante deste arquivo: preservei o creme medido da landing em vez de afinar para --papel-50. Três razões. (a) O creme não vive só no CSS: seis seções o repetem literal no atributo `data-fundo`, que o ld-topbar.js lê para compor a chapa da barra com prova de pixel — afinar o token sem afinar o atributo desalinha a barra do ato. (b) --papel-50 é quase-branco quente e o creme é AMARELO: a distância entre os dois é exatamente o calor que a página tem hoje. (c) A lei da rodada é nunca regredir. O --papel-* do Prisma fica declarado acima, como vocabulário. A escada vai do papel mais claro (objeto) até o creme mais apagado (a tinta terciária sobre a noite) — uma rampa só, dois empregos. */ --creme-0:#FFFFFF; /* papel de OBJETO sobre o creme: cartão, chip, folha, menu */ --creme-25:#FDFDFE; /* superfície de LEITURA LONGA: o miolo do leitor, a tela */ --creme-50:#FFFFFF; /* papel de objeto quando o objeto pousa sobre a NOITE */ --creme-100:#F8F9FC; /* O CREME. Fundo de ato claro. Seis atos + seis data-fundo */ --creme-150:#F0F3F9; /* camada de estado quente: hover de item sobre creme */ --creme-200:#EDF0F6; /* o POÇO: campo, trilho, busca — superfície recuada, não elevada (o campo do planos é #F6F1DC, dois pontos abaixo: consolidado aqui) */ --creme-300:#EEF1F6; /* creme ASSENTADO: a tinta principal sobre a noite. 14,3:1 medido (prova e planos escrevem #ECE8D8 para o mesmo papel: consolidado aqui, e o contraste sobe, nunca desce) */ --creme-400:#DDE2EB; /* filete OPACO quente; e a família "prática" da marca */ --creme-500:#C4CBD8; /* creme secundário sobre a noite. 11,0:1 medido */ --creme-600:#98A1B3; /* creme terciário sobre a noite. 7,4:1 medido — legível, não apagado */ /* ─── 1.4 · NOITE — a rampa quente dos atos escuros ──────────────────────── Verde-oliva a 4% de saturação. NÃO é o escuro da face Tonal (#0E1116, matiz 222, azul-frio): são duas noites diferentes, e a desta casa é a mesma tinta da encadernação dos livros. Por isso ela entra como rampa própria. */ --noite-700:#1F2430; /* o pano de tinta do volume que tem arte de capa */ --noite-750:#181D27; /* o chrome: barra do leitor, barrinha — um degrau ACIMA da noite */ --noite-800:#12161E; /* a segunda superfície escura; e a TINTA sobre papel (ver 1.5) */ --noite-900:var(--tinta); /* A NOITE. Fundo de ato escuro. Quatro atos + seis data-fundo */ --noite-950:#06080C; /* a noite COMPENSADA PELO GRÃO: com a textura a .06 por cima a média medida volta a dar a noite. Só use junto com --grao-op */ /* ─── 1.5 · TINTA QUENTE — o texto sobre o creme ─────────────────────────── Os três degraus que 26 arquivos redeclaram. Não são o --sobre frio da Tonal: trocá-los esfria o token mais usado da landing inteira. */ --tinta-900:var(--noite-800); /* texto e traço sobre creme. O token nº 1 da casa */ --tinta-700:#3C4353; /* texto secundário: lead, legenda, código */ --tinta-600:#5B6373; /* só como PANO de lombada — nunca como texto */ --tinta-500:#5F6779; /* metadado: dado, fólio, nota. 5,3:1 sobre creme, medido */ --tinta-400:#8C95A8; /* metadado sobre a noite; o degrau abaixo do metadado */ /* ─── 1.6 · ÂMBAR — a assinatura da casa ─────────────────────────────────── O âmbar corre pela página inteira e NUNCA avisa nada: é fluxo, grifo, filete, sublinhado, anel de foco, ponta de caneta, passo atual. Mapear isto em --aviso seria erro semântico grave — é a cor mais usada da marca e é, literalmente, `--base-color--glow` do índice (a família "construção"). O par traço/texto já existe de fato: o cheio reprova AA em texto (1,9:1 sobre creme) e o queimado passa (5,1:1). É o mesmo padrão que o Prisma descobriu para a primária ao medir — aqui ele só foi estendido ao realce. */ --ambar-400:#FFD9A8; /* a ponta QUENTE do fio: o stop que clareia na saída */ --ambar-450:#FFE4B0; /* a soleira da porta, o traço mais claro do ato escuro */ --ambar-475:#FFE3BD; /* a área pintada das figuras interativas */ --ambar-500:#FFA946; /* A ASSINATURA. Traço, preenchimento, estado. Nunca texto pequeno */ --ambar-600:#F79A2B; /* o âmbar um degrau abaixo, para objeto sobre papel */ --ambar-700:#E8892D; /* âmbar queimado de objeto */ --ambar-800:#8F6608; /* O ÂMBAR QUE ESCREVE. 5,1:1 sobre creme — este é o de texto (a topbar escreve #8F5F07 e mede 5,53:1: consolidado aqui) */ --ambar-900:#8F4D0D; /* âmbar que escreve dentro de figura: 6,4:1 sobre papel */ --ambar-950:#7A5A1C; /* o degrau mais fundo, para traço sobre papel de figura */ --ambar-assentado:#8A5F2C; /* âmbar a 50% sobre a noite, PRÉ-COMPOSTO. Existe porque opacidade animada não tem valor estável para a prova fotografar: quatro capturas do mesmo filete deram três valores diferentes */ /* A LUZ QUENTE — os dois tons que só existem dentro de um gradiente de luz (a porta da dor, a alva do acervo, a aresta de ataque da costura do planos). Não são tinta e não são traço: são o miolo de um facho. Consolidação declarada: a alva escrevia #FFC46E e a porta #FFC478 para o mesmo papel — dez pontos num canal, a 19% de alfa. Fica o mais quente. */ --ambar-luz:#FFC478; /* o miolo do facho */ --ambar-luz-2:#FFAF5A;/* a segunda parada, já saindo para o âmbar cheio */ /* O AMARELO DO PRODUTO. NÃO é o âmbar da landing: é o marca-texto do leitor real (reading-marks.ts), citado dentro do ato "por dentro". A landing não pode mentir sobre a cor de uma peça do produto — por isso ele entra como primitivo próprio, e não como uma dose do realce. */ --marca-amarelo:#FFD54A; --girassol-400:#FFCF33; /* O CARIMBO: chip ativo, etiqueta, total de ficha. Só em OBJETO */ --girassol-600:#E8A317; /* o girassol de pigmento (a marca amarela do leitor) */ --ouro-600:#C9931A; /* ouro em objeto: a faixa da família prática nas capas */ --ouro-marca:#E9B949; /* o "+" do Enciclus+ no ato escuro — o único dourado da casa */ --osso-quente:#C9A86A; /* o fio da quina da tábua. É osso, não âmbar: âmbar cheio correndo 1440px é reservado a ESTADO, por decisão medida */ /* ─── 1.7 · PIGMENTOS — as cores puras que classificam ───────────────────── Declaradas uma vez, consumidas por dois vocabulários diferentes (1.8). Nenhuma é semântica: cor de currículo não é cor de estado. */ --pigmento-fathom:#034F46; /* verde-petróleo da marca */ --pigmento-cobalto:#2447C9; --pigmento-vermelhao:#C0392B; --pigmento-folha:#1F6B3F; --pigmento-vinho:#7F1C34; --pigmento-dawn:#F0D7FF; --pigmento-lumen:var(--creme-400); --pigmento-ouro:var(--ouro-600); /* ─── 1.8 · AS CINCO FAMÍLIAS DO CURRÍCULO ───────────────────────────────── ATENÇÃO: existem DUAS paletas categóricas nesta landing, e as duas são reais. Não unifiquei — unificar move a cor de capas que já estão impressas em .webp e de dois arquivos de JS. Está anotado como dúvida para o dono. (a) --fam-* é a paleta da MARCA, vinda de dados/indice.json (os tokens --base-color--fathom/glow/pulse/dawn/lumen-dark). É a cor da CAPA, onde a família é o fundo. O montador usa esta. (b) --pano-* é a paleta do PANO de encadernação das capas desenhadas em código (hero, acervo, livro, dor): a cor do tecido da lombada e da faixa. Mesmas cinco famílias, outro objeto. O Prisma tem quatro rampas SEMÂNTICAS e nenhuma categórica. Mapear "humanas" em --erro porque os dois são vermelhos é a regressão de 09/10 em forma de token. */ --fam-formal:var(--pigmento-fathom); --fam-construcao:var(--ambar-500); --fam-vida:var(--pigmento-vinho); --fam-humanas:var(--pigmento-dawn); --fam-pratica:var(--pigmento-lumen); /* As versões que aguentam ser TINTA sobre creme: mesmo matiz, luminosidade puxada para baixo até separarem do papel e umas das outras. Sem elas, metade da grade ficaria num lilás pálido indistinguível do fundo. */ --fam-formal-tinta:var(--pigmento-folha); --fam-construcao-tinta:#9D6510; --fam-vida-tinta:var(--pigmento-vinho); --fam-humanas-tinta:#2C3A6E; --fam-pratica-tinta:#6D6B52; /* A TINTA QUE POUSA SOBRE A CAPA. --fam-* é o FUNDO e --fam-*-tinta é a família escrevendo sobre creme: faltava o terceiro papel, a tinta EM CIMA do fundo da família. Três das cinco são claras (construção é âmbar, humanas é lilás, prática é creme) e pedem tinta escura; sem este par o montador continua escrevendo #fffff0 e #1a1a1a à mão em cada capa, que é exatamente o que ele faz hoje em --cap-ink. */ --sobre-fam-formal:var(--pano-tinta); --sobre-fam-vida:var(--pano-tinta); --sobre-fam-construcao:var(--tinta-900); --sobre-fam-humanas:var(--tinta-900); --sobre-fam-pratica:var(--tinta-900); --pano-formal:var(--pigmento-cobalto); --pano-construcao:var(--noite-800); --pano-vida:var(--pigmento-folha); --pano-humanas:var(--pigmento-vermelhao); --pano-pratica:var(--pigmento-ouro); --pano-tinta:#F8F9FC; /* a tinta que fica legível sobre qualquer um dos cinco panos */ /* ─── 1.9 · MATERIAIS — cor de OBJETO REPRESENTADO ───────────────────────── Nada aqui é superfície de UI e nada aqui pode herdar --sup-*. É papel, pano, madeira e corte de folha: a matéria dos objetos que a landing desenha. Todos medidos nas artes reais. */ --mat-capa:#DCC093; /* o papel impresso da capa, medido no rodapé das capas reais */ --mat-capa-clara:#F3E4C6; /* a guarda (o forro interno) e o papel das capas de risografia */ --mat-folha:#FFFDF3; /* a folha de rosto */ --mat-folha-2:#FCF9EA; /* a segunda folha — um passo mais amarela */ --mat-folha-3:#F7F2DF; /* as folhas do fundo: profundidade por amarelo, não por sombra */ --mat-corte-claro:#F6F0DC; /* o claro do pente de páginas (o corte do volume) */ --mat-corte-escuro:#D9D0B2; /* o escuro do mesmo pente */ --mat-ficha:#FFFEF4; /* o cartão do fichário — papel diferente do papel da página */ --mat-tabua-1:#F7F4DE; /* a tábua clara: quina iluminada, 0–2px */ --mat-tabua-2:#F0EDD4; /* a tábua clara: face */ --mat-tabua-3:#E6E2C4; /* a tábua clara: sombra */ --mat-madeira-1:#5A4F3E; /* a prancha escura: topo */ --mat-madeira-2:#423A2D; --mat-madeira-3:#2B251D; --mat-madeira-4:#191510; /* a prancha escura: base */ --mat-prancha-topo:#5A5245; /* o tampo da tábua do semestre (espessura: tampo claro…) */ --mat-prancha-face:#332F28; /* …face frontal um valor abaixo) */ --mat-prancha-moldura:#3C372E;/* a moldura do nicho da estante */ --mat-nicho:#E3D7BA; /* o fundo do nicho: papel EM SOMBRA — com papel claro atrás, as lombadas creme sumiam e a fileira parecia ter buracos */ --mat-pano-1:#F2EAD6; /* lombada: pano creme envelhecido */ --mat-pano-2:#4A4237; /* lombada: pano de pedra/couro */ --mat-pano-3:var(--noite-900);/* lombada: pano de noite */ --mat-lombada-couro:#6B6154; /* as quatro tintas de lombada da estante do montador — */ --mat-lombada-grafite:#3B342A;/* hoje moram em style="" inline no HTML. Recolhidas aqui, */ --mat-lombada-linho:#8F8578; /* com o MESMO valor: recolher não é trocar. */ --mat-lombada-pergaminho:#CFC4AD; --mat-vidro-aparelho:#0B0B0A; /* o preto por trás da tela do aparelho, antes da UI pintar */ /* ─ O PERÍODO, que é o que faz a matéria ser matéria ───────────────────── O bloco acima é generoso em COR e era mudo em ESTRUTURA — e todo material desta página é um gradiente repetido com período MEDIDO. Sem estes nomes o próximo agente pinta retângulo chapado e a prateleira vira plástico. A trama é gradiente por DECISÃO medida, nunca imagem nem filtro: há até doze capas na tela ao mesmo tempo, e nem download nem repaint cabem. */ --trama-fio:1px; /* a espessura do fio */ --trama-passo:3px; /* o período: um fio a cada 3px, nos dois eixos */ --trama-tinta:rgba(255,255,255,.07); /* o fio sobre pano escuro (a guarda) */ --trama-tinta-inv:rgba(0,0,0,.07); /* o mesmo fio sobre as três famílias claras */ --trama-papel: repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 var(--trama-fio), transparent var(--trama-fio) var(--trama-passo)), repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 var(--trama-fio), transparent var(--trama-fio) var(--trama-passo)); /* a trama da capa do montador, literal: urdidura escura e trama clara cruzadas. É --m-trama, recolhido */ --guarda-tinta:var(--trama-tinta); --guarda-tinta-inv:var(--trama-tinta-inv); /* a tinta do ponto da guarda. As seis guardas por data-guarda têm PERÍODOS próprios (18/22/16/26/14px e 86%/82%) escolhidos por posição, não por hash: assim duas capas vizinhas nunca repetem a trama, que é o defeito que faz uma prateleira virar papel de parede. A posição é DECIDE-NO-ATO; a tinta é esta */ --corte-passo:2.5px; /* o pente de folhas do montador: --mat-corte-claro/escuro */ --corte-passo-fino:3px;/* o mesmo pente, no livro 3D */ --pauta-passo:17.4px; /* UMA pauta por linha da ementa. Tem de ser IGUAL à entrelinha, ou a ementa desalinha do papel pautado */ --serrilha:9px 8px; /* o picote do recibo do planos: duas radiais em repeat-x */ /* ─── 1.10 · SEMÂNTICOS QUE SÓ EXISTEM SOBRE A NOITE ─────────────────────── O verde 700 e o vermelho 600 do Prisma são ilegíveis sobre a noite. Estes dois existem para cupom aceito e cupom recusado dentro do ato escuro. */ --verde-noite:#7EE0C6; --vermelho-noite:#FFB4A8; /* ─── 1.11 · FIGURAS INTERATIVAS ─────────────────────────────────────────── A paleta que o enciclus-demos.js LÊ por getComputedStyle para pintar o canvas. Renomear qualquer um destes sem editar o JS apaga o desenho das figuras, sem erro nenhum no console. Os nomes --enc-* atuais devem virar alias destes, nunca sumir. */ --figura-curva:var(--pigmento-fathom); /* a curva, na base (fora do ato escuro) */ --figura-curva-noite:var(--pigmento-cobalto);/* a curva, dentro do ato escuro */ --figura-alvo:var(--pigmento-vinho); /* o alvo e o erro, na base */ --figura-alvo-noite:var(--pigmento-vermelhao);/* o alvo e o erro, no ato escuro */ --figura-area:var(--ambar-475); /* a área pintada */ --figura-movel:var(--ambar-500); /* o que se move / a alça */ /* ─ OS TRANSLÚCIDOS, e por que eles são rgba() literal ─────────────────── O enciclus-demos.js lê DEZENOVE canais de cor por getComputedStyle e entrega a string direto para ctx.fillStyle. Custom property não registrada não resolve no getComputedStyle: um color-mix() chegaria ao canvas como a string "color-mix(in oklab, …)". Por isso aqui é rgba literal — é camada 1, pode, e é a única forma que o canvas aceita sem loteria de navegador. Faltar QUALQUER um destes não apaga o desenho: o JS cai no fallback dele, que para lilas-60/35 é LILÁS #f0d7ff — exatamente a cor que a decisão datada de 04/09 tirou de cena porque "a régua o chama de cara de IA". Sem erro nenhum no console. */ --figura-papel:var(--creme-25); /* #FFFFF6 — o papel da folha */ --figura-papel-base:var(--creme-100); /* o papel fora do ato escuro */ --figura-papel-fundo:#F3F0E0; /* cabeçalho e leitor de valores, no escuro */ --figura-papel-fundo-base:var(--creme-400); /* o mesmo, fora do ato escuro */ --figura-papel-fundo-frio:#F7F4E8; /* o mesmo, dentro do por dentro */ --figura-tinta:var(--tinta-900); --figura-tinta-70:rgba(26,26,26,.70); --figura-tinta-50:rgba(26,26,26,.50); --figura-tinta-30:rgba(26,26,26,.30); --figura-tinta-15:rgba(26,26,26,.15); --figura-tinta-08:rgba(26,26,26,.08); --figura-curva-30:rgba(3,79,70,.30); /* a malha e as barras, na base */ --figura-curva-15:rgba(3,79,70,.15); /* o rastro, na base */ --figura-curva-noite-30:rgba(36,71,201,.30);/* os mesmos dois, no ato escuro */ --figura-curva-noite-15:rgba(36,71,201,.15); --figura-area-borda:rgba(255,169,70,.40); /* o contorno da área (a malha do span) */ --figura-area-fraca:rgba(255,169,70,.11); /* a mancha do plano. MEDIDO: a .22 o paralelogramo #FFE3BD sumia dentro dela */ --figura-movel-35:rgba(255,169,70,.35); /* o rastro do que se move */ --figura-alvo-35:rgba(127,28,52,.35); /* o alvo translúcido, na base */ --figura-alvo-15:rgba(127,28,52,.15); --figura-alvo-noite-35:rgba(192,57,43,.35); /* o alvo translúcido, no ato escuro */ --figura-alvo-noite-15:rgba(192,57,43,.15); --figura-raio:var(--raio-4); /* 1rem na base; o ato redefine */ --figura-borda:var(--borda-objeto); /* 2px: a moldura da figura É estrutura */ /* ─── 1.12 · FAMÍLIAS DE FONTE ───────────────────────────────────────────── Nenhum @font-face aqui — as faces são auto-hospedadas em ld-integracao.css porque a produção tem CSP 'self'. CORRIGIDO EM 11/09, e esta é a correção mais cara da rodada. A versão de 10/09 desta seção dizia "Instrument Sans e JetBrains Mono já estão no disco e casam com o Prisma de graça". **A metade da frase sobre a Instrument Sans é falsa**, e o comentário de ld-integracao.css:33 que a originou também: ele diz "subset latin, 11 KB" e o arquivo é o subset **latin-EXT**. Medido com fontTools nos dois woff2 de /site/assets/fontes/: instrumentsans-400-700.woff2 123 codepoints instrumentsans-400-700-italic.woff2 123 codepoints Os 123 são Ā ă Ć Č Ď đ Ē ę Ğ ģ Ħ ī Į IJ Ķ ĺ Ľ ł Ń ņ Ň ŋ Ō ő Ŕ ŗ Ř ś Ş š Ť ū Ŭ ů Ű ų Ŵ Ŷ Ÿ Ź ż Ž ǎ Ș ț — o latim estendido do polonês, do tcheco, do romeno. **Não há um único `a`, `e`, `o`, dígito ou `·` nos dois arquivos.** Conferido: 'A' existe (U+0041), 'a' (U+0061) não. O que isso significa na PRODUÇÃO, onde a CSP recusa fonts.gstatic.com: o @font-face carrega, não casa com quase nada, e a landing INTEIRA cai para o fallback. Na bancada o defeito é invisível porque o da Google entrega a Instrument Sans completa — ou seja, o teste mente sobre o produto. Antes desta rodada isso não machucava: nove das treze pilhas `--ui` da landing traziam **Figtree** logo atrás, e a Figtree está no disco completa (391 codepoints, com `·`, travessão e todos os acentos do português). Em produção a página renderiza em Figtree hoje. Unificar as cinco pilhas numa só foi certo; ter deixado a Figtree de fora, não — sem ela a produção passaria de Figtree para Segoe UI, sem um erro no console. Por isso a Figtree fica na pilha, logo atrás, **pelo mesmo motivo e com a mesma forma** com que o EB Garamond ficou atrás da Instrument Serif quinze linhas abaixo: enquanto o woff2 certo não chega, a página mantém a letra que ela tem, em vez de degradar em silêncio. O CONSERTO DE VERDADE, que é do dono e não desta bancada: baixar o subset `latin` da Instrument Sans (o arquivo irmão deste, ~13 KB) e pôr ao lado. No dia em que ele chegar, esta linha perde a Figtree e nada mais muda. Está em _propostas-de-corte.md. */ --ff-bricolage:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif; --ff-instrument:"Instrument Sans",Figtree,ui-sans-serif,system-ui,sans-serif; --ff-serif:"Instrument Serif","Iowan Old Style",Georgia,serif; --ff-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace; --ff-antetitulo:var(--ff-bricolage); /* 12/09: o antetítulo em Bricolage caixa-alta, como no DS aprovado */ /* A serifa editorial: Instrument Serif SUBSTITUI o EB Garamond, que hoje tem quatro nomes diferentes na landing. Mas o arquivo da Instrument Serif AINDA NÃO EXISTE em /site/assets/fontes/ — por isso o Garamond fica na pilha, logo atrás: enquanto o woff2 não chega a página mantém a serifa que tem hoje, e no dia em que ele chegar a troca acontece nos doze atos de uma vez. Degradar para Georgia seria regressão tipográfica silenciosa. */ --ff-editorial:"Instrument Serif","EB Garamond","Iowan Old Style",Georgia,serif; /* A serifa de LEITURA CORRIDA (capítulo a 19px/1.6, ementa, folha de rosto) é um emprego diferente do display: o Prisma avisa que Instrument Serif é acento e "nunca em parágrafo". Enquanto o eixo não for decidido no olho, a leitura longa continua no Garamond, que foi desenhado para isso. */ --ff-leitura:"EB Garamond","Instrument Serif",Georgia,"Times New Roman",serif; /* ─── 1.13 · ESCALA TIPOGRÁFICA ──────────────────────────────────────────── Razão ~1.2 no celular e ~1.26 no desktop, fluida por clamp. Os degraus com sufixo `h` são MEIO DEGRAU ACIMA do degrau nomeado — existem porque os corpos mais usados da landing caem exatamente entre dois degraus do Prisma (15px é o corpo dominante do planos; 12px é o metadado de três atos). */ --t--4: clamp(0.5rem, 0.49rem + 0.05vw, 0.53rem); /* 8–8,5px · texto dentro de aparelho simulado */ --t--3: clamp(0.563rem, 0.54rem + 0.1vw, 0.6rem); /* 9–9,6px · idem, um degrau acima */ --t--2: clamp(0.694rem, 0.68rem + 0.07vw, 0.75rem); /* 11–12px · mínimo legível de interface */ /* R6 13/09 (auditoria A#11) — O PISO DE 12 px NO TEXTO DE INTERFACE. É o --t--2 com o mínimo subido até o teto: o degrau só CHEGA a 12px a partir de ~1600px de viewport, então no celular (11,15px a 390) e no desktop de 1440 (11,89px) ele fica abaixo do piso que a r5 fixou no semestre. O teto não mudou — 0.75rem nos dois — e por isso o clamp colapsa em 12px constante: é essa a intenção, e a forma de clamp fica escrita para dizer de onde ele veio. Não mexi no --t--2 porque ele também veste texto DENTRO dos aparelhos simulados, que é arte, não interface. */ --t--2-piso: clamp(0.75rem, 0.68rem + 0.07vw, 0.75rem); /* 12px · --t--2 com piso de interface */ --t--2h:clamp(0.75rem, 0.73rem + 0.07vw, 0.781rem); /* 12–12,5px· metadado pequeno */ --t--1: clamp(0.833rem, 0.81rem + 0.12vw, 0.889rem); /* 13,3–14,2px · apoio, dado, código */ --t--1h:clamp(0.9375rem, 0.92rem + 0.1vw, 0.969rem); /* 15–15,5px· o corpo dominante dos atos de decisão */ --t-0 : clamp(1rem, 0.98rem + 0.10vw, 1.0625rem); /* 16–17px · corpo, a medida de tudo */ --t-1 : clamp(1.2rem, 1.15rem + 0.25vw, 1.35rem); /* destaque de leitura */ --t-2 : clamp(1.44rem, 1.35rem + 0.44vw, 1.72rem); /* peça isolada */ --t-3 : clamp(1.728rem, 1.58rem + 0.72vw, 2.19rem); /* divisão interna */ --t-4 : clamp(2.074rem, 1.85rem + 1.10vw, 2.79rem); /* topo de conteúdo */ --t-5 : clamp(2.488rem, 2.15rem + 1.66vw, 3.55rem); /* abertura de bloco */ --t-6 : clamp(2.986rem, 2.48rem + 2.46vw, 4.52rem); /* título de ato */ --t-7 : clamp(3.583rem, 2.85rem + 3.55vw, 5.75rem); /* herói de seção */ --t-8 : clamp(4.3rem, 3.24rem + 5.05vw, 7.32rem); /* capa · UMA por página */ /* ─── 1.14 · ENTRELINHA E ESPACEJAMENTO ──────────────────────────────────── Título cola, texto respira. Caixa-alta abre ou vira sopa de letras. */ --lh-colado:1.02; /* título grande */ --lh-titulo:1.14; --lh-medio:1.35; --lh-editorial:1.45; /* serifa em texto curto: ementa, dedicatória, colofão */ --lh-texto:1.62; /* parágrafo */ --lh-largo:1.75; --tr-mega:-0.045em; /* display acima de 60px */ --tr-titulo:-0.025em; --tr-medio:-0.01em; --tr-micro:-0.004em; /* o aperto quase invisível da serifa em corpo grande */ --tr-zero:0em; --tr-fina:0.02em; /* rótulo em caixa baixa */ --tr-larga:0.04em; /* código de disciplina, dado tabular */ --tr-codigo:0.045em; /* código dentro de citação serifada */ --tr-codigo-larga:0.07em; /* código de régua, isolado */ --tr-caixa-media:0.06em; /* caixa-alta de CABEÇA DE TABELA — o valor da face. A Tonal abre 0.06em ali; a casa abre 0.12em num rótulo solto. Os dois existem, e não são o mesmo */ --tr-caixa:0.12em; /* CAIXA-ALTA solta: rótulo, placa, colofão */ --tr-caixa-larga:0.14em; /* colofão em caixa-alta miúda */ /* ─── 1.15 · ESPAÇO ──────────────────────────────────────────────────────── Base 4px. Espaço DENTRO de um componente é sempre menor que espaço ENTRE componentes — se os dois forem iguais, o agrupamento some. */ --e-0:0px; --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px; --e-7:32px; --e-8:40px; --e-9:48px; --e-10:64px; --e-11:80px; --e-12:96px; --e-13:128px; --e-14:160px; --e-15:200px; /* Os degraus que a base 4 não tem. Os atos editoriais desta landing não estão numa grade de 4 e sim numa de 2, e os três valores mais usados (10px, 22px, 14px) caem entre degraus: sem estes nomes, a conversão arredonda ~150 declarações de espaço e muda a densidade de cada bloco. Convenção: `x` = fora da escada, e o número É o valor em px. */ --e-fio:1px; /* a espessura de um filete usada como medida de layout */ --e-micro:2px; /* deslocamento de detalhe impresso */ --e-micro-2:3px; --e-x6:6px; --e-x10:10px; --e-x14:14px; --e-x18:18px; --e-x22:22px; --e-x26:26px; --e-x28:28px; --e-x30:30px; --e-x34:34px; --e-x36:36px; --e-x44:44px; --e-x52:52px; --e-x56:56px; --e-x60:60px; /* ─── 1.16 · RAIOS ───────────────────────────────────────────────────────── O raio é o token que mais transforma a personalidade. A face Tonal usa pílula no botão e 28px no cartão — e é isso que o dono escolheu. Os raios abaixo de 4px e os assimétricos são OBJETO, não interface: papel não tem canto de 16, e o que faz um retângulo virar livro é a assimetria (lombada apertada, goteira folgada). */ --raio-0:0px; --raio-1:4px; --raio-2:8px; --raio-3:12px; --raio-4:16px; --raio-5:20px; --raio-6:28px; --raio-7:36px; --raio-8:48px; --raio-full:999px; --raio-1h:6px; /* o degrau entre 4 e 8: foco de link, botão de régua */ --raio-fio:2px; /* filete, grifo, lombada de miniatura */ --raio-papel:3px; /* a folha e a ficha: o canto de uma coisa impressa */ --raio-ato:80px; /* a quina de um palco inteiro (o topo do montador) */ /* O RAIO DE LIVRO É UMA REGRA, não três valores: lombada APERTADA à esquerda, goteira FOLGADA à direita. A assimetria É o que faz o objeto ler como livro — arredondar tudo para --raio-capa faz o volume sumir dentro do cartão. A landing desenha essa mesma regra em nove medidas; aqui ela vira dois números e cinco combinações. */ --raio-lombada:2px; --raio-goteira:6px; --raio-obj:var(--raio-lombada) var(--raio-goteira) var(--raio-goteira) var(--raio-lombada); --raio-obj-espelho:var(--raio-goteira) var(--raio-lombada) var(--raio-lombada) var(--raio-goteira); --raio-obj-p:1px 3px 3px 1px; /* a capa na estante e na fileira */ --raio-obj-g:3px 8px 8px 3px; /* a capa grande do montador */ --raio-obj-corte:0 4px 4px 0; /* o corte das folhas: só o lado da goteira */ --raio-obj-corte-p:0 3px 3px 0; --raio-obj-dorso:3px 0 0 3px; /* a lombada vista em 3D: só o lado da dobra */ --raio-obj-lombada:1px 1px 2px 2px; /* a lombada de miniatura, deitada */ --raio-livro:var(--raio-obj); /* alias histórico — a capa vista de frente */ --raio-livro-espelho:var(--raio-obj-espelho); --raio-capa:2px 5px 5px 2px; /* a capa em miniatura na prateleira, MEDIDA (fica literal: a prateleira já está provada) */ --raio-aparelho:13% / 5.85%; /* o canto elíptico de um telefone de verdade */ /* PERSPECTIVA — o volume do palco. A nota de contrato nº 2 exclui ÂNGULO de objeto cênico, e continua excluindo; mas a profundidade do PALCO é ritmo de página, e três palcos com perspectivas diferentes por acidente é o mesmo defeito que doze paletas. Medidas nos quatro palcos que existem. */ --perspectiva-palco:1900px; /* o livro do ato "livro", de perto */ --perspectiva-palco-cel:1300px; --perspectiva-cena:1400px; /* a estante da hero e o tomo do montador */ --perspectiva-fila:1100px; /* a fileira do acervo, mais rasa */ --perspectiva-origem-livro:50% 42%; --perspectiva-origem-cena:56% 68%; --perspectiva-origem-fila:50% 100%; /* ─── 1.17 · CURVAS ──────────────────────────────────────────────────────── As três primeiras são o conjunto "emphasized" do Material 3. As cinco últimas são as curvas que a landing já usava e que o Prisma não tem: a in-out simétrica, a de percurso (um fio varrendo uma barra), o estalo contido e a aceleração suave. Curva de cena não é curva de UI. */ --c-padrao:cubic-bezier(.2,0,0,1); /* o default: 80% das transições */ --c-desacelera:cubic-bezier(.05,.7,.1,1); /* tudo que ENTRA: chega rápido e freia */ --c-acelera:cubic-bezier(.3,0,.8,.15); /* tudo que SAI: ninguém espera adeus */ --c-saida:cubic-bezier(.4,0,1,1); --c-estalo:cubic-bezier(.34,1.56,.64,1); /* passa do ponto e volta */ --c-mola:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1); --c-inout:cubic-bezier(.65,0,.35,1); /* simétrica: o que sai e volta pelo mesmo caminho */ --c-percurso:cubic-bezier(.3,0,.35,1); /* um traço atravessando uma distância — com a curva de saída da casa ele cobria 88% da barra no primeiro terço e depois se arrastava */ --c-expo-saida:cubic-bezier(.22,1,.36,1); /* a saída larga da casa: botão, chip, menu, ficha */ --c-entra:cubic-bezier(.22,1.2,.36,1); /* entrada com overshoot CONTIDO (o estalo do Prisma tem quase o dobro de passagem) */ --c-freio:cubic-bezier(.2,.9,.25,1); --c-acelera-suave:cubic-bezier(.5,0,.9,.4); --c-vaivem:ease-in-out; /* ciclo ocioso: respiro, pulso */ /* ─── 1.18 · DURAÇÕES ────────────────────────────────────────────────────── Acima de 400ms deixa de ser feedback e vira espera — em INTERFACE. Cena é outra coisa: o fluxo do trilho roda 3,4s em laço e está certo. Por isso a família --cena-* é separada da escada de UI. */ --d-0:60ms; /* atraso de SOBREPOSIÇÃO (110 saindo + 60 esperando + 220 entrando é o conserto documentado do "painel em branco no meio") */ --d-1:80ms; /* :active. A constante de toque da casa */ --d-2:120ms; /* cor de hover, foco, opacidade */ --d-2h:140ms; --d-3:180ms; --d-3h:200ms; /* o degrau mais usado do montador: 43 ocorrências */ --d-4:240ms; /* estado de botão, chip, aba trocando */ --d-4h:280ms; --d-5:320ms; /* painel abrindo, cartão expandindo */ --d-6:420ms; --d-7:560ms; --d-8:720ms; /* entrada de página, revelação por rolagem */ --d-9:1000ms; /* contador subindo, gráfico desenhando */ --d-10:1200ms; /* acima disto já não é UI */ --cena-1:1300ms; /* o pulso do botão da barra */ --cena-2:2400ms; /* a animação ociosa de uma figura */ --cena-3:3400ms; /* o fluxo do trilho e o respiro do cursor, em laço infinito */ --stagger-micro:30ms; /* cascata por profundidade de pilha */ --stagger-1:34ms; --stagger-2:55ms; /* o passo das duas cascatas independentes da casa */ --stagger-3:70ms; --stagger-4:120ms; /* cascata lenta, de bloco */ /* ─── 1.19 · Z, LARGURAS E TEXTURAS ──────────────────────────────────────── As larguras não são arbitrárias: cada uma é uma medida defendida por escrito num arquivo. Nomeá-las é o que impede o próximo agente de arredondá-las para --largura-app. */ --z-base:0; --z-elevado:10; --z-fixo:100; --z-dock:400; --z-overlay:800; --z-modal:900; --z-toast:1000; --z-dica:1100; --z-voo:3000; /* a peça que VOA da prateleira para a pilha, acima de tudo */ --largura-texto:66ch; /* parágrafo: 50–75 caracteres, ou o olho perde a volta */ --largura-leitura:74ch; --largura-app:1400px; /* o container do Prisma — não é o trilho desta página */ --trilho:1320px; /* O TRILHO da landing: a barra fixa e o rodapé descem nele */ --trilho-margem:28px; /* a goteira do trilho. O par 1320+28 é alinhamento ENTRE atos */ --largura-container:1240px; --largura-mesa:1216px; /* a mesa de planos */ --largura-miolo:1180px; /* o miolo editorial */ --largura-coluna:620px; --largura-col-editorial:600px; /* ~40 caracteres por linha: a coluna da prova */ --largura-indice:408px; /* a coluna do sumário do FAQ, medida no DOM */ /* O grão. A face Tonal declara --grao:0, ou seja, DESLIGA a textura — e o grão é o que faz o creme parecer papel e não plástico. Aqui ele volta como slot: a textura é um primitivo, a dose é papel (camada 3). O ato "dor" tem um PNG base64 próprio de 128px e um comentário que PROÍBE voltar ao feTurbulence (decodificava assíncrono e caía entre duas capturas de prova) — ele fica onde está. */ --textura-grao:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .24 1.4 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E"); --textura-grao-escala:260px; /* r6 C#10 — os dois grãos viraram WebP SEM PERDA (pixel a pixel idênticos ao PNG, conferido): 22,7 → 14,9 KB e 22,4 → 16,1 KB. Só a url() mudou. */ --textura-grao-png:url("/site/assets/prova/grao.webp"); --textura-grao-papel:url("/site/assets/prova/grao-papel.webp"); --textura-grao-costura:url("/site/assets/planos/grao.png"); /* a QUARTA fonte: a textura da junta do planos */ --textura-grao-canvas:var(--x-grao-url, none); /* a QUINTA: o PNG 180x180 que o ld-planos-base.js GERA em canvas e injeta como --grao-url. Fica como slot: o JS escreve o canal --x-*, o token o lê, e o ato inteiro continua pintando mesmo se o JS não rodar */ --textura-png-escala:128px; /* o PNG pintado no tamanho nativo (prova) */ --textura-png-escala-2x:64px; /* o MESMO PNG de 128px pintado a 64 (a dor) */ --textura-canvas-escala:180px; /* o canvas do planos */ --malha-passo:28px; /* o passo do quadriculado do caderno. A TINTA dele não mora aqui: ela muda com a luz do ato, e está nos três blocos da camada 3 como --malha-tinta */ /* A grade de cartões de curso: é o minmax() que decide quantas colunas cabem, e ele é a diferença entre quatro capas e duas. Medido no montador. */ --grade-cartao-min:256px; --grade-cartao-min-m:220px; --grade-cartao-min-p:148px; --grade-cartao-min-pp:132px; } /* ███████████████████████████████████████████████████████████████████████████ CAMADA 2 · PAPÉIS — a face Tonal, resolvida Daqui para baixo NÃO EXISTE HEX. Estes são os papéis da face escolhida (Tonal · azul · confortável), já com o que [data-lead] e [data-density] injetariam, mais os papéis que esta casa tem e o gabarito não tinha. Trocar de face seria reescrever esta camada, e só ela. ███████████████████████████████████████████████████████████████████████████ */ :root{ /* ─── 2.1 · Superfície e tinta (a face, como está no gabarito) ───────────── Esta é a luz "fria" do sistema. Na prática a landing quase nunca a usa — os atos claros dela são creme (camada 3). Ela fica aqui como base do sistema e como a luz de quem pedir `data-ato-tom="frio"`. */ --fundo:var(--tonal-fundo); /* A PÁGINA. Nunca recebe conteúdo direto */ --sup:var(--tonal-sup); /* cartão, painel, modal — o padrão */ --sup-2:var(--tonal-sup-2); /* recuo dentro de um cartão, cabeçalho de tabela */ --sup-3:var(--tonal-sup-3); /* botão neutro, chip, trilho */ --sup-4:var(--tonal-sup-4); /* fundo de barra de progresso, divisor forte */ --sup-inv:var(--n-900); /* torrada, dica, bloco de código */ --sup-papel:var(--tonal-sup); /* papel de OBJETO representado — ver 3.1/3.2 */ --sobre:var(--tonal-sobre); /* texto principal */ --sobre-2:var(--tonal-sobre-2); /* texto de apoio */ --sobre-3:var(--tonal-sobre-3); /* legenda, metadado */ --sobre-inv:var(--tonal-sobre-inv); /* texto dentro da superfície invertida */ --contorno:var(--tonal-contorno); /* borda de campo, divisor */ --contorno-forte:var(--tonal-contorno-forte); /* limite de controle: precisa de 3:1 */ --contorno-sutil:var(--tonal-contorno-sutil); /* filete de cartão */ --fundo-decor: radial-gradient(120% 90% at 12% -8%, color-mix(in oklab, var(--primaria) 13%, transparent) 0%, transparent 58%), radial-gradient(90% 70% at 100% 0%, color-mix(in oklab, var(--verd-400) 9%, transparent) 0%, transparent 55%); /* a atmosfera da página: a luz vem de CIMA, do canto esquerdo. Na face Tonal a primeira luz é TINGIDA PELA CONDUTORA (o surface tint do M3) — é o mecanismo que faz trocar [data-lead] reescrever o produto inteiro. Aqui ele fica intacto na luz FRIA e, de propósito, NÃO atravessa para o creme: ver a nota no fim de 3.1. Não é descuido, é decisão datada. */ /* ─── 2.1b · AS CINCO LUZES DE ATO ───────────────────────────────────────── 12/09: as luzes leem --ambar-500 DIRETO, não --realce. O realce virou o marca-texto amarelo; a luz da porta, da alva, da mesa e da poça continua âmbar porque é LUZ CÊNICA, e luz não muda de cor porque o grifo mudou. --fundo-decor é a atmosfera PARADA de uma luz, e é um por luz de ato. Só que a página tem CINCO luzes medidas, todas com emprego próprio e nenhuma registrada — e no claro o --fundo-decor É, valor por valor, a luz da HERO. Ou seja: até agora o acervo, ao vestir data-ato-luz="claro", recebia a atmosfera da hero e perdia uma luz âmbar quase três vezes mais forte, vinda de outro ponto, mascarada e dirigida por rolagem. Ninguém teria visto o diff; a página só ficaria um pouco mais lisa. Repete doze vezes e volta o "limpa e vazia". Estas cinco são constantes nas três luzes de propósito: são âmbar, e o âmbar não inverte. Quem as usa põe o gradiente num ELEMENTO próprio (não no fundo da seção), porque toda luz de ato desta página é uma camada com opacidade dirigida — é assim que ela nasce e apaga com a rolagem. */ --luz-alva: radial-gradient(760px 470px at 20% 4%, color-mix(in oklab, var(--ambar-500) 24%, transparent), transparent 66%), radial-gradient(1180px 590px at 46% -6%, color-mix(in oklab, var(--ambar-luz) 19%, transparent), transparent 70%); --luz-alva-altura:min(78vh, 720px); /* A ALVA do acervo: é a luz que a PORTA DA DOR abriu, ainda na parede quando o acervo sobe. Patrimônio de costura entre atos, dirigida pelo canal --x-alva. Ela MORRE sem --mascara-alva: sem a máscara o alto do gradiente encosta na quina da seção e desenha uma linha horizontal entre a dor e o acervo — está escrito no CSS de origem */ --luz-porta:radial-gradient(closest-side, color-mix(in oklab, var(--ambar-luz) 55%, transparent), color-mix(in oklab, var(--ambar-luz-2) 26%, transparent) 38%, color-mix(in oklab, var(--ambar-500) 8%, transparent) 68%, transparent 100%); /* o halo da PORTA da dor: 320x320, quatro paradas. A origem da alva */ /* R7 14/09 (celwk-09): o --luz-mesa saiu. Era `closest-side` com o centro NA BORDA (at 50% 0%): raio vertical zero, gradiente degenerado. O Chrome não pinta nada (o halo nunca existiu na tela) e o WebKit do Windows pinta uma faixa PRETA sob os cartões da prova. Morto num motor, defeito no outro. */ --luz-poca: radial-gradient(72% 42% at 50% 100%, color-mix(in oklab, var(--ambar-500) 9%, transparent) 0%, color-mix(in oklab, var(--ambar-500) 3%, transparent) 42%, transparent 72%), radial-gradient(120% 62% at 50% 40%, color-mix(in oklab, var(--mat-madeira-1) 50%, transparent) 0%, transparent 74%); /* a POÇA do montador: âmbar sob a linha da tábua mais o halo marrom-esverdeado. PARADOS de propósito — a versão animada custou 12fps */ --luz-hero: radial-gradient(120% 64% at 50% -8%, color-mix(in oklab, var(--n-0) 60%, transparent), transparent 62%), radial-gradient(70% 40% at 50% 108%, hsl(var(--sombra-cor-quente)/.08), transparent 70%); /* a luz da HERO: branco descendo de cima, quente subindo do pé. É a que o --fundo-decor do bloco creme replica — e replicar está certo, desde que se saiba que as outras quatro existem */ /* ─── 2.2 · A condutora ──────────────────────────────────────────────────── Preencher e escrever são empregos diferentes: por isso --primaria-texto existe como papel, e não como exceção dentro do componente. */ --primaria:var(--azul-700); /* preenchimento da ação primária */ --primaria-viva:var(--azul-500); /* o tom vivo: gráfico, indicador, brilho */ --sobre-primaria:var(--n-0); /* texto dentro do preenchimento cheio */ --primaria-texto:var(--primaria); /* link, número de seção, ênfase */ /* ─── 2.3 · Os pares cor/container ───────────────────────────────────────── A regra M3 que o dono confirmou: UM cheio por região, o resto é tonal. Estado selecionado/ativo/informativo usa SEMPRE o par container+tinta. */ --p-c:var(--azul-100); --sobre-p-c:var(--azul-950); --sec:var(--verm-600); --sobre-sec:var(--n-0); --sec-c:var(--verm-100); --sobre-sec-c:var(--verm-950); --ter:var(--amar-700); --sobre-ter:var(--amar-tinta); --ter-c:var(--amar-100); --sobre-ter-c:var(--amar-950); --qua:var(--verd-700); --sobre-qua:var(--n-0); --qua-c:var(--verd-100); --sobre-qua-c:var(--verd-950); /* ─── 2.3b · A HISTÓRIA EM QUATRO CORES · 12/09 ──────────────────────────── O DS aprovado conta a página com quatro tintas e cada uma tem EMPREGO: AZUL é o que se clica e o passo 1 (a grade); VERDE é o vivo, o aberto, o passo 2 (o livro) e a palavra grifada do título; AMARELO é o marca-texto, e só ele; VERMELHO é a dor, o alerta e o passo 3 (a ideia). Confete é usar as quatro sem dizer qual é qual. Redeclaradas por luz de ato. */ --cor-azul:var(--azul-700); --cor-azul-c:var(--azul-100); --sobre-cor-azul-c:var(--azul-950); --cor-verde:var(--verd-700); --cor-verde-c:var(--verd-100); --sobre-cor-verde-c:var(--verd-950); --cor-vermelho:var(--verm-600); --cor-vermelho-c:var(--verm-100); --sobre-cor-vermelho-c:var(--verm-950); --cor-amarelo:var(--amar-500); --cor-amarelo-c:var(--amar-100); --sobre-cor-amarelo-c:var(--amar-950); --cor-amarelo-texto:var(--amar-900); /* amarelo NUNCA escreve cheio: 6,6:1 sobre o papel */ --historia-quatro:linear-gradient(90deg, var(--cor-azul), var(--cor-verde) 48%, var(--cor-amarelo) 78%, var(--cor-vermelho)); /* a régua de progresso do artboard: azul→verde→amarelo→vermelho */ /* ─── 2.4 · Semânticos — sempre derivados, nunca redigitados ─────────────── Um componente lê --erro, nunca --sec. */ --sucesso:var(--qua); --sobre-sucesso:var(--sobre-qua); --sucesso-c:var(--qua-c); --sobre-sucesso-c:var(--sobre-qua-c); --aviso:var(--ter); --sobre-aviso:var(--sobre-ter); --aviso-c:var(--ter-c); --sobre-aviso-c:var(--sobre-ter-c); --erro:var(--sec); --sobre-erro:var(--sobre-sec); --erro-c:var(--sec-c); --sobre-erro-c:var(--sobre-sec-c); --info:var(--primaria); --info-c:var(--p-c); --sobre-info-c:var(--sobre-p-c); /* ─── 2.5 · O REALCE — o papel que o Prisma não tinha ────────────────────── O âmbar da casa. NÃO é --aviso: ele nunca avisa nada. É a cor que corre pela página — fluxo, grifo, filete, sublinhado, passo atual, anel de foco. O par traço/texto é obrigatório: o cheio reprova AA em texto. */ --realce:var(--marca-amarelo); /* 12/09: O MARCA-TEXTO (#FFD54A). Era o âmbar. TRAÇO e PREENCHIMENTO, nunca texto pequeno */ --realce-viva:var(--amar-500); /* o degrau abaixo, para objeto sobre papel */ --realce-texto:var(--amar-900); /* o amarelo QUE ESCREVE: 6,6:1 sobre o papel (redefinido por luz de ato) */ --sobre-realce:var(--noite-900); /* a tinta que pousa sobre o âmbar cheio */ --realce-c:color-mix(in oklab, var(--realce) 16%, transparent); /* o container tonal do realce: etiqueta, selo. A tinta que pousa nele é --realce-texto */ --realce-grifo:color-mix(in oklab, var(--realce) 42%, transparent); /* a PARADA MÉDIA de uma passada de marca-texto. Sozinho ele NÃO é um grifo: os seis grifos desta página são geometria, nunca cor chapada. Veja --grifo-* logo abaixo, e some sempre com --mistura-grifo */ /* ─ O GRIFO, que é o gesto mais repetido da página ─────────────────────── Seis grifos, e nenhum é um retângulo de cor. O do FAQ são SEIS paradas a 101 graus com background-position 0 62% e background-size 100% 96%; o do planos são três paradas a 90 graus mais um clip-path que faz a ponta macia da passada, e o irmão dele é um sublinhado de TINTA a 2px (o contraste entre os dois É o argumento: um juiz contou seis eventos âmbar em 400px de altura e tinha razão); o do semestre é um degrau vertical a 62% com box-decoration-break clone OBRIGATÓRIO, senão o grifo vira RISCO no bloco de duas linhas; o da hero é um traço SVG que se pinta; e o do "por dentro" é a cor do PRODUTO, não da casa. Quem consome --grifo-* consome --mistura-grifo junto: os dois são um par, como --foco-interno e --foco-externo. */ --grifo-produto:rgb(255 213 74 / 42%); /* o marca-texto do leitor real, CITADO. Vem de --marca-amarelo, não do âmbar: a landing não pode mentir sobre a cor do leitor */ --grifo-passada:linear-gradient(101deg, color-mix(in oklab, var(--realce) 26%, transparent) 0%, var(--realce-grifo) 12%, color-mix(in oklab, var(--realce) 33%, transparent) 47%, var(--realce-grifo) 79%, color-mix(in oklab, var(--realce) 30%, transparent) 94%, color-mix(in oklab, var(--realce) 20%, transparent) 100%); /* a passada de seis paradas (FAQ) */ --grifo-passada-pos:0 62%; /* com background-size 100% 96% */ --grifo-passada-curta:linear-gradient(90deg, color-mix(in oklab, var(--realce) 58%, transparent) 0, color-mix(in oklab, var(--realce) 34%, transparent) 64%, color-mix(in oklab, var(--realce) 46%, transparent) 100%); /* a passada de três paradas (planos) */ --grifo-ponta:polygon(0 8%, 99% 0, 100% 84%, 1% 100%); /* a ponta macia. Substitui a sangria de .15em que empurrava o âmbar 9px para fora da coluna no 390 */ --grifo-corte:62%; /* o degrau vertical do semestre */ --grifo-sublinhado:2px; /* o segundo grifo, em tinta a 30% */ --grifo-traco:26; /* stroke-width do grifo SVG da hero */ --grifo-traco-2:16; /* a segunda passada, mais fina e a .5 */ /* ─ A BANDA · 12/09 — o marca-texto do DS aprovado ─────────────────────── Não é sublinhado: é uma banda de pigmento de .42em atrás da palavra, com as pontas suavizadas e uma inclinação de caneta. Serve em título (display) e em linha corrida (com box-decoration-break:clone). */ --grifo-marcador:var(--realce); /* R5 13/09 — A BANDA ESTAVA NO PÉ DA CAIXA, NÃO ATRÁS DA PALAVRA. Com .42em a .06em do pé da caixa de linha, em corpo corrido (line-height 1.5) ela cobria só o terço de baixo das letras e lia como texto RISCADO ("para a ementa dela"); no display de 64 px caía embaixo da palavra e lia como sublinhado — o mesmo token com duas leituras (auditores B e C, r5). Agora ela é ancorada perto da linha de base: .60em de altura a .28em do pé, o que a põe atrás da altura-x em corpo e em display. Vale para hero, dor, acervo, livro, semestre, planos, faq e montador de uma vez — é o que um token é para isso. */ --grifo-marcador-alt:.60em; --grifo-marcador-pos:calc(100% - .28em); --grifo-marcador-imagem:linear-gradient(178deg, transparent 2%, var(--grifo-marcador) 5% 92%, transparent 96%); --grifo-marcador-inclina:-1.2deg; --realce-assentado:var(--ambar-assentado); /* o realce PRÉ-COMPOSTO sobre a noite, para o que ANIMA: opacidade animada não tem valor estável para a prova fotografar. Constante nas três luzes de propósito */ --marcador:var(--girassol-400); /* O CARIMBO: chip ativo, etiqueta de cursor, total de ficha, círculo de placa. SÓ em objeto, nunca em texto */ --sobre-marcador:var(--tinta-900); /* ─── 2.5b · ONDE CADA TINTA PODE POUSAR — isto é contrato, não sugestão ─── REMEDIDO EM 12/09 pelo design.html (93 medidas, 31 pares × 3 luzes, lidas do navegador): os pisos abaixo são os MÍNIMOS das três luzes depois do retune. Nenhum par reprova AA; os números antigos eram do creme quente e mentiam para o papel frio — --sobre caiu de 16 para 13,7 porque a tinta fria é um degrau mais clara que a #1A1A1A de antes, e --sobre-2 de 11 para 8,0 pelo mesmo motivo. Um contrato que mente é pior que um contrato ausente. Contraste não é propriedade de uma cor, é de um PAR. Por isso o sistema declara em que superfícies cada tinta é válida — e nenhuma outra combinação é garantida. Medido em navegador real nas três luzes; os números são o piso encontrado, não a média. --sobre em --fundo · --sup · --sup-2 · --sup-3 texto principal (>=13,7:1) --sobre-2 em --fundo · --sup · --sup-2 texto de apoio (>=8,0:1) --sobre-3 em --fundo · --sup · --sup-2 legenda, metadado (>=4,75:1) --primaria-texto em --fundo · --sup · --sup-2 link, ênfase (>=5,77:1) --realce-texto em --fundo · --sup o amarelo escrito (>=6,6:1) --sobre-primaria em --primaria texto no cheio (>=6,07:1) --sobre-p-c em --p-c texto no container(>=6,4:1) --sobre-inv em --sup-inv torrada, dica, código --sobre-papel em --sup-papel a tinta do objeto de papel --sobre-clica em --fundo o que clica (>=6,4:1) --sobre-nao-clica em --fundo o que não clica (>=5,22:1) A linha que mais engana: dentro de um ato ESCURO, o papel de um objeto é --sup-papel e a tinta dele é --sobre-papel, NUNCA --sobre. --sobre ali é creme, e creme sobre papel dá 1,14:1. Um objeto de papel dentro da noite continua sendo papel: ele carrega a própria luz, e por isso --sobre-papel é a mesma tinta escura nas três luzes. Uma medida para registrar: na luz FRIA o --contorno-forte da face dá 2,92:1 sobre --fundo e passa sobre --sup — o contrato do Prisma manda o controle pousar em --sup, e é onde ele pousa. Nas duas luzes desta casa o mesmo papel dá 5,32:1 (creme) e 7,48:1 (noite), com folga. SOBRE O PISO DE --sobre-3, porque o número que estava aqui era falso e um contrato que mente é pior que um contrato ausente: 4,75:1 é o piso, e ele é da luz FRIA (#666C7B sobre --sup-2 #F2F3FA; sobre --sup dá 5,14 e sobre --fundo 4,83). No creme o mesmo papel dá 5,32:1 e na noite 7,48:1. O "5,3" anterior era o número do creme aplicado às outras duas luzes. Passa AA para texto normal nas três — o que muda é o contrato dizer a verdade. O par que NÃO entra nesta tabela é --foco-interno: o âmbar sozinho dá 1,88:1 sobre o creme, abaixo dos 3:1 da 1.4.11. É por isso que o anel de foco tem DOIS tons — quem carrega o contraste é --foco-externo (17:1 sobre creme, 18:1 sobre a noite) e o âmbar por dentro é a assinatura. E --foco — o foco do sistema Prisma, que o reset consome em :focus-visible com outline 3px solid var(--foco) — É REDECLARADO NOS TRÊS BLOCOS DE LUZ. Enquanto ele morou só no :root ele congelava em --azul-700 e dava 2,89:1 sobre a noite #14140F: abaixo dos 3:1 da 1.4.11, invisível nos cinco atos escuros, e sem um erro sequer no console. Era o ÚNICO token congelado de 555, e foi achado por varredura de dependências, não por olho. Rode a varredura depois de cada edição — é a prova barata contra a armadilha que o topo deste arquivo descreve. */ /* ─── 2.6 · Filete — hairline como ALFA DE TINTA, não cor opaca ──────────── O mesmo filete precisa funcionar sobre creme, sobre a tábua de madeira e sobre uma capa de livro arbitrária. Cor opaca fria só funciona sobre a superfície fria. Redefinido por luz de ato. */ --filete:color-mix(in oklab, var(--sobre) 14%, transparent); --filete-forte:color-mix(in oklab, var(--sobre) 22%, transparent); /* ─── 2.7 · A escada de tinta que SIGNIFICA ──────────────────────────────── Quatro degraus de alfa com emprego declarado, não quatro tons de gosto. A regra derivada: o sublinhado de um link tem que ser mais escuro que a linha que só divide. */ --sobre-clica:color-mix(in oklab, var(--sobre) 74%, transparent); /* o que clica */ --sobre-nao-clica:color-mix(in oklab, var(--sobre) 65%, transparent); /* o que não clica */ /* 65%, e não 52%. O :root é a luz de TUDO que não está dentro de um [data-ato-luz] — o body, um modal ou uma torrada pendurada nele, o skip-link, um portal do montador. Os blocos creme e frio já corrigiam este papel para 65% e escreviam por quê (a 52% dá 3,48:1 sobre papel claro e reprova AA); o :root tinha ficado justamente com a composição que o próprio arquivo mediu e reprovou */ --sobre-regra:color-mix(in oklab, var(--sobre) 35%, transparent); /* a regra de sublinhado */ /* 35% aqui concorda com a noite e com o frio; só o bloco creme desce a 30%, porque sobre papel quente a mesma alfa pesa mais. Divergência conferida, não esquecida */ --sobre-divisor:color-mix(in oklab, var(--sobre) 10%, transparent); /* a linha que só divide */ /* ─── 2.8 · Forma ────────────────────────────────────────────────────────── Cantos generosos, como o Caderno pediu. Igual nas três luzes. */ --raio-botao:var(--raio-full); /* PÍLULA. A escolha declarada do dono */ --raio-cartao:var(--raio-6); /* 28px */ --raio-campo:var(--raio-4); /* 12/09: subiu um degrau (16px) */ --raio-chip:var(--raio-3); /* 12/09: subiu um degrau (12px) */ --raio-modal:var(--raio-7); --raio-media:var(--raio-5); --borda:1px; /* a face não usa borda como estrutura: usa luminância */ --borda-forte:1px; --borda-objeto:2px; /* a moldura de um OBJETO DESENHADO: a caixa da figura interativa, onde a borda de 2px é estrutura, não decoração. NÃO é --borda-forte, que a face mantém em 1px de propósito. Quem vier do gabarito mapeia 2px em --borda-forte pelo nome, recebe 1px, e as três figuras do "por dentro" afinam sem ninguém ver o diff */ --borda-filete:1.5px; /* SÓ desenho de objeto: thumb, quina de tábua, contorno de figura. Controle de UI lê --borda, que a face manda ser 1px — 1.5px num botão é a casa vazando na face */ /* ─── 2.8b · A FORMA DA SEÇÃO · 12/09 ────────────────────────────────────── "Quando muda de uma sessão pra outra não pode ser quadrado." O ato que entra com outra luz (claro→escuro ou escuro→claro) abre com os dois cantos de cima redondos, montado sobre o ato anterior. O body é o papel claro, e é ele que aparece nos cantos. */ --raio-secao:clamp(28px, 4vw, 56px); --raio-secao-g:clamp(40px, 6vw, 80px); /* ─── 2.9 · Elevação ─────────────────────────────────────────────────────── Duas camadas por nível: contato curto + ambiente longa. A luz vem de cima e é difusa. --sombra-cor guarda o triplete HSL sem a função, e é por isso que trocar a TEMPERATURA da sombra do produto inteiro é trocar uma linha. */ --sombra-cor:220 40% 12%; /* a sombra da face: azul-fria */ --sombra-cor-tinta:222 30% 9%; /* 12/09: a sombra de UI da casa, fria (era 0 0% 10%) */ --sombra-cor-quente:43 41% 27%; /* OBJETO DE PAPEL pousado num móvel — marrom. É o que separa "objeto de papel" de "card" */ --sombra-cor-papel:40 60% 10%; /* PAPEL SOBRE PAPEL: goteira, calha, capa sobre folha */ --elev-0:none; /* repouso sem elevação — existe para o :active poder AFUNDAR até aqui */ --elev-1:0 1px 2px hsl(var(--sombra-cor)/.07), 0 1px 3px 1px hsl(var(--sombra-cor)/.05); --elev-2:0 1px 2px hsl(var(--sombra-cor)/.08), 0 2px 6px 2px hsl(var(--sombra-cor)/.07); --elev-3:0 4px 8px 3px hsl(var(--sombra-cor)/.08), 0 1px 3px hsl(var(--sombra-cor)/.10); --elev-4:0 8px 24px 6px hsl(var(--sombra-cor)/.10), 0 2px 4px hsl(var(--sombra-cor)/.10); --elev-flutuante:0 18px 48px -12px hsl(var(--sombra-cor)/.22), 0 4px 10px hsl(var(--sombra-cor)/.08); --elev-interna:inset 0 1px 2px hsl(var(--sombra-cor)/.08); /* A família CHAPADA: deslocamento sem blur. É assinatura gráfica desta landing (card, chip, etiqueta, o volume que pousa) e no Prisma só existe no Manifesto. Sem ela o desenho perde a linha dura. */ /* GEOMETRIA E COR SEPARADAS. Na página a chapada quase nunca é neutra: o aparelho do "por dentro" pousa com 5px 7px 0 rgba(36,71,201,.14) — a sombra PEGA A COR DA TELA DELE, e é acabamento premium de verdade por uma linha —, o livro da dor pousa preto a 35%, e as lombadas do montador levam contato tingido pela cor da família. Com a cor soldada dentro do valor não havia porta de entrada, e o componente caía na chapada neutra: o acabamento morria por falta de token, não por decisão. Agora um objeto tingido escreve UMA linha: --chapada-cor: color-mix(in oklab, var(--pano-formal) 14%, transparent) */ --chapada-tingida:.14; /* a dose da sombra que pega a cor do objeto */ --elev-chapada-1:2px 2px 0 var(--chapada-cor, var(--sobre)); --elev-chapada-2:5px 6px 0 var(--chapada-cor, hsl(var(--sombra-cor-tinta)/.16)); --elev-chapada-3:8px 10px 0 var(--chapada-cor, hsl(var(--sombra-cor-tinta)/.35)); /* --chapada-cor é SLOT, não token: ele não é declarado em lugar nenhum, e é isso que faz o fallback valer. Um objeto tingido escreve a linha no próprio escopo e as três chapadas seguem juntas */ /* A família de OBJETO: 3 a 7 vezes mais pesada que a da face, porque aqui o que pousa é um livro, uma ficha, uma tábua — não um cartão de UI. */ --elev-objeto-1:0 1px 0 hsl(var(--sombra-cor-tinta)/.18), 0 10px 18px -12px hsl(var(--sombra-cor-tinta)/.55); --elev-objeto-2:0 1px 0 hsl(var(--sombra-cor-tinta)/.18), 0 16px 24px -12px hsl(var(--sombra-cor-tinta)/.60); --elev-objeto-3:0 20px 26px -12px hsl(var(--sombra-cor-quente)/.55), 0 7px 10px -6px hsl(var(--sombra-cor-tinta)/.22); --elev-pressionada:0 1px 0 hsl(var(--sombra-cor-tinta)/.18), 0 4px 8px -6px hsl(var(--sombra-cor-tinta)/.50); /* o :active que AFUNDA. A face só sabia subir */ --elev-contato:0 1px 0 hsl(var(--sombra-cor-quente)/.22), 0 14px 24px -18px hsl(var(--sombra-cor-quente)/.62); /* curta, quente, colada — nada flutua */ --sombra-chao:hsl(var(--sombra-cor-quente)/.45); /* a sombra que é um ELEMENTO com filter:blur, não box-shadow: use como background do elemento-sombra. COR E DESFOQUE: a sombra-elemento sem blur é um retângulo. Os quatro raios estão logo abaixo */ --sombra-chao-desfoque:8px; /* ambiente, longa (o chão do livro) */ --sombra-chao-desfoque-curto:2px; /* contato, colada */ --sombra-chao-desfoque-medio:2.5px;/* a sombra da estante da hero */ --sombra-chao-desfoque-joia:9px; /* a joia do planos */ --sombra-tingida:color-mix(in oklab, var(--pigmento-cobalto) 18%, transparent); /* A SOMBRA QUE A TELA ACESA LANÇA NA MESA: a cor vem do OBJETO, não do ambiente. Amarrada ao pigmento (que é constante) e não a --primaria-viva (que muda com a luz e congelaria aqui no :root) */ --elev-lombada:0 4px 10px -4px hsl(var(--sombra-cor-tinta)/.60), inset 2px 0 3px -1px hsl(var(--sombra-cor-tinta)/.35); /* a lombada. O inset lateral é a DOBRA do pano, não é sombra de UI: não o troque por --elev-interna */ /* ─── 2.10 · Vidro, grão e chapa ─────────────────────────────────────────── A face declara --vidro:blur(0px) e --grao:0 — os dois efeitos DESLIGADOS. O motor evita `if` assim: o token existe, o componente lê, e simplesmente não produz efeito. Mas esta landing vive dos dois, então eles ganham um papel próprio com a dose que a casa mediu. */ --vidro:blur(0px); /* o vidro do sistema: desligado na face */ --vidro-barra:blur(14px) saturate(1.25); /* A CHAPA DA BARRA FIXA. UMA chapa, nunca duas empilhadas: duas compunham uma faixa cinza flutuando a 1,41:1 contra o ato */ --chapa:color-mix(in oklab, var(--fundo) 88%, transparent); /* a tinta translúcida da barra, por luz de ato */ --halo-controle:var(--chapa); /* o anel de 3px que é um PEDAÇO DO PRÓPRIO FUNDO — amarrado a uma cor fixa ele virava contorno preto em volta do CTA creme sobre ato escuro */ --veu:color-mix(in oklab, var(--noite-900) 55%, transparent); /* o véu atrás da folha do celular e do modal */ --grao:0; /* o grão do sistema (body::after): desligado */ --grao-op:0; /* a dose de grão do ATO — redefinida por luz */ --grao-op-papel:.035; /* a dose sobre o papel de um objeto */ --grao-op-vivo:0; /* a dose ENQUANTO A CENA CORRE — redefinida por luz. A dor cai de .07 para .01 com data-vivo e volta a .07 com data-parado: o grão sai de cena junto com a câmera */ --grao-op-corpo:.05; /* o corpo do planos, sobre o canvas de 180px */ --grao-op-costura:.085; /* a junta entre a prova e o planos */ --grao-op-objeto:.38; /* a capa e a guarda de um livro desenhado (.35 na capa de trás, .40 na face de dentro) */ --grao-op-dirigido:calc(.22 - .12 * var(--x-noite, 0)); /* O GRÃO QUE CAI COM A NOITE: o ld-livro dirige a dose pelo mesmo canal que escurece a sala. Trocar por um número apaga o gesto */ --chanfro:0px; /* ─ A MISTURA. Sem ela a cor é metade da informação ────────────────────── multiply é o que faz o grifo e o grão passarem POR BAIXO do texto em vez de lavá-lo. É obrigatório em catorze lugares desta página (os seis grifos, o grão da hero, do acervo e do livro, a guarda, a capa em código) e era zero token: o arquivo dava a COR e calava sobre o MODO. Um componente que leia --realce-grifo e pinte em normal entrega um retângulo âmbar opaco por cima da palavra — some o texto, e a prova de contraste mede um par que ninguém escolheu. NOTA: o Prisma aplica o grão em overlay sobre ruído NEUTRO. A textura desta casa NÃO é neutra — o feColorMatrix de 1.19 tinge o ruído de marrom (.42/.36/.24) e embute uma rampa de alfa — e por isso ela vai em multiply nos catorze usos medidos. Trocar para overlay CLAREIA o campo escuro e muda a cor de quatro atos, além de invalidar a medição que justifica --noite-950. A lei da casa ganha, e agora está escrita. */ --mistura-grifo:multiply; /* o marca-texto passa POR BAIXO da palavra */ --mistura-grao:multiply; /* o grão é trama sobre papel, não véu cinza */ --mistura-veu:normal; /* ─ OS QUATRO FILTROS que carregam decisão escrita ─────────────────────── Só --vidro era token. Estes quatro moravam soltos em regra de componente, e cada um deles é uma decisão: a capa vira CENÁRIO no escuro (croma cheia a capa só tem no papel, onde é produto); o logo colorido de uma universidade vira tinta da casa; e o rótulo entrante da barra nunca nasce em zero — sem o desfoque o botão ficava legivelmente vazio por ~170ms bem no meio da troca de ato. */ --filtro-cenario:saturate(.6) brightness(.9); --filtro-marca-mono:invert(1) brightness(.10) contrast(1.35); /* os três números dependem do valor de --tinta-900: trocar a tinta sem refazer o filtro desalinha o peso óptico de TODAS as marcas de uma vez */ --filtro-marca-sombra:drop-shadow(0 5px 3px hsl(var(--sombra-cor-quente)/.34)); --filtro-troca:blur(1.5px); /* o rótulo entrante da barra */ /* ─── 2.11 · Foco ────────────────────────────────────────────────────────── Dois tons, e não um. O âmbar sozinho dá 1,88:1 sobre creme — abaixo dos 3:1 que a 1.4.11 exige. O anel interno é a assinatura; o externo é o contraste, e ele acompanha a luz do ato. O halo existe para o foco valer sobre uma capa de livro arbitrária. */ --foco:var(--primaria-texto); /* o foco do sistema (Prisma) */ --foco-interno:var(--realce); /* a assinatura: o anel âmbar */ --foco-externo:var(--sobre); /* o contraste: tinta no claro, creme no escuro */ --foco-halo:color-mix(in oklab, var(--realce) 60%, transparent); /* o halo que faz o foco valer sobre uma capa qualquer */ --foco-offset:4px; --anel-foco:0 0 0 3px color-mix(in oklab, var(--primaria) 22%, transparent); --anel-foco-controle:0 0 0 3px color-mix(in oklab, var(--primaria) 30%, transparent); --anel-foco-deslizante:0 0 0 6px color-mix(in oklab, var(--primaria) 25%, transparent); /* TRÊS doses, não uma: o CAMPO usa 22%, o CONTROLE (interruptor, caixa, rádio) usa 30% e o DESLIZANTE usa 6px a 25%. É assim no Prisma; o comentário anterior dizia que era um padrão único e creditava a unificação ao gabarito, que é o pior tipo de erro num arquivo de contrato */ --anel-selecao:inset 0 0 0 1px hsl(var(--sombra-cor-tinta)/.28), 0 0 0 2px var(--sup), 0 0 0 3.5px var(--sobre); /* O ANEL DE SELECIONADO: dois anéis com o vão pintado do PRÓPRIO papel, para o objeto escolhido se separar de doze vizinhos sem virar confete. Convive com --anel-foco, não o substitui: um diz "é meu", o outro diz "o teclado está aqui" */ /* O SCRIM — o degradê que dissolve a borda de uma lista rolável. É SEMPRE um gradiente da própria superfície para transparente, nunca uma cor nova. MEDIDO: abaixo de 22px o scrim come a metade superior das letras. */ --scrim-alto:40px; /* o rolo do montador, na vertical */ --scrim-medio:24px; /* o mesmo rolo, na horizontal */ --scrim-baixo:22px; /* o rolo no celular */ /* ─── 2.12 · Tempo e estado ──────────────────────────────────────────────── Camada de estado M3: em vez de uma cor de hover por variante, um véu de currentColor com opacidade tokenizada. Uma regra serve a todas as variantes, nas duas luzes, sem condicional. */ --dur-ui:var(--d-5); --curva-ui:var(--c-padrao); --estado-hover:.08; --estado-ativo:.12; --estado-quente:var(--creme-150); /* onde o véu de currentColor não serve porque o elemento é papel: o hover vira papel mais quente */ /* ─── 2.13 · Tipo da face e densidade ────────────────────────────────────── A Tonal usa Instrument Sans em título E corpo; a serifa é acento. Os papéis editoriais desta casa estão na camada 4. */ --ff-titulo:var(--ff-instrument); --ff-corpo:var(--ff-instrument); --peso-titulo:640; --tr-titulo-skin:var(--tr-titulo); --largura-titulo:100; --dens:1; /* multiplica ESPAÇO e só espaço. Densidade é ar, não escala */ --alt-controle:44px; /* alvo de toque mínimo (M3/WCAG) */ --alt-campo:48px; } /* ███████████████████████████████████████████████████████████████████████████ CAMADA 3 · AS TRÊS LUZES DE ATO A parte que o gabarito não tinha, e a razão desta landing existir como ela é. Doze cenas, três ambientes, um sistema. COMO ESCOLHER A LUZ · `data-ato-luz="claro"` → CREME. É o padrão dos atos claros desta casa. · `data-ato-luz="escuro"` → NOITE. · `data-ato-tom="creme|noite|frio"` → vence a luz do ato NO MESMO ELEMENTO e funciona ANINHADO: a folha creme dentro do montador (que é um ato escuro) pede `data-ato-tom="creme"` e recebe os papéis do creme inteiros. POR QUE `claro` É CREME E NÃO O NEUTRO FRIO DA FACE — decisão, e é minha Medi antes de decidir: os SEIS atos claros da landing (hero, acervo, livro, semestre, planos, faq) usam o creme hoje. Não existe um único ato frio. Se `data-ato-luz="claro"` entregasse o neutro frio da face, a Fase 3 esfriaria seis atos no primeiro dia por omissão de atributo — exatamente a regressão de 09/10, só que silenciosa. Então o padrão preserva o que está na tela, e o neutro frio do sistema continua alcançável, de propósito, por `data-ato-tom="frio"`. Quem quiser inverter isso inverte em três linhas. O QUE CADA BLOCO PODE REESCREVER: superfície, tinta, contorno, condutora, containers, sombra e as derivadas delas. NADA MAIS. Raio, borda, tipo, tempo e espaço são constantes entre atos — é isso que costura doze cenas. OS TRÊS BLOCOS DECLARAM EXATAMENTE A MESMA LISTA DE 78 TOKENS, e isso é contrato, não estilo. (Eram 64 — o cabeçalho dizia 63, e estava errado. Os catorze que entraram nesta rodada: --foco, --sobre-forte, --malha-tinta, --elev-chapada-3, as três --elev-objeto-*, --elev-pressionada, --elev-contato, --sombra-chao, --grao-op-vivo, --anel-foco-controle, --anel-foco-deslizante e --anel-selecao.) A PROVA DISSO É UM SCRIPT, e ele é barato: varra as declarações do :root, siga a cadeia de var() de cada uma e acuse a que depende de um token que os blocos redeclaram sem ser redeclarada junto. Foi assim que --foco apareceu, e foi assim que os seis apelidos de elevação da camada 5 apareceram depois. Rode a varredura a cada edição — olho não pega este defeito. Se um bloco declara um token que os outros não, esse token VAZA quando um tom é aninhado dentro de outra luz — a primeira versão deste arquivo deixava o verde de sucesso da noite escorrer para dentro de uma folha creme, ilegível, e só a prova em navegador pegou. Ao acrescentar um papel de luz, acrescente nos três. ███████████████████████████████████████████████████████████████████████████ */ /* ─── 3.1 · LUZ CREME — o papel quente, o ambiente mais frequente ────────── O `:not([data-ato-tom])` existe para que um tom explícito vença a luz do ato NO MESMO ELEMENTO. Não é firula: é o que faz o aninhamento funcionar. */ [data-ato-luz="claro"]:not([data-ato-tom]), [data-ato-tom="creme"]{ --fundo:var(--creme-100); /* o creme. Fundo da seção inteira */ --sup:var(--creme-0); /* papel de OBJETO: cartão, chip, botão de contorno, menu */ --sup-2:var(--creme-25); /* superfície de leitura longa */ --sup-3:var(--creme-200); /* o POÇO: campo, busca, trilho — recuado, não elevado */ --sup-4:var(--creme-400); /* divisor forte, fundo de barra de progresso */ --sup-inv:var(--noite-900); /* torrada, dica, bloco escuro dentro do ato claro */ --sup-papel:var(--creme-0); /* papel de OBJETO representado (folha, ficha, recibo) */ --sobre-papel:var(--tinta-900); /* A tinta de um objeto de papel e SEMPRE escura, nas tres luzes — regra da casa, escrita no ld-livro: "tinta sempre escura sobre papel, tambem no escuro (e um objeto)". Por isso --sobre-papel nao inverte junto com o ato */ --sobre:var(--tinta-900); /* texto e traço */ --sobre-2:var(--tinta-700); /* lead, legenda, código */ --sobre-3:var(--tinta-500); /* metadado. 5,3:1 sobre o creme, medido */ --sobre-inv:var(--creme-300); --contorno:var(--filete-forte); --contorno-forte:var(--tinta-500); --contorno-sutil:var(--filete); --filete:color-mix(in oklab, var(--tinta-900) 14%, transparent); --filete-forte:color-mix(in oklab, var(--tinta-900) 22%, transparent); --sobre-clica:color-mix(in oklab, var(--tinta-900) 70%, transparent); --sobre-nao-clica:color-mix(in oklab, var(--tinta-900) 65%, transparent); /* 65% e nao 55%: medido em navegador, 55% da 3,88:1 sobre o creme e reprova AA. A 65% da 5,38:1, que e a mesma marca do --sobre-3 opaco (5,32:1) — a rampa em alfa concorda com a rampa opaca para o mesmo papel */ --sobre-regra:color-mix(in oklab, var(--tinta-900) 30%, transparent); --sobre-divisor:color-mix(in oklab, var(--tinta-900) 12%, transparent); --primaria:var(--azul-700); --primaria-viva:var(--azul-500); --primaria-texto:var(--azul-700); --sobre-primaria:var(--creme-100); /* sobre o cheio, a tinta é o papel do ato */ --p-c:var(--azul-100); --sobre-p-c:var(--azul-950); --info:var(--primaria); --info-c:var(--p-c); --sobre-info-c:var(--sobre-p-c); --sucesso:var(--verd-700); --sobre-sucesso:var(--n-0); --sucesso-c:var(--verd-100); --sobre-sucesso-c:var(--verd-950); --erro:var(--verm-600); --sobre-erro:var(--n-0); --erro-c:var(--verm-100); --sobre-erro-c:var(--verm-950); --aviso:var(--amar-700); --sobre-aviso:var(--amar-tinta); --aviso-c:var(--amar-100); --sobre-aviso-c:var(--amar-950); --realce-texto:var(--amar-900); /* 6,6:1 sobre o papel (12/09) */ --marca-mais-cor:var(--realce-texto); /* R5: o "+" da marca sobre o papel */ --sobre-realce:var(--noite-900); /* A luz que cai do alto, em pigmento quente. É o mesmo gesto do --fundo-decor da face — a Tonal já traz "luz difusa vinda de cima", a hero já a tinha; só muda a temperatura. */ --fundo-decor: radial-gradient(120% 90% at 12% -8%, color-mix(in oklab, var(--primaria) 7%, transparent) 0%, transparent 58%), radial-gradient(90% 70% at 100% 0%, color-mix(in oklab, var(--verd-400) 5%, transparent) 0%, transparent 55%); /* 12/09: azul first — o tint da condutora voltou (metade da dose da face) */ /* Sombra de UI neutra; sombra de objeto quente. As elevações precisam ser redeclaradas aqui porque --sombra-cor mudou (ver a armadilha no topo). */ --sombra-cor:var(--sombra-cor-tinta); --elev-1:0 1px 0 hsl(var(--sombra-cor)/.12), 0 6px 12px -10px hsl(var(--sombra-cor)/.40); --elev-2:0 1px 0 hsl(var(--sombra-cor)/.18), 0 10px 18px -12px hsl(var(--sombra-cor)/.55); --elev-3:0 1px 0 hsl(var(--sombra-cor)/.18), 0 16px 24px -12px hsl(var(--sombra-cor)/.60); --elev-4:0 20px 26px -12px hsl(var(--sombra-cor-quente)/.55), 0 7px 10px -6px hsl(var(--sombra-cor)/.22); --elev-flutuante:0 22px 34px -18px hsl(var(--sombra-cor)/.55), 0 4px 10px -6px hsl(var(--sombra-cor)/.18); --elev-interna:inset 0 1px 2px hsl(var(--sombra-cor)/.10); --elev-chapada-1:2px 2px 0 var(--chapada-cor, var(--sobre)); --elev-chapada-2:5px 6px 0 var(--chapada-cor, hsl(var(--sombra-cor)/.16)); /* Os quatro papéis de luz. No claro eles são a quina iluminada de um móvel e a espessura de uma tábua — o mesmo emprego que têm na noite. */ --anel-luz:color-mix(in oklab, var(--n-0) 55%, transparent); --aresta-alto:inset 0 1px 0 color-mix(in oklab, var(--n-0) 55%, transparent); --aresta-baixo:0 1px 0 hsl(var(--sombra-cor)/.18); --halo-quente:color-mix(in oklab, var(--ambar-500) 16%, transparent); --elev-chapada-3:8px 10px 0 var(--chapada-cor, hsl(var(--sombra-cor)/.35)); /* a terceira chapada TAMBÉM segue a luz. Ela é a que o carimbo girassol consome (--etiqueta-elev), e um chapado preto a 35% sobre a noite é invisível — o montador e o rodapé são atos escuros, e é lá que o carimbo mais aparece */ /* A FAMÍLIA DE OBJETO segue a luz, como tudo mais. O comentário de 5.2 chamava isso de "exceção segura, é constante nas três luzes" — e era justamente o contrário: o botão consome esta família, e --elev-objeto-1 é uma sombra de #1A1A1A a 18%/55%, invisível sobre #14140F. Os quatro atos escuros perdiam a elevação inteira do botão em repouso e o :active afundava para lugar nenhum. Aqui no creme os valores são os mesmos de sempre. */ --elev-objeto-1:0 1px 0 hsl(var(--sombra-cor)/.18), 0 10px 18px -12px hsl(var(--sombra-cor)/.55); --elev-objeto-2:0 1px 0 hsl(var(--sombra-cor)/.18), 0 16px 24px -12px hsl(var(--sombra-cor)/.60); --elev-objeto-3:0 20px 26px -12px hsl(var(--sombra-cor-quente)/.55), 0 7px 10px -6px hsl(var(--sombra-cor)/.22); --elev-pressionada:0 1px 0 hsl(var(--sombra-cor)/.18), 0 4px 8px -6px hsl(var(--sombra-cor)/.50); --elev-contato:0 1px 0 hsl(var(--sombra-cor-quente)/.22), 0 14px 24px -18px hsl(var(--sombra-cor-quente)/.62); --sombra-chao:hsl(var(--sombra-cor-quente)/.45); --sobre-forte:var(--noite-900); /* O DEGRAU ACIMA DE --sobre: a ênfase pontual. Aqui --sobre já é --tinta-900 (#1A1A1A) e a tinta cheia da casa (#14140F) não tinha papel. Título de banca, total, preço — NUNCA corpo de texto */ --malha-tinta:color-mix(in oklab, var(--tinta-900) 7%, transparent); /* o traço do quadriculado do caderno. O passo (--malha-passo) é constante e mora na camada 1; a tinta segue a luz e mora aqui. Não existe outro papel a 7%: a escada de 2.7 começa em 10% */ --cor-azul:var(--azul-700); --cor-azul-c:var(--azul-100); --sobre-cor-azul-c:var(--azul-950); --cor-verde:var(--verd-700); --cor-verde-c:var(--verd-100); --sobre-cor-verde-c:var(--verd-950); --cor-vermelho:var(--verm-600); --cor-vermelho-c:var(--verm-100); --sobre-cor-vermelho-c:var(--verm-950); --cor-amarelo:var(--amar-500); --cor-amarelo-c:var(--amar-100); --sobre-cor-amarelo-c:var(--amar-950); --cor-amarelo-texto:var(--amar-900); --historia-quatro:linear-gradient(90deg, var(--cor-azul), var(--cor-verde) 48%, var(--cor-amarelo) 78%, var(--cor-vermelho)); --chapa:color-mix(in oklab, var(--creme-100) 88%, transparent); --halo-controle:var(--chapa); --foco:var(--primaria-texto); /* azul-700 sobre o papel: 6,3:1 */ --foco-externo:var(--tinta-900); --anel-foco:0 0 0 3px color-mix(in oklab, var(--primaria) 22%, transparent); --anel-foco-controle:0 0 0 3px color-mix(in oklab, var(--primaria) 30%, transparent); --anel-foco-deslizante:0 0 0 6px color-mix(in oklab, var(--primaria) 25%, transparent); --anel-selecao:inset 0 0 0 1px hsl(var(--sombra-cor)/.28), 0 0 0 2px var(--sup), 0 0 0 3.5px var(--sobre); --estado-quente:var(--creme-150); --grao-op:.035; /* 12/09: metade da dose. O papel frio pede grão, não poeira */ --grao-op-vivo:.01; /* a dose enquanto a cena corre (a dor apaga o grão) */ } /* NOTA DE DIVERGÊNCIA — SUPERADA EM 12/09. O dono pediu azul-first e o creme saiu; o tint da condutora voltou a 7%. O texto abaixo é o registro da decisão de 10/09 e fica como história. (histórico) o --fundo-decor deste bloco Ele é, valor por valor, a luz da HERO (--luz-hero em 2.1b): branco descendo de cima, quente subindo do pé. A face Tonal tingiria a primeira luz com a CONDUTORA (color-mix da --primaria a 13%) — é o surface tint do M3, e é o que faz trocar [data-lead] repintar o produto. Aqui NÃO fica azul, e é escolha: (a) a decisão nº 1 deste arquivo é preservar o creme medido, e o creme é a coisa mais quente que a página tem; pingar azul na superfície dos seis atos claros é esfriá-los pela porta dos fundos, que é a regressão de 09/10 em outra forma; (b) esta landing não tem seletor de face — não há [data-lead] para mudar, então o eixo não precisa ser visível; (c) a condutora continua inteira onde ela importa: link, foco, container tonal, informativo, e a luz FRIA de 3.3 guarda o mecanismo original intacto. Quem quiser reverter reverte em uma linha, com o custo escrito acima. */ /* ─── 3.2 · LUZ NOITE — o quase-preto quente ─────────────────────────────── Não é "inverter". Superfície escura precisa de MAIS separação de luminância entre camadas e MENOS saturação nos acentos, ou vibra. E aqui a elevação é por LUZ, não por sombra: sombra escura sobre campo quase-preto está abaixo do piso de ruído — o que se vê é um recorte de faca. O seletor inclui a barra fixa: quando ela está sobre um ato escuro, ela é o ato. A virada continua sendo um PASSO — não há uma única transition aqui. */ [data-ato-luz="escuro"]:not([data-ato-tom]), [data-ato-tom="noite"], .ld-topbar[data-tinta="escuro"]{ --fundo:var(--noite-900); /* a noite. Chão da seção inteira */ --sup:var(--noite-750); /* o chrome: barra, barrinha — um degrau ACIMA da noite */ --sup-2:var(--noite-800); --sup-3:var(--noite-700); --sup-4:var(--noite-750); --sup-inv:var(--creme-100); /* o papel DENTRO da noite: a folha, o recibo */ --sup-papel:var(--creme-50);/* papel de objeto sobre a noite: mais quente que branco de UI, porque a 200px do ato creme um branco frio lia como outra origem de material */ --sobre-papel:var(--tinta-900); /* o objeto de papel carrega a propria luz: a tinta dele nao vira creme so porque a sala escureceu */ --sobre:var(--creme-300); /* texto principal. 14,3:1 medido */ --sobre-2:var(--creme-500); /* lead, deck, coda. 11,0:1 */ --sobre-3:var(--creme-600); /* metadado, item inativo. 7,4:1 — clicável, não desligado */ --sobre-inv:var(--tinta-900); --contorno:var(--filete-forte); --contorno-forte:var(--creme-600); --contorno-sutil:var(--filete); --filete:color-mix(in oklab, var(--creme-100) 14%, transparent); --filete-forte:color-mix(in oklab, var(--creme-100) 22%, transparent); --sobre-clica:color-mix(in oklab, var(--creme-100) 74%, transparent); --sobre-nao-clica:color-mix(in oklab, var(--creme-100) 52%, transparent); --sobre-regra:color-mix(in oklab, var(--creme-100) 35%, transparent); --sobre-divisor:color-mix(in oklab, var(--creme-100) 10%, transparent); /* Sobre a noite, a AÇÃO é a luz: o botão vira papel e a tinta vira a noite. O azul da face continua disponível em --info, para o que informa. */ --primaria:var(--creme-100); --primaria-viva:var(--creme-0); --primaria-texto:var(--creme-300); --sobre-primaria:var(--noite-900); --p-c:color-mix(in oklab, var(--azul-300) 30%, var(--noite-900)); --sobre-p-c:var(--azul-200); /* Semânticos próprios: o verde 700 e o vermelho 600 da face são ilegíveis sobre a noite. Aqui o semântico é declarado direto, e não derivado, porque a cadeia derivada congela no :root. */ --info:var(--azul-300); --info-c:var(--p-c); --sobre-info-c:var(--sobre-p-c); --sucesso:var(--verde-noite); --sobre-sucesso:var(--noite-900); --sucesso-c:color-mix(in oklab, var(--verde-noite) 22%, var(--noite-900)); --sobre-sucesso-c:var(--verde-noite); --erro:var(--vermelho-noite); --sobre-erro:var(--noite-900); --erro-c:color-mix(in oklab, var(--vermelho-noite) 22%, var(--noite-900)); --sobre-erro-c:var(--vermelho-noite); --aviso:var(--realce); --sobre-aviso:var(--noite-900); --aviso-c:color-mix(in oklab, var(--realce) 22%, var(--noite-900)); --sobre-aviso-c:var(--realce); --realce-texto:var(--realce); /* 9,69:1 sobre a noite: aqui o âmbar cheio JÁ escreve */ --marca-mais-cor:var(--ouro-marca); /* R5: o "+" da marca sobre a noite é o único dourado */ --sobre-realce:var(--noite-900); --fundo-decor: radial-gradient(120% 90% at 50% -10%, color-mix(in oklab, var(--ambar-500) 5%, transparent) 0%, transparent 62%); /* o halo quente da mesa: o ambiente aparece pela LUZ, não pela sombra (âmbar, 12/09) */ --sombra-cor:222 40% 2%; /* 12/09: fria, como a noite */ /* Os quatro papéis de LUZ que substituem a sombra difusa no ato escuro. Declarados antes das elevações porque é deles que as elevações vivem. */ --anel-luz:color-mix(in oklab, var(--creme-100) 10%, transparent); /* a moldura de 1px */ --aresta-alto:inset 0 1px 0 color-mix(in oklab, var(--creme-0) 85%, transparent); /* a espessura do papel */ --aresta-baixo:0 1px 0 hsl(var(--sombra-cor)/.40); --halo-quente:color-mix(in oklab, var(--ambar-500) 16%, transparent); /* o calor sob o objeto (âmbar, 12/09) */ --elev-1:0 0 0 1px var(--anel-luz), 0 1px 0 hsl(var(--sombra-cor)/.40); --elev-2:var(--aresta-alto), 0 1px 0 hsl(var(--sombra-cor)/.40), 0 22px 34px -24px hsl(var(--sombra-cor)/.85); --elev-3:0 0 0 1px var(--anel-luz), 0 30px 60px -34px hsl(var(--sombra-cor)/.92); --elev-4:0 40px 90px -40px hsl(var(--sombra-cor)/.95); --elev-flutuante:0 40px 90px -40px hsl(var(--sombra-cor)/.95), 0 20px 50px -24px var(--halo-quente); --elev-interna:inset 0 1px 2px hsl(var(--sombra-cor)/.55); --elev-chapada-1:2px 2px 0 var(--chapada-cor, var(--filete-forte)); --elev-chapada-2:6px 7px 0 var(--chapada-cor, color-mix(in oklab, var(--creme-100) 7%, transparent)); /* a sombra CLARA e dura: papel sobre papel no escuro */ --elev-chapada-3:8px 10px 0 var(--chapada-cor, color-mix(in oklab, var(--creme-100) 10%, transparent)); /* a chapada CLARA e dura, no terceiro degrau: é ela que devolve a sombra do carimbo girassol dentro do montador e do rodapé */ /* A FAMÍLIA DE OBJETO, traduzida para a lei deste bloco: aqui a elevação é por LUZ, não por sombra. Os quatro papéis (--anel-luz, --aresta-alto, --aresta-baixo, --halo-quente) já estavam prontos logo acima e não chegavam ao botão. Agora chegam. */ --elev-objeto-1:0 0 0 1px var(--anel-luz), var(--aresta-alto); --elev-objeto-2:0 0 0 1px var(--anel-luz), var(--aresta-alto), 0 22px 34px -24px hsl(var(--sombra-cor)/.85); --elev-objeto-3:0 0 0 1px var(--anel-luz), 0 30px 60px -34px hsl(var(--sombra-cor)/.92), 0 20px 50px -24px var(--halo-quente); --elev-pressionada:inset 0 1px 2px hsl(var(--sombra-cor)/.55); /* no escuro o :active afunda por dentro: sombra externa escura sobre campo escuro não existe */ --elev-contato:0 1px 0 color-mix(in oklab, var(--creme-0) 10%, transparent); --sombra-chao:hsl(var(--sombra-cor-quente)/.28); --sobre-forte:var(--creme-0); /* o BRANCO de sete usos do montador (título de banca, total, código de cupom, selo e preço da porta Plus): um degrau acima de --sobre, que aqui é --creme-300. Sem papel, o agente escreve #fff dentro do componente — que é a morte do sistema descrita no topo do arquivo */ --malha-tinta:color-mix(in oklab, var(--creme-100) 7%, transparent); --cor-azul:var(--azul-300); --cor-azul-c:color-mix(in oklab, var(--azul-300) 22%, var(--noite-900)); --sobre-cor-azul-c:var(--azul-200); --cor-verde:var(--verd-400); --cor-verde-c:color-mix(in oklab, var(--verd-400) 22%, var(--noite-900)); --sobre-cor-verde-c:var(--verd-200); --cor-vermelho:var(--verm-300); --cor-vermelho-c:color-mix(in oklab, var(--verm-300) 22%, var(--noite-900)); --sobre-cor-vermelho-c:var(--verm-200); --cor-amarelo:var(--amar-300); --cor-amarelo-c:color-mix(in oklab, var(--amar-300) 22%, var(--noite-900)); --sobre-cor-amarelo-c:var(--amar-200); --cor-amarelo-texto:var(--amar-300); --historia-quatro:linear-gradient(90deg, var(--cor-azul), var(--cor-verde) 48%, var(--cor-amarelo) 78%, var(--cor-vermelho)); --chapa:color-mix(in oklab, var(--noite-900) 88%, transparent); --halo-controle:var(--chapa); --foco:var(--primaria-texto); /* creme-300 sobre a noite: 16,08:1. Azul-700 dava 2,89:1 e reprovava a 1.4.11 em cinco atos */ --foco-externo:var(--creme-100); --anel-foco:0 0 0 3px color-mix(in oklab, var(--primaria) 22%, transparent); --anel-foco-controle:0 0 0 3px color-mix(in oklab, var(--primaria) 30%, transparent); --anel-foco-deslizante:0 0 0 6px color-mix(in oklab, var(--primaria) 25%, transparent); --anel-selecao:inset 0 0 0 1px color-mix(in oklab, var(--creme-100) 28%, transparent), 0 0 0 2px var(--sup), 0 0 0 3.5px var(--sobre); --estado-quente:color-mix(in oklab, var(--creme-100) 8%, transparent); --grao-op:.06; /* com esta dose, EM --mistura-grao (multiply), a média medida do campo volta à noite cheia: é por isso que --noite-950 existe. Tirar a textura — ou trocar o modo de mescla — muda a COR do ato, não só a superfície */ --grao-op-vivo:.01; } /* ─── 3.3 · LUZ FRIA — o neutro da face, por pedido explícito ────────────── A luz que o sistema traz de fábrica. Nenhum ato da landing a usa hoje; ela existe para uma região nova que queira o neutro do produto em vez do papel da marca, e para provar que a face continua inteira dentro deste arquivo. */ [data-ato-tom="frio"]{ --fundo:var(--tonal-fundo); --sup:var(--tonal-sup); --sup-2:var(--tonal-sup-2); --sup-3:var(--tonal-sup-3); --sup-4:var(--tonal-sup-4); --sup-inv:var(--n-900); --sup-papel:var(--tonal-sup); --sobre-papel:var(--tonal-sobre); --sobre:var(--tonal-sobre); --sobre-2:var(--tonal-sobre-2); --sobre-3:var(--tonal-sobre-3); --sobre-inv:var(--tonal-sobre-inv); --contorno:var(--tonal-contorno); --contorno-forte:var(--tonal-contorno-forte); --contorno-sutil:var(--tonal-contorno-sutil); --filete:color-mix(in oklab, var(--tonal-sobre) 14%, transparent); --filete-forte:color-mix(in oklab, var(--tonal-sobre) 22%, transparent); --sobre-clica:color-mix(in oklab, var(--tonal-sobre) 74%, transparent); --sobre-nao-clica:color-mix(in oklab, var(--tonal-sobre) 65%, transparent); /* 65% pelo mesmo motivo do bloco creme: sobre papel claro a composicao perde mais contraste que sobre a noite. A 52% daria 3,48:1 e reprovaria AA */ --sobre-regra:color-mix(in oklab, var(--tonal-sobre) 35%, transparent); --sobre-divisor:color-mix(in oklab, var(--tonal-sobre) 10%, transparent); --primaria:var(--azul-700); --primaria-viva:var(--azul-500); --primaria-texto:var(--azul-700); --sobre-primaria:var(--n-0); --p-c:var(--azul-100); --sobre-p-c:var(--azul-950); --info:var(--primaria); --info-c:var(--p-c); --sobre-info-c:var(--sobre-p-c); --sucesso:var(--verd-700); --sobre-sucesso:var(--n-0); --sucesso-c:var(--verd-100); --sobre-sucesso-c:var(--verd-950); --erro:var(--verm-600); --sobre-erro:var(--n-0); --erro-c:var(--verm-100); --sobre-erro-c:var(--verm-950); --aviso:var(--amar-700); --sobre-aviso:var(--amar-tinta); --aviso-c:var(--amar-100); --sobre-aviso-c:var(--amar-950); --realce-texto:var(--amar-900); --marca-mais-cor:var(--realce-texto); /* R5: o "+" da marca na luz fria */ --sobre-realce:var(--noite-900); --fundo-decor: radial-gradient(120% 90% at 12% -8%, color-mix(in oklab, var(--primaria) 13%, transparent) 0%, transparent 58%), radial-gradient(90% 70% at 100% 0%, color-mix(in oklab, var(--verd-400) 9%, transparent) 0%, transparent 55%); --sombra-cor:220 40% 12%; --anel-luz:color-mix(in oklab, var(--n-0) 55%, transparent); --aresta-alto:inset 0 1px 0 color-mix(in oklab, var(--n-0) 55%, transparent); --aresta-baixo:0 1px 0 hsl(var(--sombra-cor)/.18); --halo-quente:color-mix(in oklab, var(--ambar-500) 16%, transparent); --elev-1:0 1px 2px hsl(var(--sombra-cor)/.07), 0 1px 3px 1px hsl(var(--sombra-cor)/.05); --elev-2:0 1px 2px hsl(var(--sombra-cor)/.08), 0 2px 6px 2px hsl(var(--sombra-cor)/.07); --elev-3:0 4px 8px 3px hsl(var(--sombra-cor)/.08), 0 1px 3px hsl(var(--sombra-cor)/.10); --elev-4:0 8px 24px 6px hsl(var(--sombra-cor)/.10), 0 2px 4px hsl(var(--sombra-cor)/.10); --elev-flutuante:0 18px 48px -12px hsl(var(--sombra-cor)/.22), 0 4px 10px hsl(var(--sombra-cor)/.08); --elev-interna:inset 0 1px 2px hsl(var(--sombra-cor)/.08); --elev-chapada-1:2px 2px 0 var(--chapada-cor, var(--sobre)); --elev-chapada-2:5px 6px 0 var(--chapada-cor, hsl(var(--sombra-cor)/.16)); --elev-chapada-3:8px 10px 0 var(--chapada-cor, hsl(var(--sombra-cor-tinta)/.35)); --elev-objeto-1:0 1px 0 hsl(var(--sombra-cor-tinta)/.18), 0 10px 18px -12px hsl(var(--sombra-cor-tinta)/.55); --elev-objeto-2:0 1px 0 hsl(var(--sombra-cor-tinta)/.18), 0 16px 24px -12px hsl(var(--sombra-cor-tinta)/.60); --elev-objeto-3:0 20px 26px -12px hsl(var(--sombra-cor-quente)/.55), 0 7px 10px -6px hsl(var(--sombra-cor-tinta)/.22); --elev-pressionada:0 1px 0 hsl(var(--sombra-cor-tinta)/.18), 0 4px 8px -6px hsl(var(--sombra-cor-tinta)/.50); --elev-contato:0 1px 0 hsl(var(--sombra-cor-quente)/.22), 0 14px 24px -18px hsl(var(--sombra-cor-quente)/.62); --sombra-chao:hsl(var(--sombra-cor-quente)/.45); --sobre-forte:var(--n-950); --malha-tinta:color-mix(in oklab, var(--tonal-sobre) 7%, transparent); --cor-azul:var(--azul-700); --cor-azul-c:var(--azul-100); --sobre-cor-azul-c:var(--azul-950); --cor-verde:var(--verd-700); --cor-verde-c:var(--verd-100); --sobre-cor-verde-c:var(--verd-950); --cor-vermelho:var(--verm-600); --cor-vermelho-c:var(--verm-100); --sobre-cor-vermelho-c:var(--verm-950); --cor-amarelo:var(--amar-500); --cor-amarelo-c:var(--amar-100); --sobre-cor-amarelo-c:var(--amar-950); --cor-amarelo-texto:var(--amar-900); --historia-quatro:linear-gradient(90deg, var(--cor-azul), var(--cor-verde) 48%, var(--cor-amarelo) 78%, var(--cor-vermelho)); --chapa:color-mix(in oklab, var(--tonal-fundo) 88%, transparent); --halo-controle:var(--chapa); --foco:var(--primaria-texto); --foco-externo:var(--tonal-sobre); --anel-foco:0 0 0 3px color-mix(in oklab, var(--primaria) 22%, transparent); --anel-foco-controle:0 0 0 3px color-mix(in oklab, var(--primaria) 30%, transparent); --anel-foco-deslizante:0 0 0 6px color-mix(in oklab, var(--primaria) 25%, transparent); --anel-selecao:inset 0 0 0 1px hsl(var(--sombra-cor)/.28), 0 0 0 2px var(--sup), 0 0 0 3.5px var(--sobre); --estado-quente:color-mix(in oklab, var(--tonal-sobre) 6%, transparent); --grao-op:0; --grao-op-vivo:0; } /* ███████████████████████████████████████████████████████████████████████████ CAMADA 4 · PAPÉIS EDITORIAIS E DE DADO O produto vende OBRAS ACADÊMICAS. A serifa não é acento aqui: é o sinal de que aquilo é um livro e não um SaaS. A regra da casa, visível em todos os atos: SERIFA É O CONTEÚDO DO LIVRO (título, ementa, sumário, cota, legenda); SANS É O METADADO SOBRE O LIVRO (código, curso, período, crédito). Estes papéis existem para que "o dado" e "a legenda" mudem de registro em BLOCO. Sem eles, os 26 tokens de metadado viram declarações avulsas de novo — que é exatamente o problema que esta rodada existe para consertar. ███████████████████████████████████████████████████████████████████████████ */ :root{ /* ─── 4.1 · O registro editorial ─────────────────────────────────────────── Aplique num escopo (uma região, um objeto) e o display inteiro troca: os papéis de título da face leem estes quatro tokens. Três linhas trocam a voz de doze atos — é a prova de que o motor aguenta esta landing. */ --ff-titulo-editorial:var(--ff-editorial); --peso-titulo-editorial:400; /* serifa não aguenta 640 */ --tr-titulo-editorial:var(--tr-micro); /* serifa aperta menos que grotesca */ --lh-titulo-editorial:1.04; /* ─── 4.2 · Os quatro papéis de metadado ─────────────────────────────────── Cada um é um CONJUNTO (família, estilo, peso, tamanho, tracking, cor), e é trocável em bloco. A decisão que decide: o CÓDIGO usa a fonte DA CASA com tnum, não a mono — "o card fala de um livro, e o título de um livro vai na fonte do livro; o código, acima, na fonte da casa". Um motor que mapeie código → --ff-mono inverte uma decisão escrita. A COR de cada papel não está aqui, de propósito: ela muda com a luz do ato, e um alias de cor declarado no :root CONGELA no valor do :root (ver a armadilha no topo do arquivo). Cada papel abaixo diz qual tinta ler; o componente lê o papel de cor direto e segue a luz de graça. */ /* LEGENDA — o nome de uma coisa: rótulo de estante, "Ementa", placa. Tinta: --sobre-2 */ --meta-legenda-ff:var(--ff-corpo); /* 12/09: era --ff-leitura itálico. O dono apontou "1 de 6", "Centros", "faltam 3 h 50 min" pelo nome: legenda é METADADO, e metadado é sans nesta casa */ --meta-legenda-estilo:normal; --meta-legenda-peso:var(--peso-face-medio); --meta-legenda-tam:var(--t--1); --meta-legenda-tr:var(--tr-fina); /* DADO — números e medidas dentro de uma frase: créditos, capítulos, preço. Tinta: --sobre-3, e sempre com --num-tabular */ --meta-dado-ff:var(--ff-corpo); --meta-dado-peso:400; --meta-dado-tam:var(--t--1); --meta-dado-tr:var(--tr-zero); /* CÓDIGO — MAE111, ICP131: a identidade do volume. Sans, não mono. Tinta: --sobre-2 */ --meta-codigo-ff:var(--ff-corpo); --meta-codigo-peso:600; --meta-codigo-tam:var(--t--1); --meta-codigo-tr:var(--tr-larga); /* NOTA — o colofão, a nota de fonte, o pé de uma ficha. Tinta: --sobre-3 */ --meta-nota-ff:var(--ff-corpo); --meta-nota-peso:400; --meta-nota-tam:var(--t--1); --meta-nota-lh:var(--lh-texto); /* ─── 4.3 · Número grande ────────────────────────────────────────────────── Nesta landing os números SÃO o assunto: 7.075 volumes, 176 cursos, R$ 24,90. Escala curta em mono, composta de --t-*, com tracking próprio (mono a 4rem precisa de aperto que a escala de texto não dá) e o par valor+rótulo. */ --num-ff:var(--ff-mono); --num-heroi:var(--t-6); --num-grande:var(--t-4); --num-medio:var(--t-2); --num-peso:600; --num-tr:var(--tr-titulo); --num-rotulo-tam:var(--t--2); --num-tabular:tabular-nums; /* toda coluna de número, sempre */ --t-formula:1.02em; /* KaTeX inline no capítulo e no rolo do aparelho: acompanha o corpo, e por isso é em e não clamp */ --t-formula-bloco:1.32em; /* a fórmula isolada, a que o ato existe para mostrar */ --num-alinhado:tabular-nums lining-nums; /* o par obrigatório quando o número está em serifa: o Garamond é old-style por padrão e desalinha */ /* ─── 4.4 · Pesos de corpo ───────────────────────────────────────────────── A face só tokeniza o peso do título; a landing tem quatro pesos de corpo em 89 declarações. Sem nome, cada ato reinventa o seu. */ --peso-corpo:400; --peso-medio:500; /* item de navegação, rótulo */ --peso-forte:600; /* botão, código, ênfase de metadado */ --peso-dado:700; /* número tabular isolado */ /* OS MEIO-PESOS DA FACE. A Tonal é uma face de peso variável — 550 no chip e na mensagem de erro, 640 no título, 650 no chip ativo, no selo, no FAB e no botão gg — e só o 640 tinha sobrevivido: o resto foi arredondado para a escada 500/600 da casa. É o vocabulário da casa engolindo o meio-degrau da face, e custa exatamente dois tokens. */ --peso-face-medio:550; --peso-face-forte:650; /* ─── 4.5 · A fonte do dado conferível ───────────────────────────────────── --ff-dado NÃO é monoespaçada, por decisão datada (06/09) que baniu "rótulo em mono caixa-alta" em quinze lugares. Aplicar a mono da face aqui reverte essa decisão. A mono continua sendo a fonte de CÓDIGO REAL e de coluna numérica em tabela. */ --ff-dado:var(--ff-corpo); --tr-dado:var(--tr-larga); --ff-matematica:var(--ff-leitura); /* o KaTeX dentro das telas do semestre */ } /* ███████████████████████████████████████████████████████████████████████████ CAMADA 5 · TOKENS DE COMPONENTE Nomeados por PAPEL, nunca por ato. Um botão é um botão na hero, no rodapé e no montador; se um ato precisar de um botão diferente, ele troca o PAPEL que o botão lê — não escreve uma regra nova. O QUE MORA AQUI: forma, medida, peso, tempo — tudo que é IGUAL nas três luzes. O QUE NÃO MORA: cor. Um alias como `--cartao-fundo:var(--sup)` declarado no :root congela no valor do :root, e o componente para de seguir a luz do ato (a armadilha do topo do arquivo). Por isso cada componente abaixo NOMEIA a tinta que deve ler, e o componente lê o papel direto: `background:var(--sup)` segue o ato; `background:var(--cartao-fundo)` não. A exceção segura são as elevações de OBJETO e as CHAPADAS, que não mudam com a luz — essas podem ser aliasadas aqui. ███████████████████████████████████████████████████████████████████████████ */ :root{ /* ─── 5.1 · Botão ────────────────────────────────────────────────────────── Pílula, como a face manda e como o CTA do semestre e o do montador já eram. O preenchido é UM por região; o resto é tonal ou contorno. Tintas: cheio = --primaria / --sobre-primaria · tonal = --p-c / --sobre-p-c · contorno = --realce-texto com fio --realce. No ato escuro a ação vira a LUZ, e isso já vem resolvido dentro de --primaria (ver 3.2). */ --botao-raio:var(--raio-botao); --botao-alt:var(--alt-controle); --botao-alt-p:calc(var(--alt-controle) * .78); --botao-alt-g:calc(var(--alt-controle) * 1.18); --botao-alt-gg:calc(var(--alt-controle) * 1.42); --botao-pad-x:calc(var(--e-6) * var(--dens)); --botao-tam:var(--t--1); --botao-peso:var(--peso-forte); --botao-tr:var(--tr-medio); /* CADA TAMANHO TROCA TRÊS COISAS, não uma. A altura já estava tokenizada; o corpo e a goteira não, e havia UM --botao-tam para as quatro alturas. Quem seguisse a camada 5 montaria o CTA gg do semestre e do montador com 62px de altura, 24px de goteira e texto de 13,3px — um botão alto com tipo de botão pequeno, que é a peça mais visível da face saindo errada. */ --botao-tam-p:var(--t--2); --botao-pad-x-p:calc(var(--e-4) * var(--dens)); --botao-tam-g:var(--t-0); --botao-pad-x-g:calc(var(--e-7) * var(--dens)); --botao-tam-gg:var(--t-1); --botao-pad-x-gg:calc(var(--e-8) * var(--dens)); --botao-peso-gg:var(--peso-face-forte); /* ELEVAÇÃO: o botão lê --elev-objeto-1 em repouso, --elev-objeto-2 no hover e --elev-pressionada no :active — DIRETO, sem alias. Aqui havia --botao-elev:var(--elev-objeto-1) e mais dois apelidos, e eles congelavam: a família de objeto agora segue a luz (camada 3), e um alias no :root para ela para de seguir no mesmo instante. A varredura de dependências acusa este defeito em um segundo — foi assim que estes três foram achados. Sobre o PESO da sombra: o Prisma põe o botão em --elev-1/--elev-2. Esta casa mantém a família de OBJETO, que é 3 a 7 vezes mais pesada, porque é o valor MEDIDO do CTA de hoje (--acao-sombra da hero é, dígito por dígito, --elev-objeto-1). Trocar para --elev-1 aliviaria a sombra dos doze CTAs da página — o defeito era a falta de inversão, não o peso, e é o defeito que foi consertado. */ --botao-sublinhado:0 3px 0 0 var(--realce); /* A ASSINATURA DE HOVER DA CASA: o sublinhado âmbar sob o rótulo. Não é sombra, é gesto — e é o mesmo no nav, no link e no botão */ --sublinhado-origem:right center; /* repouso: o traço RECOLHE pela direita */ --sublinhado-origem-hover:left center; /* hover: ele DESENHA da esquerda */ --sublinhado-dur:var(--d-4); /* sem o par de origens o sublinhado recolhe pelo mesmo lado por onde entrou, e o gesto vira um piscar */ --regra-espessura:1px; --regra-recuo:3px; /* o text-underline-offset da casa */ --botao-halo-largura:3px; /* o anel do botão da barra. A COR é --halo-controle, que é um pedaço do próprio fundo do ato e por isso inverte junto com ele */ /* O FAB e a METAMORFOSE DE RAIO — o gesto mais Expressive da face, e o único lugar em que o raio é ESTADO e não forma: 16px em repouso, 36px no hover. Não existe FAB na landing hoje; ele entra como vocabulário pronto para a peça que voa do montador, e custa cinco linhas. */ --fab-alt:60px; --raio-fab:var(--raio-4); --raio-fab-hover:var(--raio-7); --fab-peso:var(--peso-face-forte); /* Elevação: --elev-4 em repouso e --elev-flutuante no hover, lidas DIRETO. Não faça alias — a escada de elevação muda com a luz do ato */ /* ─── 5.2 · Cartão ───────────────────────────────────────────────────────── Tintas: fundo --sup · filete --contorno-sutil · elevação --elev-1 (hover --elev-3). Variante tonal: --p-c / --sobre-p-c. NÃO EXISTE ALIAS DE ELEVAÇÃO EM LUGAR NENHUM desta camada, e o cartão não é exceção: --elev-1/--elev-3 mudam com a luz, e um alias deles no :root congelaria. Não "conserte" isso criando --cartao-elev. (Aqui havia escrito o contrário — que o botão PODIA ter alias porque a família --elev-objeto-* era constante nas três luzes. Era verdade e era o defeito: constante queria dizer que o botão do ato ESCURO ficava com uma sombra de #1A1A1A a 18%/55% sobre #14140F, ou seja, sem elevação nenhuma, enquanto o resto da página trocava para elevação por LUZ. A família agora segue a luz, e por isso os apelidos saíram. Um comentário que chama um defeito de virtude é pior que o defeito: ele impede o próximo de olhar.) ATENÇÃO ao aplicar: dois atos rejeitaram cartão POR ESCRITO. O FAQ é uma página, não um componente de FAQ — dez cartões de 28px ali desfazem a correção "célula de tabela" que dois juízes cegos reprovaram. E o rodapé não tem uma única box-shadow em 396 linhas. Cartão onde havia cartão. */ --cartao-raio:var(--raio-cartao); --cartao-pad:calc(var(--e-6) * var(--dens)); --cartao-pad-solto:calc(var(--e-8) * var(--dens)); --cartao-pad-aperta:calc(var(--e-4) * var(--dens)); --cartao-sobe:-3px; /* na Tonal o cartão SOBE no hover */ /* ─── 5.3 · Objeto de papel ──────────────────────────────────────────────── O que NÃO é cartão: a folha, a ficha, o recibo, a página, a capa. Papel não tem canto de 28 — tem 3. Este papel existe para que ninguém precise escolher entre "usar o cartão do sistema" e "escrever um hex avulso". Tintas: fundo --sup-papel · filete --filete · pousado --elev-contato. */ --papel-raio:var(--raio-papel); --papel-grao:var(--textura-grao); --papel-grao-mistura:var(--mistura-grao); --papel-grao-op:var(--grao-op-papel); --papel-grao-escala:var(--textura-grao-escala); /* ─── 5.4 · Chip ─────────────────────────────────────────────────────────── Selecionado = container tonal (--p-c / --sobre-p-c), nunca a cor cheia. A mesma regra do item de navegação e do selo: um cheio por região. Tintas em repouso: fundo --sup-2 · tinta --sobre-2 · filete --contorno-sutil. */ --chip-raio:var(--raio-chip); --chip-alt:calc(var(--alt-controle) * .73); --chip-pad-x:calc(var(--e-3) * var(--dens)); --chip-tam:var(--t--2); --chip-peso:var(--peso-face-medio); /* 550, o meio-degrau da face */ --chip-peso-ativo:var(--peso-face-forte); /* 650 */ /* ─── 5.5 · Campo ────────────────────────────────────────────────────────── O poço: campo é superfície RECUADA, não elevada. Tintas: fundo --sup-3 (a face usa --sup-2; a casa desce um degrau de propósito, porque aqui o campo é POÇO) · no FOCO o fundo SOBE para --sup, que é o gesto de "levantou" que a face tem e o degrau a mais escondia · texto --sobre · marcador --sobre-3 · filete --contorno (no foco --primaria) · anel --anel-foco · inválido --erro. */ --campo-raio:var(--raio-campo); --campo-alt:var(--alt-campo); --campo-pad-x:calc(var(--e-4) * var(--dens)); --campo-pad-y:calc(var(--e-3) * var(--dens)); /* ─── 5.6 · Selo e etiqueta ──────────────────────────────────────────────── Duas coisas diferentes. SELO é informação: container tonal (--realce-c, --sucesso-c, --erro-c) com a tinta do container. ETIQUETA é CARIMBO: o girassol, em objeto, com sombra chapada — o gesto gráfico da casa, e nunca um badge de UI. */ --selo-raio:var(--raio-chip); --selo-pad:var(--e-micro) var(--e-2); --selo-tam:var(--t--2-piso); /* R6: os cinco selos no piso de 12 px do celular (agente de toque, A#11) */ --selo-peso:var(--peso-face-forte); --selo-tr:var(--tr-fina); --etiqueta-raio:var(--raio-1h); --etiqueta-fundo:var(--marcador); /* alias seguro: o carimbo não muda com a luz */ --etiqueta-tinta:var(--sobre-marcador); /* A ELEVAÇÃO da etiqueta é --elev-chapada-3, lida DIRETO. Ela não pode ser alias: a chapada segue a luz desde esta rodada, e era justamente o carimbo girassol que perdia a sombra dentro do montador e do rodapé */ /* ─── 5.7 · Acordeão e índice ────────────────────────────────────────────── A profundidade aqui é 100% FILETE: sem cartão, sem sombra, sem objeto ilustrado. Tintas: pauta --filete · fechado --sobre-2 · aberto --sobre com --peso-forte · tique --realce. O tempo é o achado: a SOBREPOSIÇÃO é o conserto. 110ms saindo + 60ms de espera + 200ms entrando. Dois passos de 220 deixavam o painel literalmente em branco no meio — arredondar os três para o mesmo degrau traz isso de volta. */ --acordeao-dur-sai:110ms; --acordeao-espera:var(--d-0); --acordeao-dur-entra:var(--d-3h); --acordeao-dur-altura:340ms; /* a altura da sanfona e o giro do sinal de mais/menos */ --acordeao-tique-largura:2px; --acordeao-tique-repouso:.30; --acordeao-tique-repouso-toque:.42; /* sem hover, o repouso precisa se anunciar mais */ --acordeao-tique-hover:.62; --acordeao-tique-recuo:6px; /* o traço cresce de 6px para 0 ao abrir */ --acordeao-desloca:3px; /* só a linha FECHADA se mexe no hover: deslocamento significa "clicar muda algo" */ /* ─── 5.8 · Tabela ───────────────────────────────────────────────────────── Número em coluna é SEMPRE mono + tabular + alinhado à direita. Tintas: cabeça --sup-2 / --sobre-3 · linha --contorno-sutil · hover --sup-2. */ --tabela-cabeca-tam:var(--t--2); --tabela-cabeca-peso:700; --tabela-cabeca-tr:var(--tr-caixa-media); /* .06em, o valor da face. A casa abre .12em num rótulo solto; cabeça de tabela é outro papel e o dobro ali vira sopa de letras */ --tabela-pad:calc(var(--e-3) * var(--dens)) var(--e-5); --tabela-num-ff:var(--ff-mono); /* ─── 5.9 · Barra fixa ───────────────────────────────────────────────────── UMA chapa translúcida, um filete, um halo. Nunca duas chapas empilhadas: duas compunham uma faixa cinza flutuando a 1,41:1 contra o ato. Tintas: chapa --chapa · desfoque --vidro-barra · filete --filete · texto --sobre / --sobre-clica / --sobre-nao-clica. A altura e o alvo das âncoras estão na camada 6 (--topo-barra). */ --barra-vidro:var(--vidro-barra); /* alias seguro: o desfoque não muda com a luz */ --barra-fio-virada:3px; /* o fio âmbar que VARRE a base na troca de ato: ele não decora a virada, ele É a virada */ --barra-dur-virada:960ms; --barra-curva-virada:var(--c-percurso); --barra-dur-encolhe:var(--d-7); /* ─── 5.10 · A MARCA ─────────────────────────────────────────────────────── O "+" do Enciclus+ é desenhado com o glifo da própria fonte, e por isso ele precisa de remédio óptico: a 21px a haste fica fina demais e some ao lado da palavra; a 37px o mesmo stroke ENGORDA a haste e o sinal vira um bloco. Os quatro números abaixo são medidos, e sem eles o próximo agente escolhe um só e erra numa das duas pontas. A COR do "+" não mora aqui: no ato claro ele é --realce-texto e no escuro é --ouro-marca, o único dourado da casa — e isso segue a luz sozinho. */ --marca-mais-stroke:.028em; /* o remédio a 21px */ --marca-mais-stroke-g:0; /* a 37px: DESLIGADO */ --marca-mais-tam:.82em; --marca-mais-sobe:-.04em; /* R5 13/09 — A COR DO "+" É PAPEL, NÃO VALOR. Nove declarações em seis atos pintavam o glifo com três cores e seis corpos (auditor D). Agora é UM token que segue a luz: o amarelo que escreve sobre o papel (--realce-texto) e o único dourado sobre a noite (--ouro-marca, redefinido no escopo noite). As duas variantes do CTA da topbar (âmbar-400 sobre azul, âmbar-800 sobre creme) são a única exceção, por contraste medido. */ /* --marca-mais-cor é declarado nos TRÊS blocos de luz (creme, noite, frio), nunca aqui: no :root ele congelaria. */ } /* ███████████████████████████████████████████████████████████████████████████ CAMADA 6 · A ESCALA DE RITMO VERTICAL O dono citou "pensar em espaçamento" por nome, então isto é primeira classe. O DIAGNÓSTICO, medido: as doze regiões se ENCOSTAM (margem 0 entre elas, e isso é contrato — um vão deixaria a barra fixa sem seção sob a linha de leitura e o CTA piscaria entre dois rótulos). Todo o fôlego vive no padding interno de cada ato. E a face Tonal não conserta isso sozinha: o `.secao` do Prisma tem exatamente a mesma arquitetura (padding interno + um fio). O QUE CONSERTA: variação. Doze atos com o mesmo padding produzem monotonia, e monotonia é o que faz parecer que "sumiu coisa". Premium é acabamento, não moldura — não é mais espaço em branco. Por isso a escala abaixo tem um degrau DENSO: dois atos que são a mesma ideia devem colar, e é o contraste entre colar e respirar que cria ritmo. Todos os valores são clamp() de 390 a 1440, e cada um é a mediana medida dos atos que hoje fazem aquele papel — não são números novos. ███████████████████████████████████████████████████████████████████████████ */ :root{ --ritmo-ato:clamp(72px, 7.4vw, 112px); /* O respiro de UMA FACE de ato. Como os atos se encostam, a junta entre dois vizinhos soma dois destes. Mediana medida: 76–104 (faq), 112/84 (prova), 72–110 (planos), 92–124 (rodapé) */ --ritmo-ato-g:clamp(92px, 9vw, 124px); /* O ato que ABRE UMA FACE NOVA — o rodapé. O teto medido é 124px e o --ritmo-ato acima para em 112: quem convertesse o rodapé pelo nome óbvio encolhia o topo em 10%. E O PADDING DE ATO É UM PAR, não um valor: no rodapé são 92–124 EM CIMA contra --e-10 (64px) EMBAIXO, e a assimetria a favor do topo é escolha escrita. Aplicar o mesmo número dos dois lados perde os dois gestos de uma vez — e ritmo é o item que o dono citou por nome */ --ritmo-ato-denso:clamp(40px, 4vw, 64px); /* Quando dois atos são a MESMA IDEIA e devem colar (livro → por dentro; planos → montador). Usar o mesmo --ritmo-ato nos doze é o defeito */ --ritmo-secao:clamp(28px, 3.4vw, 46px); /* Acima/abaixo de um título de seção. Medido: 26–40 (prova), 32–44 e 34–46 (faq) */ --ritmo-bloco:clamp(20px, 2.2vw, 32px); /* entre blocos dentro de uma seção */ --ritmo-item:clamp(12px, 1.2vw, 18px); /* entre itens de uma lista */ --ritmo-linha:clamp(6px, .7vw, 10px); /* entre linhas de um item (rótulo → dado) */ --ritmo-topo:clamp(16px, 2.2vw, 32px); /* O AR ENTRE A BARRA FIXA E A PRIMEIRA COISA DO ATO — o degrau que faltava nesta camada, e o buraco por onde a página perdeu o ritmo. SEIS atos abrem debaixo da barra, e a abertura de todos eles tem a mesma forma: `calc( + )`. A barra sempre veio de token. O RESPIRO vinha da escada --e-*, que é a escala de COMPONENTE, e por isso saiu em oito números diferentes — 14 (montador), 16 (livro), 18 (hero no celular), 22 e 26 (semestre), 24 (por dentro), 32 (prova) e 40 (prova no celular). Oito valores, um gesto. Era este o defeito que o dono citou por nome quando disse "pensar em espaçamento". A INCLINAÇÃO É A DE --ritmo-bloco (2.2vw), o degrau vizinho: não é número novo. O PISO é 16 — o menor medido, o do livro. O TETO é 32 — o maior medido no desktop, o da prova. Nenhuma das duas pontas foi inventada. E POR QUE ELE NÃO BASTA SOZINHO. Os oito valores medidos vão de 14 a 40: um clamp único que não encolhesse NENHUM deles teria de valer 40 em toda parte, e aí a escala só faria a página crescer — que é exatamente o que este projeto proíbe ("premium é acabamento, não moldura"). Por isso a forma canônica da abertura leva um PISO declarado: padding-top: calc( + max(var(--ritmo-topo), )) O ato lê a escala e cresce com ela onde há largura sobrando; o piso segura a ponta de baixo e garante que nada encolhe em nenhuma largura. O desvio fica LEGÍVEL NA PRÓPRIA LINHA, que é a condição para ele ser desvio e não bagunça. O idioma não é meu: a faq já o tinha inventado sozinha em --faq-ar, e o que eu fiz foi dar nome a ele e estendê-lo. Costurador, 11/09. */ --ritmo-borda-lateral:clamp(16px, 4vw, 28px); /* A goteira lateral. O teto é --trilho-margem: a goteira não cresce além do trilho, senão o texto do rodapé deixa de descer em linha reta do painel creme da seção anterior */ --ritmo-borda-larga:clamp(20px, 6vw, 80px); /* A goteira do ato que respira sozinho (a coluna editorial da prova) */ --ritmo-borda-pagina:clamp(24px, 5vw, 120px); /* A goteira do ato que SANGRA: o acervo a NEGATIVA (margin 0 calc(-1 * …)) para a estante passar do miolo, e a usa sete vezes. A 1440 ela mede 72px e nenhuma das duas goteiras acima chega ao teto de 120 — quem mapear pelo nome mais óbvio erra em 44px, e como o valor é negativado a sangria desalinha do lado oposto no mesmo movimento */ /* AS MEDIDAS DE PALCO E DE LEITURA. Ritmo de página também é altura: a nota de contrato nº 2 exclui geometria de OBJETO cênico, e continua excluindo, mas altura de ato, comprimento de trilha e calha de leitura são ritmo, e a camada que existe para ritmo não os tinha. Arredondar qualquer um destes ressuscita 25px de salto e tira o ScrollTrigger do lugar — está medido. */ --altura-ato:88svh; /* o miolo de um ato de palco */ --trilha-palco:380svh; /* a rolagem do palco, ALÉM dos 100lvh de entrada */ --trilha-palco-p:300svh; /* a mesma trilha abaixo de 900px */ --trilha-palco-m:280svh; /* o palco de quatro quadros do semestre */ --calha-leitura:140px; /* a calha onde o aparelho pousa sem cobrir uma linha */ --calha-leitura-m:120px; --calha-leitura-p:18px; /* Ritmo em ALTURA de janela. É o que faz a primeira dobra caber em laptop baixo, e o que dá fôlego aos atos de palco. Trocar por px fixo encolhe o ato em telas altas e estoura a dobra em telas baixas. */ --ritmo-svh-p:clamp(12px, 3.4svh, 40px); --ritmo-svh-m:clamp(22px, 4vh, 40px); --ritmo-svh-g:clamp(50px, 7vh, 92px); --ritmo-svh-g8:clamp(58px, 8vh, 92px); /* PEDIDO POR ESCRITO. O acervo abre a cabeça em clamp(58px, 8vh, 92px) e deixou a linha `o motor não tem degrau de 8vh; proposto como --ritmo-svh-g8` em ld-acervo.css:166. Era o ÚNICO clamp cru sobrevivente em padding/margin nas doze folhas — varri as doze e não há outro. O degrau de 7vh acima não serve no lugar dele: numa janela de 900 são 63 contra 72 (−12,5 %), e o piso cai de 58 para 50. Este é o mesmo teto (92) com a inclinação e o piso que o acervo mediu. Zero pixel muda ao trocar. Um consumidor só, hoje — e ainda assim é token, porque a nota de contrato nº 1 manda criar o token em vez de abrir exceção dentro do componente, e porque o número solto era o buraco por onde a escala vazava. */ /* ─ A LEI DA JUNTA (costurador, 11/09) ─────────────────────────────────── As doze regiões se ENCOSTAM, então TODA fronteira desta página é uma junta sem vão. A alternância claro↔escuro resolve nove delas sozinha: a virada é seca, e é o gesto da casa — ninguém deve transformá-la em faixa de transição. O problema são as juntas em que os dois lados têm A MESMA LUZ. A REGRA: uma junta entre dois atos da mesma luz precisa de um degrau de luminância OU de uma razão escrita para não ter nenhum. As duas coisas valem; o que não vale é o silêncio, porque uma fronteira que some não acusa erro em lugar nenhum — nem no console, nem na prova, nem no olho de quem lê um diff. Foi assim que a junta montador→rodapé foi de 18,26:1 para 1,06:1 sem ninguém notar, e só um cético medindo pixel a achou. AS QUATRO JUNTAS DE MESMA LUZ DESTA PÁGINA, auditadas em 11/09 pela cadeia de tokens (não por captura — navegador é proibido nesta rodada): acervo → livro claro→claro 1,00:1 deixada. Os dois são #FFFFEB e no ORIGINAL também eram: não é regressão, é a mesma sala continuando. O livro escurece por dentro, com --noite-p, ao rolar. livro → por dentro escuro→escuro 1,00:1 deixada. O livro termina noite (--noite-p = 1) e o por dentro é noite. O original era igual, e --ritmo-ato-denso aqui em cima nomeia esta junta por escrito como um par que DEVE colar ("livro → por dentro"). planos → faq claro→claro 1,00:1 deixada. Igual no original, e o ld-planos.css escreve o porquê na linha do padding-block-end. montador → rodapé escuro→escuro 1,06:1 RESOLVIDA. Era a única que tinha perdido o degrau. O `data-ato-tom="creme"` no .enc-mont-papel devolve o pé do montador ao creme e a junta aos 18,26:1 EXATOS que o cético tinha medido como "o antes": #FFFFEB contra #14140F, refeito na conta. QUEM MEXER NA LUZ DE UM ATO VOLTA AQUI. Trocar um --fundo, um data-ato-luz ou um data-ato-tom pode apagar uma fronteira a duas seções de distância, e esta lista é o único lugar onde isso fica visível antes de acontecer. */ /* A COSTURA — a gramática da junta entre dois atos. Ela já existe em duas formas (um cross-fade de 80px e um filete creme de 1px) e não tinha nome. Sem token, o próximo agente apaga a fronteira e as seções voltam a se encostar com respiro 0. */ --costura-altura:80px; --costura-altura-g:104px; /* a junta do planos */ --costura-altura-p:84px; /* a mesma faixa em <=739px */ --costura-filete:color-mix(in oklab, var(--creme-300) 18%, transparent); /* o FILETE CLARO da junta (prova). Este token se chamava --costura-fio e o nome mentia: nos dois atos que têm costura de verdade o fio é ÂMBAR, não creme. O nome certo com a cor errada é o pior presente que se dá ao próximo agente — ele usa, o fio some, e ninguém percebe porque a costura continua existindo */ --costura-fio:var(--realce); /* O FIO QUE VARRE A JUNTA: âmbar. No planos ele é um traço de 2px que atravessa a largura; no semestre é um traço SVG animado por DrawSVG */ --costura-fio-ponta:var(--ambar-400); /* a ponta que CLAREIA na saída, a 98% da varredura */ --costura-brilho:color-mix(in oklab, var(--creme-0) 90%, transparent); --costura-aresta:linear-gradient(to bottom, color-mix(in oklab, var(--realce) 52%, transparent) 0, color-mix(in oklab, var(--ambar-luz) 30%, transparent) 22px, transparent 64px); /* a ARESTA DE ATAQUE da folha que sobe por cima da noite: é ela que tinge de âmbar a borda que entra */ /* ─ A MÁSCARA. Sem ela a costura devolve a linha entre atos ────────────── COSTURA = DEGRADÊ **MAIS** MÁSCARA. Quem implementar a junta lendo só --costura-altura e --costura-fio entrega um degradê chapado e perde as três coisas que a máscara faz: a luz NASCE dentro do quadro, o texto não é cortado no meio de uma linha, e a fileira não termina numa aresta reta atravessando 1440px. O comentário no CSS do acervo é explícito: sem a máscara o alto do gradiente encosta na quina e DESENHA UMA LINHA HORIZONTAL ENTRE A DOR E O ACERVO. Eram sete máscaras na página e zero tokens — o motor não proibiu a máscara, só não deu onde ela morar, e é essa a regressão que ninguém assina. */ --mascara-costura:linear-gradient(to bottom, transparent 0, #000 64px); --mascara-alva:linear-gradient(to bottom, transparent 0, #000 84px); --mascara-pauta:linear-gradient(to bottom, transparent 4%, #000 46%, #000 92%, rgba(0,0,0,.6) 100%); --mascara-pauta-cel:linear-gradient(to bottom, transparent 8%, #000 34%); --mascara-arte:linear-gradient(to bottom, #000 66%, transparent 88%); /* o pé da arte da capa: o título tem de sentar em papel limpo */ --mascara-folio:linear-gradient(90deg, #000 0 58px, rgba(0,0,0,.55) 70px, transparent 84px); /* o fólio do acervo. É MÁSCARA e não degradê de propósito: assim a prova de contraste enxerga o papel de verdade atrás das siglas, em vez da capa que passa por baixo */ --mascara-ponta:linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%); /* as pontas da estante do montador: nas bordas a fileira se desfaz */ --mascara-rolo:linear-gradient(to bottom, #000 0, #000 calc(100% - var(--scrim-alto)), transparent 100%); --mascara-rolo-x:linear-gradient(90deg, #000 0, #000 calc(100% - var(--scrim-medio)), transparent 100%); --mascara-rolo-p:linear-gradient(to bottom, #000 0, #000 calc(100% - var(--scrim-baixo)), transparent 100%); /* O #000 de uma máscara NÃO é cor: é alfa. Ele é a única exceção à lei "papel nunca conhece hex" neste arquivo, e existe porque mask-image lê o canal alfa de um gradiente — trocar por var(--sobre) faria a máscara depender da luz do ato, que é exatamente o que ela não pode fazer. */ /* A BARRA. Hoje esta altura está redigitada em três arquivos com quatro valores, e o scroll-margin-top das âncoras a copia à mão — dívida conhecida. Estes dois tokens são a fonte única: ld-integracao.css deve passar a ler --topo-barra-compacta em vez de repetir o número. */ --topo-barra:80px; /* a barra em repouso: o que ela cobre */ --topo-barra-compacta:58px; /* a barra encolhida: o alvo das âncoras */ --topo-respiro:16px; /* o ar entre a barra e o primeiro conteúdo preso */ /* Unidade de desenho de cena. Uma cena de 860x700 escala INTEIRA por container query, sem media query: 180+ propriedades medem em calc(N * var(--u-cena)). Apagar isto apaga a cena. */ --u-cena:calc(100cqw / 860); } @media (max-width:739px){ :root{ --topo-barra:64px; --topo-barra-compacta:56px; } } /* ═══════════════════════════════════════════════════════════════════════════ NOTAS DE CONTRATO — leia antes de consumir este arquivo 1 · SE FALTAR UM TOKEN, CRIE O TOKEN. Não abra exceção dentro do componente, e não escreva um hex "só desta vez". Proponha o papel aqui. 2 · O QUE NÃO É TOKEN E NÃO DEVE VIRAR: as ~35 cores de conteúdo dentro de aparelho simulado (chrome de macOS, chrome de iOS, papel de PDF, slide de aula, e a folha inteira do leitor em ld-filme-*), os ÂNGULOS e proporções de objeto cênico (o livro 3D, a maquete, a peça que voa) e os canais que o JS escreve por quadro. Os dois primeiros são conteúdo representado; o terceiro usa o prefixo reservado --x-*. O QUE **É** TOKEN, e a versão anterior desta nota deixava de fora: a PROFUNDIDADE do palco (--perspectiva-*), a ALTURA do ato, a TRILHA de rolagem e a CALHA de leitura. Isso é ritmo de página, não geometria de objeto — e arredondar qualquer um deles tira o ScrollTrigger do lugar. O keyframe de um objeto em 3D leva SÓ transform: um opacity ali achata o contexto e a lombada some. Medido. 3 · ALIAS ANTES DE RENOMEAR. O enciclus-demos.js lê DEZENOVE canais de cor --enc-* por getComputedStyle e entrega a string direto para ctx.fillStyle; o montador lê uma dúzia de canais. Renomear sem alias apaga desenho sem erro no console — e pior: um alias PARCIAL devolve o fallback do JS, que para --enc-lilas-60/-35 é o LILÁS #f0d7ff que a decisão de 04/09 baniu ("a régua o chama de cara de IA"). Por isso o bloco 1.11 foi fechado nesta rodada com os dezenove, em rgba literal: custom property não registrada não resolve no getComputedStyle, e um color-mix() chegaria ao canvas como string. 4 · O EIXO TONAL CONTÍNUO JÁ EXISTE e deve SUBIR para cá, não sumir: o ld-livro dirige oito papéis por color-mix num eixo que o scroll escreve quadro a quadro, com regra própria de travessia ("o texto vira num passo, na metade da noite: nunca cinza sobre cinza"). A camada 3 sabe claro/creme/escuro; ele sabe "40% de noite". Quando a Fase 3 chegar nele, generalize o mecanismo — o alvo é --fundo/--sobre interpolados num canal --x-noite, com a virada do TEXTO em passo. 5 · DUAS PALETAS CATEGÓRICAS coexistem de propósito (1.8): --fam-* é a cor da capa (dados/indice.json, e está impressa em .webp) e --pano-* é a cor do pano das capas desenhadas em código. Unificar as duas é decisão do dono, não de conversão. 6 · PENDÊNCIA OPERACIONAL: Instrument Serif e Bricolage Grotesque não têm arquivo em /site/assets/fontes/ e a produção tem CSP 'self'. Enquanto o woff2 da Instrument Serif não entrar, --ff-editorial cai no EB Garamond que já está no disco — de propósito. ═══════════════════════════════════════════════════════════════════════════ */