/* ===========================================================================
LABORATÓRIO VISUAL — cópia LEGO
ISTO AQUI DIZIA QUE A FOLHA "não existe na página original". Não é mais
verdade, e não era em 2026-09-08: o `index.html` desta pasta carrega ela na
linha 28, e é dela que saem a paleta cappuccino, a tipografia da página
inteira e o desenho do botão da oferta. Ela nasceu como cópia de laboratório
e virou a folha que manda. Comentário que descreve um passado vira armadilha
para quem lê procurando o que pode mexer.
=========================================================================== */
/* AS FONTES SAIRAM DAQUI EM 2026-09-08, e o motivo esta medido.
Aqui havia um `@import` do Google Fonts. Duas coisas erradas com ele.
1. A PASTA DEIXAVA DE SER AUTOCONTIDA. Medido abrindo o `index.html` pelo
arquivo, com a internet desligada: ZERO regras de `@font-face` carregadas,
e "Prata" e "Rozha One" medindo a mesma largura da fonte de reserva —
quer dizer, nenhuma das duas apareceu. A pagina que o Arthur vende
dependia de um servidor de terceiro para ter a propria letra.
2. `@import` NO TOPO DE UMA FOLHA E O PIOR LUGAR PARA UMA FONTE. O navegador
precisa baixar os 149 kB desta folha inteira, so entao descobrir o
`@import`, e so entao ir buscar o CSS do Google e, depois dele, os
arquivos de letra. Sao tres viagens em fila. Um `` no `index.html`
comeca junto com o resto.
As quatro familias foram para `vendor/fontes/`, com a licenca OFL junto, e
entram pelo `` do `index.html`. Quicksand e Comic Neue estavam no
endereco antigo e NAO foram junto: medido na rede, a pagina nunca pediu
nenhuma das duas. */
:root{
--fundo:#0b1020 !important;
--texto:#f5f6ff !important;
--destaque:#c8ff66 !important;
--quente:#ff7db6 !important;
--suave:#b7bdd3 !important;
--papel:#151c31 !important;
--borda:#303a5b !important;
--borda-forte:#6977a4 !important;
--lab-vidro:rgba(23,31,56,.58);
--lab-linha:rgba(225,231,255,.18);
--lab-sombra:0 22px 70px -34px rgba(0,0,0,.88);
}
body{
background:
radial-gradient(circle at 8% 6%, rgba(130,92,255,.28), transparent 28rem),
radial-gradient(circle at 96% 25%, rgba(79,221,183,.18), transparent 26rem),
radial-gradient(circle at 48% 80%, rgba(255,125,182,.13), transparent 34rem),
var(--fundo);
font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* Bolhas de cor muito grandes, atrás da página. Não têm imagem e não ocupam
espaço no documento; deixam o vidro pegar cores diferentes ao rolar. */
body::before,
body::after{
content:"";
position:fixed;
z-index:0;
width:44vmax;
aspect-ratio:1;
border-radius:50%;
filter:blur(10px);
pointer-events:none;
}
body::before{
top:-24vmax;
left:-17vmax;
background:radial-gradient(circle, rgba(173,126,255,.31), rgba(173,126,255,0) 68%);
}
body::after{
right:-22vmax;
bottom:-27vmax;
background:radial-gradient(circle, rgba(90,243,194,.2), rgba(90,243,194,0) 68%);
}
#rolagem-externa{ position:relative; z-index:1; }
/* O desenho antigo vira uma textura leve de traço, não o centro visual. */
#fundo{ opacity:.18; mix-blend-mode:screen; }
#fundo path,
#fundo circle,
#fundo ellipse{ stroke:#b7a0ff; }
#fundoCamadaPerto path,
#fundoCamadaPerto circle{ stroke:#8ff0c6; }
h1,h2,h3{
font-family:"DM Serif Display",Georgia,serif;
font-weight:400;
letter-spacing:-.035em;
}
h1{ line-height:.99; }
h2{ line-height:1.02; }
section{ padding-block:clamp(42px,7.5cqw,94px); }
.env{ max-width:1120px; }
/* ------------------------------------------------------------ abertura -- */
#topo{
min-height:100svh;
align-items:center;
padding-block:clamp(42px,8cqw,90px);
/* O bloco interno pode descer no Mover. A seção deixa de recortá-lo e o
espaço abaixo impede que ele invada o começo da receita. Como é margem,
a centralização visual do bloco não muda. */
overflow:visible;
margin-bottom:80px;
}
#topo .env{
isolation:isolate;
overflow:hidden;
max-width:1080px;
/* A FOLGA DE BAIXO É IGUAL À DAS LATERAIS, e isso já foi zero uma vez.
Em 2026-09-05 de manhã o Arthur pediu o cartão sem buraco embaixo do
subtítulo (*"redimensiona para que não fique esse buraco"* — eram 109px no
computador e 53 no celular). O `padding-bottom` foi a zero e o
`encolherPeDoTopo` passou a fechar a altura rente ao conteúdo.
Os dois juntos foram longe demais: a folga do pé virou os 10px da moldura,
o quadrado do subtítulo passou a encostar nela e, como ele é greige — a
MESMA cor da listra de 5px que corre por fora do cartão —, o olho lê como
se o quadrado atravessasse a moldura. O Arthur mandou a foto com o
defeito.
O que fecha o buraco continua sendo o `encolherPeDoTopo`, e ele soma este
padding na conta da folga: o cartão termina no pé do subtítulo MAIS este
respiro, nunca na altura natural do desenho. Por isso os 109px não voltam
— o que volta é só a folga que as laterais já tinham. */
padding:clamp(32px,7cqw,84px);
border:1px solid var(--lab-linha);
border-radius:clamp(28px,5cqw,52px);
background:
linear-gradient(118deg, rgba(255,255,255,.12), rgba(255,255,255,.025) 34%, rgba(136,107,255,.14)),
var(--lab-vidro);
-webkit-backdrop-filter:blur(28px) saturate(135%);
backdrop-filter:blur(28px) saturate(135%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), var(--lab-sombra);
}
#topo .env::before{ content:none; }
#topo .env::after{
content:"";
position:absolute;
z-index:-1;
width:min(58cqw,680px);
aspect-ratio:1;
right:-18cqw;
top:50%;
translate:0 -50%;
border:1px solid rgba(218,211,255,.42);
border-radius:50%;
box-shadow:
0 0 0 24px rgba(180,160,255,.045),
0 0 0 62px rgba(180,160,255,.03),
0 0 90px rgba(160,130,255,.2);
}
/* ---------------------------------------------------- ponte para receita --
A receita foi deslocada para baixo pelo editor, deixando um respiro entre
os dois vidros. O gesto ocupa esse respiro de forma absoluta: nao empurra o
topo, nao mexe na receita e nao altera nenhuma posicao salva. */
#previadodia{ position:relative; }
.arraste-receita-posicao{
position:absolute;
z-index:4;
top:clamp(18px,4svh,38px);
left:50%;
translate:-50% 0;
}
/* BOTAO HORIZONTAL DE APERTAR — 2026-09-05, pedido do Arthur. Era um cartao
vertical de 260px de largura fixa, com trilho, bolinha e setas dentro.
A largura agora sai do texto (`width:auto`), que e o que faz o botao ficar
deitado em vez de em pe: com largura fixa e o rotulo curto, sobrava caixa
vazia dos dois lados. O `max-width` continua para o texto longo nao encostar
na borda da tela no celular. */
.arraste-receita{
position:relative;
isolation:isolate;
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
max-width:calc(100vw - 32px);
min-width:0;
padding:16px 30px;
border:1px solid rgba(255,255,192,.34);
border-radius:999px;
color:var(--texto);
background:linear-gradient(145deg,rgba(255,255,192,.11),rgba(37,57,60,.5));
-webkit-backdrop-filter:blur(14px) saturate(125%);
backdrop-filter:blur(14px) saturate(125%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 18px 42px -28px rgba(9,18,24,.88);
font:600 10px/1.15 ui-monospace,Consolas,monospace;
letter-spacing:.18em;
text-transform:uppercase;
cursor:pointer;
/* `manipulation` no lugar de `none`: o `none` existia para o arrasto poder
comer o gesto de rolagem. Sem arrasto, ele so atrapalharia — a pessoa nao
conseguiria rolar a pagina com o dedo em cima do botao. */
touch-action:manipulation;
user-select:none;
-webkit-user-select:none;
transition:transform .16s ease-out, box-shadow .16s ease-out;
}
/* O afundar ao apertar e o que diz "isto e um botao" sem escrever nada. */
.arraste-receita:active{
transform:translateY(2px) scale(.985);
box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 10px 24px -22px rgba(9,18,24,.9);
}
/* ---- A BORDA DE METAL LÍQUIDO --------------------------------------------
Pedido do Arthur em 2026-09-05, com o componente `liquid-metal-button` do
Joly UI (MIT) na mão: *"pega esse efeito de borda de caixa e aplica na caixa
de aperte o botão"*.
O TRUQUE DO ORIGINAL, e é só isso: o metal preenche o botão INTEIRO, e um
miolo opaco recuado 2px cobre o centro. O que sobra à vista é uma faixa de
2px de metal correndo em volta — não existe "borda animada", existe um
fundo animado quase todo tapado.
Aqui o miolo é o `::before`, que ficou com o gradiente que era do botão. O
botão em si passa a ser transparente **só quando o metal monta**
(`[data-metal]`): sem WebGL, sem módulo, ou com movimento reduzido, nada
disso acontece e o botão continua exatamente como era. */
.arraste-receita__metal{
position:absolute;
inset:0;
z-index:0;
border-radius:inherit;
overflow:hidden;
pointer-events:none;
}
.arraste-receita[data-metal]{
background:transparent;
border-color:transparent;
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
.arraste-receita[data-metal]::before{
content:"";
position:absolute;
inset:2px;
z-index:1;
border-radius:inherit;
background:linear-gradient(145deg,rgba(255,255,192,.11),rgba(37,57,60,.5));
-webkit-backdrop-filter:blur(14px) saturate(125%);
backdrop-filter:blur(14px) saturate(125%);
pointer-events:none;
}
/* O rótulo por cima das duas camadas. */
.arraste-receita__rotulo{ position:relative; z-index:2; }
.arraste-receita:focus-visible{
outline:2px solid var(--destaque);
outline-offset:5px;
}
.arraste-receita__rotulo,
.arraste-receita__destino{
display:block;
width:100%;
max-width:100%;
text-align:center;
white-space:normal;
overflow-wrap:anywhere;
line-height:1.35;
}
/* Pedido do Arthur: essa frase e leitura de instrucao, nao rotulo curto tipo
".olho" — usa a fonte do corpo da pagina em vez do mono/maiusculo herdado de
".arraste-receita", que destoava do resto do texto.
A FONTE DO CORPO MUDOU DEBAIXO DESTA REGRA, e por isso ela voltou em
2026-09-08. Em 2026-09-04 a Manrope entrou aqui porque a Manrope ERA o corpo
da pagina. A paleta Cappuccino trocou o corpo para a Prata (linha 1122) e
esta linha ficou para tras: sobrou a unica frase sem-serifa numa pagina toda
serifada, e foi o que o Arthur viu — *"a fonte desse primeiro botao ela ta
padrao, quero que fique condizente com a pagina"*. O pedido dele de 04/09 e
o de hoje sao o mesmo pedido; o que mudou foi a resposta.
A Prata so tem um peso (400), entao o `font-weight` desce de 600 para 400 —
pedir 600 de uma fonte sem esse peso faz o navegador engrossar o traco na
mao, e serifada engordada artificialmente fica borrada. O tamanho sobe de 16
para 17px porque a Prata tem altura-x menor que a Manrope, e o pouco de
espacamento e para a CAIXA ALTA respirar — em maiuscula, letra colada le como
bloco. */
.arraste-receita__rotulo{
color:var(--texto);
font-family:"Prata",Georgia,serif;
text-transform:none;
letter-spacing:.02em;
font-weight:400;
/* O TAMANHO CAIU PARA CABER, e o numero saiu de medir. O rotulo tem
`max-width:178,6px` gravado pelo Arthur no editor, e o editor tambem guarda
um multiplicador de letra de 1,209 para ele. A Prata e mais larga que a
Manrope na mesma altura: a 17px de base a frase pedia ~200px e quebrava em
duas linhas — justamente o que ele mandou nao acontecer em 2026-09-05.
Medido no navegador: "APERTE O BOTAO" em Prata mede 165px a 17px, entao a
conta que fecha e 14,5 x 1,209 = 17,5px, que pede ~170px. Sobram 8px.
Mexer no `posicoes.json` resolveria tambem, e foi descartado: aquele arquivo
e o trabalho do Arthur, e a largura dali ele escolheu com o dedo.
O tamanho vive so aqui: os 10px da regra ".arraste-receita" continuam sendo
a base dos "em" da alavanca abaixo. */
font-size:14.5px;
line-height:1.35;
/* A FRASE CABE EM UMA LINHA, e é o botão que cresce para isso — pedido do
Arthur em 2026-09-05: *"aumente de forma que a frase fique somente em uma
linha"*. "APERTE O BOTÃO" quebrava em duas.
Quem quebrava não era o `max-width` que ele gravou pelo editor (178px no
celular, contra 158 que a frase pede): era o `width:100%` da regra acima,
que resolve contra o miolo do botão. Com ele, o rótulo pedia 145px e o
botão nascia do tamanho de um rótulo que já tinha quebrado — pescoço que
aperta a si mesmo. `max-content` faz o rótulo pedir a linha inteira, e o
botão, sendo `inline-flex` de largura automática, acompanha.
NÃO É `white-space:nowrap`: com `max-content` o texto continua podendo
quebrar quando não couber mesmo (frase mais longa, letra maior no editor,
tela estreita). Com `nowrap` ele vazaria para fora da borda. */
width:max-content;
}
.arraste-receita__destino{ color:var(--destaque); font-size:9px; opacity:.9; }
/* O trilho, a bolinha e as duas setas saíram daqui em 2026-09-05, junto com as
`@keyframes arrastePonto` e `arrasteSetas` que as moviam: com o botão de
apertar não há mais nada a demonstrar com desenho. */
@media (max-width:620px){
.arraste-receita-posicao{ top:10px; }
.arraste-receita{ padding:15px 24px; }
}
#tituloTopo{
max-width:18ch;
font-size:clamp(48px,6.8cqw,76px);
text-shadow:0 12px 44px rgba(0,0,0,.38);
}
.topo__sub{
max-width:58ch;
margin-top:28px;
margin-bottom:26px;
padding:18px 20px;
border:1px solid rgba(226,232,255,.17);
border-radius:18px;
background:rgba(10,15,31,.32);
color:#dde2f5;
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
}
.topo__sub::before{
background:linear-gradient(112deg,transparent 31%,rgba(255,255,255,.16) 48%,transparent 65%);
}
/* O destaque veio da página original em vermelho. Na cópia, ele acompanha a
paleta rosa clara e continua legível sobre o vidro. */
#subTopo,
#subTopo b{ color:#edf0ff !important; }
#subTopo b{ color:#ff9bc8 !important; }
.topo__acoes{ gap:12px; }
.btn{
border-radius:14px;
background:linear-gradient(135deg, #caff68, #8aefc8);
color:#0b1020;
box-shadow:inset 0 1px 0 rgba(255,255,255,.52), 0 16px 36px -18px rgba(121,245,190,.7);
}
.btn--vazio{
border-color:rgba(231,237,255,.3);
background:rgba(17,24,45,.38);
color:var(--texto);
box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.btn--vazio .btn__brilho{ display:none; }
.topo__arte{
right:-6%;
width:min(600px,56cqw);
opacity:.28;
}
.topo__arte path,
.topo__arte circle,
.topo__arte ellipse{ stroke:#d8cbff; }
#poeira i{ background:#a9ff8a; }
/* ----------------------------------------------------------- seções -- */
.olho{
width:fit-content;
/* A PÍLULA SE CENTRALIZA SOZINHA. O `estilo.css` já mandava `width:100%` com
`justify-content:center`, mas o `fit-content` desta linha vence por vir
depois — e aí a pílula, sendo bloco, encostava na esquerda. O Arthur
compensava isso arrastando cada rótulo à mão, de 57 a 145px, e o
deslocamento em pixel não acompanha mudança de largura nem de texto: era
por isso que eles saíam do centro. Com `margin-inline:auto` o centro deixa
de depender de arrasto. Os sete deslocamentos foram zerados no
`posicoes.json` em 2026-09-05. */
margin-inline:auto;
padding:7px 11px;
border:1px solid rgba(200,255,102,.25);
border-radius:999px;
color:var(--destaque);
background:rgba(200,255,102,.06);
font-family:"Manrope",sans-serif;
/* 11px, E NÃO OS 10px DE ANTES. Medido na página montada em 2026-09-08: os
rótulos saíam a 10px no computador e a 9px no celular, em CAIXA ALTA e com
`letter-spacing` de .15em. Letra funcional abaixo de 11px falha em tela
densa e em tela pequena, e caixa alta com espacejamento piora — some a
forma da palavra, que é por onde se lê rápido. 11px é o piso, não um gosto.
A pílula cresce 2px de altura; o `padding` continua o mesmo. */
font-size:11px;
letter-spacing:.15em;
}
.olho::before,
.olho::after{ display:none; }
.sub{ color:var(--suave); }
#problema .env,
#trocas .env,
#livre .env,
#umdia .env,
#rigor .env,
#entrega .env,
#oferta .env{
padding:clamp(24px,4.8cqw,56px);
border:1px solid rgba(225,231,255,.13);
border-radius:28px;
background:linear-gradient(140deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 54%, rgba(157,137,255,.08));
box-shadow:inset 0 1px 0 rgba(255,255,255,.1), var(--lab-sombra);
}
#refeicoes .env,
#entrega .env,
#perguntas .env{ padding-inline:clamp(22px,4.8cqw,56px); }
#problemaTexto,
.balao,
.troca,
.dia,
.moderado{
border-color:rgba(225,231,255,.15);
background:linear-gradient(140deg, rgba(255,255,255,.085), rgba(255,255,255,.026) 55%, rgba(118,255,205,.055));
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 20px 42px -28px rgba(0,0,0,.9);
}
.balao{ border-left-color:var(--quente); }
.balao::before{ background:var(--quente); }
.grade{ gap:16px; }
.card{
min-height:100%;
border-color:rgba(224,232,255,.15);
border-radius:20px;
background:linear-gradient(150deg, rgba(30,41,74,.95), rgba(16,23,43,.92));
box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 18px 38px -28px rgba(0,0,0,.85);
}
.card__hora,
.card__kcal,
.bloco__kcal,
.dia__et{ color:var(--destaque); }
.card__kcal{ background:rgba(200,255,102,.1); }
.card__n{ color:#d9d4ff; opacity:.05; }
#livre{ background:linear-gradient(180deg, transparent, rgba(255,125,182,.075), transparent); }
#livre .olho{ border-color:rgba(255,125,182,.34); background:rgba(255,125,182,.08); color:#ffb0d2; }
.livre__item{ border-color:rgba(255,125,182,.35); background:rgba(255,125,182,.08); color:#ffd4e5; }
.moderado{ border-color:rgba(255,125,182,.34); }
.moderado__t{ color:#ffb0d2; }
.fonte,
.ent{
border:1px solid rgba(225,231,255,.13);
background:linear-gradient(150deg, rgba(28,38,69,.88), rgba(17,24,45,.9));
}
.entrega{ gap:10px; padding:10px; border-color:rgba(225,231,255,.12); background:rgba(225,231,255,.05); }
.ent{ border-radius:14px; }
.ent__i{ background:rgba(200,255,102,.1); color:var(--destaque); }
.faq{ border-top:0; display:grid; gap:10px; }
.faq__i{
border:1px solid rgba(225,231,255,.13);
border-radius:16px;
background:rgba(18,26,49,.62);
overflow:hidden;
}
.faq__b{
/* O texto pode ser movido no editor. Esta faixa direita fica reservada
para o sinal de mais, para ele nunca encostar nas frases já deslocadas. */
position:relative;
justify-content:center;
gap:0;
padding:19px 89px 19px 20px;
}
.faq__r p{ padding:0 20px 22px; }
.faq__mais{
position:absolute;
right:20px;
top:50%;
transform:translateY(-50%);
}
.faq__mais::before,
.faq__mais::after{ background:var(--destaque); }
#oferta .env{
border-color:rgba(200,255,102,.26);
background:
radial-gradient(circle at 50% 0, rgba(200,255,102,.13), transparent 38%),
linear-gradient(140deg, rgba(255,255,255,.1), rgba(255,255,255,.024) 60%, rgba(106,255,199,.08));
}
.preco__por{ color:var(--destaque); text-shadow:0 0 58px rgba(200,255,102,.28); }
.selo{ border-color:rgba(225,231,255,.19); background:rgba(225,231,255,.045); }
footer{ border-top-color:rgba(225,231,255,.12); background:rgba(8,12,25,.42); }
@media (max-width: 620px){
#topo{ min-height:auto; padding-block:28px 42px; margin-bottom:145px; }
/* O zero de baixo vem do mesmo pedido da regra de cima. Ele precisa ser
repetido aqui porque esta linha reescreve o `padding` inteiro. */
/* O pé repete os 23px das laterais, pelo motivo escrito na regra de cima. */
#topo .env{ padding:30px 23px 23px; border-radius:26px; }
#topo .env::after{ width:82cqw; right:-38cqw; top:67%; }
#tituloTopo{ max-width:none; font-size:clamp(34px,9.4cqw,38px); line-height:1.04; }
.topo__sub{ margin-top:22px; padding:15px 16px; }
.topo__acoes{ flex-direction:column; }
.topo__acoes .btn{ width:100%; }
.topo__arte{ width:122cqw; right:-48cqw; bottom:-16%; opacity:.14; }
#problema .env,
#trocas .env,
#livre .env,
#umdia .env,
#rigor .env,
#oferta .env{ padding:24px 19px; border-radius:22px; }
#refeicoes .env,
#entrega .env,
#perguntas .env{ padding-inline:20px; }
/* ERA 9px. Piso de 11px para letra funcional — o mesmo motivo escrito na
regra base, e no celular ele pesa mais, não menos. */
.olho{ font-size:11px; }
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{ scroll-behavior:auto !important; }
}
/* -------------------------------------------------------- leitura no sol --
Azul acinzentado no fundo, cartões petróleo e vermelho concentrado no
botão: uma paleta viva sem comprometer o contraste do texto. */
:root{
--fundo:#48586f !important;
--texto:#ffffc0 !important;
--destaque:#ffffc0 !important;
--quente:#d62e2e !important;
--suave:#d6c496 !important;
--papel:#283d3e !important;
--borda:#48586f !important;
--borda-forte:#d6c496 !important;
--lab-vidro:rgba(40,61,62,.56);
--lab-linha:rgba(255,255,192,.38);
--lab-sombra:0 18px 42px -28px rgba(9,18,24,.7);
}
body{
background:
radial-gradient(circle at 8% 6%, rgba(214,196,150,.17), transparent 28rem),
radial-gradient(circle at 96% 25%, rgba(214,46,46,.13), transparent 26rem),
var(--fundo);
}
body::before,
body::after{ opacity:.36; filter:blur(14px); }
body::before{ background:radial-gradient(circle, rgba(214,196,150,.26), rgba(214,196,150,0) 68%); }
body::after{ background:radial-gradient(circle, rgba(214,46,46,.19), rgba(214,46,46,0) 68%); }
#fundo{ opacity:.54; mix-blend-mode:normal; }
#fundo path,#fundo circle,#fundo ellipse{ stroke:#d6c496; }
#fundoCamadaPerto path,#fundoCamadaPerto circle{ stroke:#d62e2e; }
#topo .env,
#problema .env,
#trocas .env,
#livre .env,
#umdia .env,
#rigor .env,
#entrega .env,
#oferta .env{
/* A moldura nunca encosta na borda física do telefone. Sem esta folga, o
raio dos cantos parecia sair para fora da página em telas estreitas. */
width:calc(100% - clamp(28px,6cqw,72px));
margin-inline:auto;
background:linear-gradient(135deg, rgba(255,255,192,.14), rgba(40,61,62,.56) 44%, rgba(214,46,46,.09));
border-color:rgba(255,255,192,.4);
-webkit-backdrop-filter:blur(18px) saturate(130%);
backdrop-filter:blur(18px) saturate(130%);
box-shadow:inset 0 1px 0 rgba(255,255,192,.26), inset 0 -1px 0 rgba(9,18,24,.26), var(--lab-sombra);
}
#entrega .env{ overflow:hidden; }
#topo .env::after{ border-color:rgba(255,255,192,.38); box-shadow:0 0 0 24px rgba(255,255,192,.05),0 0 0 62px rgba(214,46,46,.04),0 0 90px rgba(214,196,150,.16); }
#tituloTopo{ text-shadow:none; }
.topo__sub,
#problemaTexto,
.balao,
.troca,
.dia,
.moderado{
background:linear-gradient(135deg, rgba(255,255,192,.12), rgba(40,61,62,.48) 52%, rgba(214,46,46,.065));
border-color:rgba(255,255,192,.34);
color:var(--texto);
-webkit-backdrop-filter:blur(14px) saturate(125%);
backdrop-filter:blur(14px) saturate(125%);
box-shadow:inset 0 1px 0 rgba(255,255,192,.2), 0 12px 28px -20px rgba(9,18,24,.68);
}
/* A receita e longa. Este vidro mais firme preserva a leitura durante a
rolagem sem voltar a falhar no telefone. */
#topoPrevia .dia{
isolation:isolate;
background:linear-gradient(135deg,rgba(255,255,192,.13),rgba(40,61,62,.72) 52%,rgba(214,46,46,.08));
-webkit-backdrop-filter:blur(6px) saturate(118%);
backdrop-filter:blur(6px) saturate(118%);
border-radius:18px;
}
/* O último prato fecha o card. Sem uma borda interna sobrando e com um pouco
de respiro, ele termina igual aos demais blocos de vidro da página. */
#topoPrevia .dia .bloco:last-child{
border-bottom:0;
padding-bottom:clamp(26px,5.6cqw,34px);
}
#subTopo,#subTopo b{ color:var(--texto) !important; }
#subTopo b{ color:#d62e2e !important; }
.btn{ background:linear-gradient(135deg,rgba(214,46,46,.94),rgba(185,31,39,.7)); color:#ffffc0; border-color:rgba(255,255,192,.38); -webkit-backdrop-filter:blur(12px) saturate(135%); backdrop-filter:blur(12px) saturate(135%); box-shadow:inset 0 1px 0 rgba(255,255,192,.28),0 12px 28px -17px rgba(214,46,46,.42); }
.btn--vazio{ border-color:rgba(255,255,192,.38); background:rgba(40,61,62,.4); color:var(--texto); box-shadow:inset 0 1px 0 rgba(255,255,192,.16); }
.olho{ border-color:rgba(255,255,192,.36); background:rgba(40,61,62,.32); color:var(--destaque); -webkit-backdrop-filter:blur(10px) saturate(125%); backdrop-filter:blur(10px) saturate(125%); }
/* O titulo e o paragrafo do rigor entram nesta mesma lista a pedido do Arthur
(2026-08-31): ele quis o vidro dos cartoes "Tabela TACO" e "USDA FoodData"
tambem neles. Entrar na lista, e nao copiar a receita para outro lugar,
garante que os quatro continuem iguais quando um dia a cor mudar. A caixa
em si — recuo, borda e canto — fica no estilo.css, junto da .fonte. */
.card,
.fonte,
.ent,
#rigorTitulo,
#rigorTexto,
.faq__i{ border-color:rgba(255,255,192,.3); background:linear-gradient(145deg, rgba(255,255,192,.11), rgba(40,61,62,.43) 58%, rgba(214,46,46,.055)); -webkit-backdrop-filter:blur(12px) saturate(120%); backdrop-filter:blur(12px) saturate(120%); box-shadow:inset 0 1px 0 rgba(255,255,192,.17),0 10px 24px -18px rgba(9,18,24,.62); }
.card__n{ color:#ffffc0; opacity:.06; }
.card__kcal{ background:rgba(255,255,192,.1); }
#livre{ background:linear-gradient(180deg,transparent,rgba(214,46,46,.08),transparent); }
#livre .olho{ border-color:rgba(214,196,150,.34); background:rgba(214,196,150,.1); color:#ffffc0; }
.livre__item{ border-color:rgba(255,255,192,.34); background:rgba(40,61,62,.38); color:#ffffc0; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.moderado__t{ color:#ffffc0; }
.entrega{ border-color:rgba(255,255,192,.28); background:rgba(255,255,192,.08); }
.ent__i{ background:rgba(255,255,192,.1); color:var(--destaque); }
#oferta .env{ border-color:rgba(214,196,150,.44); }
.preco__por{ color:var(--destaque); text-shadow:none; }
.selo{ border-color:rgba(255,255,192,.3); background:rgba(40,61,62,.35); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
footer{ border-top-color:rgba(255,255,192,.24); background:rgba(40,61,62,.42); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%); }
/* ===========================================================================
PALETA DO DOMINGO LIVRE — quarta versao, 2026-08-31
#F6D877 ouro claro, a superficie do vidro e dos baloes
#C8AD59 ouro medio, a caixa do modo moderado
#99823B ouro escuro, as bordas
#6B571E bronze, a sombra e o fio de baixo
#3C2C00 quase preto, TODO o texto
Mesma arrumacao da versao anterior, que foi a que funcionou: superficie
clara e quase opaca, texto no escuro. O escuro NAO volta para o fundo — ja
se tentou duas vezes, e vidro escuro amarelado sobre a pagina azul da
verde-oliva em qualquer opacidade. O que muda aqui e so a familia: era
creme quase branco, agora e ouro de verdade.
Tudo comeca em #livre. Nenhuma regra alcanca outra secao da pagina.
=========================================================================== */
/* brilho de fundo da secao */
#livre{
background:linear-gradient(180deg,transparent,rgba(246,216,119,.13),transparent);
}
/* O vidro da secao. Desfoque ligado: o fundo ainda passa de leve nas bordas. */
#livre .env{
border-color:rgba(60,44,0,.38);
background:linear-gradient(135deg,rgba(255,225,49,.60),rgba(255,225,49,.52) 52%,rgba(255,225,49,.56));
box-shadow:
inset 0 1px 0 rgba(255,244,205,.85),
inset 0 -1px 0 rgba(60,44,0,.22),
0 18px 42px -28px rgba(60,44,0,.8);
}
/* rotulo "RESTRICOES": selo escuro sobre o ouro */
#livre .olho{
border-color:rgba(60,44,0,.6);
background:rgba(60,44,0,.93);
color:#F6D877;
}
/* titulo e paragrafo */
#livre h2{ color:#3C2C00; }
#livre .sub{ color:#3C2C00; }
/* os pratos do domingo */
#livre .livre__item{
border-color:rgba(107,87,30,.6);
background:linear-gradient(145deg,rgba(255,240,190,.95),rgba(246,216,119,.9));
color:#3C2C00;
box-shadow:inset 0 1px 0 rgba(255,247,214,.9), 0 10px 24px -18px rgba(60,44,0,.7);
}
/* a caixa do MODO MODERADO, um degrau mais escura que o cartao */
#livre .moderado{
background:linear-gradient(145deg,rgba(200,173,89,.97),rgba(153,130,59,.94));
border-color:rgba(60,44,0,.5);
color:#3C2C00;
}
/* A faixa do titulo com o risco embaixo, igual ao topo do cartao da receita
("DIA 1 · 2.051 kcal no dia"). La a regra e `.dia__topo`: um pouco de cor
de fundo na faixa e um fio de 1px embaixo, de ponta a ponta do cartao.
Aqui o titulo estava no meio do recuo da caixa, entao o fio pararia antes
da borda. As margens negativas puxam a faixa ate o limite da caixa, e o
recuo volta por dentro dela — assim o fio atravessa inteiro, como no
original. O `overflow:hidden` que a caixa ja tinha e o que impede a faixa
de vazar pelos cantos arredondados. */
#livre .moderado{ --recuo-caixa:clamp(22px,4.4cqw,32px); }
#livre .moderado__t{
color:#3C2C00;
margin:calc(-1 * var(--recuo-caixa)) calc(-1 * var(--recuo-caixa)) 20px;
padding:16px var(--recuo-caixa);
border-bottom:1px solid rgba(60,44,0,.42);
background:rgba(60,44,0,.07);
}
#livre .moderado p{ color:#3C2C00; }
/* O vao entre a lista de pratos e a caixa "MAS ISSO NAO AFETA A DIETA?".
O que se ve na tela e a soma de DUAS coisas, e essa e a pegadinha:
esta margem, mais os 12px de arrasto que o #moderado tem guardado no
posicoes.json (aplicado como top:12px, que desce o bloco sem empurrar
ninguem). Eram 28 + 12 = 40px. Ficaram 8 + 12 = 20px, a pedido do
Arthur em 2026-09-02.
Mexido so aqui. O arrasto e escolha dele e fica onde esta — quem zerar
o 12px do posicoes.json some com o vao quase todo. */
#livre .moderado{
margin-top:20px;
/* O arrasto de 12px guardado para o #moderado no posicoes.json (top:12px)
descia a caixa sem empurrar ninguem: o vao de cima crescia 12px e a folga
do rodape do vidro encolhia os mesmos 12px — 36px em cima contra 27px
embaixo, medido. Anulado aqui para o quadrado dourado voltar a fechar
igual dos dois lados. O valor continua gravado no posicoes.json: apagar
esta linha devolve o deslocamento. Mesma solucao, e pelo mesmo motivo,
que os .livre__item ja usam mais abaixo neste arquivo. */
top:0 !important;
}
/* ===========================================================================
BLOCO ÚNICO COM DIVISÓRIA — pedido do Arthur em 2026-09-01
Três lugares, a mesma ideia: em vez de várias caixas soltas, uma caixa só
com uma linha separando o que está dentro.
1. A prévia do dia já era uma caixa só, e `.bloco` já trazia
`border-bottom:1px solid var(--borda)`. A linha não aparecia porque
`--borda` é #48586f — exatamente a cor de fundo da página. Aqui ela
ganha cor própria.
2. A entrega ("O que cai no seu e-mail") era seis cartões de vidro. Vira
uma lista dentro de um cartão, um item por linha.
3. Os pratos do domingo livre eram pastilhas espalhadas. Viram a mesma
lista, na paleta dourada da seção.
=========================================================================== */
/* 1. PRÉVIA DO DIA — a linha entre as refeições */
#topoPrevia .dia .bloco{
border-bottom:1px solid rgba(255,255,192,.24);
}
/* 2. ENTREGA — seis cartões viram um só
A grade tinha `gap:2px` sobre um fundo da cor da borda: era esse vão que
desenhava a separação. Com um cartão só, a separação passa a ser a linha
de cima de cada item, e o vão fecha. */
#entGrade{
grid-template-columns:1fr;
gap:0;
border:1px solid rgba(255,255,192,.3);
border-radius:16px;
overflow:hidden;
background:linear-gradient(145deg, rgba(255,255,192,.11), rgba(40,61,62,.43) 58%, rgba(214,46,46,.055));
-webkit-backdrop-filter:blur(12px) saturate(120%);
backdrop-filter:blur(12px) saturate(120%);
box-shadow:inset 0 1px 0 rgba(255,255,192,.17), 0 10px 24px -18px rgba(9,18,24,.62);
}
#entGrade .ent{
background:none;
border:0;
border-top:1px solid rgba(255,255,192,.22);
border-radius:0;
box-shadow:none;
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
#entGrade .ent:first-child{ border-top:0; }
/* Imagens colocadas pelo editor. A largura escolhida fica numa variável para
continuar cabendo no telefone mesmo quando foi ajustada numa tela maior. */
.imagem-adicionada{
display:block;
width:min(var(--imagem-largura,280px),calc(100% - 24px));
max-width:100%;
height:auto;
margin:24px auto;
border-radius:18px;
object-fit:contain;
box-shadow:0 18px 42px -24px rgba(9,18,24,.78);
}
/* Imagem colocada dentro de uma resposta do FAQ: participa da altura da
resposta aberta e fica inteiramente cortada pelo overflow quando fechada. */
.faq__r > .imagem-adicionada{
width:min(var(--imagem-largura,280px),calc(100% - 40px));
margin:0 auto 22px;
}
/* 3. DOMINGO LIVRE — os pratos viram uma lista só
O `overflow:hidden` é o que segura os cantos arredondados: sem ele, o
primeiro e o último item passam por cima da curva da borda. */
#livre #livreItens{
display:grid;
grid-template-columns:1fr;
gap:0;
border:1px solid rgba(60,44,0,.6);
border-radius:16px;
overflow:hidden;
background:linear-gradient(145deg,rgba(255,240,190,.95),rgba(246,216,119,.9));
box-shadow:inset 0 1px 0 rgba(255,247,214,.9), 0 10px 24px -18px rgba(60,44,0,.7);
cursor:auto;
}
#livre #livreItens .livre__item{
background:none;
border:0;
border-top:1px solid rgba(60,44,0,.32);
border-radius:0;
box-shadow:none;
-webkit-backdrop-filter:none;
backdrop-filter:none;
color:#3C2C00;
text-align:center;
padding:15px 20px;
}
#livre #livreItens .livre__item:first-child{ border-top:0; }
/* Os pratos tinham arrasto salvo do tempo em que eram pastilhas espalhadas
(`.livre__item[0]` a `[5]` no posicoes.json, de -181px a +328px). Dentro de
uma lista com `overflow:hidden`, esse deslocamento empurrava a "Feijoada
completa" para fora da caixa e ela sumia da tela sem nada acusar. Numa
lista, posição é ordem: o deslocamento perde o sentido e é anulado aqui.
Os valores continuam gravados no posicoes.json — tirar estas duas linhas
devolve tudo. */
#livre #livreItens .livre__item{ top:auto !important; left:auto !important;
/* o "Milk-shake" tinha `max-width:296px` salvo do editor: dentro da lista
isso encurtava a linha divisoria dele. Largura, numa lista, e a da caixa. */
max-width:none !important; width:auto !important; }
/* A prévia estava cortada no computador, e não era de hoje: o `posicoes.json`
guarda `largura: 396` para o `#diaCaixa` (redimensionado no celular), mas o
`estilo.css` manda o corpo virar DUAS colunas quando a *página* passa de
860px. Duas colunas de ~350px dentro de uma caixa de 396px com
`overflow:hidden` = a segunda coluna some. No celular nada disso acontece,
por isso passou despercebido.
Aqui quem decide o número de colunas passa a ser a largura da PRÓPRIA
caixa, não a da página. Estreita, uma coluna; larga, as duas de volta. */
#topoPrevia .dia{ container-type:inline-size; container-name:receita; }
@container receita (max-width:719px){
#topoPrevia .dia__corpo{ grid-template-columns:1fr; }
}
/* ===========================================================================
O CARTÃO "37 REFEIÇÕES PREMIUM" NA PALETA DOURADA — pedido do Arthur em
2026-09-02
Ele é o único item da entrega que fala do domingo livre, e agora usa a
mesma superfície dos pratos daquela seção: o ouro claro #F6D877 com texto
#3C2C00. Os valores abaixo são cópia literal de `#livre #livreItens`, para
os dois combinarem de verdade — mudou lá, mudar aqui.
O selo do número é o contrário: fundo quase preto com o número em ouro,
igual ao rótulo "DIA com refeição LIVRE". O amarelo-claro que ele tinha
sumiria por cima do dourado.
Por que `:has()` e não `:nth-child(4)`: o Arthur pôs uma imagem dentro da
lista da entrega, então o quarto filho de `#entGrade` é a imagem, não o
cartão. O `data-campo` vem do índice no `conteudo.js` e não se confunde.
Trocar este item de lugar na lista muda o número dentro dos colchetes.
=========================================================================== */
#entGrade .ent:has([data-campo="entrega.itens[3].titulo"]){
background:linear-gradient(145deg,#FFFDD0 0%,#F9E076 62%,#FFC107 100%);
border-top-color:rgba(137,81,41,.52);
box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 10px 24px -18px rgba(137,81,41,.72);
}
#entGrade .ent:has([data-campo="entrega.itens[3].titulo"]) .ent__t,
#entGrade .ent:has([data-campo="entrega.itens[3].titulo"]) .ent__x{
color:#895129;
}
#entGrade .ent:has([data-campo="entrega.itens[3].titulo"]) .ent__i{
background:#895129;
color:#FFC107;
}
/* O item seguinte encosta neste: a linha clara que os separa fica pálida
sobre o ouro. Ela passa a ser escura, como as divisórias da lista dourada. */
#entGrade .ent:has([data-campo="entrega.itens[3].titulo"]) + .ent{
border-top-color:rgba(137,81,41,.52);
}
/* O cartão dourado encostando no vidro — pedido do Arthur em 2026-09-02
Ele estava com as quatro pontas quadradas, boiando numa moldura escura de
10px: o `#entGrade` tem `padding:10px`, e o cartão parava ali. Como este é o
último item que aparece, o pé dele tinha de acompanhar a curva do vidro.
Tirar o padding do `#entGrade` resolveria — e mexeria nos cartões 01 e 02,
que o Arthur mandou não tocar. Então o cartão é que se estica: 10px de
margem negativa nos dois lados e embaixo, e os mesmos 10px devolvidos ao
recuo interno, para o texto continuar exatamente onde estava. A borda de
1px do vidro fica de fora de propósito: é o fio que desenha o contorno.
O raio de baixo é 15px, e não 16: o `border-radius` do vidro é medido por
fora, e por dentro da borda de 1px sobra 15. Os cantos de cima ficam retos,
porque ali encosta o cartão de cima. */
#entGrade .ent:has([data-campo="entrega.itens[3].titulo"]){
margin:0 -10px -10px;
padding:22px 30px 32px;
border-radius:0 0 15px 15px;
}
/* ================= O PREÇO EM DOIS TEMPOS — pedido do Arthur em 2026-09-03
Os dois preços dividiam o mesmo instante: na linha do tempo da oferta o
"R$ 97,00" entrava em -=0.4 e o "R$ 47,00" logo atrás, em -=0.25, então
quem olhava via os dois surgirem juntos. O Arthur pediu o contrário — o 97
chega sozinho e grande, é riscado, vira poeira e some, e só
depois o 47 aparece no lugar de destaque.
O risco não pode ser o `text-decoration:line-through`: não há como animar o
traço crescendo. Aqui ele vira um `::after` de 2px que cresce da esquerda
para a direita, comandado pela variável `--risco`, que o GSAP move de 0 a 1.
A classe `preco--doisTempos` é posta pelo JavaScript. Sem JavaScript nada
disto vale, e o risco nativo do CSS continua onde sempre esteve. */
.preco--doisTempos .preco__de{
text-decoration:none;
position:relative;
}
.preco--doisTempos .preco__de::after{
content:"";
position:absolute;
left:-1px; right:-1px;
top:52%;
height:2px;
border-radius:2px;
background:currentColor;
transform:scaleX(var(--risco,0));
transform-origin:left center;
pointer-events:none;
}
/* A poeira do 97 — pedido do Arthur em 2026-09-03: ele não recua para o canto,
ele deixa de existir. O texto é copiado para um canvas do tamanho da caixa
do preço, com folga em volta para os grãos terem para onde ir, e o elemento
de verdade some do fluxo no mesmo quadro — é isso que deixa o 47 se
centralizar sozinho. O canvas é absoluto, então precisa da âncora aqui. */
.preco--doisTempos{ position:relative; }
.preco__poeira{
position:absolute;
pointer-events:none;
z-index:0; /* a poeira passa POR TRAS do 47 que esta chegando */
}
/* O balão “E QUAL O PREÇO?” nasce de grãos antes da entrada do 97. O canvas
fica preso ao cartão; no fim, uma onda revela o balão real por baixo dele. */
#oferta .env{ position:relative; }
.rotulo-preco__poeira{
position:absolute;
pointer-events:none;
z-index:3;
}
#oferta .olho.rotulo-preco--formando{
position:relative;
z-index:4;
-webkit-mask-image:linear-gradient(90deg,
#000 calc(var(--revela-rotulo,-20%) - 15%),
transparent calc(var(--revela-rotulo,-20%) + 7%));
mask-image:linear-gradient(90deg,
#000 calc(var(--revela-rotulo,-20%) - 15%),
transparent calc(var(--revela-rotulo,-20%) + 7%));
}
/* A revelacao do 47 — pedido do Arthur em 2026-09-03: a troca por fade seco
ficava dura. Agora o numero se solidifica da esquerda para a direita, na
mesma direcao em que os graos vieram, e a poeira apaga atras dessa onda.
Quem move a variavel e o proprio desenho da poeira, entao as duas coisas
nao podem sair de sincronia. Em 100% a mascara ja revela tudo; o JavaScript
ainda a remove no fim, para nao deixar uma camada de composicao de graca. */
.preco--doisTempos .preco__por{
position:relative; z-index:1;
-webkit-mask-image:linear-gradient(90deg,
#000 calc(var(--revela,100%) - 15%),
transparent calc(var(--revela,100%) + 7%));
mask-image:linear-gradient(90deg,
#000 calc(var(--revela,100%) - 15%),
transparent calc(var(--revela,100%) + 7%));
}
/* ================= PALETA DA OFERTA — pedido do Arthur em 2026-09-03
A paleta vale **somente dentro do cartão do preço**. Ela entra redefinindo as
variáveis dentro de `#oferta .env`: tudo ali dentro herda as cores novas, e
nada fora do cartão é tocado. Apagar este bloco devolve o cartão à paleta da
página.
TESTE COM A PALETA DE CINZAS — e o aviso que vem junto.
#FFFFFF branco fundo do cartão
#848484 cinza médio todos os textos, o preço e o botão
#A2A2A2 cinza bordas
#C1C1C1 cinza claro o 97 riscado
#E0E0E0 quase branco fundo dos selos
**NENHUM PAR DESTA PALETA CHEGA AO MÍNIMO DE CONTRASTE PARA TEXTO.** Medidos
os 25 pares possíveis: o melhor é o mais escuro sobre o mais claro, e dá
**3,74:1**. O mínimo da régua para texto normal é 4,50:1. Só texto grande
passa, e por pouco — o preço, e nada mais.
O que reprova, com o número:
textos de apoio #848484 sobre branco 3,74:1 precisa de 4,50
o 97 riscado #C1C1C1 sobre branco 1,80:1
texto do botão branco sobre #848484 3,74:1 precisa de 4,50
A paleta não tem nenhum tom escuro, e é disso que ela precisa: um sexto tom
perto do preto resolveria tudo de uma vez, sem mexer nos cinco. O arranjo
abaixo é o melhor possível usando só os cinco. */
#oferta .env{
--destaque:#848484;
--texto:#848484;
--suave:#848484;
--quente:#848484;
--borda:#A2A2A2;
background:#FFFFFF;
border-color:#A2A2A2;
color:#848484;
}
/* ===== O BRANCO QUE ABRAÇA O CONTEÚDO — pedido do Arthur em 2026-09-05 =====
O cartão nascia do tamanho da coluna, com um vazio grande dentro enquanto a
cena do preço ainda não tinha tocado. Agora o branco começa em volta do
número e vai abrindo conforme cada peça aparece.
Quem cresce é o FUNDO, não a caixa: o `.env` mantém o tamanho de layout de
sempre, e o branco, a borda e o vidro passam para um `::before` que recebe
quatro recuos por variável. Mexer na largura do próprio `.env` reposicionaria
os dois canvases de poeira, que são filhos dele e ficam presos em px, e ainda
mudaria onde cada texto quebra de linha.
Sem JavaScript os quatro recuos ficam em zero e o desenho é o mesmo de antes.
**`z-index:-1` não serve aqui, e foi medido:** com ele o branco desaparecia
por completo no começo da cena — ia parar atrás do fundo da própria página.
O jeito que funciona é o fundo em `z-index:0` e o conteúdo em `z-index:1`,
já que `::before` posicionado seria pintado ACIMA de texto não posicionado. */
#oferta .env{
background:transparent;
border-color:transparent;
box-shadow:none;
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
#oferta .env > *{ position:relative; z-index:1; }
#oferta .env::before{
content:"";
position:absolute;
z-index:0;
top:var(--fundo-t,0px);
right:var(--fundo-r,0px);
bottom:var(--fundo-b,0px);
left:var(--fundo-l,0px);
background:#FFFFFF;
border:1px solid #A2A2A2;
border-radius:22px;
-webkit-backdrop-filter:blur(18px) saturate(1.3);
backdrop-filter:blur(18px) saturate(1.3);
box-shadow:inset 0 1px 0 rgba(255,255,192,.26), inset 0 -1px 0 rgba(9,18,24,.26);
/* A escrita dos recuos acontece uma vez por quadro, e só quando muda mais de
um pixel. A transição curta costura os degraus sem atrasar a abertura. */
transition:top .14s linear, right .14s linear, bottom .14s linear, left .14s linear;
}
@media (prefers-reduced-motion:reduce){
#oferta .env::before{ transition:none; }
}
/* o preço é o único texto grande o bastante para o 3,74:1 servir */
/* o preco e o titulo da oferta ganham a mesma cor quente da paleta original.
Sobre o branco da o 3,05:1, que passa para esses textos grandes. */
#oferta .preco__por{ color:#FF4000; text-shadow:none; }
/* o 97, que vai embora, no tom mais claro que ainda se enxerga */
#oferta .preco__de{ color:#C1C1C1; }
#oferta .preco__par,
/* A frase da garantia com a letra e a cor do "R$ 47,00" — pedido do Arthur em
2026-09-04. Mesmo caminho dos selos e da parcela. */
#oferta .garantia{
color:#FF4000;
font-family:"Rozha One",Georgia,serif;
font-weight:400;
}
#oferta #ofTitulo{ color:#FF4000; }
#oferta .olho{
color:#848484;
border-color:#A2A2A2;
background:#E0E0E0;
}
/* A letra dos selos e a mesma do "R$ 47,00" — pedido do Arthur em 2026-09-04.
A cor tambem: #FF4000, o mesmo laranja do 47 e da frase da pizza.
A borda e o fundo da capsula ficam como estavam: o Arthur disse que vai
escolher a cor dela depois. */
#oferta .selo{
color:#FF4000;
border-color:#C1C1C1;
background:#E0E0E0;
font-family:"Rozha One",Georgia,serif;
font-weight:400;
font-size:17px;
letter-spacing:normal;
}
/* botão azul liso com letra rosa nítida, a pedido do Arthur em 2026-09-03.
Azul chapado: sem o brilho branco por dentro, sem a faixa de luz que cruza
e sem a auréola colorida em volta — é isso que deixava o cinza com cara de
metal na foto dele.
O azul é escuro de propósito. Rosa forte sobre ele dá 4,0:1, o que passa
para o tamanho deste botão (18,5px em negrito). Sobre azul claro, o mesmo
rosa reprovaria. */
#oferta #ofBtn{
background:#0B2A75;
color:#FF3D9A;
border-color:#0B2A75;
box-shadow:none;
}
#oferta #ofBtn .btn__txt{ color:#FF3D9A; }
/* A letra do botao da oferta e a mesma do "R$ 47,00" — pedido do Arthur em
2026-09-04. A Rozha One so existe em peso 400: deixar o 800 que o .btn pede
faria o navegador engordar o desenho por conta propria (negrito falso), que
borra a serifa. Por isso o peso volta para 400 aqui.
O tamanho subiu de 18,5px para 24px pela regra de contraste: o rosa sobre
este azul da 4,0:1, que so passa como "texto grande" — e texto grande e
18,5px EM NEGRITO ou 24px em peso normal. Tirar o negrito sem subir o
tamanho reprovaria o botao. */
#oferta #ofBtn{
font-family:"Rozha One",Georgia,serif;
font-weight:400;
font-size:24px;
letter-spacing:normal;
}
#oferta #ofBtn .btn__brilho{ display:none; }
/* ===================== A LETRA DA PAGINA — 2026-09-04 =====================
O Arthur mandou a foto da "The Seasons". Ela e paga (Elena Genova / My
Creative Land) e a licenca de web e cobrada por visita, entao NAO entrou:
pagina que ele vende nao pode carregar fonte sem licenca. A Prata e a mais
proxima com licenca livre (Open Font License, no Google Fonts) — serifada
de contraste alto, mesmo ar de revista.
DUAS EXCECOES CAIRAM EM 2026-09-08, e as duas por pedido dele, com foto:
a secao dourada (#livre) e o cartao dourado das refeicoes premium, na
entrega — *"nessa primeira e segunda imagem eu preciso que voce altere as
fontes para que fique igual da pagina"*. As duas eram Manrope no corpo e
DM Serif Display no titulo, e agora seguem a Prata como o resto.
A que ficou de fora e so uma: o cartao do preco (#oferta). Ele nao foi
citado nas fotos, e as regras da Rozha One que vem antes mandam nele. */
body{ font-family:"Prata",Georgia,serif; }
h1,h2,h3{ font-family:"Prata",Georgia,serif; }
/* fora da troca: o cartao do preco inteiro. As regras da Rozha One que vem
antes continuam valendo por serem mais especificas. */
#oferta{ font-family:"Manrope",ui-sans-serif,system-ui,sans-serif; }
#oferta h1,#oferta h2,#oferta h3{ font-family:"DM Serif Display",Georgia,serif; }
/* ===================== ZOOM NA IMAGEM — 2026-09-04 =======================
A tela cheia que abre quando se toca numa imagem posta pelo editor.
Nasce fora do fluxo e so aparece quando ganha a classe --visivel: assim ela
nao ocupa espaco nem entra na conta de altura de nenhuma secao. */
.zoom-fundo{
position:fixed;
inset:0;
z-index:9998; /* abaixo do botao "Editar", que fica em 9999 */
display:none;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(9,14,24,.86);
-webkit-backdrop-filter:blur(6px);
backdrop-filter:blur(6px);
cursor:zoom-out;
overscroll-behavior:contain;
}
.zoom-fundo--visivel{ display:flex; }
.zoom-figura{
max-width:100%;
/* Altura em `dvh` e nao em `vh`: no telefone a barra de endereco entra e sai
durante a rolagem, e o `vh` continua contando a tela inteira — a imagem
ficava com o pe cortado. */
max-height:92vh; /* reserva, para navegador que nao conhece dvh */
max-height:92dvh;
width:auto;
height:auto;
border-radius:14px;
box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
cursor:default;
}
/* ===== A ABERTURA DA RESPOSTA DO FAQ — 2026-09-04 =======================
O Arthur reclamou que abrir a pergunta ficou arrastado depois que o bloco
mudou de lugar. Duas coisas custam caro numa animacao de altura, e as duas
estao aqui dentro:
`contain:layout paint` diz ao navegador que nada dentro desta caixa muda o
desenho de fora dela. Sem isso, cada quadro da abertura obriga a refazer a
conta da secao inteira — e esta resposta carrega uma imagem de 1533px de
altura no arquivo.
`will-change:height` avisa que a altura vai mudar, para o navegador se
preparar antes de o primeiro quadro chegar. Fica so no `.faq__i[aberto]`
e nao na regra geral: `will-change` ligado o tempo todo em sete caixas
consome memoria de video sem devolver nada. */
.faq__r{
contain:layout paint;
}
.faq__i[aberto] > .faq__r{
will-change:height;
}
/* ================= A RÉGUA DE EXPOSIÇÃO — 2026-09-04 ====================
Refeita no mecanismo do aparelho, depois que o Arthur mandou analisar o
exemplo do Motion e a comparação mostrou que a primeira versão estava
invertida. O que o exemplo faz, medido lá:
- 41 traços iguais, e NENHUM apaga com o progresso. A fila é sempre a mesma.
- Todos ficam cortados ao meio (`clip-path`), menos o que está no centro:
esse aparece inteiro. Não é um traço maior — é o mesmo traço com o corte
aberto.
- O marcador NÃO anda. Quem desliza é a fila, por trás dele.
- As pontas somem por máscara, e é isso que dá a impressão de fila sem fim:
some quem CHEGA na ponta, não quem já passou.
- Marca mais visível de cinco em cinco, como numa fita métrica.
Aqui a fila é vertical, então o corte é na largura em vez de na altura. */
.regua{
position:fixed;
right:3px;
/* `svh` e não `%`: no telefone a barra de endereço entra e sai durante a
rolagem, a altura da janela muda, e `50%` de uma altura que muda leva a
régua junto. Medido: de 900px para 760px de janela, ela andava 70px.
O `svh` é a altura da janela pequena — a que tem a barra visível — e não
muda quando a barra some. */
top:50%; /* reserva, para navegador que não conhece svh */
top:50svh;
transform:translateY(-50%);
z-index:60; /* acima da página, abaixo da barra de edição */
/* Não recebe toque: é um aviso de leitura, não um controle. Encostar nela no
telefone não pode roubar a rolagem nem o clique de nada que esteja atrás. */
pointer-events:none;
opacity:0;
transition:opacity 420ms ease;
}
.regua--visivel{ opacity:1; }
/* A janela por onde se vê a fila. É ela que tem altura fixa e a máscara; a fila
lá dentro é bem mais comprida e passa por aqui. */
.regua__janela{
position:relative;
height:190px;
width:16px;
overflow:hidden;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);
}
/* A fila inteira. Move por `transform`, que o navegador anima sem refazer a
conta do desenho. */
.regua__fila{
position:absolute;
top:0;
right:0;
display:flex;
flex-direction:column;
align-items:flex-end;
/* O vao entre os tracos e o que faz a fila ser mais comprida que a janela.
Sem ele os tracos ficam colados: 90 tracos de 2px dao 180px, menos que os
190px da janela, e a regua praticamente nao desliza. Com 6px, a fila mede
720px e corre 530px ao longo da pagina. */
gap:6px;
will-change:transform;
}
.regua__t{
width:16px;
height:2px;
border-radius:1px;
background:var(--texto,#ffffc0);
opacity:.3;
/* Cortado ao meio: sobra a metade da direita, encostada na borda. O traço do
centro tem esse corte aberto e é o único que aparece inteiro. */
-webkit-clip-path:inset(0 0 0 50%);
clip-path:inset(0 0 0 50%);
transition:clip-path 180ms ease, opacity 180ms ease, background-color 180ms ease;
}
/* De cinco em cinco, a marca graduada — mais visível que as do meio. */
.regua__t--marca{ opacity:.6; }
/* O traço que está passando pelo centro. */
.regua__t--agora{
opacity:1;
background:#ffffc0;
-webkit-clip-path:inset(0);
clip-path:inset(0);
}
/* Tela larga: a régua ganha corpo e afasta da borda. */
@media (min-width:900px){
.regua{ right:26px; }
.regua__janela{ height:240px; width:22px; }
.regua__t{ width:22px; height:2px; }
}
/* ================= A CENA DE ENTRADA — 2026-09-05 =======================
Pedido do Arthur: quem chega do anúncio vê primeiro um garfo espetando uma
coxa de frango, uma bolha nasce atrás dele, gira meia volta, vira quadrado e
cresce até virar o cartão do título. Os tempos e o comportamento foram
medidos no exemplo "Pokopia: Modal" do Motion — o código de lá é do Motion+,
pago, e não foi usado.
A camada inteira é montada e apagada pelo `animacao.js`. Ela só existe
durante a cena, e nunca no modo `?editar`.
As três camadas são as mesmas do exemplo, de fora para dentro: a listra
branca, a moldura vermelha e o miolo branco. As medidas (5px de listra,
10px de moldura) são as mesmas do cartão de verdade, logo abaixo — é isso
que faz a troca no último quadro não aparecer. */
/* ---- A ESPERA, ANTES DE A CENA EXISTIR ----
A classe `cena-vem` entra no `html` já no `head` (o script está lá) e sai
quando a cena assume o comando, dentro de `cenaDeEntrada`. Enquanto ela
está posta, a página inteira fica invisível e o preto cobre a tela — é o
mesmo preto do `.abertura__preto`, então a passagem de uma coisa para a
outra não se vê. **AS DUAS CORES TÊM DE CONTINUAR IGUAIS**: divergindo, a
tela troca de cor sozinha no meio do carregamento.
Esconder por OPACIDADE, e não por `display`, é a mesma razão de sempre: o
`display:none` mudaria o layout e o ScrollTrigger mediria a página errada.
`#fundo` e `#barraProgresso` entram na lista porque moram fora do
`#rolagem-externa` — sem eles nomeados, a arte de fundo aparecia sozinha na
tela preta. */
html.cena-vem, html.cena-vem body{ background:#000; }
/* Os dois brilhos redondos do fundo moram em pseudo-elementos do `body`, e
pintar o `body` de preto não os apaga: eles são camadas próprias, por cima.
Sem esta linha ficava uma mancha clara no canto de cima e da esquerda antes
da cena — pouca coisa, mas o pedido era tela limpa. */
html.cena-vem body::before,
html.cena-vem body::after{ opacity:0 !important; }
html.cena-vem #rolagem-externa,
html.cena-vem #fundo,
html.cena-vem #barraProgresso,
html.cena-vem #compraFixa,
html.cena-vem #btnModoEdicao{ opacity:0 !important; }
/* ---- O FUNDO DE SHADER ---------------------------------------------------
O canvas do shader do 21st.dev, atrás da página inteira. O JavaScript o põe
como PRIMEIRO filho do `body`; aqui ele só ganha lugar e ordem. Qual efeito
está rodando é decisão do `animacao.js` (a ficha `FUNDO`) — este bloco serve
a qualquer um deles.
`z-index:0` o deixa na mesma camada do `#fundo` (o SVG dos riscos) e dos dois
brilhos do `body`, e embaixo do `#rolagem-externa`, que é `z-index:1`. Como o
empate de camada se resolve pela ordem do documento, ser o primeiro filho é o
que o mantém atrás de todos eles.
NASCE APAGADO e só acende quando o quadrado da abertura começa a abrir — a
classe é posta pelo JavaScript. Sem a transição, ele apareceria de estalo
por trás do furo. */
.fundo-shader{
position:fixed;
inset:0;
z-index:0;
display:block;
opacity:0;
pointer-events:none;
transition:opacity .45s ease-out;
}
.fundo-shader--aceso{ opacity:1; }
/* O canvas é opaco e cobre o espresso do `body`. Os dois brilhos redondos e os
riscos do `#fundo` continuam por cima dele, que é o que amarra o efeito à
página em vez de deixá-lo solto. */
@media (prefers-reduced-motion: reduce){
.fundo-shader{ transition:none; }
}
#abertura{
position:fixed;
inset:0;
z-index:9000;
pointer-events:none;
}
.abertura__forma{
position:absolute;
top:0; left:0;
background:#C6C0B9;
/* a forma muda de tamanho a cada quadro; o aviso poupa o navegador de
descobrir isso sozinho */
will-change:transform,width,height;
}
.abertura__moldura{ position:absolute; inset:5px; background:#422701; }
.abertura__miolo{ position:absolute; inset:10px; background:#D6B588; }
/* O preto cobre a página inteira enquanto a cena roda — pedido do Arthur: nada
do fundo da página aparece antes da hora. Ele é a camada de baixo de tudo
dentro da cena, e no fim é aberto pelo quadrado que cresce, revelando a
página que já está pronta por trás.
PRETO DE VERDADE, E NÃO O CAFÉ DA PALETA — pedido do Arthur em 2026-09-05:
*"ele não tem que tá marrom, ele tem que tá todo preto, para quando o
quadrado aparecer aí sim dar para perceber a diferença entre o preto e o
marrom"*. Com o café `#2B1B0D` aqui, a camada e o fundo da página eram quase
a mesma cor e o quadrado abria sem se ver. É o contraste que faz o efeito
existir. */
.abertura__preto{
position:absolute;
inset:0;
background:#000;
will-change:opacity;
}
/* As duas fotos que se encontram. Elas entram de fora da tela, então precisam
estar posicionadas pelo centro — daí o `xPercent/yPercent` de -50 no
JavaScript, e não uma margem aqui. */
/* A fumaça da saída. Fica acima das fotos e abaixo de nada — ela é a última
coisa que se vê da comida antes de a página aparecer. */
/* O quadrado que abre a página no fim da cena. Fica acima da fumaça, porque é
a última coisa que cobre a tela: o café mora aqui dentro depois que o
`.abertura__preto` sai, e é este canvas que vai sendo furado. */
.abertura__abre{
position:absolute;
inset:0;
z-index:4;
pointer-events:none;
}
.abertura__fumaca{
position:absolute;
pointer-events:none;
/* Acima das duas fotos, e o número precisa estar escrito: quem tem `z-index`
numérico fica por cima de quem tem `auto`, então sem esta linha o pó ficava
ATRÁS do garfo e da coxa durante os 0,34s em que elas ainda estão saindo. */
z-index:3;
}
/* AS FOTOS NASCEM APAGADAS, e isso conserta um defeito que o Arthur pegou: o
garfo e a coxa piscavam no CANTO DE CIMA E DA ESQUERDA antes da cena.
O motivo é a ordem das coisas. A camada entra no documento assim que
`cenaDeEntrada` começa, mas quem manda as duas fotos para fora da tela é um
`gsap.set` que só roda depois de `decode()` das imagens e da fonte do título
chegarem. Nesse intervalo elas estavam em `top:0; left:0` — o canto — e
visíveis. Apagadas aqui, o `gsap.set` as encontra já no lugar certo e é ele
quem as acende.
O mesmo vale para a forma: ela nasce sem tamanho, mas apagada é garantia. */
.abertura__forma{ opacity:0; }
.abertura__coxa,
.abertura__garfo{
position:absolute;
top:0; left:0;
height:auto;
opacity:0;
will-change:transform,opacity;
-webkit-user-select:none;
user-select:none;
}
/* Em `vw`, e não em `cqw`: a camada da cena mora no `body`, fora do
`#rolagem-externa`, então não tem container de consulta nenhum acima dela. */
/* Menores que a bolha de 200px de propósito: é ela que tem de abraçar o
encontro, como o disco atrás do ícone no exemplo. Fotos maiores que a bolha
deixavam a cena com cara de dois adesivos soltos na tela. */
.abertura__coxa{ width:clamp(92px,24vw,140px); }
.abertura__garfo{ width:clamp(110px,30vw,170px); }
/* O GARFO PASSA POR TRÁS DA COXA, e é isso que faz ele ENTRAR nela em vez de
ficar deitado por cima — foi o que o Arthur viu. No mundo real, garfo que
espeta some dentro da carne: com a coxa na frente, os dentes desaparecem
atrás dela e só o cabo continua à vista. */
.abertura__garfo{ z-index:1; }
.abertura__coxa{ z-index:2; }
/* ---- O cartão do título, agora branco com moldura vermelha ----
Ele é o ponto de chegada da cena, então tem de ser exatamente as três
camadas dela: listra branca de 5px (o `box-shadow`), moldura vermelha de
10px (a `border`) e miolo branco (o `background`).
O texto muda de cor junto para manter contraste sobre a paleta Cappuccino. */
#topo .env{
background:#D6B588;
border:10px solid #422701;
box-shadow:0 0 0 5px #C6C0B9;
-webkit-backdrop-filter:none;
backdrop-filter:none;
color:#422701;
}
#tituloTopo{ color:#422701; }
.topo__sub{
background:#C6C0B9;
border-color:rgba(66,39,1,.28);
color:#422701;
-webkit-backdrop-filter:none;
backdrop-filter:none;
box-shadow:none;
}
/* As linhas de dentro sumiam no fundo claro, e `inherit` não bastou: existe um
`#subTopo{color:var(--texto) !important}` mais acima nesta mesma folha, e ele
ganhava de qualquer regra sem `!important`. Aqui a cor é forçada de volta.
A primeira linha acompanha o espresso para não reintroduzir o vermelho antigo. */
#subTopo, #subTopo *{ color:#422701 !important; }
#subTopo b{ color:#422701 !important; }
/* ---- A LUZ QUE CORRE A MOLDURA DO CARTÃO DO TOPO — 2026-09-06 ------------
Pedido do Arthur com o link: `21st.dev/@ibelick/components/border-trail`.
DE ONDE VEIO: componente `BorderTrail` de Julien Thibeaut (@ibelick), do
motion-primitives. O repositório é **MIT** (conferido na ficha do GitHub
antes de usar), e o código está em
`github.com/ibelick/motion-primitives/blob/main/components/core/border-trail.tsx`.
Crédito visível também no `index.html`.
O MECANISMO É O DELE, LINHA POR LINHA:
1. uma caixa que cobre o cartão, com borda transparente e DUAS máscaras —
uma recortada no `padding-box` e transparente, outra recortada no
`border-box` e preta. Compostas por `intersect`, sobra só o anel da
borda: é isso que transforma um borrão solto num traço de moldura;
2. um quadrado do tamanho `--trilha-tamanho` correndo o
`offset-path:rect(0 auto auto 0 round …)`, com o `offset-distance`
indo de 0% a 100% em 5 segundos, linear, para sempre.
O QUE MUDOU, E POR QUÊ:
- React virou CSS puro. `motion.div` animando `offsetDistance` é o mesmo que
um `@keyframes` de duas paradas, e esta página não tem React;
- o raio do caminho é o do CARTÃO, e não o `size` do autor. No original os
dois são o mesmo número porque o componente não sabe em que caixa vai
entrar; aqui sabe-se, e o traço tem de acompanhar a curva da moldura;
- o anel entra POR DENTRO da moldura, e é imposição do cartão: o
`#topo .env` tem `overflow:hidden` (é ele quem faz o cartão da cena
revelar o conteúdo enquanto cresce), então filho nenhum sobrevive do lado
de fora da borda. O anel fica encostado na face interna dos 10px de
espresso, que é o lugar mais próximo que existe.
`inset:0` cobre a caixa de conteúdo mais o padding — que é justamente por
dentro da moldura. O raio de dentro de uma borda é o de fora MENOS a
espessura dela, e é essa conta que o `--trilha-raio` faz: sem ela o traço
corta o canto em diagonal. */
.trilha{
/* Sem `offset-path` não há caminho, e sem `mask-composite` o borrão apareceria
inteiro dentro do cartão em vez de virar traço. Faltando qualquer um dos
dois, a moldura fica como sempre foi. */
display:none;
}
@supports ((offset-path:rect(0 auto auto 0 round 10px)) and
((mask-composite:intersect) or (-webkit-mask-composite:source-in))){
.trilha{
--trilha-raio:calc(clamp(28px,5cqw,52px) - 10px);
/* O TAMANHO É O COMPRIMENTO DO RASTRO, e não a espessura: o anel tem 10px,
então do quadrado de 60px do autor só se vê uma faixa de 10px de altura
por 60 de largura. Em 60 o traço parece um respingo; aqui ele vale por um
rastro que se enxerga entrando e saindo do canto. */
--trilha-tamanho:170px;
display:block;
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
border-radius:var(--trilha-raio);
border:10px solid transparent;
-webkit-mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000);
mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000);
-webkit-mask-clip:padding-box,border-box;
mask-clip:padding-box,border-box;
-webkit-mask-composite:source-in;
mask-composite:intersect;
}
.trilha__ponto{
position:absolute;
width:var(--trilha-tamanho);
aspect-ratio:1;
/* Um brilho redondo que se apaga nas pontas, no lugar do quadrado chapado
do autor: chapado, o traço entra e sai de estalo em cada volta.
O NÚCLEO É BRANCO, e a primeira tentativa não foi. Em mel (`#FFE2A9`) o
traço passava e não se via: o anel corre POR DENTRO da moldura, e o que
está atrás dele é a areia `#D6B588` — dois tons quentes e claros, com
diferença de luz perto de nenhuma. Fotografei três voltas para ter
certeza de que era isso, e não a animação parada. O branco tem o dobro
de luz da areia; o mel ficou no meio do brilho, que é onde ele acrescenta
a cor sem custar a leitura. */
background:radial-gradient(circle closest-side,
rgba(255,255,255,1),
rgba(255,226,169,.85) 40%,
rgba(255,226,169,0) 100%);
offset-path:rect(0 auto auto 0 round var(--trilha-raio));
animation:trilha-anda 5s linear infinite;
}
}
@keyframes trilha-anda{
from{ offset-distance:0%; }
to { offset-distance:100%; }
}
@media (max-width: 620px){
.trilha{ --trilha-raio:16px; --trilha-tamanho:130px; }
}
/* Quem pediu silêncio não leva luz correndo em volta do título. */
@media (prefers-reduced-motion: reduce){
.trilha{ display:none; }
}
/* ================= PALETA CAPPUCCINO — 2026-09-05 =======================
Base enviada pelo Arthur:
areia #D6B588
greige #C6C0B9
taupe #705E46
espresso #422701
A hierarquia repete sempre o mesmo contraste: superfície principal clara
(areia + greige) e conteúdo interno escuro (taupe + espresso). O creme e o
mel são apenas tints da própria paleta para texto legível. A seção dourada
das refeições premium e o cartão do preço ficam fora deste bloco. */
:root{
--cap-areia:#D6B588;
--cap-greige:#C6C0B9;
--cap-taupe:#705E46;
--cap-espresso:#422701;
--cap-creme:#F5E8D3;
--cap-mel:#FFE2A9;
/* ---- OS DEGRAUS DAS SUPERFÍCIES INTERNAS ----
Todos os cartões de dentro usavam UM gradiente só (taupe → espresso), e o
Arthur pegou: seção após seção, a mesma cor. Estes degraus abrem a mesma
escala em cinco paradas, sem cor nova nenhuma — canela e mocha são pontos
entre o taupe e o espresso que já existiam:
taupe #705E46 a cor da paleta (o mais claro)
canela #5E482A 40% do taupe ao espresso
mocha #503715 70% do taupe ao espresso
espresso #422701 a cor da paleta
café #2B1B0D o fundo da página (o mais escuro)
A ordem acompanha a leitura: claro no rigor, logo abaixo do topo claro, e
escurecendo até as perguntas no fim. Quem tem lista (entrega, perguntas)
ainda alterna entre dois degraus vizinhos, senão são sete retângulos
idênticos empilhados.
O LIMITE DE ATÉ ONDE CLAREAR NÃO É GOSTO, É CONTRASTE. O texto miúdo
desses cartões é greige (#C6C0B9): sobre o canela ele dá 4,8:1 e passa;
sobre o taupe cai para 3,5:1 e não passa. Por isso o degrau taupe só
aparece na seção do rigor, onde o texto miúdo (a descrição das fontes)
foi passado para creme logo abaixo. Clarear mais que isto exige mexer no
texto junto. */
--cap-canela:#5E482A;
--cap-mocha:#503715;
--fundo:var(--cap-espresso) !important;
--texto:var(--cap-creme) !important;
--destaque:var(--cap-areia) !important;
--quente:var(--cap-areia) !important;
--suave:var(--cap-greige) !important;
--papel:var(--cap-taupe) !important;
--borda:var(--cap-areia) !important;
--borda-forte:var(--cap-greige) !important;
--lab-vidro:rgba(112,94,70,.68);
--lab-linha:rgba(214,181,136,.55);
--lab-sombra:0 20px 48px -30px rgba(43,27,13,.88);
}
body{
background:
radial-gradient(circle at 8% 6%,rgba(214,181,136,.23),transparent 28rem),
radial-gradient(circle at 96% 25%,rgba(198,192,185,.13),transparent 26rem),
radial-gradient(circle at 48% 80%,rgba(112,94,70,.24),transparent 34rem),
var(--cap-espresso);
}
body::before{
background:radial-gradient(circle,rgba(214,181,136,.28),rgba(214,181,136,0) 68%);
}
body::after{
background:radial-gradient(circle,rgba(198,192,185,.18),rgba(198,192,185,0) 68%);
}
#fundo path,
#fundo circle,
#fundo ellipse{ stroke:var(--cap-areia); }
#fundoCamadaPerto path,
#fundoCamadaPerto circle{ stroke:var(--cap-greige); }
/* A abertura termina exatamente nas três camadas do cartão inicial.
O fundo da cena fica de FORA da paleta de propósito, e é a segunda vez que
ele muda: era branco, o Codex passou para o café `#2B1B0D` em 2026-09-05
para casar com a página, e no mesmo dia o Arthur pediu preto — porque o
quadrado que abre a página só se enxerga se a camada e o fundo tiverem cores
diferentes. Casar as duas foi o que tirou o efeito da vista. */
.abertura__preto{ background:#000; }
.abertura__forma{ background:var(--cap-greige); }
.abertura__moldura{ background:var(--cap-espresso); }
.abertura__miolo{ background:var(--cap-areia); }
#topo .env{
background:var(--cap-areia);
border-color:var(--cap-espresso);
box-shadow:0 0 0 5px var(--cap-greige),0 24px 58px -34px rgba(43,27,13,.9);
color:var(--cap-espresso);
}
#topo .env::after{
border-color:rgba(66,39,1,.28);
box-shadow:0 0 0 24px rgba(112,94,70,.055),0 0 0 62px rgba(198,192,185,.075),0 0 90px rgba(66,39,1,.16);
}
#tituloTopo{ color:var(--cap-espresso); }
.topo__sub{
background:var(--cap-greige);
border-color:rgba(66,39,1,.28);
color:var(--cap-espresso);
box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 14px 30px -24px rgba(66,39,1,.62);
}
#subTopo,
#subTopo *{ color:var(--cap-espresso) !important; }
#subTopo b{ color:var(--cap-espresso) !important; font-weight:700; }
/* Botão que leva à receita, e cartão da receita: cabeçalho claro, miolo café.
As cores do trilho e da bolinha saíram junto com as peças, em 2026-09-05. */
.arraste-receita{
background:linear-gradient(145deg,rgba(214,181,136,.96),rgba(198,192,185,.92));
border-color:rgba(66,39,1,.56);
color:var(--cap-espresso);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 34px -26px rgba(43,27,13,.8);
}
/* Com o metal montado, o creme da paleta passa do botão para o miolo — senão
ele cobriria a faixa de metal que devia ficar à mostra. */
.arraste-receita[data-metal]{ background:transparent; border-color:transparent; }
.arraste-receita[data-metal]::before{
background:linear-gradient(145deg,rgba(214,181,136,.96),rgba(198,192,185,.92));
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
.arraste-receita__rotulo{ color:var(--cap-espresso); }
/* Cartões grandes: o título vive no cappuccino claro. */
#problema .env,
#trocas .env,
#rigor .env,
#entrega .env,
#perguntas .env{
background:linear-gradient(145deg,rgba(214,181,136,.96),rgba(198,192,185,.92) 58%,rgba(214,181,136,.9));
border-color:rgba(66,39,1,.5);
color:var(--cap-espresso);
box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(66,39,1,.2),0 22px 48px -32px rgba(43,27,13,.82);
}
#perguntas .env{
padding-block:clamp(24px,4.8cqw,56px);
border:1px solid rgba(66,39,1,.5);
border-radius:28px;
}
/* ---- VIDRO LÍQUIDO NAS CAIXAS DE PERGUNTA -------------------------------
O Arthur pediu isto duas vezes. Em 2026-09-05 eu vesti o CARTÃO da seção, e
em 2026-09-06 ele mandou a foto das sete caixas e corrigiu: *"foi aplicado no
de fundo e não das perguntas de si"*. Hoje o vidro está em cada `.faq__i`, e
o cartão da seção saiu da frente.
O CARTÃO PRECISOU FICAR TRANSPARENTE, e não é enfeite: vidro só se enxerga
pelo que passa por trás dele. Com o cappuccino opaco atrás — ou com o próprio
cartão de vidro, que tem véu branco — a distorção e o desfoque das caixas
trabalhariam contra uma superfície lisa e não apareceriam. Hoje o que passa
por trás das sete caixas é o shader animado da página.
O componente original empilha QUATRO camadas, e aqui elas viram três:
1. a distorção -> `::before`, com `backdrop-filter` e o filtro SVG;
2. o véu branco -> o `background` do `::after`;
3. o brilho -> o `box-shadow` inset do MESMO `::after`;
4. o conteúdo -> os filhos da caixa, empurrados para a camada 3.
Juntar a 2 com a 3 não muda o desenho: uma é fundo e a outra é sombra
interna, e as duas cabem no mesmo elemento sem se atrapalhar.
DO AUTOR FICARAM: `blur(3px)`, o filtro SVG inteiro, os dois `inset` de 2px e
1px e as duas sombras de fora. Só duas coisas saíram do número dele, e as
duas por medida de contraste — a tinta escura que entrou e o véu branco que
desceu de 25% para 12%. O porquê está logo abaixo, na camada de baixo.
---- E ISTO TUDO SAIU DE CENA EM 2026-09-07 ----
O Arthur mandou o link do acordeão do shadcn e disse para aplicar aquele
modelo. O modelo não tem caixa nenhuma: cada pergunta é um fio divisório. Sem
caixa não há onde pôr vidro, então o vidro líquido saiu junto, e o cartão da
seção voltou a ser cappuccino opaco (ele só tinha ficado transparente para o
vidro das caixas ter o que distorcer atrás).
O bloco novo está no FIM deste arquivo, porque as regras de degrau espresso
que vêm mais abaixo pintariam o fundo das caixas de novo. O que ficou aqui é
só o texto acima, que explica o que existiu e por quê. Para trazer o vidro de
volta: `laboratorio.css.antes-do-faq-shadcn`. */
/* Restos da versão anterior, quando o vidro morava aqui. Ficam desligados por
escrito para ninguém procurar por que a seção tem duas camadas paradas. */
#perguntas .env::before,
#perguntas .env::after{ content:none; }
/* O conteúdo continua acima de qualquer camada que venha a existir aqui. */
#perguntas .env > *{ position:relative; z-index:2; }
/* As regras do vidro moravam aqui e saíram em 2026-09-07, com a troca para o
modelo do acordeão do shadcn. As medidas que elas produziram estão guardadas
no `CLAUDE-cardapio-anual.md`, seções 20.1 e 20.2 — a principal é a que vale
para qualquer texto sobre fundo animado: medir por bloco de 16×16 px e em
vários instantes, porque a média da caixa aprova o que o pior bloco reprova.
O desenho novo está no FIM deste arquivo. */
/* O filtro mora num SVG que não desenha nada: ele só empresta o `id`. Continua
declarado, e hoje ninguém o usa — o `