/* =============================================================================
TAKA DESIGN — PASSAGEM (Hero → Barra de Confiança)
-----------------------------------------------------------------------------
Dois assuntos, um arquivo, porque são a mesma peça: a transição só existe
para revelar a barra, e a barra só existe dentro do palco da transição.
Tudo aqui consome o Design System PRISMA e não redefine nenhum token:
· .spectrum-rule → a régua que separa as dobras (e, girada, os divisores)
· .aurora → a atmosfera animada que toda dobra do DS carrega
· .t-caption → Space Mono utilitária dos rótulos
· --ds-void / --ds-ease / --ds-r-* → superfície, curva e raios
DOIS ESTADOS DE LAYOUT
----------------------
estático (padrão) Hero em fluxo, régua espectral, barra logo abaixo. É o
que o navegador desenha sem JS, sem GSAP, com o CDN fora
do ar ou com prefers-reduced-motion. Conteúdo completo.
ao vivo (.is-live) passage.js confirma GSAP + movimento permitido e liga o
palco sticky: a Hero para no viewport enquanto o trilho
rola por baixo, e a barra vira uma camada centrada nele.
Nenhuma regra deste arquivo altera a aparência da Hero em repouso.
============================================================================= */
/* -----------------------------------------------------------------------------
Trilho e palco
-------------------------------------------------------------------------- */
:root {
/* Curso de rolagem consumido pela transição, além dos 100vh da Hero.
Perceptível, mas curto o bastante para não ler como travamento. */
--passage-travel: 150vh;
/* Curso extra da extensão narrativa (beat de leitura + a linha escapando
para a 3ª dobra). Derivado do curso aprovado, e não um valor solto: a
timeline tem duração 1 + 0.55, então manter a mesma proporção faz com que
o trecho já validado consuma EXATAMENTE a mesma distância de rolagem de
antes em qualquer breakpoint. Ver a nota de remapeamento em passage.js. */
--passage-outro: calc(var(--passage-travel) * 0.55);
/* Eixo narrativo — a coordenada horizontal por onde a spectrum-rule conecta
um capítulo ao seguinte. passage.js sobrescreve este valor com a posição
real do divisor estrutural da Barra de Confiança (ver measureAxis). Fica
no de propósito, para que qualquer dobra possa se alinhar ao mesmo
eixo sem recalcular nada.
O alicerce é 55%, e não um valor solto: é onde fica o centro da calha
entre texto e fotografia da 3ª dobra. Medido no Chrome, esse centro anda
de 53,9% (2560) a 55,8% (1440), e 55% é o único valor que cai dentro da
calha em TODAS as larguras testadas — de 1024 a 2560.
Ele só entra em cena quando passage.js não roda (sem GSAP, sem rede): ali
o Sobre fica estático e o fio precisa cair no vão entre as colunas, não no
meio da coluna de texto. Com a transição ao vivo, measureAxis() sempre
substitui este número pelo divisor real medido na Barra de Confiança. */
--narrative-axis: 55%;
}
.passage { position: relative; }
/* Ao vivo: o trilho ganha a altura extra e o palco gruda no topo. Sticky em
vez de pin do ScrollTrigger — não injeta pin-spacer, não muda o fluxo no
refresh e é revertido com uma única classe (ver nota em passage.js). */
.passage.is-live {
min-height: calc(100vh + var(--passage-travel) + var(--passage-outro));
min-height: calc(100svh + var(--passage-travel) + var(--passage-outro));
}
.passage.is-live .passage__stage {
position: sticky;
top: 0;
/* Mesma unidade da .hero (100svh vence 100vh onde houver suporte), senão a
Hero sobra alguns pixels do palco em mobile com barra dinâmica. */
height: 100vh;
height: 100svh;
overflow: hidden; /* contém o eixo vertical, que sangra de propósito */
}
/* -----------------------------------------------------------------------------
Zona de transição cromática — palco → 3ª dobra
-----------------------------------------------------------------------------
A borda inferior do palco é a costura com o Sobre, e `overflow: hidden` corta
ali tudo o que ainda estiver aceso — a fio. Mascarar .trust__ambient resolveu
metade do problema; a outra metade não vinha dela.
Medido no mobile: .blob-2 (a atmosfera residual da Hero, que a timeline deixa
em opacidade .1 de propósito) vai de y=56 a y=556 com a costura em y=422 —
ou seja, ATRAVESSA a borda e é fatiada nela. Rosa a .022 efetivos sobre o
void dá ~1,8 L de excesso, que era exatamente o degrau medido.
Por isso a solução aqui não filtra uma camada específica: ela apaga QUALQUER
luz nos últimos 26vh do palco, terminando exatamente em --ds-void. Assim a
costura passa a ter, dos dois lados, precisamente a mesma cor — a cor de
fundo do site — e a continuidade deixa de depender de acertar alfas.
Duas garantias importantes:
· z-index 1 — acima da Hero (que é contexto de empilhamento em nível 0) e
abaixo de .trust (nível 5). A faixa de dados, o nó, a lâmina e sobretudo a
.spectrum-rule que desce passam POR CIMA desta camada, intocados.
· a faixa fica a 50vh da costura e a zona cobre 26vh: não há sobreposição.
Nenhuma cor nova: o gradiente vai de void transparente a void opaco.
-------------------------------------------------------------------------- */
.passage__seam {
display: none; /* só existe no estado ao vivo */
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
height: 26vh;
pointer-events: none;
background: linear-gradient(180deg, rgba(2, 2, 5, 0) 0%, var(--ds-void) 100%);
}
.passage.is-live .passage__seam { display: block; }
/* -----------------------------------------------------------------------------
Barra de Confiança
-------------------------------------------------------------------------- */
.trust {
position: relative;
z-index: 5;
}
/* Ao vivo, a barra deixa o fluxo e passa a flutuar no centro do palco — é ali
que o eixo vertical cruza e de onde a superfície se abre.
`translate` (propriedade autônoma) em vez de `transform` para não disputar a
matriz com o GSAP caso um dia algo precise ser transformado aqui. */
.passage.is-live .trust {
position: absolute;
left: 0;
right: 0;
top: 50%;
translate: 0 -50%;
}
/*
não é resetado em app.css; a régua do DS define height/background mas
não a margem do elemento. */
.trust hr { margin: 0; }
/* Nome acessível da seção. O conteúdo são quatro fatos, não um bloco de texto,
então o título existe para a árvore de acessibilidade, não para a leitura. */
.trust__title {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --- Eixo: o marcador estrutural do frame intermediário ---------------------
É a própria .spectrum-rule do DS, girada 90°: mesma espessura de 1px, mesmo
gradiente espectral, mesma máscara que apaga as duas pontas e o mesmo loop
`spectrum-slide`. Nada de linha nova inventada — o componente que separa as
dobras na horizontal é o mesmo que conduz a passagem na vertical.
O invólucro é centrado na linha da lâmina (top: 0 = borda superior da barra),
e não no meio do viewport, para que o eixo se contraia exatamente sobre ela.
100vh de comprimento deixa as pontas mascaradas caírem a zero dentro da tela. */
.trust__axis {
display: none; /* só existe no estado ao vivo */
position: absolute;
top: 0;
left: 50%;
width: 100vh;
height: 1px;
translate: -50% -50%;
rotate: 90deg;
pointer-events: none;
}
.passage.is-live .trust__axis { display: block; }
/* --- Profundidade cromática da dobra ----------------------------------------
O vazio em volta da faixa era --ds-void puro, e preto chapado numa área
dessa dimensão lê como ausência de superfície, não como escuro. Isto é só
uma camada de luz: quatro campos radiais gigantes, todos em cores que já
existem no espectro do Design System, com alfa entre .03 e .05.
No pico somado o fundo sai de #020205 para algo em torno de #0A0A17 — um
passo de profundidade, não de cor. A leitura continua sendo "o fundo é
preto"; a spectrum-rule segue sendo o único elemento cromático de fato.
Duas escolhas deliberadas:
· o fim de cada gradiente é `rgba(cor, 0)`, e não `transparent`. São a mesma
coisa só depois da interpolação premultiplicada; escrever a cor com alfa 0
garante que nenhum navegador passe por um cinza no meio do caminho, que é
exatamente a "mancha com borda perceptível" a evitar.
· nada aqui anima em loop. A camada é estática — apenas entra em cena junto
com a superfície (uma tween de opacidade em passage.js) e some no
caminho de volta.
Geometria: `top: 50%` + `translate` centra a camada na faixa, que por sua
vez está centrada no palco — então ela cobre exatamente o viewport, em
qualquer altura, sem medir nada. */
.trust__ambient {
display: none;
position: absolute;
left: 0;
right: 0;
top: 50%;
z-index: 0; /* atrás da superfície, à frente da Hero */
height: 100vh;
height: 100svh;
translate: 0 -50%;
pointer-events: none;
background:
/* 1. o campo deitado sobre a régua — largo e baixo, para ler como luz ao
longo da linha e não como um blob atrás dos indicadores */
radial-gradient(125% 38% at 50% 50%,
rgba(99, 102, 241, .045), rgba(99, 102, 241, 0) 70%),
/* 2. o eixo narrativo. Elipse alta e deslocada para baixo, acompanhando o
percurso da linha que desce para a próxima dobra: é a única região
com um pouco mais de presença, e de propósito — é ela que amarra o
fundo à narrativa em vez de decorar a tela. */
radial-gradient(30% 62% at var(--narrative-axis) 60%,
rgba(99, 102, 241, .055), rgba(99, 102, 241, 0) 72%),
/* 3 e 4. contrapontos distantes, nos mesmos cantos em que a atmosfera da
Hero já deixa índigo e rosa — assim a dobra não muda de temperatura
quando a Hero sai de cena. Ficam mais fracos que os dois primeiros
justamente porque somam com aqueles blobs residuais: medido a 11× de
ganho, o violeta no canto inferior era a área mais saturada da cena,
o que invertia a hierarquia (o fundo competindo com a régua). */
radial-gradient(46% 40% at 10% 26%,
rgba(34, 211, 238, .026), rgba(34, 211, 238, 0) 76%),
radial-gradient(50% 44% at 88% 70%,
rgba(168, 85, 247, .026), rgba(168, 85, 247, 0) 76%);
/* --- Zona de transição para a 3ª dobra ---------------------------------
A borda inferior desta camada é a borda inferior do palco, que é a
costura com o Sobre — e `overflow: hidden` no palco corta tudo ali, a fio.
Enquanto os campos radiais acima chegassem acesos nessa borda, o corte
virava uma linha horizontal legível: medido, um degrau de 1,37 L no
mobile (4,1 acima contra 2,2 abaixo), sobre uma base de 2,2 L.
A máscara resolve na origem, apagando esta camada ao longo dos últimos
24vh antes da costura. Não é um gradiente novo por cima: é a mesma
atmosfera, se retirando antes de encontrar a borda. Assim não há o que
cortar — e o que o usuário percebe é a atmosfera da segunda dobra se
dissipando, não uma seção terminando.
Em vh e não em %: a camada tem 100vh, então o comprimento da zona fica
igual em qualquer altura de conteúdo. A .spectrum-rule não é afetada —
ela vive em .trust__descent, fora desta camada. */
-webkit-mask-image: linear-gradient(180deg,
#000 0, #000 calc(100% - 24vh), transparent 100%);
mask-image: linear-gradient(180deg,
#000 0, #000 calc(100% - 24vh), transparent 100%);
}
.passage.is-live .trust__ambient { display: block; }
/* --- Lâmina: a régua espectral que abre a dobra ---------------------------- */
.trust__rule { position: relative; z-index: 2; }
/* --- Nó: o ponto da lâmina que vira ----------------------------------------
Um trecho curto da própria régua, sobre o eixo narrativo, um degrau acima em
opacidade e com o halo índigo que o DS usa nos badges
(`0 0 22px -6px rgba(99,102,241,.95)`). Não é um objeto novo na composição:
é a mesma linha concentrando luz onde vai mudar de direção.
São duas camadas, e não uma só, por um motivo concreto: a `mask-image` de
.spectrum-rule (que apaga as pontas e é justamente o que funde o nó na
lâmina) também recorta qualquer pseudo-elemento do mesmo nó — o halo
simplesmente não aparecia. O invólucro fica de fora da máscara e carrega o
brilho; o filho continua sendo a régua do DS, intacta. */
.trust__node {
--trust-node-w: clamp(2.5rem, 4vw, 4.5rem);
display: none;
position: absolute;
top: 0;
left: var(--narrative-axis);
z-index: 3;
width: var(--trust-node-w);
height: 1px;
margin-left: calc(var(--trust-node-w) / -2);
pointer-events: none;
}
.passage.is-live .trust__node { display: block; }
.trust__node > .spectrum-rule {
opacity: 1;
box-shadow: 0 0 18px -4px rgba(99, 102, 241, .85);
}
/* O halo. Um box-shadow sobre 1px de altura quase não se lê — sem isto o
"ponto ganha protagonismo" não chega a acontecer. É um radial-gradient
achatado (nada de filter: blur, que custaria caro sobre a faixa inteira),
deitado ao longo da régua para parecer luz se juntando ali, e não uma bolha
pousada em cima. Herda o scaleX do nó: nasce junto com ele. */
.trust__node::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 320%;
height: 1.5rem;
translate: -50% -50%;
pointer-events: none;
background: radial-gradient(closest-side, rgba(99, 102, 241, .3), transparent 100%);
}
/* --- Descida: a linha que escapa para o próximo capítulo --------------------
Altura = `50svh + 50%`. O `50%` resolve contra a altura da própria .trust
(que é o bloco contido, por ser absoluta no estado ao vivo), ou seja, metade
da faixa. Como a faixa está centrada no palco, a lâmina fica a `50svh −
metade da faixa` do topo — então essa soma leva a linha exatamente até a
borda inferior do palco, em qualquer altura de viewport e sem medir nada em
JS. Os 2px extras garantem o corte, para a linha ler como "continua" e não
como "terminou".
z-index acima da superfície de propósito: a descida precisa nascer visível
na lâmina e atravessar a faixa. No caminho ela passa exatamente por cima do
divisor que já existe naquele eixo — e a timeline apaga esse divisor
enquanto ela desce, de modo que um vira o outro. */
.trust__descent {
display: none;
position: absolute;
top: 0;
left: var(--narrative-axis);
z-index: 4;
width: 1px;
height: calc(50vh + 50% + 2px);
height: calc(50svh + 50% + 2px);
translate: -50% 0;
pointer-events: none;
}
.passage.is-live .trust__descent { display: block; }
/* Sem máscara nas pontas: em cima ela encosta na lâmina, embaixo é o palco que
corta. Uma ponta esmaecida ali diria "acabou", que é o oposto da intenção. */
.trust__descent > .spectrum-rule--v {
height: 100%;
-webkit-mask-image: none;
mask-image: none;
}
/* --- Superfície ------------------------------------------------------------
A "nova camada" que a transição revela. Fica um passo acima do vazio da Hero
(--ds-void) por um gradiente branco de baixíssima intensidade — a mesma ideia
do .glass-panel do DS, sem o custo do backdrop-filter sobre um canvas. */
.trust__surface {
position: relative;
overflow: hidden;
padding-block: clamp(1.75rem, 4.4vh, 2.75rem);
background:
linear-gradient(180deg,
rgba(255, 255, 255, .045) 0%,
rgba(255, 255, 255, .014) 45%,
rgba(255, 255, 255, 0) 100%),
rgba(2, 2, 5, .72);
}
/* "Toda dobra segue o mesmo esqueleto: régua espectral, atmosfera animada ao
fundo, cabeçalho e conteúdo" — design_system.html, seção Seções. Aqui a
atmosfera entra bem contida: a barra é uma faixa, não uma dobra inteira. */
.trust__aurora {
inset: -55% -10% auto -10%;
height: 300px;
opacity: .16;
filter: blur(80px);
}
/* --- Grade dos quatro dados ------------------------------------------------ */
.trust__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
}
.trust__item {
position: relative;
display: grid;
gap: .5rem;
padding-inline: clamp(1rem, 2.4vw, 2.5rem);
}
.trust__item:first-child { padding-inline-start: 0; }
.trust__item:last-child { padding-inline-end: 0; }
/* A última coluna tem a largura do próprio conteúdo, não 1fr: assim o quarto
dado encosta na margem direita e a faixa fecha de ponta a ponta, sem que o
divisor dele fique órfão longe do texto. As três primeiras continuam iguais
entre si, que é o que dá o ritmo. Só faz sentido com os quatro em linha —
no 2 × 2 do mobile a grade volta a ser simétrica. */
@media (min-width: 900px) {
.trust__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}
/* Divisor = .spectrum-rule na variante vertical (abaixo). Ancorado à borda
esquerda do item; o primeiro não tem nada à esquerda para separar.
A centragem vertical é feita por margem negativa, e NÃO por translate: o
GSAP anima scaleY aqui e absorve qualquer `translate`/`transform` do CSS
dentro da própria matriz, congelando o -50% no valor em pixels do momento
em que a timeline foi montada. Com margem, a centragem permanece do CSS e o
GSAP só escreve a escala — a altura pode mudar por breakpoint sem deixar
resíduo de alinhamento. */
.trust__sep {
--trust-sep-h: 2.875rem;
position: absolute;
top: 50%;
left: 0;
height: var(--trust-sep-h);
margin-top: calc(var(--trust-sep-h) / -2);
}
.trust__item:first-child .trust__sep { display: none; }
/* Variante vertical da régua espectral.
Herda background, background-size, animação `spectrum-slide` e opacity do
componente do DS; só troca eixo e direção da máscara. O gradiente continua a
90°: num elemento de 1px de largura o espectro aparece como uma única cor por
vez, que percorre a paleta ao longo dos 11s do loop — o mesmo movimento
ambiente da régua horizontal, lido de outro jeito. */
.spectrum-rule--v {
display: block;
width: 1px;
height: 100%;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
/* --- Hierarquia tipográfica -------------------------------------------------
Valor e rótulo são os dois pesos de Space Mono que o DS já documenta como
"utilitária / dados": 700 caixa-alta para o dado, 400 caixa-baixa (.t-caption)
para a especificação. A diferença é de peso, corpo, tracking e opacidade —
não de família, para a faixa inteira ler como uma ficha técnica. */
.trust__value {
font-family: 'Space Mono', ui-monospace, monospace;
font-weight: 700;
font-size: clamp(.875rem, .72rem + .48vw, 1.25rem);
line-height: 1.1;
letter-spacing: .015em;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
}
/* Mesmo tratamento que o DS dá às unidades dentro de .stat-value
(`20,7:1`): o número manda, a unidade
acompanha. */
.trust__unit { color: rgba(255, 255, 255, .34); }
.trust__label {
color: rgba(255, 255, 255, .4);
text-wrap: pretty;
}
/* -----------------------------------------------------------------------------
Elo com a 3ª dobra — SOBRE A TAKA DESIGN
-----------------------------------------------------------------------------
A dobra foi construída: ver assets/css/about.css, que carrega depois deste
arquivo e consome --narrative-axis e .spectrum-rule--v declarados aqui.
A costura é geométrica, não animada: a descida (.trust__descent) termina
exatamente na borda inferior do palco, que é a borda superior de .about, e
.about__spine nasce em y = 0 sobre o mesmo eixo. As duas metades leem como
uma linha só atravessando o limite porque, do ponto de vista do layout, são.
-------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
Responsivo
-------------------------------------------------------------------------- */
/* Tablet — mesmo conceito, curso menor e faixa um pouco mais compacta. */
@media (max-width: 1023px) {
:root { --passage-travel: 115vh; }
.trust__item { padding-inline: clamp(.75rem, 2vw, 1.5rem); }
}
/* Mobile — 2 × 2. A régua espectral continua sendo o organizador: a lâmina no
topo fecha a faixa e o divisor vertical do meio alinha as duas colunas. As
linhas se separam por espaço, não por mais réguas — quatro divisores numa
faixa deste tamanho viram ruído. */
@media (max-width: 899px) {
:root { --passage-travel: 95vh; }
.trust__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: clamp(1.25rem, 3.5vh, 1.75rem);
}
.trust__item {
padding-inline: clamp(.875rem, 3.5vw, 1.5rem);
gap: .375rem;
}
.trust__item:first-child,
.trust__item:nth-child(3) { padding-inline-start: 0; }
.trust__item:nth-child(2),
.trust__item:last-child { padding-inline-end: 0; }
/* O divisor vertical volta no item 3 (primeiro da segunda linha não tem, o
segundo de cada linha tem) — as duas metades formam uma única coluna. */
.trust__item:nth-child(3) .trust__sep { display: none; }
.trust__item:nth-child(2) .trust__sep,
.trust__item:nth-child(4) .trust__sep { display: block; }
.trust__value {
font-size: clamp(.8125rem, .68rem + 1vw, 1rem);
white-space: normal;
}
.trust__surface { padding-block: clamp(1.5rem, 4vh, 2.25rem); }
}
@media (max-width: 479px) {
:root { --passage-travel: 85vh; }
.trust__sep { --trust-sep-h: 2.5rem; }
}
/* -----------------------------------------------------------------------------
Movimento reduzido
-----------------------------------------------------------------------------
passage.js já não liga a transição neste modo (gsap.matchMedia trata a
condição), então .is-live não chega a existir. As regras abaixo são a rede de
segurança: se a classe sobrar por qualquer caminho, o layout volta ao fluxo
normal e a Barra de Confiança continua inteira, legível e sem sticky.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.passage.is-live { min-height: 0; }
.passage.is-live .passage__stage {
position: static;
height: auto;
overflow: visible;
}
.passage.is-live .trust {
position: relative;
top: auto;
translate: none;
}
.passage.is-live .trust__axis,
.passage.is-live .trust__node,
.passage.is-live .trust__ambient,
.passage.is-live .trust__descent { display: none; }
}
/* -----------------------------------------------------------------------------
Sinalização de camada
-----------------------------------------------------------------------------
`will-change` só enquanto a passagem está de fato em curso (passage.js liga e
desliga .passage-active no pelo onToggle do ScrollTrigger). Deixar
estas promoções permanentes custaria memória de GPU pela vida inteira da
página por causa de uma transição de dois segundos.
-------------------------------------------------------------------------- */
.passage-active .site-header,
.passage-active .hero__lead,
.passage-active .hero__headline,
.passage-active .hero__copy,
.passage-active .hero__actions,
.passage-active .hero__texture,
.passage-active .hero__guides,
.passage-active .hero__atmosphere { will-change: opacity, transform; }
.passage-active .trust__surface { will-change: clip-path; }
.passage-active .trust__ambient { will-change: opacity; }
.passage-active .trust__axis > .spectrum-rule,
.passage-active .trust__descent > .spectrum-rule,
.passage-active .trust__node,
.passage-active .trust__rule { will-change: transform, opacity; }