/* ========================================================================== NEXUS theme-final / assets/css/06-skin-glass.css Pele de index2.html. Território exclusivo deste arquivo: só CSS. Ativada por [data-skin="glass"] no mais esta folha, carregada por último no . Nenhum outro arquivo é tocado, nenhum partial sabe que esta pele existe. POR QUE ESTA VERSÃO É DIFERENTE DAS DUAS ANTERIORES As duas tentativas anteriores trataram a pele como acabamento de superfície: raio maior, translucidez, sombra, padrão de fundo. Isso muda textura, não identidade. Enquanto tipografia, ritmo vertical, largura de coluna, densidade, alinhamento e hierarquia continuassem idênticos, as duas páginas continuavam sendo a mesma página com outro verniz, e o julgamento mediu isso: menos de 4% dos pixels da dobra divergindo no escuro. Esta versão troca a IDENTIDADE inteira dentro do que a camada de pele pode alcançar sem tocar em partial, JS ou outro CSS. As duas páginas passam a ser duas propostas com o mesmo conteúdo: index.html denso, tipográfico, aresta seca. Bricolage Grotesque com tracking negativo, entrelinha de display em 1.02, grade técnica ao fundo, cabeçalho de seção alinhado à esquerda, filete como recurso de separação, campo preto absoluto. index2.html arejado, luminoso, centrado. Funnel Display sobre Geist, tracking quase nulo, entrelinha de display em 1.14 a 1.20, peso de display leve, raio no teto da faixa do estúdio (1.5rem), ritmo vertical 14% mais folgado, coluna mais estreita dentro de margens maiores, cabeçalho de seção centralizado, rótulo em cápsula, botão em pílula, cabeçalho do site flutuando como barra solta, e um AMBIENTE: o campo deixa de ser preto absoluto (ou branco absoluto) e vira uma sala iluminada, acromática, onde as superfícies de vidro realmente flutuam. TRÊS DECISÕES GOVERNAM O ARQUIVO 1. FONTE DE LUZ ÚNICA, no alto e ao CENTRO. A pele anterior usava luz no alto à esquerda, que é a mesma assimetria do halo de index.html. Aqui a luz é simétrica, porque a página é simétrica: cabeçalho de seção centralizado, mídia centralizada, régua centralizada. Toda aresta clara aponta para cima, toda aresta escura fica na base. É isso que faz vidro neutro ler como caro em vez de cinza. 2. AMBIENTE ACROMÁTICO, NUNCA COR. Nenhuma mancha colorida em lugar nenhum: só luminosidade. No escuro, o campo sobe de 4% para uma faixa entre 10% e 19% de luminosidade, com aurora de luz branca por cima. No claro, o inverso do óbvio: o campo desce de 100% para cerca de 89%, porque vidro branco sobre branco não existe sem um ambiente mais fechado do que ele. Os dois movimentos foram medidos contra AA (§8) e os números estão anotados em cada bloco. 3. VIDRO SÓ SOBRE TEXTURA. Três camadas fixas cobrem a viewport inteira (campo, aurora, grão), então qualquer superfície de vidro, em qualquer ponto da rolagem, tem ambiente por trás. Nunca chapado, nunca mais de duas camadas de vidro sobrepostas. DIVERGÊNCIAS REGISTRADAS em relação ao contrato §12 a) BORDA MODULADA POR LADO. O contrato descreve a borda como `1px solid hsl(var(--border) / 0.6)`, uniforme nos quatro lados. Uniforme é o que não funciona em paleta neutra: --border no tema claro é 0 0% 90%, mais claro que o campo ambiente desta pele, e uma borda mais clara que o fundo do lado da sombra achata a peça. Aqui a borda continua de 1px e continua um token único, só que modulada por lado (--glass-edge-hi / -mid / -lo). O resto da receita (background, backdrop-filter, box-shadow com realce interno de 1px e sombra) é o do contrato, palavra por palavra. b) --card REDEFINIDO NO ESCURO (0 0% 6.5% vira 0 0% 26%). A receita do §12 é `hsl(var(--card) / var(--glass-alpha))`, e ela pressupõe fundo mais escuro que a peça. Com o ambiente desta pele em 13% a 19%, um card de 6.5% ficaria MAIS ESCURO que o próprio fundo e o vidro inverteria de sentido. Redefinir o token na pele mantém a receita literal e devolve a hierarquia. Medido: composto do card em 22%, ambiente em 15%, sete pontos de separação. c) --input RECALCULADO NOS DOIS MODOS (0 0% 56% / 0 0% 39.5% viram 0 0% 46% / 0 0% 56%), pelo mesmo motivo de (b) e com o mesmo precedente da pele surface: quando a pele muda a superfície onde o componente pousa, o token calibrado contra a superfície antiga deixa de valer. E a divergência (a) passa a ter ESCOPO escrito: luz de aresta é limite de SUPERFÍCIE DECORATIVA; COMPONENTE INTERATIVO tem limite próprio. Sem esse escopo, .btn--outline, .chip inativo, .govtech__head-link e .btn--secondary ficavam com uma borda BRANCA sobre um campo de 89%, ou seja, 1,28:1 no tema claro contra os 3:1 do §8. Foi o defeito 1 da quinta rodada. Detalhe e medições no bloco 1 (tokens) e no bloco "limite de componente interativo" da seção 3. d) RAMPA DE TINTA RECALCULADA (--muted-foreground e --faint-foreground, nos dois modos). Mesmo movimento de (c), agora em texto: a rampa de 01-tokens.css foi calibrada contra o fundo da PÁGINA PADRÃO (rgb 10 no escuro, branco absoluto no claro) e esta pele pinta uma sala acesa, onde o fundo medido sob tinta subordinada vai de rgb(63) a rgb(78). O §2.5 proíbe alfa por seletor e manda exatamente isto: recalibrar o token para o ambiente. Números medidos no bloco 1. e) CABEÇALHO E PAINEL DO ESTÚDIO SAEM DA APOSTA DO ALFA. As duas únicas superfícies desta pele cujo fundo NÃO é o ambiente conhecido da seção 2 (as duas são `position: fixed` e têm a página inteira rolando por trás) ganham preenchimento próprio: a barra fica com --glass-header-fill / --glass-header-alpha e o painel do estúdio fica opaco em --surface-1. Justificativa longa em cada um dos dois blocos. REGRAS DURAS RESPEITADAS Zero rede (o grão é SVG em data URI, mesma técnica do --pat-noise de 01-tokens.css), zero hex, nenhuma cor derivada de matiz por calc(), só transform e opacity animam, toda duração multiplicada por var(--motion), fallback obrigatório em @supports not (backdrop-filter), congelamento sob prefers-reduced-motion, contraste AA nos dois modos. Índice: 1. Tokens da pele: tipografia, ritmo, forma, cor e luz, por tema 2. Ambiente em três camadas: campo, aurora e grão 3. Receita única de vidro: superfícies, etiquetas e estados 4. Chassi: cabeçalho flutuante, cabeçalho de seção, rótulo, botão 5. Dobra: hero arejado com mídia flutuante 6. Seções reorganizadas: tese e método empilhados, régua centrada 7. Luz de aresta em mídia e realce que segue o cursor 8. Acromatismo: halos que ainda carregavam matiz 9. Fallback sem backdrop-filter 10. Congelamento: prefers-reduced-motion e --motion 0 ========================================================================== */ /* -------------------------------------------------------------------------- 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: ele é o efetivo do §7.3 e as media queries de 1900/2400/3200px continuam mandando nele. O que muda é a FORMA da escala, token a token, sempre multiplicada por var(--scale). -------------------------------------------------------------------------- */ [data-skin="glass"] { /* --- famílias: outra dupla, não outra variação da mesma dupla --- Funnel Display é geométrica, de contraste baixo e ombro alto; ao lado da Bricolage Grotesque de index.html a diferença de desenho é imediata em qualquer título. Geist no corpo tem eixo mais estreito e altura de x menor que a Manrope, então a mancha de texto também muda. Mono continua Geist Mono nos dois: rótulo técnico é a única coisa que as duas propostas compartilham de propósito. */ --font-display: "Funnel Display", 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; /* --- escala tipográfica: mesma mecânica, outra proporção --- Corpo e lead sobem, títulos sobem mais e ganham ar. Nenhum px fixo, todos multiplicados por var(--scale) como o §3 exige. */ --fs-xs: calc(0.78rem * var(--scale)); --fs-sm: calc(0.9rem * var(--scale)); --fs-base: calc(1.02rem * var(--scale)); --fs-lead: calc(clamp(1.14rem, 1.02rem + 0.5vw, 1.45rem) * var(--scale)); --fs-h3: calc(clamp(1.35rem, 1.14rem + 0.95vw, 2rem) * var(--scale)); --fs-h2: calc(clamp(2rem, 1.4rem + 2.6vw, 3.9rem) * var(--scale)); --fs-h1: calc(clamp(2.6rem, 1.6rem + 4.6vw, 5.75rem) * var(--scale)); --fs-mega: calc(clamp(3.2rem, 1.7rem + 6.4vw, 8.5rem) * var(--scale)); /* --- ritmo tipográfico: o oposto do denso --- index.html aperta (display 1.02, tracking -0.03em, medida 68ch). Aqui o display respira (1.20), o tracking quase some (-0.008em) e a medida encurta para 56ch, o que muda TODA quebra de linha da página. */ --lh-body: 1.78; --lh-display: 1.2; --lh-tight: 1.32; --tracking-display: -0.008em; --tracking-mono: 0.16em; --measure: 56ch; /* --- ritmo vertical e largura --- Densidade 14% acima do padrão e respiro de seção quase o dobro no piso. O container encurta de 1240px para 1100px: em 1280px de viewport a coluna de conteúdo cai de 1160px para 986px e as margens saltam de 60px para 147px de cada lado. Acima de 1560px a rampa do §7.3 continua valendo palavra por palavra, porque ela é escrita em cima destes dois tokens e não em números soltos. --grid-min sobe junto: grade de cartão com trilha mais larga é menos colunas e mais ar. */ --density: 1.14; --section-y: calc(clamp(6rem, 3.8rem + 8vw, 12rem) * var(--density)); --gutter: clamp(1.5rem, 1rem + 3.2vw, 4.5rem); --container: 1100px; --grid-min: 320px; /* --- cabeçalho: barra e marca reduzidas (varredura "vidro", 06/08/2026) --- Pedido do dono, com captura: a barra flutuante e o wordmark "grandes demais" em 1440px. Medido antes: --header-h em 5.25rem (84px) fazia a cápsula flutuante (§4.1, block-size: var(--header-h) - var(--space-5)) nascer com 61,2px de altura e a faixa colada do mobile com 84px cheios — a mais alta das quatro peles (surface 56px, cult 60px, smooth 76px, glass 84px). --header-h desce para 4.5rem (72px), o mesmo piso do cabeçalho padrão de 01-tokens.css: a cápsula cai para 49,2px, ainda 5,2px acima do --tap-min de 44px (§8), e a faixa mobile para 72px, a mesma altura que já funciona na pele padrão. Como o padding do hero depende de --header-h por cálculo (§5, padding-block-start: calc(var(--header-h) + …)), a folga acima da dobra encolhe junto, sem vão sobrando. --logo-scale é o multiplicador que sections/header.css já expõe para este fim exato (§8.4 daquele arquivo, block-size: clamp(…) * var(--scale) * var(--logo-scale, 0.8)) — o controle "Tamanho do logo" do estúdio escreve nele por inline style, com portão que só entra quando o dono mexe no slider (o próprio arquivo documenta: "em 0.8 ele reproduz byte a byte a declaração de .header__mark", e por isso nenhum portão é necessário). Definir 0,8 aqui, byte a byte igual ao fallback do chassi (fábrica de agosto de 2026; era 1), é redundante em valor mas continua sendo o PISO desta pele, exatamente como --header-h acima: se o chassi um dia mudar de novo, esta linha é que garante a proporção específica de vidro, sem que nenhuma folha precise saber que a outra existe. 0,8 é 20% menor que o antigo piso de fábrica, dentro da faixa pedida (15–25%), e a proporção do wordmark não muda porque a medida é a ALTURA (§8.4): a largura acompanha sozinha. */ --header-h: 4.5rem; --logo-scale: 0.8; /* --- forma: raio no teto da faixa do estúdio (§2.3) --- */ --radius: 1.5rem; /* --- vidro e profundidade --- */ --glass-blur: 30px; --glass-sat: 150%; --glass-alpha: 0.8; --glass-band-alpha: 0.55; /* faixa de borda a borda: mais fina que um cartão */ --shadow-strength: 1; /* --- preenchimento e opacidade do CABEÇALHO, separados do resto do vidro --- DIVERGÊNCIA REGISTRADA (rodada de agosto de 2026, defeito 1 do veredito). Toda superfície desta pele pousa sobre um fundo PREVISÍVEL: o ambiente em três camadas da seção 2, cujo piso e teto de luminosidade estão medidos e anotados em --glass-field. A barra do cabeçalho é a única exceção: ela é `position: fixed` e o que passa por baixo dela é a página inteira, inclusive captura de produto de fundo branco em #hero, #portfolio e #cases. Alfa de vidro é uma aposta sobre o que está pintado atrás, e nessa barra a aposta não tem como ser vencida por tinta nenhuma: o composto medido variava de rgb(10) a rgb(153) ao longo da rolagem. Por isso o cabeçalho ganha PREENCHIMENTO e OPACIDADE próprios, em vez de herdar --card e --glass-alpha. É o mesmo movimento do --input do bloco abaixo: quando o ambiente de um componente não é o ambiente da pele, o token é recalculado para o ambiente REAL dele. No tema claro nada muda: --card é branco absoluto, a tinta da barra é escura, e o pior caso (backdrop preto sob 20% de translucidez) ainda compõe em rgb(204), onde --muted-foreground desta pele (0 0% 31%, rgb 79) mede 5,10:1. O tema claro já fechava em zero e continua com os mesmos números. Os valores do escuro estão no bloco [data-theme="dark"]. */ --glass-header-fill: var(--card); --glass-header-alpha: var(--glass-alpha); /* as duas únicas "cores" desta pele: luz e ausência de luz */ --glass-light: 0 0% 100%; --glass-dark: 0 0% 0%; /* --- texto secundário, tema claro --- O campo desce para cerca de 89% de luminosidade (ver --glass-field abaixo) e --muted-foreground de fábrica (0 0% 42%) daria 4,21:1 sobre ele, abaixo do mínimo AA do §8. Escurecer o token devolve a folga. O valor não foi escolhido pelo caso fácil e sim pelo pior caso da página: sections/portfolio.css escreve o rótulo da nota como `hsl(var(--muted-foreground) / 0.8)`, ou seja, o token já chega ali rebaixado por alfa. Medido em pixel da captura desta rodada, com o token em 0 0% 34% esse rótulo dava 4,23:1, abaixo de AA (em index.html o mesmo rótulo dá 3,54:1, defeito herdado que esta pele não pode corrigir lá). Em 0 0% 31% ele sobe para 4,72:1, o texto de corpo sobre o campo vai a 6,2:1 e sobre a superfície de vidro a 7,6:1. O ambiente mais fechado é pago com tinta mais escura, nunca com texto mais fraco. */ --muted-foreground: 0 0% 31%; /* --- tinta fraca, tema claro (§2.5) --- REGRA DE PELE do §12: --faint-foreground é um -foreground, e pele que move a superfície é obrigada a mover o -foreground na mesma regra. 01-tokens.css fecha o token em 0 0% 34% e calibra esse valor contra o BRANCO ABSOLUTO da pele padrão. Esta pele não tem branco absoluto: o campo desce para 89% (rgb 227) e a superfície de vidro compõe em 98%. Medido em pixel renderizado contra o pior fundo do tema claro (o piso do campo, rgb 227): 0 0% 34% dá 5,63:1 e passa, mas fica MENOS tinta que o --muted-foreground desta pele (31%), invertendo a ordem que o §2.5 estabelece (a tinta fraca é um passo mais TINTA, não menos). 0 0% 28% devolve a ordem e mede 7,24:1 sobre o mesmo piso. A subordinação continua vindo do tamanho, do peso e da caixa alta, nunca da tinta. */ --faint-foreground: 0 0% 28%; /* --- luz de aresta, tema claro --- Fonte de luz no alto e ao centro: topo quase branco puro, laterais um passo abaixo e simétricas, base em tinta escura translúcida. ESCOPO (rodada de agosto de 2026, correção do defeito 1 do veredito): estes três tokens são luz, não limite. Valem para SUPERFÍCIE DECORATIVA (cartão, painel, faixa, cápsula de rótulo, crachá, moldura de mídia). Componente interativo tem tratamento próprio, mais abaixo em --input. Ver o bloco "limite de componente interativo" da seção 3. */ --glass-edge-hi: hsl(var(--glass-light) / 0.95); --glass-edge-mid: hsl(var(--glass-light) / 0.7); --glass-edge-lo: hsl(var(--glass-dark) / 0.14); /* --- limite de componente interativo, tema claro --- DIVERGÊNCIA REGISTRADA, e é a correção do defeito 1 da quinta rodada. 01-tokens.css fecha --input em 0 0% 56% e calibra esse valor contra o branco absoluto da pele padrão (3,24:1 sobre --background, 3,11:1 sobre --surface-2). Esta pele não tem branco absoluto: o campo desce para cerca de 89% de luminosidade (ver --glass-field). Sobre 89% o mesmo 0 0% 56% cai para 2,53:1 e reprova os 3:1 do §8. A pele surface já abre o precedente: quando a pele muda a superfície onde o componente pousa, ela recalcula o próprio --input (08-skin-surface.css). Aqui é o mesmo movimento, no outro sentido. Medido em pixel renderizado, 1920×1080, contra o ambiente real de 227 (89%) e contra o preenchimento de vidro do próprio botão (~99%): 0 0% 56% ambiente 2,53:1 preenchimento 3,24:1 (reprova) 0 0% 46% ambiente 3,59:1 preenchimento 4,49:1 (passa dos dois lados) O piso escolhido é o pior dos dois vizinhos, não o melhor: o limite precisa existir tanto contra a sala quanto contra o vidro. */ --input: 0 0% 46%; --glass-inset: inset 0 1px 0 hsl(var(--glass-light) / 0.9), inset 1px 0 0 hsl(var(--glass-light) / 0.5), inset -1px 0 0 hsl(var(--glass-light) / 0.5), inset 0 -1px 0 hsl(var(--glass-dark) / 0.08); /* Profundidade no lugar do filete: três raios de sombra, o mais longo com 84px de espalhamento, é o que faz a peça FLUTUAR em vez de estar desenhada sobre o fundo. Tudo modulado por --shadow-strength, então quem zera a profundidade pelo estúdio continua zerando. */ --glass-drop: 0 1px 2px hsl(var(--glass-dark) / calc(0.05 * var(--shadow-strength))), 0 18px 34px -20px hsl(var(--glass-dark) / calc(0.24 * var(--shadow-strength))), 0 48px 84px -38px hsl(var(--glass-dark) / calc(0.36 * var(--shadow-strength))); /* halo de emissão do quadro do hero (ver §7) */ --glass-emit: 0 0 90px -28px hsl(var(--glass-dark) / calc(0.3 * var(--shadow-strength))); /* reflexo especular fixo, na direção da fonte de luz: a crista de luz desce do topo e cai antes da metade da peça */ --glass-sheen: linear-gradient( 177deg, hsl(var(--glass-light) / 0.92) 0%, hsl(var(--glass-light) / 0.34) 30%, hsl(var(--glass-light) / 0) 58% ); /* --- ambiente, tema claro --- index.html no claro é branco absoluto de ponta a ponta. Aqui o campo desce para cerca de 89% de luminosidade no canto mais fechado e 94% no alto, e é a superfície de vidro (composta em 98%) que passa a ser a coisa mais clara da tela. Sem esse rebaixamento não existe vidro branco sobre branco, só retângulo invisível. Medido: --muted-foreground desta pele (0 0% 34%) sobre o piso do campo dá 5,63:1, acima do mínimo AA de 4,5:1 do §8. O campo é o piso e o piso é o pior caso, porque a aurora do tema claro só ACRESCENTA luz: todo desvio local melhora o contraste, nunca piora. */ --glass-field: radial-gradient(128% 74% at 50% -12%, hsl(var(--glass-light) / 0.75), transparent 66%), linear-gradient( 180deg, hsl(var(--glass-dark) / 0.055) 0%, hsl(var(--glass-dark) / 0.1) 48%, hsl(var(--glass-dark) / 0.125) 100% ); /* Aurora simétrica: duas manchas altas nos ombros, uma poça larga na base. O desenho é espelhado no eixo vertical, ao contrário do halo assimétrico de index.html. */ --glass-aurora: radial-gradient(52% 42% at 50% -6%, hsl(var(--glass-light) / 0.9), transparent 70%), radial-gradient(34% 30% at 6% 26%, hsl(var(--glass-light) / 0.5), transparent 72%), radial-gradient(34% 30% at 94% 26%, hsl(var(--glass-light) / 0.5), transparent 72%), radial-gradient(58% 40% at 50% 104%, hsl(var(--glass-light) / 0.45), transparent 72%); /* GRÃO no lugar de GRADE. A grade técnica de 64px é a assinatura de index.html; repeti-la aqui, em qualquer escala, é repetir a identidade do outro lado. O grão é o oposto: alta frequência, sem direção, sem régua. Continua sendo textura de verdade sob o vidro (o §12 exige que vidro nunca caia sobre chapado) e continua sem rede, porque é um SVG em data URI, a mesma técnica do --pat-noise-image de 01-tokens.css. */ --glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"); --glass-grain-size: 220px 220px; --glass-grain-opacity: 0.07; /* halo do hero, acromático e simétrico (ver §8) */ --glass-halo: radial-gradient(56% 46% at 50% 0%, hsl(var(--glass-light) / 0.72), transparent 72%), radial-gradient(40% 40% at 8% 34%, hsl(var(--glass-light) / 0.34), transparent 70%), radial-gradient(40% 40% at 92% 34%, hsl(var(--glass-light) / 0.34), transparent 70%); } [data-skin="glass"][data-theme="dark"] { /* --- superfície de vidro no escuro --- Divergência (b) do cabeçalho: com o ambiente entre 13% e 19% de luminosidade, --card de fábrica (6.5%) deixaria a peça mais escura que o fundo. Em 26%, com alfa 0.55, o composto fica em torno de 22% contra 15% de ambiente: a peça é mais clara que a sala, que é o que "vidro" significa. --card-foreground continua 98%, contraste 10,8:1. */ --card: 0 0% 26%; --glass-alpha: 0.55; --glass-band-alpha: 0.42; /* --- RAMPA DE TINTA RECALCULADA PARA O AMBIENTE REAL DESTA PELE --- Correção dos defeitos 2 e 4 do veredito de 4 de agosto de 2026, e é o mesmo padrão que já fechou o defeito 1 da quinta rodada logo abaixo, em --input: quando a pele muda a superfície onde a coisa pousa, o token calibrado contra a superfície antiga deixa de valer e a pele recalcula o próprio valor. O §2.5 proíbe alfa por seletor; recalibrar o token para o ambiente é exatamente o que ele manda fazer. O ambiente é o que a seção 2 desenha de propósito: uma SALA ACESA. O campo vai de 10% a 17%, a aurora leva o pico a 19,4%, --card sobe para 26% e a crista de --glass-sheen soma até 16% de branco no alto de cada peça. O resultado é que o fundo sob tinta subordinada não é o rgb(10) da página padrão: medido em pixel renderizado, ele vai de rgb(63) a rgb(78) em cartão, cápsula, crachá e faixa. A rampa de 01-tokens.css foi calibrada contra rgb(10) e não tem tinta AA para esse ambiente. Não é defeito de tinta nem de ambiente isolados: é um token de um ambiente usado em outro. Medições da rodada anterior que fixam o pior caso (ink = tinta antiga): span.capacidades__index bg rgb(70) ink rgb(168) 3,91:1 span.contratacao__item-index::before bg rgb(77) ink rgb(168) 3,55:1 p.contratacao__spotlight-text bg rgb(63) ink rgb(168) 4,43:1 span.portfolio__badge bg rgb(77) ink rgb(184) 4,26:1 p.govtech-inco__eyebrow bg rgb(78) ink rgb(184) 4,19:1 Os dois valores abaixo não foram escolhidos pelo caso medido e sim pelo TETO do ambiente mais uma folga, para que a próxima peça de vidro que nascer num ponto mais claro da sala não reabra o defeito: --muted-foreground 0 0% 80% (rgb 204) passa 4,5:1 até um fundo rgb(87) --faint-foreground 0 0% 85% (rgb 217) passa 4,5:1 até um fundo rgb(95) contra um teto medido de rgb(78). A ordem do §2.5 é respeitada: a tinta fraca continua sendo um passo mais TINTA que a subordinada (85% contra 80% no escuro, como 28% contra 31% no claro), e continua sem alfa. */ --muted-foreground: 0 0% 80%; --faint-foreground: 0 0% 85%; /* --- cabeçalho no escuro: onde a aposta do alfa não pode ser feita --- Continuação da divergência registrada no bloco claro. Aqui os números: A barra é `position: fixed` e o backdrop dela é a página inteira. Com o preenchimento de vidro comum (--card 26% a 55% de opacidade) o composto sob o texto seguia o que estava rolando por baixo, e a varredura de 65 paradas de rolagem em 1920x1080 mediu 14 paradas abaixo do piso do §8, 7 delas abaixo de 3:1, com pior caso 1,44:1 sobre captura de produto branca. Modelo conferido contra o pixel: 0,55*66 + 0,45*250 + crista = rgb(152). A saída é bloquear a variação na OPACIDADE, não na tinta, porque tinta nenhuma resolve um fundo que anda de rgb(10) a rgb(153). Mas subir só o alfa com --card 26% ainda deixaria o pior caso em rgb(85), colado no teto da tinta. Então o preenchimento da barra também desce: 20% em vez de 26%. A dupla é escolhida por duas desigualdades, não por gosto: a) sobre o pior backdrop possível, o branco puro, o composto tem que ficar abaixo do teto de --muted-foreground (rgb 87): 0,90*51 + 0,10*255 = rgb(72), com folga de 15; b) sobre a sala vazia (rgb 40) a barra tem que continuar MAIS CLARA que a sala, senão a cápsula flutuante desta pele vira um bloco preto: 0,90*51 + 0,10*40 = rgb(50), acima dos rgb(40) do campo. Os 10% de translucidez que sobram continuam mostrando o conteúdo desfocado e saturado passando por baixo: a barra continua sendo vidro, só deixou de ser vidro que aposta. Efeito colateral deliberado: no escuro o controle --glass-alpha do estúdio deixa de mexer no cabeçalho. É um piso, não um esquecimento. O slider continua mandando em cartão, cápsula, crachá e faixa, que pousam sobre um ambiente conhecido; a única superfície cujo fundo é imprevisível fica fora do alcance dele, para que nenhum ajuste do painel possa apagar a navegação primária. No tema claro o cabeçalho continua herdando --glass-alpha, porque lá a tinta é escura e o pior caso já mede 5,10:1. */ --glass-header-fill: 0 0% 20%; --glass-header-alpha: 0.9; /* --- luz de aresta, tema escuro --- Mesma direção de luz, intensidades invertidas: o realce branco fica discreto (uma linha, não um traço) e a aresta de sombra fica funda, que é o que recorta a peça contra a sala. Mesmo escopo do tema claro: isto é luz de superfície decorativa, não limite de componente interativo. */ --glass-edge-hi: hsl(var(--glass-light) / 0.3); --glass-edge-mid: hsl(var(--glass-light) / 0.13); --glass-edge-lo: hsl(var(--glass-dark) / 0.5); /* --- limite de componente interativo, tema escuro --- Pelo mesmo motivo do tema claro, invertido: a sala desta pele vai de 10% a 19% de luminosidade em vez dos 4% da pele padrão, e o preenchimento de vidro do botão compõe em torno de 21%. Sobre 21%, o 0 0% 39.5% de 01-tokens.css dá 1,92:1. Medido em pixel renderizado, 1920×1080, contra o ambiente (23) e contra o preenchimento do botão (~55): 0 0% 39.5% ambiente 2,58:1 preenchimento 1,92:1 (reprova) 0 0% 56% ambiente 5,54:1 preenchimento 3,67:1 (passa dos dois lados) A aresta de luz do escuro sozinha já media 3,69:1 e passava; o token entra mesmo assim, porque o limite do componente não pode depender de em que ponto do gradiente de ambiente a peça caiu. */ --input: 0 0% 56%; --glass-inset: inset 0 1px 0 hsl(var(--glass-light) / 0.26), inset 1px 0 0 hsl(var(--glass-light) / 0.1), inset -1px 0 0 hsl(var(--glass-light) / 0.1), inset 0 -1px 0 hsl(var(--glass-dark) / 0.5); --glass-drop: 0 1px 2px hsl(var(--glass-dark) / calc(0.3 * var(--shadow-strength))), 0 22px 42px -26px hsl(var(--glass-dark) / calc(0.6 * var(--shadow-strength))), 0 56px 96px -46px hsl(var(--glass-dark) / calc(0.72 * var(--shadow-strength))); --glass-emit: 0 0 110px -18px hsl(var(--glass-light) / calc(0.18 * var(--shadow-strength))); --glass-sheen: linear-gradient( 177deg, hsl(var(--glass-light) / 0.16) 0%, hsl(var(--glass-light) / 0.05) 30%, hsl(var(--glass-light) / 0) 56% ); /* --- ambiente, tema escuro --- Esta é a separação mais forte entre as duas propostas. index.html no escuro é preto absoluto (4% de luminosidade) com um halo local; aqui a sala é iluminada de ponta a ponta: o piso do campo fica perto de 10% e o alto chega a 17%, e a aurora leva o pico para cerca de 19%. Medido com a mesma conta de composição alfa usada no tema claro: linear em 0.05 sobre 4% dá 8,7%; o radial de topo em 0.09 leva a 17%; a mancha mais forte da aurora (0.03) leva a 19,4%. --muted-foreground desta pele (0 0% 70%) sobre 19,4% dá 6,03:1 e --foreground (98%) dá 11,9:1, com folga sobre o mínimo do §8. O teto de 19,4% é deliberado: acima disso o texto secundário começaria a raspar em AA. */ --glass-field: radial-gradient(128% 78% at 50% -10%, hsl(var(--glass-light) / 0.09), transparent 68%), linear-gradient( 180deg, hsl(var(--glass-light) / 0.055) 0%, hsl(var(--glass-light) / 0.042) 46%, hsl(var(--glass-light) / 0.062) 100% ); --glass-aurora: radial-gradient(52% 42% at 50% -6%, hsl(var(--glass-light) / 0.03), transparent 70%), radial-gradient(34% 30% at 6% 26%, hsl(var(--glass-light) / 0.022), transparent 72%), radial-gradient(34% 30% at 94% 26%, hsl(var(--glass-light) / 0.022), transparent 72%), radial-gradient(58% 40% at 50% 104%, hsl(var(--glass-light) / 0.026), transparent 72%); --glass-grain-opacity: 0.05; --glass-halo: radial-gradient(56% 46% at 50% 0%, hsl(var(--glass-light) / 0.05), transparent 72%), radial-gradient(40% 40% at 8% 34%, hsl(var(--glass-light) / 0.028), transparent 70%), radial-gradient(40% 40% at 92% 34%, hsl(var(--glass-light) / 0.028), transparent 70%); } /* Desfoque pesado em área grande custa caro em GPU móvel: mais barato em tela estreita, mesma receita visual. */ @media (max-width: 480px) { [data-skin="glass"] { --glass-blur: 20px; } } /* -------------------------------------------------------------------------- 2. Ambiente em três camadas Camada 1, o CAMPO: background-image do próprio (que já tem background-color de 02-base.css). É a única camada estática, de propósito: é ela que define o piso de luminosidade em que todo o contraste foi medido, e uma base de leitura não pode respirar. background-attachment: fixed ancora o gradiente na viewport em vez de esticá-lo por mais de 20.000px de documento. Camada 2, a AURORA: body::before, z-index -2. Só luz, sem matiz, lenta. Camada 3, o GRÃO: body::after, z-index -1. Alta frequência, sem direção. As duas camadas de cima se movem em fases e velocidades diferentes (32s e 44s), só por translate3d/scale. Cada regra redeclara toda propriedade que a versão base de body::before (02-base.css) define, para não herdar máscara nem mix-blend-mode do sistema de --pattern do estúdio: esta pele tem ambiente próprio, sempre ligado, independente do padrão escolhido no painel. -------------------------------------------------------------------------- */ @keyframes nx-glass-aurora { from { transform: translate3d(-2%, -2.5%, 0) scale(1.06); } to { transform: translate3d(2%, 2%, 0) scale(1.18); } } @keyframes nx-glass-grain { from { transform: translate3d(-1.2%, -1.2%, 0) scale(1.02); } to { transform: translate3d(1.2%, 1.6%, 0) scale(1.06); } } [data-skin="glass"] { background-image: var(--glass-field); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; background-attachment: fixed; } [data-skin="glass"] body::before { content: ""; position: fixed; inset: -16%; z-index: -2; pointer-events: none; background-image: var(--glass-aurora); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; background-color: transparent; opacity: 1; mix-blend-mode: normal; mask-image: none; -webkit-mask-image: none; will-change: transform; contain: layout paint; animation-name: nx-glass-aurora; animation-duration: calc(var(--motion) * 32s); animation-timing-function: var(--ease-io); animation-iteration-count: infinite; animation-direction: alternate; } [data-skin="glass"] body::after { content: ""; position: fixed; inset: -8%; z-index: -1; pointer-events: none; background-image: var(--glass-grain); background-repeat: repeat; background-position: 0 0; background-size: var(--glass-grain-size); background-color: transparent; opacity: var(--glass-grain-opacity); mix-blend-mode: normal; /* o grão perde força em direção às bordas para não virar moldura */ mask-image: radial-gradient( 130% 110% at 50% 0%, hsl(var(--glass-dark)) 30%, hsl(var(--glass-dark) / 0.3) 100% ); -webkit-mask-image: radial-gradient( 130% 110% at 50% 0%, hsl(var(--glass-dark)) 30%, hsl(var(--glass-dark) / 0.3) 100% ); will-change: transform; contain: layout paint; animation-name: nx-glass-grain; animation-duration: calc(var(--motion) * 44s); animation-timing-function: var(--ease-io); animation-iteration-count: infinite; animation-direction: alternate; } /* -------------------------------------------------------------------------- 3. Receita única de vidro background / backdrop-filter / border / box-shadow idênticos em todo alvo, como o §12 pede, com a borda modulada por lado (divergência "a" do cabeçalho). Duas famílias de alvo: SUPERFÍCIE (primeira camada, sempre sobre o ambiente): - .card e .panel, primitivos de 03-ui.css. - .capacidades__item, .capacidades__stage-badge, .govtech-ressalva, .contratacao__spotlight: caixas sólidas soltas dentro de seções sem fundo próprio. - .stat-rail: a régua de provas, que no site base é só ar entre filetes. - .header__bar: nesta pele o cabeçalho do site é uma barra SOLTA, não uma faixa colada (ver §4), então ele entra na família de superfície. - .nx-studio, o painel do estúdio. - .section--band (o rodapé) tem regra própria: faixa de borda a borda não leva raio nem aresta lateral. ETIQUETA (segunda camada, dentro de uma superfície ou sobre o ambiente): mesma receita com metade do desfoque e mais opacidade, porque em boa parte são textos mono abaixo de 13px e desfoque cheio em alvo fino come contraste. Entram aqui os dois botões de superfície e o rótulo de seção em cápsula. Contagem de camadas verificada alvo a alvo: os únicos aninhamentos são etiqueta dentro de superfície, ou seja, exatamente duas camadas. Nunca três. -------------------------------------------------------------------------- */ [data-skin="glass"] .card, [data-skin="glass"] .panel, [data-skin="glass"] .capacidades__item, [data-skin="glass"] .capacidades__stage-badge, [data-skin="glass"] .govtech-ressalva, [data-skin="glass"] .contratacao__spotlight, [data-skin="glass"] .stat-rail, [data-skin="glass"] .nx-studio { background: var(--glass-sheen) hsl(var(--card) / var(--glass-alpha)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: var(--hairline) solid var(--glass-edge-lo); border-block-start-color: var(--glass-edge-hi); border-inline-start-color: var(--glass-edge-mid); border-inline-end-color: var(--glass-edge-mid); box-shadow: var(--glass-inset), var(--glass-drop); } /* Etiquetas: mesma receita, metade do desfoque, mais corpo. */ [data-skin="glass"] .badge--secondary, [data-skin="glass"] .badge--outline, [data-skin="glass"] .btn--outline, [data-skin="glass"] .btn--secondary, [data-skin="glass"] .portfolio__badge, [data-skin="glass"] .govtech-motor__code, [data-skin="glass"] .govtech-chip, [data-skin="glass"] .govtech-legal__chip, [data-skin="glass"] .govtech-inco__pais, [data-skin="glass"] .case-block__stack-item, [data-skin="glass"] .case-block__status, [data-skin="glass"] .section__head > .eyebrow, [data-skin="glass"] .hero__copy > .eyebrow, [data-skin="glass"] .footer__social-link, [data-skin="glass"] .chip:not([aria-pressed="true"]) { background: var(--glass-sheen) hsl(var(--card) / calc(var(--glass-alpha) + 0.14)); backdrop-filter: blur(calc(var(--glass-blur) * 0.5)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.5)) saturate(var(--glass-sat)); border: var(--hairline) solid var(--glass-edge-lo); border-block-start-color: var(--glass-edge-hi); border-inline-start-color: var(--glass-edge-mid); border-inline-end-color: var(--glass-edge-mid); box-shadow: inset 0 1px 0 hsl(var(--glass-light) / 0.5), 0 2px 6px -2px hsl(var(--glass-dark) / calc(0.16 * var(--shadow-strength))); } [data-skin="glass"][data-theme="dark"] .badge--secondary, [data-skin="glass"][data-theme="dark"] .badge--outline, [data-skin="glass"][data-theme="dark"] .btn--outline, [data-skin="glass"][data-theme="dark"] .btn--secondary, [data-skin="glass"][data-theme="dark"] .portfolio__badge, [data-skin="glass"][data-theme="dark"] .govtech-motor__code, [data-skin="glass"][data-theme="dark"] .govtech-chip, [data-skin="glass"][data-theme="dark"] .govtech-legal__chip, [data-skin="glass"][data-theme="dark"] .govtech-inco__pais, [data-skin="glass"][data-theme="dark"] .case-block__stack-item, [data-skin="glass"][data-theme="dark"] .case-block__status, [data-skin="glass"][data-theme="dark"] .section__head > .eyebrow, [data-skin="glass"][data-theme="dark"] .hero__copy > .eyebrow, [data-skin="glass"][data-theme="dark"] .footer__social-link, [data-skin="glass"][data-theme="dark"] .chip:not([aria-pressed="true"]) { box-shadow: inset 0 1px 0 hsl(var(--glass-light) / 0.18), 0 2px 6px -2px hsl(var(--glass-dark) / calc(0.45 * var(--shadow-strength))); } /* LIMITE DE COMPONENTE INTERATIVO Correção do defeito 1 da quinta rodada, e a distinção que faltava nesta folha: SUPERFÍCIE DECORATIVA e COMPONENTE INTERATIVO não têm o mesmo limite, porque não cumprem a mesma função. Uma cápsula de rótulo, um crachá, um painel: a aresta ali é luz. Existe para dizer onde a peça de vidro começa, e --glass-edge-hi/-mid/-lo é exatamente isso. Um botão, um chip de filtro, um link em forma de botão: a aresta ali é a ÚNICA coisa que informa "isto é clicável", porque o preenchimento é vidro quase transparente. O §8 pede 3:1 dela, e no tema claro desta pele a luz de aresta media 1,28:1: branco 255 sobre ambiente 227. Uma borda mais clara que o campo, sobre um preenchimento também mais claro que o campo, é uma cápsula sem contorno. A aresta de vidro continua existindo nestes componentes, e continua sendo a assinatura da pele: ela só muda de camada. O traço da BORDA passa a ser o limite calibrado (--input, recalculado para o ambiente desta pele no bloco 1), e a LUZ vira o realce interno de 1px que a receita de etiqueta já pinta (inset 0 1px 0 branco). O resultado lê como vidro de verdade: aro escuro por fora, lábio de luz por dentro, na direção da fonte. Alcance verificado por varredura de pixel renderizado em index2.html, 1920×1080, nos dois modos: os três seletores do veredito (.btn--outline, que é também .govtech__head-link, e .chip inativo) mais .btn--secondary, que a varredura encontrou no mesmo estado (1,29:1 no claro) e que o veredito não tinha listado. Crachá NÃO entra: .badge--outline, .portfolio__badge, .govtech-chip, .govtech-legal__chip, .govtech-inco__pais, .case-block__stack-item, .case-block__status e .govtech-motor__code são em todos os partials, sem href, sem tabindex e sem role. São rótulo, não controle, e por isso continuam inteiros na luz de aresta. .footer__social-link ENTRA, e pelo mesmo teste: é com aria-label, é o único alvo clicável de uma barra de cinco cápsulas iguais, e o glifo dentro dela é vazado. Sem aro calibrado, a barra de redes vira cinco manchas de vidro sem contorno sobre a faixa do rodapé. */ [data-skin="glass"] .btn--outline, [data-skin="glass"] .btn--secondary, [data-skin="glass"] .footer__social-link, [data-skin="glass"] .chip:not([aria-pressed="true"]) { border-color: hsl(var(--input)); } /* Acentos que a receita apagaria ao usar o atalho `border`, devolvidos um a um: o estado do produto no portfólio e o filete de marca da ressalva de govtech são informação, não decoração. */ [data-skin="glass"] .portfolio__badge[data-tone="ativo"] { border-color: hsl(var(--primary) / 0.5); border-block-start-color: var(--glass-edge-hi); } [data-skin="glass"] .portfolio__badge[data-tone="privado"] { border-style: dashed; } [data-skin="glass"] .govtech-ressalva { border-inline-start-width: calc(var(--hairline) * 3); border-inline-start-color: hsl(var(--primary) / 0.7); } /* Faixa de borda a borda (rodapé): sem raio, sem arestas laterais, só a aresta superior, que é a que aponta para a fonte de luz. */ [data-skin="glass"] .section--band { background: var(--glass-sheen) hsl(var(--card) / var(--glass-band-alpha)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border-block-start: var(--hairline) solid var(--glass-edge-lo); box-shadow: inset 0 1px 0 hsl(var(--glass-light) / 0.6); } [data-skin="glass"][data-theme="dark"] .section--band { box-shadow: inset 0 1px 0 hsl(var(--glass-light) / 0.16); } /* O spotlight de contratação tem tinta de marca própria no visual base (ver sections/contratacao.css): a pele preserva essa tinta como uma camada a mais dentro do mesmo background, entre o reflexo e o preenchimento. */ [data-skin="glass"] .contratacao__spotlight { background: var(--glass-sheen), linear-gradient(180deg, hsl(var(--primary) / 0.12), transparent 62%), hsl(var(--card) / var(--glass-alpha)); border-block-end-color: hsl(var(--primary) / 0.28); } /* O painel do estúdio encosta na borda direita da tela: a aresta que existe é a interna. E ele SAI DA RECEITA DE VIDRO no preenchimento. Correção do defeito 4 do veredito de 4 de agosto de 2026, pelo mesmo diagnóstico do cabeçalho, com duas agravantes próprias: a) O painel é `position: fixed` e cobre a viewport inteira em altura, então o backdrop dele é a página rolando: exatamente a variação que o alfa não sabe apostar. b) --glass-sheen é uma CRISTA, e crista é medida em porcentagem da altura da peça. Num cartão de 300px os 56% do gradiente são um realce de 170px no alto; num painel de 844px de altura os mesmos 56% viram um banho de luz de 470px atravessando a lista inteira de tokens. Medido: o fundo sob `code.nx-color__tk` subia de rgb(70) para rgb(124) e a leitura caía para 2,10:1; o próprio selo AA do indicador de contraste ao vivo media 3,54:1. O §11 exige valor legível em TODO controle, e um painel cujo próprio selo AA não passa AA é problema de credibilidade antes de ser problema de contraste. Um painel de controle precisa ser legível antes de ser bonito: o preenchimento passa a ser --surface-1 opaco, que é o token de painel do §2.2 e o mesmo que 07-studio.css já usa quando nenhuma pele está ativa. Com fundo determinado, toda a rampa do painel volta a ter piso: sobre rgb(17) no escuro, --muted-foreground desta pele mede 11,5:1, --foreground 15,5:1 e --signal (o selo AA) 6,90:1, contra os 3,77:1 que ele mediria sobre o vidro mais fechado possível desta pele. §12 exige que quem redefine a superfície redefina o -foreground na mesma regra: --foreground é o par de --surface-1 e está escrito abaixo. A assinatura de vidro do painel continua inteira na aresta interna, no realce de 1px e na sombra; o que sai é só a aposta. E como o preenchimento é opaco, o backdrop-filter passa a ser desfoque calculado atrás de uma superfície que ninguém vê: sai junto, e com ele a regra do fallback @supports, que existia só para trocar este mesmo preenchimento. */ [data-skin="glass"] .nx-studio { background: hsl(var(--surface-1)); color: hsl(var(--foreground)); backdrop-filter: none; -webkit-backdrop-filter: none; border-block: 0; border-inline-end: 0; border-inline-start-color: var(--glass-edge-lo); box-shadow: inset 1px 0 0 hsl(var(--glass-light) / 0.16), var(--glass-drop); } /* Estados de interação devolvidos. A receita usa o atalho `border`, e como esta folha carrega por último ela tem a mesma especificidade (0,2,0) das regras de :hover / :focus-within das seções e vence por ordem. Sem este bloco o site de vidro perderia o retorno de hover que o site base tem. A aresta iluminada é preservada em todos: o realce de estado acontece nos lados que não apontam para a luz. */ [data-skin="glass"] .card--interactive:hover, [data-skin="glass"] .card--interactive:focus-visible, [data-skin="glass"] .portfolio__card:hover, [data-skin="glass"] .portfolio__card:focus-within, [data-skin="glass"] .contratacao__item:hover { border-color: hsl(var(--primary) / 0.5); border-block-start-color: var(--glass-edge-hi); } /* O cartão de modelo é o único destes que é : o estado dele fecha nos quatro lados, sem devolver o realce branco ao topo, pelo mesmo motivo do bloco de limite de componente interativo. */ [data-skin="glass"] .modelos__card:hover, [data-skin="glass"] .modelos__card:focus-visible { border-color: hsl(var(--ring)); } /* Botão e chip inativo: o realce branco NÃO volta ao topo no estado de interação. Escrever border-block-start-color aqui era o que reabria o defeito 1 justamente com o ponteiro em cima do controle. --ring passa com folga nos dois modos (7,86:1 no claro, 9,93:1 no escuro). */ [data-skin="glass"] .btn--outline:hover, [data-skin="glass"] .btn--outline:active, [data-skin="glass"] .btn--secondary:hover, [data-skin="glass"] .btn--secondary:active { background: var(--glass-sheen) hsl(var(--accent) / calc(var(--glass-alpha) + 0.18)); border-color: hsl(var(--ring)); color: hsl(var(--accent-foreground)); } [data-skin="glass"] .chip:not([aria-pressed="true"]):hover, [data-skin="glass"] .chip:not([aria-pressed="true"]):focus-visible { border-color: hsl(var(--ring)); } /* -------------------------------------------------------------------------- 4. Chassi: o que faz a página ser outra página Nada aqui é acabamento. São quatro decisões de LAYOUT e de HIERARQUIA: 4.1 O cabeçalho do site deixa de ser faixa colada e vira barra flutuante. 4.2 O cabeçalho de seção deixa de ser alinhado à esquerda e vira centralizado, nas doze seções, sem que nenhum partial saiba. 4.3 O rótulo de seção deixa de ser filete mais texto e vira cápsula. 4.4 Peso de display cai, botão vira pílula. -------------------------------------------------------------------------- */ /* 4.1 Barra flutuante. A partir de 768px o cabeçalho descola do topo e das laterais: a barra ganha raio cheio, respiro e a receita de vidro, e a faixa que a continha fica transparente em qualquer estado de rolagem. Abaixo de 768px a barra continua COLADA, e isso não é preguiça: uma cápsula com respiro lateral em 360px de largura come os 56px de que a marca e o gatilho de menu precisam, e um cabeçalho transparente sobre conteúdo rolando é texto sobre texto. Então o mobile mantém a faixa de borda a borda com a mesma receita de vidro, só que sem raio e com a única aresta que existe, a de baixo. A ordem importa: a faixa é declarada sem media query e o bloco de 768px a desliga por cima. Assim não existe faixa de largura descoberta entre os dois regimes, nem em zoom de 200%, onde a largura de CSS pode cair em valor fracionário. */ [data-skin="glass"] header.header--scrolled, [data-skin="glass"] header.header--menu-open { background: var(--glass-sheen) hsl(var(--glass-header-fill) / var(--glass-header-alpha)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border-block-end: var(--hairline) solid var(--glass-edge-lo); box-shadow: inset 0 -1px 0 var(--glass-edge-lo), var(--glass-drop); } @media (min-width: 768px) { [data-skin="glass"] .header, [data-skin="glass"] header.header--scrolled, [data-skin="glass"] header.header--menu-open { background: transparent; border-block-end-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } [data-skin="glass"] .header__bar { margin-block-start: var(--space-3); padding-inline: var(--space-6); block-size: calc(var(--header-h) - var(--space-5)); border-radius: var(--radius-full); background: var(--glass-sheen) hsl(var(--glass-header-fill) / var(--glass-header-alpha)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: var(--hairline) solid var(--glass-edge-lo); border-block-start-color: var(--glass-edge-hi); border-inline-start-color: var(--glass-edge-mid); border-inline-end-color: var(--glass-edge-mid); box-shadow: var(--glass-inset), var(--glass-drop); } } /* 4.1.1 Tipografia dos links, proporcional à barra reduzida (varredura "vidro", 06/08/2026). --fs-sm desta pele (0,9rem × --scale) é o mesmo token usado em corpo de texto pelo site inteiro; reduzir o token encolheria parágrafo em toda a página por causa de um pedido que era só sobre o cabeçalho. --fs-xs já existe na mesma escala (0,78rem × --scale) e é usado como rótulo em outros lugares da pele — reaproveitá-lo aqui é escolher um degrau já calibrado, não inventar um número. Alvo de toque: este link só aparece a partir de 880px (nav de desktop, .header__nav em sections/header.css), regime de ponteiro, não de dedo; a área clicável real (padding-block: var(--space-2) mais o texto) continua bem acima de qualquer piso de toque, dentro de uma barra de 49,2px (ver --header-h acima), sempre acima do mínimo de 44px do §8. */ [data-skin="glass"] .header__nav-link { font-size: var(--fs-xs); } /* 4.2 Cabeçalho de seção centralizado. index.html empilha à esquerda; esta pele centraliza. É a mudança de layout de maior alcance do arquivo: vale para as doze seções que usam .section__head, inclusive as duas variantes .section__head--split, que deixam de ser "título à esquerda, ação à direita" e passam a ser uma coluna centrada. Nenhum partial foi tocado. */ [data-skin="glass"] .section__head { justify-items: center; text-align: center; margin-inline: auto; max-width: min(100%, 62ch); gap: var(--space-5); margin-block-end: var(--space-14); } [data-skin="glass"] .section__head--split { flex-direction: column; align-items: center; justify-content: center; max-width: min(100%, 62ch); } [data-skin="glass"] .section__head .lead, [data-skin="glass"] .section__head p, [data-skin="glass"] .section__head--split > * { margin-inline: auto; } /* 4.3 Rótulo de seção em cápsula. O filete de 24px que precede o rótulo em 02-base.css é vocabulário de aresta seca; some. No lugar entra a cápsula de vidro, que é a assinatura desta proposta e aparece uma vez por seção. */ [data-skin="glass"] .section__head > .eyebrow, [data-skin="glass"] .hero__copy > .eyebrow { padding-block: var(--space-2); padding-inline: var(--space-5); border-radius: var(--radius-full); color: hsl(var(--foreground)); } [data-skin="glass"] .section__head > .eyebrow::before, [data-skin="glass"] .hero__copy > .eyebrow::before { content: none; } /* 4.4 Peso de display e forma de botão. index.html usa 650 a 800 no display; aqui o mesmo texto sai em 400 a 500. Título leve em corpo grande é a diferença entre "denso" e "arejado", e a pílula termina de tirar a aresta seca do vocabulário. */ [data-skin="glass"] h1, [data-skin="glass"] h2 { font-weight: 400; } [data-skin="glass"] h3, [data-skin="glass"] h4, [data-skin="glass"] h5, [data-skin="glass"] .card__title { font-weight: 500; } [data-skin="glass"] .btn { border-radius: var(--radius-full); padding-inline: var(--space-7); font-weight: 550; } [data-skin="glass"] .btn--lg { padding-inline: var(--space-9); } /* -------------------------------------------------------------------------- 5. Dobra: hero arejado com mídia flutuante O ritmo da dobra é reescrito inteiro. index.html entrega o quadro de mídia por volta de y=557 em 1280x800, com o título em 1.02 de entrelinha e a copy em 720px de largura. Aqui o título respira (1.14), o rótulo é cápsula, o respiro é maior em todos os intervalos, e o quadro de mídia deixa de ser uma faixa de borda a borda para virar uma PLACA flutuante, mais estreita que o container e com proporção 2:1 em vez de 16:9, o que troca também o recorte do vídeo. O §7.2 continua respeitado: nenhuma altura em vh, o hero continua com min-height por clamp em svh, e o quadro de mídia continua entrando na dobra em 1280x800 (medido nas capturas desta rodada). -------------------------------------------------------------------------- */ [data-skin="glass"] .hero { min-height: clamp(600px, 84svh, 940px); padding-block-start: calc(var(--header-h) + clamp(var(--space-5), 5svh, var(--space-14))); padding-block-end: clamp(var(--space-10), 7svh, var(--space-16)); } [data-skin="glass"] .hero__grid { gap: clamp(var(--space-9), 5.5svh, var(--space-14)); } [data-skin="glass"] .hero__copy { gap: clamp(var(--space-4), 2.8svh, var(--space-7)); max-width: min(100%, 58rem); } /* O título continua sem px fixo e continua multiplicado por --scale, como o §3 exige, e continua com o termo em svh do §7.2 que impede o título de comer a dobra em tela baixa. O que muda é a proporção: corpo um pouco maior, entrelinha muito maior, peso muito menor. */ [data-skin="glass"] .hero__title { gap: 0; font-size: calc(clamp(2.4rem, min(1.1rem + 3.3vw, 7.4svh), 4.9rem) * var(--scale)); font-weight: 300; line-height: 1.14; } [data-skin="glass"] .hero__line--accent { font-weight: 600; } [data-skin="glass"] .hero__lead { max-width: min(100%, 46rem); } /* A placa. Mais estreita que a coluna de conteúdo, proporção 2:1, raio grande e halo de emissão: um painel aceso pousado sobre a mesa, não uma faixa de vídeo encaixada na largura do texto. */ [data-skin="glass"] .hero__media { --media-ratio: 2 / 1; max-width: min(100%, 54rem); } /* -------------------------------------------------------------------------- 6. Seções reorganizadas Três seções têm layout próprio que contradiz a proposta centrada, e as três são reescritas aqui, por CSS, sem tocar em partial. 6.1 Tese: em index.html é cabeçalho fixo numa coluna estreita à esquerda (sticky) e lista à direita. Aqui o cabeçalho sobe para o topo, centralizado e em largura cheia, e os quatro blocos passam a duas colunas já a partir de 900px. Efeito colateral bem-vindo: a faixa morta de cerca de 420px que o julgamento anotou acima de 1900px deixa de existir nesta página. 6.2 Método: mesma ideia. O cabeçalho deixa de ser coluna lateral sticky e vira abertura centralizada; a linha do tempo fica centrada na página, com margens simétricas em vez de meia tela vazia à direita. 6.3 Régua de provas: em index.html são números alinhados à esquerda separados por filete vertical. Aqui os filetes somem, os números centralizam e a régua inteira vira a primeira placa de vidro da página. -------------------------------------------------------------------------- */ /* 6.1 Tese */ [data-skin="glass"] .tese__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); } [data-skin="glass"] .tese__intro { position: static; } @media (min-width: 900px) { [data-skin="glass"] .tese__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); row-gap: var(--space-14); } } [data-skin="glass"] .tese-block { margin-inline: auto; inline-size: 100%; } /* 6.2 Método */ [data-skin="glass"] .metodo__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } [data-skin="glass"] .metodo__intro > .section__head { position: static; margin-block-end: var(--space-14); } [data-skin="glass"] .metodo__timeline { max-width: calc(var(--measure) + 12rem); margin-inline: auto; } /* 6.3 Régua de provas */ [data-skin="glass"] .stat-rail { border-radius: var(--radius-lg); padding: var(--space-10) var(--space-8); gap: var(--space-8); } [data-skin="glass"] .stat-rail .stat { padding-inline-start: 0; padding-block-start: 0; border: 0; justify-items: center; text-align: center; } [data-skin="glass"] .stat-rail .stat__value { font-weight: 400; } /* -------------------------------------------------------------------------- 7. Luz de aresta em mídia e realce que segue o cursor A moldura de mídia não recebe vidro (não se põe vidro sobre foto e se espera enxergar a foto), mas recebe a mesma gramática de aresta: linha clara no topo, linha escura na base, sombra na mesma direção. É o que costura mídia e superfície na mesma linguagem. Lista explícita, não `.media-frame` inteiro: as molduras que vivem coladas dentro de um cartão (.portfolio__card-media, .govtech-inco__media) têm borda e raio zerados por decisão da seção, e um realce interno ali viraria um risco branco no meio da imagem. -------------------------------------------------------------------------- */ [data-skin="glass"] .hero__media, [data-skin="glass"] .capacidades__media, [data-skin="glass"] .case-block__frame, [data-skin="glass"] .contato__frame, [data-skin="glass"] .modelos__card { border-color: var(--glass-edge-lo); border-block-start-color: var(--glass-edge-hi); border-inline-start-color: var(--glass-edge-mid); border-inline-end-color: var(--glass-edge-mid); box-shadow: var(--glass-inset), var(--glass-drop); } /* Uma das cinco molduras acima não é moldura: .modelos__card é um , o cartão inteiro é o alvo de clique, e o que está dentro dele é foto. Então ele cai na mesma regra dos botões: o limite é --input, não luz de aresta. Medido em pixel renderizado, 1920×1080, tema escuro: com a luz de aresta o melhor dos quatro limites dava 2,81:1 (a foto contra a sala escura mede 1,15:1, e não há mais nada desenhando o contorno). O tema claro passava por sorte, pela foto clara contra o ambiente. Sorte não é limite. */ [data-skin="glass"] .modelos__card { border-color: hsl(var(--input)); } /* O quadro do hero é a única peça que EMITE luz em vez de recebê-la: é uma tela ligada. Ganha o raio de um passo acima e um halo de emissão em volta. O halo é sombra, então zera junto com --shadow-strength. */ [data-skin="glass"] .hero__media { border-radius: var(--radius-xl); box-shadow: var(--glass-inset), var(--glass-emit), var(--glass-drop); } /* Brilho de ponteiro: reaproveita --px/--py que core/motion.js já escreve e o pseudo-elemento que 03-ui.css já pinta. Aqui a cor vira luz branca larga, para ler como reflexo em vidro e não como glow de card comum. Nenhuma linha de JS nova. */ [data-skin="glass"] .card--glow::before { background: radial-gradient( 34rem circle at 50% 50%, hsl(var(--glass-light) / 0.32), hsl(var(--glass-light) / 0.1) 42%, transparent 72% ); } [data-skin="glass"][data-theme="dark"] .card--glow::before { background: radial-gradient( 34rem circle at 50% 50%, hsl(var(--glass-light) / 0.14), hsl(var(--glass-light) / 0.05) 42%, transparent 72% ); } /* --- rodapé: a assinatura vira uma peça de vidro iluminada --------------- O rodapé já é .section--band e já recebe a faixa de vidro de borda a borda da seção 3 desta folha. O que falta é a ASSINATURA: o wordmark de 1000 unidades que ancora a base da página tem, no visual base, um realce que segue o ponteiro (sections/footer.css, seção 4). Ele foi escrito com quatro variáveis locais justamente para que uma pele mudasse o CARÁTER da luz sem redesenhar o gradiente. É o que acontece aqui, e a diferença entre os dois temas é de física, não de gosto: ESCURO. A faixa é vidro escuro sob uma fonte de luz alta. O realce é REFLEXO ESPECULAR: a tinta acesa é --glass-light puro, quase opaca, e o halo é branco e mais forte que o padrão. Lê como a luz da sala correndo pela superfície do vidro conforme o ponteiro passa. CLARO. A faixa é vidro claro e o wordmark é tinta escura: um reflexo branco por cima de uma peça já clara não aparece, ele APAGA. Então o arranjo se inverte e vira LENTE: o halo é --glass-light, um estouro de luz local no ambiente, e a tinta acesa é --glass-dark, mais escura que o repouso. Onde o ponteiro está, o fundo clareia e a letra fecha, que é o que uma lente faz. Nos dois casos a luz é acromática, como o resto da pele, e nos dois a camada acesa continua desaparecendo inteira sob prefers-reduced-motion e --motion: 0, porque a trava está na folha da seção e vale para todas as peles. */ /* --mark-* em .footer, não .footer__mark: desde a correção de 5 de agosto de 2026 (parte 2, sections/footer.css), o halo (.footer__mark-glow) não é mais descendente do

— é filho direto de