/* ==========================================================================
Site white-label do tenant (E8) — a ESTRUTURA e o RITMO.
A cor e a letra NÃO estão aqui: chegam como custom properties `--st-*` no
``, montadas por `App\View\Site\TemaDoTenant` a partir do cadastro da
barbearia (`configuracoes_da_barbearia`).
A REGRA QUE ESTE ARQUIVO OBEDECE:
segundo tenant com visual completamente diferente SEM tocar em código
— só configuração (logo, cores, fotos, textos)
Consequências para quem for mexer:
- NENHUM valor de cor literal fora do bloco de emergência do topo. Um
`#111` esquecido numa regra é a barbearia de fundo escuro ficando com
texto invisível — e isso só aparece com o segundo cliente, quando já é
produção;
- nenhuma menção a nome, telefone, endereço, horário ou preço. Isso é
dado: vem do banco e passa pela view;
- `[data-tema="…"]` muda RITMO (raio, caixa, espessura, respiro), nunca
paleta. Paleta é cadastro.
A ESCALA TIPOGRÁFICA é a do manual de marca do piloto (título 42/1.1,
destaque 28/1.3, corpo 15/1.55, rótulo 13 com entreletra 0.08em) — ela é
boa o bastante para servir de escala PADRÃO da plataforma, e é por isso que
está no `:root` e não num tema. No celular os títulos encolhem por `clamp`;
o valor do manual é o teto, alcançado no desktop.
Mobile-first de verdade: a maioria chega pelo Instagram, no celular, na rua.
Servido estático por `public/`, com `?v=filemtime` na URL — o nginx do
projeto entrega css com `immutable` por um ano (docker/nginx.conf), então
arquivo novo PRECISA de URL nova. Referência sem `?v=` é um bug de cache de
um ano esperando para acontecer.
========================================================================== */
/* --------------------------------------------------------------------------
Fontes hospedadas no próprio domínio (ver public/fonts/site/LEIA-ME.txt).
Só são baixadas se o tenant escolher o par `garamond-archivo` — o navegador
busca um @font-face apenas quando alguma regra em uso pede a família.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/fonts/site/cormorant-garamond-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: 'Archivo';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/site/archivo-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;
}
/* --------------------------------------------------------------------------
Emergência: se o bloco inline do não chegar (view antiga, erro de
render), a página continua legível em vez de sumir. Único lugar do arquivo
com cor literal.
-------------------------------------------------------------------------- */
:root {
--st-fundo: #FBFAF8;
--st-tinta: #111111;
--st-suave: #595959;
--st-linha: #CFCDCA;
--st-superficie: #F1EFEC;
--st-primaria: #111111;
--st-sobre-primaria: #FFFFFF;
--st-inverso-fundo: #0C0C0C;
--st-inverso-tinta: #FFFFFF;
--st-inverso-suave: #B5B5B5;
--st-inverso-linha: #3A3A3A;
--st-fonte-titulo: Georgia, 'Times New Roman', serif;
--st-fonte-texto: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
/* Escala do manual. */
--st-tam-titulo: clamp(2.05rem, 1.3rem + 3vw, 2.625rem); /* → 42px */
--st-tam-destaque: clamp(1.4rem, 1.15rem + 1.1vw, 1.75rem); /* → 28px */
--st-tam-corpo: 0.9375rem; /* 15px */
--st-tam-rotulo: 0.8125rem; /* 13px */
/* Ritmo — o que os temas mexem. */
--st-raio: 0px;
--st-caixa: uppercase;
--st-entreletra-titulo: 0.1em;
--st-entreletra-rotulo: 0.08em;
--st-peso-titulo: 400;
--st-largura: 68rem;
--st-medida: 34rem;
--st-secao: clamp(3.25rem, 9vw, 6rem);
}
/* --------------------------------------------------------------------------
Base
-------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--st-fundo);
color: var(--st-tinta);
font-family: var(--st-fonte-texto);
font-size: var(--st-tam-corpo);
line-height: 1.55;
font-synthesis-weight: none;
}
h1, h2, h3 {
font-family: var(--st-fonte-titulo);
font-weight: var(--st-peso-titulo);
margin: 0;
text-wrap: balance;
}
/* Cormorant é fonte de FRASE CURTA em caixa alta com entreletra generosa — é
o que o manual do piloto manda e é o que ela faz bem. Texto corrido, preço
e tabela ficam na fonte de texto, sempre. */
h1 {
font-size: var(--st-tam-titulo);
line-height: 1.1;
letter-spacing: var(--st-entreletra-titulo);
text-transform: var(--st-caixa);
}
h2 {
font-size: var(--st-tam-destaque);
line-height: 1.3;
letter-spacing: calc(var(--st-entreletra-titulo) * 0.8);
text-transform: var(--st-caixa);
}
h3 {
font-family: var(--st-fonte-texto);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.35;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
/* `height: auto` não é detalhe: os `![]()
` levam `width`/`height` no HTML
(para o navegador reservar o espaço e a página não pular quando a foto
carrega), e sem isto o atributo `height` vence o CSS — o retrato sai
esticado exatamente na proporção do arquivo que a barbearia subiu. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* Foco visível SEMPRE, e com folga. `outline: none` de "reset bonito" é a
forma mais comum de quebrar navegação por teclado sem perceber. */
:where(a, button, [tabindex]):focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
/* --------------------------------------------------------------------------
Peças de repetição
-------------------------------------------------------------------------- */
.limite {
width: 100%;
max-width: var(--st-largura);
margin-inline: auto;
padding-inline: clamp(1.15rem, 5vw, 2.5rem);
}
.secao { padding-block: var(--st-secao); }
/* O cabeçalho é fixo: sem esta folga, clicar em "Serviços" no menu deixa o
título da seção ESCONDIDO ATRÁS dele. Descoberto medindo no navegador — é
o tipo de defeito que ninguém nota escrevendo o CSS e todo mundo nota
usando o site. */
section[id] { scroll-margin-top: 5.5rem; }
.secao + .secao { border-top: 1px solid var(--st-linha); }
.medida { max-width: var(--st-medida); }
.oculto-visual {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* "Pular para o conteúdo": primeiro item de tabulação da página. */
.pular {
position: absolute;
left: 0.75rem;
top: -4rem;
z-index: 60;
padding: 0.7rem 1rem;
background: var(--st-primaria);
color: var(--st-sobre-primaria);
text-decoration: none;
transition: top 0.15s ease;
}
.pular:focus { top: 0.75rem; }
/* Rótulo: 13px, entreletra 0.08em, caixa alta — o "AGENDE SEU HORÁRIO" do
manual. Sempre na fonte de texto. */
.rotulo {
display: block;
font-family: var(--st-fonte-texto);
font-size: var(--st-tam-rotulo);
font-weight: 600;
letter-spacing: var(--st-entreletra-rotulo);
text-transform: uppercase;
color: var(--st-suave);
}
.chapeu { margin-bottom: 1.25rem; }
.apoio { color: var(--st-suave); }
.risco {
width: 3rem;
height: 1px;
background: var(--st-linha);
border: 0;
margin: 1.75rem 0;
}
/* Frase de destaque (28/1.3) — a assinatura da marca, uma citação, um
posicionamento. Fonte de título, caixa normal: é frase, não rótulo. */
.destaque {
font-family: var(--st-fonte-titulo);
font-size: var(--st-tam-destaque);
line-height: 1.3;
letter-spacing: 0.01em;
max-width: 30ch;
}
/* --------------------------------------------------------------------------
Escopo escuro — a faixa preta e o rodapé.
Em vez de uma variante de cada componente (`.botao--claro`,
`.botao--vazado`, …), o escopo REDEFINE os tokens. Tudo que estiver dentro
— botão, rótulo, fio, link — nasce certo sozinho, inclusive componente
novo que ninguém pensou em adaptar. É a diferença entre uma regra e uma
lista de exceções que alguém vai esquecer de atualizar.
-------------------------------------------------------------------------- */
.inverso {
--st-fundo: var(--st-inverso-fundo);
--st-tinta: var(--st-inverso-tinta);
--st-suave: var(--st-inverso-suave);
--st-linha: var(--st-inverso-linha);
--st-superficie: var(--st-inverso-linha);
--st-primaria: var(--st-inverso-tinta);
--st-sobre-primaria: var(--st-inverso-fundo);
background: var(--st-fundo);
color: var(--st-tinta);
}
/* --------------------------------------------------------------------------
Botões — alvo de toque de 44px (WCAG 2.5.5), sem exceção
-------------------------------------------------------------------------- */
.botao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.875rem;
padding: 0.7rem 1.6rem;
border: 1px solid var(--st-primaria);
border-radius: var(--st-raio);
background: var(--st-primaria);
color: var(--st-sobre-primaria);
font-family: var(--st-fonte-texto);
font-size: var(--st-tam-rotulo);
font-weight: 600;
letter-spacing: var(--st-entreletra-rotulo);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.botao:hover { opacity: 0.86; }
.botao:active { transform: translateY(1px); }
.botao--discreto {
background: transparent;
color: var(--st-tinta);
border-color: var(--st-linha);
}
.acoes {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
}
/* --------------------------------------------------------------------------
Cabeçalho
-------------------------------------------------------------------------- */
.topo {
position: sticky;
top: 0;
z-index: 40;
background: var(--st-fundo);
border-bottom: 1px solid var(--st-linha);
}
.topo__interno {
display: flex;
align-items: center;
gap: 1.25rem;
min-height: 4.25rem;
padding-block: 0.75rem;
}
/* Área de proteção do selo (manual: X = altura da letra S). O respiro à
direita da marca é o que impede o menu de encostar nela. */
.marca {
display: inline-flex;
align-items: center;
gap: 0.7rem;
text-decoration: none;
margin-right: auto;
padding-right: 1rem;
}
/* 3rem de altura num logotipo horizontal de proporção ~4:1 dá ~190px de
largura — acima dos 160px que o manual do piloto exige como mínimo para a
versão horizontal. Medido no navegador: a 2.5rem ele saía com 124px, e o
descritor sumia antes de ficar ilegível, que é justamente o que o mínimo
existe para evitar. */
.marca__logo {
height: 3rem;
width: auto;
max-width: min(62vw, 20rem);
object-fit: contain;
object-position: left center;
}
/* Fallback tipográfico para barbearia SEM logo cadastrada — é o estado em que
toda barbearia nova nasce, e ele precisa ficar apresentável. */
.marca__texto {
font-family: var(--st-fonte-titulo);
font-size: 1.15rem;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.1;
}
.topo__menu {
display: none;
gap: 1.75rem;
}
.topo__menu a {
text-decoration: none;
padding-block: 0.75rem;
color: var(--st-suave);
font-size: var(--st-tam-rotulo);
letter-spacing: var(--st-entreletra-rotulo);
text-transform: uppercase;
}
.topo__menu a:hover { color: var(--st-tinta); }
.topo .botao { display: none; }
@media (min-width: 54rem) {
.topo__menu { display: flex; }
.topo .botao { display: inline-flex; }
}
/* --------------------------------------------------------------------------
Abertura
-------------------------------------------------------------------------- */
.abertura {
position: relative;
overflow: hidden;
padding-block: clamp(3.25rem, 11vw, 7rem);
border-bottom: 1px solid var(--st-linha);
}
.abertura__interno { position: relative; }
.abertura__texto { max-width: 46rem; }
.abertura__chamada { margin-top: 1.5rem; }
/* A capa, quando a barbearia tem uma. Sem ela a abertura é tipográfica — e é
assim que o piloto nasce, de propósito: identidade discreta se sustenta em
letra, fio e espaço, não em foto de banco de imagens. */
.abertura--com-capa {
--st-fundo: var(--st-inverso-fundo);
--st-tinta: var(--st-inverso-tinta);
--st-suave: var(--st-inverso-suave);
--st-linha: var(--st-inverso-linha);
--st-primaria: var(--st-inverso-tinta);
--st-sobre-primaria: var(--st-inverso-fundo);
background: var(--st-fundo);
color: var(--st-tinta);
}
.abertura__capa {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.45;
}
.abertura__capa::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 10%, var(--st-fundo) 100%);
opacity: 0.9;
}
.situacao {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-top: 2.25rem;
font-size: var(--st-tam-rotulo);
letter-spacing: 0.02em;
color: var(--st-suave);
}
.situacao::before {
content: '';
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: currentColor;
opacity: 0.4;
}
.situacao[data-aberta='1']::before { opacity: 1; }
/* --------------------------------------------------------------------------
Apresentação
-------------------------------------------------------------------------- */
.apresentacao { display: grid; gap: 2.5rem; }
@media (min-width: 54rem) {
.apresentacao { grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; }
}
.apresentacao__texto { max-width: var(--st-medida); }
/* --------------------------------------------------------------------------
Serviços — tabela de preços na fonte de TEXTO (manual: Archivo em preços e
tabelas de serviço), com fio fino por linha.
-------------------------------------------------------------------------- */
.catalogo { margin-top: 2.75rem; }
.catalogo__grupo + .catalogo__grupo { margin-top: 3.25rem; }
.catalogo__titulo {
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--st-linha);
}
.servicos { list-style: none; margin: 0; padding: 0; }
.servico {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 0.3rem 1.25rem;
padding-block: 1rem;
border-bottom: 1px solid var(--st-linha);
}
.servico__nome {
font-weight: 600;
font-size: 1rem;
line-height: 1.35;
}
.servico__preco {
font-variant-numeric: tabular-nums;
font-weight: 600;
white-space: nowrap;
text-align: right;
}
/* "Sob consulta" não é preço: fica sem peso e não finge ser R$ 0. */
.servico__preco--consulta {
font-weight: 400;
font-size: var(--st-tam-rotulo);
color: var(--st-suave);
}
/* A FAIXA (piso e teto) é quase duas vezes mais larga que um preço comum, e a
coluna do preço é `auto`: no celular ela come a coluna do nome. Medido em
360 px antes desta regra: o preço em duas linhas e o nome do serviço
espremido em três, com um "de" sozinho no meio.
No estreito a faixa ganha a LINHA INTEIRA, embaixo do nome (e aí ela cabe de
uma vez); a partir de 30rem volta para o lado, como todo preço. O teto NÃO
fica mais claro nem menor de propósito: ele é a informação que evita o
cliente fechar achando o menor valor. */
.servico--faixa { grid-template-columns: 1fr; }
.servico__preco--faixa { white-space: normal; }
.servico__preco-ponta { white-space: nowrap; }
@media (min-width: 30rem) {
.servico--faixa { grid-template-columns: 1fr auto; }
}
.aviso-de-catalogo + .aviso-de-catalogo { margin-top: 0.5rem; }
.servico__meta,
.servico__descricao {
grid-column: 1 / -1;
color: var(--st-suave);
font-size: var(--st-tam-rotulo);
}
.servico__descricao { max-width: var(--st-medida); }
.aviso-de-catalogo {
margin-top: 1.5rem;
font-size: var(--st-tam-rotulo);
color: var(--st-suave);
}
/* --------------------------------------------------------------------------
Equipe
-------------------------------------------------------------------------- */
.equipe {
list-style: none;
margin: 2.75rem 0 0;
padding: 0;
display: grid;
gap: 2.5rem;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
/* `max-width` no RETRATO, não na grade: com dois profissionais numa tela
larga, `auto-fit` estica cada célula para meia página e a foto vira um
pôster de 700px de altura. O texto continua alinhado à célula. */
.pessoa__retrato,
.pessoa__monograma {
width: 100%;
max-width: 17rem;
border-radius: var(--st-raio);
background: var(--st-superficie);
border: 1px solid var(--st-linha);
}
/* O retrato aparece INTEIRO, sem recorte nem zoom: `height:auto` deixa a foto
ditar a própria altura, seja o card vertical 9:16 do piloto (que já traz nome
e função impressos) ou um headshot de outra proporção. `cover` cortaria o
card do dono — que é justamente o que ele não quer. */
.pessoa__retrato { display: block; height: auto; }
/* O monograma (estado SEM foto) não tem imagem para ditar altura, então mantém
a caixa de retrato clássica. */
.pessoa__monograma { aspect-ratio: 3 / 4; }
/* Sem retrato ainda? Monograma tipográfico. É escolha de projeto, não espaço
reservado: não existe caixa cinza escrito "sua foto aqui" — isso é
rascunho, e rascunho na vitrine tira a credibilidade da casa inteira. */
.pessoa__monograma {
display: grid;
place-items: center;
font-family: var(--st-fonte-titulo);
font-size: clamp(2.25rem, 7vw, 3rem);
letter-spacing: 0.14em;
color: var(--st-suave);
}
.pessoa__nome { margin-top: 1.15rem; }
.pessoa__funcao { margin-top: 0.45rem; }
.pessoa__bio { margin-top: 0.8rem; color: var(--st-suave); }
/* --------------------------------------------------------------------------
Unidades — só existe em rede
Nada aqui é impresso por barbearia de uma loja só: a parcial não renderiza
(`unidadesDaRede()` devolve vazio). O CSS acompanha os mesmos tokens de
tema, então a rede nasce certa nos quatro temas sem uma regra por tema.
-------------------------------------------------------------------------- */
/* A frase que diz de qual loja a seção fala. Fica ABAIXO do e antes do
conteúdo — quem usa leitor de tela ouve a loja antes da lista. */
.secao__loja { margin-top: 0.85rem; font-size: var(--st-tam-rotulo); }
.unidades__nota { margin-top: 0.85rem; max-width: var(--st-medida); }
.unidades {
list-style: none;
margin: 2.75rem 0 0;
padding: 0;
display: grid;
gap: 1.5rem;
/* 18rem de piso: a loja com endereço de duas linhas não quebra palavra ao
meio no celular, e três lojas ainda cabem lado a lado no desktop. */
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.unidade {
padding: 1.6rem;
border: 1px solid var(--st-linha);
border-radius: var(--st-raio);
background: var(--st-superficie);
}
/* A loja que a página está mostrando ganha o fio de marca. É reforço VISUAL
do que já está escrito ("Unidade que você está vendo") e do `aria-current`:
cor sozinha não pode carregar informação (WCAG 1.4.1). */
.unidade[data-atual='1'] { border-color: var(--st-primaria); }
.unidade__nome { font-size: 1.25rem; }
/* ⚠️ `--st-tinta` e NÃO `--st-primaria` neste TEXTO. A cor de marca é a única
que não passa pela trava de legibilidade do `TemaDoTenant` — ela é feita para
ser FUNDO de botão (com `--st-sobre-primaria` por cima), e a casa que
escolher um dourado claro teria aqui 2,4:1 sobre o fundo branco. A tinta é
corrigida para 4,5:1 quando o par não alcança; a marca fica no fio da borda,
que é decoração e não informação. */
.unidade__atual { margin-top: 0.5rem; color: var(--st-tinta); }
.unidade__endereco { margin-top: 0.85rem; color: var(--st-suave); }
.unidade .situacao { margin-top: 1rem; }
.unidade__acoes {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
margin-top: 1.35rem;
}
/* Alvo de toque de 44px (WCAG 2.5.5) também nos links de texto do card —
telefone e mapa são tocados com o polegar, no celular, andando. */
.unidade__link {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
font-size: var(--st-tam-rotulo);
text-underline-offset: 3px;
}
/* --------------------------------------------------------------------------
Onde e quando
-------------------------------------------------------------------------- */
.local { display: grid; gap: 2.75rem; margin-top: 2.75rem; }
@media (min-width: 54rem) {
.local { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.dados { margin: 0; }
.dados > div + div { margin-top: 1.35rem; }
.dados dt { margin-bottom: 0.3rem; }
.dados dd { margin: 0; }
.dados a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.horarios {
list-style: none;
margin: 0;
padding: 0;
font-variant-numeric: tabular-nums;
}
.horarios li {
display: flex;
justify-content: space-between;
gap: 1rem;
padding-block: 0.7rem;
border-bottom: 1px solid var(--st-linha);
}
.horarios li:first-child { border-top: 1px solid var(--st-linha); }
.horarios__dia { color: var(--st-suave); }
.horarios li[data-fechado='1'] .horarios__faixa { color: var(--st-suave); }
.fuso {
margin-top: 1rem;
font-size: var(--st-tam-rotulo);
color: var(--st-suave);
}
/* --------------------------------------------------------------------------
Chamada final e rodapé
-------------------------------------------------------------------------- */
.chamada-final { text-align: center; }
.chamada-final .destaque { margin-inline: auto; }
.chamada-final .acoes { justify-content: center; }
.chamada-final__selo {
width: 7.5rem; /* 120px — mínimo do selo completo no manual do piloto */
height: auto;
margin: 0 auto 2rem;
}
.rodape {
padding-block: 3rem 4.5rem;
border-top: 1px solid var(--st-linha);
font-size: var(--st-tam-rotulo);
}
.rodape__grade { display: grid; gap: 2rem; }
@media (min-width: 54rem) {
.rodape__grade { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; }
}
.rodape__marca {
font-family: var(--st-fonte-titulo);
font-size: 1.05rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.rodape ul { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.rodape li + li { margin-top: 0.5rem; }
.rodape a { color: var(--st-tinta); }
.rodape__legal {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--st-linha);
color: var(--st-suave);
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
justify-content: space-between;
}
/* --------------------------------------------------------------------------
Canal de atendimento flutuante — o botão de "falar com a casa".
A classe se chama `.zap` por herança: ela nasceu quando o único canal
possível era WhatsApp. NÃO ASSUMA WHATSAPP AQUI — o canal é o que o tenant
configurou (`site_atendimento_url`), pode ser Telegram e é por isso que
nada nesta regra tem cor de marca: o botão usa a paleta do tema e o glifo
vem de `partes/icone-de-canal.blade.php`.
-------------------------------------------------------------------------- */
.zap {
position: fixed;
right: clamp(0.9rem, 4vw, 1.75rem);
bottom: calc(clamp(0.9rem, 4vw, 1.75rem) + env(safe-area-inset-bottom));
z-index: 50;
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--st-inverso-fundo);
color: var(--st-inverso-tinta);
border: 1px solid var(--st-inverso-linha);
box-shadow: 0 6px 22px rgb(0 0 0 / 0.2);
text-decoration: none;
}
.zap svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
@media print {
.zap, .topo, .pular { display: none !important; }
}
/* ==========================================================================
TEMAS — só ritmo, nunca paleta.
========================================================================== */
/* Editorial: canto vivo, caixa alta com ar entre as letras, fio fino. A
leitura da referência do piloto — discreto, preciso, atemporal. */
[data-tema='editorial'] {
--st-raio: 0px;
--st-caixa: uppercase;
--st-entreletra-titulo: 0.1em;
--st-peso-titulo: 400;
}
/* Moderno: caixa baixa, cantos macios, títulos pesados, respiro menor. Outra
barbearia, outra cara — e nenhuma linha de PHP ou Blade a mais. */
[data-tema='moderno'] {
--st-raio: 12px;
--st-caixa: none;
--st-entreletra-titulo: -0.02em;
--st-entreletra-rotulo: 0.04em;
--st-peso-titulo: 700;
--st-largura: 74rem;
--st-secao: clamp(3rem, 8vw, 5.5rem);
}
[data-tema='moderno'] .marca__texto { letter-spacing: 0.02em; text-transform: none; font-weight: 700; }
[data-tema='moderno'] .servico { border-bottom-style: dashed; }
[data-tema='moderno'] .botao { text-transform: none; letter-spacing: 0.01em; font-size: 0.9375rem; }
/* Noturno: contraste alto, filete da cor de marca, respiro maior. */
[data-tema='noturno'] {
--st-raio: 3px;
--st-caixa: uppercase;
--st-entreletra-titulo: 0.06em;
--st-peso-titulo: 400;
--st-secao: clamp(3.75rem, 10vw, 7rem);
}
[data-tema='noturno'] .risco { background: var(--st-primaria); width: 4rem; height: 2px; }
[data-tema='noturno'] .abertura { border-bottom-width: 2px; border-bottom-color: var(--st-primaria); }
/* --------------------------------------------------------------------------
Páginas legais do tenant (avisos legais, 22/08/2026): privacidade, termos,
lembretes e atendimento por robô. Prosa longa fora da home: medida de
leitura, tabela que rola no celular em vez de estourar a página, e a linha
de versão sob o h1. Tudo em variável do tema — a página legal veste a
mesma roupa da casa, seja ela qual for.
-------------------------------------------------------------------------- */
.pagina-legal h1 {
font-family: var(--st-fonte-titulo);
font-size: clamp(1.75rem, 4.5vw, 2.25rem);
line-height: 1.15;
letter-spacing: var(--st-entreletra-titulo);
text-transform: var(--st-caixa);
font-weight: var(--st-peso-titulo);
}
.pagina-legal__versao {
margin-top: 0.5rem;
color: var(--st-suave);
font-size: var(--st-tam-rotulo);
}
.pagina-legal h2 {
margin-top: 2.5rem;
font-family: var(--st-fonte-titulo);
font-size: 1.25rem;
line-height: 1.25;
}
.pagina-legal p, .pagina-legal li { color: var(--st-suave); }
.pagina-legal p + p { margin-top: 0.875rem; }
.pagina-legal ul, .pagina-legal ol { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.pagina-legal strong { color: var(--st-tinta); }
.pagina-legal .tabela { overflow-x: auto; margin-block: 1rem; }
.pagina-legal table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.pagina-legal th, .pagina-legal td {
padding: 0.625rem 0.75rem;
border: 1px solid var(--st-linha);
text-align: left;
vertical-align: top;
color: var(--st-suave);
min-width: 9ch;
}
.pagina-legal th { color: var(--st-tinta); font-weight: 600; }
/* A linha do aviso de robô, sob os botões da abertura (peça B4, texto 3). */
.abertura__nota-do-canal { margin-top: 0.875rem; font-size: 0.9375rem; }
.abertura__nota-do-canal a { color: inherit; text-decoration: underline; }
/* Os links de aviso legal no rodapé, acima da linha de razão social. O
rodapé é `.inverso`, então a cor vem do par inverso do tema — e 44px de
alvo é a mesma régua de toque do site institucional. */
.rodape__avisos {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.5rem;
margin-top: 2rem;
}
.rodape__avisos a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--st-inverso-suave);
}
.rodape__avisos a:hover { color: var(--st-inverso-tinta); }