fechado com
display:none, e transição nenhuma roda a partir daí. Aqui o painel
continua no fluxo e a altura anima de verdade.
O bloco também carrega schema FAQPage, que é o que faz a pergunta
aparecer aberta direto no resultado do Google. */
.faq {
border-top: 1px solid var(--border);
}
.faq__item {
border-bottom: 1px solid var(--border);
}
.faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
padding: 24px 4px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.02rem;
line-height: 1.35;
text-align: left;
color: var(--text);
background: none;
border: none;
cursor: pointer;
transition: color 0.3s var(--ease-in-out-quad), padding-left 0.4s var(--ease-out-expo);
}
.faq__q:hover,
.faq__item.is-open .faq__q {
color: var(--accent);
padding-left: 12px;
}
.faq__sign {
position: relative;
flex: none;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid var(--border);
transition: border-color 0.3s var(--ease-in-out-quad), transform 0.5s var(--ease-out-expo);
}
.faq__item.is-open .faq__sign {
border-color: var(--accent);
transform: rotate(135deg);
}
/* o + vira x girando: duas barras e nada de trocar caractere */
.faq__sign::before,
.faq__sign::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 1.5px;
background: currentColor;
transform: translate(-50%, -50%);
}
.faq__sign::after {
transform: translate(-50%, -50%) rotate(90deg);
}
/* o estado fechado é escopado em .js, igual ao resto do site: se o JS
falhar, as respostas ficam todas abertas em vez de inacessíveis */
.faq__a {
overflow: hidden;
transition: height 0.45s var(--ease-out-expo);
}
.js .faq__a {
height: 0;
}
.faq__a p {
margin: 0 0 22px;
padding-right: 46px;
max-width: 70ch;
}
.faq__a p:first-child {
margin-top: 0;
}
@media (max-width: 640px) {
.faq__a p {
padding-right: 0;
}
}
/* ── Cartão de destaque ──────────────────────────────────────────────
Usado pra pousar uma foto ao lado de um bloco de texto nas páginas
internas, sem repetir a estrutura do .split toda vez. */
.feature-photo {
position: relative;
border-radius: var(--radius-card);
overflow: hidden;
border: 1px solid var(--border);
min-height: 300px;
}
.feature-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease-out-expo);
}
.feature-photo:hover img {
transform: scale(1.05);
}
.feature-photo__over {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 8px;
padding: 34px 30px;
background: linear-gradient(180deg, rgba(13, 13, 13, 0.35) 0%, rgba(13, 13, 13, 0.92) 100%);
}
.feature-photo__over h3 {
margin: 0;
font-size: 1.35rem;
}
.feature-photo__over p {
margin: 0;
max-width: 44ch;
}
@media (prefers-reduced-motion: reduce) {
.faq__a {
transition: none;
}
}
/* ── Ajustes finos ───────────────────────────────────────────────── */
/* A conversa rola de verdade dentro do aparelho. A barra fica escondida
porque em telefone de verdade também não aparece uma. */
.demo__feed {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.demo__feed::-webkit-scrollbar {
display: none;
}
/* o card vizinho é mais alto que a vaga; sem isso o convite fica
grudado no topo de uma caixa tracejada quase vazia */
.client-slot {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Número que não conta (valor pequeno) ainda merece entrar animado,
senão os três cards da fileira reagem de formas diferentes. */
.metric__value {
transition: transform 0.6s var(--ease-spring);
}
.reveal.is-visible .metric__value {
transform: none;
}
.js .reveal .metric__value {
transform: translateY(8px);
}
/* Coluna de texto longa (a sanfona de perguntas) ao lado de uma foto:
a foto gruda e acompanha a leitura em vez de ficar boiando centralizada
ao lado de um bloco três vezes mais alto. */
.split--sticky {
align-items: start;
}
.split--sticky .feature-photo {
position: sticky;
top: 108px;
min-height: 460px;
}
@media (max-width: 860px) {
.split--sticky .feature-photo {
position: static;
min-height: 260px;
}
}
/* legenda da faixa que abre: sobre foto ela precisa de mais contraste
que o cinza padrão de parágrafo */
.zoom-band__copy p {
color: rgba(255, 255, 255, 0.82);
}
/* ── Faixas de ferramentas e de nichos ───────────────────────────────
Substituíram a faixa de logos de cliente, que com um cliente só ficava
repetitiva. Em cima o que a gente opera, embaixo pra quem já entregou.
As duas correm em sentidos opostos: parado, o par lê como um sistema. */
.tool-chip,
.niche-chip {
display: inline-flex;
align-items: center;
gap: 9px;
flex: none;
margin: 0 8px;
padding: 11px 22px;
border-radius: 999px;
font-size: 0.95rem;
font-weight: 600;
white-space: nowrap;
transition: color 0.3s var(--ease-in-out-quad), border-color 0.3s var(--ease-in-out-quad),
background 0.3s var(--ease-in-out-quad);
}
/* ferramenta: neutra, com um ponto laranja de marcador */
.tool-chip {
color: var(--text-secondary);
background: rgba(255, 255, 255, 0.035);
border: 1px solid var(--border);
}
.tool-chip::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
opacity: 0.75;
}
.tool-chip:hover {
color: var(--text);
border-color: rgba(240, 112, 19, 0.45);
}
/* nicho: laranja, pra separar as duas faixas de relance */
.niche-chip {
color: var(--accent);
background: rgba(240, 112, 19, 0.07);
border: 1px solid rgba(240, 112, 19, 0.28);
}
.niche-chip:hover {
color: var(--text);
background: rgba(240, 112, 19, 0.16);
border-color: rgba(240, 112, 19, 0.55);
}
@media (max-width: 600px) {
.tool-chip,
.niche-chip {
font-size: 0.85rem;
padding: 9px 17px;
margin: 0 5px;
}
}
/* ═══════════════════════════════════════════════════════════════════════
ABERTURA EM EXPLOSÃO
Vale só pra quem ENTRA no site (chegou de fora ou abriu direto). Navegar
entre páginas mantém a cortina de sempre: ver a mesma explosão a cada
clique no menu cansa em três cliques e atrasa a leitura.
Quem decide qual das duas roda é o js/main.js, pela classe no .intro.
═══════════════════════════════════════════════════════════════════════ */
/* o véu é o que esconde o site; o desfoque de fundo é o que faz a
revelação parecer fumaça se dissipando em vez de um corte seco */
.js .intro--burst {
background: transparent;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: backdrop-filter 0.9s var(--ease-out-quad),
-webkit-backdrop-filter 0.9s var(--ease-out-quad);
}
.intro--burst .intro__veil {
position: absolute;
inset: 0;
background: var(--bg);
transition: opacity 0.78s var(--ease-out-quad);
}
.intro--burst .intro__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* a explosão começa: o véu sai, o desfoque abre e o logo se desfaz junto */
.intro--burst.is-blown {
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
}
.intro--burst.is-blown .intro__veil {
opacity: 0;
}
.intro--burst .intro__logo {
z-index: 1;
animation: burst-logo 0.62s var(--ease-out-expo) forwards;
}
@keyframes burst-logo {
0% { opacity: 0; transform: scale(0.7); }
55% { opacity: 1; transform: scale(1); }
100% { opacity: 1; transform: scale(1); }
}
/* no estouro o logo é engolido pela própria explosão */
.intro--burst.is-blown .intro__logo {
animation: burst-logo-out 0.5s var(--ease-out-quad) forwards;
}
@keyframes burst-logo-out {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(1.9); }
}
/* a página entra junto com a fumaça saindo, em vez de já estar parada
atrás dela: dá a sensação de que o site surgiu da explosão */
@media (prefers-reduced-motion: no-preference) {
body.intro-burst-running {
overflow: hidden;
}
body.intro-burst-running > header,
body.intro-burst-running > section,
body.intro-burst-running > footer,
body.intro-burst-running > main,
body.intro-burst-running > .brand-band {
animation: burst-page-in 1.1s var(--ease-out-expo) 0.42s both;
}
}
@keyframes burst-page-in {
from { transform: scale(1.035); }
to { transform: none; }
}
/* Menos movimento: nada de explosão, nada de cortina. */
@media (prefers-reduced-motion: reduce) {
.intro--burst {
display: none !important;
}
}
/* ── Faixa halftone ──────────────────────────────────────────────────
Fundo em WebGL portado do componente React "halftone-flow": um fluxo
de fluido desenhado como retícula de pontos. Só o shader veio; o
invólucro do original (iframe, Tailwind CDN, GSAP) ficou de fora.
O canvas é montado pelo JS dentro de [data-halftone]. Sem WebGL a
faixa cai no gradiente do fundo e continua legível. */
.halftone {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 340px;
padding: 72px 24px;
overflow: hidden;
isolation: isolate;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
/* aparece antes do canvas montar e é o fallback quando não há WebGL */
background: radial-gradient(120% 120% at 50% 50%, #2a1408 0%, var(--bg) 72%);
}
.halftone__canvas {
position: absolute;
inset: 0;
z-index: -2;
display: block;
}
/* véu: o halftone é vibrante demais pra ter texto branco direto em cima */
.halftone::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(
68% 120% at 50% 50%,
rgba(13, 13, 13, 0.92) 0%,
rgba(13, 13, 13, 0.78) 45%,
rgba(13, 13, 13, 0.52) 100%
);
pointer-events: none;
}
.halftone__inner {
position: relative;
max-width: 860px;
text-align: center;
}
/* é um por semântica (a seção não precisa de mais um título na
hierarquia), então precisa recuperar a cor: parágrafo aqui é cinza */
.halftone__name {
display: block;
color: var(--text);
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(1.7rem, 4.2vw, 2.9rem);
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 16px;
}
.halftone__name em {
font-style: normal;
color: var(--accent);
}
.halftone__sub {
margin: 0 auto;
max-width: 46ch;
color: rgba(255, 255, 255, 0.78);
}
.halftone .btn {
margin-top: 28px;
}
@media (max-width: 720px) {
.halftone {
min-height: 300px;
padding: 56px 20px;
}
}