/* =========================================================================
KiteApp — Vitrine
-------------------------------------------------------------------------
A camada de desenho da PÁGINA DE VENDA. Carregada depois de `site.css`, no
layout do site, e só ela.
POR QUE UM SEGUNDO ARQUIVO, se a regra do projeto é "um arquivo de estilo".
`site.css` atende cinco páginas com vidas diferentes: a vitrine, o cadastro,
as duas legais e o CHECKOUT — este último no caminho do dinheiro, onde uma
regressão de CSS custa uma venda. A vitrine foi redesenhada por inteiro; o
checkout não mudou uma linha. Reescrever as seções dentro do arquivo comum
colocaria as duas coisas no mesmo diff e no mesmo risco.
Separadas, a fronteira é legível e o rollback é um ``: as regras daqui
nunca alcançam o checkout, porque o layout do checkout é outro
(`site/checkout/layout.blade.php`) e não carrega este arquivo.
O QUE FICOU EM `site.css` E É USADO AQUI: reset, tipografia base, botões,
campos de formulário, cartões, modal, rodapé, e a folha inteira do cadastro.
Aqui só entra o que a vitrine redesenhou.
NOMES. Prefixo `site-` como no resto do projeto. Onde a estrutura mudou, o
componente ganhou nome novo (`site-capa`, e não `site-hero`) — a página de
campanha `/fale-conosco` continua usando o `site-hero` antigo, e redefinir a
classe por baixo dela a quebraria sem aviso.
CONTRASTE — a regra que mais restringe este arquivo, herdada de `site.css`:
- `#1FA3A6`, `#C2DFDB`, `#F7F5EF` e `#7A858B` NUNCA são cor de texto. São
superfície, filete, ícone e divisória. O teal da marca dá 2,81:1 sobre o
off-white e reprovaria em qualquer tamanho;
- a cor de ação (link, botão, foco) é `#198285`, 4,59:1 com texto branco;
- texto forte `#0F2D3D` (13,17:1), texto secundário `#41545B`;
- sobre fundo escuro, branco — e o teal claro só em corpo grande.
GEOMETRIA. O vocabulário vem da ANATOMIA DO SÍMBOLO (manual, §04): o arco da
vela sob pressão, as DUAS LINHAS em tensão diagonal que saem do ponto e
tocam as pontas da pipa, e o ponto vazado da conexão. Daí saem os planos
diagonais, as linhas convergentes e o círculo vazado usados como marcador.
O que saiu, e de propósito: o DIVISOR DE ONDA. Ele era herança do produto de
surf de onde este código veio, e onda não é o assunto de uma escola de kite —
o assunto é vento, linha e tensão. No lugar entram cortes angulares, e só
onde o contraste entre as duas faixas justifica.
TEMA. A vitrine é SEMPRE clara. Não há alternância, e é deliberado: cartão de
visita precisa sair igual em todo aparelho, inclusive no que está em modo
escuro.
MOBILE FIRST. A base é o celular; toda regra maior começa em `min-width`.
Breakpoints: 560, 768, 1024 e 1280.
========================================================================= */
/* =========================================================================
1. A FONTE — Inter, servida por nós
-------------------------------------------------------------------------
Até aqui `site.css` declarava `'Inter', system-ui, …` e NÃO servia arquivo
nenhum. O efeito prático: quem não tem Inter instalada — a esmagadora
maioria de quem abre o site — lia a página em Segoe UI ou Roboto. A marca
pede Inter (manual §09), o desenho foi calibrado com as métricas dela, e o
peso 800 dos títulos simplesmente não existe na pilha do sistema.
Isto NÃO contradiz a decisão registrada de não usar CDN: a CSP da aplicação
é `font-src 'self' data:`, e um arquivo em `public/fonts/` é `self`. O que
estava vetado era o terceiro, não a fonte.
UM arquivo, variável, subset latin: 48 KB cobrem os pesos 100–900 e todo o
português (com acentos, cedilha, aspas tipográficas e travessão). Cinco
pesos estáticos custariam o triplo.
`font-display: swap` — o texto aparece imediatamente na pilha do sistema e
troca quando a Inter chega. Numa página de venda, texto invisível por 3s é
pior do que uma troca de fonte visível.
========================================================================= */
@font-face {
font-family: 'Inter var';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/inter-var-latin.woff2') format('woff2');
/* Sem `unicode-range`: o arquivo já é o subset latin, e declarar a faixa
de novo só criaria uma chance de errá-la. */
}
:root {
/* A família ganha a variável na frente da pilha herdada. `Inter var` é o
arquivo local; `Inter` cobre quem tem a fonte instalada no sistema e
ainda não baixou a nossa. */
--fonte-titulo: 'Inter var', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--fonte-corpo: 'Inter var', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* ---- Medidas da vitrine ----
O contêiner cresceu de 1140 para 1200: a composição da capa põe o painel
do produto ao lado do texto, e a 1140 o painel ficava pequeno demais para
se ler o que está na tela — que é o ponto de mostrá-lo. */
--maxw: 1200px;
/* Respiro vertical de seção. `clamp` para não haver um salto no
breakpoint: 56px no celular, 128px no desktop grande. */
--secao-y: clamp(3.5rem, 8vw, 8rem);
/* Raio dos blocos grandes (painel, palco, cartão de destaque). Os raios
menores continuam vindo de site.css. */
--raio-xl: 22px;
/* A inclinação de TODO corte angular da página, num lugar só. Mudá-la aqui
muda a página inteira e mantém os cortes paralelos entre si — que é o
que faz a geometria parecer sistema, e não enfeite. */
--angulo: 2.6vw;
}
/* =========================================================================
2. TIPOGRAFIA DA VITRINE
-------------------------------------------------------------------------
Escala mais ambiciosa que a do resto do site: aqui o título É a peça
gráfica. Com a Inter servida, dá para usar 800 de verdade e apertar o
tracking — em fonte de sistema isso sairia diferente em cada máquina.
========================================================================= */
.site-vitrine h1,
.site-vitrine h2,
.site-vitrine h3 {
font-family: var(--fonte-titulo);
color: var(--navy);
text-wrap: balance; /* evita a última linha com uma palavra só */
}
/* Título da capa: 2,125rem no celular, 3,5rem a partir de ~1330px.
O teto não é 4,25rem, que foi a primeira tentativa: o título tem 52
caracteres e a coluna dele mede ~540px no desktop. A 68px ele quebrava em
QUATRO linhas e empurrava os botões para fora da primeira tela — um título
que não cabe na dobra não é um título grande, é um título mal medido.
`line-height: 1.05` só é legível em peso alto com tracking negativo. Os três
valores andam juntos e não se mexem separadamente. */
.site-capa__titulo {
font-size: clamp(2.125rem, 4.2vw, 3.5rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -.03em;
margin: 0 0 var(--esp-5);
}
/* Título de seção. */
.site-vitrine .site-titulo,
.site-vitrine h2.site-titulo {
font-size: clamp(1.75rem, 3.6vw, 2.75rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.022em;
margin: 0 0 var(--esp-4);
}
.site-vitrine h3 {
font-weight: 700;
letter-spacing: -.011em;
}
/* Sobrelinha. Caixa alta com tracking largo, no verde de ação (4,59:1). */
.site-vitrine .site-eyebrow {
display: block;
font-size: .75rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--acao-forte);
margin: 0 0 var(--esp-3);
}
/* Parágrafo de apoio, logo abaixo de um título. Maior que o corpo e mais
claro que o título: é a ponte entre os dois. */
.site-vitrine .site-secao__apoio,
.site-capa__apoio {
font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
line-height: 1.6;
color: var(--tinta-media);
max-width: 58ch;
margin: 0 0 var(--esp-5);
}
/* Numeral tabular onde há número comparável (preço, passo, indicador): sem
isto o "1" da Inter é mais estreito e as colunas desalinham. */
.site-vitrine .site-oferta__valor,
.site-vitrine .site-plano__valor,
.site-passo__num {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
/* =========================================================================
3. GEOMETRIA — o vocabulário gráfico
-------------------------------------------------------------------------
Três formas, e só três. Todas derivam do símbolo, nenhuma é desenho novo.
========================================================================= */
/* 3.1 PLANO ANGULAR
Uma faixa cujo topo é cortado em diagonal, subindo da esquerda para a
direita — a mesma direção das linhas de controle do símbolo.
`clip-path` em vez de SVG: acompanha qualquer altura, não pede requisição e
não deixa emenda de subpixel entre as faixas, que era o defeito clássico do
divisor em imagem (uma linha clara de 1px aparecendo em tela boa).
ONDE ELE ENTRA, e por que não em todo lugar: só nas duas transições de maior
contraste da página — a entrada da faixa escura de benefícios e a do bloco
de cadastro. Entre duas faixas claras o corte não teria o que recortar, e
repeti-lo em toda seção seria trocar um enfeite obrigatório (a onda) por
outro. Ele existe para marcar mudança de assunto, não para decorar. */
.site-corte-alto {
clip-path: polygon(0 var(--angulo), 100% 0, 100% 100%, 0 100%);
/* Sobe por baixo da seção anterior: sem isto sobra um triângulo com a cor
do no lugar que o corte abriu. O `padding-top` das duas faixas já
compensa a altura perdida (`var(--secao-y) + var(--angulo)`). */
margin-top: calc(var(--angulo) * -1);
}
/* Sem `clip-path` (navegador antigo) a faixa continua inteira e retangular —
perde o corte, não perde conteúdo. Mas o `margin-top` negativo passaria a
comer a última linha da seção de cima, e isso sim quebraria a leitura. */
@supports not (clip-path: polygon(0 0, 1px 0, 1px 1px)) {
.site-corte-alto { margin-top: 0; }
}
/* 3.1b O TRAÇO ENTRE SEÇÕES CLARAS
O mesmo desenho do filete do cartão, na escala da página: começa em teal
cheio, esvanece na direção da leitura e não toca borda nenhuma.
Ele resolve um problema que o corte angular não resolve. O corte precisa de
contraste para existir — funciona entre uma faixa clara e uma escura, e some
entre duas faixas claras, que é a maior parte desta página. Sem nada ali, as
seções claras se emendam e o olho perde onde um assunto termina.
É a alternativa certa ao divisor de onda: mesma função, um décimo do peso, e
falando a língua do símbolo em vez da língua do mar.
Mora DENTRO da seção, no topo, e não entre duas: como elemento próprio ele
precisaria de marcação a mais em cada emenda, e um `
` decorativo por
seção é exatamente o tipo de nó vazio que o projeto evita.
`.site-secao--tracejo` é opt-in. Aplicada em toda seção clara, a página
ganharia sete traços iguais e eles virariam papel de parede. */
.site-secao--tracejo::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
/* Acompanha o contêiner, com o mesmo respiro lateral: o traço nasce
alinhado com a primeira letra do título abaixo dele. */
width: min(var(--maxw), calc(100% - 2 * var(--esp-5)));
height: 2px;
/* As duas pontas em degradê, como no filete do cartão: o traço nasce, ganha
peso no primeiro terço e some. Um começo em teal cheio seria um corte
reto no meio da página — chama mais atenção do que o divisor merece. */
background: linear-gradient(90deg,
transparent 0%,
var(--teal) 16%,
var(--teal-claro) 58%,
transparent 100%);
opacity: .9;
}
/* 3.2 LINHAS EM TENSÃO
As duas linhas de controle do símbolo, em par e convergindo para um ponto
fora do quadro. Grafismo puro: `aria-hidden` na marcação, `pointer-events:
none` aqui, para nunca roubar um clique do que está por baixo. */
.site-linhas {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.site-linhas svg {
position: absolute;
display: block;
width: 100%;
height: 100%;
}
.site-linhas path,
.site-linhas line {
fill: none;
stroke: currentColor;
vector-effect: non-scaling-stroke;
}
/* 3.3 PONTO VAZADO
O círculo que substitui o pingo do "i" na marca vira o marcador da lista.
É a peça mais reconhecível do símbolo na escala pequena.
TAMANHO: 0,625rem (10px), e não os 1,375rem (22px) da primeira versão.
A 22px o marcador tinha a altura de duas linhas de texto e o traço de 2,5px
pesava mais que o título do item ao lado — a lista lia como uma sequência de
alvos, não como texto. Um marcador existe para dizer onde a linha começa; se
ele disputa atenção com o conteúdo, está grande.
A referência é o próprio símbolo: lá o círculo é pequeno em relação à pipa, e
é a pipa que se lê primeiro. Aqui vale a mesma proporção — o texto é a pipa.
`margin-top` alinha o ponto com a PRIMEIRA LINHA do texto, e não com o topo
da caixa: em item de duas linhas ele subiria acima da letra. */
.site-ponto {
display: inline-block;
flex: 0 0 auto;
inline-size: .625rem;
block-size: .625rem;
margin-top: .42em;
border: 2px solid var(--teal);
border-radius: 50%;
background: transparent;
}
/* =========================================================================
4. ESTRUTURA DE SEÇÃO
========================================================================= */
.site-vitrine .site-container {
max-width: var(--maxw);
}
.site-vitrine .site-secao {
position: relative;
padding-block: var(--secao-y);
}
.site-secao--branca { background: var(--superficie); }
.site-secao--neutra { background: var(--pagina); }
/* A faixa escura. Fundo de marca, texto branco, e o teal claro reservado ao
apoio em corpo grande — em corpo pequeno ele perde contra o navy. */
.site-secao--escura {
background: var(--navy);
color: #fff;
}
.site-secao--escura .site-titulo,
.site-secao--escura h2,
.site-secao--escura h3 { color: #fff; }
.site-secao--escura .site-eyebrow { color: var(--teal-claro); }
.site-secao--escura .site-secao__apoio,
.site-secao--escura p { color: rgba(255, 255, 255, .82); }
/* Cabeçalho de seção centrado, com largura de leitura limitada. */
.site-cab {
max-width: 46rem;
margin: 0 0 var(--esp-7);
}
.site-cab--centro {
margin-inline: auto;
text-align: center;
}
.site-cab--centro .site-secao__apoio { margin-inline: auto; }
/* =========================================================================
5. CABEÇALHO
-------------------------------------------------------------------------
Estrutura e comportamento continuam os de `site.css` (barra fixa, menu de
celular em ``, `.is-rolado` ligada por script). O que muda aqui é
só o acabamento: vidro em vez de branco chapado, e um filete no lugar da
sombra enquanto a página está no topo.
========================================================================= */
.site-header {
background: rgba(247, 245, 239, .82);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid transparent;
transition: background 200ms ease-out, border-color 200ms ease-out;
}
.site-header.is-rolado {
background: rgba(255, 255, 255, .9);
border-bottom-color: var(--linha);
}
/* Sem `backdrop-filter` (Firefox antigo, navegador de dentro de aplicativo) a
barra vira opaca: translúcida sem desfoque deixa o texto do menu ilegível
por cima do conteúdo que passa. */
@supports not (backdrop-filter: blur(1px)) {
.site-header,
.site-header.is-rolado { background: var(--pagina); }
}
.site-header__inner { max-width: var(--maxw); }
.site-nav__link {
font-weight: 500;
color: var(--tinta-media);
transition: color 150ms ease-out;
}
.site-nav__link:hover,
.site-nav__link:focus-visible { color: var(--navy); }
/* AS DUAS PORTAS, LADO A LADO EM VEZ DE EMPILHADAS.
Empilhados, "Portal do aluno" e "Entrar como escola" formavam um bloco de
duas linhas em corpo 13 encostado no botão — pesado, desalinhado do resto da
barra e ainda por cima com sublinhado no hover, que fazia a segunda linha
pular. Deitados e separados por um filete, ocupam a mesma largura de antes e
leem como o que são: duas entradas de mesmo peso, diferentes do CTA.
A exceção ao alvo de 44px continua valendo e continua documentada em
`site.css`: este bloco só existe a partir de 1024px, onde quem aponta é um
mouse. No celular as duas portas aparecem no painel do menu, com área de
toque inteira. */
@media (min-width: 1024px) {
.site-acessos {
flex-direction: row;
align-items: center;
gap: var(--esp-4);
/* Respiro antes do botão. Sem ele "Entrar como escola" encosta no
"Começar agora" e os dois leem como uma coisa só — justamente os dois
que precisam ser distinguidos, porque um é entrada de quem já é
cliente e o outro é a ação primária da página. */
margin-right: var(--esp-2);
}
.site-acessos__link {
position: relative;
font-size: .875rem;
font-weight: 600;
color: var(--tinta-media);
}
/* O FILETE É UM PSEUDO-ELEMENTO, e não `border-left`.
Como borda, ele acompanhava a altura do link inteiro — que é um
`inline-flex` com `padding-block` — e saía com 26px de altura, do topo
da caixa até abaixo do texto. Lido de longe, aquilo não era um separador:
era a borda esquerda de um campo de formulário, e o "Entrar como escola"
parecia estar dentro de uma caixa de texto.
Como pseudo-elemento, a altura é escolhida (14px) e centrada na linha do
texto, que é onde um separador tem de estar. */
/* O `border-top` que vem de `site.css` era o separador do arranjo
EMPILHADO: com um link em cima do outro, a divisória natural é
horizontal. Deitados, ela vira um risco atravessando o topo do segundo
link — que foi exatamente o que apareceu na tela, lido como sublinhado
torto. Zerado aqui junto com o recuo que o acompanhava. */
.site-acessos__link + .site-acessos__link {
border-top: 0;
padding-top: 0;
margin-top: 0;
padding-left: var(--esp-4);
}
.site-acessos__link + .site-acessos__link::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 14px;
background: var(--linha-forte);
}
.site-acessos__link:hover,
.site-acessos__link:focus-visible {
color: var(--navy);
text-decoration: none;
}
}
/* ENTRE 1024 E 1199 A BARRA NÃO FECHA A CONTA.
Ali cabem, na mesma linha: a marca, cinco itens de menu, duas portas de
acesso e o botão. Deitar as duas portas (que antes eram empilhadas) somou
~90px de largura, e o "Começar agora" — a ação primária da página — passou a
ser CORTADO pela borda direita da janela. Não havia barra de rolagem para
denunciar: o corte era silencioso, e só aparece em quem abre o site num
laptop de 1024 ou num tablet deitado.
Nesta faixa as duas portas voltam a empilhar. É o arranjo que `site.css` já
traz por padrão, com o filete horizontal dele — por isso o pseudo-elemento
vertical some aqui, senão apareceriam os dois separadores ao mesmo tempo. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
.site-acessos {
flex-direction: column;
align-items: flex-start;
gap: 2px;
margin-right: 0;
}
.site-acessos__link {
font-size: .8125rem;
line-height: 1.25;
}
.site-acessos__link + .site-acessos__link {
padding-left: 0;
padding-top: var(--esp-1);
margin-top: 1px;
border-top: 1px solid var(--linha);
}
.site-acessos__link + .site-acessos__link::before { content: none; }
}
/* =========================================================================
6. CAPA (a primeira tela)
-------------------------------------------------------------------------
Duas colunas no desktop: o argumento à esquerda, o PRODUTO à direita.
A composição da direita é a decisão que mais muda esta página em relação à
anterior. Antes havia ali uma ilustração da pipa — honesta, mas muda: ela
não diz o que o software faz. Agora há uma captura real do painel com a
agenda da semana e, sobreposta, a mesma operação no celular do aluno. As
duas telas juntas contam a frase que o texto ao lado promete, e são as telas
que a pessoa vai encontrar quando entrar.
A fotografia entra ATRÁS, dentro de um plano angular escuro, e nunca sozinha:
ela diz de que mundo o produto é. Não está legendada como aula, escola ou
aluno do KiteApp, porque não é — e afirmar isso seria o mesmo tipo de
invenção que um depoimento falso.
========================================================================= */
.site-capa {
position: relative;
overflow: hidden;
background: var(--pagina);
padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 7vw, 6rem);
}
.site-capa__grid {
display: grid;
gap: clamp(2.5rem, 5vw, 4rem);
align-items: center;
}
.site-capa__texto {
position: relative;
z-index: 2;
max-width: 40rem;
}
.site-capa__acoes {
display: flex;
flex-wrap: wrap;
gap: var(--esp-3);
margin-bottom: var(--esp-5);
}
/* As provas curtas. Ponto vazado + rótulo; o ponto é o do símbolo, na escala
menor em que ele ainda se reconhece (manual §07: 16px é o mínimo). */
.site-capa__provas {
display: flex;
flex-wrap: wrap;
gap: var(--esp-3) var(--esp-5);
margin: 0;
padding: 0;
list-style: none;
}
.site-capa__provas li {
display: flex;
align-items: center;
gap: var(--esp-2);
font-size: .9375rem;
font-weight: 500;
color: var(--tinta-media);
}
/* Numa linha só, o ponto centra pelo flex e não precisa do recuo de topo que
alinha com a primeira linha nos itens de texto corrido. */
.site-capa__provas .site-ponto {
inline-size: .5rem;
block-size: .5rem;
margin-top: 0;
}
/* ---- O palco: onde o produto aparece ---- */
.site-capa__palco {
position: relative;
z-index: 1;
/* A proporção segura a altura antes de a imagem carregar; sem ela a página
salta quando o painel chega, e o salto acontece exatamente na primeira
tela (é o que o Lighthouse mede como CLS). */
aspect-ratio: 4 / 3.4;
border-radius: var(--raio-xl);
overflow: hidden;
background: var(--navy);
}
/* A fotografia, dentro do palco. `object-position` puxa o enquadramento para a
direita, onde está a pipa: no recorte estreito do celular o lado esquerdo é
só céu. */
.site-capa__foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 72% 40%;
}
/* Véu sobre a foto. Dois papéis: dar contraste para a interface branca que
entra por cima, e puxar a fotografia para a cor da marca — sem isso a
composição tem dois azuis diferentes brigando. */
.site-capa__veu {
position: absolute;
inset: 0;
background:
linear-gradient(200deg, rgba(15, 45, 61, .18) 0%, rgba(15, 45, 61, .72) 62%, rgba(15, 45, 61, .92) 100%);
}
/* O painel do produto. Sai pela borda direita do palco de propósito — a tela é
maior que o quadro, e é assim que se lê "tem mais aqui dentro".
A MARGEM DE CIMA É O QUE FAZ A FOTO EXISTIR. Com o painel encostado no topo,
a fotografia virava uma tira de dois centímetros no canto e a composição
perdia a única coisa que dizia "kitesurf". Um quinto da altura livre no topo
deixa o kite e o céu aparecerem, e é ali que o olho entra na imagem. */
.site-capa__painel {
position: absolute;
left: 12%;
top: 22%;
width: 96%;
max-width: none;
height: auto;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, .18);
box-shadow: 0 24px 60px rgba(6, 22, 31, .5);
}
/* O celular, no canto inferior esquerdo, encostando no painel sem cobrir a
agenda. É o portal do aluno na largura real em que ele é usado — e é o que
prova, sem uma frase, que o aluno tem para onde ir. */
.site-capa__fone {
position: absolute;
left: 1%;
bottom: 6%;
width: 27%;
height: auto;
border-radius: 16px;
border: 3px solid rgba(255, 255, 255, .92);
box-shadow: 0 18px 44px rgba(6, 22, 31, .55);
background: #fff;
}
/* Legenda da composição. Obrigatória: a tela mostra dados semeados, e quem lê
uma vitrine assume que o número é de cliente até que se diga o contrário. */
.site-capa__legenda {
margin: var(--esp-3) 0 0;
font-size: .75rem;
color: var(--tinta-media);
}
/* ---- As linhas de tensão do fundo ---- */
.site-capa .site-linhas {
color: var(--teal);
opacity: .16;
}
@media (min-width: 1024px) {
.site-capa__grid {
/* A coluna do texto é a maior: ela carrega o título, e um título que
quebra em quatro linhas custa mais do que trinta pixels de painel. */
grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
gap: clamp(2rem, 3.5vw, 3rem);
}
.site-capa__palco { aspect-ratio: 4 / 3.5; }
}
/* Abaixo de 1024 o palco vira uma faixa larga e baixa: empilhado, uma caixa
quase quadrada empurraria o resto da página para fora da primeira tela. */
@media (max-width: 1023.98px) {
.site-capa__palco { aspect-ratio: 16 / 10; }
.site-capa__painel { left: 14%; top: 20%; width: 92%; }
.site-capa__fone { width: 23%; left: 2%; bottom: 7%; }
}
@media (max-width: 559.98px) {
.site-capa__palco { aspect-ratio: 4 / 3.2; }
.site-capa__painel { left: 12%; top: 18%; width: 100%; }
/* O celular sai no telefone: sobrepor uma foto de telefone a um telefone de
verdade, em 360px, produz duas interfaces do tamanho de um selo e
nenhuma legível. O portal aparece por inteiro na seção do aluno. */
.site-capa__fone { display: none; }
}
/* =========================================================================
6b. A CAIXA — um modelo só para a vitrine inteira
-------------------------------------------------------------------------
Até aqui a página tinha TRÊS caixas brancas diferentes, herdadas de momentos
diferentes do projeto:
`.site-dor` (problemas) branca, raio 16, sem sombra, com filete
`.site-card` (pagamentos) branca, raio 14, com sombra, sem filete
`.site-cartao` (planos) idem — é o mesmo componente com outro nome
`.site-destaque` (pagamentos) teal claro, raio 16, sem sombra, sem filete
Duas delas eram quase iguais e erravam por dois pixels de raio; a terceira
trocava o fundo. Lado a lado na mesma rolagem, isso não lê como hierarquia —
lê como três pessoas tendo desenhado a mesma coisa em semanas diferentes.
Agora é UM modelo, e as variações são declaradas:
padrão branco, raio `--raio-lg`, borda `--linha`, filete no topo
--calmo o mesmo, com fundo teal claro (ênfase, não outro componente)
--realce o mesmo, com a borda em teal
O `.site-dor` deixou de ter regra própria: ele É a caixa padrão, e o nome
sobrevive só porque a seção de problemas o usa na marcação.
O QUE NÃO ENTRA AQUI: `.site-pergunta` (sanfona — tem estado aberto/fechado),
`.site-plano` (cartão de preço, com selo e ação), `.site-oferta` (bloco de
números) e `.site-criar__caixa` (a moldura do formulário). São componentes
com anatomia própria, não caixas de conteúdo — forçá-los no mesmo molde
apagaria a diferença entre ler e escolher.
========================================================================= */
.site-vitrine .site-dor,
.site-vitrine .site-card,
.site-vitrine .site-cartao,
.site-vitrine .site-destaque {
position: relative;
padding: var(--esp-5);
background: var(--superficie);
border: 1px solid var(--linha);
border-radius: var(--raio-lg);
/* Sem sombra. A `--sombra-sm` que `.site-card` trazia é invisível sobre o
off-white da página e só aparece sobre o branco — ou seja, aparecia em
metade das seções e sumia na outra metade. Uma borda de 1px separa
melhor, e separa igual em qualquer fundo. */
box-shadow: none;
}
/* O FILETE SUPERIOR — o único enfeite da caixa.
A primeira versão o esticava de borda a borda (`inset-inline: -1px`) com o
canto arredondado do cartão. Não funcionava: um traço de 3px encostado na
quina precisa acompanhar a curva do raio, e como ele é reto sobrava um degrau
de um pixel em cada canto — a caixa parecia com a borda quebrada bem no
ponto em que o olho entra nela.
Agora ele COMEÇA RECUADO e termina esvanecendo, sem tocar quina nenhuma. O
recuo resolve o degrau e faz o traço ler como o que ele é no vocabulário da
marca: uma linha sob tensão entrando no bloco, não uma moldura.
O mesmo desenho volta em `.site-secao--tracejo`, entre seções: uma forma só,
em duas escalas. */
.site-vitrine .site-dor::before,
.site-vitrine .site-card::before,
.site-vitrine .site-cartao::before,
.site-vitrine .site-destaque::before {
content: "";
position: absolute;
left: var(--esp-5);
right: var(--esp-5);
top: 0;
height: 3px;
border-radius: 0 0 3px 3px;
/* DEGRADÊ NAS DUAS PONTAS. Com o traço nascendo em teal cheio, o começo era
um corte reto no meio do nada — o mesmo defeito da quina, três
centímetros mais para dentro. Saindo de transparente, ele nasce e morre,
e o peso fica no meio, onde o olho pousa. */
background: linear-gradient(90deg,
transparent 0%,
var(--teal) 22%,
var(--teal-claro) 68%,
transparent 100%);
}
/* ÊNFASE POR FUNDO — a única variação de cor da caixa, e ela é declarada.
`.site-destaque` e o modificador `--calmo` trocam o branco pelo teal claro.
Nada mais muda: mesmo raio, mesma borda, mesmo respiro interno, mesma
ausência de sombra. É isso que faz as duas lerem como a MESMA peça em dois
pesos, e não como dois componentes — que era o defeito de antes, quando cada
uma tinha também raio e sombra próprios.
Onde ela entra na vitrine: as duas caixas de canal de venda em "Pagamentos"
("Venda com a escola fechada" e "Continue vendendo pelo WhatsApp") e o bloco
"Como o KiteApp ganha dinheiro?" na seção de preço. Nos três casos o
conteúdo é uma nota ao lado do argumento principal, e não mais um item da
mesma lista — a cor marca esse degrau. */
.site-vitrine .site-destaque,
.site-vitrine .site-card--calmo,
.site-vitrine .site-cartao--calmo {
background: var(--turquesa-fundo);
border-color: #CFE5E3;
}
/* Sobre o teal claro o filete não tem o que separar: teal sobre teal some, e o
que sobra é um degradê fantasma na borda de cima. Mesma decisão da faixa
escura — o filete existe onde há contraste para ele existir. */
.site-vitrine .site-destaque::before,
.site-vitrine .site-card--calmo::before,
.site-vitrine .site-cartao--calmo::before { content: none; }
/* ---- Os blocos que NÃO são caixa de conteúdo, alinhados no que dá ----
`.site-oferta` (os três números do preço), `.site-precos__abas` (o seletor de
modelo de cobrança) e `.site-tela` (a moldura das capturas) têm anatomia
própria e continuam com ela. O que se alinha aqui é o acabamento: mesmo raio
e SEM SOMBRA, como as caixas de conteúdo.
A sombra era o que mais destoava. Ela vinha de `--sombra`, com 24px de
difusão, e punha os três blocos flutuando meio centímetro acima de vizinhos
que estavam apoiados na página — na mesma rolagem, isso lê como se metade
dos elementos fosse de outro sistema de desenho. */
.site-vitrine .site-oferta,
.site-vitrine .site-precos__abas {
box-shadow: none;
}
.site-vitrine .site-tela {
border-radius: var(--raio-lg);
/* A captura mantém sombra — e é a única exceção deliberada. Ela não é uma
caixa da página: é uma janela para outra tela, e a sombra é o que diz
isso. Mas suavizada, para ficar no mesmo tom das demais. */
box-shadow: 0 1px 2px rgba(15, 45, 61, .05), 0 16px 36px rgba(15, 45, 61, .1);
}
.site-vitrine .site-card--realce,
.site-vitrine .site-cartao--realce {
border-color: var(--teal);
box-shadow: none;
}
/* NA FAIXA ESCURA a caixa se inverte: superfície translúcida sobre o navy, sem
filete — em cima de fundo escuro o degradê teal vira uma mancha, e a borda
clara já cumpre o papel de delimitar. */
.site-vitrine .site-secao--escura .site-card,
.site-vitrine .site-secao--escura .site-cartao,
.site-vitrine .site-faixa .site-card,
.site-vitrine .site-faixa .site-cartao {
background: rgba(255, 255, 255, .07);
border-color: rgba(255, 255, 255, .16);
}
.site-vitrine .site-secao--escura .site-card::before,
.site-vitrine .site-secao--escura .site-cartao::before,
.site-vitrine .site-faixa .site-card::before,
.site-vitrine .site-faixa .site-cartao::before { content: none; }
/* =========================================================================
7. DORES — "não cabe mais no WhatsApp"
-------------------------------------------------------------------------
Três dores em cartão, e três em linha. A hierarquia é o argumento: as três
primeiras são as que fazem a pessoa procurar solução; as outras confirmam.
A lista anterior tinha nove itens no mesmo peso, e nove problemas de peso
igual não pesam.
A caixa em si vem do modelo acima — aqui só ficam o arranjo da grade e o
corpo do texto.
========================================================================= */
.site-dores {
display: grid;
gap: var(--esp-4);
grid-template-columns: 1fr;
}
.site-dor h3 {
font-size: 1.0625rem;
margin: 0 0 var(--esp-2);
}
.site-dor p {
margin: 0;
font-size: .9375rem;
line-height: 1.55;
color: var(--tinta-media);
}
.site-dor__ic { margin-bottom: var(--esp-4); }
/* As secundárias: sem cartão, sem ícone, só o ponto vazado. */
.site-dores-menores {
display: grid;
gap: var(--esp-4);
margin: var(--esp-6) 0 0;
padding: var(--esp-6) 0 0;
border-top: 1px solid var(--linha);
list-style: none;
}
.site-dores-menores li {
display: flex;
gap: var(--esp-3);
font-size: .9375rem;
line-height: 1.55;
color: var(--tinta-media);
}
.site-dores-menores strong {
display: block;
color: var(--navy);
font-weight: 600;
}
@media (min-width: 768px) {
.site-dores { grid-template-columns: repeat(3, 1fr); }
.site-dores-menores { grid-template-columns: repeat(3, 1fr); gap: var(--esp-5); }
}
/* =========================================================================
8. OS CINCO PASSOS
-------------------------------------------------------------------------
Nada aqui: a linha do tempo (`.site-timeline`) é a de `site.css` e continua
inteira — selo com ícone, número em contador, cinco colunas no desktop e uma
coluna com selo à esquerda no celular. É um componente bem resolvido.
O que mudou, mudou LÁ, na fonte, e não por sobreposição aqui: a linha que
liga os passos era desenhada com uma máscara ondulada (`--onda-linha-h/v`) e
passou a ser uma linha reta de 2px em degradê teal. A máscara, os tokens e os
dois `@supports` que a degradavam saíram do arquivo — corrigir na origem
custou o mesmo que sobrescrever e não deixa duas verdades sobre o mesmo
traço.
========================================================================= */
/* =========================================================================
9. ABAS DA PLATAFORMA — escola · aluno · instrutor
-------------------------------------------------------------------------
Três públicos, três telas. As abas são `` + `:checked ~`,
sem uma linha de JavaScript — a mesma técnica que a seção de preço já usava.
O motivo é o mesmo: a página carrega zero script obrigatório, e um seletor
que só funciona com JS é um seletor que às vezes não funciona.
Semanticamente é um `