/* ========================================================================== 03 — LAYOUT Camadas de fundo, contêiner e utilitários de texto. ========================================================================== */ /* ========================================================================== FUNDO DO SITE Preto, e so. A parede de cards da marca que ficava aqui saiu: ela aparecia atras de todas as paginas, disputava o olhar com o conteudo em cada uma delas e cobrava caro em pintura para ser, no fim, textura. O que sobrou e o que basta: preto profundo, o grao que tira o achatamento e a vinheta que fecha as bordas. Quem cria hierarquia agora e a alternancia de faixas clara e escura entre as secoes, nao uma imagem atras de tudo. ========================================================================== */ /* ---------- textura de fundo ---------- O campo de partículas em Three.js e a aura saíram no redesign. Sobrou a textura, que custa quase nada e tira o achatamento do preto liso. */ .grain{position:fixed;inset:0;z-index:var(--z-fx);pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} .vignette{position:fixed;inset:0;z-index:var(--z-fx);pointer-events:none; background:radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);} /* ---------- contêiner ---------- */ .wrap{position:relative;z-index:var(--z-content)} .container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} /* Existe uma segunda medida, --maxw-estreito, para seção de texto centralizado. Não vira classe no HTML: cada seção que precisa dela aperta o próprio contêiner no arquivo de página, porque largura de coluna é decisão daquela seção e não um utilitário solto. */ /* Ritmo vertical de toda seção, em qualquer página. Estava repetido nos três arquivos de página. Mora aqui porque é decisão de layout do site inteiro, não de uma página. Breakpoint em 06-responsive.css. */ /* Respiro vertical generoso, e crescendo com a tela. Estava em 84px fixos. Numa página que agora é preta de ponta a ponta, quem separa uma seção da outra é o vazio entre elas: sem faixa clara para marcar a troca, o espaçamento passa a ser o único sinal de que começou outro assunto. Página premium respira mais do que parece necessário. Este é o compasso padrão. Quem precisa encostar na seção anterior ou se afastar dela usa --sec-y-perto e --sec-y-longe, declarados na própria seção. Ver o bloco de ritmo em pages/home.css. */ section{padding:var(--sec-y) 0;position:relative} /* ---------- recorte horizontal das seções de entrada lateral ---------- O efeitos.js faz sócios, depoimentos e painéis de campanha entrarem cada metade do seu lado, com gsap.from e x de 56px. gsap.from deixa o elemento PARADO no valor inicial até o gatilho de rolagem disparar, e esses blocos nascem abaixo da dobra: até a pessoa chegar neles, eles estão 56px fora do eixo, esticando a largura do documento. No desktop largo isso não aparecia, porque sobra margem dos dois lados do contêiner de 1180px e os 56px cabiam nela. Entre mais ou menos 950px e 1236px, que é faixa de notebook, o contêiner encosta nas bordas e os 56px passam a criar barra de rolagem horizontal na página inteira. O efeitos.js já tratava o caso de coluna única, onde a entrada vira vertical. O que faltava era o caso de duas colunas, que é justamente onde o movimento existe. clip e não hidden, pela mesma razão que em #avaliacoes: hidden obrigaria o eixo vertical a virar auto e a seção ganharia um contêiner de rolagem próprio, que quebra position:sticky de quem estiver dentro. */ .secao-painel, #socios, #depoimentos{overflow-x:clip} /* ---------- utilitários: texto metálico ---------- */ .gold-text{background:var(--gold-grad-texto);-webkit-background-clip:text;background-clip:text;color:transparent} .silver-text{background:var(--silver-grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* Texto metálico partido em palavras. background-clip:text pinta o gradiente recortado pelas letras do próprio elemento. Quando o reveal.js ou o efeitos.js quebram a frase em spans inline-block, as letras passam a pertencer ao filho e saem do recorte do pai: sobra um gradiente sem máscara e a palavra desaparece. Foi o que apagou o "REIWA" do título do manifesto. Então quem carrega o degradê passa a ser a palavra. Só que assim cada uma receberia a rampa inteira e começaria no ouro escuro: o REIWA.costurarGradiente mede a frase e devolve a fatia certa a cada palavra, para a rampa atravessar o conjunto como antes. */ .gold-text .tit-pal, .gold-text .palavra{background-image:var(--gold-grad-texto);background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text;color:transparent} .silver-text .tit-pal, .silver-text .palavra{background-image:var(--silver-grad);background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text;color:transparent} /* Frase partida: quem pinta é a palavra, o pai sai de cena. O data-partido é posto pelo REIWA.costurarGradiente. Enquanto o pai continuava com degradê, os dois pintavam o mesmo texto com mapeamentos diferentes da rampa, um deslocado do outro, e a sobreposição aparecia como uma marca clara colada na primeira letra. */ .gold-text[data-partido], .silver-text[data-partido]{background:none} /* ========================================================================== GRADE DE PONTOS Textura de fundo para blocos de dado. Dá contexto de painel sem competir com o conteúdo. A máscara evita a borda dura da grade cortada. ========================================================================== */ .pontos{ background-image:radial-gradient(rgba(212,175,55,.17) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 78%); mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 30%,transparent 78%); }