/* ========================================================================== NEXUS theme-final / assets/css/10-skin-smooth.css QUINTA pele do projeto. Território exclusivo deste arquivo: só CSS. Ativada por [data-skin="smooth"] no mais esta folha, carregada por último no . Nenhum partial, nenhum dado e nenhum script sabe que ela existe (§0.1 do contrato). Todo seletor começa pelo portão da pele: as cinco peles coexistem no mesmo documento e o atributo decide qual vale. IDENTIDADE: SUAVIDADE Produto de software com modos de gente. Superfícies claras e macias que flutuam sobre um campo de luminosidade, com sombra difusa EM CAMADAS no lugar da borda; raio generoso (1.25rem na raiz, 1.875rem no cartão, 2.5rem na moldura); mola discreta em tudo que mexe; respiro grande; e um único acento cromático, um rosa fechado, que aparece na palavra que fecha a dobra e em mais nada de área grande. O modo escuro é igualmente resolvido: cinza profundo aveludado, elevação por cor mais luz, nunca preto chapado com borda dura. A frase que resume a pele, e que decide toda dúvida daqui para baixo: NESTA PELE A LINGUAGEM É SOMBRA, NÃO BORDA. Onde as outras quatro separam duas superfícies com um filete, esta separa com um degrau de luz. A borda continua existindo, mas como sussurro (contraste de 1,2:1 contra o campo), e quem faz o trabalho de hierarquia é a pilha de três sombras de --shadow-lg. DE ONDE ELA VEM smoothui.dev, lido em docs/smooth-ref/ (NOTES.md, LISTA.md, 40 capturas de componente, home.png, hero-header1.png) e PORTADO para CSS puro deste projeto. Os componentes de lá são React com motion/react; aqui cada padrão virou receita declarativa sobre os tokens de 01-tokens.css. padrão do smoothui onde ele encaixou aqui ------------------------- -------------------------------------------- header-1 (bloco de dobra) #hero inteiro, por decreto (ver abaixo) smooth-button .btn, .btn--primary, .btn--outline, .header__cta animated-tabs .portfolio__filters como trilho + pílula ativa product-card .portfolio__card, .modelos__card, .cases glow-hover-card .card--glow (a receita --px/--py já existia) accordion .capacidades__item / .capacidades__trigger apple-invites .contato__frame: placa flutuante com tilt 3D animated-progress-bar .govtech-familia__track / __fill spring-scale-in a mola de --ease-out, aplicada ao chassi todo soft-blur-in não portado: ver "o que não foi portado" infinite-slider .rail (o marquee do projeto já era isso) O QUE NÃO FOI PORTADO, E POR QUÊ Blur de entrada (soft-blur-in, focus-blur-resolve) é efeito de REVELAÇÃO, e revelação neste projeto é do catálogo NX.fx, escolhida por seção no painel (§6.1). Uma pele que embutisse blur na entrada estaria ligando efeito sozinha, contra o §6.0.2. Quem quiser desfoque que resolve liga "desfoque que resolve" no painel, em qualquer pele, que é exatamente o que o §0.4b pede. Os springs de lá são de biblioteca (motion/react, bounce 0..0.1 conforme NOTES.md). Aqui a mola é uma bezier única, --ease-out redefinida para cubic-bezier(0.34, 1.28, 0.44, 1), que tem overshoot de aproximadamente 6% e assenta sem oscilar: é a transcrição de "bounce 0.1", que NOTES.md registra como o valor dominante do lote. Zero biblioteca, zero rede, e toda duração continua multiplicada por var(--motion). O magnetic-button e o scramble-hover dependem de JS por elemento e o §0.1 proíbe esta folha de trazer JS. Ficam de fora, sem substituto de fachada. AS CINCO PROPOSTAS, LADO A LADO index.html editorial denso. Bricolage sobre Manrope, halo radial, raio 0.75rem. index2.html arejado e luminoso. Funnel Display sobre Geist, raio 1.5rem, vidro com desfoque. index3.html ferramenta. Geist em tudo, raio 0.5rem, matriz de células contíguas com filete de 1px, zero sombra. index4.html máquina. Geist sobre Manrope, raio 0.3125rem, alumínio escovado, bisel em toda aresta. index5.html SUAVIDADE. Geist em tudo com peso médio, raio 1.25rem, campo de luminosidade com grade de fio, cartão macio que flutua em três camadas de sombra, botão em pílula com mola, acento rosa fechado, rodapé com o wordmark em relevo. Sobre a colisão de família com index3.html, registrada de propósito: as duas usam Geist nos dois eixos, e isso não é descuido. A distância entre as duas peles é de FORMA, não de desenho de letra: 0.5rem contra 1.25rem de raio, --density 0.86 contra 1.12, --shadow-strength 0.3 contra 1, peso de display 620 contra 700, e um layout de células contíguas contra um de peças flutuantes. Medido em pixel na dobra (ver o relatório da rodada), a divergência index3 x index5 fica muito acima do piso de 25% do §12. Trocar a família só para diferenciar seria escolher tipo por contraste com outra página em vez de por adequação à pele, que é o contrário do que o §12 pede. O HERO É DECRETO, NÃO GOSTO docs/smooth-ref/HERO-OBRIGATORIO.md, de 4 de agosto de 2026, fixa o bloco header-1 do smoothui como blueprint do hero desta pele e diz, na última linha, que ele vence qualquer conflito com o gosto do agente. Ele fixa oito pontos, e os oito estão implementados no bloco 6 desta folha: campo com grade de fio e SEM halo, barra limpa e sem cápsula, título centrado com a última linha em acento, lead curto e mudo, dois CTAs em pílula, quadro de vídeo FORA da dobra (display: none, conteúdo intacto no DOM), entrada em sequência com mola e dobra de ~72svh ancorada acima do centro óptico. A consequência mais visível do ponto 6 é que a primeira mídia da página passa a ser a régua de provas. Ela paga essa promoção virando cartões macios com o número em relevo (bloco 8). A placa flutuante com tilt 3D e sombra profunda, que o briefing pedia para a dobra, existe: ela foi para #contato (bloco 16), que é onde vive o segundo filme da marca e onde ela não contradiz o decreto. REGRAS DURAS RESPEITADAS Zero hexadecimal: toda cor é hsl() de token, e todo cinza próprio da pele está declarado no bloco 1 com o prefixo --sm-. Nenhuma cor derivada de matiz por calc(). Nenhum alfa em propriedade `color`, nunca: alfa aparece só em pintura de fundo, borda, sombra e máscara. --border jamais é tinta de glifo; tinta subordinada é --faint-foreground (§2.5), recalibrada nesta folha para o ambiente desta pele, como o §12 exige de quem move a superfície. Efeito contínuo só em transform e opacity; clip-path aparece uma vez, na entrada do título, preso a [data-reveal-init] escrito por JS, de modo que sem JS nada fica escondido (§6). Toda duração multiplicada por var(--motion), com prefers-reduced-motion e @container style(--motion: 0) congelando tudo e ABRINDO a máscara. Contraste AA medido em pixel nos dois modos. DIVERGÊNCIAS REGISTRADAS (§0, que exige registro por escrito) 1. --radius-full em botão, chip e pílula social. O §2.3 reserva --radius-full a "pill de status e avatar". Nesta pele a cápsula é a assinatura da linguagem: o smooth-button, os dois CTAs do header-1 e o indicador de aba são todos pílula, e um raio de 1.25rem em um botão de 44px de altura já é quase cápsula, então a alternativa seria uma diferença de dois pixels que ninguém lê como decisão. O token continua sendo um token, e a faixa do estúdio (0rem a 1.5rem) continua governando TUDO o mais: em --radius: 0rem o site desta pele continua apresentável, com botões em cápsula e cartões retos, que é a leitura correta de "nada depende visualmente de canto redondo". 2. --density: 1.12 e --container: 1200px. O contrato não prevê a pele mexer em densidade; o §12.1 já registrou a mesma divergência para a pele de vidro (1.14). Respiro grande é metade da identidade aqui, e sem ele a sombra difusa encosta na peça vizinha e vira sujeira. 3. --background sai de 0 0% 100% no claro. O campo é 0 0% 97% e o cartão é 0 0% 100%: sem esse degrau o cartão branco não tem contra o que flutuar e a pele inteira desmonta, exatamente como o bisel de 09-skin-cult.css não tinha para onde subir em branco absoluto. O preço foi pago na mesma regra, como o §12 manda: --muted-foreground, --faint-foreground, --border, --input, --ring e --signal foram recalculados por tema dentro do escopo da pele, com os números medidos escritos ao lado. 4. Consequência ainda aberta da divergência 3, e ela é a mesma que o §12.4 já registrou para a pele cult: as duas de index5.html continuam com os dois valores de fábrica (branco absoluto no claro, 0 0% 4% no escuro), que são a transcrição literal do --background de fábrica e não o desta pele (0 0% 97% e 0 0% 7%). Ou a pele volta ao --background de fábrica, ou o §0.3 ganha uma cláusula por documento. Enquanto uma das duas não entrar, a barra do sistema diverge da página em index5.html. Não é corrigível daqui: meta não aceita var() e este agente não tem território sobre o §0.3. Índice: 0. O portão da pele, e por que ele tem dois lados 1. Tokens da pele, por tema 2. Campo: luminosidade, grade de fio e cessão ao padrão do usuário 3. Sombra em camadas: a linguagem inteira em quatro variáveis 4. Botão em pílula com mola (smooth-button) 5. Cartão macio, moldura de mídia e superfícies gerais 6. Cabeçalho: barra limpa, sem cápsula 7. DOBRA: o bloco header-1, por decreto 8. Régua de provas: cartões macios com o número em relevo 9. Tese: blocos macios com numeral em relevo 10. Capacidades: accordion suave 11. Método: trilho macio 12. Modelos: cartões de produto que elevam 13. Portfólio: abas suaves e cartões macios 14. Cases e govtech 15. Confiança e contratação 16. Contato: a placa flutuante com tilt 3D 17. RODAPÉ: wordmark em relevo, colunas em cartões, redes em pílulas 18. Formulário, crachá e miudezas de chassi 19. Entrada do título por máscara 20. Movimento reduzido e interruptor do estúdio ========================================================================== */ /* -------------------------------------------------------------------------- 0. O PORTÃO DA PELE, e por que ele tem dois lados Todo seletor deste arquivo começa por :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) O primeiro lado é o portão canônico do §12: o atributo data-skin no . O segundo é uma PONTE TEMPORÁRIA, idêntica à que 09-skin-cult.css já registrou, e ela existe pelo mesmo motivo verificável. assets/js/core/theme.js mantém a lista de peles válidas em código (`SKINS`, quatro entradas: default, glass, surface, cult) e valida com ela tudo o que chega do documento: var SKIN_BASE = validSkin(root.getAttribute('data-skin-base')) || validSkin(root.getAttribute('data-skin')) || 'default'; Enquanto "smooth" não estiver nessa lista, `validSkin('smooth')` devolve null, `SKIN_BASE` cai para 'default', e o `applySkin('default')` do init faz `root.removeAttribute('data-skin')`. Sem a ponte, index5.html nasceria idêntica a index.html: a folha carregada, as regras no CSSOM, e nenhum pixel pintado. `data-skin-base` é escrito pelo script inline do ANTES de qualquer CSS e nunca é removido por ninguém: é o padrão de fábrica DAQUELE documento. O par `[data-skin-base="smooth"]:not([data-skin])` é a leitura exata de "este documento nasceu smooth e nada sobrescreveu a pele". Os quatro estados fecham: JS desligado ......... data-skin="smooth" presente ....... pinta (lado 1) hoje, com JS ......... data-skin removido por theme.js .... pinta (lado 2) depois do registro ... data-skin="smooth" mantido ........ pinta (lado 1) usuário escolhe vidro data-skin="glass" ................. não pinta O QUE ESTA PONTE CUSTA, dito por escrito porque é o preço dela: enquanto theme.js não conhecer "smooth", escolher "Padrão" no painel a partir de index5.html não devolve o chassi cru, e a pele não aparece no seletor de peles para ser escolhida a partir das outras quatro páginas. O §0.4b só fecha de verdade quando a entrada { value: 'smooth', ... } entrar em `SKINS` e o desta folha entrar nos outros quatro documentos. As duas coisas ficam fora do território deste agente e vão para o backlog. QUANDO REMOVER: no mesmo commit em que theme.js registrar a pele, o lado 2 sai e todo seletor volta a ser só [data-skin="smooth"]. A troca é mecânica, uma substituição de texto, e nada mais neste arquivo depende dela. Nota de especificidade, e ela é a mesma que a pele cult precisou anotar: o portão vale (0,2,0), então ele VENCE o `[data-theme="dark"]` (0,1,0) de 01-tokens.css. Por isso o bloco escuro desta folha redeclara TODOS os tokens que declara no claro, inclusive os que não mudariam: um token esquecido lá embaixo continuaria com o valor CLARO desta pele dentro do tema escuro, que é o defeito exato que o §12.4 registrou em --signal. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 1. Tokens da pele Tudo aqui é redefinição de token de 01-tokens.css no MESMO elemento raiz, então toda derivação por calc() daquele arquivo (--radius-sm..xl a partir de --radius, --space-1..16 a partir de --density, --fs-* a partir de --scale, --section-y a partir de --density) recalcula sozinha. Nenhum valor derivado é reescrito à mão. --scale NÃO é tocado: é o efetivo do §7.3 e as media queries de 1900/2400/3200px continuam mandando nele. Os tokens próprios da pele levam o prefixo --sm-. Eles são a ÚNICA fonte de cinza deste arquivo: nenhuma regra abaixo escreve um número de luminosidade solto, tudo consome var(--sm-...). É o mesmo contrato que 01-tokens.css tem com o resto do projeto, aplicado ao quintal da pele. -------------------------------------------------------------------------- */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) { /* --- tipografia: Geist nos dois eixos, peso MÉDIO --- smoothui.dev é uma grotesca de interface com numerais tabulares e terminais retos, e a leitura dele é de peso médio com tracking negativo leve no display. Geist é a família local que descreve isso (§2.4). A justificativa de usar o mesmo par de index3.html está no cabeçalho. */ --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* --- escala: corpo confortável, display grande mas nunca de capa --- Corpo em 16px cheios (a pele respira, então a linha pode ser maior que a de cult e surface). O h1 tem teto em 4.5rem, entre o editorial de index.html (5.25rem) e a máquina de index4.html (4rem). Nenhum px fixo, tudo multiplicado por var(--scale) como o §3 exige. */ --fs-mono: calc(0.6875rem * var(--scale)); --fs-xs: calc(0.75rem * var(--scale)); --fs-sm: calc(0.875rem * var(--scale)); --fs-base: calc(1rem * var(--scale)); --fs-lead: calc(clamp(1.0625rem, 0.97rem + 0.4vw, 1.3125rem) * var(--scale)); --fs-h3: calc(clamp(1.1875rem, 1.08rem + 0.5vw, 1.5rem) * var(--scale)); --fs-h2: calc(clamp(1.75rem, 1.3rem + 2vw, 3rem) * var(--scale)); --fs-h1: calc(clamp(2.3rem, 1.5rem + 3.6vw, 4.5rem) * var(--scale)); --fs-mega: calc(clamp(2.8rem, 1.6rem + 5.2vw, 7rem) * var(--scale)); /* --- ritmo: corpo alto, display fechado, mono discreto --- O mono desta pele volta a ser rótulo, não gravação: 0.09em, um passo acima do padrão e muito abaixo dos 0.12em da pele de metal. */ --lh-body: 1.68; --lh-display: 1.06; --lh-tight: 1.18; --tracking-display: -0.035em; --tracking-mono: 0.09em; --measure: 66ch; /* --- densidade e chassi: respiro grande (divergência 2 do cabeçalho) --- */ --density: 1.12; --section-y: calc(clamp(5rem, 3.2rem + 6.4vw, 9.5rem) * var(--density)); --gutter: clamp(1.5rem, 1rem + 2.4vw, 3.5rem); --container: 1200px; --container-wide: 1520px; --grid-min: 300px; --header-h: 4.75rem; /* --- forma: raio generoso (divergência 1 do cabeçalho) --- 1.25rem na raiz devolve 0.625 / 1.25 / 1.875 / 2.5rem nas derivadas de 01-tokens.css, ou seja, exatamente a faixa "1rem a 1.5rem" pedida para o cartão, com a moldura de mídia em 2.5rem. */ --radius: 1.25rem; /* --- profundidade: aqui a sombra é a linguagem, e ela vale nos DOIS modos. 01-tokens.css baixa --shadow-strength para 0.6 no escuro porque lá a elevação é cor mais borda; nesta pele o escuro é veludo e a peça precisa continuar destacando do campo, então a força volta a 1 no claro e fica em 0.9 no escuro (o valor escuro está no bloco do tema). --- */ --shadow-strength: 1; /* --- medidas próprias da pele --- */ --sm-wire-step: 92px; /* passo da grade de fio da dobra */ /* Período da trama diagonal do campo. 10px, e a primeira versão tinha 7: medido na captura de 1280x800 no escuro, com 7px a trama lia como tecido, não como papel, e competia com a grade de fio da dobra. */ --sm-hatch-step: 10px; --sm-hatch-o: 0.34; /* opacidade da trama; ver a nota acima */ --sm-lift: -3px; /* quanto uma peça sobe no hover */ --sm-lift-sm: -1px; /* quanto um botão sobe no hover */ --sm-press: 1px; /* quanto ele desce no press */ --sm-tab-pad: var(--space-1);/* folga do trilho de abas em volta da pílula */ /* --- a mola --- NOTES.md: "bounce baixo (0 a 0.1) domina; a linguagem smooth não é elástica, é assentamento rápido e discreto". Esta bezier tem cerca de 6% de ultrapassagem e volta sem oscilar, que é a transcrição de bounce 0.1 sem biblioteca nenhuma. Ela substitui --ease-out no escopo inteiro da pele, e é isso que dá "mola em tudo que mexe" de graça: revelação, hover, foco, acordeão e abas já consomem esse token. */ --ease-out: cubic-bezier(0.34, 1.28, 0.44, 1); --ease-io: cubic-bezier(0.62, 0.02, 0.28, 1); --dur-fast: 180ms; --dur-base: 440ms; --dur-slow: 780ms; /* --- paleta, tema claro: CAMPO MACIO, CARTÃO BRANCO --- Divergência 3 do cabeçalho. O campo sai de 0 0% 100% para 0 0% 97% e o cartão fica em 0 0% 100%: é esse degrau de três pontos, mais a pilha de sombra do bloco 3, que faz a peça flutuar. Em branco absoluto o cartão branco desaparece e sobra a borda, que é exatamente a linguagem que esta pele não usa. O preço foi pago na mesma regra, como o §12 exige. Medido por luminância relativa real (WCAG), matiz 0, saturação 0%, contra TODAS as superfícies que a pele declara (campo 97, cartão 100, elevação 98 e 95, secundária 93, mudo 94, acento 91): --muted-foreground 0 0% 39% campo 97 .... 5,59:1 cartão 100 .. 5,97:1 elev 98 ... 5,71:1 elev 95 ..... 5,34:1 sec 93 ...... 5,10:1 mudo 94 ... 5,22:1 acento 91 ... 4,87:1 (pior caso, e ele é fundo de hover) --faint-foreground 0 0% 33% campo 97 .... 7,07:1 cartão 100 .. 7,55:1 acento 91 . 6,17:1 --foreground 0 0% 9% campo 97 .... 16,79:1 cartão 100 .. 17,94:1 acento 91 . 14,65:1 --input 0 0% 52% (borda de componente interativo, piso 3:1 do §8) campo 97 .... 3,47:1 cartão 100 .. 3,71:1 elev 98 ... 3,55:1 elev 95 ..... 3,32:1 acento 91 ... 3,03:1 (pior caso) --ring 0 0% 30% campo 97 .... 7,98:1 cartão 100 .. 8,52:1 Todos acima do piso de 4,5:1 de texto de corpo (e de 3:1 de borda de componente) do §8, sem precisar alegar tamanho de fonte em consumidor nenhum, que é o critério do §2.5. */ --background: 0 0% 97%; --foreground: 0 0% 9%; --card: 0 0% 100%; --card-foreground: 0 0% 9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 9%; --primary: 0 0% 10%; --primary-foreground: 0 0% 99%; --secondary: 0 0% 93%; --secondary-foreground: 0 0% 10%; --muted: 0 0% 94%; --muted-foreground: 0 0% 39%; --accent: 0 0% 91%; --accent-foreground: 0 0% 10%; --destructive: 0 72% 45%; --destructive-foreground: 0 0% 99%; /* Divisor SUSSURRADO, e isso é decisão de identidade, não descuido: mede 1,20:1 contra o campo. Onde as outras peles separam com filete, esta separa com degrau de luz (bloco 3). A borda existe para dar aresta ao cartão branco sobre o campo branco-quente, não para desenhar a grade. */ --border: 0 0% 88%; --input: 0 0% 52%; --ring: 0 0% 30%; --surface-1: 0 0% 100%; --surface-2: 0 0% 98%; --surface-3: 0 0% 95%; --faint: var(--background); --faint-foreground: 0 0% 33%; /* O ÚNICO TOKEN CROMÁTICO DO SITE VIRA O ACENTO DA PELE. HERO-OBRIGATORIO.md, ponto 3: "na captura é o rosa; aqui é o acento da pele smooth, definido na folha, discreto e legível, AA". --signal é exatamente o campo do projeto para isso: um token, uso pontual, abaixo de 3% da tela. O rosa do smoothui é hsl(330 81% 60%), que como TINTA sobre o campo claro mede 2,4:1 e reprovaria; fechado para 335 72% 42% ele mede, medido por luminância relativa real: campo 97 ...... 5,80:1 cartão 100 .... 6,19:1 elev 95 ....... 5,54:1 acento 91 ..... 5,06:1 --signal-foreground 0 0% 99% sobre ele ... 6,06:1 Os cinco acima do piso de 4,5:1, então ele serve como tinta de glifo e como preenchimento com texto por cima. */ /* 13ª rodada, pedido do dono: o rosa saiu do padrão de fábrica. Entra um aço escuro dessaturado, alinhado ao preto e branco enterprise do site. Medido: glifo sobre fundo 97% ... 6,74:1; branco 99% sobre ele ... 7,05:1. O rosa continua acessível pelo controle Cor de destaque do estúdio. */ --signal: 215 22% 36%; --signal-foreground: 0 0% 99%; /* --- cinzas próprios da pele, tema claro --- --sm-shade a tinta de TODA sombra desta folha. Cinza, não preto: preto puro em sombra difusa larga vira fuligem no campo claro. --sm-glow a luz do campo e o brilho de topo das peças. --sm-wire o fio da grade do campo. Um degrau abaixo de --border. --sm-sheen o gradiente de topo do cartão (luz caindo de cima). --sm-emboss-hi / -lo o par de relevo do numeral e do wordmark. */ --sm-shade: 0 0% 44%; --sm-glow: 0 0% 100%; --sm-wire: 0 0% 91%; --sm-sheen: 0 0% 100%; --sm-emboss-hi: 0 0% 100%; --sm-emboss-lo: 0 0% 52%; /* --- alfas da pilha de sombra, tema claro --- Três camadas por elevação, e as três com o mesmo raciocínio: contato (curta e quase opaca), corpo (média) e ambiente (larga e quase nula). É essa terceira que dá o "difuso" da linguagem; sozinha ela some, e sozinha a primeira vira caixa. */ --sm-a-contato: 0.05; --sm-a-corpo: 0.07; --sm-a-ambiente: 0.09; --sm-sheen-a: 0.9; --sm-emboss-hi-a: 0.9; --sm-emboss-lo-a: 0.18; --sm-glow-a: 0.62; } /* -------------------------------------------------------------------------- 1b. Tema escuro: VELUDO, nunca preto chapado. O portão vale (0,2,0) e vence o [data-theme="dark"] (0,1,0) de 01-tokens.css, então este bloco redeclara TODOS os tokens de cor do bloco acima, inclusive os que "não mudariam": um token esquecido aqui ficaria com o valor claro desta pele dentro do tema escuro. É o defeito que o §12.4 já registrou para --signal na pele de metal. O campo sobe de 0 0% 4% para 0 0% 7% e o cartão para 0 0% 11%. O motivo é o mesmo do claro, invertido: em preto absoluto uma sombra difusa não tem para onde escurecer, então a peça só existiria pela borda, que é a linguagem que esta pele não usa. Com 7% de campo e 11% de peça, o degrau de luz volta a fazer o trabalho e a sombra vira o assento da peça. Preço pago na mesma regra, medido por luminância relativa real (WCAG), contra todas as superfícies desta pele (campo 7, cartão 11, elevação 14 e 17, secundária 16, mudo 13, acento 20): --muted-foreground 0 0% 68% campo 7 ..... 8,40:1 cartão 11 ... 7,62:1 elev 14 .... 6,97:1 elev 17 ..... 6,29:1 sec 16 ...... 6,51:1 acento 20 .. 5,66:1 --faint-foreground 0 0% 70% campo 7 ..... 8,90:1 cartão 11 ... 8,08:1 acento 20 .. 5,99:1 --foreground 0 0% 97% campo 7 ..... 17,56:1 cartão 11 ... 15,95:1 acento 20 .. 11,83:1 --input 0 0% 50% (piso 3:1 do §8) campo 7 ..... 4,72:1 cartão 11 ... 4,28:1 elev 14 .... 3,92:1 elev 17 ..... 3,54:1 acento 20 ... 3,18:1 (pior caso) --ring 0 0% 74% campo 7 ..... 9,95:1 cartão 11 ... 9,04:1 Note que --faint-foreground (70%) fica um passo MAIS TINTA que --muted-foreground (68%), exatamente como o §2.5 registrou para o chassi (66 contra 63): em paleta neutra não existe tinta AA mais fraca que a subordinada, e a subordinação vem de tamanho, peso, caixa alta e espaço. -------------------------------------------------------------------------- */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin]))[data-theme="dark"] { --background: 0 0% 7%; --foreground: 0 0% 97%; --card: 0 0% 11%; --card-foreground: 0 0% 97%; --popover: 0 0% 13%; --popover-foreground: 0 0% 97%; --primary: 0 0% 97%; --primary-foreground: 0 0% 8%; --secondary: 0 0% 16%; --secondary-foreground: 0 0% 96%; --muted: 0 0% 13%; --muted-foreground: 0 0% 68%; --accent: 0 0% 20%; --accent-foreground: 0 0% 97%; --destructive: 0 62% 47%; --destructive-foreground: 0 0% 98%; --border: 0 0% 20%; --input: 0 0% 50%; --ring: 0 0% 74%; --surface-1: 0 0% 11%; --surface-2: 0 0% 14%; --surface-3: 0 0% 17%; --faint: var(--background); --faint-foreground: 0 0% 70%; /* Mesmo rosa, aberto para o veludo. Medido: campo 7 ...... 7,46:1 cartão 11 ..... 6,77:1 elev 17 ...... 5,41:1 acento 20 ..... 5,02:1 --signal-foreground 0 0% 8% sobre ele .... 7,30:1 */ /* Mesmo aço, aberto para o tema escuro. Medido: glifo sobre fundo 7% ... 9,67:1; tinta 8% sobre ele ... 9,46:1. */ --signal: 215 16% 74%; --signal-foreground: 0 0% 8%; --scrim: 0 0% 2%; /* No escuro a sombra continua existindo, um pouco mais fraca porque o campo já é escuro e a peça também sobe por cor. 0.9, não 0.6: em 0.6 a peça encostava no campo e a linguagem virava borda de novo. */ --shadow-strength: 0.9; /* Cinzas próprios da pele, escuro. A sombra vira preto real (no veludo não há fuligem a evitar) e a luz vira branco de alfa baixíssimo. */ --sm-shade: 0 0% 0%; --sm-glow: 0 0% 100%; --sm-wire: 0 0% 13%; --sm-sheen: 0 0% 100%; --sm-emboss-hi: 0 0% 100%; --sm-emboss-lo: 0 0% 0%; --sm-a-contato: 0.32; --sm-a-corpo: 0.36; --sm-a-ambiente: 0.42; --sm-sheen-a: 0.05; --sm-emboss-hi-a: 0.1; --sm-emboss-lo-a: 0.55; --sm-glow-a: 0.05; --pattern-boost: 1; } /* -------------------------------------------------------------------------- 2. O campo: luminosidade e grade de fio HERO-OBRIGATORIO.md, ponto 1: "campo claro macio (no escuro: veludo profundo) com GRADE DE FIO sutilíssima (hairline ~1px, passo largo ~90px, tinta quase imperceptível), exatamente como a captura. Sem halo, sem aurora, sem vídeo de fundo." Duas camadas, e cada uma no seu dono: html o campo de luminosidade. background-attachment: fixed, então ele não rola: é ambiente, não conteúdo. Dois gradientes radiais muito abertos, um vindo de cima e outro de baixo, na tinta --sm-glow. Isso é o "gradiente sutil de luminosidade" da linguagem; nenhuma matiz entra aqui. body::before a trama diagonal do papel. É o MESMO pseudo-elemento que 02-base.css usa para --pattern, e é de propósito: a textura desta pele SUBSTITUI o padrão de fábrica, não soma com ele. .hero::before a GRADE DE FIO do decreto, e ela mora no bloco 7. POR QUE A GRADE NÃO É GLOBAL, e este é o erro que a primeira versão desta folha cometeu: a grade do decreto tem passo largo (92px) e precisa DESCER E SUMIR antes do fim da dobra, como na captura. Uma grade global viveria em body::before, que é position: fixed, ou seja, ela não rolaria e a queda teria que ser desenhada em coordenadas de VIEWPORT, virando uma sombra permanente na base da tela. E com as duas camadas acesas ao mesmo tempo, uma presa ao viewport e a outra à caixa do hero, as linhas nunca coincidem: o resultado é linha dupla e moiré, que é exatamente a sujeira que a 12a rodada registrou na pele de metal com o nome de "duas grades empilhadas". A textura global fica, então, com geometria DIFERENTE da grade: hachura a 45 graus com período de 7px, que é o que a home do smoothui mostra nas margens da página. Ângulo diferente e período treze vezes menor não batem com a grade ortogonal de 92px em frequência nenhuma, então não há moiré, e as duas leem como a mesma família de textura. A CESSÃO AO PADRÃO DO USUÁRIO tinha, até esta rodada, uma diferença silenciosa contra surface e cult, e ela é o DEFEITO corrigido agora: a camada .nx-pattern do estúdio (§12.3) só pintava depois que o dono escolhia um padrão no painel, porque só então theme.js escrevia data-pattern-user, e só então esta folha "liberava" a camada. Só que o padrão de fábrica de --pattern é "grid" (01-tokens.css), e theme.js NUNCA grava o atributo para o valor de fábrica (§11, estado limpo: só entra inline o que DIFERE do padrão). Ou seja: nesta pele, a grade prometida pelo §12.3 nunca pintava um pixel sem o dono ir ao painel, trocar para outro valor e voltar — a leitura de fábrica ficava sempre sem padrão de fundo, ao contrário de glass e surface, onde a camada já nasce visível (07-studio.css §19.1). CORREÇÃO: 07-studio.css §19.1 passou a incluir [data-skin="smooth"] na mesma regra que já força `.nx-pattern { display: block }` para glass e surface, no mesmo teto de 70% de intensidade. A camada do estúdio agora nasce visível nesta pele também, com o valor de fábrica ("grid") incluso, e não depende mais de data-pattern-user para existir. O que ESTA folha ainda decide, e continua sendo cessão de verdade: a HACHURA PRÓPRIA do campo (body::before, acima) não é um valor do catálogo de --pattern, então ela e a camada do estúdio somariam sempre que as duas estivessem acesas ao mesmo tempo. Sem escolha do dono as duas convivem (hachura embaixo, grade do estúdio a 70% por cima, a mesma dosagem que glass e surface já usam para a camada por cima do ambiente próprio delas). Quando o dono ESCOLHE outro padrão no painel, data-pattern-user aparece e esta folha apaga a própria hachura (regra abaixo): o padrão do usuário passa a ser a única textura do campo, e as duas grades nunca se sobrepõem. Nota de mecanismo, e ela é a armadilha que o §12.3 registrou: esta folha NÃO declara --pattern em lugar nenhum. Declarar levaria ao caso de 08-skin-surface.css, em que escolher "Grade" no painel apaga o inline (porque grid é o padrão de fábrica), devolve a palavra à folha da pele e nada acontece. Aqui a grade é desenho fixo do campo, não um valor de --pattern, então nenhum valor do painel coincide com nada e os seis pintam. -------------------------------------------------------------------------- */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) { background-color: hsl(var(--background)); background-image: radial-gradient(126% 62% at 50% -12%, hsl(var(--sm-glow) / var(--sm-glow-a)), transparent 64%), radial-gradient(86% 46% at 50% 112%, hsl(var(--sm-glow) / calc(var(--sm-glow-a) * 0.55)), transparent 68%); background-attachment: fixed; background-repeat: no-repeat; } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) body::before { background-image: repeating-linear-gradient( 45deg, hsl(var(--sm-wire)) 0 var(--hairline), transparent var(--hairline) var(--sm-hatch-step) ); background-size: auto; background-repeat: repeat; background-position: center; opacity: var(--sm-hatch-o); mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; animation-name: none; } /* Padrão escolhido pelo dono: a pele cede o campo inteiro. */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin]))[data-pattern-user] body::before { background-image: none; } /* A visibilidade de .nx-pattern por padrão é resolvida em 07-studio.css §19.1 (a mesma regra que já cobre glass e surface); esta folha não liga nem desliga display aqui, e é de propósito: um display: none local, mais específico e carregado depois, é exatamente o que apagava a camada antes desta correção (ver o bloco de comentário acima). O que falta só a esta pele é a IDENTIDADE. A grade de fábrica (--pat-grid-image, 01-tokens.css) é hairline na cor de --border — a pele fala grosso "sombra, não borda" (bloco 0 desta folha) e herdar essa linha crua seria exatamente o filete que a pele inteira evita. multiply funde a linha DENTRO do campo claro, como sombreamento e não como traço flutuando por cima; no escuro multiply só escureceria um campo já quase preto até a linha sumir, então a troca é screen, que clareia em vez de escurecer e produz a mesma leitura de "sombra suave" com o sinal invertido. Nenhuma cor nova: os dois são modos de composição, não tinta, e o pacote --pattern-* continua vindo inteiro do estúdio. */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .nx-pattern { mix-blend-mode: multiply; } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin]))[data-theme="dark"] .nx-pattern { mix-blend-mode: screen; } /* -------------------------------------------------------------------------- 3. Sombra em camadas: a linguagem inteira em quatro variáveis O §5 do contrato define --shadow-sm/md/lg como uma camada só cada, com a tinta em --foreground, e manda o escuro resolver elevação por cor e borda. Esta pele redefine as três, e a redefinição É a identidade: três camadas por elevação, com a tinta em --sm-shade (cinza no claro, preto no escuro), e o multiplicador --shadow-strength preservado em cada alfa, de modo que o controle do estúdio continua funcionando e --shadow-strength: 0 continua apagando tudo. Com a sombra em zero a página desta pele continua legível e hierarquizada: sobram o degrau de superfície (97 contra 100 no claro, 7 contra 11 no escuro), a borda sussurrada e o respiro, que é o que o §5 pede como prova. As três camadas, sempre nesta ordem: contato deslocamento de 1 a 2px, desfoque curto. Dá a aresta. corpo deslocamento médio, desfoque médio, spread negativo. Dá o peso. ambiente deslocamento grande, desfoque muito largo, spread bem negativo. É a que faz a peça "flutuar" em vez de "ter uma sombra". --sm-shadow-float é a quarta, e ela não substitui --shadow-lg: é a placa flutuante de #contato e do cartão em hover, com uma camada a mais. -------------------------------------------------------------------------- */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) { --shadow-sm: 0 1px 2px hsl(var(--sm-shade) / calc(var(--sm-a-contato) * var(--shadow-strength))), 0 1px 3px -1px hsl(var(--sm-shade) / calc(var(--sm-a-corpo) * var(--shadow-strength))); --shadow-md: 0 1px 2px hsl(var(--sm-shade) / calc(var(--sm-a-contato) * var(--shadow-strength))), 0 6px 14px -6px hsl(var(--sm-shade) / calc(var(--sm-a-corpo) * var(--shadow-strength))), 0 20px 40px -20px hsl(var(--sm-shade) / calc(var(--sm-a-ambiente) * var(--shadow-strength))); --shadow-lg: 0 2px 4px hsl(var(--sm-shade) / calc(var(--sm-a-contato) * var(--shadow-strength))), 0 14px 30px -12px hsl(var(--sm-shade) / calc(var(--sm-a-corpo) * var(--shadow-strength))), 0 44px 80px -36px hsl(var(--sm-shade) / calc(var(--sm-a-ambiente) * var(--shadow-strength))); --sm-shadow-float: 0 2px 6px hsl(var(--sm-shade) / calc(var(--sm-a-contato) * var(--shadow-strength))), 0 18px 36px -14px hsl(var(--sm-shade) / calc(var(--sm-a-corpo) * var(--shadow-strength))), 0 48px 90px -32px hsl(var(--sm-shade) / calc(var(--sm-a-ambiente) * var(--shadow-strength))), 0 96px 150px -60px hsl(var(--sm-shade) / calc(var(--sm-a-ambiente) * var(--shadow-strength))); /* Brilho de topo, aplicado por dentro (inset) em toda peça clara: é a luz do campo batendo na aresta de cima. No escuro o mesmo inset com alfa baixíssimo é o que impede o veludo de virar retângulo chapado. */ --sm-inset-top: inset 0 var(--hairline) 0 hsl(var(--sm-sheen) / var(--sm-sheen-a)); } /* -------------------------------------------------------------------------- 4. Botão em pílula com mola (smooth-button) docs/smooth-ref/smooth-button.png mostra o lote inteiro: cápsula ou raio grande, preenchimento chapado, sombra curta embaixo, e o press afundando. NOTES.md: "spring bounce 0.1, duration 0.25" e "whileTap dá o feedback de press". Aqui isso vira: --radius-full, a mola de --ease-out, translateY de 1px no hover e de 1px para baixo no press, e a "sombra difusa dupla embaixo" que HERO-OBRIGATORIO.md pede por escrito no ponto 5. O que NÃO muda: as cores continuam sendo --primary / --primary-foreground e --input, ou seja, o par de contraste mais alto do projeto (17,1:1 nos dois modos) e a borda de 3:1. Nenhuma regra daqui mexe em tinta. -------------------------------------------------------------------------- */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .btn { border-radius: var(--radius-full); font-family: var(--font-body); font-weight: 550; letter-spacing: -0.005em; transition: background-color calc(var(--dur-fast) * var(--motion)) var(--ease-out), border-color calc(var(--dur-fast) * var(--motion)) var(--ease-out), color calc(var(--dur-fast) * var(--motion)) var(--ease-out), box-shadow calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out); } /* CORREÇÃO 2026-08-05 (varredura de controles × pele, aba Botões): mesmo defeito medido em 09-skin-cult.css, aqui com a pílula no lugar da chapa. :is(...) .btn (0,3,0) sempre vencia o portão html[data-nx-btn] .btn de 07-studio.css (0,2,1): o controle "Raio do botão" marcava no painel e o botão continuava pílula (--radius-full) em qualquer valor. Correção na mesma forma da de cult: um seletor com portão MAIS pele no paga o degrau de especificidade que falta e só existe quando o dono mexeu no raio; a pílula de fábrica (a assinatura "botão em pílula com mola" do §12.5) continua intacta enquanto o portão não acender. */ html[data-nx-btn][data-skin="smooth"] .btn, html[data-nx-btn][data-skin-base="smooth"]:not([data-skin]) .btn { border-radius: var(--nx-btn-radius); } /* A "sombra difusa dupla embaixo" do ponto 5 do decreto: duas camadas, uma de contato e uma de ambiente, mais o fio de luz interno no topo. */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .btn--primary { box-shadow: var(--sm-inset-top), 0 1px 2px hsl(var(--sm-shade) / calc(var(--sm-a-contato) * var(--shadow-strength))), 0 8px 18px -8px hsl(var(--sm-shade) / calc(var(--sm-a-ambiente) * var(--shadow-strength))); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .btn--primary:hover { transform: translateY(var(--sm-lift-sm)); box-shadow: var(--sm-inset-top), 0 2px 4px hsl(var(--sm-shade) / calc(var(--sm-a-contato) * var(--shadow-strength))), 0 14px 28px -10px hsl(var(--sm-shade) / calc(var(--sm-a-ambiente) * var(--shadow-strength))); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .btn--primary:active { transform: translateY(var(--sm-press)); box-shadow: 0 1px 1px hsl(var(--sm-shade) / calc(var(--sm-a-contato) * var(--shadow-strength))); } /* O ghost de borda fina do ponto 5. No claro ele é uma peça BRANCA sobre o campo de 97%, que é literalmente o "Get Started" da captura header-1: a borda existe (--input, 3,71:1 sobre o próprio preenchimento), mas quem o separa do campo é o degrau de luz. */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .btn--outline { background-color: hsl(var(--card)); border-color: hsl(var(--input)); box-shadow: var(--sm-inset-top), var(--shadow-sm); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .btn--outline:hover { background-color: hsl(var(--surface-2)); border-color: hsl(var(--ring)); box-shadow: var(--sm-inset-top), var(--shadow-md); transform: translateY(var(--sm-lift-sm)); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .btn--outline:active { transform: translateY(var(--sm-press)); box-shadow: 0 1px 1px hsl(var(--sm-shade) / calc(var(--sm-a-contato) * var(--shadow-strength))); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .btn--secondary { background-color: hsl(var(--secondary)); border-color: transparent; box-shadow: var(--sm-inset-top), var(--shadow-sm); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .btn--secondary:hover { transform: translateY(var(--sm-lift-sm)); box-shadow: var(--sm-inset-top), var(--shadow-md); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .btn--ghost:hover { transform: translateY(var(--sm-lift-sm)); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .btn--lg { padding-inline: var(--space-8); } /* A seta do CTA primário desliza com a mesma mola do botão. */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .btn__arrow { transition: transform calc(var(--dur-base) * var(--motion)) var(--ease-out); } /* -------------------------------------------------------------------------- 5. Cartão macio, moldura de mídia e superfícies gerais product-card e expandable-cards do smoothui: peça branca, raio grande, sombra em camadas, gradiente de topo quase invisível, e elevação no hover. Aqui o cartão é o mesmo .card de 03-ui.css, só que a hierarquia sai da borda e vai para a sombra. O LEVANTAR NO HOVER É SÓ DE QUEM É CLICÁVEL. Cartão de leitura que se mexe quando o ponteiro passa por perto é ruído, não afeto: a lista abaixo é exatamente a dos cartões que embrulham um link ou um botão. -------------------------------------------------------------------------- */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .card { border-radius: var(--radius-lg); border-color: hsl(var(--border)); background-color: hsl(var(--card)); background-image: linear-gradient( to bottom, hsl(var(--sm-sheen) / calc(var(--sm-sheen-a) * 0.5)), transparent 46% ); box-shadow: var(--sm-inset-top), var(--shadow-md); transition: border-color calc(var(--dur-fast) * var(--motion)) var(--ease-out), box-shadow calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .card__header { padding: var(--space-7) var(--space-7) 0; } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .card__body { padding-inline: var(--space-7); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .card__footer { padding: 0 var(--space-7) var(--space-7); } /* CORREÇÃO 2026-08-05 (varredura de controles × pele, adendo fx-peles-2): este bloco resetava border-color E box-shadow INCONDICIONALMENTE no hover, com especificidade (0,4,0) — mais alta que qualquer regra de hover do catálogo em core/fx.js ([data-fx-hover~="elevar"]:hover, [data-fx-hover~="borda"]:hover, ambas por volta de (0,2,0)/(0,3,0)). Resultado: hover-elevar (que quer border-color: hsl(var(--input)) no hover) e hover-borda (que quer border-color: hsl(var(--ring)) mais um anel em box-shadow) nunca apareciam nesta pele — a pele sempre vencia e devolvia a borda ao valor de repouso, apagando os dois efeitos. A composição, sem tocar em fx.js: o border-color saiu daqui de vez — ele era idêntico ao de repouso (.card já declara border-color: hsl(var(--border)) lá em cima), então removê-lo não muda nada quando nenhum efeito está ligado, e deixa de brigar com hover-elevar/hover-borda quando estão. O box-shadow da identidade (sombra em camadas) passa a ceder especificamente quando o hook data-fx-hover~="borda" está no elemento — o MESMO atributo que fx.js escreve (core/fx.js:1181) — para o anel do efeito pintar; nos demais casos (efeito desligado, ou hover-elevar, que não mexe em box-shadow) a identidade "sombra, não borda" continua intacta. */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .card--interactive:hover, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .card--interactive:focus-visible, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .portfolio__card:hover, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .portfolio__card:focus-within, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .contratacao__item:hover, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .contratacao__item:focus-within { transform: translateY(var(--sm-lift)); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .card--interactive:not([data-fx-hover~="borda"]):hover, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .card--interactive:not([data-fx-hover~="borda"]):focus-visible, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .portfolio__card:not([data-fx-hover~="borda"]):hover, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .portfolio__card:not([data-fx-hover~="borda"]):focus-within, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .contratacao__item:not([data-fx-hover~="borda"]):hover, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .contratacao__item:not([data-fx-hover~="borda"]):focus-within { box-shadow: var(--sm-inset-top), var(--shadow-lg); } /* SEGUNDA CAMADA DA MESMA CORREÇÃO, medida com hover real (Playwright .hover(), não só leitura de computed style): tirar o bloco acima do caminho não bastava, porque o `.card` de REPOUSO (linha ~868, sem :hover no seletor) já declara border-color: hsl(var(--border)) e box-shadow: var(--sm-inset-top), var(--shadow-md) com especificidade (0,3,0) — mais alta que QUALQUER regra de :hover do catálogo em core/fx.js (por volta de (0,2,0), atributo + pseudo-classe), porque :is(...) já soma (0,2,0) sozinho e a classe some mais um. Uma regra de especificidade mais baixa não vence uma mais alta só por vir depois no arquivo nem só por ter :hover — especificidade não compara "quem tem mais pseudo-classe", compara o vetor inteiro, e o `.card` de repouso ganha dos dois efeitos em QUALQUER estado, hover incluído. A composição de verdade precisa iguldade: um seletor com a MESMA classe do card MAIS o hook do efeito MAIS :hover, pagando o degrau que faltava — e só existindo enquanto os dois (:hover E o hook) estiverem lá, nunca em repouso, onde a identidade da pele continua sozinha. */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .card--interactive[data-fx-hover~="elevar"]:hover, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .card--interactive[data-fx-hover~="elevar"]:focus-within, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .portfolio__card[data-fx-hover~="elevar"]:hover, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .portfolio__card[data-fx-hover~="elevar"]:focus-within, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .contratacao__item[data-fx-hover~="elevar"]:hover, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .contratacao__item[data-fx-hover~="elevar"]:focus-within { border-color: hsl(var(--input)); } /* Mesma composição para hover-borda: --sm-inset-top (o fio de luz do topo, a identidade "sombra, não borda" do §12.5) continua na camada de baixo do box-shadow; o anel do efeito soma por cima, no raio e intensidade que o próprio catálogo publica como custom property (--nx-fx-anel, --nx-fx-int, escritas por fx.js em core/fx.js:1184) — os fallbacks (1px, .45) são os MESMOS que a regra de fx.js usa quando o dono não abre os parâmetros finos do efeito, então o anel sai idêntico ao de qualquer outra pele sem identidade de cartão própria. */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .card--interactive[data-fx-hover~="borda"]:hover, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .card--interactive[data-fx-hover~="borda"]:focus-within, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .portfolio__card[data-fx-hover~="borda"]:hover, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .portfolio__card[data-fx-hover~="borda"]:focus-within, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .contratacao__item[data-fx-hover~="borda"]:hover, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .contratacao__item[data-fx-hover~="borda"]:focus-within { border-color: hsl(var(--ring)); box-shadow: var(--sm-inset-top), 0 0 0 var(--nx-fx-anel, 1px) hsl(var(--ring) / var(--nx-fx-int, .45)); } /* Moldura de mídia: raio máximo da pele e a mesma pilha de sombra. A máscara de véu de 04-sections.css continua intacta, porque é ela que segura o contraste de qualquer texto posto por cima (§8). */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .media-frame { border-radius: var(--radius-xl); border-color: hsl(var(--border)); box-shadow: var(--sm-inset-top), var(--shadow-lg); } /* Faixa de seção: no lugar do bloco de superfície com alfa, um degrau de luminosidade opaco com aresta arredondada de topo, como as faixas do smoothui. Opaco de propósito: alfa sobre o campo com gradiente daria uma cor diferente em cada altura da página. */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .section--band { background-color: hsl(var(--surface-1)); } /* O divisor de seção perde a linha luminosa e vira um fio quase mudo: nesta pele o que separa duas seções é o respiro, não o traço. */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .section-divider { opacity: 0.6; } /* Rótulo de seção: o traço de --primary vira uma bolinha de acento, que é o pill "Open source & free" do rodapé do smoothui reduzido ao mínimo. É pintura de fundo, nunca tinta de glifo. */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .eyebrow { gap: var(--space-3); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .eyebrow::before { inline-size: var(--space-2); block-size: var(--space-2); border-radius: var(--radius-full); background-color: hsl(var(--signal)); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .badge { border-radius: var(--radius-full); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .chip { --chip-radius: var(--radius-full); } /* -------------------------------------------------------------------------- 6. Cabeçalho: barra limpa, sem cápsula HERO-OBRIGATORIO.md, ponto 2: "a barra fica limpa, logo à esquerda, links centrados, sem cápsula (a pele cede a cápsula NESTA pele)". A home do smoothui tem a cápsula; o bloco header-1, que é o blueprint, não tem. O decreto escolhe o header-1, então a cápsula não entra. Centrar os links sem tocar no partial: .header__bar é flex com space-between (marca, nav, ações). Uma grade de três colunas com a do meio em auto e as laterais em 1fr põe o nav no centro ÓPTICO da barra, e não no meio do espaço que sobra, que é o que o space-between dava. Abaixo de 880px .header__nav é display:none (sections/header.css) e a grade volta a ser flex, senão a coluna do meio abriria um vão vazio. O sublinhado que cresce vira uma pílula de fundo que aparece no hover: é o gesto do smoothui e continua sendo pintura de fundo mais tinta, sem alfa em color. -------------------------------------------------------------------------- */ :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .header--scrolled, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .header--menu-open { background-color: hsl(var(--background) / 0.94); border-block-end-color: transparent; box-shadow: 0 1px 0 hsl(var(--border)), var(--shadow-md); } @media (min-width: 55rem) { :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .header__nav { justify-self: center; } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .header__actions { justify-self: end; } } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .header__nav-list { gap: var(--space-1); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .header__nav-link { padding-inline: var(--space-4); padding-block: var(--space-2); border-radius: var(--radius-full); font-weight: 500; transition: background-color calc(var(--dur-fast) * var(--motion)) var(--ease-out), color calc(var(--dur-fast) * var(--motion)) var(--ease-out); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .header__nav-link::after { content: none; } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .header__nav-link:hover, :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .header__nav-link:focus-visible { background-color: hsl(var(--surface-3)); color: hsl(var(--foreground)); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .header__toggle { border-radius: var(--radius-full); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .header__menu { border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-lg); } :is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) .header__menu-link { border-radius: var(--radius-md); } /* -------------------------------------------------------------------------- 7. A DOBRA: o bloco header-1, por decreto docs/smooth-ref/HERO-OBRIGATORIO.md, ponto a ponto: 1. FUNDO. A grade de fio mora AQUI, e só aqui: ela é absoluta na caixa do hero, tem passo largo (--sm-wire-step, 92px) e desce até sumir antes do fim da seção, exatamente como na captura, em que a grade pertence ao bloco do cabeçalho e não à página inteira. A razão de ela não ser global está escrita no bloco 2. E o halo de sections/hero.css é DESLIGADO, porque o ponto 1 do decreto diz "sem halo, sem aurora, sem vídeo de fundo": o pseudo-elemento continua existindo, mas o que ele desenha agora é a grade, não a luz. 2. NAVEGAÇÃO: bloco 6. 3. TÍTULO: uma massa centrada, com a última linha em --signal. O partial já entrega .hero__line--accent na última linha (partials/hero.js), e o conteúdo já é "Produtos digitais que conquistam." / "Sistemas que sustentam." (content.js), então nada precisa ser reescrito: a pele só troca a tinta e o peso. 4. LEAD: centrado, mudo, medida curta (~52ch). 5. CTAs: bloco 4. 6. MÍDIA: display: none no palco. O conteúdo CONTINUA no DOM, o