/* ==========================================================================
Piratas — Coquetéis e Parrilla
Identidade: conceito PORTO.
RÉGUA DA PALETA: o MANUAL da agência (PIAU), pág. 58 — a única declaração
normativa do pacote, com CMYK + RGB + HEXA lado a lado. Os arquivos
vetoriais em MARCA/SVG e o PDF do cardápio são artefatos DERIVADOS e
divergem entre si; não são a régua.
Conflito conhecido, registrado: manual #351010/#D8411F · SVG
#3A0606/#DD4319 · PDF do cardápio #3B0505/#DB421A. As três já são a marca
nova — a divergência é da própria entrega da agência. Há pergunta pendente
à PIAU; se ela responder com outro hex, estes valores mudam.
Desde a Story 4.17 (2026-08-14) os SVG do logotipo servidos pelo site
(`public/assets/marca/*.svg`) seguem ESTA MESMA RÉGUA — antes traziam o
#3A0606/#DD4319 da exportação da agência. Os 11 originais em
`Identidade Piratas/PIRATAS/MARCA/SVG/` ficaram DELIBERADAMENTE divergentes:
são a prova documental de que a inconsistência veio da PIAU, e essa prova é
o que sustenta a pergunta pendente acima.
Referência gráfica declarada: rótulos clássicos de rum — peso, procedência, calor.
========================================================================== */
/* ==========================================================================
FONTES AUTO-HOSPEDADAS — Design System (EPIC-008, Story 8.1)
Decisão 3 do dono: servir do NOSSO domínio, nunca do CDN do Google. O
`` para fonts.googleapis.com entrega o IP de todo visitante ao Google
a cada carregamento. Licença SIL OFL 1.1 (public/assets/fontes/OFL.txt),
que permite auto-hospedagem explicitamente.
⚠️ ARQUIVOS VARIÁVEIS — `font-weight` é FAIXA, não valor.
Archivo e Bodoni Moda são fontes variáveis: UM arquivo por subset cobre
todos os pesos pelo eixo `wght`. Declarar `font-weight:400` aqui faria o
navegador entender que o arquivo só serve para o peso 400 e SINTETIZAR os
demais (falso negrito — desenho esticado por algoritmo, não o desenho que o
tipógrafo fez). O sintoma é sutil o bastante para ninguém notar, e é
exatamente o defeito que a fonte variável existe para evitar. Não troque a
faixa por valor único. Ver `fontes/LEIA-ME.md`.
⚠️ `unicode-range` é OBRIGATÓRIO. É ele que faz o navegador escolher entre
`latin` e `latin-ext` — sem ele, baixa os dois SEMPRE, e o recorte de subset
(que existe para economizar banda) vira peso morto. Ranges copiados
literalmente do CSS do Google.
⚠️ Sem `src:local()`, de propósito: uma versão divergente da fonte instalada
na máquina do visitante venceria a nossa, e o site renderizaria diferente
sem ninguém conseguir reproduzir.
========================================================================== */
/* 🔴 REVERTIDO — A BRILLANTE SAIU (2026-08-29). LICENÇA NÃO COMPRADA.
============================================================================
Story 8.16. Em 2026-08-29 a Brillante (Black Foundry) chegou a ocupar o
`--ds-serif` por decisão do dono — é a fonte da identidade visual da casa.
O arquivo que tínhamos era de AVALIAÇÃO, e isto estava provado nos
metadados, não suposto: origem com prefixo `TRY`
(`TRYBrillante-wghtwdth-…ttf`) e nameID 14 (License URL) apontando para
`https://black-foundry.com/licensing/`.
A decisão de orquestração que acompanhou a 8.15 foi "implementar sim,
publicar não", e a guarda `sql/verificar-licenca-fontes.py` foi escrita para
fazer valer isso — ela travou `deploy.sh` exatamente como devia. No mesmo
dia o dono decidiu **não comprar a licença**, e o display voltou para a
**Bodoni Moda** (SIL OFL 1.1, publicável sem restrição), que é o caminho de
volta que a própria 8.15 deixou preparado.
Os `.woff2` de avaliação (2 da Brillante + 4 da Silva Text) SAÍRAM do
repositório junto: a guarda decodifica todo arquivo de fonte da árvore
publicada, referenciado pelo CSS ou não — mantê-los rastreados travaria o
deploy mesmo sem nenhum `@font-face` apontando para eles.
↩️ Se a licença da Brillante vier a ser comprada: ver
`fontes/LEIA-ME.md`, seção "Como voltar à Brillante".
⚠️ A SILVA TEXT SAIU ANTES (2026-08-29) — e o motivo NÃO era licença, era
GLIFO.
----------------------------------------------------------------------------
A trial da Silva Text (Daniel Sabino) chegou a ocupar o `--ds-sans` junto
com aquela troca, e produziu TOFU (retângulo vazado ⊠) em acento, `$`, `@` e
`·`: "CARDÁPIO", "HORÁRIOS", "R$ 11,90", "11h30" saíam com buraco no lugar
da letra. A causa foi MEDIDA nos `.otf` ORIGINAIS da fundição, antes de
qualquer conversão nossa: **828 dos 894 glifos apontam para o `.notdef`**.
A trial libera só 65 caracteres — `, - . 0-9 A-Z a-z`. É trava comercial da
fundição, não defeito do nosso pipeline de subset.
Por isso o texto de interface voltou para a **Archivo** (SIL OFL 1.1,
publicável, 217 caracteres desenhados incluindo todos os acentos do
português) — e continua nela.
============================================================================ */
/* Archivo — interface, rótulos e corpo (ESPEC §2.1). Variável, wght 100–900.
Ocupa o `--ds-sans`. Voltou em 2026-08-29 no lugar da Silva Text, cuja trial
não desenha acento — ver o aviso acima. */
@font-face{
font-family:'Archivo';
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url('fontes/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;
}
@font-face{
font-family:'Archivo';
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url('fontes/archivo-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;
}
/* Bodoni Moda — display (ESPEC §2.1). Variável, wght 400–900 + eixo óptico
opsz 6–96. O DS usa a família de 28 a 96px: sem `font-optical-sizing:auto`
(declarado em `html`, abaixo) o navegador fixa um valor óptico único e o
display grande sai com traço fino demais.
⚠️ A faixa é `400 900`, NÃO `100 900`. A Brillante, que ocupou este lugar
entre a Story 8.15 e a 8.16, era `100 900`; a Bodoni não desenha abaixo de
400. Declarar `100 900` aqui faria o navegador sintetizar os pesos 100–300
por deformação em vez de recusá-los.
⚠️ O eixo `opsz` NÃO é declarado aqui de propósito — quem o aciona é o
`font-optical-sizing:auto` do `html`. Declarar
`font-variation-settings:'opsz'…` FIXARIA o eixo num valor e mataria
justamente o ajuste automático por tamanho. */
@font-face{
font-family:'Bodoni Moda';
font-style:normal;
font-weight:400 900;
font-display:swap;
src:url('fontes/bodoni-moda-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:'Bodoni Moda';
font-style:normal;
font-weight:400 900;
font-display:swap;
src:url('fontes/bodoni-moda-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;
}
/* IBM Plex Mono — dados, códigos, etiquetas (ESPEC §2.1). ESTÁTICA: daí ter
arquivo por peso e `font-weight` com valor único. Só 400 e 500 são usados
pelo DS; um peso 600 exigiria arquivo novo. */
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('fontes/ibm-plex-mono-latin-400.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:'IBM Plex Mono';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('fontes/ibm-plex-mono-latin-ext-400.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;
}
@font-face{
font-family:'IBM Plex Mono';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('fontes/ibm-plex-mono-latin-500.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:'IBM Plex Mono';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('fontes/ibm-plex-mono-latin-ext-500.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;
}
:root{
/* Paleta oficial — pág. 58 do manual */
--vinho:#351010;
--brasa:#D8411F;
/* O brasa da pág. 58 dá 4,47:1 sobre branco e 3,97:1 sobre --creme —
reprova em WCAG AA (4,5) para texto pequeno em TODOS os fundos desta
base. Este tom escurecido (fator 0,90 sobre o normativo) passa em todos:
branco 5,36 · --papel 5,32 · --creme 4,76. Recalculado a partir do
#D8411F novo, NÃO herdado do #C23A15 antigo (que derivava do #DD4319).
Use --brasa em áreas grandes (botão, filete); --brasa-texto em tipografia miúda. */
--brasa-texto:#C23A1C;
--porto:#1D71B8;
--oliva:#6C7A36;
/* O oliva da pág. 58 passa sobre branco (4,69:1) mas REPROVA sobre --creme
(4,17:1) — e o painel pinta body{background:var(--creme)}. Mesmo padrão
do par --brasa/--brasa-texto: o normativo fica para preenchimento e
borda; esta derivada (fator 0,93) é para uso como COR DE TEXTO.
Medido: branco 5,32 · --papel 5,27 · --creme site 4,72 · creme admin 4,84. */
--oliva-texto:#647132;
/* A terceira derivada do brasa: sobre fundo ESCURO, escurecer piora. O
--brasa normativo sobre --vinho dá 3,81:1 — passa a régua de texto GRANDE
(1.4.3, 3:1), que cobre o `.hero h1 em` e o `.prova__n`, mas reprova para
texto miúdo como o link do rodapé (.94rem). Este é o brasa CLAREADO 15%:
4,69:1 sobre --vinho, 5,08 sobre --vinho-escuro, 5,35 sobre o overlay do
lightbox. Use em tipografia miúda sobre fundo escuro. */
--brasa-claro:#DE5E41;
--tinta:#1D1D1B;
--papel:#FEFEFE;
/* Derivadas — neutros quentes, referência de rótulo envelhecido */
--creme:#F4F1EC;
--creme-fundo:#EFEAE1;
--linha:#DDD8D0;
--cinza:#6B6560;
--vinho-claro:#4A1618;
--vinho-escuro:#280A0B;
/* 🟢 TOKENS LEGADOS — MIGRADOS PARA O KIT ADOBE (Story 4.31, 2026-08-31).
Antes desta story: `--serif` = Iowan Old Style, `--sans` = -apple-system.
Eram a SEGUNDA camada tipográfica do projeto — a Story 8.17 trocou só os
`--ds-*`, e o gate dela registrou o resto como adiamento (MED-1). Isto é
o adiamento fechado, com o mesmo desenho de cadeia de TRÊS elos:
kit → LOCAL (Bodoni Moda / Archivo) → genérico.
⚠️ NUNCA termine em genérico sem o elo do meio. A 8.17 mediu que o `serif`
do sistema aqui resolve para TIMES ROMAN (944,015625px ao bit, para a
string de referência dela). O elo local é o que impede uma falha do CDN da
Adobe de cair em Times/Arial — e essa falha seria SILENCIOSA.
⚠️ Os nomes são os que o KIT declara: minúsculos, com hífen, entre aspas
duplas. Capitalizar ("Brillante") não casa nenhuma família e o token cai
calado na reserva, sem erro no console.
⚠️ `--serif` recebe `silva-text`, NÃO `brillante-vf` — e isto é decisão
MEDIDA, não descuido. ESPEC §2.2 fixa a banda de cada família: display
28–96px, interface/corpo 12–24px. Os usos de `--serif` nesta folha caem na
banda de INTERFACE (`h3,h4` mede 18,56px), não na de display. Medido a 4×
na Story 4.31: a Brillante é uma display de alto contraste — a haste fina
some no tamanho de texto, e ela é ~19% mais estreita que a Silva no peso
600. Quem veste DISPLAY aqui é `--ds-serif`, que continua com a Brillante.
Ver `docs/qa/gates/4.31-*.yml`, bloco `decisao_tipografica`. */
--serif:"silva-text",'Bodoni Moda',"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
--sans:"silva-text",Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--largura:1180px;
--raio:2px; /* quase reto — rótulo, não app */
--raio-btn:99px; /* botão é pílula: todos, em todo lugar */
/* Altura do cabeçalho fixo — o menu mobile, as abas do cardápio e o scroll
âncora ancoram nela. Precisa bater com a altura RENDERIZADA, senão o
menu abre descolado e as abas grudam no lugar errado. */
--topo:70px;
--transicao:180ms cubic-bezier(.2,0,.2,1);
/* ------------------------------------------------------------------------
DESIGN SYSTEM — tokens novos (EPIC-008, Story 8.1)
Fonte: docs/design-system/ESPEC-DESIGN-SYSTEM.md §1-3.
⚠️ O prefixo `--ds-` é DELIBERADO e não deve ser removido agora. Enquanto
a migração for incremental (Stories 8.2-8.8), as variáveis antigas
(--vinho, --brasa, --oliva, --porto...) continuam VIVAS e em uso: elas são
a paleta "conceito PORTO" que o site inteiro ainda consome. Tirar o
prefixo hoje colidiria os dois sistemas no mesmo nome e trocaria a paleta
de todo componente de uma vez, sem story que responda por isso.
Renomear é trabalho de uma story de limpeza, depois que 8.2-8.8 migrarem.
⚠️ Nenhuma regra desta folha CONSOME estes tokens ainda — por escopo.
Aplicar tipografia e cor aos componentes é o trabalho das stories
seguintes. Aqui eles só existem para serem consumidos.
------------------------------------------------------------------------ */
/* Paleta — ESPEC §1.1. As cinco nomeadas… */
--ds-breu:#1D1E1C; /* texto principal, sidebar, dock, toast, botão escuro */
--ds-casco:#351010; /* o registro institucional */
--ds-brasa:#D8411F; /* ação e só ação: um por tela */
--ds-oliva:#6C7A36; /* confirma */
--ds-mare:#1D71B8; /* informa */
/* …e as cinco de apoio */
--ds-fundo:#F2EDE3; /* fundo da página */
--ds-mesa:#FFFDF8; /* superfície de cartão, painel, tabela */
--ds-linha:#DED8CD; /* todas as bordas e divisores de 1px */
--ds-apoio:#7A756C; /* texto terciário, rótulos mono, placeholders */
--ds-texto-2:#4A4741; /* texto secundário */
/* Tipografia — ESPEC §2.2. Os nomes com espaço vão entre aspas; o fallback
genérico segura a página enquanto a fonte não chegou.
🟢 AS FONTES DA IDENTIDADE VOLTARAM (2026-08-31, Story 8.17) — agora
LICENCIADAS. O dono confirmou que a licença Adobe está ativa e cobre uso
comercial em site publicado, e forneceu o kit Typekit `wjx2eap`. É a
autorização que faltava em 2026-08-29 e que fez a Story 8.16 reverter.
`--ds-serif` = `brillante-vf` (display) · `--ds-sans` = `silva-text`
(interface, rótulos e corpo). Os nomes são os que o KIT declara —
minúsculos, com hífen — não "Brillante"/"Silva Text". Conferidos contra a
resposta real do kit, não presumidos: trocar a capitalização faz a família
não casar e o token cai calado na reserva.
⚠️ A CADEIA DE RESERVA TEM TRÊS ELOS, e o do meio é o que importa —
decisão do dono, "fonte local de reserva na lista". Sem a fonte LOCAL no
meio, uma falha do kit (CDN fora, licença revogada, CSP errado) cai direto
no genérico do sistema: medido, o `serif` do sistema aqui é TIMES ROMAN. A
Bodoni Moda e a Archivo continuam auto-hospedadas e com `@font-face`
declarado logo acima justamente para segurar essa queda — não foram
removidas, e removê-las quebra a reserva sem sintoma visível até o dia em
que o kit cair.
⚠️ Diferente de 2026-08-29, a Silva Text agora é a LICENCIADA do kit, não
a trial que tinha 828 dos 894 glifos no `.notdef` (tofu em "CARDÁPIO",
"R$"). A cobertura de acento foi conferida por execução nesta story, não
presumida corrigida — ver Story 8.17.
⚠️ O `sans-serif` no fim segue sendo genérico SANS mesmo com a Silva Text
sendo uma serif de texto: o genérico existe para o instante ANTES de
qualquer fonte chegar, e a Archivo (elo do meio) é sans. Trocá-lo por
`serif` faria a página piscar numa serif de sistema e o salto de layout
ficaria visível. */
--ds-serif:"brillante-vf", 'Bodoni Moda', serif; /* display, 28–96px */
--ds-sans:"silva-text", Archivo, sans-serif; /* interface, rótulos e corpo, 12–24px */
--ds-mono:'IBM Plex Mono', monospace; /* dados, códigos, etiquetas */
/* Espaço — ESPEC §3.1, a régua literal 4·8·12·16·24·32·48·64 */
--ds-esp-4:4px;
--ds-esp-8:8px;
--ds-esp-12:12px;
--ds-esp-16:16px;
--ds-esp-24:24px;
--ds-esp-32:32px;
--ds-esp-48:48px;
--ds-esp-64:64px;
/* Raio — ESPEC §3.2. A legenda declara 0/2/4/pill, mas os estilos usam
também 3px (o MAIS FREQUENTE: botão, campo, dropdown, toast) e 6px
(dock). Isso está no arquivo-fonte; não é interpretação nossa. */
--ds-raio-0:0;
--ds-raio-padrao:2px;
--ds-raio-3:3px;
--ds-raio-cartao:4px;
--ds-raio-dock:6px;
--ds-raio-pill:999px;
/* Elevação — ESPEC §3.3, o trio "plano · apoiado · flutuante".
"Plano" não tem variável porque é AUSÊNCIA de sombra: só
`border:1px solid var(--ds-linha)`. As ~15 sombras específicas de
componente (dropdown, dialog, drawer…) entram na story do componente que
as usa, para não encher o :root de variável sem consumidor. */
--ds-elevacao-apoiado:0 1px 2px rgba(29,30,28,.08);
--ds-elevacao-flutuante:0 12px 32px -10px rgba(29,30,28,.35);
}
*,*::before,*::after{ box-sizing:border-box; }
html{
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
scroll-padding-top:calc(var(--topo) + 6px);
/* Eixo óptico do Bodoni Moda (opsz 6–96) — Story 8.1, AC #2/#6.
Declarado UMA vez em escopo global, de onde as stories 8.2+ herdam ao
aplicar --ds-serif. Sem isto o navegador fixa um valor óptico único e o
display grande (o DS usa a família até 96px) sai com traço fino demais.
Não afeta Archivo nem IBM Plex Mono, que não têm eixo óptico. */
font-optical-sizing:auto;
}
/* Mesma transição discreta entre documentos da Story 5.2 no painel. A
navegação continua sendo feita pelos links e formulários normais. */
@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){
animation-duration:.16s;
animation-timing-function:ease-out;
}
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
::view-transition-old(root),::view-transition-new(root){ animation:none; }
/* ⚠️ Story 1.59 — o override do `.carrossel10h__trilho` NÃO mora aqui, e o
motivo é ORDEM DE FONTE. `html{scroll-behavior:auto}` acima casa com outro
ELEMENTO e não alcança o trilho; e uma regra `.carrossel10h__trilho` NESTE
bloco teria a MESMA especificidade da regra do carrossel (linha ~1042) e
PERDERIA por vir antes. Medido: com a regra aqui, o computado sob
`prefers-reduced-motion:reduce` continuava `smooth`. O override correto
está LOGO DEPOIS do bloco do carrossel. */
*,*::before,*::after{
animation-duration:.01ms!important; animation-iteration-count:1!important;
transition-duration:.01ms!important;
}
}
body{
margin:0;
/* Story 8.3 AC #5 — troca só a FAMÍLIA. O §2.2 pede `400 14px/1.6`, mas o
14px do DS é corpo DENTRO DE COMPONENTE do mockup, não corpo de página com
texto corrido (privacidade, cardápio). Baixar o site inteiro para 14px é
regressão de legibilidade que ninguém pediu: fica 16px/1.65.
Divergência DS × site consciente — mudar o tamanho exige decisão do dono. */
font-family:var(--ds-sans);
font-size:16px;
line-height:1.65;
color:var(--tinta);
/* Story 8.12 AC #1 — o fundo da página vira AREIA (`--ds-fundo`, #F2EDE3).
Era `--papel` (#FEFEFE), quase branco. Esta linha é o que faz a home
"parecer outro site": o conteúdo passa a flutuar em cartões `--ds-mesa`
sobre areia, em vez de branco sobre branco. Trocar aqui alcança TODA
seção que não sobrescreve fundo — por isso `.secao--creme` deixou de
existir e `.secao--vinho` sobrou só no happy hour (AC #4, #5, #6). */
background:var(--ds-fundo);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
/* NÃO usar overflow-x:hidden aqui: em vários navegadores isso cria um
contexto de rolagem que MATA o position:sticky do cabeçalho e da barra
de abas. O estouro de largura se resolve na origem (ver .hamburger). */
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
.container{
width:100%;
max-width:var(--largura);
margin-inline:auto;
padding-inline:24px;
}
@media (max-width:640px){ .container{ padding-inline:20px; } }
.pular-para-conteudo{
position:absolute; left:-9999px; top:0; z-index:200;
background:var(--brasa-texto); color:#fff; padding:12px 20px; font-weight:600;
}
.pular-para-conteudo:focus{ left:0; }
:focus-visible{ outline:2.5px solid var(--brasa); outline-offset:3px; }
/* --------------------------------------------------------------------------
Tipografia
-------------------------------------------------------------------------- */
/* Story 8.3 — o bloco `h1,h2,h3,h4` foi PARTIDO de propósito.
O §2.2 do DS especifica h1 (400/.96/-.02em) e h2 (400/1); h3 e h4 do DS são
os de dialog e de sheet, que são do PAINEL e não têm alvo no site público.
Deixá-los herdar 400/.96 seria mudar h3/h4 por acidente — então eles ficam
declarados EXPLICITAMENTE com os valores de sempre (600/1.14/-.015em).
Ver AC #2 e R7 da story. */
h1,h2{
font-family:var(--ds-serif);
font-weight:400;
margin:0 0 .5em;
color:var(--vinho);
}
h3,h4{
font-family:var(--serif);
font-weight:600;
line-height:1.14;
letter-spacing:-.015em;
margin:0 0 .5em;
color:var(--vinho);
}
/* §2.2: h1 é 400/.96/-.02em com max-width:900px. Os degraus de font-size vêm
do §4.2 e são declarados nas @media logo abaixo (AC #3, via (a)). */
h1{
font-size:38px;
line-height:.96;
letter-spacing:-.02em;
max-width:900px;
text-wrap:pretty;
}
/* ⚠️ NÃO reformatar a linha do h2 abaixo nem trocar o clamp por px.
`sql/teste-happy-hour.php:1393` extrai este valor com a regex literal
`/^h2\{ font-size:clamp(([\d.]+)rem/m` para provar que o preço do happy
hour é tipograficamente dominante sobre o h2 (Story 1.13 AC #2). Trocar
para px faz a extração devolver -1 e a PRÉ-CONDIÇÃO falhar — verificado por
execução na 8.3. Por isso o h2 segue a via (b) do AC #3 (rampa clamp entre
os extremos do §4.2: 27px → 40px), enquanto o h1 segue a via (a) (degraus).
Divergência declarada; reconciliar é mandato da 8.9. */
h2{ font-size:clamp(1.6875rem,3.2vw,2.5rem); line-height:1; }
h3{ font-size:clamp(1.2rem,2.2vw,1.45rem); }
/* Os degraus de h1 do §4.2, na régua do DS (decisão 7 do dono): 480/768/1024/
1440. Escritos em `min-width` ASCENDENTE porque os predicados do DS são
CUMULATIVOS (§4.1, armadilha 3 do README): `sm = w < 768` também é verdade
em 390px. Traduzir para faixas disjuntas é a ORDEM que faz o trabalho — a
última @media que casa é a que o navegador aplica.
XS(<480)=38px é o valor base declarado no próprio `h1{}` acima. */
@media (min-width:480px){ h1{ font-size:48px; } }
@media (min-width:768px){ h1{ font-size:62px; } }
@media (min-width:1024px){ h1{ font-size:72px; } }
@media (min-width:1440px){ h1{ font-size:84px; } }
p{ margin:0 0 1.1em; }
/* Rótulo — Story 8.12 AC #8/#12(a).
Era o "filete tipográfico" da marca: sans 700, `.28em`, brasa, com um
`::after` de GRADIENTE atravessando a linha. Passa a ser o rótulo mono do
Design System — `.rot` da prévia aprovada (`home-redesenhada.html:65`):
mono 500/10px, `.16em`, `--ds-apoio`, SEM filete.
Os dois pseudo-elementos de gradiente saíram junto (AC #12a): o DS não tem
decoração em gradiente, e o rótulo agora é etiqueta de dado, não ornamento.
`.rotulo--centro` saiu inteira — o cabeçalho numerado é alinhado à esquerda
por desenho (AC #7), e o grep do R7 provou que só `index.php` a usava.
⚠️ ALCANCE MAIOR QUE A HOME, de propósito: `.rotulo` é usada em 404, sair,
wifi, cardapio, reservas e privacidade. A troca vale nas 7 páginas — é
migração de token do DS, não ajuste local. Ver `nao_verificado`.
⚠️ `.secao--vinho .rotulo` (mais abaixo) NÃO é tocada: é o alvo literal do
mutante M14. Com o happy hour como única `.secao--vinho` restante, aquela
regra passa a ter exatamente um consumidor — e continua declarando
`--brasa-claro` sobre `--vinho` (4,69:1), como a 1.13 auditou. */
/* ⚠️ `font-family` em LONGHAND, aqui e nas outras regras novas desta story.
O atalho `font:500 10px/1 var(--ds-mono)` define a família e RENDERIZA
igual — mas o leitor do `$contrato82` procura a propriedade `font-family`,
e com o atalho ele lê '(AUSENTE)'. Ou seja: a trava ficaria vácua e alguém
poderia devolver o sans amanhã sem nada acusar. Achado por execução ao
rodar a suíte com o atalho no lugar. */
.rotulo{
font-family:var(--ds-mono);
font-weight:500;
font-size:10px;
line-height:1;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--ds-apoio);
display:block;
margin:0 0 14px;
}
.linha-brasa{ width:56px; height:3px; background:var(--brasa); border:0; margin:22px 0; }
/* --------------------------------------------------------------------------
Botões
-------------------------------------------------------------------------- */
/* Story 8.2 — o botão passa a ser o do Design System (ESPEC §5.5, tamanho
MÉDIO). Mudança visual grande e DE PROPÓSITO (decisão 1: o site migra):
era pílula (`--raio-btn`, 99px) com padding 15px/30px, 48px de altura,
borda 1.5px e peso 700; passa a 3px de raio, 44px, borda 1px e peso 600.
🔒 CAIXA ALTA — DECISÃO DO DONO, 2026-08-26. NÃO "CORRIGIR".
O `text-transform:uppercase` + `letter-spacing:.14em` NÃO vêm do DS: o @qa
demonstrou no gate da 8.2 que o mockup usa caixa de FRASE nos botões. O
dono foi informado da divergência e optou por manter a caixa alta, que é a
identidade atual do Piratas. É escolha registrada, não descuido herdado —
quem quiser mudar precisa de decisão dele, não de iniciativa própria.
(A trava está na suíte: ver "Story 8.2 (pós-gate)" em teste-local.php.) */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
font-family:var(--ds-sans);
font-size:13px; font-weight:600; line-height:1;
letter-spacing:.14em; text-transform:uppercase;
padding:0 18px;
border:1px solid transparent;
border-radius:var(--ds-raio-3);
text-decoration:none;
cursor:pointer;
transition:background var(--transicao),color var(--transicao),
border-color var(--transicao),transform var(--transicao);
min-height:44px; /* alvo de toque — §5.5 médio */
/* Padronização: todo botão tem a MESMA altura e o mesmo respiro, seja no
menu, no hero ou no formulário. Sem isso o do menu ficava mais baixo. */
box-sizing:border-box;
white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
/* Variante PRIMÁRIA do §5.5. ⚠️ REGRESSÃO CONSCIENTE DE CONTRASTE — leia
`docs/design-system/README.md`, seção "decisão 2", ANTES de "corrigir".
Era `--brasa-texto` (#C23A1C, derivada escurecida criada na Story 4.16
justamente para passar em WCAG AA). O DS pede o brasa PURO (#D8411F), que
sobre branco dá 4,47:1 — reprova AA para texto pequeno por pouco (mínimo
4,5:1). O dono foi informado da medição e optou pela fidelidade ao design.
Não é descuido nem bug: reverter é decisão dele, não de quem passar aqui.
#B93417 é o hover normativo do brasa (§5.5, linha "Primário"). Não vira
token: é derivada pontual, mesmo padrão das Stories 4.16/4.17. */
.btn--brasa{ background:var(--ds-brasa); color:var(--ds-mesa); border-color:var(--ds-brasa); }
.btn--brasa:hover{ background:#B93417; border-color:#B93417; }
/* Órfã: nenhuma página a usa (grep confirmado na Story 8.2). Mantida intacta
— o §5.5 não tem variante "vinho" e remover classe não é escopo da 8.2. */
.btn--vinho{ background:var(--vinho); color:#fff; border-color:var(--vinho); }
.btn--vinho:hover{ background:var(--vinho-claro); }
/* Variante CONTORNO do §5.5. */
.btn--linha{ background:var(--ds-mesa); color:var(--ds-breu); border-color:var(--ds-breu); }
.btn--linha:hover{ background:var(--ds-fundo); }
/* SEM equivalente no §5.5: é o botão sobre foto escura do hero, e o DS não
tem variante sobre imagem. Preservado como está — lacuna do DS registrada
na Story 8.2 AC #3, não inventada aqui. */
.btn--claro{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--claro:hover{ background:#fff; color:var(--vinho); border-color:#fff; }
.btn--bloco{ width:100%; }
/* Variante DESATIVADO do §5.5 — cor declarada no lugar do `opacity:.5`, que
apagava o rótulo junto com o fundo. #A9A29A é o literal da espec. */
.btn[disabled],.btn[aria-disabled="true"]{
background:var(--ds-fundo); border-color:var(--ds-linha); color:#A9A29A;
cursor:not-allowed; pointer-events:none;
}
/* --------------------------------------------------------------------------
Cabeçalho
-------------------------------------------------------------------------- */
/* Sem viewport-fit=cover (ver o em layout.php), o Safari entrega a
página já dentro da área segura. Ainda assim o topo do cabeçalho é a
região mais exposta da tela — barra de status, barra do app que abriu o
link, notch. Por isso a logo NÃO fica colada no limite:
a reserva de topo abaixo garante folga suficiente para ela sobreviver
mesmo quando algo do sistema cobre os primeiros pixels da página. */
.cabecalho{
position:sticky; top:0; z-index:100;
background:rgba(54,14,15,.97);
backdrop-filter:saturate(160%) blur(10px);
border-bottom:1px solid rgba(255,255,255,.1);
}
.cabecalho__interno{
display:flex; align-items:center; justify-content:space-between;
gap:20px;
min-height:var(--topo);
}
/* Story 1.70: .idiomas tem margin-left:auto no desktop. Isso já mantém o
seletor à direita; o menu deve ficar junto da marca mesmo quando o seletor
não existe (Reservas, Privacidade e demais páginas monolíngues). */
@media (min-width:901px){
.cabecalho__interno{ justify-content:flex-start; }
}
@media (max-width:900px){
/* No celular a logo e o hambúrguer descem: o padding empurra os DOIS para
baixo (estão no mesmo flex), afastando-os da barra de status do aparelho.
Vem de padding-top, não de min-height, senão o align-items:center
redistribuiria o espaço e a logo continuaria colada no limite. */
.cabecalho__interno{ padding-top:22px; padding-bottom:8px; }
/* Valor de partida, usado só até o JS medir a altura real do cabeçalho
(ver layout.php). 70 de min-height + 22 + 8 de padding + borda ≈ 101. */
:root{ --topo:101px; }
}
.marca{
display:flex; align-items:center; gap:11px;
text-decoration:none; color:#fff; flex:none;
}
/* Logotipo oficial — proporção 2,5:1, altura fixa para não distorcer. */
.marca__logo{ height:46px; width:auto; display:block; }
@media (max-width:640px){ .marca__logo{ height:37px; } }
.nav{ display:flex; align-items:center; gap:4px; }
/* 🔴 `:not(.btn)` NÃO É ENFEITE — é o que faz o botão do menu ser um BOTÃO.
===========================================================================
O dono abriu o site e viu o "RESERVAR MESA" do menu como PÍLULA, enquanto o
do hero era reto. Não era cache: `.nav a` (0,1,1) VENCE `.btn` (0,1,0) por
ESPECIFICIDADE, e sobrescrevia CINCO propriedades do contrato do componente:
border-radius .btn 3px → .nav a 99px (a pílula que ele viu)
font-size .btn 13px → .nav a .78rem
padding .btn 0 18px → .nav a 10px 16px
letter-spacing .btn .14em → .nav a .13em
color .btn--brasa → .nav a rgba(255,255,255,.82)
var(--ds-mesa) (branco TRANSLÚCIDO
sobre brasa: contraste)
O comentário abaixo já dizia, desde a 1.x, que "padding e altura vêm do
.btn". Era intenção, não fato: o CSS dizia o contrário e ninguém mediu. A
8.2 migrou `.btn` para `--ds-raio-3` e nunca tocou `.nav a`, então o botão
do menu ficou com o raio antigo — e passou por 3 gates e 2 deploys, porque
toda asserção do epic perguntava "o que `.btn` DECLARA?" e nenhuma perguntou
"o que o navegador APLICA ao botão que está na página?".
⚠️ NÃO troque por uma regra `.nav .btn{ border-radius:… }` que "devolva" o
valor: isso corrige o VETOR (uma propriedade) e deixa a CLASSE viva — a
próxima propriedade que o DS mudar volta a divergir em silêncio. `:not(.btn)`
tira o botão do alcance da regra de LINK, que é a correção estrutural: link
de menu é link, botão é botão.
Especificidade: `:not()` não conta, mas o `.btn` de dentro conta — `.nav
a:not(.btn)` é (0,2,1), ainda maior que `.btn`. Isso é correto e desejado:
ela precisa continuar vencendo o `a{}` genérico para os links comuns do
menu. O que muda é que ela NÃO ALCANÇA MAIS o botão. */
.nav a:not(.btn){
color:rgba(255,255,255,.82); text-decoration:none;
font-size:.78rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
padding:10px 16px; border-radius:var(--raio-btn);
transition:color var(--transicao),background var(--transicao);
}
.nav a:not(.btn):hover,.nav a:not(.btn)[aria-current="page"]{ color:#fff; background:rgba(255,255,255,.09); }
/* No intervalo estreito entre desktop e menu mobile, os cinco links ainda
precisam deixar espaço para o seletor de idioma à direita. */
@media (min-width:901px) and (max-width:960px){
.nav a:not(.btn){ padding-inline:10px; }
}
/* Só a margem: padding e altura vêm do .btn, para o botão do menu ficar
idêntico ao do hero e ao do formulário. Agora isto é VERDADE — antes do
`:not(.btn)` acima era só intenção escrita. */
.nav .btn{ margin-left:10px; }
.hamburger{
display:none; background:none; border:0; cursor:pointer;
padding:10px;
width:46px; height:46px;
/* SEM margin-right negativa: ela alinhava o ícone com a margem do texto,
mas empurrava o botão 10px para FORA da tela — o documento ficava mais
largo que o viewport e a página inteira deslocava no celular.
O respiro visual vem do padding, que já está dentro da caixa. */
margin-right:-10px;
}
@media (max-width:900px){
/* No mobile o negativo sai de vez e o container ganha o espaço de volta,
mantendo o alinhamento sem estourar a largura. */
.hamburger{ margin-right:0; }
}
.hamburger span{
display:block; width:24px; height:2px; background:#fff; margin:5px auto;
transition:transform var(--transicao),opacity var(--transicao);
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:900px){
.hamburger{ display:block; }
.nav{
position:fixed; inset:var(--topo) 0 auto 0;
flex-direction:column; align-items:stretch; gap:0;
background:var(--vinho);
padding-inline:20px; /* o vertical é animado abaixo */
border-bottom:1px solid rgba(255,255,255,.12);
/* FECHADO: fora da tela de verdade.
Antes usava translateY(-115%), que empurrava o painel para CIMA do
cabeçalho — e o botão "Reservar mesa" ia parar sobre a barra de status
do iPhone, visível. Escondido pelo transform ele ainda ocupava espaço
e capturava toques.
Agora: altura zero, sem conteúdo visível e sem receber toque. */
max-height:0;
overflow:hidden;
visibility:hidden;
padding-block:0;
border-bottom-width:0;
transition:max-height 240ms cubic-bezier(.2,0,.2,1),
padding-block 240ms cubic-bezier(.2,0,.2,1),
visibility 0s linear 240ms;
}
.nav[data-aberto="true"]{
max-height:calc(100vh - var(--topo));
overflow-y:auto;
visibility:visible;
padding-block:14px 26px;
border-bottom-width:1px;
transition:max-height 240ms cubic-bezier(.2,0,.2,1),
padding-block 240ms cubic-bezier(.2,0,.2,1),
visibility 0s;
}
.nav a{ padding:15px 4px; border-bottom:1px solid rgba(255,255,255,.09); font-size:.9rem; }
.nav .btn{ margin:16px 0 0; }
}
/* --------------------------------------------------------------------------
Hero
-------------------------------------------------------------------------- */
.hero{
position:relative;
background:var(--vinho);
color:#fff;
padding:clamp(80px,13vw,140px) 0 clamp(70px,10vw,110px);
overflow:hidden;
}
.hero::before{ /* textura sutil de papel de rótulo */
content:""; position:absolute; inset:0;
background:
radial-gradient(ellipse at 22% 8%,rgba(219,66,25,.20),transparent 58%),
radial-gradient(ellipse at 88% 92%,rgba(38,108,178,.14),transparent 55%);
pointer-events:none;
}
/* Hero com fotografia de fundo */
.hero--foto::before{
background:
linear-gradient(100deg,rgba(40,10,11,.95) 0%,rgba(54,14,15,.88) 45%,rgba(54,14,15,.66) 100%),
radial-gradient(ellipse at 78% 88%,rgba(219,66,25,.26),transparent 58%);
z-index:1;
}
.hero__fundo{
position:absolute; inset:0; z-index:0;
display:block; pointer-events:none;
}
.hero__fundo img{
width:100%; height:100%; object-fit:cover; object-position:center 42%;
filter:saturate(.82) contrast(1.04);
}
.hero__conteudo{ position:relative; z-index:2; max-width:760px; }
.hero h1{ color:#fff; margin-bottom:20px; text-wrap:balance; }
/* --brasa normativo sobre --vinho dá 3,81:1. É texto GRANDE (h1), então a
régua aplicável é a 1.4.3 para large-scale (3:1), não a de texto miúdo.
Idem .prova__n e .lightbox__fechar. Miúdo sobre escuro usa --brasa-claro. */
.hero h1 em{ color:var(--brasa); font-style:normal; }
.hero__texto{
font-family:var(--ds-serif);
font-size:clamp(1.08rem,2.1vw,1.32rem);
line-height:1.62;
color:rgba(255,255,255,.8);
max-width:56ch;
margin-bottom:34px;
}
.hero__acoes{ display:flex; flex-wrap:wrap; gap:13px; }
.hero__status{
display:inline-flex; align-items:center; gap:9px;
font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
padding:8px 16px; margin-bottom:26px;
border:1px solid rgba(255,255,255,.26); border-radius:99px;
color:rgba(255,255,255,.9);
}
.hero__status::before{
content:""; width:7px; height:7px; border-radius:50%;
background:var(--cinza); flex:none;
}
/* #5FBF6A é cor de ESTADO (semáforo "aberto agora"), não de marca: não duplica
variável do :root e ficou fora da varredura da paleta por decisão do @po
(Story 4.16, AC #7) — trocar por --oliva aproximaria os dois estados
exatamente na dimensão que os distingue. Bolinha de 7×7px, não texto. */
.hero__status[data-aberto="1"]::before{
background:#5FBF6A; box-shadow:0 0 0 3px rgba(95,191,106,.24);
}
/* --------------------------------------------------------------------------
Seções
-------------------------------------------------------------------------- */
.secao{ padding:clamp(64px,9vw,104px) 0; }
/* Story 8.12 AC #4/#5 — `.secao--creme` FOI REMOVIDA. Ela pintava a seção
"Da carta" de creme; agora essa seção usa o fundo areia da página e põe o
conteúdo em cartões. A classe saiu também do markup (`index.php`), e o grep
do R7 confirmou por execução que NENHUMA outra página a usava.
`.secao--vinho` SOBREVIVE, mas passa a ter um único consumidor: a seção do
happy hour (AC #6). A prova social deixou de usá-la (AC #5/#9). A regra fica
byte a byte como estava — é o alvo literal do mutante M14 via
`.secao--vinho .rotulo`, e reformatá-la converteria um mutante que MORRE em
"sobrevivente por alvo não encontrado". */
.secao--vinho{ background:var(--vinho); color:#fff; }
.secao--vinho h2,.secao--vinho h3{ color:#fff; }
/* Story 8.12 AC #7 — o cabeçalho de seção deixa de separar por espaço vazio
(`margin-bottom:46px`) e passa a ser fechado por RÉGUA: número mono + h2 +
nota, alinhados por `baseline` e sublinhados por um filete de 1px.
É o padrão `.cab` da prévia aprovada (`home-redesenhada.html:61`).
`max-width:640px` sai: com a nota à direita (`margin-left:auto`) o cabeçalho
precisa da largura do container para a régua atravessar a seção inteira. */
.secao__cabecalho{
display:flex; flex-wrap:wrap; align-items:baseline;
gap:var(--ds-esp-12);
border-bottom:1px solid var(--ds-linha);
padding-bottom:14px;
margin-bottom:var(--ds-esp-24);
}
/* O número da seção — o mono do DS finalmente com consumidor no site público.
Auto-hospedado desde a 8.1, sem uso até esta story. */
.secao__n{
font-family:var(--ds-mono);
font-weight:500;
font-size:11px;
line-height:1;
letter-spacing:.16em;
color:var(--ds-brasa);
}
.secao__cabecalho h2{ margin:0; }
/* A nota curta que empurra para a direita e fecha a régua. Opcional por seção:
onde não existe, o h2 ocupa a linha sozinho e a régua fecha igual. */
.secao__nota{
margin:0 0 0 auto; max-width:380px;
font-family:var(--ds-sans);
font-weight:400;
font-size:13px;
line-height:1.5;
color:var(--ds-apoio);
}
/* O parágrafo de abertura sai de dentro da régua: `flex-basis:100%` o joga
para a linha de baixo, sob o filete, em vez de disputar a baseline com o
h2. Sem isto o texto de "A casa" empurraria a régua para o meio da frase. */
.secao__cabecalho .secao__texto{ flex-basis:100%; margin:var(--ds-esp-16) 0 0; }
/* Cartão de conteúdo — Story 8.12 AC #2.
O `.cartao` da prévia (`:68`), adaptado ao vocabulário do projeto. Existe
para o que NÃO tem componente próprio: hoje, o bloco de reserva da última
seção. `.pilar`, `.destaque`, `.prova` e `.vitrine__item` repetem estes
mesmos valores dentro das próprias regras — cada um tem estado extra
(hover, grade, variante escura) que não caberia numa classe só, e o
`$contrato82` trava os quatro separadamente.
Padding progressivo 18 → 22 → 26px, breakpoints do DS (AC #13). */
.cartao{
background:var(--ds-mesa);
border:1px solid var(--ds-linha);
border-radius:var(--ds-raio-0);
padding:18px;
}
@media (min-width:768px){ .cartao{ padding:22px; } }
@media (min-width:1024px){ .cartao{ padding:26px; } }
/* Story 8.3 AC #4 — o "lead" do §2.2. Não existe classe `.lead` no projeto: o
papel de parágrafo de abertura é exercido por `.secao__texto`.
`leadSize` do §4.2 é 15px em XS e 17px daí para cima (a @media logo abaixo).
⚠️ As duas variantes sobre fundo ESCURO (`.secao--vinho .secao__texto` e
`.secao__texto--hh`) sobrescrevem a cor DEPOIS desta regra e continuam
intocadas: `--ds-texto-2` (#4A4741) sobre `--vinho` seria quase invisível
(R6 da story). */
.secao__texto{
font-size:15px;
font-weight:400;
line-height:1.6;
color:var(--ds-texto-2);
text-wrap:pretty;
}
@media (min-width:480px){ .secao__texto{ font-size:17px; } }
.secao--vinho .secao__texto{ color:rgba(255,255,255,.72); }
/* Story 1.13 — correção do LOW-1 herdado do gate da 1.10.
`.rotulo` usa --brasa-texto (#C23A1C), calibrado para fundo CLARO. Sobre
--vinho (#351010) dá 3,18:1 e REPROVA AA: .72rem (~11,5px) com weight 700
não alcança a régua de "texto grande" do WCAG (≥14pt bold ≈ 18,66px), então
o mínimo aplicável é 4,5, não 3.
--brasa-claro (#DE5E41) sobre --vinho: 4,69:1. PASSA. É o mesmo par que a
1.10 já auditou para `.hh__de` neste fundo — reuso de cor medida, não cor
nova. Medido pela fórmula WCAG, não estimado.
Seletor de DESCENDÊNCIA de propósito: alcança as duas instâncias de hoje
(happy hour e "Quem já atracou") e qualquer `.rotulo` que nasça dentro de
`.secao--vinho` amanhã. Correção de classe, não de vetor. */
.secao--vinho .rotulo{ color:var(--brasa-claro); }
/* Pilares — as camadas do porto.
Story 8.12 AC #3: a grade DEIXA de simular divisória com `gap:2px` sobre um
fundo `--linha` (técnica em que o "traço" é o fundo aparecendo pela fresta)
e passa a ser grade de CARTÕES independentes, cada um com borda própria e
`gap:16px` — o `.grade`/`.cartao` da prévia (`:68`, `:71`).
A diferença não é cosmética: com `gap:2px` os quatro pilares formavam UM
bloco fatiado; com cartão, cada pilar é uma superfície `--ds-mesa` sobre a
areia da página. É o efeito que o dono aprovou na prévia. */
.pilares{
display:grid; gap:var(--ds-esp-16);
grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
}
/* AC #2 — cartão do DS: superfície `--ds-mesa`, borda de 1px `--ds-linha`,
raio 0 e SEM sombra ("plano" do §3.3 é ausência de sombra, não sombra
fraca). O padding cresce 18 → 22 → 26px nos breakpoints do DS (AC #10 da
prévia, AC #13 da story: a régua nova usa 480/768/1024/1440). */
.pilar{
background:var(--ds-mesa);
border:1px solid var(--ds-linha);
border-radius:var(--ds-raio-0);
padding:18px;
}
@media (min-width:768px){ .pilar{ padding:22px; } }
@media (min-width:1024px){ .pilar{ padding:26px; } }
/* O número do pilar acompanha o número da seção: mono, brasa, `.16em`.
Era serif 700 `.92rem` — a prévia usa mono aqui (`.pilar__n`, `:73`), e
manter serif deixaria dois sistemas de numeração convivendo na mesma tela. */
.pilar__n{
font-family:var(--ds-mono);
font-weight:500;
font-size:10px;
line-height:1;
letter-spacing:.16em;
color:var(--ds-brasa);
display:block; margin-bottom:var(--ds-esp-16);
}
.pilar h3{ font-size:1.16rem; margin-bottom:9px; }
.pilar p{ color:var(--ds-texto-2); font-size:.95rem; margin:0; }
/* Story 1.42 — o acordeão de perguntas de `/eventos.php`.
Herda a mesma superfície/borda/raio do `.pilar` acima: é o mesmo cartão do
DS, empilhado em coluna em vez de grade. O `` é nativo (padrão que
`cardapio.php:155` já usa) — abre sem JS, e o texto fechado continua no HTML
para o rastreador ler, que é o que o `FAQPage` exige. */
.faq{ display:flex; flex-direction:column; gap:var(--ds-esp-16); }
.faq__item{
background:var(--ds-mesa);
border:1px solid var(--ds-linha);
border-radius:var(--ds-raio-0);
padding:18px;
}
@media (min-width:768px){ .faq__item{ padding:22px; } }
/* 44px de alvo de toque (a régua de acessibilidade que a 8.23 fixou): o
`min-height` no `` garante a área clicável mesmo na pergunta de uma
linha só. `list-style:none` + `::-webkit-details-marker` tiram o triângulo
padrão nos dois motores; o `+`/`−` abaixo o substitui. */
.faq__p{
display:flex; align-items:center; justify-content:space-between; gap:12px;
min-height:44px;
font-size:1.05rem; font-weight:600;
cursor:pointer; list-style:none;
}
.faq__p::-webkit-details-marker{ display:none; }
.faq__p::after{
content:'+';
font-family:var(--ds-mono); color:var(--ds-brasa);
font-size:1.2rem; line-height:1; flex:none;
}
.faq__item[open] .faq__p::after{ content:'−'; }
.faq__r{
color:var(--ds-texto-2); font-size:.95rem;
margin:12px 0 0;
}
/* Destaques do cardápio */
.destaques{
display:grid; gap:26px;
grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
}
/* Story 8.12 AC #2 — o cartão de destaque já TINHA borda; o que muda é a
superfície: `--papel` (#FEFEFE, quase branco) → `--ds-mesa` (#FFFDF8), e
`--linha` → `--ds-linha`. Sobre a areia da página o contraste da moldura
passa a existir de fato; antes era branco sobre branco. */
.destaque{
background:var(--ds-mesa);
border:1px solid var(--ds-linha);
border-radius:var(--ds-raio-0);
padding:28px 26px;
display:flex; flex-direction:column;
transition:border-color var(--transicao),transform var(--transicao);
}
.destaque:hover{ border-color:var(--brasa); transform:translateY(-3px); }
.destaque--foto{ padding:0; overflow:hidden; }
.destaque--foto .destaque__texto{ padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; }
.destaque__img{
width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
transition:transform 400ms cubic-bezier(.2,0,.2,1);
}
.destaque--foto:hover .destaque__img{ transform:scale(1.04); }
/* Story 1.51 AC #2 — a foto do café de `/cowork.php`, ILUSTRAÇÃO ACESSÓRIA.
O dono a viu ocupando a tela inteira no telefone e pediu que diminuísse.
🔴 É AQUI QUE A REDUÇÃO ACONTECE, e não no `width` do ``. A regra acima
é `.destaque__img{ width:100% }` — o atributo `width` do HTML é razão de
aspecto para reserva de espaço (CLS), não largura renderizada. Reduzi-lo
sozinho não move um pixel na tela; medido na validação `@po` da story.
`min(320px, 62%)` cobre os dois lados da faixa que o AC #2 fixou: em 390px o
62% deixa respiro nas laterais (não é full-bleed), e em desktop o teto de
320px fica abaixo dos ~340px exigidos. `margin-inline:0` mantém a foto
alinhada à esquerda, junto do texto do pilar, em vez de centrada e solta. */
.destaque--cafe{ max-width:min(320px,62%); margin-inline:0; }
/* Story 1.61 — AS FOTOS DE `/almoco.php` VOLTARAM PARA O CONTAINER.
🔴 ISTO SUBSTITUI A `.faixa-pratos` DA STORY 1.58, POR DECISÃO DO DONO em
2026-09-16, depois de ver a faixa no ar: *"nao quero as imagens ocupando
toda a horizontal. quero que mantenha o padrao das outras paginas."*
⚠️ A CLASSE ANTIGA FOI REMOVIDA INTEIRA, não deixada "por segurança". CSS
órfão apontando para um mecanismo que não existe mais foi precisamente o que
fez a 1.59 custar uma story — o resíduo do carrossel. Se `.faixa-pratos`
ficasse aqui, o próximo a ler acharia que a página ainda sangra.
🔴 HISTÓRICO DA LARGURA, porque esta página já mudou de ideia DUAS vezes e o
`srcset` mentiu nas duas:
1ª · 1.58 draft — container, `sizes` 350px estimado ❌ mentira
2ª · 1.58 no ar — faixa 100vw, `sizes` 33vw (recusada pelo dono)
3ª · 1.61 AGORA — container de novo, `sizes` 250px ← a conta está no HTML
São DUAS grades, e desde 2026-09-16 as duas são **1:1** — ver o bloco da
`.grade-pratos__img` para o custo dessa decisão do dono:
· `.grade-pratos` — as 3 fotos do cardápio, 1:1 recortado no CSS
· `.pratododia` — as 6 do prato do dia, 1:1 recortado no arquivo
🔴 `gap:16px` E NÃO 18px — ALINHADO COM `.pratododia` EM 2026-09-16, e isto
é parte do "mesmo tamanho" que o dono pediu, não arrumação estética. Com
18px aqui e 16px lá, a coluna desta grade media 225,33px e a de baixo
226,67px no mesmo container de 760px: 1,34px de diferença, invisível a olho
mas suficiente para as fotos NÃO serem do mesmo tamanho na medida. Medido no
navegador antes e depois. Se alguém devolver 18px aqui, as duas grades
voltam a divergir e a asserção de largura idêntica acusa. */
.grade-pratos{
display:grid; gap:16px;
grid-template-columns:repeat(3,1fr);
}
/* 🔴 `aspect-ratio:1` — A PROTEÇÃO ANTERIOR SAIU POR DECISÃO DO DONO, EM
2026-09-16, E ISSO PRECISA ESTAR ESCRITO AQUI PORQUE ESTE COMENTÁRIO DIZIA
O CONTRÁRIO ATÉ HOJE. Pedido literal: *"coloque 3 imagens de pratos do
cardapio no mesmo tamanho da imagem de pratos do dia"*. As 6 de baixo são
1:1; "mesmo tamanho" só fecha se estas 3 também forem.
O QUE ESTE COMENTÁRIO AFIRMAVA ATÉ AGORA, e passou a ser falso: que
`aspect-ratio:auto` FICA porque qualquer razão fixa cortaria a borda com o
papel de mesa da marca PAULISTA. O custo é REAL e continua de pé — o que
mudou é que o dono o aceitou depois de informado. Registro que mente é pior
que registro ausente, então o número entra aqui em vez de sumir:
almoco-parmegiana 1600×1066 → 1066×1066 perde 33,4% da área
almoco-prato-feito 1200×800 → 800×800 perde 33,3% da área
almoco-milanesa 1600×1066 → 1066×1066 perde 33,4% da área
É corte de 16,7% por lado, CENTRAL. As três foram ABERTAS e olhadas nos três
enquadramentos (Center, West, East) antes desta linha existir: em Center o
prato fica inteiro nas três e o papel PAULISTA sobrevive nas três — na
milanesa e no prato feito ele fica no rodapé do quadro, na parmegiana à
direita. East foi recusado na parmegiana (corta o filé). `object-position`
default (center) é o que as medições aprovaram — não mexer sem reabrir.
🔴 O RECORTE É NO CSS, NÃO NO ARQUIVO — e esta é a diferença que separa
estas 3 das 6 de baixo, onde a 1.61 recortou o binário. O motivo é
`almoco-prato-feito`: `/cowork.php` a consome VIVA no `$carrossel`, com
`w=800 h=533` HARDCODED e `href` para o arquivo grande no lightbox.
Recortar o binário mentiria naqueles atributos (CLS) e entregaria uma
ampliação quadrada numa página que declara 3:2 — quebrando uma página que
esta story não pode tocar. `almoco-parmegiana` e `almoco-milanesa` hoje só
vivem aqui, mas recortar 2 de 3 daria dois tratamentos para a mesma grade.
Com `object-fit:cover`, o corte acontece no render e o arquivo continua
verdadeiro para quem o reusa. */
.grade-pratos__item{ margin:0; overflow:hidden; }
.grade-pratos__img{
width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block;
transition:transform 500ms cubic-bezier(.2,0,.2,1);
}
.grade-pratos__item:hover .grade-pratos__img{ transform:scale(1.04); }
/* 🔴 AS 6 FOTOS DE "PRATOS DO DIA" — GRADE PRÓPRIA, MESMA RAZÃO DA DE CIMA
DESDE 2026-09-16, MAS POR CAMINHO DIFERENTE. Estas 6 são QUADRADAS DE ORIGEM
(1200×1200 depois do recorte central que a 1.61 aplicou no ARQUIVO), então
`aspect-ratio:1` é a proporção real do binário e não corta pixel nenhum no
render. Nas 3 de cima o 1:1 é o CSS que recorta, porque o arquivo continua
3:2 — `almoco-prato-feito` é reusada por `/cowork.php` e não pode mudar de
forma no disco.
⚠️ AS DUAS CLASSES CONTINUAM SEPARADAS, e agora o motivo é OUTRO. Antes era
a proporção exibida (3:2 × 1:1); hoje as duas exibem 1:1 e o que as separa é
a ORIGEM do recorte (CSS × arquivo) e o `sizes`, que é conta própria de cada
uma. Fundi-las faria `.grade-pratos` herdar a promessa de "o arquivo já é
quadrado", que é falsa para as 3 — e é essa promessa que a asserção dos 18
arquivos quadrados cobra. */
.pratododia{
display:grid; gap:16px;
grid-template-columns:repeat(3,1fr);
}
/* 🔴 O ESPAÇO QUE SEPARA OS DOIS BLOCOS DA SEÇÃO 01 (pedido do dono,
2026-09-16): *"aumente o espaco entre as imagens dos pratos do cardapio e o
titulo pratos do dia"*.
⚠️ O VALOR ANTERIOR ERA ZERO, MEDIDO — não "apertado", zero. Os dois blocos
estão em `.container` irmãos; `h2` tem `margin:0 0 .5em` (sem margem
SUPERIOR) e a `.grade-pratos` fecha sem margem inferior. Nada estava
quebrado: faltava regra.
🔴 64px E NÃO 38px (o `mt-l`), e a escolha tem critério: dentro de cada
bloco o respiro é 38px (título → fotos). Separar os DOIS blocos com os
mesmos 38px deixaria a hierarquia plana — a distância entre um título e as
fotos que ele nomeia ficaria igual à distância entre duas seções. 64px
coloca a separação externa acima da interna, que é o que faz "Pratos do
Dia" ser lido como começo de bloco novo em vez de legenda do de cima.
⚠️ Vale nos dois tamanhos de tela: no telefone as duas grades ficam em 2
colunas e a confusão que o dono relatou seria a MESMA, ou pior, porque os
blocos empilham mais perto. Sem media query aqui de propósito. */
.pratododia__titulo{ margin-top:64px; }
.pratododia__item{ margin:0; overflow:hidden; }
.pratododia__img{
width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block;
transition:transform 500ms cubic-bezier(.2,0,.2,1);
}
.pratododia__item:hover .pratododia__img{ transform:scale(1.04); }
/* No telefone as DUAS grades viram 2 colunas, e a de cima mudou em 2026-09-16.
⚠️ ATÉ HOJE `.grade-pratos` caía para UMA coluna, e o motivo escrito aqui era
a proporção: três fotos 3:2 lado a lado dariam ~110px de ALTURA num container
de 390px, ilegível. Esse motivo CAIU junto com o 3:2 — em 1:1 a foto tem a
altura da largura, e o mesmo raciocínio que põe as 6 de baixo em 2 colunas
("a foto quadrada ainda lê bem a ~180px") vale igualmente para estas 3.
Mantê-las em coluna única daria três fotos gigantes em cima e seis pequenas
embaixo — o oposto do "mesmo tamanho" que o dono pediu.
⚠️ Em 2 colunas a terceira foto cai sozinha na segunda linha. É aceito: são
3 itens numa grade par, e a alternativa (3 colunas a ~120px) é a ilegibilidade
que o texto antigo já recusava. */
@media (max-width:640px){
.grade-pratos{ grid-template-columns:repeat(2,1fr); }
.pratododia{ grid-template-columns:repeat(2,1fr); }
}
/* O `:hover` de escala é enfeite, não informação — sai sob reduced-motion,
como o resto do site faz. */
@media (prefers-reduced-motion:reduce){
.grade-pratos__img,
.pratododia__img{ transition:none; }
.grade-pratos__item:hover .grade-pratos__img,
.pratododia__item:hover .pratododia__img{ transform:none; }
}
/* Story 1.60 — AS 4 FOTOS DO PILAR 10h VIRARAM GRADE (`/cowork.php`, seção 01).
⚠️ ISTO SUBSTITUI O CARROSSEL das Stories 1.56/1.59, por DECISÃO DO DONO em
2026-09-16, depois de ver renderizado: "quero que vc coloque as imagens do
café, notebook, etc no mesmo formato que estão as imagens da casa".
🔴 O QUE ELE RECUSOU, e por que o carrossel produzia exatamente isso. O
trilho era `max-width:min(340px,62%)` com `flex:0 0 100%` por item — UMA foto
por vez, numa coluna estreita. E `.carrossel10h__img` com aspect-ratio livre
devolvia a proporção REAL de cada arquivo, o que num retrato de 533×799
dentro de 340px de largura dava ~510px de altura: o cartão altíssimo e a
faixa vazia embaixo que ele fotografou. Cada uma dessas três decisões estava
bem-argumentada na 1.56 — e as três juntas davam o formato que ele reprovou.
🔴 A REFERÊNCIA É A SEÇÃO 03 ("O espaço"), que ele apontou como o certo.
Aquela seção não tem CSS próprio: ela usa `.destaques` + `.destaque__img`
(linhas ~967 e ~987). É por isso que ESTE bloco quase não existe — o
`.carrossel10h__trilho` virou a mesma grade do `.destaques`, e as 4 fotos
passam a herdar `aspect-ratio:4/3` + `object-fit:cover` da regra geral, como
as 3 da casa. A única regra própria que sobra é o `object-position` do drink.
O `max-width` sumiu: o teto de 340px existia para o carrossel não dominar a
tela com UMA foto grande. Em grade de 4 o problema é o inverso — largura é o
que permite 4 cartões lado a lado. A régua da 1.51 continua valendo onde ela
nasceu (`.destaque--cafe`, foto única), não aqui.
O `scroll-snap`, o `overflow-x` e o `@media (prefers-reduced-motion)` do
trilho saíram JUNTOS, e é coerência, não descuido: eles existiam para
governar uma rolagem horizontal que não existe mais. Um `scroll-behavior` a
zerar numa grade que não rola seria regra órfã apontando para o mecanismo
antigo — exatamente o tipo de resíduo que fez a 1.59 custar uma story. */
.carrossel10h{ margin-inline:0; }
.carrossel10h__trilho{
display:grid; gap:26px;
grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
list-style:none; margin:0; padding:0;
}
/* O `
` é só invólucro da grade; quem desenha o cartão é o `.destaque`
dentro dele. `flex:1` faz o cartão ocupar a célula inteira — sem isto, o
`` teria a altura do próprio conteúdo e os cartões da linha
ficariam desalinhados na base, que é metade do defeito que o dono apontou. */
.carrossel10h__item{ min-width:0; display:flex; }
.carrossel10h__item > .destaque{ flex:1; }
/* 🔴 O RECORTE DO RETRATO, E É DELIBERADO. A posição 4 (`jabuticaba-mule`,
533×799) é a única retrato do conjunto. Em 4/3 com `cover`, sobra uma faixa
de 533×400 — 50,1% da altura do arquivo. Com o `center` padrão essa faixa
seria y=200..600, e o gargalo do sifão + a mão (y≈0..200) ficariam de fora.
`object-position:50% 28%` sobe a janela para y≈112..512, que é o intervalo
que contém a mão, o bico do sifão, o fio de drink caindo e a boca da caneca
laranja — o essencial da foto. Conferido na imagem, não estimado no papel.
A alternativa seria voltar a `object-fit:contain`, que é PRECISAMENTE o que
produzia o cartão altíssimo reprovado pelo dono. */
.carrossel10h__img[src*="jabuticaba-mule"]{ object-position:50% 28%; }
.destaque__cat{
font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--brasa-texto); margin-bottom:11px;
}
.destaque h3{ font-size:1.14rem; margin-bottom:8px; }
.destaque p{ color:var(--cinza); font-size:.92rem; flex:1; margin-bottom:16px; }
/* Sem descrição, o preço encosta no nome — este espaço mantém o respiro
e alinha o preço na base de todos os cards, que têm altura igual. */
.destaque__texto .destaque__preco{ margin-top:auto; padding-top:14px; }
.destaque__preco{
font-family:var(--ds-serif); font-size:1.28rem; font-weight:600; color:var(--vinho);
}
.destaque__preco small{
display:block; font-size:.7rem; color:var(--cinza);
font-family:var(--ds-sans); margin-top:2px;
}
/* Vitrine — mosaico de fotos, DENTRO do container (Story 1.63) */
/* Colunas FIXAS por faixa de largura (não auto-fill): assim dá para esconder
exatamente as fotos que sobrariam na última fila e nunca deixar buraco. */
/* 🔒 AS QUEBRAS DESTA GRADE FICAM FORA DA RÉGUA DO DESIGN SYSTEM.
===========================================================================
DECISÃO DO DONO, 2026-08-26 (Story 8.3), ALTERADA POR DECISÃO DO DONO,
2026-09-16 (Story 1.63). NÃO é esquecimento, e "uniformizar" isto para
480/768/1024/1440 continua sendo DESFAZER decisão consciente.
🔴 O QUE A 1.63 MUDOU, E POR QUE A "REGRA DAS 2 FILAS" MORREU AQUI.
O dono pediu 10 fotos (eram 14) e a grade DENTRO do container (ela sangrava
100vw). A 8.3 calibrava cada faixa para fechar EXATAMENTE 2 filas cheias —
propriedade que era CONSEQUÊNCIA de 14 fotos com 7 colunas, não um fim em si.
Com total 10, ela vira impossível: os divisores de 10 são 1, 2, 5 e 10 —
QUATRO valores úteis para CINCO faixas. Não existe desenho que mantenha
"5 faixas distintas" E "2 filas cheias em todas". Uma das duas cede.
CEDE A "2 FILAS", FICA O "SEM BURACO". Motivo: é o "sem buraco" que o texto
da 8.3 diz proteger ("ou deixa BURACO na última fila ou ESCONDE foto que o
dono escolheu mostrar"). O número de filas passa a variar por faixa, e isso
é aceitável; buraco não é.
>1400 → 5 col, corta em 11 → 10 fotos → 2,0 filas
≤1400 → 5 col, corta em 11 → 10 fotos → 2,0 filas
≤1150 → 5 col, corta em 11 → 10 fotos → 2,0 filas
≤900 → 2 col, corta em 11 → 10 fotos → 5,0 filas
≤640 → 2 col, corta em 11 → 10 fotos → 5,0 filas
⚠️ AS TRÊS FAIXAS DE CIMA TÊM O MESMO VALOR, E ISSO NÃO É DUPLICAÇÃO A
LIMPAR. `--largura` é 1180px: acima de 1180px de viewport o container PARA
de crescer, então 1400px e 1150px descrevem a MESMA largura de conteúdo
(1132px úteis). Medido por CDP, não deduzido. Apagar as declarações
redundantes reprova a asserção de `sql/teste-local.php`, que exige 5
declarações ESCRITAS — e ela existe justamente para que mexer no número de
quebras seja visível. Repetir o valor é o desenho, não o descuido.
⚠️ 5 COLUNAS NÃO SOBREVIVEM ABAIXO DE 900px: seriam 147px por foto em 800px
de viewport e 68px em 390px. Por isso as duas faixas de baixo caem para 2
colunas (368px e 171px por foto) — o outro divisor de 10 que serve. 3 e 4
colunas deixariam buraco (10/4 = 2,5 e 10/3 = 3,33).
Os dois `LIMIT` de `index.php` (5 + 5 = 10) são o outro lado deste par: o
CSS esconde a partir do 11º, e o SQL nunca traz um 11º. Mexer num sem o
outro ou deixa buraco ou carrega foto que nunca aparece.
Quem for mexer: as 5 declarações são guardadas por asserção em
`sql/teste-local.php` ("sem falso positivo: `.vitrine`/grid-template-columns
tem 5 declarações"). Mudar o número de quebras reprova a suíte de propósito. */
.vitrine{
display:grid; gap:2px;
grid-template-columns:repeat(5,1fr);
background:var(--linha);
border-block:1px solid var(--linha);
}
/* O corte é sempre múltiplo do nº de colunas — se sobrar foto, ela some; se
faltar, a fila fecha sozinha. O número de FILAS varia por faixa (2 em cima,
5 embaixo); o que não varia é a última fila estar cheia. */
.vitrine__item:nth-child(n+11){ display:none; } /* 5 col → 10 */
@media (max-width:1400px){
.vitrine{ grid-template-columns:repeat(5,1fr); }
.vitrine__item:nth-child(n+11){ display:none; } /* 5 col → 10 */
}
@media (max-width:1150px){
.vitrine{ grid-template-columns:repeat(5,1fr); }
.vitrine__item:nth-child(n+11){ display:none; } /* 5 col → 10 */
}
@media (max-width:900px){
.vitrine{ grid-template-columns:repeat(2,1fr); }
.vitrine__item:nth-child(n+11){ display:none; } /* 2 col → 10 */
}
/* Story 8.12 AC #10 — SÓ o entorno do item muda. As 5 declarações de
`grid-template-columns` e os 5 cortes `nth-child` acima ficam byte a byte:
são o par acoplado que fecha 2 filas com o `LIMIT 14`. O item passa a ser
cartão (`--ds-mesa` + borda), como `.vit__item` da prévia (`:100`).
`position:relative` sai junto com o `figcaption` absoluto (AC #12b);
`overflow:hidden` fica, porque o `scale(1.05)` do hover ainda precisa ser
recortado pela moldura do cartão. */
.vitrine__item{
margin:0; overflow:hidden;
background:var(--ds-mesa);
border:1px solid var(--ds-linha);
}
.vitrine__item img{
width:100%; aspect-ratio:1; object-fit:cover; display:block;
transition:transform 500ms cubic-bezier(.2,0,.2,1);
}
.vitrine__item:hover img{ transform:scale(1.05); }
/* AC #12(b) — a legenda SAI DE CIMA DA FOTO. Era `position:absolute` no rodapé
da imagem, sobre `linear-gradient(transparent,rgba(40,10,11,.9))` — texto
branco legível só porque a foto era escurecida por baixo. Passa a viver
ABAIXO da foto, separada por `border-top`, sobre `--ds-mesa`.
É exatamente o que o dono viu e aprovou na prévia (`:101`, 8 fotos com
legenda embaixo em cartão branco).
Ganho medido de contraste: `--ds-breu` (#1D1E1C) sobre `--ds-mesa`
(#FFFDF8) em vez de #fff sobre foto arbitrária escurecida — a legibilidade
deixa de depender de quão clara é a foto que o dono subiu.
⚠️ O item CRESCE em altura: a legenda deixa de sobrepor e passa a somar.
Isso não move as quebras (elas governam COLUNA, não altura). */
.vitrine__item figcaption{
padding:11px 12px;
border-top:1px solid var(--ds-linha);
display:flex; flex-direction:column; gap:2px;
}
.vitrine__nome{ font-family:var(--ds-serif); font-size:1rem; font-weight:600; line-height:1.25; }
/* A categoria vira mono (`.vit__cat` da prévia, `:103`) e troca o branco
translúcido — que só fazia sentido sobre o gradiente — por `--ds-apoio`. */
.vitrine__cat{
font-family:var(--ds-mono);
font-weight:400;
font-size:10px;
line-height:1.4;
letter-spacing:.1em; text-transform:uppercase;
color:var(--ds-apoio);
}
/* A 5ª quebra. Mesmo valor da faixa ≤900 de propósito — ver o bloco 🔒 acima:
a asserção de `teste-local.php` exige 5 declarações ESCRITAS, e o celular já
estava em 2 colunas antes desta story. O que mudou aqui foi o CORTE: era 5
(4 fotos, 2 filas), passa a 11 (as 10, em 5 filas). O dono pediu 10 fotos —
esconder 6 delas no celular seria entregar outra coisa. */
@media (max-width:640px){
.vitrine{ grid-template-columns:repeat(2,1fr); }
.vitrine__item:nth-child(n+11){ display:none; } /* 2 col → 10 */
}
/* Prova social — Story 8.12 AC #9.
Era 4 números soltos, centralizados, em serif brasa, sobre a faixa vinho de
tela cheia. Vira GRADE DE KPI: 4 cartões com borda, rótulo mono em cima e
número em mono embaixo — `.kpi`/`.kpi__c`/`.kpi__n` da prévia (`:79-85`).
A seção perdeu o `.secao--vinho` (AC #5): o fundo é a areia da página, e o
peso visual passa a vir dos cartões, não de uma faixa colorida.
2 colunas abaixo de 768px, 4 a partir dali — o breakpoint é o do DS. */
.provas{
display:grid; gap:var(--ds-esp-12);
grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ .provas{ grid-template-columns:repeat(4,1fr); } }
.prova{
border:1px solid var(--ds-linha);
background:var(--ds-mesa);
border-radius:var(--ds-raio-cartao);
padding:var(--ds-esp-16);
}
/* O primeiro cartão ("No Google") é o ESCURO — `--ds-casco`, o registro
institucional. É o único ponto de peso da grade: a nota do Google é o dado
que o dono quer que se leia primeiro. Mesmo padrão de `.kpi__c--escuro`. */
.prova--escuro{
background:var(--ds-casco);
border-color:var(--ds-casco);
color:var(--ds-mesa);
}
.prova__rot{
font-family:var(--ds-mono);
font-weight:500;
font-size:10px;
line-height:1.3;
letter-spacing:.12em; text-transform:uppercase;
color:var(--ds-apoio);
margin:0;
}
/* #C9A9A0 sobre --ds-casco (#351010) = 6,05:1 — o rótulo do cartão escuro não
pode herdar `--ds-apoio` (#7A756C), que ali daria 2,4:1 e reprovaria AA. */
.prova--escuro .prova__rot{ color:#C9A9A0; }
/* O NÚMERO EM MONO — a mudança que se vê de longe. Era serif 600 em brasa;
passa a IBM Plex Mono 500, a fonte de dado do DS, auto-hospedada desde a
8.1 e até esta story sem nenhum consumidor no site público. */
.prova__n{
font-family:var(--ds-mono); font-weight:500;
font-size:clamp(30px,4vw,42px);
line-height:1; letter-spacing:-.02em;
margin-top:var(--ds-esp-12); display:block;
}
/* --------------------------------------------------------------------------
Cardápio
-------------------------------------------------------------------------- */
.menu-abas{
position:sticky; top:var(--topo); z-index:60;
background:var(--papel);
border-bottom:1px solid var(--linha);
overflow-x:auto; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.menu-abas::-webkit-scrollbar{ display:none; }
/* A barra sangra de ponta a ponta (a linha inferior atravessa a tela) e as
abas ficam CENTRADAS, na mesma vertical do campo de busca logo abaixo.
Antes elas alinhavam à esquerda do .container: com a busca centralizada, o
conjunto ficava torto.
`width:max-content` + `margin-inline:auto` centra quando cabe; quando não
cabe (celular), o conteúdo fica maior que a barra e o scroll assume — por
isso NÃO se usa `justify-content:center`, que cortaria a primeira aba ao
rolar. */
.menu-abas__interno{
display:flex; gap:2px;
box-sizing:border-box;
width:max-content; /* garante o scroll quando não cabe */
max-width:calc(var(--largura) + 48px);
margin-inline:auto;
padding-inline:6px;
}
@media (max-width:640px){
/* No celular as 5 abas não cabem na tela: o padding lateral dá respiro nas
duas pontas do scroll, para a primeira e a última não colarem na borda. */
.menu-abas__interno{
max-width:calc(var(--largura) + 40px);
padding-inline:14px;
}
}
.menu-abas a{
padding:17px 18px; text-decoration:none; white-space:nowrap;
font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
/* `--cor-aba` (Story 1.49): cor própria do menu, vinda de `menus.cor` pelo
`style` inline. Ausente na esmagadora maioria das abas — o fallback é o
cinza que sempre esteve aqui.
⚠️ Story 1.53 — ESTA REGRA CONTINUA SENDO A DAS 6 ABAS, e por isso o branco
NÃO entra aqui. Pôr `color:#FFF` nesta declaração pintaria as outras 5 de
branco sobre fundo claro, apagando-as. O branco mora no seletor
`[style*="--cor-aba"]` abaixo, que só casa com quem recebeu a variável. */
color:var(--cor-aba, var(--cinza)); border-bottom:3px solid transparent;
transition:color var(--transicao),border-color var(--transicao),
background-color var(--transicao);
}
/* Story 1.49 — a aba de um menu com cor própria (`menus.cor`).
Hoje só o Família Paulista tem: `#953A34`, terracota amostrada do avatar do
Instagram do parceiro. As outras 5 abas não recebem a variável e caem no
fallback, que é exatamente o que elas já usavam — por isso o comportamento
delas não muda em byte nenhum.
AS DUAS PROPRIEDADES DO AC #2 estão aqui, e são duas porque uma só não
distingue a aba: `color` no estado normal (o texto "Família Paulista" sai
terracota enquanto as outras saem cinza) e, no estado ativo, `color` +
`border-bottom-color` (o filete embaixo, que nas demais é `--brasa`).
⚠️ O ESTADO ATIVO PRECISA REDECLARAR A COR. Sem a linha de `[aria-current]`,
o seletor mais específico da folha venceria e a aba do parceiro ficaria
`--vinho` com filete `--brasa` justamente quando estivesse selecionada — ou
seja, a cor sumiria no único estado em que o cliente está olhando para ela.
Contraste medido por execução (AC #6): 7,10:1 sobre `--papel`, passa AA e
também AAA para texto normal. `--brasa`, para comparação, mede 4,43:1 e
reprova AA — a cor do parceiro é a mais legível das duas.
O estado NORMAL não aparece aqui: ele mora na regra `.menu-abas a` acima,
onde a declaração de `color` já nasce com o fallback. Repeti-lo aqui criaria
duas fontes para a mesma propriedade. */
.menu-abas a:hover{ color:var(--cor-aba, var(--vinho)); }
.menu-abas a[aria-current="true"]{
color:var(--cor-aba, var(--vinho));
border-bottom-color:var(--cor-aba, var(--brasa));
}
/* ═══════════════════════════════════════════════════════════════════════════
Story 1.53 — A ABA DO PARCEIRO INVERTE: bloco sólido terracota, letra branca
───────────────────────────────────────────────────────────────────────────
Pedido literal do dono (2026-09-15): "inverta, deixe o fundo no terra cota e
as letras de branco." Duas decisões dele, que são requisito e não opção:
SEMPRE preenchida (bloco sólido em qualquer estado, não só ativa) e SÓ o
site público (o cardápio impresso fica intocado — tinta e folha).
🔴 POR QUE O SELETOR É `[style*="--cor-aba"]` E NÃO `.menu-abas a`.
A regra acima é UMA SÓ para as 6 abas. `cardapio.php:118-120` só emite o
`style` inline quando `cor_menu()` valida a cor, então as outras 5 não têm a
variável. Se o branco entrasse na regra compartilhada, as 5 sairiam BRANCAS
SOBRE FUNDO CLARO — apagadas. Este seletor casa só com quem recebeu a
variável, que é exatamente o conjunto que ganha fundo sólido. O branco e o
fundo andam juntos, por construção, e não por coincidência.
⚠️ `background` e `color` precisam de tratamentos DIFERENTES, e a assimetria
é a armadilha desta story:
· `background-color:var(--cor-aba, transparent)` — o fallback é exigido por
DESENHO. Sem ele a declaração fica *invalid at computed-value time* nas
abas sem a variável e cai em `unset` → `initial` → `transparent`. Daria no
mesmo POR ACIDENTE. A propriedade que a 1.49 estabeleceu é que as outras
se comportem como antes por desenho, não pelo valor inicial feliz desta
propriedade específica — é o mesmo motivo de `color:var(--cor-aba,
var(--cinza))` lá em cima;
· o branco NÃO tem valor inicial inócuo. Por isso ele fica confinado aqui.
🔴 O FILETE DO ESTADO ATIVO TEVE DE MUDAR DE COR — e este é o risco central
que a story nomeia. Com fundo sólido em todos os estados, o
`border-bottom-color:var(--cor-aba)` da 1.49 vira TERRACOTA SOBRE TERRACOTA:
o filete some e o visitante perde a indicação de onde está. O sinal novo é
filete BRANCO.
Contrastes medidos por execução contra o fundo `#953A34` (não copiados):
· branco #FFFFFF → 7,16:1 ✅ (piso de componente gráfico é 3:1, WCAG
1.4.11; passa com folga, e passaria até o piso de texto, 4,5:1)
· --brasa #D8411F → 1,60:1 ❌ REPROVA. Foi medido e descartado: a story
sugeria `--brasa` como caminho possível para o filete, e a medição mostra
que ele não serve — vermelho sobre terracota quase não se distingue.
O piso aplicável é o de 3:1 (componente gráfico não textual), porque o sinal
escolhido é um FILETE, não cor de texto nem peso de fonte. O branco passa
pelos dois pisos de qualquer modo.
═══════════════════════════════════════════════════════════════════════════ */
.menu-abas a[style*="--cor-aba"]{
background-color:var(--cor-aba, transparent);
color:#FFF;
border-bottom-color:transparent;
}
/* O preenchimento NÃO se perde no hover nem no ativo (decisão D1 do dono). */
.menu-abas a[style*="--cor-aba"]:hover{
background-color:var(--cor-aba, transparent);
color:#FFF;
}
/* O ESTADO ATIVO, distinguível: filete BRANCO sobre o bloco terracota.
`!important` não é usado — a especificidade deste seletor (0,2,1 com o
atributo + `aria-current`) já vence a regra da 1.49 acima (0,2,1 empatado,
resolvido pela ordem: esta vem depois). */
.menu-abas a[style*="--cor-aba"][aria-current="true"]{
background-color:var(--cor-aba, transparent);
color:#FFF;
border-bottom-color:#FFF;
}
.busca-caixa{ padding:26px 0 6px; }
/* Centralizada, na mesma vertical das abas logo acima — as duas juntas
formam o cabeçalho do cardápio e precisam partilhar o mesmo eixo. */
.busca-campo{
position:relative; max-width:460px; margin-inline:auto;
}
.busca-campo input{
width:100%; padding:14px 16px 14px 44px;
font-family:var(--ds-sans); font-size:1rem;
border:1.5px solid var(--linha); border-radius:var(--raio);
background:var(--papel); color:var(--tinta);
}
.busca-campo input:focus{ border-color:var(--brasa); }
.busca-campo svg{
position:absolute; left:15px; top:50%; transform:translateY(-50%);
width:17px; height:17px; stroke:var(--cinza); fill:none; stroke-width:2;
}
/* Ícone de link externo — Story 1.63, Ajuste 7 (substitui o caractere `↗`).
⚠️ O TAMANHO É EM `em`, NÃO EM `px`. O ícone substitui um caractere e tem de
acompanhar o tamanho do texto em volta: os 5 links vivem em contextos
tipográficos diferentes (`.secao__texto` em `almoco.php`, um `display:flex`
com `gap` em `cardapio.php`). Cravar `12px` deixaria o ícone grande demais no
texto pequeno e pequeno demais no grande — que é exatamente o defeito que o
`↗`, sendo caractere, não tinha.
⚠️ `vertical-align:-.08em` em vez de `middle`: `middle` alinha pelo meio da
altura-x e deixa o ícone flutuando acima da linha de base em fonte serifada.
O valor foi ajustado olhando o link renderizado, não copiado de outro projeto.
A cor não aparece aqui de propósito — vem de `currentColor` no próprio SVG. */
.icone-link-externo{
width:.78em; height:.78em;
vertical-align:-.08em;
margin-inline-start:.28em;
}
.cat{ padding:44px 0 8px; scroll-margin-top:132px; }
.cat__titulo{
display:flex; align-items:baseline; gap:16px;
border-bottom:2px solid var(--vinho);
padding-bottom:11px; margin-bottom:6px;
}
.cat__titulo h2{ font-size:1.5rem; margin:0; }
.cat__contagem{ font-size:.74rem; color:var(--cinza); letter-spacing:.1em; }
.itens{ list-style:none; margin:0; padding:0; }
.item{
display:flex; align-items:baseline; gap:14px;
padding:19px 0;
border-bottom:1px solid var(--linha);
}
.item:last-child{ border-bottom:0; }
.item__corpo{ flex:1; min-width:0; }
.item__nome{
font-family:var(--ds-serif); font-size:1.09rem; font-weight:600;
color:var(--vinho); margin:0 0 4px; line-height:1.3;
}
.item__desc{
font-size:.93rem; color:var(--cinza); margin:0; line-height:1.55;
max-width:62ch;
}
/* Descrição com 3 linhas ou mais mostra só 2 + botão "Saiba mais".
Quem tem 1 ou 2 linhas aparece inteiro, sem botão. O JS marca
[data-cortavel] só onde o texto realmente transborda — assim o corte
acompanha a largura da tela, e não uma contagem de caracteres. */
.item__texto[data-cortavel] .item__desc{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
}
.item__texto[data-cortavel][data-aberto] .item__desc{
-webkit-line-clamp:unset;
display:block;
}
.item__mais{
display:none; /* só aparece se o JS marcar */
align-items:center; gap:6px;
background:none; border:0; padding:4px 0; margin-top:2px;
font-family:var(--ds-sans); font-size:.72rem; font-weight:700;
letter-spacing:.12em; text-transform:uppercase;
color:var(--brasa-texto); cursor:pointer;
min-height:32px; /* alvo de toque no celular */
}
.item__texto[data-cortavel] .item__mais{ display:inline-flex; }
.item__mais::after{ content:"+"; font-size:.95rem; font-weight:400; line-height:1; }
.item__texto[data-aberto] .item__mais::after{ content:"–"; }
.item__mais:hover{ color:var(--vinho); }
.item__mais:focus-visible{ outline:2px solid var(--brasa); outline-offset:3px; }
.item__preco{
font-family:var(--ds-serif); font-size:1.13rem; font-weight:600;
color:var(--tinta); white-space:nowrap; flex:none; text-align:right;
}
.item__preco small{
display:block; font-family:var(--ds-sans); font-size:.66rem;
color:var(--cinza); font-weight:400; letter-spacing:.05em; margin-top:2px;
}
/* Prato lançado antes do preço fechar (ex.: novidades de Agosto/2026).
Sai em caixa alta discreta, sem o peso de serifa do preço real — o cliente
lê "consulte" como recado, não como valor. */
.item__preco .preco-consulte{
font-family:var(--ds-sans); font-size:.72rem; font-weight:600;
letter-spacing:.12em; text-transform:uppercase; color:var(--cinza);
}
.item__selo{
display:inline-block; font-size:.6rem; font-weight:700;
letter-spacing:.16em; text-transform:uppercase;
color:var(--brasa-texto); border:1px solid currentColor;
padding:2px 7px; margin-left:9px; vertical-align:middle;
}
/* Miniatura do item */
.item__miniatura{
flex:none; width:88px; height:88px; padding:0; border:0; cursor:zoom-in;
background:var(--creme); border-radius:2px; overflow:hidden;
align-self:center;
}
.item__miniatura img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform var(--transicao);
/* O Safari usa os atributos width/height do para calcular a
proporção e, dentro de um