/* ==========================================================================
CLEVEN · LOADER
Cortina de abertura, em dois modos:
hello · uma saudação por vez, em várias línguas (home)
shimmer · uma frase só, com um brilho passando (growth)
Uso: (no )
(no )
O markup é criado pelo loader.js — não precisa colar HTML nenhum.
O estado vai num data-attribute do (data-cleven="loading"/"ready"),
não numa classe: o Growth é HTML do Next e o React é dono do className do
— mexer nele dá erro de hidratação.
========================================================================== */
/* Pré-cortina: pintada pelo próprio , então cobre a página desde o
primeiro frame — antes de existir para pendurar o overlay.
Sai sozinha quando o overlay de verdade assume por cima. */
html[data-cleven="loading"]::before {
content: "";
position: fixed;
inset: 0;
z-index: 9997;
background: var(--cleven-bg, #060606);
}
/* o modo shimmer abre claro, para casar com o creme do Growth */
html[data-cleven-loader="shimmer"][data-cleven="loading"]::before {
background: var(--cleven-cream, #f3f1ec);
}
#cleven-loader {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
background: var(--cleven-bg, #060606);
transform: translateY(0);
transition: transform 720ms cubic-bezier(0.76, 0, 0.24, 1);
will-change: transform;
}
#cleven-loader[data-mode="shimmer"] {
background: var(--cleven-cream, #f3f1ec);
}
/* Barriga curva abaixo da dobra: só aparece quando o painel sobe.
O fio na borda é o que torna o arco visível — painel subindo sobre
página da mesma cor não se enxerga sozinho. */
#cleven-loader::after {
content: "";
position: absolute;
top: 100%;
left: -2%;
width: 104%;
height: 15vh;
background: inherit;
border-bottom: 1px solid rgba(240, 240, 240, 0.5);
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
#cleven-loader[data-mode="shimmer"]::after {
border-bottom-color: rgba(14, 14, 13, 0.28);
}
/* sobe levando o arco junto, revelando a página */
#cleven-loader[data-state="out"] {
transform: translateY(-116vh);
}
#cleven-loader[hidden] {
display: none;
}
/* ---------- modo hello ---------- */
.cleven-loader__word {
font-family: var(--cleven-font, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
font-weight: 400;
font-size: clamp(27px, 3.4vw, 46px);
letter-spacing: -0.02em;
line-height: 1;
color: var(--cleven-silver, #b4b4b4);
/* todas na mesma célula do grid: sem trepidação entre larguras diferentes */
grid-area: 1 / 1;
text-align: center;
padding: 0 24px;
opacity: 0;
transition: opacity 70ms linear;
will-change: opacity;
}
.cleven-loader__word::before {
content: "·";
margin-inline-end: 0.32em;
}
.cleven-loader__word[data-visible="true"] {
opacity: 1;
}
/* Geist não cobre o alfabeto árabe — cai numa face árabe do sistema */
.cleven-loader__word--ar {
font-family: var(--cleven-font-ar, "Geeza Pro", "Noto Kufi Arabic", "Segoe UI", sans-serif);
font-size: clamp(24px, 3vw, 40px);
letter-spacing: 0;
}
/* ---------- modo shimmer ---------- */
/*
* O brilho é um gradiente recortado no próprio texto: o texto vira janela
* (text-fill transparent) e o gradiente corre por trás. Mesma técnica do
* componente ShimmerText, só que em CSS puro — aqui não há React.
*/
.cleven-loader__shimmer {
grid-area: 1 / 1;
max-width: min(88vw, 20em);
text-align: center;
font-family: var(--cleven-font-display, var(--cleven-font, "Geist", serif));
font-weight: 400;
font-size: clamp(26px, 4.2vw, 54px);
line-height: 1.15;
letter-spacing: -0.015em;
text-wrap: balance;
color: var(--cleven-ink-dark, #0e0e0d);
--cleven-shimmer: rgba(243, 241, 236, 0.85);
background:
currentColor
linear-gradient(
to right,
currentColor 0%,
var(--cleven-shimmer) 40%,
var(--cleven-shimmer) 60%,
currentColor 100%
);
background-repeat: no-repeat;
background-size: 50% 200%;
background-position: -100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0;
transition: opacity 420ms var(--cleven-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.cleven-loader__shimmer[data-visible="true"] {
opacity: 1;
animation: cleven-shimmer 1.5s linear 0.15s infinite;
}
@keyframes cleven-shimmer {
from { background-position: -100% 0; }
to { background-position: 250% 0; }
}
/* trava o scroll enquanto a cortina está na tela */
html[data-cleven="loading"],
html[data-cleven="loading"] body {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
#cleven-loader,
.cleven-loader__word,
.cleven-loader__shimmer {
transition: none;
animation: none;
}
}