HTML direto no chat (versão refinada com o design system do site ao vivo):
```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cardápio • Emili Zaremba</title>
<meta name="description" content="Cardápio digital — bolos, cookies, brownies e brookies 100% sem glúten e sem leite.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=DM+Sans:ital,wght@0,400;0,500;0,700&display=swap" rel="stylesheet">
<style>
:root {
--bg-deep: #1A1209;
--bg-card: #2E2010;
--gold: #D4A96A;
--gold-dark: #B8843A;
--cream: #F5ECD7;
--muted: #A8926E;
--border: #4A3520;
}
- { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'DM Sans', system-ui, sans-serif;
background: var(--bg-deep);
color: var(--cream);
line-height: 1.65;
min-height: 100vh;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: radial-gradient(circle at 50% 20%, rgba(212, 169, 106, 0.08) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
body::after {
content: '';
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%22 height=%22100%22 filter=%22url(%23n)%22 opacity=%220.03%22/%3E%3C/svg%3E');
background-size: 120px 120px;
pointer-events: none;
z-index: 2;
mix-blend-mode: multiply;
}
.container {
max-width: 720px;
margin: 0 auto;
padding: 40px 24px;
position: relative;
z-index: 3;
}
header {
text-align: center;
margin-bottom: 56px;
}
.logo {
font-family: 'Playfair Display', Georgia, serif;
font-size: 48px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--cream);
margin-bottom: 12px;
}
.tagline {
font-size: 13px;
letter-spacing: 0.14em;
color: var(--muted);
text-transform: uppercase;
margin-bottom: 20px;
}
.hero-text {
max-width: 520px;
margin: 0 auto;
font-size: 15px;
color: var(--muted);
line-height: 1.7;
}
.selo {
display: inline-block;
background: rgba(212, 169, 106, 0.12);
border: 1px solid var(--gold);
color: var(--gold);
font-size: 11px;
letter-spacing: 0.1em;
padding: 8px 24px;
border-radius: 100px;
margin-top: 24px;
font-weight: 600;
}
.section {
margin-bottom: 56px;
}
.section-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 26px;
font-weight: 700;
color: var(--cream);
margin-bottom: 24px;
position: relative;
padding-left: 32px;
}
.section-title::before {
content: '';
position: absolute;
left: 0;
top: 13px;
width: 24px;
height: 3px;
background: linear-gradient(90deg, var(--gold), var(--gold-dark));
border-radius: 3px;
}
.category-intro {
font-size: 14px;
color: var(--muted);
max-width: 580px;
margin-bottom: 24px;
line-height: 1.7;
}
.item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
margin-bottom: 14px;
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
}
.item:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}
.item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}
.item-name {
font-size: 18px;
font-weight: 600;
color: var(--cream);
line-height: 1.3;
}
.item-price {
font-size: 20px;
font-weight: 700;
color: var(--gold);
white-space: nowrap;
padding-left: 16px;
text-align: right;
}
.item-meta {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.badge {
display: inline-block;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 11px;
border-radius: 100px;
background: rgba(212, 169, 106, 0.15);
color: var(--gold);
border: 1px solid var(--gold);
font-weight: 600;
}
.item-desc {
font-size: 14px;
color: var(--muted);
line-height: 1.65;
}
.highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin: 32px 0;
}
.highlight-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px;
text-align: center;
}
.highlight-card .icon {
font-size: 24px;
color: var(--gold);
margin-bottom: 12px;
}
.highlight-card h4 {
font-size: 14px;
font-weight: 600;
color: var(--cream);
margin-bottom: 8px;
}
.highlight-card p {
font-size: 13px;
color: var(--muted);
}
.note {
background: rgba(212, 169, 106, 0.06);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
font-size: 14px;
color: var(--muted);
margin-top: 24px;
}
footer {
text-align: center;
margin-top: 72px;
padding-top: 32px;
border-top: 1px solid var(--border);
font-size: 13px;
color: var(--muted);
}
.print-note {
font-size: 11px;
color: var(--muted-dark);
margin-top: 12px;
}
@media print {
body { background: white; color: #1A1209; }
body::before, body::after { display: none; }
.container { max-width: 100%; padding: 20px; }
.item { background: white; border: 1px solid #ddd; page-break-inside: avoid; }
.item-price { color: #1A1209; }
.selo { background: #f5f0e8; border-color: #c9963b; color: #c9963b; }
.highlight-card { background: #f8f4eb; border-color: #d4c4a8; }
}
@media (max-width: 480px) {
.logo { font-size: 38px; }
.item { padding: 20px; }
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">Emili Zaremba</div>
<div class="tagline">Confeitaria artesanal</div>
<p class="hero-text">
Receitas desenvolvidas com ingredientes selecionados e muito carinho.
Todos os nossos produtos são 100% sem glúten e sem leite.
</p>
<div class="selo">
SEM GLÚTEN E SEM LEITE
</div>
</header>
<div class="highlights">
<div class="highlight-card">
<div class="icon">🌾</div>
<h4>Sem glúten</h4>
<p>Massa e recheios formulados sem farinha de trigo</p>
</div>
<div class="highlight-card">
<div class="icon">🥛</div>
<h4>Sem leite</h4>
<p>Substitutos vegetais de alta qualidade em todas as receitas</p>
</div>
<div class="highlight-card">
<div class="icon">🍫</div>
<h4>Chocolate premium</h4>
<p>Usamos chocolate 70% em todas as versões com cacau</p>
</div>
</div>
<div class="section">
<h2 class="section-title">Bolos de Cenoura</h2>
<p class="category-intro">
Nosso clássico. Massa úmida feita com cenoura orgânica, recheios artesanais
e chocolate de origem. Textura macia e sabor equilibrado.
</p>
<div class="item">
<div class="item-header">
<div class="item-name">Recheado Grande</div>
<div class="item-price">R$ 160,00</div>
</div>
<div class="item-meta">
<span class="badge">10–12 porções</span>
</div>
<p class="item-desc">
Bolo de cenoura com recheio generoso de chocolate 70% e nozes.
Finalizado com cobertura de chocolate e crocantes. Ideal para celebrações.
</p>
</div>
<div class="item">
<div class="item-header">
<div class="item-name">Recheado Pequeno</div>
<div class="item-price">R$ 120,00</div>
</div>
<div class="item-meta">
<span class="badge">6–8 porções</span>
</div>
<p class="item-desc">
Versão menor do nosso bolo recheado. Perfeito para encontros menores
ou para presentear.
</p>
</div>
<div class="item">
<div class="item-header">
<div class="item-name">Caseirinho</div>
<div class="item-price">R$ 90,00</div>
</div>
<div class="item-meta">
<span class="badge">4–6 porções</span>
</div>
<p class="item-desc">
Formato caseiro, ideal para o dia a dia ou para experimentar o sabor
clássico em menor escala.
</p>
</div>
</div>
<div class="section">
<h2 class="section-title">Amanteigados</h2>
<p class="category-intro">
Biscoitos amanteigados de textura delicada e sabor marcante.
Perfeitos para acompanhar café ou chá.
</p>
<div class="item">
<div class="item-header">
<div class="item-name">Laranja</div>
<div class="item-price">R$ 18,00</div>
</div>
<div class="item-meta">
<span class="badge">200g</span>
</div>
<p class="item-desc">
Amanteigado com raspas de laranja sicília e toque sutil de baunilha.
</p>
</div>
<div class="item">
<div class="item-header">
<div class="item-name">Coco</div>
<div class="item-price">R$ 22,00</div>
</div>
<div class="item-meta">
<span class="badge">200g</span>
</div>
<p class="item-desc">
Versão com coco ralado fresco e leve toque de cardamomo.
</p>
</div>
</div>
<div class="section">
<h2 class="section-title">Cookies</h2>
<p class="category-intro">
Cookies de textura crocante por fora e macia por dentro,
com pedaços de chocolate e nozes.
</p>
<div class="item">
<div class="item-header">
<div class="item-name">Cookie Individual</div>
<div class="item-price">R$ 12,00</div>
</div>
<div class="item-meta">
<span class="badge">60g</span>
</div>
<p class="item-desc">
Nosso cookie clássico com chocolate 70% e nozes pecan.
</p>
</div>
<div class="item">
<div class="item-header">
<div class="item-name">Caixa com 6 unidades</div>
<div class="item-price">R$ 54,00</div>
</div>
<div class="item-meta">
<span class="badge">360g</span>
</div>
<p class="item-desc">
Caixa com seis cookies — ideal para compartilhar ou guardar.
</p>
</div>
</div>
<div class="section">
<h2 class="section-title">Brownies</h2>
<p class="category-intro">
Brownies densos e úmidos, com chocolate de alta porcentagem
e textura fudgy característica.
</p>
<div class="item">
<div class="item-header">
<div class="item-name">Brownie Individual</div>
<div class="item-price">R$ 18,00</div>
</div>
<div class="item-meta">
<span class="badge">90g</span>
</div>
<p class="item-desc">
Brownie clássico com chocolate 70% e nozes. Textura fudgy por dentro.
</p>
</div>
<div class="item">
<div class="item-header">
<div class="item-name">Caixa com 4 unidades</div>
<div class="item-price">R$ 54,00</div>
</div>
<div class="item-meta">
<span class="badge">300g</span>
</div>
<p class="item-desc">
Caixa com quatro brownies — ótimo para presentear ou ter em casa.
</p>
</div>
</div>
<div class="section">
<h2 class="section-title">Brookies</h2>
<p class="category-intro">
A fusão perfeita entre brownie e cookie. Crosta crocante com
interior macio e chocolate intenso.
</p>
<div class="item">
<div class="item-header">
<div class="item-name">Brookie Individual</div>
<div class="item-price">R$ 20,00</div>
</div>
<div class="item-meta">
<span class="badge">90g</span>
</div>
<p class="item-desc">
Metade brownie, metade cookie. Textura contrastante e sabor marcante.
</p>
</div>
<div class="item">
<div class="item-header">
<div class="item-name">Caixa com 4 unidades</div>
<div class="item-price">R$ 66,00</div>
</div>
<div class="item-meta">
<span class="badge">300g</span>
</div>
<p class="item-desc">
Caixa com quatro brookies — a opção mais pedida para encontros.
</p>
</div>
</div>
<div class="note">
<strong>Encomendas e entregas:</strong> Todos os produtos são feitos sob encomenda.
Prazo médio de 48h. Entregamos em Florianópolis e região.
Pedidos pelo WhatsApp ou Instagram.
</div>
<footer>
<p>Todos os produtos são produzidos em ambiente livre de glúten e leite.</p>
<p class="print-note">Imprima este cardápio em A4 para uso em eventos ou ponto de venda.</p>
</footer>
</div>
</body>
</html>
```