/* =========================================================================
SurfApp - Site publico (landing, contratacao e paginas legais)
-------------------------------------------------------------------------
CSS escrito a mao, sem framework e sem build: o projeto nao depende de Node.
Nenhum @import, nenhuma webfont baixada, nenhum recurso de terceiro - a CSP
da aplicacao e `default-src 'self'` e derrubaria qualquer um deles.
A paleta tem origem em `config/surfapp.php` (bloco `brand.palette`), que e a
fonte unica das cores da marca. As derivadas listadas abaixo existem so para
dar hierarquia de interface e NAO sao cores de marca: nao use nenhuma delas
em e-mail, grafico ou material impresso.
Contraste, a regra que mais restringe este arquivo:
- #4AA5A6, #C2DFDB, #ECE8DF e #A5A4A4 nunca sao cor de TEXTO. Servem para
superficie, filete, icone e divisoria. O turquesa da marca fica em 2.9:1
sobre branco e reprovaria em qualquer tamanho.
- a cor de acao (link, botao, foco) e #1A828E, que da 4.54:1 sobre branco.
- texto forte #0A2638, texto secundario #5A6E78.
- sobre fundo escuro, branco (ou o menta apenas em corpo grande).
Tema: a pagina publica e SEMPRE clara. Nao existe alternancia de tema aqui,
e de proposito - a landing e cartao de visita e precisa sair igual em todo
aparelho, inclusive quando o sistema do visitante esta em modo escuro.
Mobile first: a base e a versao de celular e toda regra maior comeca em
min-width. Breakpoints: 480, 768, 1024 e 1280.
Nomes de classe: prefixo `site-` em tudo. Onde o componente aceita as duas
grafias (`.site-card` e `.site-cartao`, por exemplo), as duas estao na mesma
regra - a marcacao Blade pode usar qualquer uma sem quebrar o visual.
========================================================================= */
:root {
/* ---- Marca (config/surfapp.php: brand.palette) ---- */
--navy: #0A2638;
--teal-deep: #1A828E; /* cor de acao: unica da marca aprovada para texto */
--teal: #4AA5A6; /* superficie, icone, filete - nunca texto */
--mint: #C2DFDB; /* painel de apoio, divisoria - nunca texto */
--sand: #ECE8DF; /* fundo de pagina - nunca fundo de cartao */
--gray: #A5A4A4; /* desabilitado, apoio grafico - nunca texto */
/* ---- Derivadas de interface (nao sao cores de marca) ---- */
--turquesa-fundo: #E7F2F1;
--turquesa-escuro: #2F7F86;
--pagina: #F6F3EC;
--linha: #E3DED3;
--linha-forte: #D5CFC3;
--superficie: #FFFFFF;
--tinta: #16303F;
/* Texto secundario. Escurecido de #5A6E78 para #4E606A depois de medir a
pagina renderizada: sobre o branco do cartao o valor antigo passava, mas
sobre as faixas tingidas pelo gradiente turquesa do hero ele caia para
3.82:1 e reprovava AA. Este passa em todas as superficies claras do site
(5.9:1 sobre --pagina, 4.9:1 no ponto mais tingido do hero). */
--tinta-media: #4E606A;
--tinta-fraca: #8B9AA2; /* apoio grafico e divisoria; nao usar em texto */
--sucesso: #2E8B6A;
--alerta: #C08A3E;
--erro: #C0503F;
/* Pares fundo/texto dos estados. O texto de cada par ja vem escurecido o
bastante para passar em AA sobre o proprio fundo. */
--sucesso-fundo: #DFF0E8;
--sucesso-texto: #1F6B4E;
--alerta-fundo: #FBF0DC;
--alerta-texto: #8A5F14;
--erro-fundo: #F9E6E3;
--erro-texto: #9C2B2B;
--info-fundo: #E7F2F1;
--info-texto: #1F5F66;
/* Acao. `--acao-forte` e o mesmo turquesa profundo escurecido: #1A828E
cumpre AA sobre branco (4.54:1), mas cai para 4.1:1 sobre a areia e o
turquesa-fundo. Onde o texto pequeno assenta em faixa tingida - olho de
secao, link dentro de painel claro, hover - entra a versao forte, que
fica acima de 6:1 em todos esses fundos. */
--acao: #1A828E;
--acao-forte: #14646E;
/* ---- Forma ---- */
/* A ONDA COMO LINHA.
A página separa seções com uma curva (`.site-onda`); estes dois tokens
levam a mesma curva para as linhas finas — a trilha de etapas do
cadastro, a que liga os cinco passos de "Do cadastro à primeira venda" e
todo ``. Antes cada um desses lugares desenhava um risco reto, que é
a única forma que a marca não usa em lugar nenhum.
São MÁSCARAS, e não imagens de fundo: assim quem pinta continua sendo o
token de cor de cada lugar (`--linha`, `--linha-forte`), e a paleta segue
com uma definição só. O `%23fff` é o traço da máscara, não uma cor da
página — em máscara o que importa é opaco contra transparente.
Um PERÍODO INTEIRO em cada bloco (32px de comprimento por 8px de faixa):
as tangentes das duas pontas coincidem e a repetição emenda sem bico. Com
meio período, cada emenda viraria um "V". A proporção é larga e rasa como
a do divisor de seção; um período curto vira zigue-zague e lê como
tracejado, não como água. */
--onda-linha-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8' preserveAspectRatio='none'%3E%3Cpath d='M0,4 Q8,1.4 16,4 T32,4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
--onda-linha-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 32' preserveAspectRatio='none'%3E%3Cpath d='M4,0 Q1.4,8 4,16 T4,32' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
--raio-sm: 9px;
--raio: 14px;
--raio-lg: 16px;
--raio-pill: 999px;
/* ---- Sombra: sempre a tinta da marca, nunca preto puro ---- */
--sombra-sm: 0 1px 2px rgba(10, 38, 56, .06);
--sombra: 0 1px 2px rgba(10, 38, 56, .05), 0 8px 24px rgba(10, 38, 56, .08);
--sombra-lg: 0 12px 40px rgba(10, 38, 56, .14);
--sombra-foco: 0 0 0 3px rgba(26, 130, 142, .16);
/* ---- Espacamento (4/8/12/16/24/32/48/64/96) ---- */
--esp-1: 4px;
--esp-2: 8px;
--esp-3: 12px;
--esp-4: 16px;
--esp-5: 24px;
--esp-6: 32px;
--esp-7: 48px;
--esp-8: 64px;
--esp-9: 96px;
/* ---- Tipografia. Sem @font-face: se Montserrat e Open Sans nao estiverem
instaladas, a pilha do sistema assume e nada e baixado. ---- */
--fonte-titulo: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--fonte-corpo: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* ---- Medidas ---- */
--maxw: 1140px;
--altura-header: 62px;
--toque: 44px;
}
@media (min-width: 1024px) {
:root {
--altura-header: 74px;
}
}
/* =========================================================================
Reset e base
========================================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* O cabecalho e fixo: sem esta folga a ancora joga o titulo da secao para
debaixo dele. */
scroll-padding-top: calc(var(--altura-header) + var(--esp-4));
}
body {
margin: 0;
/* O cabecalho fixo sai do fluxo; a folga aqui evita que o hero comece
escondido atras dele. */
padding-top: var(--altura-header);
background: var(--pagina);
color: var(--tinta);
font-family: var(--fonte-corpo);
font-size: 1rem;
line-height: 1.6;
/* Nenhum filho pode empurrar a pagina para os lados no celular. */
overflow-x: hidden;
}
img,
svg,
video,
canvas {
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--esp-3);
font-family: var(--fonte-titulo);
color: var(--navy);
line-height: 1.2;
font-weight: 700;
/* Palavra longa em tela de 320px quebra em vez de estourar a largura. */
overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 6.4vw, 3.5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 4.2vw, 2rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.375rem); }
h4 { font-size: 1.0625rem; }
p {
margin: 0 0 var(--esp-4);
}
p:last-child {
margin-bottom: 0;
}
a {
color: var(--acao);
text-decoration: none;
}
a:hover {
color: var(--acao-forte);
text-decoration: underline;
}
ul, ol {
margin: 0 0 var(--esp-4);
padding-left: 1.25rem;
}
strong, b {
font-weight: 700;
color: var(--navy);
}
/* O separador do corpo de texto também ondula. É a mesma curva do divisor de
seção, na espessura de uma linha: onde a página respira, ela respira com a
forma da marca.
O `` continua sendo `` — separador é significado, não desenho, e
quem usa leitor de tela ouve a mudança de assunto do mesmo jeito. O que
muda é só a pintura: a borda dá lugar a uma faixa de 8px recortada pela
máscara, e `--linha` continua sendo quem escolhe a cor. */
hr {
border: 0;
height: 8px;
margin: var(--esp-6) 0;
background: var(--linha-forte);
-webkit-mask-image: var(--onda-linha-h);
mask-image: var(--onda-linha-h);
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: 32px 8px;
mask-size: 32px 8px;
-webkit-mask-position: left center;
mask-position: left center;
}
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
hr {
height: 0;
border-top: 1px solid var(--linha);
background: none;
}
}
button {
font-family: inherit;
}
/* Foco visivel unico em toda a pagina. Fica de fora do bloco de transicoes de
proposito: indicacao de foco nunca deve depender de animacao. */
:focus-visible {
outline: 3px solid #1A828E;
outline-offset: 2px;
border-radius: var(--raio-sm);
}
/* Navegadores que ainda nao entendem :focus-visible nao podem ficar sem foco. */
:focus:not(:focus-visible) {
outline: none;
}
::selection {
background: var(--mint);
color: var(--navy);
}
/* =========================================================================
Utilitarios
========================================================================= */
.site-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Atalho para o conteudo: so aparece quando recebe foco pelo teclado. */
.site-skip {
position: absolute;
left: var(--esp-4);
top: -100px;
z-index: 100;
background: var(--navy);
color: #fff;
padding: var(--esp-3) var(--esp-4);
border-radius: var(--raio-sm);
font-weight: 700;
}
.site-skip:focus {
top: var(--esp-3);
color: #fff;
text-decoration: none;
}
.site-apoio { color: var(--tinta-media); }
.site-centro { text-align: center; }
.site-nowrap { white-space: nowrap; }
.site-meta { font-size: .875rem; color: var(--tinta-media); }
/* =========================================================================
Estrutura: container, secao, olho de secao e titulo com filete
========================================================================= */
.site-container {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--esp-4);
}
@media (min-width: 768px) {
.site-container { padding-inline: var(--esp-5); }
}
@media (min-width: 1024px) {
.site-container { padding-inline: var(--esp-6); }
}
.site-secao,
.site-section {
padding-block: var(--esp-7);
}
@media (min-width: 768px) {
.site-secao,
.site-section { padding-block: var(--esp-8); }
}
@media (min-width: 1280px) {
.site-secao,
.site-section { padding-block: var(--esp-9); }
}
/* Faixas alternadas. O branco e o fundo de leitura; a areia separa blocos sem
introduzir uma linha dura. */
.site-secao--clara { background: var(--superficie); }
.site-secao--areia { background: var(--pagina); }
.site-secao--menta { background: var(--turquesa-fundo); }
.site-secao--escura {
background: linear-gradient(160deg, #0A2638 0%, #14435A 100%);
color: rgba(255, 255, 255, .86);
}
.site-secao--escura h2,
.site-secao--escura h3,
.site-secao--escura strong {
color: #fff;
}
/* Sobre fundo escuro o texto e sempre branco. O menta da marca fica reservado
ao grafismo: como cor de texto ele nao esta liberado em nenhum tamanho. */
.site-secao--escura a {
color: #fff;
text-decoration: underline;
}
.site-secao--escura .site-apoio,
.site-secao--escura .site-meta {
color: rgba(255, 255, 255, .78);
}
/* Cabecalho da secao */
.site-secao__cabecalho {
max-width: 62ch;
margin-bottom: var(--esp-6);
}
.site-secao__cabecalho--centro {
margin-inline: auto;
text-align: center;
}
.site-secao__cabecalho--centro .site-titulo::after {
margin-inline: auto;
}
.site-secao__apoio {
margin: var(--esp-3) 0 0;
color: var(--tinta-media);
font-size: 1.0625rem;
}
.site-secao--escura .site-secao__apoio {
color: rgba(255, 255, 255, .8);
}
/* Olho (eyebrow): 12px, caixa alta, entressacada. Usa a acao forte porque
texto pequeno em faixa tingida nao alcanca AA com #1A828E. */
.site-eyebrow {
display: block;
margin: 0 0 var(--esp-2);
font-family: var(--fonte-titulo);
font-size: .75rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--acao-forte);
}
.site-secao--escura .site-eyebrow {
color: rgba(255, 255, 255, .84);
}
/* Titulo de secao com filete. O filete usa o turquesa da marca - e elemento
grafico, nao texto, entao a restricao de contraste nao se aplica. */
.site-titulo,
.site-title {
margin: 0;
}
.site-titulo::after,
.site-title::after {
content: '';
display: block;
width: 56px;
height: 4px;
margin-top: var(--esp-4);
border-radius: var(--raio-pill);
background: linear-gradient(90deg, var(--teal) 0%, var(--acao) 100%);
}
.site-secao--escura .site-titulo::after,
.site-secao--escura .site-title::after {
background: linear-gradient(90deg, var(--mint) 0%, var(--teal) 100%);
}
/* =========================================================================
Cabecalho fixo e navegacao
========================================================================= */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
/* Translucido com desfoque: o conteudo passa por baixo sem sumir e o texto
do cabecalho continua legivel. */
background: rgba(255, 255, 255, .86);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid rgba(10, 38, 56, .08);
}
/* Sem desfoque o fundo precisa ser opaco, senao o texto se mistura ao da
pagina rolando por tras. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header { background: var(--superficie); }
}
.site-header.is-rolado {
box-shadow: var(--sombra-sm);
}
.site-header__inner {
max-width: var(--maxw);
margin-inline: auto;
min-height: var(--altura-header);
padding: var(--esp-2) var(--esp-4);
display: flex;
align-items: center;
gap: var(--esp-3);
}
@media (min-width: 768px) {
.site-header__inner { padding-inline: var(--esp-5); gap: var(--esp-4); }
}
@media (min-width: 1024px) {
.site-header__inner { padding-inline: var(--esp-6); }
}
.site-header__marca {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
min-width: 0;
min-height: var(--toque);
}
.site-header__marca:hover {
text-decoration: none;
}
/* Altura fixa e largura livre: a logomarca nunca estica nem e cortada. */
.site-logo {
height: 34px;
width: auto;
max-width: 190px;
object-fit: contain;
display: block;
}
@media (min-width: 1024px) {
.site-logo { height: 40px; max-width: 230px; }
}
.site-header__acoes {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--esp-2);
flex: 0 0 auto;
}
/* Navegacao horizontal: existe a partir de 1024px. Abaixo disso quem manda e
o menu de celular. */
.site-nav {
display: none;
}
.site-nav__lista {
display: flex;
align-items: center;
gap: var(--esp-1);
list-style: none;
margin: 0;
padding: 0;
}
.site-nav__link {
display: inline-flex;
align-items: center;
min-height: var(--toque);
padding: var(--esp-2) var(--esp-3);
border-radius: var(--raio-pill);
color: var(--tinta);
font-size: .9375rem;
font-weight: 600;
white-space: nowrap;
transition: background-color .15s ease, color .15s ease;
}
.site-nav__link:hover,
.site-nav__link:focus-visible {
background: var(--turquesa-fundo);
color: var(--acao-forte);
text-decoration: none;
}
.site-nav__link.is-ativo {
color: var(--acao-forte);
background: var(--turquesa-fundo);
}
@media (min-width: 1024px) {
.site-nav {
display: flex;
margin-left: auto;
}
.site-header__acoes { margin-left: var(--esp-4); }
}
/* =========================================================================
As duas portas de entrada, no cabecalho de desktop
-------------------------------------------------------------------------
Portal do aluno e painel da escola sao dois produtos, com senhas e telas
diferentes. Ate aqui o cabecalho tinha um "Entrar" so, que levava ao painel,
e o Portal existia apenas numa linha do rodape: quem errava a porta era
sempre o aluno, que e quem mais entra.
POR QUE LINKS DE TEXTO EMPILHADOS, E NAO DOIS BOTOES LADO A LADO. A barra
tem `--maxw` de 1140px e a navegacao ja come metade dela. Medido na pagina
renderizada: marca (152) + menu (567) + botao (145) ja somam 864, e o par de
portas escrito EM LINHA ocupa 268 — o conjunto passava de 1230 e o "Começar
agora" saia da barra. Em COLUNA o mesmo par ocupa a largura do rotulo mais
longo (~125px) e as duas linhas cabem folgadas na altura do cabecalho (74px
a partir de 1024). Sobra e coluna; falta e largura.
Encurtar os rotulos resolveria a conta e destruiria o motivo: "Entrar" e
"Portal" sozinhos sao exatamente a ambiguidade que fez o aluno bater na porta
da escola. Os dois nomes ficam por extenso e visiveis sem abrir nada.
O botao cheio continua sendo um so na barra. Tres acoes do mesmo peso lado a
lado nao vendem mais, vendem menos.
========================================================================= */
.site-acessos {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
}
/* Sem `--toque` aqui, e e a unica excecao a essa regra no arquivo: dois alvos
de 44px empilhados dao 88px e nao cabem nos 74px do cabecalho. Vale porque
este bloco so existe a partir de 1024px, onde quem aponta e um mouse; no
celular as mesmas duas portas aparecem no painel do menu, com area de toque
inteira (`.site-acesso`). */
.site-acessos__link {
display: inline-flex;
align-items: center;
padding-block: 3px;
color: var(--tinta);
font-family: var(--fonte-titulo);
font-size: .8125rem;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
transition: color .15s ease;
}
.site-acessos__link:hover,
.site-acessos__link:focus-visible {
color: var(--acao-forte);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Filete separando as duas portas, desenhado no proprio link: um
separador na marcacao seria um no sem conteudo, lido por leitor de tela como
um item a mais da lista de links. `--linha-forte` porque e divisoria, nao
texto. */
.site-acessos__link + .site-acessos__link {
border-top: 1px solid var(--linha);
padding-top: var(--esp-1);
margin-top: 1px;
}
/* Entre 1024 e 1279 a barra e o lugar mais apertado do site: nav completa,
duas portas e o botao dentro de uma largura que ainda nao chegou aos 1140px.
Os itens do menu e a propria barra cedem respiro lateral — e o que sobra sem
tirar palavra nenhuma da tela. A partir de 1280 tudo volta ao normal. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
.site-header__inner { padding-inline: var(--esp-4); }
.site-nav__link {
padding-inline: var(--esp-2);
font-size: .875rem;
}
.site-header__acoes { margin-left: var(--esp-3); }
}
/* =========================================================================
Menu de celular
-------------------------------------------------------------------------
Feito com /: abre e fecha sem uma linha de JavaScript,
ja e anunciado pelo leitor de tela e continua funcionando se algum script
da pagina falhar. Se a marcacao preferir o botao com aria-expanded, a
classe `.is-aberto` no painel produz o mesmo resultado.
========================================================================= */
.site-menu {
position: relative;
flex: 0 0 auto;
}
.site-menu__botao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--esp-2);
min-width: var(--toque);
min-height: var(--toque);
padding: var(--esp-2) var(--esp-3);
border: 1px solid var(--linha-forte);
border-radius: var(--raio-sm);
background: var(--superficie);
color: var(--navy);
font-family: var(--fonte-titulo);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
cursor: pointer;
list-style: none;
}
/* O triangulo padrao do nao cabe no desenho do cabecalho. */
.site-menu__botao::-webkit-details-marker { display: none; }
.site-menu__botao::marker { content: ''; }
/* Tres tracos desenhados em CSS - um icone a menos para carregar. */
.site-menu__icone {
position: relative;
width: 18px;
height: 2px;
border-radius: var(--raio-pill);
background: var(--navy);
flex: 0 0 auto;
}
.site-menu__icone::before,
.site-menu__icone::after {
content: '';
position: absolute;
left: 0;
width: 18px;
height: 2px;
border-radius: var(--raio-pill);
background: var(--navy);
}
.site-menu__icone::before { top: -6px; }
.site-menu__icone::after { top: 6px; }
.site-menu[open] .site-menu__icone { background: transparent; }
.site-menu[open] .site-menu__icone::before { top: 0; transform: rotate(45deg); }
.site-menu[open] .site-menu__icone::after { top: 0; transform: rotate(-45deg); }
.site-menu__painel {
position: absolute;
right: 0;
top: calc(100% + var(--esp-3));
z-index: 60;
/* Largura travada na viewport: em 320px o painel nao pode furar a lateral. */
width: max-content;
min-width: 232px;
max-width: calc(100vw - var(--esp-6));
padding: var(--esp-3);
background: var(--superficie);
border: 1px solid var(--linha);
border-radius: var(--raio);
box-shadow: var(--sombra-lg);
}
.site-menu__painel .site-nav__lista,
.site-menu__lista {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--esp-1);
list-style: none;
margin: 0;
padding: 0;
}
.site-menu__painel .site-nav__link {
justify-content: flex-start;
border-radius: var(--raio-sm);
}
.site-menu__painel .site-btn {
width: 100%;
margin-top: var(--esp-2);
}
/* Alternativa por JavaScript minimo: painel escondido ate ganhar `.is-aberto`. */
.site-menu__painel[hidden] { display: none; }
.site-menu__painel.is-aberto { display: block; }
/* ---- As duas portas dentro do painel de celular ----
No celular ha espaco vertical de sobra, e por isso aqui cada porta ganha o
que nao cabe no cabecalho de desktop: um icone e uma linha dizendo o que ha
do outro lado. "Portal do aluno" e "Entrar como escola" sao rotulos claros,
mas quem nunca entrou nao sabe qual dos dois e o seu — e a tentativa de
login na porta errada e um erro que so aparece depois da senha digitada.
O rotulo do grupo ("Já usa o SurfApp?") separa quem VOLTA de quem esta
chegando: abaixo dele estao as duas entradas, e o "Começar agora" continua
como o unico botao cheio do painel. */
.site-menu__rotulo {
margin: var(--esp-4) 0 var(--esp-2);
padding-top: var(--esp-3);
border-top: 1px solid var(--linha);
font-family: var(--fonte-titulo);
font-size: .6875rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tinta-media);
}
.site-acesso {
display: flex;
align-items: flex-start;
gap: var(--esp-3);
min-height: var(--toque);
padding: var(--esp-2) var(--esp-3);
border-radius: var(--raio-sm);
color: var(--tinta);
transition: background-color .15s ease;
}
.site-acesso:hover,
.site-acesso:focus-visible {
background: var(--turquesa-fundo);
text-decoration: none;
}
.site-acesso__corpo {
display: block;
min-width: 0;
}
.site-acesso__titulo {
display: block;
font-family: var(--fonte-titulo);
font-size: .9375rem;
font-weight: 700;
color: var(--navy);
}
/* A linha de apoio e informacao, nao decoracao: `--tinta-media` passa em AA
sobre o branco do painel e sobre o turquesa claro do hover. */
.site-acesso__apoio {
display: block;
font-size: .8125rem;
line-height: 1.35;
color: var(--tinta-media);
}
@media (min-width: 1024px) {
.site-menu { display: none; }
}
/* =========================================================================
Botoes
-------------------------------------------------------------------------
Uma acao primaria por secao. As demais entram como secundaria ou fantasma,
para o olho nao ter duas ofertas do mesmo peso na mesma tela.
========================================================================= */
.site-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--esp-2);
min-height: var(--toque);
padding: var(--esp-3) var(--esp-5);
border: 1.5px solid transparent;
border-radius: var(--raio-pill);
font-family: var(--fonte-titulo);
font-size: .9375rem;
font-weight: 700;
line-height: 1.25;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.site-btn:hover {
text-decoration: none;
}
.site-btn:disabled,
.site-btn.is-desabilitado {
/* O cinza da marca so entra como apoio grafico: a borda e o rotulo
continuam legiveis, o que muda e a saturacao. */
background: #EFEDE8;
border-color: var(--gray);
color: var(--tinta-media);
cursor: not-allowed;
box-shadow: none;
}
/* BOTAO OCUPADO: o envio saiu e a resposta ainda nao voltou.
Existe porque o cadastro da landing passou a enviar por `fetch`: sem recarga
de pagina, o unico sinal de que algo esta acontecendo e o proprio botao. O
`disabled` acima ja tira a cor e barra o segundo clique; o que faltava era
dizer que o pedido esta EM CURSO, e nao que o botao morreu.
Disco em `::before`, e nao um na marcacao: o script troca o
`textContent` do botao para "Criando sua escola…" e apagaria qualquer filho
escrito no HTML — a marca giratoria sumiria exatamente no estado em que ela
existe para aparecer.
`currentColor` com o topo transparente: o disco herda a cor do rotulo, entao
funciona igual no botao primario (texto branco) e no fantasma (texto navy),
sem uma variante de cor por tipo de botao. */
.site-btn.is-ocupado::before {
content: '';
flex: 0 0 auto;
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: site-girar .7s linear infinite;
}
@keyframes site-girar {
to { transform: rotate(360deg); }
}
/* Quem pediu menos movimento fica com o disco parado — que continua sendo um
sinal visivel de "espere", so que sem rotacao. Sumir com ele deixaria essa
pessoa sem nenhuma marca de espera alem do rotulo. */
@media (prefers-reduced-motion: reduce) {
.site-btn.is-ocupado::before { animation: none; }
}
.site-btn--primario {
background: var(--acao);
color: #fff;
box-shadow: 0 6px 18px rgba(10, 38, 56, .12);
}
.site-btn--primario:hover:not(:disabled) {
background: var(--acao-forte);
color: #fff;
}
.site-btn--secundario {
background: var(--navy);
color: #fff;
}
.site-btn--secundario:hover:not(:disabled) {
background: #14435A;
color: #fff;
}
.site-btn--fantasma {
background: transparent;
border-color: var(--linha-forte);
color: var(--navy);
}
.site-btn--fantasma:hover:not(:disabled) {
background: var(--turquesa-fundo);
border-color: var(--teal);
color: var(--acao-forte);
}
/* Sobre a faixa escura o fantasma inverte, senao some no fundo. */
.site-secao--escura .site-btn--fantasma,
.site-btn--fantasma-claro {
border-color: rgba(255, 255, 255, .5);
color: #fff;
}
.site-secao--escura .site-btn--fantasma:hover:not(:disabled),
.site-btn--fantasma-claro:hover:not(:disabled) {
background: rgba(255, 255, 255, .12);
border-color: #fff;
color: #fff;
}
.site-btn--pequeno {
min-height: var(--toque);
padding: var(--esp-2) var(--esp-4);
font-size: .875rem;
}
.site-btn--grande {
min-height: 52px;
padding: var(--esp-4) var(--esp-6);
font-size: 1.0625rem;
}
.site-btn--bloco {
display: flex;
width: 100%;
}
.site-btn-grupo {
display: flex;
flex-wrap: wrap;
gap: var(--esp-3);
}
/* Em 320px dois botoes lado a lado ficam apertados; empilha e ocupa a largura. */
@media (max-width: 479px) {
.site-btn-grupo { flex-direction: column; align-items: stretch; }
.site-btn-grupo > .site-btn { width: 100%; }
}
/* =========================================================================
Hero
========================================================================= */
.site-hero {
position: relative;
overflow: hidden;
padding-block: var(--esp-7) var(--esp-8);
/* O pico do turquesa foi de .26 para .18 pelo mesmo motivo do
--tinta-media: o tingimento escurecia o fundo justamente sob o texto de
apoio do hero. O movimento continua visivel; o que saiu foi a parte que
so atrapalhava a leitura. */
background:
radial-gradient(760px 420px at 88% -12%, rgba(74, 165, 166, .18) 0%, rgba(74, 165, 166, 0) 62%),
radial-gradient(620px 380px at -10% 110%, rgba(194, 223, 219, .30) 0%, rgba(194, 223, 219, 0) 66%),
linear-gradient(180deg, #FFFFFF 0%, var(--pagina) 100%);
}
@media (min-width: 1024px) {
.site-hero { padding-block: var(--esp-8) var(--esp-9); }
}
.site-hero__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--esp-6);
align-items: center;
}
@media (min-width: 1024px) {
.site-hero__inner {
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: var(--esp-7);
}
}
.site-hero__conteudo {
min-width: 0;
}
.site-hero__titulo {
margin: 0 0 var(--esp-4);
/* 48-56px no desktop, 32px no celular: cabe em 320px sem estourar. */
font-size: clamp(2rem, 6.4vw, 3.5rem);
letter-spacing: -.02em;
line-height: 1.08;
color: var(--navy);
}
.site-hero__apoio {
margin: 0 0 var(--esp-6);
max-width: 54ch;
font-size: 1.0625rem;
color: var(--tinta-media);
}
@media (min-width: 768px) {
.site-hero__apoio { font-size: 1.125rem; }
}
.site-hero__acoes {
display: flex;
flex-wrap: wrap;
gap: var(--esp-3);
}
@media (max-width: 479px) {
.site-hero__acoes { flex-direction: column; align-items: stretch; }
.site-hero__acoes > .site-btn { width: 100%; }
}
/* A ALTERNATIVA COMERCIAL, logo abaixo dos dois botoes do hero.
Quem cobra por fora (maquininha propria, Pix da escola) le "seus alunos pagam
pelo SurfApp" na primeira tela e conclui que a plataforma nao serve para ela.
Esta linha e o que segura essa saida — e por isso ela precisa estar aqui em
cima, e nao so na secao de preco.
Tamanho e cor de apoio, e o link em `--acao-forte`: e uma saida lateral, nao
uma terceira oferta. Um botao aqui competiria com o "Começar agora" que esta
dois centimetros acima, e a acao primaria do hero e uma so. */
.site-hero__alternativa {
margin: var(--esp-4) 0 0;
max-width: 52ch;
font-size: .875rem;
line-height: 1.5;
color: var(--tinta-media);
}
.site-hero__alternativa a {
color: var(--acao-forte);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
}
.site-hero__nota {
margin: var(--esp-4) 0 0;
font-size: .875rem;
color: var(--tinta-media);
}
/* Composicao visual: onda de gradiente com o simbolo da marca ao centro.
Nada de captura de tela inventada - so a paleta e a marca real. */
.site-hero__arte {
position: relative;
display: grid;
place-items: center;
min-width: 0;
aspect-ratio: 4 / 3;
border-radius: var(--raio-lg);
background:
radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 55%),
linear-gradient(150deg, var(--mint) 0%, var(--teal) 58%, var(--turquesa-escuro) 100%);
box-shadow: var(--sombra-lg);
overflow: hidden;
}
.site-hero__arte::after {
/* Arco de espuma: da movimento sem competir com o texto. */
content: '';
position: absolute;
left: -18%;
bottom: -46%;
width: 136%;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(255, 255, 255, .22);
pointer-events: none;
}
.site-hero__arte img {
position: relative;
z-index: 1;
width: 58%;
max-width: 240px;
height: auto;
object-fit: contain;
}
/* Selos de confianca abaixo do hero. */
.site-hero__selos {
display: flex;
flex-wrap: wrap;
gap: var(--esp-3) var(--esp-5);
margin-top: var(--esp-6);
padding: 0;
list-style: none;
font-size: .875rem;
color: var(--tinta-media);
}
.site-hero__selos li {
display: flex;
align-items: center;
gap: var(--esp-2);
min-width: 0;
}
.site-hero__selos li::before {
content: '';
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
}
/* =========================================================================
Grades e cartoes
========================================================================= */
.site-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--esp-4);
}
/* `min-width: 0` em todo filho de grade e de flex: sem isso um texto longo ou
uma tabela dentro da celula empurra a coluna e a pagina ganha rolagem
horizontal - justamente o que nao pode acontecer em 320px. */
.site-grid > *,
.site-hero__inner > *,
.site-planos > *,
.site-passos > *,
.site-form__grid > *,
.site-footer__inner > * {
min-width: 0;
}
@media (min-width: 480px) {
.site-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.site-grid { gap: var(--esp-5); }
.site-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.site-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.site-card,
.site-cartao {
display: flex;
flex-direction: column;
gap: var(--esp-2);
height: 100%;
padding: var(--esp-5);
/* Cartao e sempre branco: a areia e fundo de pagina e some sobre si mesma. */
background: var(--superficie);
border: 1px solid var(--linha);
border-radius: var(--raio);
box-shadow: var(--sombra-sm);
}
.site-card--realce,
.site-cartao--realce {
border-color: var(--teal);
box-shadow: var(--sombra);
}
.site-card--calmo,
.site-cartao--calmo {
background: var(--turquesa-fundo);
border-color: #CFE5E3;
box-shadow: none;
}
.site-secao--escura .site-card,
.site-secao--escura .site-cartao {
background: rgba(255, 255, 255, .07);
border-color: rgba(255, 255, 255, .16);
box-shadow: none;
color: rgba(255, 255, 255, .86);
}
/* Icone do cartao: placa de cor com um glifo ou SVG dentro. */
.site-card__icone,
.site-cartao__icone {
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-bottom: var(--esp-2);
border-radius: var(--raio-sm);
background: var(--turquesa-fundo);
color: var(--acao-forte);
font-size: 1.25rem;
line-height: 1;
flex: 0 0 auto;
}
.site-secao--escura .site-card__icone,
.site-secao--escura .site-cartao__icone {
background: rgba(255, 255, 255, .12);
color: #fff;
}
.site-card__titulo,
.site-cartao__titulo {
margin: 0;
font-size: 1.0625rem;
font-weight: 700;
color: var(--navy);
}
.site-secao--escura .site-card__titulo,
.site-secao--escura .site-cartao__titulo {
color: #fff;
}
.site-card__texto,
.site-cartao__texto {
margin: 0;
color: var(--tinta-media);
font-size: .9375rem;
}
.site-secao--escura .site-card__texto,
.site-secao--escura .site-cartao__texto {
color: rgba(255, 255, 255, .8);
}
.site-card__rodape,
.site-cartao__rodape {
margin-top: auto;
padding-top: var(--esp-4);
}
/* =========================================================================
Lista de itens com marcador turquesa
-------------------------------------------------------------------------
O marcador e um disco menta com um tique desenhado em SVG embutido (data:
URI, permitido pela CSP). Nao ha texto na cor turquesa em nenhum ponto.
========================================================================= */
.site-lista,
.site-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--esp-2);
}
.site-lista > li,
.site-list > li {
position: relative;
min-width: 0;
padding-left: 30px;
color: var(--tinta-media);
font-size: .9375rem;
}
.site-lista > li::before,
.site-list > li::before {
content: '';
position: absolute;
left: 0;
top: .28em;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--turquesa-fundo);
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%231A828E' d='M6.2 12.4 1.9 8.1l1.5-1.5 2.8 2.8 6.4-6.4L14.1 4.5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.site-lista--menta > li::before,
.site-list--menta > li::before {
background-color: var(--mint);
}
.site-secao--escura .site-lista > li,
.site-secao--escura .site-list > li {
color: rgba(255, 255, 255, .84);
}
.site-secao--escura .site-lista > li::before,
.site-secao--escura .site-list > li::before {
background-color: rgba(255, 255, 255, .16);
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23C2DFDB' d='M6.2 12.4 1.9 8.1l1.5-1.5 2.8 2.8 6.4-6.4L14.1 4.5z'/%3E%3C/svg%3E");
}
/* Variante em duas colunas para listas longas de beneficios. */
@media (min-width: 768px) {
.site-lista--duas,
.site-list--duas {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--esp-2) var(--esp-5);
}
}
/* =========================================================================
Planos
-------------------------------------------------------------------------
`auto-fit` com `minmax(min(100%, 280px), 1fr)`: a vitrine se acomoda a
qualquer quantidade de planos publicos vinda do banco, de um a cinco, sem
media query nova e sem estourar a largura em 320px.
========================================================================= */
.site-planos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: var(--esp-4);
align-items: stretch;
}
@media (min-width: 768px) {
.site-planos { gap: var(--esp-5); }
}
.site-plano,
.site-plan {
position: relative;
display: flex;
flex-direction: column;
padding: var(--esp-6) var(--esp-5) var(--esp-5);
background: var(--superficie);
border: 1px solid var(--linha);
border-radius: var(--raio-lg);
box-shadow: var(--sombra-sm);
}
/* Plano em destaque: borda na cor de acao e leve elevacao. O selo escrito
"Mais escolhido" acompanha - a distincao nunca fica so na cor. */
.site-plano--destaque,
.site-plan--destaque {
border: 2px solid var(--acao);
box-shadow: var(--sombra);
}
@media (min-width: 1024px) {
.site-plano--destaque,
.site-plan--destaque {
transform: translateY(-12px);
}
}
.site-plano__badge {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
padding: var(--esp-1) var(--esp-3);
border-radius: var(--raio-pill);
background: var(--acao);
color: #fff;
font-family: var(--fonte-titulo);
font-size: .6875rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1.6;
}
.site-plano__nome {
margin: 0;
font-size: 1.375rem;
color: var(--navy);
}
.site-plano__headline {
margin: var(--esp-2) 0 0;
color: var(--tinta-media);
font-size: .9375rem;
min-height: 2.8em;
}
.site-plano__preco {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--esp-1);
margin: var(--esp-5) 0 var(--esp-1);
}
.site-plano__valor {
font-family: var(--fonte-titulo);
font-size: clamp(1.75rem, 5vw, 2.25rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -.02em;
color: var(--navy);
overflow-wrap: anywhere;
}
.site-plano__ciclo {
font-size: .875rem;
font-weight: 600;
color: var(--tinta-media);
}
.site-plano__nota {
margin: 0 0 var(--esp-5);
font-size: .8125rem;
color: var(--tinta-media);
}
.site-plano__beneficios {
margin: 0 0 var(--esp-5);
}
/* Limites do plano em pares rotulo/valor. */
.site-plano__limites {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--esp-3);
margin: 0 0 var(--esp-5);
padding: var(--esp-4);
background: var(--pagina);
border-radius: var(--raio-sm);
}
.site-plano__limites > div { min-width: 0; }
.site-plano__limites dt {
font-size: .75rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--tinta-media);
}
.site-plano__limites dd {
margin: 0;
font-size: .9375rem;
font-weight: 700;
color: var(--navy);
overflow-wrap: anywhere;
}
.site-plano__acao {
margin-top: auto;
}
/* =========================================================================
Planos — alinhamento das faixas entre os três cartões
-------------------------------------------------------------------------
Antes: cada cartão era um flex independente, então descrição e lista de
benefícios de tamanhos diferentes empurravam preço, limites e botão para
alturas distintas — a "escada" que se via na vitrine. Só o botão alinhava,
pelo `margin-top:auto` acima.
Agora a fileira é uma grade de 7 linhas e cada cartão adota essas mesmas
linhas com `subgrid`: ícone, nome, headline, preço, descrição, benefícios,
limites e ação passam a começar na mesma altura nos três, sem nenhuma
altura fixa e sem cortar conteúdo — cada linha cresce até caber o maior.
Fica atrás de `@supports`: onde não houver subgrid, o comportamento é
exatamente o de antes (flex com o botão no rodapé), que já era aceitável.
Só vale no desktop: empilhados, os cartões não têm com quem alinhar.
========================================================================= */
@supports (grid-template-rows: subgrid) {
@media (min-width: 768px) {
.site-planos {
/* ícone · nome · headline · preço · nota · benefícios · limites · ação */
grid-template-rows: repeat(7, auto) 1fr;
align-items: stretch;
}
.site-plano,
.site-plan {
display: grid;
grid-row: span 8;
grid-template-rows: subgrid;
/* O `gap` da grade substitui as margens que o fluxo dava entre os
blocos; sem isto os elementos encostariam nas bordas da linha. */
gap: var(--esp-3);
}
/* Dentro da grade, margem de bloco vira espaço duplicado. */
.site-plano > *,
.site-plan > * {
margin-block: 0;
}
/* A ação ocupa a última linha, que é a única elástica (1fr): o botão
encosta na base mesmo quando o cartão vizinho é mais alto. */
.site-plano__acao {
align-self: end;
margin-top: 0;
}
}
}
.site-plano__acao .site-btn {
width: 100%;
}
/* Vitrine sem nenhum plano publico: estado vazio explicito, nunca uma area em
branco que parece pagina quebrada. */
.site-vazio {
grid-column: 1 / -1;
padding: var(--esp-7) var(--esp-5);
text-align: center;
border: 1px dashed var(--linha-forte);
border-radius: var(--raio);
background: var(--superficie);
color: var(--tinta-media);
}
.site-vazio__titulo {
margin: 0 0 var(--esp-2);
font-weight: 700;
color: var(--navy);
}
/* =========================================================================
Passos numerados
========================================================================= */
.site-passos,
.site-steps {
counter-reset: site-passo;
list-style: none;
display: grid;
grid-template-columns: 1fr;
gap: var(--esp-4);
margin: 0;
padding: 0;
}
@media (min-width: 768px) {
.site-passos,
.site-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5); }
}
@media (min-width: 1024px) {
.site-passos--tres,
.site-steps--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.site-passo,
.site-step {
counter-increment: site-passo;
position: relative;
min-width: 0;
padding: var(--esp-5) var(--esp-5) var(--esp-5) 74px;
background: var(--superficie);
border: 1px solid var(--linha);
border-radius: var(--raio);
box-shadow: var(--sombra-sm);
}
.site-passo::before,
.site-step::before {
content: counter(site-passo, decimal-leading-zero);
position: absolute;
left: var(--esp-5);
top: var(--esp-5);
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--navy);
color: #fff;
font-family: var(--fonte-titulo);
font-size: .9375rem;
font-weight: 700;
line-height: 1;
}
/* Se a marcacao trouxer o numero escrito, o contador sai de cena para o passo
nao aparecer numerado duas vezes. */
.site-passo:has(.site-passo__numero)::before,
.site-step:has(.site-passo__numero)::before {
content: none;
}
.site-passo__numero {
position: absolute;
left: var(--esp-5);
top: var(--esp-5);
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--navy);
color: #fff;
font-family: var(--fonte-titulo);
font-size: .9375rem;
font-weight: 700;
line-height: 1;
}
.site-passo__titulo {
margin: 0 0 var(--esp-2);
font-size: 1.0625rem;
color: var(--navy);
}
.site-passo__texto {
margin: 0;
color: var(--tinta-media);
font-size: .9375rem;
}
/* =========================================================================
Perguntas frequentes
-------------------------------------------------------------------------
/ nativos: abre, fecha e e anunciado sem JavaScript.
========================================================================= */
.site-faq {
display: grid;
gap: var(--esp-3);
max-width: 820px;
}
.site-faq__item {
background: var(--superficie);
border: 1px solid var(--linha);
border-radius: var(--raio);
overflow: hidden;
}
.site-faq__item[open] {
border-color: var(--teal);
box-shadow: var(--sombra-sm);
}
.site-faq__pergunta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--esp-4);
min-height: var(--toque);
padding: var(--esp-4) var(--esp-5);
font-family: var(--fonte-titulo);
font-size: 1rem;
font-weight: 700;
color: var(--navy);
cursor: pointer;
list-style: none;
}
.site-faq__pergunta::-webkit-details-marker { display: none; }
.site-faq__pergunta::marker { content: ''; }
.site-faq__pergunta:hover {
background: var(--turquesa-fundo);
}
/* O sinal de mais/menos acompanha o estado. Como o texto da pergunta ja muda
de vizinho visual ao abrir, o icone e reforco, nao a unica pista. */
.site-faq__pergunta::after {
content: '';
flex: 0 0 auto;
width: 14px;
height: 14px;
background: var(--acao);
/* Cruz feita por mascara: sem imagem e sem fonte de icone. */
-webkit-mask: linear-gradient(#000 0 0) center / 14px 2px no-repeat,
linear-gradient(#000 0 0) center / 2px 14px no-repeat;
mask: linear-gradient(#000 0 0) center / 14px 2px no-repeat,
linear-gradient(#000 0 0) center / 2px 14px no-repeat;
transition: transform .15s ease;
}
.site-faq__item[open] .site-faq__pergunta::after {
-webkit-mask: linear-gradient(#000 0 0) center / 14px 2px no-repeat;
mask: linear-gradient(#000 0 0) center / 14px 2px no-repeat;
}
/* Aberta, a pergunta ganha um filete embaixo: separa visualmente a pergunta da
resposta, que antes encostavam e liam como um parágrafo só. */
.site-faq__item[open] .site-faq__pergunta {
border-bottom: 1px solid var(--linha);
}
.site-faq__resposta {
/* Respiro maior que o de antes (0 esp-5 esp-5): a resposta é o conteúdo que
a pessoa veio ler e estava colada nas bordas do cartão. */
padding: var(--esp-4) var(--esp-5) var(--esp-5);
color: var(--tinta-media);
font-size: .9375rem;
line-height: 1.65;
}
.site-faq__resposta > :last-child { margin-bottom: 0; }
/* Link dentro de uma resposta ("Conhecer planos", no fim da pergunta sobre
receber por outros meios). Sublinhado e em negrito porque a resposta é um
bloco de texto corrido: sem os dois, a única diferença entre o link e a
frase seria a cor — e cor sozinha não distingue link. */
.site-faq__resposta a {
color: var(--acao-forte);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Mesma abertura discreta dos blocos de recursos. */
@media (prefers-reduced-motion: no-preference) {
.site-faq__item[open] .site-faq__resposta {
animation: site-recursos-abre 200ms ease-out;
}
}
/* =========================================================================
Formulario de cadastro
========================================================================= */
.site-form {
padding: var(--esp-5);
background: var(--superficie);
border: 1px solid var(--linha);
border-radius: var(--raio-lg);
box-shadow: var(--sombra);
}
@media (min-width: 768px) {
.site-form { padding: var(--esp-6); }
}
.site-form__bloco {
margin-bottom: var(--esp-6);
}
.site-form__bloco:last-of-type {
margin-bottom: var(--esp-5);
}
.site-form__legenda {
display: block;
width: 100%;
margin: 0 0 var(--esp-4);
padding: 0 0 var(--esp-3);
border-bottom: 1px solid var(--linha);
font-family: var(--fonte-titulo);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--acao-forte);
}
/*