/* ============================================================================ shark-web · TOKENS ---------------------------------------------------------------------------- Fundacao do acervo de elementos de SITE da Shark Pro Trade. EXIGE dash-shark.tokens.css carregado ANTES deste arquivo. A marca mora la e nao e redeclarada aqui: se um dia o azul mudar, muda num lugar so. Duas regras que parecem detalhe e nao sao: 1. TODO token deriva com FALLBACK LITERAL: var(--ds-blue, #007aff). Variavel CSS que nao resolve descarta a declaracao INTEIRA, sem erro no console. Foi assim que --ds-pink sumiu do painel em 18/08/2026, e a tela ficou sem cor sem ninguem entender por que. 2. NADA usa token sem prefixo. O site.css declara --blue e --green soltos no :root. Um elemento do acervo que escrevesse var(--blue) herdaria o valor da pagina hospedeira e se reskinaria sozinho, em silencio. O que este arquivo ACRESCENTA ao dash-shark, e por que: escala display (o dash-shark para em 34px, tamanho de card e nao de dobra), ritmo de secao (para em 72px, curto demais para respiro de pagina), medida de leitura (dashboard nao tem paragrafo longo), duracoes de site (para em 800ms, curto demais para entrada coreografada) e os REGISTROS. ========================================================================== */ :root { /* --- ACENTO DA DOBRA --------------------------------------------------- A lei mais importante do acervo. Cada dobra tem UM acento, e ele e uma variavel, nao uma cor escrita na regra. Trocar o acento de uma secao e uma linha no elemento pai:
O default e azul porque azul e a cor neutra e tecnologica da marca. Verde significa conversao e lucro, e so deve aparecer onde ha dinheiro ou CTA na tela. Nunca como "a cor bonita da vez". */ --sw-acento: var(--ds-blue, #007aff); --sw-acento-glow: var(--ds-glow-blue, rgba(0, 122, 255, 0.25)); --sw-acento-tinta: #001424; /* escura: branco sobre o azul da 3,98:1 */ /* --- SUPERFICIE E TINTA: a camada semantica -------------------------------- Toda familia do acervo le DAQUI, nunca de --ds-canvas/--ds-text-* direto. O motivo e o registro editorial: ele inverte o chao (papel claro, tinta escura). Componente que leia --ds-text-1 cru sai branco sobre papel e desaparece. Com a camada no meio, o registro reescreve dez linhas e TODO componente do acervo acompanha, inclusive os que ja existiam. Os "veus" sao tinta translucida sobre o fundo (a borda de 6% de branco que o vidro usa). Num registro claro eles viram preto translucido — por isso precisam ser token, e nao rgba literal espalhado pelas regras. */ --sw-fundo: var(--ds-canvas, #000000); --sw-superficie: var(--ds-surface, #0b0c0d); --sw-superficie-2: var(--ds-surface-raised, #16181a); --sw-poco: var(--ds-sunken, #060707); --sw-vidro: var(--ds-glass, rgba(11, 12, 13, 0.6)); --sw-vidro-forte: var(--ds-glass-strong, rgba(11, 12, 13, 0.86)); --sw-tinta-1: var(--ds-text-1, #fefefe); --sw-tinta-2: var(--ds-text-2, rgba(254, 254, 254, 0.64)); /* --- PISO DE CONTRASTE: divergencia deliberada do dash-shark ------------- O --ds-text-3 da marca e 38% de branco, que sobre preto da 3,37:1 — abaixo de AA (4,5:1) para texto pequeno. O --ds-text-4 (22%) da 1,79:1. Medido com tools/contraste.mjs em 27/08/2026. O acervo sobe o piso para 48%, que da 4,92:1, e NAO altera o arquivo da marca: dash-shark.tokens.css continua como esta, porque cor e veto do cliente e o painel depende daqueles valores. Aqui a divergencia e local e reversivel numa linha. --sw-tinta-4 continua baixo de proposito e vira token DECORATIVO: traco de outline, separador, dica de rolagem, contorno do wordmark. NUNCA texto. */ --sw-tinta-3: rgba(254, 254, 254, 0.48); --sw-tinta-4: rgba(254, 254, 254, 0.22); --sw-veu-1: rgba(254, 254, 254, 0.06); --sw-veu-2: rgba(254, 254, 254, 0.10); --sw-veu-3: rgba(254, 254, 254, 0.14); --sw-veu-4: rgba(254, 254, 254, 0.24); --sw-brilho: rgba(255, 255, 255, 0.45); --sw-erro: var(--ds-red, #fd0000); --sw-logo-inverte: 0; /* --- TIPOGRAFIA DISPLAY DO EDITORIAL --------------------------------------- UM token, de proposito. A didone e o que da carater ao registro editorial, e tambem o maior risco da marca: dourado com Playfair foi reprovado 5/10 por ler "old money" e "nao condiz com a SharkPro". Isto aqui e diferente (paleta tech, papel frio, sem dourado), mas e adjacente o suficiente para merecer uma saida de uma linha. Se o Lucas torcer o nariz, troque so esta linha. */ /* ARCHIVO, na largura expandida — nao mais a didone. A didone era boa em tamanho de capa e RUIM pequena, e o motivo e mecanico: serifa de alto contraste tem hastes finissimas que colapsam abaixo de ~20px, entao a mesma fonte que impressiona no colossal fica suja na citacao e na capitular. O Daniel viu isso na v3. A escolha por um GROTESCO expandido tambem resolve o risco de marca que estava anotado aqui: dourado com Playfair levou 5/10 por ler "old money", e serifa display e vizinha daquilo. O carater do registro editorial NAO vinha da serifa — vem do papel, da grade a vista, do cabecalho corrido, da capitular e da colagem. Trocar a fonte nao tira nada disso, e devolve legibilidade em toda a escala. Archivo conversa com a marca por familia (as duas sao grotescas) e se separa por LARGURA, que e o eixo que o Space Grotesk nao tem. */ --sw-display-2: "Archivo", "Archivo Expanded", var(--ds-display, "Space Grotesk"), sans-serif; --sw-display-2-larg: 118%; /* --- TIPOGRAFIA: ESCALA DISPLAY ---------------------------------------- Fluida por clamp. O piso e o tamanho no celular de 375px, o teto e o tamanho em 1440px+, e a vw do meio faz a curva entre os dois. O tracking NEGATIVO cresce junto com o tamanho. Letra grande com espacamento normal parece solta, e e o defeito que mais entrega "template" a olho nu. */ --sw-fs-d1: clamp(42px, 7.4vw, 104px); /* h1 de dobra */ --sw-fs-d2: clamp(32px, 4.6vw, 64px); /* titulo de secao */ --sw-fs-d3: clamp(24px, 2.8vw, 40px); /* subsecao, titulo de card grande */ --sw-fs-lead: clamp(17px, 1.5vw, 21px); /* subheadline, paragrafo de abertura */ --sw-fs-body: 16px; /* corpo de site; o painel usa 14 */ --sw-fs-sm: 14px; --sw-fs-xs: 12.5px; --sw-fs-micro: 10.5px; /* kicker mono caixa-alta */ --sw-track-d1: -0.042em; --sw-track-d2: -0.032em; --sw-track-d3: -0.022em; --sw-track-lead: -0.01em; --sw-track-kicker: 0.28em; --sw-lh-d1: 0.96; --sw-lh-d2: 1.04; --sw-lh-d3: 1.16; --sw-lh-lead: 1.5; --sw-lh-body: 1.65; /* --- MEDIDA ------------------------------------------------------------- Linha longa demais faz o olho perder a volta na quebra. Estes limites valem mesmo quando sobra largura na tela: sobrar largura nao e motivo para usar largura. */ --sw-medida: 64ch; --sw-medida-curta: 46ch; --sw-medida-h1: 18ch; /* --- LARGURAS ----------------------------------------------------------- 1200px e o --container do site.css. Mantido igual de proposito: elemento do acervo colado numa pagina existente precisa alinhar com o que ja esta la, senao a emenda aparece. */ --sw-w: 1200px; --sw-w-estreito: 880px; --sw-w-largo: 1440px; --sw-gutter: clamp(20px, 5vw, 40px); /* --- RITMO DE SECAO ----------------------------------------------------- O respiro vertical e o que mais separa pagina com classe de pagina apertada. Tambem e o primeiro token que o registro reescreve. */ --sw-secao-y: clamp(72px, 9vw, 148px); --sw-bloco-y: clamp(32px, 4vw, 56px); --sw-gap: clamp(20px, 2.4vw, 32px); --sw-gap-sm: 14px; --sw-gap-lg: clamp(32px, 4vw, 64px); /* --- MOVIMENTO ---------------------------------------------------------- Escala de site, mais longa que a de painel. Reveal de dashboard a 400ms parece rapido e correto; reveal de dobra a 400ms parece um piscar. Nunca escreva duracao na mao: estes tokens zeram em prefers-reduced-motion e uma duracao literal fura a acessibilidade sem aparecer em lugar nenhum. */ --sw-dur-1: 200ms; /* micro: hover, foco */ --sw-dur-2: 420ms; /* troca de estado, tab, acordeao */ --sw-dur-3: 720ms; /* reveal ao rolar */ --sw-dur-4: 1100ms; /* entrada de dobra, coreografia */ --sw-stagger: 90ms; /* mesmo valor do reveal da home (main.js) */ --sw-ease: cubic-bezier(0.16, 1, 0.3, 1); /* expo out, o easing da casa */ --sw-ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --sw-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* MOLA CURTA: passa 6% do destino e volta. Para objeto que alguem SOLTA — a carta da pilha, o card que volta ao lugar. Nao use em entrada de texto: letra que ultrapassa e volta le como defeito de renderizacao. */ --sw-ease-mola: cubic-bezier(0.2, 0.9, 0.2, 1.06); /* --- DESLOCAMENTO DE ENTRADA ------------------------------------------- Quanto o elemento sobe ao aparecer. Passando de ~28px vira "elemento voando", que e exatamente o efeito gratuito que o cliente ja reprovou. */ --sw-rise: 22px; --sw-rise-lg: 34px; /* --- SUPERFICIE DE SECAO ------------------------------------------------ Secao alternada usa grafite sobre preto puro. A separacao vem do contraste entre as duas superficies, nunca de uma borda. */ /* --sw-secao-bg NAO E DECLARADO AQUI, e isso e deliberado. Duas tentativas erradas antes desta, as duas medidas em 27/08/2026: 1. `transparent`: a .sw-secao pintava vazio POR CIMA do que o registro acabara de pintar, porque base.css carrega depois de tokens.css. 2. `var(--sw-fundo)` aqui no :root: pior, porque parece certo. Custom property e substituida no ponto onde e DECLARADA — o valor congela como #000000 da raiz e desce herdado assim. Trocar o registro mais para dentro nao muda mais nada. A saida e nao declarar e deixar o fallback resolver NO ELEMENTO: `background: var(--sw-secao-bg, var(--sw-fundo))` em base.css. Ali o var(--sw-fundo) e substituido na propria secao, e a` acompanha o registro. Quem quiser uma cor fixa numa secao declara --sw-secao-bg no elemento. */ --sw-secao-bg-alt: var(--ds-graphite, #0b0c0d); /* --- TRAMA DE BARRA ----------------------------------------------------- Herdada do dash-shark. Barra comparativa e medidor se preenchem com trama, nao com cor chapada: e a assinatura da marca, e e o que impede a barra de parecer widget de biblioteca. */ --sw-mesh-size: var(--ds-mesh-size, 3px); --sw-mesh-dot: var(--ds-mesh-dot, rgba(254, 254, 254, 0.18)); /* --- CAMADAS ------------------------------------------------------------ O site poe o grain em z-index 9999. Nada daqui passa disso, para a textura global continuar por cima de tudo. */ --sw-z-nav: 900; --sw-z-mobar: 890; --sw-z-subnav: 880; --sw-z-overlay: 950; /* Defaults de registro. Ficam aqui embaixo porque valem quando ninguem declarou data-registro: o acervo erra para o lado discreto, ja que acento a mais e visivel na hora e acento a menos nao estraga nada. */ --sw-linha: var(--ds-line, rgba(254, 254, 254, 0.08)); --sw-linha-fraca: var(--ds-line-faint, rgba(254, 254, 254, 0.045)); --sw-btn-tinta: var(--ds-black, #000000); --sw-btn-fundo: var(--ds-white, #fefefe); } /* ============================================================================ OS DOIS REGISTROS ---------------------------------------------------------------------------- Mesma marca, duas densidades. Trocar de registro NUNCA troca a cor da marca: troca quanto ar existe, quanto contraste, e quantos acentos cabem numa dobra.
institucional, pagina longa, leitura
venda, CTA, dobra de anuncio Vale em qualquer subarvore, entao os dois convivem na mesma pagina: uma dobra de venda dentro de uma pagina de leitura continua sendo de venda. ========================================================================== */ /* REPOUSO Mais ar, um acento por dobra, contraste baixo em tudo que nao e texto. E o registro para quando a pagina precisa ser densa em informacao sem ficar pesada: o respiro e o que carrega a densidade. */ [data-registro="repouso"] { /* CONJUNTO ESCURO COMPLETO. Repetido em cada registro escuro de proposito. A tentacao e deixar so no :root e economizar as linhas — foi o que a primeira versao fez, e quebra no aninhamento: um card com data-registro="repouso" DENTRO de um palco editorial resolvia --sw-tinta-* no editorial (o ancestral mais proximo que declara), pintava a superficie escura pela regra propria do .sw-card e herdava tinta ESCURA. Deu #111316 sobre #0b0c0d, 1,05:1. Registro precisa ser autocontido: quem declara um conjunto declara o conjunto inteiro, senao a ordem de aninhamento decide a cor. */ --sw-fundo: var(--ds-canvas, #000000); --sw-superficie: var(--ds-surface, #0b0c0d); --sw-superficie-2: var(--ds-surface-raised, #16181a); --sw-poco: var(--ds-sunken, #060707); --sw-vidro: var(--ds-glass, rgba(11, 12, 13, 0.6)); --sw-vidro-forte: var(--ds-glass-strong, rgba(11, 12, 13, 0.86)); --sw-tinta-1: var(--ds-text-1, #fefefe); --sw-tinta-2: var(--ds-text-2, rgba(254, 254, 254, 0.64)); --sw-tinta-3: rgba(254, 254, 254, 0.48); --sw-tinta-4: rgba(254, 254, 254, 0.22); --sw-veu-1: rgba(254, 254, 254, 0.06); --sw-veu-2: rgba(254, 254, 254, 0.10); --sw-veu-3: rgba(254, 254, 254, 0.14); --sw-veu-4: rgba(254, 254, 254, 0.24); --sw-brilho: rgba(255, 255, 255, 0.45); --sw-erro: var(--ds-red, #fd0000); --sw-secao-bg-alt: var(--ds-graphite, #0b0c0d); /* Arte da marca e branca: em chao escuro ela vai crua. */ --sw-logo-inverte: 0; /* Pinta o chao E a tinta. As DUAS coisas, em TODO registro. Faltar o `color` foi o defeito que produziu o segundo sintoma relatado pelo Daniel: um card com data-registro="repouso" dentro de um palco editorial pintava a superficie escura (regra propria do .sw-card) e herdava a TINTA ESCURA do palco de fora, porque o bloco do repouso nao declarava `color`. Resultado: #14161a sobre #0b0c0d, 1,08:1. Nao atropela componente: [data-registro="..."] tem a mesma especificidade de .sw-card, e este arquivo carrega ANTES das familias, entao quem pinta a propria superficie continua pintando. Regra do sistema: registro novo declara background e color, sempre. */ background: var(--sw-fundo); color: var(--sw-tinta-1); --sw-secao-y: clamp(88px, 11vw, 200px); --sw-bloco-y: clamp(40px, 5vw, 72px); --sw-gap: clamp(24px, 3vw, 44px); --sw-lh-body: 1.72; --sw-rise: 18px; --sw-dur-3: 820ms; --sw-acento: var(--ds-blue, #007aff); --sw-acento-glow: transparent; /* sem halo: aqui o acento e cor, nao luz */ /* Tinta ESCURA sobre o azul. Branco sobre #007aff da 3,98:1 e reprova AA para texto pequeno; a tinta escura da 5,23:1 e passa. Mesma licao que o dash-shark aprendeu com a menta: cor de marca clara inverte a tinta, e o erro nao aparece no olho — aparece na medicao. Isto NAO muda a cor da marca. Muda so o que se escreve em cima dela. */ --sw-acento-tinta: #001424; /* Menos contraste NAO vale para fio estrutural. A primeira versao baixou --sw-linha para o tom fraco no repouso, e a borda do case, os pontos da timeline e os divisores do FAQ sumiram junto: a peca perdeu a estrutura, nao o peso. O tom fraco ficou onde ele e ornamento (--sw-linha-fraca). */ --sw-linha: var(--ds-line, rgba(254, 254, 254, 0.08)); --sw-linha-fraca: var(--ds-line-faint, rgba(254, 254, 254, 0.045)); --sw-btn-tinta: var(--ds-black, #000000); --sw-btn-fundo: var(--ds-white, #fefefe); } /* CONVERSAO O registro que o Lucas aprovou em 9,9/10. Neon, contraste alto, CTA que salta aos olhos. Nao e o registro "errado": e o certo onde ha decisao de compra na tela. */ [data-registro="conversao"] { /* CONJUNTO ESCURO COMPLETO. Repetido em cada registro escuro de proposito. A tentacao e deixar so no :root e economizar as linhas — foi o que a primeira versao fez, e quebra no aninhamento: um card com data-registro="repouso" DENTRO de um palco editorial resolvia --sw-tinta-* no editorial (o ancestral mais proximo que declara), pintava a superficie escura pela regra propria do .sw-card e herdava tinta ESCURA. Deu #111316 sobre #0b0c0d, 1,05:1. Registro precisa ser autocontido: quem declara um conjunto declara o conjunto inteiro, senao a ordem de aninhamento decide a cor. */ --sw-fundo: var(--ds-canvas, #000000); --sw-superficie: var(--ds-surface, #0b0c0d); --sw-superficie-2: var(--ds-surface-raised, #16181a); --sw-poco: var(--ds-sunken, #060707); --sw-vidro: var(--ds-glass, rgba(11, 12, 13, 0.6)); --sw-vidro-forte: var(--ds-glass-strong, rgba(11, 12, 13, 0.86)); --sw-tinta-1: var(--ds-text-1, #fefefe); --sw-tinta-2: var(--ds-text-2, rgba(254, 254, 254, 0.64)); --sw-tinta-3: rgba(254, 254, 254, 0.48); --sw-tinta-4: rgba(254, 254, 254, 0.22); --sw-veu-1: rgba(254, 254, 254, 0.06); --sw-veu-2: rgba(254, 254, 254, 0.10); --sw-veu-3: rgba(254, 254, 254, 0.14); --sw-veu-4: rgba(254, 254, 254, 0.24); --sw-brilho: rgba(255, 255, 255, 0.45); --sw-erro: var(--ds-red, #fd0000); --sw-secao-bg-alt: var(--ds-graphite, #0b0c0d); /* Arte da marca e branca: em chao escuro ela vai crua. */ --sw-logo-inverte: 0; /* Pinta o chao E a tinta. As DUAS coisas, em TODO registro. Faltar o `color` foi o defeito que produziu o segundo sintoma relatado pelo Daniel: um card com data-registro="repouso" dentro de um palco editorial pintava a superficie escura (regra propria do .sw-card) e herdava a TINTA ESCURA do palco de fora, porque o bloco do repouso nao declarava `color`. Resultado: #14161a sobre #0b0c0d, 1,08:1. Nao atropela componente: [data-registro="..."] tem a mesma especificidade de .sw-card, e este arquivo carrega ANTES das familias, entao quem pinta a propria superficie continua pintando. Regra do sistema: registro novo declara background e color, sempre. */ background: var(--sw-fundo); color: var(--sw-tinta-1); --sw-secao-y: clamp(64px, 8vw, 128px); --sw-bloco-y: clamp(28px, 3.4vw, 48px); --sw-lh-body: 1.6; --sw-rise: 26px; --sw-acento: var(--ds-green, #00ff5f); --sw-acento-glow: var(--ds-glow-green, rgba(0, 255, 95, 0.2)); --sw-acento-tinta: var(--ds-text-on-accent, #001b0a); --sw-linha: var(--ds-line-strong, rgba(254, 254, 254, 0.14)); --sw-linha-fraca: var(--ds-line, rgba(254, 254, 254, 0.08)); --sw-btn-tinta: var(--ds-text-on-accent, #001b0a); --sw-btn-fundo: var(--ds-green, #00ff5f); } /* ============================================================================ ACESSIBILIDADE ---------------------------------------------------------------------------- Zera o TEMPO, nunca o elemento. A camada de movimento le a mesma media query e nem chega a registrar os ScrollTriggers, mas se o JS nao subir isto sozinho ja deixa a pagina legivel e parada. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --sw-dur-1: 0ms; --sw-dur-2: 0ms; --sw-dur-3: 0ms; --sw-dur-4: 0ms; --sw-stagger: 0ms; --sw-rise: 0px; --sw-rise-lg: 0px; } } /* ============================================================================ REGISTRO 3 · EDITORIAL ---------------------------------------------------------------------------- O chao INVERTE: papel frio, tinta escura, didone display, grade a vista. E o registro de revista — pagina longa, ensaio, historico, manifesto. Duas coisas que so existem aqui e por que: 1. O acento e um VERDE PROFUNDO, nao o neon. #00ff5f sobre papel da 1,4:1 e simplesmente nao se le. O #006625 e o MESMO matiz (142 graus) e a mesma saturacao, so com a luminosidade em 20%: da 5,73:1 sobre o papel, que passa AA para corpo. Mesmo procedimento do --ds-pink-deep do dash-shark: existe por acessibilidade, nao por estetica. 2. Os veus invertem de branco para PRETO translucido. Um veu de 6% de branco sobre papel claro nao aparece; o mesmo em preto entrega a mesma funcao. Por isso eles precisavam ser token e nao rgba literal na regra. RISCO REGISTRADO: didone display e adjacente ao que o cliente ja reprovou — dourado com Playfair levou 5/10 por ler "old money" e "nao condiz com a SharkPro". Aqui nao ha dourado e a paleta segue tech, mas se o Lucas torcer o nariz a saida e UMA linha: --sw-display-2. ========================================================================== */ [data-registro="editorial"] { /* Pinta o chao E a tinta. As DUAS coisas, em TODO registro. Faltar o `color` foi o defeito que produziu o segundo sintoma relatado pelo Daniel: um card com data-registro="repouso" dentro de um palco editorial pintava a superficie escura (regra propria do .sw-card) e herdava a TINTA ESCURA do palco de fora, porque o bloco do repouso nao declarava `color`. Resultado: #14161a sobre #0b0c0d, 1,08:1. Nao atropela componente: [data-registro="..."] tem a mesma especificidade de .sw-card, e este arquivo carrega ANTES das familias, entao quem pinta a propria superficie continua pintando. Regra do sistema: registro novo declara background e color, sempre. */ background: var(--sw-fundo); color: var(--sw-tinta-1); --sw-fundo: #e8e6e1; --sw-superficie: #f2f1ed; --sw-superficie-2: #fbfaf8; /* O wordmark e PNG branco: no papel ele precisa ser invertido, senao desaparece. Token, nao classe — quem troca o registro nao pode ter que lembrar de trocar o logo tambem. */ --sw-logo-inverte: 1; --sw-poco: #dcd9d2; --sw-vidro: rgba(242, 241, 237, 0.74); --sw-vidro-forte: rgba(242, 241, 237, 0.94); --sw-tinta-1: #14161a; --sw-tinta-2: rgba(20, 22, 26, 0.68); /* 5,70:1 sobre o papel */ /* 44% dava 2,73:1 sobre papel — reprova. 62% da 4,61:1 e passa AA. Tinta escura sobre claro precisa de MAIS alfa que clara sobre escuro para o mesmo contraste; copiar o valor do registro escuro nao funciona. */ --sw-tinta-3: rgba(20, 22, 26, 0.62); --sw-tinta-4: rgba(20, 22, 26, 0.20); /* decorativo, nunca texto */ --sw-veu-1: rgba(20, 22, 26, 0.05); --sw-veu-2: rgba(20, 22, 26, 0.08); --sw-veu-3: rgba(20, 22, 26, 0.12); --sw-veu-4: rgba(20, 22, 26, 0.20); --sw-brilho: rgba(20, 22, 26, 0.10); --sw-superficie-2: #fbfaf8; /* O wordmark e PNG branco: no papel ele precisa ser invertido, senao desaparece. Token, nao classe — quem troca o registro nao pode ter que lembrar de trocar o logo tambem. */ --sw-logo-inverte: 1; --sw-linha: rgba(20, 22, 26, 0.13); --sw-linha-fraca: rgba(20, 22, 26, 0.07); /* Vermelho de erro PROFUNDO. O #fd0000 da marca sobre papel da 3,59:1 e reprova; este mantem o matiz e passa. Mesma logica do verde acima. */ --sw-erro: #b00000; --sw-acento: #006625; --sw-acento-glow: transparent; --sw-acento-tinta: #fbfaf8; --sw-btn-fundo: #14161a; --sw-btn-tinta: #f2f1ed; --sw-secao-bg-alt: #dedbd4; /* Respiro de revista: mais ar que qualquer outro registro. */ --sw-secao-y: clamp(96px, 12vw, 220px); --sw-lh-body: 1.7; /* Grotesco expandido aceita tracking negativo de volta — era a serifa de alto contraste que nao aceitava, porque colava as hastes finas. */ --sw-track-d1: -0.03em; --sw-track-d2: -0.022em; --sw-lh-d1: 0.94; } /* ============================================================================ REGISTRO 4 · CINEMA ---------------------------------------------------------------------------- Preto puro, midia sangrando de borda a borda, tipografia ancorada na quina, cromo reduzido a quase nada. E o registro de primeira dobra e de capa de produto — nao de leitura. O fundo continua #000 de proposito, mesmo com as referencias usando cinza azulado: preto puro e lei da marca, e aqui a imagem cobre a tela inteira, de modo que o chao praticamente nao aparece. Nao vale gastar uma lei nisso. A tipografia fica LEVE e larga, ao contrario de todos os outros registros. Titulo pesado sobre foto disputa com a imagem; titulo leve e espacado descansa em cima dela. ========================================================================== */ [data-registro="cinema"] { /* CONJUNTO ESCURO COMPLETO. Repetido em cada registro escuro de proposito. A tentacao e deixar so no :root e economizar as linhas — foi o que a primeira versao fez, e quebra no aninhamento: um card com data-registro="repouso" DENTRO de um palco editorial resolvia --sw-tinta-* no editorial (o ancestral mais proximo que declara), pintava a superficie escura pela regra propria do .sw-card e herdava tinta ESCURA. Deu #111316 sobre #0b0c0d, 1,05:1. Registro precisa ser autocontido: quem declara um conjunto declara o conjunto inteiro, senao a ordem de aninhamento decide a cor. */ --sw-fundo: var(--ds-canvas, #000000); --sw-superficie: var(--ds-surface, #0b0c0d); --sw-superficie-2: var(--ds-surface-raised, #16181a); --sw-poco: var(--ds-sunken, #060707); --sw-vidro: var(--ds-glass, rgba(11, 12, 13, 0.6)); --sw-vidro-forte: var(--ds-glass-strong, rgba(11, 12, 13, 0.86)); --sw-tinta-1: var(--ds-text-1, #fefefe); --sw-tinta-2: var(--ds-text-2, rgba(254, 254, 254, 0.64)); --sw-tinta-3: rgba(254, 254, 254, 0.48); --sw-tinta-4: rgba(254, 254, 254, 0.22); --sw-veu-1: rgba(254, 254, 254, 0.06); --sw-veu-2: rgba(254, 254, 254, 0.10); --sw-veu-3: rgba(254, 254, 254, 0.14); --sw-veu-4: rgba(254, 254, 254, 0.24); --sw-brilho: rgba(255, 255, 255, 0.45); --sw-erro: var(--ds-red, #fd0000); --sw-secao-bg-alt: var(--ds-graphite, #0b0c0d); /* Arte da marca e branca: em chao escuro ela vai crua. */ --sw-logo-inverte: 0; /* Pinta o chao E a tinta. As DUAS coisas, em TODO registro. Faltar o `color` foi o defeito que produziu o segundo sintoma relatado pelo Daniel: um card com data-registro="repouso" dentro de um palco editorial pintava a superficie escura (regra propria do .sw-card) e herdava a TINTA ESCURA do palco de fora, porque o bloco do repouso nao declarava `color`. Resultado: #14161a sobre #0b0c0d, 1,08:1. Nao atropela componente: [data-registro="..."] tem a mesma especificidade de .sw-card, e este arquivo carrega ANTES das familias, entao quem pinta a propria superficie continua pintando. Regra do sistema: registro novo declara background e color, sempre. */ background: var(--sw-fundo); color: var(--sw-tinta-1); --sw-acento: var(--ds-blue, #007aff); --sw-acento-glow: var(--ds-glow-blue, rgba(0, 122, 255, 0.25)); /* Tinta ESCURA sobre o azul. Branco sobre #007aff da 3,98:1 e reprova AA para texto pequeno; a tinta escura da 5,23:1 e passa. Mesma licao que o dash-shark aprendeu com a menta: cor de marca clara inverte a tinta, e o erro nao aparece no olho — aparece na medicao. Isto NAO muda a cor da marca. Muda so o que se escreve em cima dela. */ --sw-acento-tinta: #001424; --sw-linha: rgba(254, 254, 254, 0.16); --sw-linha-fraca: rgba(254, 254, 254, 0.08); --sw-secao-y: clamp(80px, 10vw, 170px); /* Peso e tracking invertidos em relacao ao resto do acervo. */ --sw-peso-display: 300; --sw-track-d1: -0.005em; --sw-track-d2: 0.005em; --sw-lh-d1: 1.02; /* A pill BRANCA, no espirito da Porsche e da ElevenLabs. A primeira versao punha `transparent` aqui, o que transformava o botao primario num fantasma e deixava a tinta preta sobre o palco preto: 1:1, invisivel. Fantasma continua existindo — e o .sw-btn--fantasma. */ --sw-btn-fundo: var(--ds-white, #fefefe); --sw-btn-tinta: var(--ds-black, #000000); } /* ============================================================================ CHAO DE ACENTO ---------------------------------------------------------------------------- A secao cujo chao NAO e preto nem colorido: e a cor do acento rebaixada a uns 4% de luz. Fica entre os dois, e e o que produz a sensacao de "premium" sem custar uma cor nova. Nao e um registro. Registro troca escala, densidade e quantos acentos cabem numa dobra; isto troca so o CHAO — a tipografia e o ritmo continuam os do registro em volta. Por isso e uma classe, e por isso ela pode entrar em qualquer um dos quatro. TUDO DERIVA DE --sw-acento, e essa e a diferenca que importa. A referencia usa um verde-quase-preto fixo (#021c15). Fixo, ele quebraria no registro de repouso, onde o acento e azul. Derivado, o mesmo bloco fica azul-quase-preto la e verde-quase-preto aqui, sem ninguem escrever uma segunda regra. O piso de contraste continua valendo: as tintas sao recalculadas contra o chao novo e conferidas pelo tools/contraste.mjs, nao pelo olho. ========================================================================== */ /* O FALLBACK VEM PRIMEIRO, E ELE PRECISA DE `@supports`. Estas quatro sao as unicas custom properties do acervo cujo valor inteiro e um `color-mix()`. Onde a funcao nao existe (Safari abaixo de 16.2, Firefox abaixo de 113), o valor nao e "ignorado": ele fica invalido no momento da substituicao, e toda declaracao que fizer `var(--sw-fundo)` e descartada. O bloco perde o chao e vira indistinguivel do registro em volta. Declarar o literal ANTES do color-mix no mesmo bloco NAO resolve: custom property guarda fluxo de token sem validar, entao a ultima declaracao vence sempre e a invalidez so aparece la na frente. So o `@supports` separa os dois mundos de verdade. Os literais sao neutros de proposito — o chao de acento simplesmente nao acontece, e a peca cai no chao do registro. Preferir isso a chutar um verde fixo, que quebraria no registro de repouso, onde o acento e azul. E exatamente o argumento que o comentario acima ja faz contra o `#021c15` da referencia. */ .sw-chao-acento { --sw-fundo: #000000; --sw-superficie: #050505; --sw-superficie-2: #090909; --sw-poco: #000000; /* Os veus continuam BRANCOS translucidos, e nao o acento: veu do acento sobre chao do acento vira a mesma cor com outro alfa, e a borda de vidro desaparece. O que separa superficie de fundo aqui e luz, nao matiz. */ --sw-veu-1: rgba(254, 254, 254, 0.06); --sw-veu-2: rgba(254, 254, 254, 0.10); --sw-veu-3: rgba(254, 254, 254, 0.14); --sw-veu-4: rgba(254, 254, 254, 0.24); --sw-linha: rgba(254, 254, 254, 0.10); --sw-linha-fraca: rgba(254, 254, 254, 0.06); --sw-tinta-1: #fefefe; --sw-tinta-2: rgba(254, 254, 254, 0.66); --sw-tinta-3: rgba(254, 254, 254, 0.50); --sw-tinta-4: rgba(254, 254, 254, 0.24); /* Um registro que troca o chao TEM que pintar o chao. Sem estas duas linhas a tinta inverte e o fundo nao, que foi exatamente o defeito do editorial na v2. */ background: var(--sw-fundo); color: var(--sw-tinta-1); } /* O ACENTO DO EDITORIAL NAO SERVE AQUI, e este e o unico caso em que o chao de acento precisa de uma regra extra. O editorial e o unico registro com chao CLARO, e por isso o acento dele e um verde PROFUNDO (#006625) calibrado para papel. Quando um bloco `.sw-chao-acento` entra dentro dele, o chao vira quase-preto — e o verde profundo sobre quase-preto da 2,93:1, medido. O acento calibrado para um fundo vira ilegivel no fundo oposto, e nenhuma quantidade de derivacao conserta isso sozinha. A saida e devolver o verde da marca, que e o mesmo matiz na luminosidade alta. O chao continua derivando de --sw-acento, entao ele acompanha: o bloco fica verde-quase-preto, como ficaria no registro de conversao. Coerente, e nao uma excecao pendurada. Por que nao dentro do proprio `.sw-chao-acento`: escrever `--sw-chao-base: var(--sw-acento)` no mesmo bloco onde `--sw-acento` e redeclarado forma um ciclo, e as duas variaveis viram invalidas em silencio. E a mesma armadilha do `--a: var(--b)` no `:root`. */ [data-registro="editorial"] .sw-chao-acento { --sw-acento: var(--ds-green, #00ff5f); --sw-acento-tinta: var(--ds-text-on-accent, #001b0a); } /* Dentro do chao de acento, o botao primario nao pode ser o acento: seria a mesma cor da secao com mais saturacao, e o CTA sumiria. Ele inverte para tinta cheia, que e o par de maior contraste disponivel ali. */ .sw-chao-acento .sw-btn--primario { background: var(--sw-tinta-1); color: color-mix(in srgb, var(--sw-acento) 22%, #000000); } /* A luz de topo, opcional. Nasce fora da caixa e vaza para dentro — mesma assinatura do .sw-cta-bloco, so que na escala da secao. */ .sw-chao-acento--luz { position: relative; isolation: isolate; overflow: hidden; } /* A luz e RASA e FRACA, e as duas medidas foram corrigidas depois de olhar. A primeira versao tinha 22% de acento numa elipse de 120% de largura por 2:1, comecando em -60%: ela cobria a faixa inteira e o resultado nao era um clarao no topo, era a secao pintada de azul. O chao em si estava certo o tempo todo (#000f1f, medido) — quem lavava tudo era o brilho. Com 4:1 e 13%, a luz morre antes de um terco da altura, e o que sobra e o que se queria: uma borda de topo iluminada sobre um chao quase preto. */ .sw-chao-acento--luz::before { content: ""; position: absolute; left: 50%; top: -34%; width: 118%; aspect-ratio: 4 / 1; transform: translateX(-50%); background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sw-acento) 13%, transparent), transparent 66%); z-index: -1; pointer-events: none; } /* O chao de acento de verdade, so onde `color-mix()` existe. Ver a nota no bloco `.sw-chao-acento` acima para o motivo de isto nao caber la dentro. */ @supports (color: color-mix(in srgb, red 50%, blue)) { .sw-chao-acento { --sw-fundo: color-mix(in srgb, var(--sw-acento) 12%, #000000); --sw-superficie: color-mix(in srgb, var(--sw-acento) 15%, #050505); --sw-superficie-2: color-mix(in srgb, var(--sw-acento) 19%, #090909); --sw-poco: color-mix(in srgb, var(--sw-acento) 9%, #000000); } }