/* =============================================================
REFORÇO ESCOLAR CAMPINAS, base
-------------------------------------------------------------
Os valores de cor NÃO foram escolhidos no olho. Cada combinação
que a interface usa foi medida contra a exigência de contraste
(4,5 para texto normal). As duas regras que saíram da medição
estão logo abaixo dos tokens, e são as duas que mais se erra.
Referência do raciocínio: IDENTIDADE.md
============================================================= */
:root {
/* ---- A PALETA VEM DA CANETA ----
Azul, vermelho e verde são as três cores da caneta que a marca
cita, e são as três cores da logomarca.
O PRETO NÃO É COR DE MARCA, É TINTA. Serve ao texto e às
superfícies escuras, como serve em qualquer impresso.
A REGRA DO SEMÁFORO, que governa o uso das três:
AZUL é o padrão. Marca, links, títulos de apoio, números
de sequência, ícones. Na dúvida, é azul.
VERDE é o positivo e o seguir adiante. Ação, confirmação,
garantia, o caminho que deu certo.
VERMELHO É RESERVADO. Só entra onde há algo crítico ou
urgente: erro de formulário, campo obrigatório,
sinal de alerta. Vermelho gasto em enfeite deixa de
significar alguma coisa quando for preciso alertar
de verdade.
Cada valor foi MEDIDO, não escolhido no olho. Os números são a
razão de contraste sobre branco. */
--preto: #16181D; /* a tinta do texto. 17,76 */
--azul: #14357F; /* a marca. Links e superfícies. 11,38 */
--azul-escuro: #0E2559; /* estado pressionado do botão azul */
--verde: #0B7038; /* positivo e ação. 6,20, e aceita branco */
--verde-claro: #EAF5EE; /* fundo suave de confirmação */
--vermelho: #C4141B; /* SÓ crítico e urgente. 6,06 */
--vermelho-claro: #FDE8E9; /* fundo suave de alerta */
/* Sobre fundo escuro, azul e vermelho somem: #14357F sobre #16181D
dá 1,56 e #C4141B dá 2,93. Estes dois são os substitutos. */
--verde-no-escuro: #4ED88A; /* 9,74 sobre o preto */
--vermelho-no-escuro: #FF8A8F; /* 7,85 sobre o preto */
--cinza: #4A4F5C; /* texto de apoio. 8,19 sobre branco */
--borda: #DCE0E7;
--branco: #FFFFFF;
/* ---- nomes antigos, mantidos como apelido ----
O site inteiro referencia estes três. Trocar o VALOR em um lugar
é mais seguro que trocar o NOME em quatrocentos. */
--tinta: var(--preto);
--terra: var(--azul);
--ambar: var(--vermelho);
--ambar-claro: var(--vermelho-claro);
--creme: #F4F5F7; /* fundo de seção, neutro frio */
/* ---- AÇÃO ----
Um verde mais claro que o --verde da marca, porque este é o do
WhatsApp. O botão é o principal destino do site, e o verde do
aplicativo é reconhecido antes de o texto ser lido.
O texto sobre ele é PRETO, não branco: branco sobre este verde
dá 1,98, quando o mínimo é 4,5. O preto dá 8,95. */
--acao: #25D366;
--acao-forte: #1CB854;
/* ---- espaço ---- */
--e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px;
--e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
--raio: 12px;
--raio-pill: 999px;
--transicao: .18s ease;
--fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--largura: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
background: var(--branco);
color: var(--tinta);
font-family: var(--fonte);
/* 17px de propósito. Parte do público lê no celular, em pé, na
porta da escola, e boa parte tem mais de 40 anos. */
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
margin: 0 0 var(--e4);
line-height: 1.15;
letter-spacing: -.02em;
font-weight: 700;
text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
/* =============================================================
TEXTO JUSTIFICADO, A REGRA DA CASA
-------------------------------------------------------------
Justificar em português SEM hifenização abre rios de espaço
branco no meio do parágrafo: a última palavra da linha é empurrada
até a margem e o miolo estica. As duas propriedades andam juntas,
nunca uma sem a outra.
"hyphens: auto" usa o dicionário de separação silábica do idioma
declarado em . Sem o lang correto, o navegador
não hifeniza e a justificação fica feia.
MEDIDA MÍNIMA. Abaixo de mais ou menos 45 caracteres por linha,
nenhuma hifenização salva um texto justificado: sobram poucas
palavras por linha e cada ajuste vira um buraco. Por isso as
colunas estreitas (cartões, notas, células de tabela) continuam
alinhadas à esquerda, mais abaixo.
============================================================= */
p {
margin: 0 0 var(--e4);
max-width: 68ch;
text-align: justify;
text-justify: inter-word;
-webkit-hyphens: auto;
hyphens: auto;
/* 5 2 2: parte palavra a partir de cinco letras, deixando ao menos
duas de cada lado. Com 6 3 3 sobravam poucos pontos de quebra e
dez linhas passavam de 1/4 de em de espaço extra. */
hyphenate-limit-chars: 5 2 2;
/* Evita a última linha com uma palavra só, a viúva do parágrafo. */
text-wrap: pretty;
}
/* Parágrafo longo centralizado cansa e derruba a leitura. */
.texto-centro p { margin-inline: auto; }
/* Texto centralizado e justificado ao mesmo tempo é contraditório. */
.texto-centro p { text-align: center; hyphens: manual; }
/* ---- onde a justificação NÃO entra ----
Coluna curta, texto de apoio de uma ou duas linhas e rótulo não
ganham nada com ela, e perdem em regularidade. */
.cartao p,
.passos p,
.motivos p,
.cartoes-psico p,
.cartao-bairro p,
.hero__nota-cta,
.form__nota,
.campo__dica,
.campo__erro,
.escola-proxima p,
.escolas__lista,
.rodape p,
.trilha,
.tabela-escolas td,
.tabela-escolas th,
.sinais li,
.porta__lista li,
.hero__form-garantias li,
.pilares span,
.lista-check span,
.indice-bairros li,
figcaption,
caption {
text-align: left;
-webkit-hyphens: manual;
hyphens: manual;
}
/* ---- NO CELULAR, A JUSTIFICAÇÃO SAI ----
Não é preferência, é medição. A 375px o parágrafo tem 36 caracteres
por linha, e nessa medida a justificação foi medida assim:
106 linhas analisadas
49 delas com mais de 1/4 de em de espaço extra por lacuna
a pior linha com 3,19 em
Espaço extra dessa ordem é o rio branco que atravessa o parágrafo
de cima a baixo. A alternativa seria encolher a fonte até caber
mais palavra por linha, mas boa parte deste público lê no celular,
em pé, na porta da escola, e boa parte tem mais de 40 anos: reduzir
corpo para salvar um alinhamento seria trocar leitura por estética.
Acima de 700px a medida passa de 60 caracteres e a justificação
volta, que é onde ela de fato embeleza. */
@media (max-width: 699px) {
p, .entrada, .hero__sub, li {
text-align: left;
-webkit-hyphens: auto;
hyphens: auto;
}
.texto-centro p { text-align: center; }
}
a { color: var(--terra); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration: none; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
.container { width: min(100% - 2 * var(--e5), var(--largura)); margin-inline: auto; }
.container--estreito { width: min(100% - 2 * var(--e5), 780px); margin-inline: auto; }
.sr-so {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Os filhos também. Sem isto, o campo dentro da armadilha de robô
media 434px de largura: recortado na tela, mas contado por
qualquer auditoria de estouro horizontal. */
.sr-so * { max-width: 1px; overflow: hidden; }
.pular {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--tinta); color: var(--branco); padding: var(--e3) var(--e4);
}
.pular:focus { left: var(--e4); top: var(--e4); }
/* =============================================================
BOTÕES
============================================================= */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
padding: var(--e3) var(--e5);
min-height: 52px;
font: inherit; font-weight: 700; line-height: 1.2;
text-align: center; text-decoration: none;
border: 2px solid transparent; border-radius: var(--raio-pill);
cursor: pointer;
transition: background var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn svg { width: 21px; height: 21px; flex-shrink: 0; }
/* O botão principal é o do WhatsApp: texto TINTA sobre o verde.
Ver a nota no bloco de tokens. Não trocar por branco. */
.btn--acao {
background: var(--acao); color: var(--tinta);
box-shadow: 0 6px 18px rgba(37, 211, 102, .32);
}
.btn--acao:hover { background: var(--acao-forte); color: var(--tinta); }
.btn--terra { background: var(--terra); color: var(--branco); }
.btn--terra:hover { background: var(--azul-escuro); color: var(--branco); }
.btn--contorno { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn--contorno:hover { background: var(--tinta); color: var(--branco); }
/* SOBRE FUNDO ESCURO, O BOTAO DE CONTORNO SOME.
Tinta sobre tinta da contraste 1,00: o botao existe no HTML e e
invisivel na tela. Sobre a secao escura ele inverte. */
.secao--tinta .btn--contorno { color: var(--branco); border-color: rgba(255, 255, 255, .65); }
.secao--tinta .btn--contorno:hover { background: var(--branco); color: var(--tinta); border-color: var(--branco); }
.btn--grande { min-height: 58px; padding: var(--e4) var(--e6); font-size: 1.0625rem; }
.btn--largo { width: 100%; }
/* =============================================================
SEÇÕES
============================================================= */
.secao { padding-block: clamp(var(--e7), 6vw, var(--e9)); }
.secao--creme { background: var(--creme); }
.secao--tinta { background: var(--tinta); color: var(--branco); }
.secao--tinta h2, .secao--tinta h3 { color: var(--branco); }
.secao--tinta p { color: rgba(255, 255, 255, .82); }
.olho {
display: inline-block; margin-bottom: var(--e3);
font-size: .8125rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--terra);
}
.secao--tinta .olho { color: var(--verde-no-escuro); }
.secao__cabecalho { max-width: 720px; margin-bottom: var(--e7); }
.secao__cabecalho p { font-size: 1.0625rem; color: var(--cinza); }
.secao--tinta .secao__cabecalho p { color: rgba(255, 255, 255, .78); }
.grade { display: grid; gap: var(--e5); }
@media (min-width: 720px) { .grade--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grade--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .grade--4 { grid-template-columns: repeat(4, 1fr); } }
.cartao {
background: var(--branco);
border: 1px solid var(--borda);
border-radius: var(--raio);
padding: var(--e5);
}
.cartao h3 { margin-bottom: var(--e2); }
.cartao p { margin-bottom: 0; color: var(--cinza); font-size: .9375rem; }
/* Faixa de destaque: vermelho com texto BRANCO.
Com a paleta da caneta o par se inverteu. Preto sobre este
vermelho dá 2,93 e some; branco dá 6,06. A faixa costuma aparecer
dentro da seção escura, cuja regra pinta título de branco, por
isso as linhas abaixo levam duas classes: precisam vencer
".secao--tinta h3" e ".secao--tinta p". */
.faixa-ambar {
background: var(--azul); color: var(--branco);
border-radius: var(--raio); padding: var(--e6);
}
.faixa-ambar p { color: rgba(255, 255, 255, .90); }
.secao--tinta .faixa-ambar,
.secao--tinta .faixa-ambar h3,
.secao--tinta .faixa-ambar strong { color: var(--branco); }
.secao--tinta .faixa-ambar p { color: rgba(255, 255, 255, .90); }
/* =============================================================
MARCA
============================================================= */
.marca {
display: inline-flex; align-items: baseline; gap: .3em;
font-size: 1.25rem; font-weight: 300; letter-spacing: -.02em;
color: var(--tinta); text-decoration: none; line-height: 1;
}
.marca b { font-weight: 700; }
.marca--claro { color: var(--branco); }
/* =============================================================
LISTA DE MARCAS DE VERIFICAÇÃO
============================================================= */
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e4); }
.lista-check li {
display: grid; grid-template-columns: 26px 1fr; gap: var(--e3);
align-items: start; line-height: 1.5;
}
.lista-check svg { width: 26px; height: 26px; color: var(--verde); margin-top: 1px; }
.secao--tinta .lista-check svg { color: var(--verde-no-escuro); }
/* =============================================================
RODAPÉ
============================================================= */
.rodape { background: var(--tinta); color: rgba(255, 255, 255, .72); padding-block: var(--e8) var(--e6); }
.rodape a { color: rgba(255, 255, 255, .72); }
.rodape a:hover { color: var(--verde-no-escuro); }
.rodape h3 { color: var(--branco); font-size: .9375rem; text-transform: uppercase; letter-spacing: .06em; }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: var(--e2); }
.rodape__base {
margin-top: var(--e7); padding-top: var(--e5);
border-top: 1px solid rgba(255, 255, 255, .14);
font-size: .875rem; color: rgba(255, 255, 255, .5);
}
/* =============================================================
A MARCA COMO IMAGEM
-------------------------------------------------------------
Largura e altura ficam declaradas no HTML com as medidas do
viewBox (700x150). Não é para exibir nesse tamanho: é para o
navegador reservar a proporção antes de o SVG chegar, e a linha
do cabeçalho não pular quando ele carrega.
============================================================= */
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img { width: auto; height: 38px; }
@media (max-width: 520px) { .marca img { height: 34px; } }
.marca-rodape { width: auto; height: 46px; margin-bottom: var(--e4); }
/* =============================================================
O CÓDIGO DE COR DOS TÍTULOS
-------------------------------------------------------------
O site estava neutro porque a cor só aparecia em botão. Aqui ela
passa a CARREGAR SIGNIFICADO, e é isso que a torna mnemônica: o
leitor aprende o código na primeira rolagem e depois reconhece o
tipo de seção antes de ler o título.
AZUL quem somos e o que oferecemos
VERDE o que a família ganha, e o caminho que dá certo
VERMELHO o que está errado, e só isso
A cor entra em TRÊS camadas, do mais fraco ao mais forte:
1. o filete acima do título, que dá o tom da seção;
2. o olho, a linha em versalete;
3. o realce dentro do próprio título, na palavra que decide.
A terceira é a que mais converte. O olho pousa primeiro na palavra
colorida, e ela precisa ser a que fecha a promessa: "dois minutos",
"não avança", "mesmo endereço". Nunca o verbo, nunca o artigo.
============================================================= */
.secao__cabecalho .olho,
.sinais__topo .olho,
.hero__form-topo .olho { position: relative; }
/* O filete. 40px, acima do olho, na cor da seção. */
.secao__cabecalho > .olho::before,
.hero__form-topo > .olho::before {
content: ""; display: block;
width: 40px; height: 4px; border-radius: 2px;
margin-bottom: var(--e3);
background: currentColor;
}
/* ---- os três tons de seção ---- */
.olho { color: var(--azul); }
.secao--beneficio .olho { color: var(--verde); }
.secao--alerta .olho { color: var(--vermelho); }
.secao--tinta .olho { color: var(--verde-no-escuro); }
/* ---- o realce dentro do título ----
Sem itálico e sem peso extra: só a cor. Título já é negrito, e
somar recurso a recurso é o que faz uma página parecer amadora. */
.realce { font-style: normal; color: var(--azul); }
.realce--verde { color: var(--verde); }
.realce--alerta { color: var(--vermelho); }
.secao--tinta .realce { color: var(--verde-no-escuro); }
.secao--tinta .realce--alerta { color: var(--vermelho-no-escuro); }
/* =============================================================
PADRÃO DE LISTA COM MARCADOR
-------------------------------------------------------------
REGRA DA CASA: item de lista que contém PROSA nunca usa grid.
O defeito apareceu três vezes neste projeto, sempre igual. Com
"grid-template-columns: 10px 1fr", um item assim:
Título. Texto corrido do item.
tem DOIS itens de grade, e não um: o e o nó de texto que vem
depois dele, que o CSS transforma em item anônimo. O ::before vai
para a coluna 1, o para a coluna 2, e O TEXTO VOLTA PARA A
COLUNA 1 da linha seguinte, que tem 10px. Resultado: uma palavra
por linha.
E não há como corrigir com seletor, porque nó de texto não é
selecionável em CSS. Declarar "grid-column" nos filhos resolve o
caso conhecido e volta a quebrar no dia em que alguém escrever um
ou um no meio do item.
O PADRÃO QUE NÃO QUEBRA é marcador posicionado de forma absoluta
sobre um recuo. O conteúdo do item permanece em fluxo normal, e
fluxo normal aceita qualquer combinação de texto e elemento
inline sem se reorganizar.
li { position: relative; padding-left: RECUO; }
li::before { position: absolute; left: 0; top: N; }
Vale para toda lista com marcador desenhado. Se um dia for
preciso alinhar colunas de verdade, com dois blocos independentes,
aí sim é grid, e aí os dois blocos são ELEMENTOS, nunca texto solto.
============================================================= */
.lista-marcador {
list-style: none; padding: 0; margin: 0;
display: grid; gap: var(--e4);
}
.lista-marcador > li {
position: relative;
padding-left: 26px;
text-align: left;
}
.lista-marcador > li::before {
content: "";
position: absolute; left: 0; top: .62em;
width: 8px; height: 8px; border-radius: 50%;
background: var(--azul);
}