/* ==========================================================================
Leve & Lave Chapecó — sistema visual
Direção: "o mural da parede". A loja comunica por balão de fala — o mural da
sala de espera, os avisos, as portas do Locker, tudo é balão azul recortado
sobre cimento queimado. A página usa o mesmo vocabulário, para que quem
clica no anúncio reconheça a sala quando entrar.
O que veio da Pluma (a pedido do operador) é a ARQUITETURA do hero: campo
claro, coluna de texto à esquerda, foto sangrando até a borda direita a
partir de 1180px, peça de preço sobreposta à foto, faixa de preço só no
mobile e curva fazendo a passagem para a faixa escura dos pilares.
O vocabulário é todo outro: lá é disco de adesivo de vitrine e onda de três
faixas; aqui é balão de fala e curva única, que é o que existe na parede.
Paleta medida, não estimada. Todas do logo oficial e das fotos da loja:
#0F3E72 camiseta "leve" -> --marinho
#03B6D0 camiseta "lave" -> --ciano
#0E244D parede das máquinas -> confirma a família do --marinho-90
#898989 cimento queimado -> família dos cinzas de texto
#D8D4CB piso -> --areia
Contraste conferido. Quatro limites que o CSS respeita em todo lugar:
branco sobre #03B6D0 = 2.44 REPROVA -> sobre ciano, texto sempre marinho
branco sobre #25D366 = 1.98 REPROVA -> botão WhatsApp leva texto marinho
#03B6D0 sobre claro = 2.25 REPROVA -> ciano nunca é texto sobre claro
#0F3E72 sobre #03B6D0 = 4.41 QUASE -> texto sobre ciano usa --marinho-txt
========================================================================== */
/* ---------- Fontes auto-hospedadas ------------------------------------------
Nunito variável: um arquivo cobre 400-900. Arredondada de terminal, que é o
que o lettering "leve & lave" faz — a marca não é grotesca, é rounded, e uma
grotesque neutra aqui brigaria com o logo em cima dela.
Sem fonts.googleapis.com: medido, aquilo custa ~750ms de bloqueio de render.
--------------------------------------------------------------------------- */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(../fonts/nunito-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(../fonts/nunito-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------- Tokens --------------------------------------------------------- */
:root {
--marinho: #0F3E72; /* camiseta "leve" do logo: header, CTA final, balões */
--marinho-txt: #0D3764; /* o marinho QUANDO É TEXTO sobre ciano (4.92:1) */
--marinho-90: #0B2F57; /* um degrau abaixo: faixa de pilares e base da onda */
--marinho-esc: #071D34; /* rodapé */
--ciano: #03B6D0; /* camiseta "lave" do logo. Campo — nunca texto claro */
--ciano-claro: #23CAE3; /* o ciano QUANDO É TEXTO sobre marinho (5.44:1) */
--ciano-txt: #027687; /* o ciano QUANDO É TEXTO sobre claro (4.91:1) */
--tinta: #12203A;
--grafite: #4A5470;
--gelo: #F2F6FB;
--areia: #F6F4EF; /* o piso da loja: fundo alternativo, quebra o azulado */
--branco: #FFFFFF;
--linha: #D9E2EE;
--wa: #25D366;
--wa-hover:#1FBA5A;
/* Hero claro — fiel ao que a pessoa encontra: cimento claro, piso bege,
iluminado. Os tons de texto saem do mobiliário medido, não de uma escala
de cinza: o H1 é a poltrona, o sub e o micro são degraus acima dela. */
--hero-bg: #F2F6FB;
--hero-h1: #22304A; /* 11.9:1 — a poltrona da sala de espera */
--hero-sub: #44506B; /* 7.8:1 */
--hero-micro: #5A6480; /* 5.6:1 */
--hero-linha: #DAE2EE;
--wrap: 1180px;
--gut: clamp(1.15rem, 4vw, 2.5rem);
--secao-y: clamp(3.6rem, 8vw, 6.5rem);
--r: 16px;
--r-lg: 24px;
--sombra: 0 2px 4px rgba(18,32,58,.05), 0 12px 32px rgba(18,32,58,.09);
--sombra-alta: 0 4px 8px rgba(18,32,58,.07), 0 24px 56px rgba(18,32,58,.16);
}
/* ---------- Base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 1.0625rem;
line-height: 1.62;
color: var(--tinta);
background: var(--branco);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
:focus-visible {
outline: 3px solid var(--ciano-txt);
outline-offset: 3px;
border-radius: 4px;
}
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gut);
}
/* fixed, não absolute: com absolute o link salta para o topo do DOCUMENTO e
some da tela quando a pessoa está no meio da página — que é quando ela
tabula. */
.pular {
position: fixed; left: -9999px; top: 1rem; z-index: 999;
background: var(--marinho); color: #fff; padding: .8rem 1.2rem;
border-radius: 8px; font-weight: 800; text-decoration: none;
}
.pular:focus { left: 1rem; }
/* ---------- Tipografia -----------------------------------------------------
Nunito não tem eixo de largura, diferente da Archivo. Onde a Pluma usava
font-stretch para separar display de condensado, aqui quem separa é peso +
tracking: 900 com tracking negativo para display e número, 800 com tracking
positivo e caixa alta para rótulo.
--------------------------------------------------------------------------- */
/* balance em vez de forçado: os títulos daqui são longos ("Nunca usou uma
lavanderia self-service?") e um que fecha bem em 1440px deixa órfã em
1024 e estoura em 380. O balance distribui as linhas em qualquer largura, e
como só vale até ~6 linhas, serve exatamente para título. */
.display { font-weight: 900; letter-spacing: -.021em; line-height: 1.05; text-wrap: balance; }
.numero { font-weight: 900; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.rotulo { font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .775rem; line-height: 1.35; }
.h1 { font-size: clamp(2.15rem, 5.2vw, 3.4rem); }
.h2 { font-size: clamp(1.8rem, 4.2vw, 2.8rem); }
.h3 { font-size: clamp(1.15rem, 2.2vw, 1.33rem); font-weight: 800; letter-spacing: -.012em; }
.lead { font-size: clamp(1.06rem, 1.9vw, 1.22rem); line-height: 1.55; }
.miudo { font-size: .92rem; line-height: 1.5; }
/* O destaque de cor dentro do H1. O padrão é a versão escurecida, porque o
hero é claro; sobre campo escuro ele volta a ser o ciano do logo. */
.ciano-txt { color: var(--ciano-txt); }
.secao--marinho .ciano-txt { color: var(--ciano-claro); }
/* ---------- Seções --------------------------------------------------------- */
.secao { padding-block: var(--secao-y); }
.secao--gelo { background: var(--gelo); }
.secao--areia { background: var(--areia); }
.secao--marinho { background: var(--marinho); color: #fff; }
.secao--ciano { background: var(--ciano); color: var(--marinho-txt); }
.secao--branco { background: var(--branco); }
.secao__topo { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.secao__eyebrow { color: var(--ciano-txt); margin-bottom: .85rem; }
.secao--marinho .secao__eyebrow { color: var(--ciano-claro); }
.secao--ciano .secao__eyebrow { color: var(--marinho-txt); }
.secao__sub { margin-top: 1.1rem; color: var(--grafite); }
.secao--marinho .secao__sub { color: #C3D2E8; }
.secao--ciano .secao__sub { color: #06364A; }
/* ---------- Botões --------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
padding: 1.02rem 1.6rem;
border: 0; border-radius: 999px;
font-family: inherit; font-size: 1.02rem; font-weight: 800;
letter-spacing: -.005em; text-decoration: none; cursor: pointer;
transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn__ico { flex: none; width: 20px; height: 20px; fill: currentColor; }
/* Texto marinho sobre o verde: branco daria 1.98:1. Marinho dá 5.42:1 e
mantém a cor de marca do WhatsApp, que é o que faz o botão ser reconhecido
antes de ser lido. */
.btn--wa { background: var(--wa); color: var(--marinho-txt); box-shadow: 0 6px 18px rgba(37,211,102,.30); }
.btn--wa:hover { background: var(--wa-hover); }
.btn--rota { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.42); }
.btn--rota:hover { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 2px #fff; }
/* O par do btn--rota para fundo claro — é o que o hero usa. */
.btn--rota-claro { background: transparent; color: var(--marinho); box-shadow: inset 0 0 0 2px rgba(15,62,114,.32); }
.btn--rota-claro:hover { background: rgba(15,62,114,.06); box-shadow: inset 0 0 0 2px var(--marinho); }
.btn--marinho { background: var(--marinho); color: #fff; }
.btn--marinho:hover { background: var(--marinho-90); }
.btn-linha { display: flex; flex-wrap: wrap; gap: .8rem; }
/* ---------- Header ---------------------------------------------------------
Header CLARO, e não o campo escuro que a referência usa. Não é preferência:
o logo é um selo de duas camisetas e a da esquerda é #0F3E72 — sobre campo
marinho ela some e a palavra "LAVANDERIA" desaparece junto. A marca tem uma
versão invertida para fundo escuro (é a que está no letreiro da fachada, com
a camiseta esquerda clara), mas essa arte não veio no material. Enquanto não
vier, o campo claro é o único jeito de aplicar o logo oficial sem deturpá-lo.
O selo é quase quadrado (520x439), então ele come altura, não largura: o
header precisa dos 80px para o logo caber em 68px e ainda respirar.
--------------------------------------------------------------------------- */
.topo {
position: sticky; top: 0; z-index: 60;
background: var(--branco);
border-bottom: 1px solid var(--hero-linha);
box-shadow: 0 1px 14px rgba(18,32,58,.055);
}
.topo__grid {
display: flex; align-items: center; gap: 1rem;
min-height: 72px; padding-block: .4rem;
}
.topo__logo { flex: none; display: block; }
.topo__logo img { width: 72px; height: auto; }
/* O horário é o argumento que a concorrência de Chapecó não tem à mão, e é a
dúvida por trás de "lavanderia perto de mim". Fica no header, não escondido
no rodapé. */
.topo__horario {
margin: 0 0 0 auto; color: var(--hero-sub);
font-weight: 800; font-size: .82rem; line-height: 1.25;
text-align: right; letter-spacing: .01em;
}
.topo__horario b { display: block; color: var(--ciano-txt); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.topo__wa { display: none; }
@media (max-width: 419px) {
.topo__logo img { width: 60px; }
.topo__grid { min-height: 64px; }
.topo__horario { font-size: .74rem; }
.topo__horario b { font-size: .64rem; letter-spacing: .06em; }
}
@media (min-width: 900px) {
.topo__grid { min-height: 80px; }
.topo__logo img { width: 80px; }
.topo__wa {
display: inline-flex; margin-left: 1.2rem;
padding: .66rem 1.15rem; font-size: .93rem;
}
}
/* ---------- Hero -----------------------------------------------------------
Campo claro, fiel ao interior: cimento queimado, piso bege, muita luz. O
peso que um campo escuro daria vem da tipografia (Nunito 900) e da curva na
base, que é a mesma curva pintada na parede da sala de espera.
A foto NÃO fica dentro do .wrap: ela sangra até a borda direita da viewport.
Por isso a é filha direta da . Abaixo de 1180px ela volta
ao fluxo, em largura total, logo depois do texto — e a curva cruza a base
dela.
--------------------------------------------------------------------------- */
.hero {
position: relative;
background: var(--hero-bg);
color: var(--hero-sub);
padding-top: clamp(2.4rem, 6vw, 4.2rem);
/* zero no mobile de propósito: a foto vai até a base e a curva passa por
cima dela. No desktop o padding volta, porque lá quem fica embaixo da
curva é a coluna de texto. */
padding-bottom: 0;
overflow: hidden;
}
/* O splash de bolhas do logo, repetido na fachada e nas portas do Locker.
Entra como marca d'água atrás do texto, em opacidade baixa: é assinatura,
não ilustração. Só desktop — no mobile ele cairia atrás do bloco de preço e
sujaria o número, que é o elemento que precisa estar mais limpo da página. */
.hero__bolhas {
display: none;
position: absolute; top: -6%; left: -7%; z-index: 0;
width: 430px; height: auto;
color: var(--ciano); opacity: .09;
pointer-events: none;
}
@media (min-width: 1180px) { .hero__bolhas { display: block; } }
/* Acima da foto: entre 1180 e 1320px a coluna de texto e a foto chegam perto,
e o texto tem de vencer a sobreposição. */
.hero__conteudo { position: relative; z-index: 3; }
.hero__eyebrow { color: var(--ciano-txt); margin-bottom: 1rem; }
.hero__h1 { color: var(--hero-h1); margin-bottom: 1.35rem; }
.hero__sub { color: var(--hero-sub); max-width: 34rem; margin-bottom: 1.35rem; }
.hero__sub b { color: var(--hero-h1); font-weight: 800; }
.hero__ctas { margin-bottom: 1.3rem; }
/* Versal só nos CTAs do hero. No .btn global isto vazaria para a barra fixa e
para os CTAs de seção, que são frase corrida e ficam gritados em caixa alta. */
.hero__ctas .btn { text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; }
/* ---------- Selo do hero ---------------------------------------------------
Responde à objeção que mais aparece antes da primeira visita: "o que eu
preciso levar?". O campo tem de ficar em #EAF3FA ou mais claro: com
--ciano-txt no título este par dá 4.6:1, e escurecer o fundo derruba abaixo
dos 4.5 exigidos.
--------------------------------------------------------------------------- */
.hero-selo {
display: grid; grid-template-columns: 42px 1fr; gap: .95rem;
align-items: start;
max-width: 34rem; margin-bottom: 1.3rem;
padding: 1rem 1.2rem;
background: #EAF3FA;
border: 1px solid var(--hero-linha);
border-radius: var(--r);
}
.hero-selo__ico { width: 42px; height: 42px; color: var(--ciano-txt); }
.hero-selo__titulo { display: block; font-weight: 800; color: var(--ciano-txt); margin-bottom: .1rem; }
.hero-selo__txt { display: block; color: var(--hero-sub); font-size: .95rem; line-height: 1.45; }
/* ---------- Balão de preço -------------------------------------------------
O disco da Pluma vira balão aqui, e não por variação gratuita: o mural
inteiro da sala de espera é balão de fala azul recortado, as portas do
Locker também, e é a forma que a pessoa vai reconhecer quando entrar. O
rabicho aponta para a foto, como os balões da parede apontam para quem está
sentado.
Regra do briefing embutida na forma: o R$ 16 nunca aparece sem o R$ 32 na
mesma tela. Por isso o balão carrega os dois — o combo como número grande e
as duas metades como linha de apoio — em vez de só o menor.
--------------------------------------------------------------------------- */
.balao {
position: relative;
display: grid; justify-items: center; text-align: center;
padding: 1.15rem 1.3rem 1.25rem;
background: var(--ciano); color: var(--marinho-txt);
border-radius: 20px;
}
/* o rabicho: quadrado girado, mesma cor do campo, sem borda — é assim que os
balões da parede são recortados */
.balao::after {
content: ""; position: absolute; left: 26px; bottom: -9px;
width: 22px; height: 22px; background: inherit;
border-radius: 0 0 5px 0;
transform: rotate(45deg);
}
.balao__topo { font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; opacity: .9; }
.balao__valor { display: flex; align-items: flex-start; gap: .1em; line-height: .94; margin: .12rem 0 .1rem; }
.balao__cifra { font-size: .4em; font-weight: 800; letter-spacing: 0; margin-top: .42em; }
.balao__base { font-weight: 700; font-size: .72rem; line-height: 1.3; }
.balao__base b { font-weight: 900; }
.hero__balao {
position: absolute;
right: var(--gut); bottom: clamp(52px, 7vw, 82px);
z-index: 2;
width: clamp(176px, 42vw, 208px);
box-shadow: 0 14px 34px rgba(18,32,58,.30);
}
.hero__balao .balao__valor { font-size: clamp(2.4rem, 6vw, 2.9rem); }
/* ---------- Faixa de preço — só mobile -------------------------------------
No desktop o balão sobre a foto já entrega os dois números na mesma dobra, a
poucos centímetros daqui, e os ~140px desta faixa jogariam o CTA para fora
da dobra em 1366x768. No mobile a foto só começa ~950px abaixo do topo: sem
a faixa, o preço estrearia perto de 1.250px, quase duas telas de rolagem.
O asterisco some junto — sem a faixa ele apontaria para um número que está
do outro lado da tela, dentro do balão.
--------------------------------------------------------------------------- */
.faixa-preco {
display: grid; grid-template-columns: auto 1fr; align-items: center;
gap: .3rem 1.1rem;
max-width: 34rem; margin-bottom: .85rem;
padding: 1.05rem 1.25rem 1rem;
background: var(--marinho); color: #fff;
border-radius: var(--r);
}
.faixa-preco__rot b {
display: block; color: var(--ciano-claro);
font-weight: 900; font-size: .95rem;
text-transform: uppercase; letter-spacing: .07em;
}
.faixa-preco__rot span {
display: block; color: #BFD2EA;
font-weight: 700; font-size: .8rem;
text-transform: uppercase; letter-spacing: .07em;
}
.faixa-preco__valor {
display: flex; align-items: flex-start; justify-content: flex-end; gap: .14em;
font-size: clamp(2.5rem, 12vw, 3.1rem); line-height: .95;
}
.faixa-preco__cifra { font-size: .38em; font-weight: 800; letter-spacing: 0; margin-top: .5em; }
.faixa-preco__nota { grid-column: 1 / -1; margin: .35rem 0 0; color: #BFD2EA; font-size: .84rem; line-height: 1.4; }
.faixa-preco__nota b { color: #fff; font-weight: 800; }
.hero__asterisco { max-width: 34rem; margin-bottom: 1.3rem; color: var(--hero-micro); }
/* O corte é 1180px (= --wrap) e não 900px porque é aí que a foto passa a
sangrar e o balão entra na mesma dobra. Entre 900 e 1180 o hero ainda é
empilhado, a foto só começa bem abaixo, e sem esta faixa o preço sumiria da
dobra. */
@media (min-width: 1180px) {
.faixa-preco, .hero__asterisco { display: none; }
}
/* Em 320px o rótulo e o número não cabem lado a lado. Empilhar é mais honesto
que encolher o número, que é o elemento que a faixa existe para dar. */
@media (max-width: 399px) {
.faixa-preco { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .2rem; }
.faixa-preco__valor { justify-content: center; }
}
/* ---------- Endereço do hero ----------------------------------------------- */
.hero-nap {
display: grid; grid-template-columns: 22px 1fr; gap: .04rem .7rem;
max-width: 30rem; color: var(--hero-micro);
font-size: .95rem; line-height: 1.5;
padding-bottom: 1.4rem;
}
.hero-nap__ico {
grid-row: 1 / span 3; width: 22px; height: 22px;
margin-top: .2rem; color: var(--ciano-txt); fill: currentColor;
}
.hero-nap b { color: var(--ciano-txt); font-weight: 800; }
/* ---------- A curva da parede (assinatura) ---------------------------------
Uma faixa só, não três. A parede da sala de espera tem exatamente uma curva
— o azul sobe da esquerda, faz crista no meio e desce à direita, contra o
cimento. Repetir isso em três camadas empilhadas seria a assinatura de outra
marca, não desta.
A cor tem de ser exatamente a dos pilares, senão aparece um filete de outro
tom na emenda. Entra por variável porque