/* ========================================================================== NEXUS theme-final / assets/css/09-skin-cult.css QUARTA pele do projeto. Território exclusivo deste arquivo: só CSS. Ativada por [data-skin="cult"] 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 por [data-skin="cult"]: as quatro peles coexistem no mesmo documento e o atributo decide qual vale. IDENTIDADE: METAL E MÁQUINA A marca NEXUS é um X metálico. Esta pele leva o site inteiro para esse mundo: alumínio escovado, biséis de aresta, feixes de luz percorrendo bordas, ruído fino, molduras de instrumento, placa de identificação no rodapé. Neutra por construção, escura por vocação, com o modo claro resolvido como alumínio claro e não como branco chapado. DE ONDE ELA VEM Padrões do cult-ui (https://www.cult-ui.com), lidos das notas e das capturas em docs/cult-ref/ e PORTADOS para CSS puro deste projeto. Os componentes de lá são React com framer-motion, WebGL e canvas; aqui cada padrão vira uma receita declarativa que consome os tokens de 01-tokens.css e a estrutura que os partials já entregam. padrão do cult-ui onde ele encaixou aqui ----------------------- -------------------------------------------- metal-button .btn--primary, .btn--outline, .btn--secondary border-beam-button .contato__cta e .portfolio__card--resumo gradient-button-group .segmented e .hero__ctas cutout-card .case-block (recorte de canto e rebites) shift-card .portfolio__card (camadas deslizam no hover) mock-browser-window .media-frame das seções com produto texture-overlay ruído fino em html, faixas e painéis bg-image-texture alumínio escovado nas superfícies grandes grid-beam grade técnica do hero com feixe percorrendo text-animate máscara de entrada nos títulos e no hero O QUE NÃO FOI PORTADO, E POR QUÊ metal-button de lá é uma camada WebGL com um renderer compartilhado por página e reflexo mútuo entre componentes. Aqui o metal é gradiente de LUMINOSIDADE sobre os tokens, com bisel por aresta e estado pressionado que inverte o bisel. Nada de matiz, nada de canvas, nada de rede. grid-beam de lá desenha em canvas, frame a frame, um brilho que vira esquina nos cruzamentos da grade. Loop em canvas é custo contínuo e o §6 prende efeito contínuo a transform e opacity: aqui o feixe é uma faixa fina translada por transform ao longo de uma linha da grade, e a grade em si é o padrão que o projeto já tem. AS QUATRO PROPOSTAS, LADO A LADO index.html editorial denso. Bricolage Grotesque sobre Manrope, dobra empilhada e centrada, halo radial, raio 12px. index2.html arejado e luminoso. Funnel Display sobre Geist, tudo centralizado, raio 24px, vidro. index3.html ferramenta. Geist em tudo, dobra em duas colunas com a copy à esquerda, raio 8px, matriz de células contíguas. index4.html MÁQUINA. Geist display de peso alto sobre Manrope, raio 5px, dobra em duas colunas com a TELA à esquerda e o painel de leitura à direita, campo de alumínio escovado com ruído, bisel em toda aresta, feixe de luz no CTA e no destaque, e o rodapé como placa de identificação de equipamento. REGRAS DURAS RESPEITADAS Zero hexadecimal (toda cor é hsl de token, os tokens da pele estão todos declarados no bloco 1 deste arquivo). Nenhuma cor derivada de matiz por calc(). Nenhum alfa em propriedade `color`, nunca; alfa aparece só em pintura de fundo, borda e sombra. --border jamais é tinta de glifo; tinta subordinada é --faint-foreground (§2.5). Só transform e opacity animam em efeito contínuo; máscara e clip-path aparecem apenas em transição pontual de entrada, presas a [data-reveal-init] escrito por JS, exatamente como sections/tese.css e sections/govtech.css já fazem, de modo que sem JS nada fica escondido (§6). Toda duração multiplicada por var(--motion), e prefers-reduced-motion congela tudo. Contraste AA medido nos dois modos. Índice: 1. Tokens da pele, por tema 2. Campo: alumínio escovado, ruído e grade 3. Primitivos de metal: bisel, placa, moldura de instrumento 4. Botão metálico (metal-button) 5. Feixe de borda (border-beam) 6. Grupo segmentado e grupo de CTAs da dobra (gradient-button-group) 7. Cartão: placa de instrumento com cabeçalho e rebites 8. Janela de máquina na moldura de mídia (mock-browser-window) 9. Dobra: tela à esquerda, leitura à direita, grade com feixe (grid-beam) 10. Régua de provas como mostrador 11. Cases: recorte de canto e rebites (cutout-card) 12. Portfólio: camadas que deslizam no hover (shift-card) 13. Chassi restante: cabeçalho, seções, método, modelos, govtech, contato 14. Rodapé: placa de identificação de máquina 15. Entrada dos títulos por máscara (text-animate) 16. 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="cult"], [data-skin-base="cult"]:not([data-skin])) O primeiro lado é o portão canônico do §12: o atributo data-skin no . O segundo é uma PONTE TEMPORÁRIA, e ela existe por um motivo verificável, não por gosto. assets/js/core/theme.js mantém a lista de peles válidas em código (`SKINS`, três entradas) 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 "cult" não estiver nessa lista, `validSkin('cult')` devolve null, `SKIN_BASE` cai para 'default', e o `applySkin('default')` do init faz `root.removeAttribute('data-skin')`. Medido em Chrome 141 headless, com localStorage limpo, antes desta ponte: `data-skin` saía null, `data-skin-base` continuava "cult", `--radius` continuava 0.75rem e a folha inteira, apesar de carregada e com as 105 regras no CSSOM, não pintava um pixel. Ou seja, a página nova nascia igual a index.html. `data-skin-base` é escrito pelo script inline do ANTES de qualquer CSS e nunca é removido por ninguém: ele é o padrão de fábrica DAQUELE documento. O par `[data-skin-base="cult"]:not([data-skin])` é, então, a leitura exata de "este documento nasceu cult e nada sobrescreveu a pele". Os quatro estados fecham: JS desligado ......... data-skin="cult" presente ......... pinta (lado 1) hoje, com JS ......... data-skin removido por theme.js .... pinta (lado 2) depois do registro ... data-skin="cult" 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 "cult", escolher "Padrão" no painel a partir de index4.html não devolve o chassi cru, porque para o CSS o documento continua sendo o documento cult sem sobrescrita. É o mesmo defeito que já está registrado como estado transitório ("a pele nova não se registra no seletor de peles agora"), e ele desaparece por completo assim que a entrada { value: 'cult', ... } entrar em `SKINS`. 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="cult"]. A troca é mecânica, uma substituição de texto, e nada mais neste arquivo depende dela. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 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 --ct-. Eles são a ÚNICA fonte de cinza deste arquivo: nenhuma regra abaixo escreve um número de luminosidade solto, tudo consome var(--ct-...). É o mesmo contrato que 01-tokens.css tem com o resto do projeto, aplicado ao quintal da pele. -------------------------------------------------------------------------- */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) { /* --- tipografia: Geist de peso alto no display, Manrope no corpo --- É o par 4 do estúdio (§2.4), e é o único par que nenhuma das outras três peles usa: index.html tem Bricolage sobre Manrope, index2.html tem Funnel Display sobre Geist e index3.html tem Geist em tudo. Geist é uma grotesca de interface com numerais tabulares reais, que é o que uma leitura de instrumento pede; Manrope no corpo devolve o calor que o texto corrido perde quando a página inteira vira painel. */ --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* --- escala: painel de equipamento --- Corpo em 15.5px, título grande com teto em 4rem. Fica entre o editorial de index.html (5.25rem) e a ferramenta de index3.html (3.25rem): a máquina tem título grande porque a dobra é uma placa de identificação, mas não tem título de capa de revista. 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.84375rem * var(--scale)); --fs-base: calc(0.96875rem * var(--scale)); --fs-lead: calc(clamp(1rem, 0.93rem + 0.3vw, 1.1875rem) * var(--scale)); --fs-h3: calc(clamp(1.0625rem, 0.98rem + 0.34vw, 1.3125rem) * var(--scale)); --fs-h2: calc(clamp(1.6rem, 1.2rem + 1.7vw, 2.75rem) * var(--scale)); --fs-h1: calc(clamp(2.1rem, 1.4rem + 2.9vw, 4rem) * var(--scale)); --fs-mega: calc(clamp(2.6rem, 1.7rem + 3.4vw, 5rem) * var(--scale)); /* --- ritmo: display travado, mono muito aberto --- O mono desta pele abre para 0.12em porque ele deixa de ser rótulo discreto e passa a ser gravação em placa: rótulo de seção, rótulo de mostrador, dado do rodapé. Tracking largo é o que faz caixa alta em mono ler como gravado e não como texto. */ --lh-body: 1.58; --lh-display: 1.06; --lh-tight: 1.18; --tracking-display: -0.035em; --tracking-mono: 0.12em; --measure: 64ch; /* --- densidade e chassi --- */ --density: 0.92; --section-y: calc(clamp(3.75rem, 2.6rem + 4vw, 6.5rem) * var(--density)); --gutter: clamp(1.125rem, 0.8rem + 1.6vw, 2.5rem); --container: 1280px; --container-wide: 1560px; --grid-min: 300px; --header-h: 3.75rem; /* --- forma: aresta quase reta --- 5px na raiz devolve 2.5/5/7.5/10 nas derivadas de 01-tokens.css. Chapa dobrada tem raio pequeno e constante; cápsula não existe nesta pele fora do que o projeto já reserva para status e avatar. */ --radius: 0.3125rem; /* --- profundidade: a sombra existe para assentar a chapa, não para levitar. O relevo real vem do bisel, que é box-shadow inset e não depende deste multiplicador. --- */ --shadow-strength: 0.55; /* --- medidas próprias da pele --- */ --ct-grid: 40px; /* passo da grade técnica da dobra */ --ct-bevel: 1px; /* espessura da aresta de bisel */ --ct-chrome-h: 1.875rem; /* altura da barra da janela de máquina */ --ct-notch: 0.875rem; /* recorte de canto do cartão de case */ --ct-rivet: 7px; /* diâmetro do rebite */ --ct-beam-dur: 7.5s; /* volta completa do feixe de borda */ /* --- texturas --- O ruído é a MESMA receita de --pat-noise-image de 01-tokens.css: SVG em data URI, feTurbulence dessaturado, zero rede e zero arquivo novo. O escovado é um filete horizontal repetido, que é literalmente o que a escova deixa no alumínio. */ --ct-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); --ct-brush: repeating-linear-gradient( to bottom, hsl(var(--ct-line) / var(--ct-brush-alpha)) 0 1px, transparent 1px 7px ); /* --- paleta, tema claro: ALUMÍNIO CLARO, não branco de papel --- O fundo da página sai de 0 0% 100% para 0 0% 90%. Uma chapa de alumínio escovada e anodizada clara não é branca: ela é um cinza alto que aceita luz de cima e sombra embaixo, e é justamente essa diferença de dois degraus que faz o bisel existir. Com o fundo em 100% não há para onde a aresta clara subir, e a pele inteira desmonta. O preço disso é tinta, e ele foi pago na mesma regra, como o §12 exige: --muted-foreground desce de 0 0% 42% para 0 0% 34% e --faint-foreground de 0 0% 34% para 0 0% 30%. Medido por luminância relativa real (WCAG), matiz 0, saturação 0%: --muted-foreground 34% sobre o campo 90% ............ 5,79:1 --muted-foreground 34% sobre a placa 96% ............ 6,65:1 --faint-foreground 30% sobre o campo 90% ............ 6,79:1 --faint-foreground 30% sobre a placa recuada 88% .... 6,32:1 --foreground 8% sobre o campo 90% .................. 15,3:1 Todos acima do piso de 4,5:1 de texto de corpo do §8, sem precisar alegar tamanho de fonte em nenhum consumidor. */ --background: 0 0% 90%; --foreground: 0 0% 8%; --card: 0 0% 96%; --card-foreground: 0 0% 8%; --popover: 0 0% 97%; --popover-foreground: 0 0% 8%; --primary: 0 0% 12%; --primary-foreground: 0 0% 97%; --secondary: 0 0% 86%; --secondary-foreground: 0 0% 10%; --muted: 0 0% 87%; --muted-foreground: 0 0% 34%; --accent: 0 0% 82%; --accent-foreground: 0 0% 10%; /* Divisor estático da chapa. Mais tinta que o --border de fábrica porque aqui ele desenha junta de chapa sobre um campo de 90%, não filete sobre branco: em 0 0% 90% (o valor de 01-tokens.css) a junta simplesmente desapareceria contra o próprio campo. */ --border: 0 0% 74%; /* Borda de COMPONENTE INTERATIVO, piso de 3:1 do §8, medido contra as duas superfícies onde ela pousa nesta pele: 0 0% 45% sobre a placa 0 0% 96% .......... 4,36:1 0 0% 45% sobre o campo 0 0% 90% .......... 3,79:1 Consumidores: .btn--outline, .chip não pressionado, campo, seletor e faixa do estúdio. --border NÃO acompanha: divisor estático tem regra diferente e o §8 não pede 3:1 dele. */ --input: 0 0% 45%; --ring: 0 0% 28%; --surface-1: 0 0% 96%; --surface-2: 0 0% 93%; --surface-3: 0 0% 88%; --faint: var(--background); --faint-foreground: 0 0% 30%; /* O ÚNICO TOKEN CROMÁTICO DO SITE TAMBÉM PAGA O CAMPO MAIS ESCURO. --signal é aço frio e, em 01-tokens.css, foi calibrado contra um fundo claro de 0 0% 100%: ali 205 32% 42% mede 5,22:1. Nesta pele o campo cai para 0 0% 90%, e a mesma tinta desce para 4,18:1 no selo AA do indicador de contraste do painel (span.nx-ct__badge), medido com `scripts/contraste.mjs --estudio`. É exatamente a regra do §12: quem mexe na superfície mexe na tinta, na mesma regra. Em 205 32% 38% o selo volta para 4,88:1 sobre o campo, e --signal-foreground (branco) sobre ele fica em 6,09:1, os dois acima do piso do §8. O tema escuro não muda: lá o campo subiu de 4% para 10% e a tinta clara continua com folga. */ --signal: 205 32% 38%; /* --- metal do botão primário, tema claro --- Preenchimento extremo escuro. A rampa vai de 0 0% 22% no topo a 0 0% 6% na base: a mesma decisão de luminosidade do botão preto do projeto, com a luz caindo de cima como cai em uma peça usinada. --primary-foreground (97%) sobre o ponto mais claro da rampa (22%) mede 10,96:1, muito acima do piso de 4,5:1. */ --ct-metal-hi: 0 0% 22%; --ct-metal-mid: 0 0% 14%; --ct-metal-lo: 0 0% 6%; --ct-metal-edge: 0 0% 4%; --ct-bevel-hi: 0 0% 52%; /* aresta iluminada, sempre no topo */ --ct-bevel-lo: 0 0% 0%; /* aresta em sombra, sempre na base */ /* --- metal das superfícies (placa, painel, célula) --- */ --ct-plate-hi: 0 0% 99%; --ct-plate-lo: 0 0% 91%; --ct-plate-edge-hi: 0 0% 100%; --ct-plate-edge-lo: 0 0% 62%; /* --- metal recuado (botão de contorno, campo, trilho do segmentado) --- */ --ct-inset-hi: 0 0% 97%; --ct-inset-lo: 0 0% 88%; /* --- linha de escova, ruído, rebite e feixe --- */ --ct-line: 0 0% 40%; --ct-brush-alpha: 0.035; --ct-noise-alpha: 0.16; --ct-rivet-hi: 0 0% 100%; --ct-rivet-mid: 0 0% 72%; --ct-rivet-lo: 0 0% 46%; /* No claro o feixe é ESCURO: um risco de luz branca sobre alumínio claro não existe, some. O que percorre a borda é o reflexo de uma aresta escura, que é o que se vê de verdade em metal claro. */ --ct-beam: 0 0% 16%; --ct-beam-soft: 0 0% 34%; --ct-shadow: 0 0% 0%; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin]))[data-theme="dark"] { /* --- paleta, tema escuro: ALUMÍNIO ANODIZADO ESCURO --- O campo sobe de 0 0% 4% para 0 0% 10%. Preto absoluto não tem bisel: a aresta em sombra não teria para onde descer e a chapa perderia a espessura, que é o assunto inteiro desta pele. Em 10% sobra rampa dos dois lados, e a placa (13%) ainda se lê como placa contra o campo antes de qualquer filete aparecer. O -foreground foi recalculado na mesma regra, como o §12 exige: --muted-foreground 68% sobre o campo 10% ........... 7,83:1 --muted-foreground 68% sobre a placa 13% ........... 7,18:1 --muted-foreground 68% sobre --accent 21% .......... 5,45:1 --faint-foreground 72% sobre --surface-3 19% ....... 6,58:1 --foreground 97% sobre o campo 10% ................ 17,5:1 Todos acima do piso de 4,5:1 de texto de corpo do §8. */ --background: 0 0% 10%; --foreground: 0 0% 97%; --card: 0 0% 13%; --card-foreground: 0 0% 97%; --popover: 0 0% 15%; --popover-foreground: 0 0% 97%; --primary: 0 0% 96%; --primary-foreground: 0 0% 8%; --secondary: 0 0% 18%; --secondary-foreground: 0 0% 96%; --muted: 0 0% 16%; --muted-foreground: 0 0% 68%; --accent: 0 0% 21%; --accent-foreground: 0 0% 97%; --border: 0 0% 26%; /* 0 0% 46% sobre o botão de contorno desta pele (rampa de 17% a 10%) dá 3,40:1 no pior ponto, e 3,86:1 contra o campo. Piso de 3:1 do §8. */ --input: 0 0% 46%; --ring: 0 0% 74%; --surface-1: 0 0% 13%; --surface-2: 0 0% 16%; --surface-3: 0 0% 19%; --faint-foreground: 0 0% 72%; /* --signal PRECISA SER REDECLARADO AQUI, e isso é uma armadilha de cascata que já custou uma medição. O bloco claro desta pele redefine --signal, e o seletor dele (o portão da pele) vale 0,2,0, enquanto o [data-theme="dark"] de 01-tokens.css vale 0,1,0: sem esta linha o aço ESCURO do tema claro venceria dentro do tema escuro. Medido antes da correção: o selo AA do painel caiu para 2,85:1 nos quatro viewports escuros. O valor é o da fábrica com um passo a mais de luz, porque o campo desta pele subiu de 0 0% 4% para 0 0% 10%: em 205 24% 64% o selo mede 5,22:1 sobre --surface-3 e 6,3:1 sobre a placa. */ --signal: 205 24% 64%; /* --- metal do botão primário, tema escuro --- Preenchimento extremo claro, a assinatura do projeto invertida por tema. Rampa de 0 0% 100% a 0 0% 86%: --primary-foreground (8%) sobre o ponto mais escuro da rampa (86%) mede 13,4:1. */ --ct-metal-hi: 0 0% 100%; --ct-metal-mid: 0 0% 95%; --ct-metal-lo: 0 0% 86%; --ct-metal-edge: 0 0% 70%; --ct-bevel-hi: 0 0% 100%; --ct-bevel-lo: 0 0% 0%; --ct-plate-hi: 0 0% 16%; --ct-plate-lo: 0 0% 11%; --ct-plate-edge-hi: 0 0% 46%; --ct-plate-edge-lo: 0 0% 4%; --ct-inset-hi: 0 0% 17%; --ct-inset-lo: 0 0% 10%; --ct-line: 0 0% 74%; --ct-brush-alpha: 0.028; --ct-noise-alpha: 0.2; --ct-rivet-hi: 0 0% 62%; --ct-rivet-mid: 0 0% 30%; --ct-rivet-lo: 0 0% 6%; --ct-beam: 0 0% 100%; --ct-beam-soft: 0 0% 70%; --ct-shadow: 0 0% 0%; } /* -------------------------------------------------------------------------- 2. Campo: alumínio escovado com ruído Duas camadas, as duas estáticas e as duas em background-image do próprio , ou seja, PINTADAS ABAIXO DO CONTEÚDO por construção. É de propósito que nenhuma delas seja um pseudo-elemento sobreposto: textura por cima de texto é o caminho mais curto para derrubar contraste, e o §8 é medido em pixel renderizado. Camada 1, o ESCOVADO: filete horizontal de 1px a cada 4px, alfa baixo. Camada 2, o RUÍDO: a mesma receita de --pat-noise-image de 01-tokens.css. background-attachment: fixed ancora as duas na viewport em vez de esticar por mais de 20.000px de documento, exatamente como 08-skin-surface.css já faz com a grade dela. O sistema de --pattern do estúdio continua intocado: body::before segue pintando a grade de fábrica por cima deste campo, e o §12.3 continua valendo nesta pele sem o efeito colateral registrado lá (esta pele NÃO declara --pattern, justamente para não repetir o caso em que escolher "Grade" no painel apagava o inline e devolvia a palavra para a folha). -------------------------------------------------------------------------- */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) { background-image: var(--ct-brush), var(--ct-noise); background-repeat: repeat, repeat; background-position: 0 0, 0 0; background-size: auto, 180px 180px; background-attachment: fixed, fixed; background-blend-mode: normal, soft-light; } /* O ruído sozinho, em soft-light, ficaria forte demais em tela grande. A intensidade real é dada pela opacidade da camada de padrão do projeto e pelo alfa dos tokens acima; aqui só se garante que a página nunca perca a cor de base por baixo das duas texturas. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) body { background-color: transparent; } /* A grade global do projeto (body::before, --pattern) ganha um pouco mais de presença nesta pele: em uma máquina a grade é referência de medida, não ornamento discreto. Continua sendo o pseudo de 02-base.css, com o mesmo pacote de variáveis e o mesmo gate por --motion. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) body::before { opacity: calc(var(--pattern-opacity) * var(--pattern-boost) * 1.15); } /* -------------------------------------------------------------------------- 3. Primitivos de metal: bisel, placa, moldura de instrumento UMA RECEITA, REPETIDA. Toda superfície desta pele é uma chapa: - gradiente vertical de luminosidade (claro em cima, escuro embaixo); - aresta clara de 1px no topo e aresta escura de 1px na base, por box-shadow inset (relevo sem custo de layout e sem animação); - filete de 1px em volta, em --border; - raio pequeno e constante. box-shadow aqui é ESTÁTICO. O §6 proíbe animar box-shadow, não usá-lo. -------------------------------------------------------------------------- */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) { /* A chapa inteira em uma variável, para que placa, painel, célula e cabeçalho compartilhem literalmente a mesma pintura. */ --ct-plate-image: linear-gradient( to bottom, hsl(var(--ct-plate-hi)) 0%, hsl(var(--ct-plate-lo)) 100% ); --ct-plate-bevel: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.55), inset 0 calc(var(--ct-bevel) * -1) 0 hsl(var(--ct-plate-edge-lo) / 0.5); /* Rebite: um disco de 3 paradas, luz em cima, sombra embaixo, borda escura. Desenhado por radial-gradient, sem imagem e sem nó novo. */ --ct-rivet-image: radial-gradient( circle at 50% 38%, hsl(var(--ct-rivet-hi)) 0 22%, hsl(var(--ct-rivet-mid)) 26% 58%, hsl(var(--ct-rivet-lo)) 62% 82%, transparent 86% ); } /* Placa padrão: card, painel, item de capacidade, ressalva, destaque de contratação, régua de provas e o cromo do estúdio. A lista espelha a que 06-skin-glass.css usa para a receita de vidro, pelo mesmo motivo: é o conjunto de superfícies elevadas do projeto. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .card, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .panel, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .capacidades__item, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .capacidades__stage-badge, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech-ressalva, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contratacao__spotlight, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .stat-rail { border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-md); background-color: hsl(var(--card)); background-image: var(--ct-plate-image); box-shadow: var(--ct-plate-bevel), var(--shadow-sm); } /* O PAINEL DO ESTÚDIO FICA FORA DA LISTA DE CHAPAS, e a razão é de auditoria, não de estilo. 06-skin-glass.css inclui .nx-studio na receita de vidro e esta pele começou incluindo na de chapa, por simetria. Só que o §7.1.1 registra que o painel é a única superfície FLUTUANTE cujo preenchimento é OPACO, e é justamente por isso que a sonda de contraste pode parar a cadeia nele em vez de cair no pixel. Um gradiente em background-image quebra essa condição para TODO nó de texto do painel de uma vez: medido com `--estudio`, 13 ocorrências abaixo do piso em 8 execuções, contra zero na pele padrão na mesma rodada, e nenhuma delas dentro de um componente que esta pele tenha pintado. O painel continua metálico onde importa, porque ele consome os tokens do site (§11): raio, densidade, famílias, paleta e os primitivos .btn, .chip e .segmented já chegam nele por herança. O que ele não recebe é a chapa do , e é isso que mantém o cromo mensurável. */ /* Escovado por cima da chapa nas peças grandes, nunca nas pequenas: em uma etiqueta de 20px de altura o filete a cada 4px vira listra, não textura. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .card, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .panel, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .capacidades__item, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contratacao__spotlight, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .stat-rail { background-image: var(--ct-brush), var(--ct-plate-image); } /* Faixa de seção: a chapa mais escura do conjunto, com o mesmo escovado. .section--band é o ritmo alternado que o projeto já tem; aqui ela vira a mudança de chapa entre um módulo e o seguinte. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .section--band { background-color: hsl(var(--surface-2)); background-image: var(--ct-brush); border-block: var(--hairline) solid hsl(var(--border)); box-shadow: var(--ct-plate-bevel); } /* Etiquetas e crachás: chapa pequena, sem escovado, com bisel reduzido. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .badge--secondary, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .badge--outline, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__badge, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech-motor__code, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech-chip, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech-legal__chip, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech-inco__pais, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .case-block__stack-item, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .case-block__status { --badge-radius: calc(var(--radius-sm) * 0.6); background-image: var(--ct-plate-image); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.4); } /* O CRACHÁ DE ESTADO "EM OPERAÇÃO" TAMBÉM PRECISA DA PRÓPRIA REGRA, pelo mesmo motivo do nó do método: preenchimento extremo repintado por uma chapa que veio de um seletor de peso IGUAL e folha POSTERIOR. sections/portfolio.css já tinha antecipado o problema e escreve `.badge.portfolio__badge[data-tone="ativo"]` (0,3,0) com o atalho `background:` justamente para zerar a imagem que uma pele pusesse por cima. Só que a regra desta pele também mede 0,3,0 e carrega depois, então o empate cai para o lado dela: a chapa voltava a pintar sobre --primary enquanto a tinta continuava --primary-foreground. Medido em pixel, 1,04:1 no claro e 1,13:1 no escuro, em todos os quatro viewports. A correção é a mesma de sempre: o par de superfície e tinta anda junto. O crachá ativo recebe a rampa de metal do botão primário, que é o par --primary/--primary-foreground calibrado desta pele, e o seletor sobe para 0,5,0 para que nenhuma ordem de folha decida isso de novo. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .badge.portfolio__badge[data-tone="ativo"] { background-color: hsl(var(--primary)); background-image: linear-gradient( to bottom, hsl(var(--ct-metal-hi)) 0%, hsl(var(--ct-metal-mid)) 52%, hsl(var(--ct-metal-lo)) 100% ); border-color: hsl(var(--ct-metal-edge)); color: hsl(var(--primary-foreground)); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-bevel-hi) / 0.5); } /* Rótulo de seção: gravação em placa. O filete que o .eyebrow já tem vira um traço de instrumento, mais curto e mais denso. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .eyebrow { font-weight: 600; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .eyebrow::before { inline-size: var(--space-4); block-size: calc(var(--hairline) * 2); } /* Tipografia de display: peso alto, aresta travada. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) h1, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) h2 { font-weight: 800; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) h3, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) h4, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) h5, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .card__title { font-weight: 700; letter-spacing: -0.02em; } /* Dado tabular em mono, que é o que uma máquina mostra. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .case-block__index, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .capacidades__index, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .confianca__num, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contratacao__item-index, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .tese-block__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-mono); } /* -------------------------------------------------------------------------- 4. Botão metálico (metal-button do cult-ui) O original é uma camada WebGL com reflexo líquido. O que dá para portar com honestidade em CSS puro, e o que de fato lê como metal, são três coisas, todas de LUMINOSIDADE e nenhuma de matiz: 1. gradiente vertical na face (claro em cima, escuro embaixo); 2. bisel: aresta clara de 1px no topo, aresta escura de 1px na base; 3. estado pressionado que INVERTE o gradiente e o bisel e desloca 1px, que é o que o olho lê como "a peça afundou". O deslocamento continua sendo transform, como o §6 exige, e o gradiente não anima: ele TROCA junto com o estado, sem transição de background. -------------------------------------------------------------------------- */ /* O ALVO DE TOQUE DO SKIP LINK, e por que a pele precisa cuidar dele. .skip-link (02-base.css) resolve a altura por padding: var(--space-3) mais a linha do texto em --fs-mono. Como --space-* é multiplicado por --density, esta pele, que aperta a densidade para 0.92, entrega 41px de altura e cai abaixo dos 44x44 do §7.5. Medido pelo harness em 360x740, 390x844 e 414x896, nos dois modos, seis defeitos. A correção é de altura mínima, não de padding: mexer no padding devolveria o problema no primeiro ajuste de densidade que o dono fizesse no painel. --tap-min é o token que existe exatamente para isto. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .skip-link { display: inline-flex; align-items: center; min-block-size: var(--tap-min); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .btn { border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.005em; } /* CORREÇÃO 2026-08-05 (varredura de controles × pele, aba Botões): :is(...) .btn tem especificidade (0,3,0) — mais alta que a do portão html[data-nx-btn] .btn de 07-studio.css (0,2,1), porque o :is() aqui soma com o segundo argumento, [data-skin-base="cult"]:not([data-skin]) (duas seletoras de atributo). O raio escolhido no controle "Raio do botão" (--nx-btn-radius) nunca vencia: a peça de metal sempre devolvia o próprio --radius-sm. Correção, no mesmo espírito do §11 (portão só entra quando o dono mexeu): um seletor com as DUAS condições no mesmo elemento (o atributo do portão MAIS o atributo da pele) paga um degrau de especificidade a mais e vence, só quando o portão está aceso; de fábrica (sem o atributo) o --radius-sm da pele continua intocado. */ html[data-nx-btn][data-skin="cult"] .btn, html[data-nx-btn][data-skin-base="cult"]:not([data-skin]) .btn { border-radius: var(--nx-btn-radius); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .btn--primary { border-color: hsl(var(--ct-metal-edge)); background-color: hsl(var(--primary)); background-image: linear-gradient( to bottom, hsl(var(--ct-metal-hi)) 0%, hsl(var(--ct-metal-mid)) 52%, hsl(var(--ct-metal-lo)) 100% ); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-bevel-hi) / 0.55), inset 0 calc(var(--ct-bevel) * -1) 0 hsl(var(--ct-bevel-lo) / 0.35); } /* CORREÇÃO 2026-08-05 (varredura de controles × pele, aba Botões): mesma causa do bloco de raio logo acima, aplicada ao preenchimento. Quando o dono escolhe uma cor própria para o botão (H/S/L do grupo Botões, sem trocar o "Modelo"), core/theme.js acende html[data-nx-btn="on"] e escreve --nx-btn-fill com a cor escolhida (07-studio.css:2109, html[data-nx-btn="on"] .btn--primary). A chapa de metal, com especificidade mais alta, sempre vencia e devolvia o gradiente de --primary: a cor escolhida ficava marcada no painel e não pintava um pixel. Aqui a chapa CEDE a decoração (gradiente, bisel, borda) só quando o portão está com o modelo "auto" + cor própria, deixando --nx-btn-fill pintar liso — a mesma composição que qualquer outra pele sem identidade de botão própria já tem. Modelo explícito (Sólido, Contorno, Fantasma, Suave, Elevado) e o estado de fábrica continuam com a chapa inteira, sem mudança. */ html[data-nx-btn="on"][data-skin="cult"] .btn--primary, html[data-nx-btn="on"][data-skin-base="cult"]:not([data-skin]) .btn--primary { background-color: hsl(var(--nx-btn-fill)); background-image: none; box-shadow: none; border-color: transparent; color: hsl(var(--nx-btn-on)); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .btn--primary:hover { background-color: hsl(var(--primary)); background-image: linear-gradient( to bottom, hsl(var(--ct-metal-hi)) 0%, hsl(var(--ct-metal-hi)) 42%, hsl(var(--ct-metal-mid)) 100% ); transform: translateY(-1px); } /* Pressionado: o bisel troca de lado e a peça desce 1px. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .btn--primary:active { background-color: hsl(var(--primary)); background-image: linear-gradient( to bottom, hsl(var(--ct-metal-lo)) 0%, hsl(var(--ct-metal-mid)) 48%, hsl(var(--ct-metal-hi)) 100% ); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-bevel-lo) / 0.45), inset 0 calc(var(--ct-bevel) * -1) 0 hsl(var(--ct-bevel-hi) / 0.5); transform: translateY(1px); } /* Contorno: a mesma peça, recuada. Preenchimento sai de transparente para uma chapa recuada, e a borda continua em --input, o token calibrado para 3:1 de componente interativo (§8). A tinta segue sendo --foreground. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .btn--outline { border-color: hsl(var(--input)); background-color: hsl(var(--ct-inset-lo)); background-image: linear-gradient( to bottom, hsl(var(--ct-inset-hi)) 0%, hsl(var(--ct-inset-lo)) 100% ); color: hsl(var(--foreground)); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.45), inset 0 calc(var(--ct-bevel) * -1) 0 hsl(var(--ct-plate-edge-lo) / 0.4); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .btn--outline:hover { border-color: hsl(var(--ring)); background-color: hsl(var(--accent)); background-image: linear-gradient( to bottom, hsl(var(--ct-inset-hi)) 0%, hsl(var(--ct-inset-hi)) 55%, hsl(var(--ct-inset-lo)) 100% ); color: hsl(var(--accent-foreground)); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.6), inset 0 calc(var(--ct-bevel) * -1) 0 hsl(var(--ct-plate-edge-lo) / 0.4); transform: translateY(-1px); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .btn--outline:active, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .btn--secondary:active { background-image: linear-gradient( to bottom, hsl(var(--ct-inset-lo)) 0%, hsl(var(--ct-inset-hi)) 100% ); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-lo) / 0.45), inset 0 calc(var(--ct-bevel) * -1) 0 hsl(var(--ct-plate-edge-hi) / 0.5); transform: translateY(1px); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .btn--secondary { border-color: hsl(var(--border)); background-image: linear-gradient( to bottom, hsl(var(--ct-inset-hi)) 0%, hsl(var(--ct-inset-lo)) 100% ); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.45), inset 0 calc(var(--ct-bevel) * -1) 0 hsl(var(--ct-plate-edge-lo) / 0.4); } /* Chip de filtro: a mesma chapa recuada quando desligado, a mesma chapa de metal quando ligado. A geometria continua ÚNICA nos dois estados, que é a invariante do bloco 4 de 03-ui.css: só preenchimento e borda mudam. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .chip { --chip-radius: calc(var(--radius-sm) * 0.6); background-image: linear-gradient( to bottom, hsl(var(--ct-inset-hi)) 0%, hsl(var(--ct-inset-lo)) 100% ); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.4); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .chip[aria-pressed="true"] { background-image: linear-gradient( to bottom, hsl(var(--ct-metal-hi)) 0%, hsl(var(--ct-metal-lo)) 100% ); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-bevel-hi) / 0.5); } /* -------------------------------------------------------------------------- 5. Feixe de borda (border-beam do cult-ui) O original roda um cometa pelo PERÍMETRO da borda. A técnica canônica em CSS é um conic-gradient girando, mascarado para só o anel aparecer, e o caminho mais citado para isso é animar um @property de ângulo. AQUI NÃO É ASSIM, e a razão é o §6.0: efeito CONTÍNUO está preso a transform e opacity, e animar um ângulo de gradiente repinta a camada a cada frame. A receita usada é puramente geométrica e anima só transform: ::before quadrado maior que a peça, com o conic-gradient pintado, que GIRA por transform: rotate(). O `overflow: hidden` da peça o recorta na forma dela. ::after a face da peça, recuada em 2px, cobrindo tudo menos um anel de 2px. É esse anel que fica sendo o único lugar onde o conic-gradient aparece, e é ele que o feixe percorre. Dois consumidores, e só dois, porque um feixe em toda parte deixa de ser destaque: o CTA principal do fecho e o cartão em destaque do portfólio. -------------------------------------------------------------------------- */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contato__cta, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo { position: relative; overflow: hidden; isolation: isolate; } /* O anel giratório. `inline-size: 150%` com `aspect-ratio: 1` garante que o quadrado cubra a peça inteira em qualquer ângulo: para as duas peças (uma larga e baixa, outra larga e média) 150% da largura é sempre maior que a diagonal. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contato__cta::before, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; z-index: 0; inline-size: 150%; aspect-ratio: 1; pointer-events: none; border-radius: 0; background: conic-gradient( from 0deg, transparent 0deg, hsl(var(--ct-beam-soft) / 0.35) 14deg, hsl(var(--ct-beam)) 26deg, hsl(var(--ct-beam-soft) / 0.35) 38deg, transparent 54deg, transparent 360deg ); transform: translate(-50%, -50%) rotate(0deg); transform-origin: center; animation: nx-ct-beam calc(var(--ct-beam-dur) * var(--motion)) linear infinite; opacity: 1; will-change: transform; } /* A face da peça, recuada em 2px: sobra um anel de 2px por onde o feixe passa. O preenchimento é o mesmo da peça, então nada muda de leitura e o texto continua pousando exatamente na mesma tinta de fundo. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contato__cta::after { content: ""; position: absolute; inset: calc(var(--ct-bevel) * 2); z-index: 1; pointer-events: none; border-radius: calc(var(--radius-sm) - var(--ct-bevel) * 2); background-color: hsl(var(--primary)); background-image: linear-gradient( to bottom, hsl(var(--ct-metal-hi)) 0%, hsl(var(--ct-metal-mid)) 52%, hsl(var(--ct-metal-lo)) 100% ); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-bevel-hi) / 0.55); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo::after { content: ""; position: absolute; inset: calc(var(--ct-bevel) * 2); z-index: 1; pointer-events: none; border-radius: calc(var(--radius-md) - var(--ct-bevel) * 2); background-color: hsl(var(--card)); background-image: var(--ct-brush), var(--ct-plate-image); box-shadow: var(--ct-plate-bevel); } /* O conteúdo das duas peças sobe acima do anel e da face. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contato__cta > *, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo > * { position: relative; z-index: 2; } @keyframes nx-ct-beam { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* -------------------------------------------------------------------------- 6. Grupo segmentado e grupo de CTAs da dobra (gradient-button-group) No cult-ui o grupo é uma cápsula com realce que desliza entre os itens. Aqui a cápsula vira trilho recuado de instrumento e o item ativo vira a tecla de metal levantada: mesma ideia de "um realce compartilhado", com a linguagem desta pele. O deslizamento do original depende de medir a posição do item ativo em JS, o que esta pele não tem e não vai inventar. -------------------------------------------------------------------------- */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .segmented { border-color: hsl(var(--border)); border-radius: var(--radius-sm); background-color: hsl(var(--ct-inset-lo)); background-image: linear-gradient( to bottom, hsl(var(--ct-inset-lo)) 0%, hsl(var(--ct-inset-hi)) 100% ); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-lo) / 0.45), inset 0 calc(var(--ct-bevel) * -1) 0 hsl(var(--ct-plate-edge-hi) / 0.45); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .segmented__btn { border-radius: calc(var(--radius-sm) * 0.7); font-weight: 700; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .segmented__btn[aria-pressed="true"], :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .segmented__btn[aria-checked="true"] { background-color: hsl(var(--surface-1)); background-image: var(--ct-plate-image); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.7), inset 0 calc(var(--ct-bevel) * -1) 0 hsl(var(--ct-plate-edge-lo) / 0.45), var(--shadow-sm); } /* Grupo de CTAs da dobra: os dois botões encostam em um trilho só, como as duas teclas de um painel. O gap vira um filete, e o trilho carrega o bisel do grupo inteiro. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__ctas { gap: var(--hairline); padding: calc(var(--hairline) * 3); border: var(--hairline) solid hsl(var(--border)); border-radius: calc(var(--radius-sm) * 1.6); background-color: hsl(var(--ct-inset-lo)); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-lo) / 0.45), inset 0 calc(var(--ct-bevel) * -1) 0 hsl(var(--ct-plate-edge-hi) / 0.4); } @media (max-width: 480px) { /* Em coluna o trilho continua sendo trilho: os dois botões ocupam a largura inteira, um sobre o outro, sem perder o bisel do grupo. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__ctas { inline-size: 100%; } } /* -------------------------------------------------------------------------- 7. Cartão: placa de instrumento com cabeçalho e rebites O cabeçalho do cartão ganha uma junta de chapa: filete embaixo e uma sombra de 1px que sugere a dobra entre a testeira e o corpo. -------------------------------------------------------------------------- */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .card__header { padding: var(--space-5) var(--space-5) var(--space-4); border-block-end: var(--hairline) solid hsl(var(--border)); box-shadow: inset 0 calc(var(--ct-bevel) * -1) 0 hsl(var(--ct-plate-edge-hi) / 0.35); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .card__header + .card__body { padding-block-start: var(--space-5); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .card__body { padding: var(--space-5); gap: var(--space-3); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .card__footer { padding: 0 var(--space-5) var(--space-5); } /* Interação: a chapa sobe 2px e a aresta clara acende. Nada de mudança de matiz e nada de sombra em transição (o §6 proíbe animar box-shadow, e a sombra aqui muda junto com o estado, não em tween). */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .card--interactive:hover, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .card--interactive:focus-visible { border-color: hsl(var(--input)); transform: translateY(-2px); } /* -------------------------------------------------------------------------- 8. Janela de máquina na moldura de mídia (mock-browser-window) O BrowserWindow do cult-ui é moldura decorativa pura: três semáforos, uma barra de endereço e um slot de conteúdo. Aqui ele é desenhado inteiro em ::before de .media-frame, sem tocar em um único partial: - a barra é uma chapa com filete embaixo; - os três pontos são três radial-gradient em posições fixas; - o campo de endereço é um retângulo recuado e VAZIO. O campo fica vazio de propósito: o §9 proíbe copy inventada, e uma URL falsa desenhada dentro da moldura é copy visível. Vazio, ele lê como o que é, um instrumento sem leitura. A mídia e o véu de .media-frame::after são empurrados para baixo da barra, senão o `inset: 0` de 04-sections.css passaria por trás dela. Só as molduras que hospedam captura ou vídeo de produto recebem o tratamento; a moldura do cartão de portfólio fica de fora porque lá o padrão portado é outro (shift-card, bloco 12). -------------------------------------------------------------------------- */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__media, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .capacidades__media, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .case-block__frame, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contato__frame, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech-inco__media { border-radius: var(--radius-md); border-color: hsl(var(--border)); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.5), var(--shadow-md); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__media::before, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .capacidades__media::before, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .case-block__frame::before, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contato__frame::before, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech-inco__media::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 3; block-size: var(--ct-chrome-h); pointer-events: none; border-block-end: var(--hairline) solid hsl(var(--border)); background-color: hsl(var(--surface-2)); background-image: /* três semáforos, da esquerda para a direita */ radial-gradient(circle at 50% 50%, hsl(var(--ct-rivet-mid)) 0 45%, transparent 52%), radial-gradient(circle at 50% 50%, hsl(var(--ct-rivet-mid)) 0 45%, transparent 52%), radial-gradient(circle at 50% 50%, hsl(var(--ct-rivet-mid)) 0 45%, transparent 52%), /* campo de endereço, recuado e vazio */ linear-gradient(to bottom, hsl(var(--ct-inset-lo)), hsl(var(--ct-inset-hi))), /* escovado da própria barra */ var(--ct-brush), var(--ct-plate-image); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat; background-size: 9px 9px, 9px 9px, 9px 9px, 38% 0.875rem, auto, auto; background-position: 0.75rem center, 1.5rem center, 2.25rem center, center center, 0 0, 0 0; box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.6); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__media img, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__media video, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__media picture, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .capacidades__media img, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .case-block__frame img, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contato__frame img, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contato__frame video, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech-inco__media img, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__media::after, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .capacidades__media::after, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .case-block__frame::after, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contato__frame::after, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech-inco__media::after { inset-block-start: var(--ct-chrome-h); } /* -------------------------------------------------------------------------- 9. Dobra: tela à esquerda, leitura à direita, grade com feixe (grid-beam) A dobra desta pele é um console. A TELA (o quadro de vídeo, agora com a barra de janela do bloco 8) fica à esquerda e o PAINEL DE LEITURA fica à direita, dentro de uma placa própria com filete e bisel. É a decisão que mais separa esta pele das outras três na dobra medida pelo §12: index.html empilha e centraliza, index2.html empilha e centraliza com mais respiro, index3.html põe a copy à esquerda e a mídia à direita. Aqui o eixo é o oposto do de index3.html, e o motivo não é contraste com ele: em um equipamento a tela vem primeiro e o rótulo vem ao lado, nunca o contrário. A ordem do DOM não muda: partials/hero.js continua entregando copy e depois mídia, e o leitor de tela continua recebendo o título antes do vídeo decorativo (que é aria-hidden). O que muda é a ordem VISUAL, e só a partir de 1080px, onde as duas colunas existem ao mesmo tempo na tela. O §7.2 continua respeitado: nenhuma altura em vh, min-height por clamp em svh, e o termo em svh do tamanho do título continua impedindo que ele coma a dobra em tela baixa. -------------------------------------------------------------------------- */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero { min-height: clamp(480px, 72svh, 760px); padding-block-start: calc(var(--header-h) + clamp(var(--space-6), 4svh, var(--space-12))); padding-block-end: clamp(var(--space-8), 5svh, var(--space-13)); } /* A grade técnica da dobra. Substitui o halo radial de sections/hero.css: luz difusa é o oposto do que uma máquina faz. Aqui o fundo é papel milimetrado com uma máscara que o apaga nas bordas, e nada deriva. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero::before { inset: 0; background: linear-gradient(to right, hsl(var(--border) / 0.85) var(--hairline), transparent var(--hairline)), linear-gradient(to bottom, hsl(var(--border) / 0.85) var(--hairline), transparent var(--hairline)); background-size: var(--ct-grid) var(--ct-grid); -webkit-mask-image: radial-gradient(120% 92% at 50% 8%, hsl(0 0% 0%) 0%, transparent 78%); mask-image: radial-gradient(120% 92% at 50% 8%, hsl(0 0% 0%) 0%, transparent 78%); animation: none; } /* O FEIXE. Uma faixa fina, da largura de uma linha da grade, que percorre a dobra de cima a baixo e some. Só transform e opacity animam, a duração é multiplicada por var(--motion) e o repouso é longo de propósito: em uma placa de circuito o pulso é evento, não ambiente. O eixo do feixe é a linha vertical da grade em 24% da largura, que no layout de duas colunas cai dentro da tela, e no layout empilhado cai na margem esquerda do bloco de leitura. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 24%; z-index: 0; inline-size: calc(var(--hairline) * 2); pointer-events: none; background: linear-gradient( to bottom, transparent 0%, hsl(var(--ct-beam-soft) / 0.35) 26%, hsl(var(--ct-beam) / 0.9) 50%, hsl(var(--ct-beam-soft) / 0.35) 74%, transparent 100% ); transform: translate3d(0, -110%, 0) scaleY(0.32); transform-origin: top center; opacity: 0; animation: nx-ct-grid-beam calc(9s * var(--motion)) var(--ease-io) infinite; will-change: transform, opacity; } @keyframes nx-ct-grid-beam { 0% { transform: translate3d(0, -110%, 0) scaleY(0.32); opacity: 0; } 8% { opacity: 0.95; } 46% { transform: translate3d(0, 110%, 0) scaleY(0.32); opacity: 0.95; } 56% { transform: translate3d(0, 110%, 0) scaleY(0.32); opacity: 0; } 100% { transform: translate3d(0, 110%, 0) scaleY(0.32); opacity: 0; } } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__grid { gap: clamp(var(--space-7), 4.5svh, var(--space-10)); } /* O painel de leitura: placa com filete, bisel e rótulo gravado. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__copy { justify-items: start; text-align: start; max-width: none; margin-inline: 0; gap: clamp(var(--space-4), 2.6svh, var(--space-6)); padding: var(--space-7) var(--space-6); border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-md); background-color: hsl(var(--card)); background-image: var(--ct-brush), var(--ct-plate-image); box-shadow: var(--ct-plate-bevel), var(--shadow-md); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__copy > .eyebrow { padding-block: var(--space-1); padding-inline: var(--space-3); border: var(--hairline) solid hsl(var(--border)); border-radius: calc(var(--radius-sm) * 0.6); background-image: var(--ct-plate-image); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.5); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__title { gap: 0; font-size: calc(clamp(2rem, min(1.1rem + 2.9vw, 7.6svh), 3.75rem) * var(--scale)); font-weight: 800; line-height: 1.04; letter-spacing: -0.038em; } /* A última linha do título não vira cor de marca: vira o segundo plano tipográfico do painel. --muted-foreground sobre a placa da dobra mede 7,18:1 no escuro e 6,65:1 no claro, acima do piso de 4,5:1 de corpo e muito acima do de 3:1 de texto grande (§8). */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__line--accent { font-weight: 800; color: hsl(var(--muted-foreground)); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__lead { margin-inline: 0; max-width: 46ch; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__media { --media-ratio: 16 / 10; max-width: none; } @media (min-width: 1080px) { :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); align-items: stretch; column-gap: var(--space-8); } /* A tela à esquerda, o painel de leitura à direita. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__stage { order: 1; display: grid; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__copy { order: 2; align-content: center; padding: var(--space-9) var(--space-8); } /* Lado a lado a moldura abre mão da proporção fixa e passa a ter a altura da coluna vizinha, para as duas placas fecharem na mesma linha de base. O piso de 20rem protege o caso em que a copy encolhe (tela baixa ou --scale pequeno) e a tela ficaria uma tira. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__media { aspect-ratio: auto; block-size: 100%; min-block-size: 20rem; } } /* §7.4 do contrato, faixa ultrawide baixa: a regra de sections/hero.css manda a mídia para order: 2. Esta pele já está em duas colunas desde 1080px e com a tela à esquerda; aqui só se reafirma a ordem, senão a dobra trocaria de eixo justamente no viewport mais largo da matriz. */ @media (min-width: 2200px) and (max-width: 2560px) and (max-height: 1200px) { :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__stage { order: 1; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__copy { order: 2; justify-items: start; text-align: start; max-width: none; margin-inline: 0; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__media { --media-ratio: auto; aspect-ratio: auto; block-size: 100%; max-width: none; } } @media (orientation: landscape) and (max-height: 700px) { :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero { min-height: clamp(440px, 84svh, 640px); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__copy { padding: var(--space-5); } } /* -------------------------------------------------------------------------- 10. Régua de provas como mostrador A régua vira o mostrador do equipamento: uma placa recuada, com as células separadas por junta de chapa e os números em mono tabular, que é o tipo que um instrumento mostra. O rótulo continua em mono caixa alta, agora com o tracking largo desta pele, e a nota continua em --faint-foreground, exatamente como sections/provas.css pede. -------------------------------------------------------------------------- */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .stat-rail { padding: var(--space-6) var(--space-5); border-radius: var(--radius-md); background-color: hsl(var(--surface-2)); background-image: var(--ct-brush), linear-gradient( to bottom, hsl(var(--ct-inset-lo)) 0%, hsl(var(--ct-inset-hi)) 100% ); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-lo) / 0.5), inset 0 calc(var(--ct-bevel) * -1) 0 hsl(var(--ct-plate-edge-hi) / 0.45); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .stat-rail .stat { padding-inline-start: var(--space-5); border-inline-start: var(--hairline) solid hsl(var(--border)); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .stat__value { font-family: var(--font-mono); font-size: calc(var(--fs-h2) * 0.86); font-weight: 600; letter-spacing: -0.02em; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .stat__label { font-weight: 500; } /* -------------------------------------------------------------------------- 11. Cases: recorte de canto e rebites (cutout-card do cult-ui) No cult-ui o recorte é uma ILUSÃO: dois quartos de círculo pintados na cor do rótulo por cima do canto reto da mídia. Aqui o recorte é real e estático, feito por clip-path na própria placa, porque o conteúdo que ele recorta é a placa inteira e não um encaixe de chip. Duas arestas cortadas em diagonal, na diagonal oposta uma da outra, mais quatro rebites: é a chapa parafusada de um painel de rack. clip-path aqui é ESTÁTICO. O §6.0 governa clip-path ANIMADO; forma fixa não é animação e não deixa resíduo para nenhuma auditoria limpar. -------------------------------------------------------------------------- */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .cases__list { gap: var(--space-8); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .case-block { position: relative; padding: var(--space-7); gap: var(--space-8); border: var(--hairline) solid hsl(var(--border)); background-color: hsl(var(--card)); background-image: var(--ct-rivet-image), var(--ct-rivet-image), var(--ct-rivet-image), var(--ct-rivet-image), var(--ct-brush), var(--ct-plate-image); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat; background-size: var(--ct-rivet) var(--ct-rivet), var(--ct-rivet) var(--ct-rivet), var(--ct-rivet) var(--ct-rivet), var(--ct-rivet) var(--ct-rivet), auto, auto; background-position: var(--space-3) var(--space-3), calc(100% - var(--space-3)) var(--space-3), var(--space-3) calc(100% - var(--space-3)), calc(100% - var(--space-3)) calc(100% - var(--space-3)), 0 0, 0 0; box-shadow: var(--ct-plate-bevel), var(--shadow-sm); clip-path: polygon( 0 0, calc(100% - var(--ct-notch)) 0, 100% var(--ct-notch), 100% 100%, var(--ct-notch) 100%, 0 calc(100% - var(--ct-notch)) ); } /* A junta entre dois cases deixa de existir: agora cada um é uma placa independente, com respiro entre elas. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .case-block + .case-block { padding-block-start: var(--space-7); border-block-start: var(--hairline) solid hsl(var(--border)); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .case-block__title { font-weight: 800; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .case-block__fact-label, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .case-block__stack-label { letter-spacing: var(--tracking-mono); } @media (max-width: 47.9375rem) { /* Em tela estreita o recorte encolhe: um chanfro de 14px em uma placa de 320px de largura vira um canto quebrado, não um recorte de projeto. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .case-block { --ct-notch: 0.5rem; padding: var(--space-5); } } /* -------------------------------------------------------------------------- 12. Portfólio: camadas que deslizam no hover (shift-card do cult-ui) No original a mesma imagem existe em duas posições e a lib interpola entre elas. Aqui o que desliza são as CAMADAS do cartão que já existem: a mídia sobe, o corpo desce, a placa inteira sobe 3px e a sombra aprofunda. Tudo em transform, nada de layout, nada de matiz. -------------------------------------------------------------------------- */ /* O RETÂNGULO FANTASMA DA NOTA RECOLHIDA saiu daqui. O diagnóstico feito nesta folha estava certo e a regra estava na altitude errada: a caixa fantasma do
fechado é do partial e da folha de seção, vale nas quatro peles, e reprovava AA também na pele de vidro (1,59:1 e 1,65:1 no claro, 4,22:1 no escuro em index2.html). A correção passou a viver em `assets/css/sections/portfolio.css`, sem escopo de pele, e o histórico completo está no comentário de lá. Esta regra virou código morto e foi removida. */ /* O CARTÃO NÃO GANHA `overflow: hidden`: a moldura de mídia já tem o próprio (04-sections.css) e o que se move no hover é a moldura inteira em translateY, nunca a imagem para fora dela. Recorte a mais só serviria para criar mais retângulo fantasma dentro do cartão. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card .portfolio__card-media, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card .card__header, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card .card__body, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card .card__footer { transition: transform calc(var(--dur-base) * var(--motion)) var(--ease-out); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card:hover, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card:focus-within { transform: translateY(-3px); border-color: hsl(var(--input)); box-shadow: var(--ct-plate-bevel), var(--shadow-md); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card:hover .portfolio__card-media, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card:focus-within .portfolio__card-media { transform: translateY(-6px); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card:hover .card__header, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card:focus-within .card__header { transform: translateY(3px); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card:hover .card__body, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card:focus-within .card__body { transform: translateY(4px); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card:hover .card__footer, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card:focus-within .card__footer { transform: translateY(5px); } /* A faixa em destaque não desliza: ela já tem o feixe do bloco 5, e as duas coisas juntas viram ruído. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo:hover, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo:focus-within { transform: none; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo:hover .portfolio__card-media, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo:focus-within .portfolio__card-media, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo:hover .card__header, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo:focus-within .card__header, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo:hover .card__body, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo:focus-within .card__body, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo:hover .card__footer, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo:focus-within .card__footer { transform: none; } /* -------------------------------------------------------------------------- 13. Chassi restante Cabeçalho, cabeçalho de seção, e as seções que não receberam um padrão próprio: método, modelos, govtech, confiança, contratação e contato. Todas recebem o mesmo tratamento de chapa, sem inventar layout novo. -------------------------------------------------------------------------- */ /* O cabeçalho desta pele NÃO é transparente no topo: em um equipamento a testeira existe desde o primeiro pixel. Fundo opaco de chapa, filete embaixo e bisel. Isso também tira do caminho o pior caso de contraste do §7.1.1: barra flutuante sem fundo próprio, cujo pixel é o conteúdo que passa rolando por baixo. Aqui o pixel é sempre a chapa. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .header { background-color: hsl(var(--surface-2)); background-image: var(--ct-brush), var(--ct-plate-image); border-block-end-color: hsl(var(--border)); box-shadow: inset 0 calc(var(--ct-bevel) * -1) 0 hsl(var(--ct-plate-edge-lo) / 0.4); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .header--scrolled, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .header--menu-open { background-color: hsl(var(--surface-2)); backdrop-filter: none; -webkit-backdrop-filter: none; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .header__menu { background-color: hsl(var(--background)); background-image: var(--ct-brush); } /* Cabeçalho de seção: rótulo gravado, filete de topo e respiro curto. É a "moldura de instrumento" do módulo, e ela se repete em todas as seções sem que nenhuma delas precise saber disso. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .section__head { gap: var(--space-3); margin-block-end: var(--space-8); padding-block-start: var(--space-5); border-block-start: calc(var(--hairline) * 2) solid hsl(var(--border)); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .section__head--center { justify-items: center; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .section__head--split { padding-block-start: var(--space-5); border-block-start: calc(var(--hairline) * 2) solid hsl(var(--border)); } /* Painéis de govtech, destaque de contratação e ressalva: a mesma chapa. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech-panel, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech-inco, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contratacao__item { border-radius: var(--radius-md); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech-ressalva { background-color: hsl(var(--surface-2)); } /* Timeline do método: o trilho vira barra de instrumento. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .metodo__line { background-color: hsl(var(--border)); } /* O nó da etapa em repouso: chapa recuada, tinta --muted-foreground, que é o par que sections/metodo.css já declara. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .metodo__node { border-radius: calc(var(--radius-sm) * 0.6); background-image: linear-gradient( to bottom, hsl(var(--ct-inset-hi)) 0%, hsl(var(--ct-inset-lo)) 100% ); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.5); } /* O NÓ ATIVO PRECISA DA PRÓPRIA REGRA, e o motivo é a regra de §12 que já reprovou uma rodada: pele que redefine a SUPERFÍCIE é obrigada a redefinir o -foreground na mesma regra. Aqui o caso é a versão de especificidade dela. `.metodo__node` prefixado pelo portão desta pele vale 0,3,0 e vence `.metodo__node[data-metodo- active]`, que vale 0,2,0 em sections/metodo.css. Sem esta regra, a chapa recuada acima pintava POR CIMA do preenchimento --primary do nó ativo, enquanto a tinta continuava --primary-foreground: medido em pixel, 1,04:1 no claro e 1,14:1 no escuro, cinco ocorrências por página. A correção é dar ao estado ativo a rampa de metal do botão primário, que é o par calibrado de --primary/--primary-foreground desta pele. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .metodo__node[data-metodo-active] { background-color: hsl(var(--primary)); background-image: linear-gradient( to bottom, hsl(var(--ct-metal-hi)) 0%, hsl(var(--ct-metal-mid)) 52%, hsl(var(--ct-metal-lo)) 100% ); border-color: hsl(var(--ct-metal-edge)); color: hsl(var(--primary-foreground)); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-bevel-hi) / 0.55); } /* Cartões de modelos: a mídia recebe o mesmo bisel das placas, sem barra de janela (não são captura de produto, são arte de capa). */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .modelos__card { border-radius: var(--radius-md); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.4), var(--shadow-sm); } /* Bloco de tese e item de confiança: junta de chapa no lugar do filete solto. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .tese-block, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .confianca__item { border-block-start-color: hsl(var(--border)); } /* Fecho: o feixe diagonal de sections/contato.css já existe e já é só transform. Aqui ele só perde a saturação residual e vira luz de aresta, coerente com o resto da pele. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contato__beam { background: linear-gradient( 100deg, transparent 0%, hsl(var(--ct-beam-soft) / 0) 34%, hsl(var(--ct-beam) / 0.55) 50%, hsl(var(--ct-beam-soft) / 0) 66%, transparent 100% ); } /* O brilho que segue o cursor não existe em uma máquina: metal não emite, reflete. A camada some e o cartão continua respondendo por bisel e transform, que é o vocabulário desta pele. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .card--glow::before { display: none; } /* -------------------------------------------------------------------------- 14. Rodapé: placa de identificação de máquina O rodapé vira a plaqueta rebitada que todo equipamento tem: chapa escovada, quatro rebites, os dados técnicos em mono com tracking largo e uma junta gravada acima da linha final. -------------------------------------------------------------------------- */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .footer { position: relative; background-color: hsl(var(--surface-2)); background-image: var(--ct-rivet-image), var(--ct-rivet-image), var(--ct-rivet-image), var(--ct-rivet-image), var(--ct-brush); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat; background-size: var(--ct-rivet) var(--ct-rivet), var(--ct-rivet) var(--ct-rivet), var(--ct-rivet) var(--ct-rivet), var(--ct-rivet) var(--ct-rivet), auto; background-position: var(--space-4) var(--space-4), calc(100% - var(--space-4)) var(--space-4), var(--space-4) calc(100% - var(--space-4)), calc(100% - var(--space-4)) calc(100% - var(--space-4)), 0 0; border-block-start: calc(var(--hairline) * 2) solid hsl(var(--border)); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.4); } /* Título de coluna do diretório: gravação, não rótulo de blog. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .footer__col-title { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; } /* Endereço e copyright em mono: são dados de placa, e é exatamente o uso que o §3 reserva para mono (rótulo e dado tabular). */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .footer__address-line, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .footer__copyright { font-family: var(--font-mono); letter-spacing: calc(var(--tracking-mono) * 0.5); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .footer__base { margin-block-start: var(--space-9); padding-block-start: var(--space-5); border-block-start: var(--hairline) solid hsl(var(--border)); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.4); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .footer__social-link { border-radius: calc(var(--radius-sm) * 0.6); background-image: var(--ct-plate-image); box-shadow: inset 0 var(--ct-bevel) 0 hsl(var(--ct-plate-edge-hi) / 0.45); } /* -------------------------------------------------------------------------- 15. Entrada dos títulos por máscara (text-animate do cult-ui) O motor de revelação já é o de core/motion.js, e nenhum JS novo entra aqui: o que esta pele acrescenta é o ESTILO da revelação, uma máscara que descobre o título de cima para baixo enquanto ele sobe. A REGRA QUE PROTEGE A PÁGINA SEM JS (§6): o estado fechado da máscara só existe enquanto [data-reveal-init] estiver presente E [data-revealed] ausente, e os dois atributos são escritos por core/motion.js. Sem JS, nenhum dos dois existe, nenhuma regra casa e o título aparece inteiro. É a mesma técnica que sections/tese.css e sections/govtech.css já usam. O §6.0 permite clip-path em transição PONTUAL, de curta duração, que roda uma vez por elemento e é apagada no fim. As três condições são atendidas por construção: o seletor deixa de casar assim que o motor marca [data-revealed], então a propriedade some sozinha e nada fica pendurado para a auditoria de contraste encontrar. A duração máxima, somando o maior atraso de linha, fica em 711ms, abaixo dos 820ms de --dur-slow. -------------------------------------------------------------------------- */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .section__head > h2[data-reveal], :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech__title[data-reveal], :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .metodo__title[data-reveal], :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .modelos__title[data-reveal] { transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out), clip-path calc(var(--dur-base) * 1.3 * var(--motion)) var(--ease-out); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .section__head > h2[data-reveal-init]:not([data-revealed]), :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech__title[data-reveal-init]:not([data-revealed]), :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .metodo__title[data-reveal-init]:not([data-revealed]), :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .modelos__title[data-reveal-init]:not([data-revealed]) { clip-path: inset(0 0 108% 0); } /* A dobra recebe a versão por LINHA: as quatro linhas do título já são nós próprios (partials/hero.js entrega .hero__line), então cada uma tem a própria máscara e o próprio atraso. É a leitura mais próxima do text-animate original que dá para fazer sem JS novo, porque a divisão em palavras exigiria reescrever o partial, o que o §0.1 proíbe. */ :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__title .hero__line { transition: clip-path calc(var(--dur-base) * 1.3 * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * 1.3 * var(--motion)) var(--ease-out); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__title[data-reveal-init]:not([data-revealed]) .hero__line { clip-path: inset(0 0 108% 0); transform: translateY(0.3em); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__title .hero__line:nth-child(2) { transition-delay: calc(55ms * var(--motion)); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__title .hero__line:nth-child(3) { transition-delay: calc(110ms * var(--motion)); } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__title .hero__line:nth-child(n + 4) { transition-delay: calc(165ms * var(--motion)); } /* -------------------------------------------------------------------------- 16. Movimento reduzido e interruptor do estúdio Duas redes, e as duas fazem a mesma coisa: congelar o feixe, congelar o grid-beam e ABRIR a máscara. Abrir a máscara é a parte que não é higiene: 05-motion.css força opacity e transform, mas não conhece clip-path, e um título mascarado com a transição zerada ficaria mascarado para sempre. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contato__cta::before, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo::before, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero::after { animation: none !important; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero::after { opacity: 0; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .section__head > h2[data-reveal-init]:not([data-revealed]), :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech__title[data-reveal-init]:not([data-revealed]), :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .metodo__title[data-reveal-init]:not([data-revealed]), :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .modelos__title[data-reveal-init]:not([data-revealed]), :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__title[data-reveal-init]:not([data-revealed]) .hero__line { clip-path: none !important; transform: none !important; } } @container style(--motion: 0) { :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .contato__cta::before, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .portfolio__card--resumo::before, :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero::after { animation: none !important; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero::after { opacity: 0; } :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .section__head > h2[data-reveal-init]:not([data-revealed]), :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .govtech__title[data-reveal-init]:not([data-revealed]), :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .metodo__title[data-reveal-init]:not([data-revealed]), :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .modelos__title[data-reveal-init]:not([data-revealed]), :is([data-skin="cult"], [data-skin-base="cult"]:not([data-skin])) .hero__title[data-reveal-init]:not([data-revealed]) .hero__line { clip-path: none !important; transform: none !important; } } /* CORREÇÃO 2026-08-05 (varredura --pattern × pele, §12.3 do contrato): a regra "12a rodada" que existia aqui ([data-pattern-user] body::before/ ::after { background-image: none }) tinha a polaridade TROCADA em relação ao próprio acordo que ela dizia seguir. Nesta pele body::before NUNCA foi campo ambiente próprio (§2 desta folha, acima: o alumínio escovado + ruído pintam em background-image do , não em body::before); body::before continua sendo, por construção, o --pattern do estúdio, só com opacidade reforçada em 1.15 (regra logo acima). A regra removida escondia o body::before exatamente quando data-pattern- user estava PRESENTE — ou seja, exatamente quando o dono ESCOLHIA um padrão diferente de "grid" no painel — e deixava passar só o caso "grid" (o único que nunca escreve o atributo, por ser o valor de fábrica de --pattern). Medido: com a pele em fábrica, "Grade" pintava (o gate estava fechado, então nada escondia body::before); "Pontos", "Granulado", "Aurora" e "Malha" — as quatro escolhas que DEVERIAM acender data-pattern-user — apagavam o próprio padrão que a acendeu. Quatro dos seis valores do catálogo ficavam mudos nesta pele. Sem essa regra, body::before volta a mostrar --pattern-image sem gate nenhum, para os seis valores, exatamente como a pele padrão — e a identidade "leitura de fábrica é só o alumínio + ruído" continua correta, porque de fábrica --pattern resolve para "grid" e body::before pinta a grade por cima do metal, que é o que a fábrica desta pele sempre mostrou (medido antes desta correção: --pattern: grid já pintava). */