/* ============================================================ NEXT BUSINESS · laboratorio de linguagem de site Camada de forma: 2026. Zero biblioteca. Zero framework. ============================================================ */ @layer reset, base, forma, comp, mov, estado; /* ---------- propriedades registradas (animaveis de verdade) ---------- */ @property --ang { syntax: ""; inherits: false; initial-value: 0deg } @property --avanco { syntax: ""; inherits: false; initial-value: 0% } @font-face{font-family:"Switzer";src:url("../fonte/switzer.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:"Switzer";src:url("../fonte/switzer-italico.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap} @layer reset { *, *::before, *::after { box-sizing: border-box } * { margin: 0 } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } } img, svg { display: block; max-width: 100% } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em } button { font: inherit; color: inherit; background: none; border: 0 } :focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; border-radius: 2px } } @layer base { :root { color-scheme: dark; /* ancoras da marca, medidas do brandbook e convertidas para oklch */ --noturno: oklch(.2381 .0713 252.01); /* #001F3F 55% */ --royal: oklch(.5622 .1773 253.71); /* #0074D9 20% */ --gelo: oklch(.9816 .0017 247.84); /* #F8F9FA 18% */ --ouro: oklch(.8094 .1265 83.27); /* #E8B958 5% */ --deep: oklch(.1854 .0549 251.61); /* #00132A */ /* --- derivadas: NENHUMA escrita a mao. Toda uma mistura da ancora. --- */ --fundo: oklch(from var(--deep) calc(l - .072) c h); --fundo-2: color-mix(in oklch, var(--noturno) 62%, var(--fundo)); --fundo-alto: color-mix(in oklch, var(--royal) 9%, var(--fundo)); --tinta: color-mix(in oklch, var(--gelo) 96%, var(--royal)); --tinta-2: color-mix(in oklch, var(--tinta) 68%, var(--fundo)); --tinta-3: color-mix(in oklch, var(--tinta) 63%, var(--fundo)); --fio: color-mix(in oklch, var(--tinta) 15%, transparent); --fio-forte: color-mix(in oklch, var(--royal) 48%, transparent); --foco: var(--ouro); --claro: var(--gelo); --claro-tinta: color-mix(in oklch, var(--deep) 94%, var(--royal)); --claro-fio: color-mix(in oklch, var(--noturno) 16%, transparent); /* movimento: tokens homologados da casa, mantidos */ --saida: cubic-bezier(.23, 1, .32, 1); --entrada: cubic-bezier(.77, 0, .175, 1); --mola: linear(0,.0705,.2269,.4092,.5820,.7277,.8404,.9209,.9741,1.0058, 1.0220,1.0278,1.0274,1.0237,1.0186,1.0136,1.0092,1.0056,1.0030); --t-toque: 130ms; --t-perto: 180ms; --t-bloco: 240ms; --t-cena: 300ms; --t-mola: 430ms; /* medidas */ --larg: 1240px; --goteira: clamp(20px, 4vw, 56px); --topo: 60px; --passo: clamp(64px, 9vh, 128px); --recuo: max(var(--goteira), calc((100vw - var(--larg)) / 2 + var(--goteira))); } body { background: var(--fundo); color: var(--tinta); font-family: "Switzer", ui-sans-serif, system-ui, sans-serif; font-size: clamp(16px, .55vw + 14.4px, 18px); font-weight: 400; line-height: 1.6; font-optical-sizing: auto; overflow-x: clip; /* clip, nunca hidden: hidden mata todo sticky em silencio */ } h1, h2, h3 { font-weight: 560; line-height: .96; letter-spacing: -.035em; text-wrap: balance } p { text-wrap: pretty } .d1 { font-size: clamp(3rem, 10.2vw, 8.8rem); font-weight: 640; letter-spacing: -.052em; line-height: .86 } .d2 { font-size: clamp(2rem, 5.2vw, 4rem); font-weight: 580; letter-spacing: -.042em; line-height: .98 } .d3 { font-size: clamp(1.35rem, 2.3vw, 2rem); font-weight: 540; letter-spacing: -.03em; line-height: 1.08 } .lead { font-size: clamp(1.04rem, 1.1vw, 1.24rem); color: var(--tinta-2); max-width: 46ch; line-height: 1.52 } .nota { font-size: .8rem; color: var(--tinta-3); line-height: 1.45 } .sinal { color: var(--ouro) } .dado { font-variant-numeric: tabular-nums; letter-spacing: -.02em } } @layer forma { .env { width: 100%; max-width: var(--larg); margin-inline: auto; padding-inline: var(--goteira) } .g12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(12px, 1.6vw, 28px) } .heranca { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid } section { position: relative } .bloco { padding-block: var(--passo) } /* superficie: profundidade por LUZ, nunca por sombra preta */ .sup { position: relative; isolation: isolate; background: linear-gradient(160deg, color-mix(in oklch, var(--tinta) 6%, transparent) 0%, transparent 46%), var(--fundo-2); border: 1px solid var(--fio); border-radius: 26px; corner-shape: squircle; container-type: inline-size; } .sup::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--royal) 70%, var(--gelo)) 24%, color-mix(in oklch, var(--ouro) 42%, transparent) 62%, transparent); opacity: .55; pointer-events: none; } hr.fio { height: 1px; background: linear-gradient(90deg, var(--fio-forte), transparent 74%); border: 0 } .rotulo { display: inline-block; font-size: .72rem; font-weight: 580; letter-spacing: .15em; text-transform: uppercase; color: var(--tinta-3); } .claro-bloco { --tinta: color-mix(in oklch, var(--deep) 94%, var(--royal)); --tinta-2: color-mix(in oklch, var(--deep) 66%, var(--gelo)); --tinta-3: color-mix(in oklch, var(--deep) 62%, var(--gelo)); --fio: var(--claro-fio); --fio-forte: color-mix(in oklch, var(--royal) 40%, transparent); --fundo-2: color-mix(in oklch, var(--noturno) 5%, var(--gelo)); background: var(--gelo); color: var(--tinta); color-scheme: light; } } @layer comp { .bt { display: inline-flex; align-items: center; gap: .6em; padding: .9em 1.5em; min-height: 52px; font-size: .95rem; font-weight: 560; letter-spacing: -.012em; border-radius: 999px; corner-shape: squircle; background: var(--royal); color: oklch(.99 0 0); transition: background var(--t-perto) var(--saida), transform var(--t-toque) var(--saida); text-decoration: none; } .bt:hover { background: color-mix(in oklch, var(--royal) 80%, var(--gelo)) } .bt:active { transform: scale(.972) } .bt-fio { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--fio-forte) } .bt-fio:hover { background: color-mix(in oklch, var(--royal) 15%, transparent) } .bt .seta { transition: translate var(--t-bloco) var(--saida) } .bt:hover .seta { translate: .2em 0 } /* ---- topo: muda de estado quando GRUDA. Zero JS. ---- */ .topo { position: sticky; top: 0; z-index: 40; container-type: scroll-state } .topo-miolo { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--topo); padding-inline: var(--goteira); border-bottom: 1px solid transparent; transition: background var(--t-cena) var(--saida), border-color var(--t-cena) var(--saida); } @container scroll-state(stuck: top) { .topo-miolo { background: color-mix(in oklch, var(--fundo) 88%, var(--royal)); border-bottom-color: var(--fio); } } .topo-marca { display: flex; align-items: center; gap: .55em; font-weight: 580; letter-spacing: -.03em; text-decoration: none } .topo-marca img { height: 27px; width: auto } .topo nav { display: none; gap: clamp(14px, 1.8vw, 30px); font-size: .88rem; color: var(--tinta-2) } @media (min-width: 900px) { .topo nav { display: flex } } .topo nav a { text-decoration: none; transition: color var(--t-perto) var(--saida) } .topo nav a:hover { color: var(--tinta) } /* ---- medidor de rolagem: mede a rolagem REAL, nao e enfeite ---- */ .medidor { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 50; transform-origin: 0 50%; scale: 0 1; pointer-events: none; background: linear-gradient(90deg, var(--royal), var(--ouro)); } /* ---- zap fixo ---- */ .zap { position: fixed; right: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px); z-index: 45; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; corner-shape: squircle; background: oklch(.74 .17 148); color: oklch(.18 .04 148); transition: transform var(--t-mola) var(--mola); opacity: 1 !important; /* TRAVA DURA: CTA e receita, nunca enfeite */ } .zap:hover { transform: scale(1.06) } .zap:active { transform: scale(.96) } } /* ============================================================ FUNDO VIVO · a seta da marca atravessa a tela com a rolagem ============================================================ */ @property --revela { syntax: ""; inherits: false; initial-value: 0% } @layer forma { :root { timeline-scope: --foco } .fundo { position: fixed; inset: 0; z-index: -1; overflow: clip; pointer-events: none; contain: strict; } .fundo-luz { position: absolute; width: 92vmax; height: 92vmax; left: -30vmax; top: 24vh; background: radial-gradient(closest-side, color-mix(in oklch, var(--royal) 30%, transparent) 0%, color-mix(in oklch, var(--royal) 9%, transparent) 46%, transparent 74%); will-change: translate; } .fundo-seta, .fundo-eco { position: absolute; inset: 0; width: 100%; height: 100%; will-change: translate, scale; } .fundo-seta { opacity: .16 } .fundo-eco { opacity: .10 } /* padrao sem suporte a rolagem-tempo: a seta fica parada e discreta */ @supports not (animation-timeline: scroll()) { .fundo-seta { opacity: .10; translate: 2% -2% } .fundo-eco { opacity: .06 } } } /* ============================================================ CENAS ============================================================ */ @layer forma { /* ---------- 1 · ABERTURA ---------- */ .abertura { min-height: calc(100svh - var(--topo)); display: grid; grid-template-rows: 1fr auto; padding-top: clamp(52px, 13vh, 150px); overflow: clip; } .abertura .env { display: grid; align-content: end; gap: clamp(20px, 3vh, 34px); position: relative } /* na abertura o display cede espaco para a marca */ .abertura .d1 { font-size: clamp(2.3rem, 5.8vw, 5rem); letter-spacing: -.046em } @media (min-width: 1000px) { .abertura .env > * { max-width: 63% } } /* a marca: grande, visivel e DESCOLADA do fundo */ .marca { position: absolute; z-index: 0; pointer-events: none; right: clamp(0px, 2.5vw, 46px); top: clamp(5vh, 14vh, 20vh); width: min(46vw, 510px); transform-origin: 62% 38%; filter: drop-shadow(0 26px 44px oklch(0 0 0 / .55)) drop-shadow(0 0 86px color-mix(in oklch, var(--royal) 30%, transparent)); will-change: translate, scale, opacity; } .marca img { width: 100%; height: auto; display: block; transform: perspective(1700px) rotateY(-11deg) rotateX(5deg) } .abertura .env, .abertura .faixa-fatos { position: relative; z-index: 1 } @media (max-width: 899px) { .marca { width: 86vw; right: -14vw; top: 2vh; opacity: .92 } .marca img { transform: perspective(1200px) rotateY(-9deg) rotateX(4deg) } } .h-linha { display: block; overflow: clip; padding-bottom: .14em; margin-bottom: -.14em } .h-linha:nth-child(2) { padding-left: clamp(10px, 4.5vw, 74px) } .h-linha:nth-child(3) { padding-left: clamp(20px, 6vw, 104px) } .abertura .lead { padding-left: clamp(0px, 4.5vw, 74px); max-width: 50ch } .acoes { display: flex; flex-wrap: wrap; gap: 12px; padding-left: clamp(0px, 4.5vw, 74px) } .faixa-fatos { border-top: 1px solid var(--fio); display: grid; grid-template-columns: 1fr; backdrop-filter: none; } .fato { padding: 18px var(--goteira); display: grid; gap: 2px } .fato span { color: var(--tinta-2); font-size: .92rem } .fato b { font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 620; letter-spacing: -.04em } .fato:last-child { padding-right: clamp(78px, 8vw, 110px) } @media (min-width: 760px) { .faixa-fatos { grid-template-columns: repeat(3, 1fr) } .fato + .fato { border-left: 1px solid var(--fio) } } /* ---------- 2 · NICHOS: a lista acende, sem correr para o lado ---------- */ .nichos { padding-block: clamp(26px, 4vh, 44px); border-block: 1px solid var(--fio); view-timeline: --nic block } .nichos-linha { list-style: none; padding: 0 var(--goteira); margin-inline: auto; max-width: var(--larg); display: flex; flex-wrap: wrap; gap: clamp(14px, 2.6vw, 38px); font-size: clamp(.86rem, 1.3vw, 1.05rem); font-weight: 520; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); } .nichos-linha li { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 38px) } .nichos-linha li:not(:last-child)::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in oklch, var(--royal) 70%, var(--tinta)); } /* ---------- 3 · SOBRE: a seta do fundo ganha nitidez ---------- */ .sobre { height: 138vh; view-timeline: --foco block } .sobre-palco { position: sticky; top: var(--topo); height: calc(100svh - var(--topo)); display: grid; align-content: center; gap: clamp(20px, 3.4vh, 38px); } @media (max-width: 899px) { .sobre { height: 124vh } } .pilares-bloco { padding-bottom: var(--passo) } .sobre-palco .lead { max-width: 58ch } .veu { position: relative; isolation: auto } .veu::before { content: ""; position: absolute; inset: -55% -16%; z-index: -1; pointer-events: none; background: radial-gradient(56% 116% at 32% 50%, color-mix(in oklch, var(--fundo) 88%, transparent) 0%, color-mix(in oklch, var(--fundo) 38%, transparent) 52%, transparent 76%); filter: blur(28px); } .pilares { display: grid; gap: clamp(26px, 4vw, 44px) } @media (min-width: 860px) { .pilares { grid-template-columns: repeat(3, 1fr) } } .pilar { border-top: 1px solid var(--fio-forte); padding-top: 18px; display: grid; gap: 10px; align-content: start } .pilar-num { font-size: .78rem; font-weight: 600; letter-spacing: .16em; color: var(--ouro) } .pilar p:last-child { color: var(--tinta-2); font-size: .98rem; max-width: 40ch } /* ---------- 4 · FRENTES: pilha vertical ---------- */ .frentes-topo { padding-bottom: clamp(24px, 4vh, 48px); display: grid; gap: 16px } .frentes-topo .lead { max-width: 62ch } .frentes { padding-block: var(--passo) 0 } .pilha { display: block } .frente { height: 60vh; view-timeline: --f block } @media (max-width: 899px) { .frente { height: 78vh } } .frente:last-child { height: auto; padding-bottom: var(--passo) } .frente-cartao { position: sticky; top: calc(var(--topo) + 5vh + var(--n, 0) * 11px); padding: clamp(26px, 4.2vh, 50px) var(--recuo) clamp(28px, 4.4vh, 52px); border-top: 1px solid var(--fio-forte); background: linear-gradient(172deg, color-mix(in oklch, var(--royal) 14%, transparent), transparent 56%), color-mix(in oklch, var(--fundo) 88%, var(--noturno)); transform-origin: 50% 0; display: grid; gap: clamp(12px, 1.8vh, 20px); } .frente:nth-child(1) { --n: 0 } .frente:nth-child(2) { --n: 1 } .frente:nth-child(3) { --n: 2 } .frente:nth-child(4) { --n: 3 } .frente-cabeca { display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(14px, 2.4vw, 28px); align-items: baseline } .frente-num { font-size: clamp(1.5rem, 3.4vw, 2.6rem); font-weight: 640; letter-spacing: -.05em; line-height: 1; color: color-mix(in oklch, var(--royal) 62%, var(--tinta)); font-variant-numeric: tabular-nums; } .frente-tag { font-size: .72rem; font-weight: 580; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 6px } .frente-cartao .lead { max-width: 60ch } .entregas { list-style: none; padding: 0; margin-top: 4px; display: grid; gap: 8px clamp(18px, 3vw, 44px); grid-template-columns: repeat(2, minmax(0,1fr)); font-size: clamp(.85rem, 1vw, .96rem); color: var(--tinta-2); } @media (min-width: 1000px) { .entregas { grid-template-columns: repeat(3, minmax(0,1fr)) } } .entregas li { position: relative; padding-left: 16px; line-height: 1.38 } .entregas li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 1px; background: color-mix(in oklch, var(--ouro) 80%, transparent); } /* ---------- 5 · PROVA ---------- */ .prova { padding-block: var(--passo) } .prova-grade { display: grid; gap: clamp(28px, 5vw, 64px) } @media (min-width: 900px) { .prova-grade { grid-template-columns: minmax(0,.9fr) minmax(0,1fr); align-items: start } } .prova-presa { container-type: scroll-state } @media (min-width: 900px) { .prova-presa { position: sticky; top: calc(var(--topo) + 9vh) } } .prova-cartao { padding: clamp(26px, 3vw, 42px); border-radius: 30px; corner-shape: squircle; border: 1px solid var(--fio); background: linear-gradient(165deg, color-mix(in oklch, var(--royal) 15%, transparent), transparent 58%), color-mix(in oklch, var(--fundo) 84%, var(--noturno)); transition: border-color var(--t-cena) var(--saida); } @container scroll-state(stuck: top) { .prova-cartao { border-color: color-mix(in oklch, var(--ouro) 46%, transparent) } .prova-cartao .prova-selo { opacity: 1; translate: 0 0 } } .prova-numero { font-size: clamp(3.4rem, 8.2vw, 6.4rem); font-weight: 640; letter-spacing: -.055em; line-height: .9; font-variant-numeric: tabular-nums; margin-block: 10px 14px; } .prova-fonte { font-size: .95rem; color: var(--tinta-2) } .prova-selo { display: inline-flex; margin-top: 16px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); opacity: 0; translate: 0 6px; transition: opacity var(--t-cena) var(--saida), translate var(--t-cena) var(--saida); } .prova-lista { display: grid; border-top: 1px solid var(--fio); margin-top: clamp(24px,4vh,38px) } .prova-item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding-block: clamp(20px, 3.2vh, 32px); border-bottom: 1px solid var(--fio); } .prova-item span { color: var(--tinta-2) } .prova-item b { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 620; letter-spacing: -.04em; font-variant-numeric: tabular-nums } .prova-regra { margin-top: clamp(22px,3.4vh,32px); font-size: 1rem; color: var(--tinta-2); max-width: 48ch } /* ---------- 6 · JORNADA ---------- */ .jornada { padding-block: var(--passo); view-timeline: --met block } .jornada-grade { display: grid; gap: clamp(30px, 5vw, 70px) } .jornada-grade > :first-child { display: grid; gap: 16px; align-content: start } @media (min-width: 900px) { .jornada-grade { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: start } .jornada-grade > :first-child { position: sticky; top: calc(var(--topo) + 10vh) } } .passos { list-style: none; position: relative; display: grid; gap: clamp(30px, 5vh, 58px); padding-left: 58px } .passos::before, .passos::after { content: ""; position: absolute; left: 19px; top: 14px; bottom: 14px; width: 1px; } .passos::before { background: var(--fio) } .passos::after { background: linear-gradient(180deg, var(--royal), var(--ouro)); transform-origin: 50% 0; scale: 1 0 } .passo { position: relative } .passo-mes { position: absolute; left: -58px; top: 0; width: 39px; height: 39px; border-radius: 50%; display: grid; place-items: center; font-size: .76rem; font-weight: 600; letter-spacing: .02em; background: var(--fundo); color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--fio-forte); } .passo h3 { margin-bottom: 8px } .passo p { color: var(--tinta-2); max-width: 50ch } /* ---------- 7 · SÓCIOS ---------- */ .socios { padding-block: var(--passo) } .socios-grade { display: grid; gap: clamp(30px, 5vw, 68px) } @media (min-width: 940px) { .socios-grade { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: start } .socios-foto { position: sticky; top: calc(var(--topo) + 9vh) } } .socios-foto { margin: 0; border-radius: 30px; corner-shape: squircle; overflow: clip; border: 1px solid var(--fio) } .socios-foto img { width: 100%; height: auto; filter: saturate(.92) contrast(1.04) } .socios-texto { display: grid; gap: clamp(18px, 3vh, 30px); align-content: start } .socio { border-top: 1px solid var(--fio-forte); padding-top: 18px; display: grid; gap: 8px } .socio-papel { font-size: .72rem; font-weight: 580; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro) } .socio p:last-child { color: var(--tinta-2); font-size: .98rem; max-width: 52ch } /* ---------- 8 · DIAGNÓSTICO (quebra clara) ---------- */ .diag { padding-block: calc(var(--passo) * 1.05) } .diag .env { display: grid; gap: clamp(14px, 2.2vh, 22px); justify-items: start } .diag-selo { color: color-mix(in oklch, var(--royal) 84%, black) } .diag .lead { max-width: 62ch } .diag-grade { display: grid; gap: clamp(24px, 3.4vw, 44px); margin-top: clamp(24px, 4vh, 44px); width: 100%; } @media (min-width: 720px) { .diag-grade { grid-template-columns: repeat(2, 1fr) } } @media (min-width: 1060px) { .diag-grade { grid-template-columns: repeat(3, 1fr) } } .diag-item { border-top: 1px solid var(--fio-forte); padding-top: 18px; display: grid; gap: 10px; align-content: start } .diag-item p { color: var(--tinta-2); font-size: .98rem; max-width: 42ch } /* ---------- 9 · FECHO ---------- */ .fecho { padding-block: calc(var(--passo) * 1.25); overflow: clip } .fecho .env { display: grid; gap: clamp(20px, 3vh, 34px); justify-items: start } .fecho .d1 { font-size: clamp(2.2rem, 6.4vw, 5.2rem) } .rodape { padding-block: clamp(40px, 6vh, 70px) 26px; border-top: 1px solid var(--fio); font-size: .92rem; color: var(--tinta-3) } .rodape-grade { display: grid; gap: clamp(28px, 4vw, 48px) } @media (min-width: 760px) { .rodape-grade { grid-template-columns: 1.4fr repeat(3, 1fr) } } .rodape-marca { display: grid; gap: 14px; align-content: start; justify-items: start } .rodape-marca img { height: 26px; width: auto; opacity: .9 } .rodape-marca p { max-width: 26ch; color: var(--tinta-2) } .rodape-col { display: grid; gap: 10px; align-content: start } .rodape-col .rotulo { margin-bottom: 4px } .rodape-col a { text-decoration: none; color: var(--tinta-2); transition: color var(--t-perto) var(--saida) } .rodape-col a:hover { color: var(--tinta) } .rodape-pe { margin-top: clamp(30px, 4.6vh, 52px); padding-top: 20px; border-top: 1px solid var(--fio); font-size: .82rem } } /* ============================================================ MOVIMENTO · scroll-driven nativo. Zero JS. ============================================================ */ @layer mov { @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { /* --- o fundo: a seta atravessa, se revela e ganha foco --- */ .fundo-seta { mask-image: linear-gradient(59deg, #000 0 var(--revela), #0000 calc(var(--revela) + 8%)); animation: seta-anda linear both, seta-revela linear both, seta-foco linear both; animation-timeline: scroll(root block), scroll(root block), --foco; animation-range: 0% 100%, 3% 26%, cover 6% cover 94%; } .fundo-eco { mask-image: linear-gradient(59deg, #000 0 var(--revela), #0000 calc(var(--revela) + 14%)); animation: eco-anda linear both, eco-revela linear both; animation-timeline: scroll(root block), scroll(root block); animation-range: 0% 100%, 6% 31%; } @keyframes seta-anda { from { translate: -14% 26%; scale: 1.06; rotate: -5deg } to { translate: 24% -30%; scale: 1.34; rotate: 2deg } } @keyframes eco-anda { from { translate: -8% 32%; scale: 1.2 } to { translate: 31% -22%; scale: 1.52 } } @keyframes seta-revela { from { --revela: 24% } to { --revela: 112% } } @keyframes eco-revela { from { --revela: 14% } to { --revela: 118% } } @keyframes seta-foco { 0% { opacity: .16 } 50% { opacity: .46 } 100% { opacity: .16 } } .fundo-luz { animation: luz-anda linear both; animation-timeline: scroll(root block); } @keyframes luz-anda { from { translate: -12% 18%; opacity: .95 } to { translate: 56% -46%; opacity: .55 } } /* o clima da cena muda ao longo da pagina, como um filme troca de luz */ body { animation: clima linear both; animation-timeline: scroll(root block); } @keyframes clima { 0% { background-color: var(--fundo) } 40% { background-color: color-mix(in oklch, var(--noturno) 40%, var(--fundo)) } 74% { background-color: var(--fundo) } 100% { background-color: color-mix(in oklch, var(--deep) 66%, var(--fundo)) } } /* a marca desce e entrega o lugar para a seta */ .marca { animation: marca-entra 1100ms var(--saida) both 120ms, marca-sai linear both; animation-timeline: auto, scroll(root block); animation-range: normal, 0% 26%; } @keyframes marca-entra { from { opacity: 0; translate: 3% -4%; scale: .9 } to { opacity: 1; translate: 0 0; scale: 1 } } @keyframes marca-sai { 0% { opacity: 1; translate: 0 0; scale: 1 } 62% { opacity: .5; translate: 0 16vh; scale: .9 } 100% { opacity: 0; translate: 0 30vh; scale: .82 } } /* --- revelacao geral --- */ .rv { animation: rv-entra linear both; animation-timeline: view(); animation-range: entry 6% cover 24%; } @keyframes rv-entra { from { opacity: 0; translate: 0 20px } to { opacity: 1; translate: 0 0 } } /* --- nichos: cada palavra acende na entrada. Movimento vertical, nunca lateral. --- */ .nichos-linha li { animation: nicho-acende linear both; animation-timeline: --nic; animation-range: entry calc(16% + var(--i, 0) * 9%) entry calc(74% + var(--i, 0) * 9%); } .nichos-linha li:nth-child(1) { --i: 0 } .nichos-linha li:nth-child(2) { --i: 1 } .nichos-linha li:nth-child(3) { --i: 2 } .nichos-linha li:nth-child(4) { --i: 3 } .nichos-linha li:nth-child(5) { --i: 4 } .nichos-linha li:nth-child(6) { --i: 5 } .nichos-linha li:nth-child(7) { --i: 6 } @keyframes nicho-acende { from { opacity: .2; translate: 0 8px; color: var(--tinta-3) } to { opacity: 1; translate: 0 0; color: var(--tinta) } } .medidor { animation: med linear both; animation-timeline: scroll(root block) } @keyframes med { from { scale: 0 1 } to { scale: 1 1 } } /* --- abertura: cortina com direcao --- */ .h-linha > span { display: block; animation: sobe-linha 880ms var(--saida) both } .h-linha:nth-child(1) > span { animation-delay: 60ms } .h-linha:nth-child(2) > span { animation-delay: 155ms } .h-linha:nth-child(3) > span { animation-delay: 250ms } @keyframes sobe-linha { from { translate: 0 108%; opacity: 0 } to { translate: 0 0; opacity: 1 } } .abertura .lead, .abertura .acoes { animation: sobe-suave 740ms var(--saida) both 330ms } @keyframes sobe-suave { from { opacity: 0; translate: 0 16px } to { opacity: 1; translate: 0 0 } } /* --- frentes: o cartao de baixo recua quando o proximo sobe --- */ .frente-cartao { animation: recua linear both; animation-timeline: --f; animation-range: cover 58% cover 100%; } @keyframes recua { from { scale: 1; opacity: 1 } to { scale: .972; opacity: .62 } } .frente:last-child .frente-cartao { animation: none } /* --- jornada: o trilho preenche --- */ .passos::after { animation: trilho linear both; animation-timeline: --met; animation-range: contain 0% contain 86%; } @keyframes trilho { from { scale: 1 0 } to { scale: 1 1 } } .passo { animation: passo-acende linear both; animation-timeline: view(); animation-range: entry 30% cover 44%; } @keyframes passo-acende { from { opacity: .4; translate: 0 10px } to { opacity: 1; translate: 0 0 } } } } /* fallback honesto */ @supports not (animation-timeline: view()) { .passos::after { scale: 1 1 } .medidor { scale: 1 1 } } @media (prefers-reduced-motion: reduce) { .marca { opacity: .9 } .passos::after { scale: 1 1 } .sobre { height: auto } .sobre-palco { position: static; height: auto; padding-block: var(--passo) } .frente { height: auto; margin-bottom: 22px } .frente-cartao { position: static } .socios-foto { position: static } .nichos-linha li { opacity: 1 } .fundo-seta { opacity: .12 } .fundo-eco { opacity: .07 } } /* celular: o CTA do topo encolhe e o cartao respeita o botao flutuante */ @media (max-width: 640px) { .d1 { font-size: clamp(2.45rem, 11.6vw, 8.8rem) } .h-linha:nth-child(2) { padding-left: 10px } .h-linha:nth-child(3) { padding-left: 22px } .topo-miolo .bt { padding: .7em 1em; min-height: 42px; font-size: .84rem } .topo-marca img { height: 23px } .frente-cartao { padding-bottom: calc(clamp(28px,4.4vh,52px) + 46px); padding-right: calc(var(--recuo) + 54px) } .entregas { gap: 7px 14px } } @media (max-width: 899px) { .fundo-seta, .fundo-eco { scale: 1.3 } } @media print { .medidor, .zap, .topo, .fundo { display: none } .frente, .sobre { height: auto } .sobre-palco { position: static; height: auto } .frente-cartao, .socios-foto { position: static } .rv { opacity: 1; translate: none; animation: none } .nichos-linha li { opacity: 1 } } } /* ============================================================ VINHETA DE ABERTURA · a marca se desenha antes do site Reconstrucao da intro do site atual da Next. Sem JS. ============================================================ */ @layer comp { .pular-gatilho { position: fixed; opacity: 0; pointer-events: none; width: 0; height: 0 } .intro { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: radial-gradient(130% 130% at 50% 42%, color-mix(in oklch, var(--royal) 22%, var(--noturno)) 0%, var(--deep) 55%, oklch(.07 .03 252) 100%); animation: intro-sai 640ms var(--saida) 2600ms both; } @keyframes intro-sai { 0% { opacity: 1; scale: 1; visibility: visible } 99% { opacity: 0; scale: 1.06; visibility: visible } 100% { opacity: 0; scale: 1.06; visibility: hidden } } /* NAO travar a rolagem mexendo em overflow do : qualquer valor != visible mata sticky E zera o alcance de scroll(root block) -- e o fill:both deixa o estrago permanente depois que a vinheta acaba. A capa e fixed e cobre tudo; se o visitante rolar durante os 2,6s, ele so comeca a pagina mais abaixo. */ .intro-trava { display: flex; align-items: center; position: relative } .intro-marca { position: relative; width: clamp(122px, 21vw, 208px); flex-shrink: 0 } .intro-n { width: 100%; height: auto; opacity: 0; transform-origin: 15% 90%; animation: intro-n 880ms var(--saida) 380ms both; filter: drop-shadow(0 18px 40px oklch(0 0 0 / .5)); } @keyframes intro-n { 0% { opacity: 0; translate: -16% 18%; scale: .5; rotate: -16deg; filter: blur(16px) brightness(2.4) } 55% { opacity: 1; filter: blur(1px) brightness(1.5) } 100% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: blur(0) brightness(1) } } /* o rastro de luz: a seta se desenha antes de a marca aparecer */ /* o rastro cobre EXATAMENTE a caixa da imagem: o viewBox e 274x221, a mesma proporcao do arquivo, entao a curva cai em cima da espinha da seta. */ .intro-rastro { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none } .rastro-risco { fill: none; stroke: url(#rastro); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: rastro-risca 760ms cubic-bezier(.55,.06,.35,1) 80ms both, rastro-some 480ms linear 880ms both; } .rastro-nucleo { stroke-width: 4 } .rastro-halo { stroke-width: 13 } @keyframes rastro-risca { 0% { stroke-dashoffset: 1; opacity: 0 } 12% { opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 1 } } @keyframes rastro-some { to { opacity: 0 } } /* o clarao na ponta da seta */ .intro-clarao { position: absolute; top: 2%; left: 98%; width: clamp(96px, 15vw, 152px); aspect-ratio: 1; translate: -50% -50%; scale: 0; opacity: 0; pointer-events: none; animation: clarao 860ms var(--mola) 900ms both; } .intro-clarao::before, .intro-clarao::after { content: ""; position: absolute; inset: 0 } .intro-clarao::before { background: linear-gradient(90deg, transparent 8%, oklch(1 0 0 / .95) 50%, transparent 92%) center / 100% 2px no-repeat, linear-gradient(180deg, transparent 8%, oklch(1 0 0 / .95) 50%, transparent 92%) center / 2px 100% no-repeat; } .intro-clarao::after { background: radial-gradient(circle, oklch(1 0 0 / .95) 0%, color-mix(in oklch, var(--royal) 70%, white) 20%, color-mix(in oklch, var(--royal) 30%, transparent) 42%, transparent 65%); filter: blur(1.5px); } @keyframes clarao { 0% { opacity: 0; scale: 0; rotate: -20deg } 45% { opacity: 1; scale: 1.3; rotate: 4deg } 100% { opacity: .95; scale: 1; rotate: 10deg } } /* o lettering abre a partir da largura zero */ .intro-palavra { display: flex; flex-direction: column; gap: clamp(5px, .9vw, 10px); overflow: clip; max-width: 0; opacity: 0; margin-left: 0; white-space: nowrap; animation: palavra-abre 760ms var(--saida) 1180ms both; } @keyframes palavra-abre { from { max-width: 0; opacity: 0; margin-left: 0 } to { max-width: 560px; opacity: 1; margin-left: clamp(22px, 4vw, 46px) } } .intro-next, .intro-business { color: var(--gelo); opacity: 0; translate: -44px 0 } .intro-next { font-size: clamp(42px, 7.6vw, 80px); font-weight: 680; letter-spacing: -.02em; line-height: .92 } .intro-business { font-size: clamp(16px, 2.8vw, 29px); font-weight: 500; letter-spacing: .36em } .intro-next { animation: palavra-entra 580ms var(--saida) 1300ms both } .intro-business { animation: palavra-entra 580ms var(--saida) 1420ms both } @keyframes palavra-entra { to { opacity: 1; translate: 0 0 } } /* poeira de luz */ .intro-po { position: absolute; inset: 0; pointer-events: none } .intro-po span { position: absolute; width: 3px; aspect-ratio: 1; border-radius: 50%; background: color-mix(in oklch, var(--royal) 60%, white); opacity: 0; animation: po 3.2s ease-in-out infinite; } .intro-po span:nth-child(1) { left: 18%; top: 28%; animation-delay: .4s } .intro-po span:nth-child(2) { left: 78%; top: 22%; animation-delay: 1.1s; width: 2px } .intro-po span:nth-child(3) { left: 68%; top: 70%; animation-delay: .8s } .intro-po span:nth-child(4) { left: 28%; top: 74%; animation-delay: 1.6s; width: 2px } .intro-po span:nth-child(5) { left: 88%; top: 52%; animation-delay: 2.1s } .intro-po span:nth-child(6) { left: 10%; top: 55%; animation-delay: 1.9s; width: 4px } @keyframes po { 0%, 100% { opacity: 0; translate: 0 5px; scale: .6 } 50% { opacity: .85; translate: 0 -5px; scale: 1 } } .intro-pular { position: absolute; bottom: 30px; right: 30px; padding: 9px 16px; min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--fio-forte); border-radius: 999px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); cursor: pointer; user-select: none; transition: color var(--t-perto) var(--saida), border-color var(--t-perto) var(--saida); } .intro-pular:hover { color: var(--tinta); border-color: var(--tinta-3) } .pular-gatilho:focus-visible + .intro .intro-pular { outline: 2px solid var(--foco); outline-offset: 3px } /* pular: mata a vinheta e solta a pagina na hora */ .pular-gatilho:checked + .intro { animation: intro-sai 260ms var(--saida) both } /* no celular a vinheta e mais curta: ninguem espera 3s de pe no onibus */ @media (max-width: 640px) { .intro { animation-delay: 2150ms } } /* quem pediu menos movimento nao ve vinheta nenhuma */ @media (prefers-reduced-motion: reduce) { .intro { display: none } } } /* ===================================================================== 404 -- movido para ca em 17/09/2026 junto com a CSP estrita: um