/* =============================================================================
Cloudyn — 2ª PÁGINA — O MANIFESTO
A frase em dois pesos, a entrada palavra a palavra e as três
capacidades. Ver assets/js/stage-entry.js.
Este arquivo é uma FATIA do antigo assets/css/loader.css, que guardava o site
inteiro em 1511 linhas. A ordem de carga importa (ver o bloco de no
HTML): a cascata é a mesma de antes, arquivo a arquivo, na mesma sequência.
============================================================================= */
/* ================= 2ª PÁGINA — vem LOGO ABAIXO da primeira =================
Sem truque: é a próxima seção do documento. Rolando, a home sai por cima e
esta entra. A animação do conteúdo só dispara quando a seção está INTEIRA
na tela (classe .is-in, posta por um IntersectionObserver). */
.stage {
position: relative;
min-height: 100vh;
display: grid; place-items: center;
background: var(--black);
color: var(--ink);
overflow: hidden;
}
/* ------------------------- A COMPOSIÇÃO ----------------------------------
Alinhada à esquerda, não centrada: centralizado é pôster, e o que esta
página faz é AFIRMAR. Uma coluna — olho, frase, régua, assinatura —, cada
peça entrando um instante depois da anterior. */
.stage__content {
position: relative; z-index: 2;
width: 100%; max-width: 1180px; margin: 0 auto;
padding: clamp(60px, 10vh, 120px) clamp(24px, 6vw, 90px);
display: flex; flex-direction: column; align-items: flex-start;
text-align: left;
}
/* --------------------------- A FRASE, EM DOIS PESOS ----------------------
O desenho desta página é este, e não um fio decorativo: a armadura da frase
vai no REGULAR, e a palavra da tese vai no EXTRABOLD. O salto de peso faz o
que um enfeite tentaria fazer — e faz melhor, porque é a própria frase
mudando de voz no meio dela.
E sai de graça em todo idioma: cada tradução já traz a palavra da tese
dentro de (assets/js/i18n.js). Não é regra escrita à mão para o
português — é a estrutura que o texto já tinha. */
.stage__hero {
font-family: var(--brand-font);
font-weight: 400; /* a armadura: leve, quase falada */
font-size: clamp(2.4rem, 6.6vw, 5.6rem);
line-height: 1.04; letter-spacing: -0.03em;
max-width: 14ch;
color: var(--ink-muted);
}
.stage__hero em {
font-style: normal;
font-weight: 800; /* a tese: cheia, e a única em âmbar */
letter-spacing: -0.05em; /* peso alto pede a letra mais junta */
color: var(--accent);
}
/* ---------------------- A ENTRADA DA FRASE, PALAVRA A PALAVRA ------------
Não é aparecer: é SUBIR DE TRÁS DA LINHA. Cada palavra vive numa caixa que
corta, e começa inteira embaixo dela — sobe para o lugar como tipo saindo
da caixa alta. É o mesmo gesto do "Bem-vindo de volta" da tela de acesso;
as duas telas passam a se mover igual.
O par padding/margin negativo existe por causa dos rabinhos: ç, g, j, p, q
descem abaixo da linha de base, e uma caixa que corta rente comeria todos
eles. O respiro devolve o espaço sem mexer no lugar da palavra. */
.stage__hero .w {
display: inline-block;
overflow: hidden;
padding-bottom: 0.16em;
margin-bottom: -0.16em;
vertical-align: bottom;
}
.stage__hero .w__i {
display: inline-block;
transform: translateY(115%);
transition: transform 0.78s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}
.stage.is-in .stage__hero .w__i { transform: none; }
/* a palavra da tese chega e SÓ ENTÃO acende no âmbar: a cor entra depois do
movimento, e é ela que fecha a frase */
.stage__hero em {
color: var(--ink-muted);
transition: color 0.5s ease var(--dc, 0.9s);
}
.stage.is-in .stage__hero em { color: var(--accent); }
/* ------------------------- AS TRÊS CAPACIDADES ---------------------------
O que a afirmação quer dizer na prática. Sem ícone: ícone genérico em coluna
de texto é enfeite, e enfeite é o que já quebrou esta página três vezes. */
.stage__caps {
position: relative;
width: 100%;
margin-top: clamp(3.4rem, 9vh, 6rem);
/* GRADE DE 12, e as três não ocupam a mesma largura. Três colunas iguais
com divisória no meio não é composição — é tabela. Aqui elas pulam
colunas: quem separa é o VÃO, não linha nenhuma, e a última é mais larga
de propósito, porque a frase dela é mais longa. */
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: clamp(14px, 1.8vw, 26px);
}
/* o título sobe de trás da linha, igual às palavras da frase; a linha de
texto vem logo atrás, só clareando. Dois gestos diferentes de propósito:
se tudo entrar do mesmo jeito, vira lista animada. */
.cap__t {
overflow: hidden;
padding-bottom: 0.16em;
margin-bottom: -0.16em;
}
.cap__t > span {
display: block;
transform: translateY(115%);
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}
.stage.is-in .cap__t > span { transform: none; }
.cap__d {
opacity: 0; transform: translateY(8px);
transition: opacity 0.55s ease calc(var(--d, 0s) + 0.12s),
transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d, 0s) + 0.12s);
}
.stage.is-in .cap__d { opacity: 1; transform: none; }
/* O MESMO VIDRO DO CARTÃO DE PLANO, e não uma segunda receita.
Estes três eram brancos: fundo `rgba(255,255,255,0.06)`, fio branco a 16% e
um brilho branco a 28% na quina de cima. Três problemas de uma vez.
o branco não existe a paleta é tinta e OSSO (#f1ebdd), quente. Fio branco
sobre fundo quente puxa para o azul, e era o único
lugar do site que não pertencia à casa.
o fio pesava 16% de branco em cima de vidro claro é um contorno
que se vê antes do título. Contorno de cartão é para
fechar a forma, não para ser lido.
o raio destoava 16px aqui, 20px no cartão de plano. Dois raios no
mesmo site são dois materiais, e nada distingue
estes dois casos.
Agora é tinta a 82% com o mesmo desfoque, o mesmo fio de osso a 9% e o mesmo
raio de 20px do cartão de plano. Um sistema, duas aplicações. E o alfa alto
é o que segura o contraste quando a mancha clara passa por trás — ver a
tabela na regra .plan. */
.cap {
padding: clamp(1.35rem, 2.4vw, 1.75rem);
border-radius: 20px;
background: rgb(var(--ink-rgb) / 0.82);
-webkit-backdrop-filter: blur(24px) saturate(1.25);
backdrop-filter: blur(24px) saturate(1.25);
border: 1px solid rgb(var(--bone-rgb) / 0.09);
box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.55);
transition: border-color 0.28s ease, background 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
/* recompensa por explorar: o cartão sob o ponteiro sobe um degrau e clareia o
fio. Nada mais — três cartões que pulam seriam três coisas pedindo clique. */
.cap:hover {
transform: translateY(-3px);
border-color: rgb(var(--bone-rgb) / 0.18);
background: rgb(var(--ink-rgb) / 0.76);
}
@media (prefers-reduced-motion: reduce) {
.cap:hover { transform: none; }
}
/* agora têm moldura, então ocupam quatro colunas cada e encostam uma na outra
com o vão da grade — o pulo de coluna era para separar texto solto */
.cap:nth-child(1) { grid-column: 1 / span 4; --d: 0.50s; }
.cap:nth-child(2) { grid-column: 5 / span 4; --d: 0.58s; }
.cap:nth-child(3) { grid-column: 9 / span 4; --d: 0.66s; }
/* TÍTULO E DESCRIÇÃO PRECISAM SER DE ESPÉCIES DIFERENTES.
Eram 1,04rem/700 contra 0,90rem/400: 14% de diferença de tamanho. De relance
isso não lê como título e texto, lê como duas linhas de texto, uma mais
escura. Hierarquia não se faz com 14%.
Agora são três eixos empurrando junto: tamanho (1,18 contra 0,92), peso (700
contra 400) e cor (osso cheio contra osso a 72%). Nenhum deles precisa ser
exagerado porque os três dizem a mesma coisa. */
.cap__t {
font-family: var(--brand-font); font-weight: 700;
font-size: clamp(1.06rem, 1.3vw, 1.18rem);
letter-spacing: -0.02em; line-height: 1.28;
color: var(--ink);
overflow: hidden;
padding-bottom: 0.16em;
margin-bottom: -0.16em;
}
.cap__d {
margin-top: 10px;
font-size: 0.92rem; line-height: 1.6;
max-width: 34ch; /* ~55 caracteres com o espaço entre eles */
color: var(--ink-muted);
}
@media (max-width: 860px) {
.stage__caps { grid-template-columns: 1fr; }
.cap { grid-column: 1 / -1; margin-top: 22px; }
.cap:first-child { margin-top: 0; }
.cap__d { max-width: none; }
}
/* garantia: se a transição de entrada não rodar, o conteúdo aparece assim mesmo
(mesma ideia usada no botão Revelar da tela de carga) */
.stage.is-shown .stage__hero .w__i,
.stage.is-shown .cap__t > span { transform: none; transition: none; }
.stage.is-shown .cap__d { opacity: 1; transform: none; transition: none; }
.stage.is-shown .stage__hero em { color: var(--accent); transition: none; }
/* A frase e o convite são da HOME e saem na primeira rolagem — os dois falam
da tela de abertura e não teriam sentido no resto. */
body.scrolled .tagline,
body.scrolled .scrollcue { opacity: 0; visibility: hidden; }
/* A ASSINATURA, NÃO. Ela é a marca, e marca acompanha o site inteiro. Fica no
canto com `mix-blend-mode: difference`, então continua legível por cima de
qualquer coisa que passe atrás.
Sai em dois casos, e só nesses:
no fecho o rodapé claro já tem a marca escrita nele, e as duas no
mesmo canto seriam a mesma coisa dita duas vezes
tela estreita aí a grade dos planos encosta na parede e a assinatura
passaria por cima dos cartões — foi o que aconteceu antes */
body.nav-escura .brandmark { opacity: 0; visibility: hidden; }
@media (max-width: 1099px) {
body.scrolled .brandmark { opacity: 0; visibility: hidden; }
}