/* NASH — nash.dmnzs.com: a landing. Só layout e as cenas da página; os tokens, a base, o vidro e os componentes vêm dos quatro arquivos anteriores. Toda medida sai de um token. */ /* ---------- o palco fixo ---------- O orbe é um fixo atrás de tudo; as seções rolam por cima. A página inteira é uma cena só, e o que muda de seção para seção é a forma e o enquadro do orbe, não o fundo. */ .orbe { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; background: var(--nash-preto); } .orbe-fallback { position: fixed; inset: 0; z-index: 0; display: grid; place-items: center; background: radial-gradient(closest-side at 50% 42%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 55%, transparent 72%), var(--nash-preto); } .orbe-fallback svg { width: min(28vw, 220px); color: var(--nash-branco-30); } /* Barra de progresso: um fio do accent no topo, cresce com a rolagem. */ .progresso { position: fixed; top: 0; left: 0; z-index: 40; width: 100%; height: 1px; background: var(--accent); transform-origin: left; transform: scaleX(var(--progresso, 0)); box-shadow: var(--nash-glow-curto); pointer-events: none; } main { position: relative; } /* ---------- a entrada ---------- A marca se monta laje a laje, segura e some — o orbe já está atrás, saindo do caos. Uma vez por visita, em --nash-dur-cena. */ .entrada { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; background: var(--nash-preto); transition: opacity var(--nash-dur-revela) var(--nash-curva-saida); } /* Sem JS ninguém tira a placa preta: ela só existe onde site.js vai rodar (html.js entra no , antes do primeiro paint). */ html.js .entrada { display: grid; } .entrada svg { width: clamp(72px, 12vw, 132px); color: var(--text-forte); overflow: visible; } .entrada .laje { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.6); animation: laje-chega var(--nash-dur-abre) var(--nash-curva-saida) both; } .entrada .laje-1 { animation-delay: 0ms; } .entrada .laje-2 { animation-delay: var(--nash-passo); } .entrada .laje-3 { animation-delay: calc(2 * var(--nash-passo)); } .entrada .laje-4 { animation-delay: calc(3 * var(--nash-passo)); } @keyframes laje-chega { to { opacity: 1; transform: none; } } .entrada.is-saindo { opacity: 0; pointer-events: none; } /* ---------- o topo ---------- Fixo e sem fundo próprio: o que passa por baixo dele some num degradê, pelo ::before. Sem isso, o corpo de um passo do manifesto cruza a fita de abas no móvel e as duas linhas se leem uma sobre a outra. */ .topo::before { content: ''; position: absolute; inset: 0 0 calc(-1 * var(--nash-e5)) 0; pointer-events: none; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.82) 45%, rgba(0, 0, 0, 0.45) 72%, rgba(0, 0, 0, 0) 100% ); } .topo { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--nash-e7); padding: 0 var(--nash-margem); pointer-events: none; } .topo > * { pointer-events: auto; } .topo-marca { display: inline-flex; align-items: center; gap: var(--nash-e2); min-height: var(--nash-alvo); justify-self: start; color: var(--text-forte); font-weight: 800; font-size: var(--nash-t3); letter-spacing: 0.02em; } .topo-marca svg { width: 18px; height: 24px; } .topo-nav { justify-self: center; } .topo-acoes { display: inline-flex; align-items: center; gap: var(--nash-e1); justify-self: end; } /* O botão de som: ícone de três barras que respiram quando a trilha toca. */ .som-barras { display: flex; align-items: flex-end; gap: 2px; width: 18px; height: 14px; } .som-barras i { flex: 1; height: 30%; background: currentColor; border-radius: 1px; transform-origin: bottom; transition: transform var(--nash-dur-estado) var(--nash-curva-saida); } .som-barras i:nth-child(2) { height: 70%; } .som-barras i:nth-child(3) { height: 50%; } /* Indicador de estado, não laço ambiente: o ciclo é o do Ocupado (a volta do arco a 3×) e os desencontros são frações do mesmo período. */ [data-som='tocando'] .som-barras i { --som-ciclo: calc(var(--nash-arco-volta) / 3); animation: barra-respira var(--som-ciclo) ease-in-out infinite alternate; } [data-som='tocando'] .som-barras i:nth-child(2) { animation-delay: calc(var(--som-ciclo) / -3); } [data-som='tocando'] .som-barras i:nth-child(3) { animation-delay: calc(var(--som-ciclo) * -2 / 3); } @keyframes barra-respira { from { transform: scaleY(0.35); } to { transform: scaleY(1); } } /* Abaixo de 900 a nav não some: vira uma fita rolável na segunda linha do topo, a mesma receita do índice do design system. */ @media (max-width: 900px) { .topo { grid-template-columns: 1fr auto; grid-template-rows: var(--nash-e7) auto; height: auto; } .topo-nav { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--nash-margem)); padding: 0 var(--nash-margem) var(--nash-e1); } .topo-nav::-webkit-scrollbar { display: none; } .topo-nav .nash-trilho-abas { flex-wrap: nowrap; } .topo-nav .nash-aba { flex: none; white-space: nowrap; } } /* ---------- as seções ---------- */ .secao { position: relative; padding: var(--nash-e9) 0; } .secao-cabeca { display: grid; gap: var(--nash-e3); margin-bottom: var(--nash-e7); } /* Degraus da escala nos cortes da casa — nada entre os degraus. */ .secao-cabeca .nash-titulo, .som-controle .nash-titulo { font-size: var(--nash-t9); max-width: 14ch; } @media (max-width: 1200px) { .secao-cabeca .nash-titulo, .som-controle .nash-titulo { font-size: var(--nash-t8); } } @media (max-width: 900px) { .secao-cabeca .nash-titulo, .som-controle .nash-titulo { font-size: var(--nash-t7); } } /* O copy da cabeça senta sobre o orbe: leva o véu (acima), não uma caixa. */ .secao-cabeca .nash-corpo { max-width: 52ch; font-size: var(--nash-t5); color: var(--text-mid); } /* ---------- o véu ---------- Onde o corpo de texto senta em cima do orbe, o que escurece é o fundo, num degradê sem borda — não uma caixa com fill e raio. A caixa lia como cartão sobre a cena; o véu lê como a própria cena baixando a luz atrás da linha. Medido em 2026-09-08: com ele o pior pixel atrás do texto sai de rgb(166) para rgb(31), e o branco a 55% volta a 6:1. */ .nash-veu { position: relative; isolation: isolate; } .nash-veu::before { content: ''; position: absolute; inset: calc(-1 * var(--nash-e4)) calc(-1 * var(--nash-e6)); z-index: -1; pointer-events: none; background: radial-gradient( ellipse at center, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.86) 42%, rgba(0, 0, 0, 0.66) 70%, rgba(0, 0, 0, 0) 100% ); } /* ---------- o herói ---------- */ .heroi { position: relative; display: grid; grid-template-rows: 1fr auto 1fr; min-height: 100svh; padding: var(--nash-e8) var(--nash-margem) var(--nash-e6); } .heroi-rotulo { align-self: start; justify-self: center; margin-top: var(--nash-e2); } .heroi-miolo { display: grid; justify-items: center; gap: var(--nash-e4); text-align: center; } /* A marca tipográfica: Archivo 900, apertada, sobre o orbe em blend de diferença — onde a luz passa, a letra fica preta; no vazio, branca. É o N no espaço negativo, agora na palavra. */ .wordmark { font-size: clamp(96px, 22vw, 320px); font-weight: 900; letter-spacing: -0.06em; line-height: 0.85; color: var(--text-forte); mix-blend-mode: difference; display: flex; user-select: none; } .wordmark span { display: inline-block; transition: opacity var(--nash-dur-cena) var(--nash-curva-espacial), transform var(--nash-dur-cena) var(--nash-curva-espacial); transition-delay: calc(var(--nash-dur-abre) + var(--nash-ordem, 0) * var(--nash-passo)); } /* As letras nascem escondidas só onde o JS vai trazê-las; sem ele, a marca já está lá. */ html.js .wordmark span { opacity: 0; transform: translateY(0.18em); } html.is-pronta .wordmark span { opacity: 1; transform: none; } /* Revisita na mesma sessão: a abertura já aconteceu, as letras nascem paradas — "uma vez por visita" vale para a cena inteira. */ html.is-revisita .wordmark span { transition: none; } /* O resto do herói entra na mesma fila das letras, a partir de is-pronta: o observer marca is-visivel ainda debaixo da entrada, e sem isto a fila 4, 5, 6 terminaria escondida. */ .heroi .nash-revela { transition-delay: calc(var(--nash-dur-abre) + var(--nash-ordem, 0) * var(--nash-passo)); } html:not(.is-pronta) .heroi .nash-revela.is-visivel { opacity: 0; transform: translateY(24px); transition: none; } .slogan { font-size: var(--nash-t3); font-weight: 500; letter-spacing: var(--nash-abertura); text-transform: uppercase; color: var(--text-forte); } /* O apoio senta na borda de baixo da esfera: leva o véu. */ .heroi-apoio { max-width: 44ch; font-size: var(--nash-t5); color: var(--text-mid); } /* O slogan cai exatamente sobre o limbo da esfera, onde a partícula é mais densa: o véu dele é mais apertado, do tamanho da linha. */ .heroi .slogan.nash-veu::before { inset: calc(-1 * var(--nash-e2)) calc(-1 * var(--nash-e5)); } .heroi-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nash-e2); margin-top: var(--nash-e2); } .heroi-pe { align-self: end; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--nash-e3); } .heroi-pe > :first-child { color: var(--text-weak); } @media (max-width: 640px) { .heroi-pe { grid-template-columns: 1fr 1fr; } /* Mais específico que a regra base abaixo, senão a cascata a desfaz. */ .heroi-pe .heroi-dica { display: none; } } .heroi-medida { justify-self: end; text-align: right; } .heroi-dica { display: inline-flex; align-items: center; gap: var(--nash-e2); color: var(--text-weak); } .heroi-dica i { display: block; width: 1px; height: var(--nash-e6); background: linear-gradient(to bottom, var(--nash-branco-55), transparent); transform-origin: top; animation: dica-desce var(--nash-ambiente) var(--nash-curva-saida) infinite; } @keyframes dica-desce { 0% { transform: scaleY(0); opacity: 0; } 18% { opacity: 1; } 45% { transform: scaleY(1); opacity: 1; } 70% { opacity: 0; } 100% { transform: scaleY(1); opacity: 0; } } /* ---------- o manifesto ---------- 300vh de rolagem, um palco fixo de 100vh. Três passos: o texto do passo ativo entra, o anterior sai, e o orbe muda de forma — esfera, atrator, marca. Só transform e opacity no texto. */ .manifesto { height: 320vh; padding: 0; } .manifesto-palco { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; } .manifesto-passos { position: relative; min-height: 60vh; --nash-span: 7; } @media (max-width: 640px) { .manifesto-passos { --nash-span: 12; } } .passo { position: absolute; inset: 0; display: grid; align-content: center; gap: var(--nash-e3); opacity: 0; transform: translateY(32px); transition: opacity var(--nash-dur-revela) var(--nash-curva-espacial), transform var(--nash-dur-revela) var(--nash-curva-espacial); pointer-events: none; } .passo.is-ativa { opacity: 1; transform: none; pointer-events: auto; } .passo.is-passada { opacity: 0; transform: translateY(-24px); } /* Janela estreita ou baixa (320 de largura, zoom de 300%): o passo não cabe no palco de 100svh e o sticky o prende cortado. Aqui o manifesto corre em fluxo, um passo por tela, e o JS segue trocando a forma pelo progresso. Depois das regras base do .passo, senão a cascata as devolve. */ @media (max-width: 640px), (max-height: 640px) { .manifesto { height: auto; } .manifesto-palco { position: static; height: auto; } .passo, .passo.is-passada { position: relative; min-height: 100svh; opacity: 1; transform: none; pointer-events: auto; } } .passo .nash-display { font-size: var(--nash-t10); max-width: 10ch; } /* t10 só a partir de 1600: abaixo disso a coluna do passo já contém o display pelo container, não pelo max-width. */ @media (max-width: 1600px) { .passo .nash-display { font-size: var(--nash-t9); } } @media (max-width: 900px) { .passo .nash-display { font-size: var(--nash-t8); } } .passo-texto { max-width: 40ch; font-size: var(--nash-t5); color: var(--text-mid); } .passo-equacao { margin-top: var(--nash-e2); padding: var(--nash-e2) var(--nash-e3); border-left: 1px solid var(--border); color: var(--text-mid); font-size: var(--nash-t3); line-height: 1.5; } /* Em fluxo o orbe fica fixo na tela e cada passo sobe por baixo dele: entre um passo e o outro o corpo cruza a esfera. O véu (acima) acompanha o texto; a equação, que tem a barra à esquerda, ganha o véu colado nela. */ @media (max-width: 640px), (max-height: 640px) { .passo-texto.nash-veu::before, .passo-equacao.nash-veu::before { inset: calc(-1 * var(--nash-e2)) calc(-1 * var(--nash-e4)); } } /* Acima desse corte o passo divide a tela com o orbe, que fica do outro lado: sem véu, o texto está sobre preto. */ @media (min-width: 641px) and (min-height: 641px) { .passo-texto.nash-veu::before, .passo-equacao.nash-veu::before { display: none; } } .manifesto-regua { position: absolute; right: var(--nash-margem); top: 50%; display: grid; gap: var(--nash-e2); transform: translateY(-50%); } .manifesto-regua i { display: block; width: 24px; height: 1px; background: var(--nash-branco-18); transition: background-color var(--nash-dur-estado) var(--nash-curva-saida), box-shadow var(--nash-dur-brilho) var(--nash-curva-saida), transform var(--nash-dur-estado) var(--nash-curva-saida); transform-origin: right; } .manifesto-regua i.is-ativa { background: var(--accent); box-shadow: var(--nash-glow-curto); transform: scaleX(1.6); } /* Em fluxo (o corte acima) a régua marca um palco fixo que não existe. */ @media (max-width: 640px), (max-height: 640px) { .manifesto-regua { display: none; } } /* ---------- as peças ---------- */ .pecas-grade { --nash-colunas: 12; } /* O cartão com corpo de texto leva um fill mais denso que a placa: a 32% a partícula atrás derruba o branco a 55% abaixo de 3:1. */ .peca, .amostra { --nash-span: 4; min-height: 220px; justify-content: space-between; background-color: var(--nash-placa-texto); } /* O hover não afina o fill de volta a 40%: o stroke, o ponto e o lampejo já dizem "dá pra apertar", e o texto continua legível. */ .peca:hover, .amostra:hover { background-color: var(--nash-placa-texto); } .peca-topo { display: flex; align-items: center; gap: var(--nash-e2); } .peca-nome { font-size: var(--nash-t5); font-weight: 600; letter-spacing: var(--nash-aperto); color: var(--text-forte); } .peca-texto { color: var(--text-mid); font-size: var(--nash-t4); } .peca-pe { display: flex; justify-content: space-between; align-items: center; } .peca:hover .nash-ponto { background-color: var(--accent); box-shadow: var(--nash-glow-curto); } @media (max-width: 1200px) { .peca { --nash-span: 6; } } @media (max-width: 640px) { .peca { --nash-span: 12; min-height: 0; } } /* ---------- o prompt ---------- */ .prompt-palco { display: grid; justify-items: center; gap: var(--nash-e6); min-height: 60vh; align-content: center; } .prompt-trilho { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nash-e1); } .prompt-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--nash-goteira); width: min(920px, 100%); } .prompt-grade:empty { display: none; } .gerado { gap: var(--nash-e2); } .gerado-valor { font-size: var(--nash-t7); font-weight: 700; letter-spacing: var(--nash-aperto); color: var(--text-forte); } .gerado-texto { color: var(--text-mid); font-size: var(--nash-t4); overflow-wrap: anywhere; } .gerado-eco { font-family: var(--font-mono); font-size: var(--nash-t3); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; } /* ---------- o som ---------- */ .som-palco { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--nash-e6); } .som-controle { display: grid; gap: var(--nash-e4); justify-items: start; } .som-estado { min-height: 1.5em; } .medidor { display: flex; align-items: flex-end; gap: var(--nash-e2); height: 160px; } .medidor-banda { display: grid; gap: var(--nash-e1); justify-items: center; height: 100%; align-content: end; } .medidor-barra { width: 24px; height: 120px; border-radius: 2px; background: var(--nash-branco-06); overflow: hidden; position: relative; } .medidor-barra i { position: absolute; inset: 0; background: var(--accent); transform-origin: bottom; transform: scaleY(var(--nivel, 0.04)); box-shadow: var(--nash-glow-curto); } @media (max-width: 900px) { .som-palco { grid-template-columns: 1fr; } } /* ---------- o sistema ---------- */ .sistema-grade { --nash-colunas: 12; } .amostra { --nash-span: 3; min-height: 200px; justify-content: space-between; } .amostra-palco { display: grid; place-items: center; min-height: 88px; } .amostra-cores { display: flex; gap: var(--nash-e1); } .amostra-cores i { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-weak); } .amostra-tipo { font-size: var(--nash-t8); font-weight: 800; letter-spacing: var(--nash-aperto-display); line-height: 1; color: var(--text-forte); } .amostra-vidro { width: 120px; height: 56px; border-radius: var(--nash-r3); } @media (max-width: 1200px) { .amostra { --nash-span: 6; } } @media (max-width: 640px) { .amostra { --nash-span: 12; } } /* ---------- o rodapé ---------- */ .rodape { position: relative; padding: var(--nash-e9) 0 var(--nash-e6); min-height: 80vh; display: grid; align-content: end; gap: var(--nash-e7); } .rodape-marca { display: grid; justify-items: center; gap: var(--nash-e4); text-align: center; } .rodape-marca svg { width: clamp(64px, 8vw, 96px); color: var(--text-forte); } .rodape-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--nash-e3); padding-top: var(--nash-e4); border-top: 1px solid var(--border-weak); } .rodape-linha nav { display: flex; gap: var(--nash-e4); } .rodape-linha a { display: inline-flex; align-items: center; min-height: var(--nash-alvo); transition: color var(--nash-dur-micro) var(--nash-curva-saida); } .rodape-linha a:hover { color: var(--text-forte); } /* ---------- reduzido ---------- */ @media (prefers-reduced-motion: reduce) { .entrada .laje, .heroi-dica i, [data-som='tocando'] .som-barras i { animation: none; opacity: 1; transform: none; } .wordmark span, .heroi .nash-revela, .passo, .entrada, .manifesto-regua i { transition-duration: 100ms; transition-delay: 0ms; } .passo, .manifesto-regua i.is-ativa { transform: none; } }