Aqui o HTML completo (copia e cola num arquivo .html ou salva direto):
```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. Receitas artesanais com ingredientes selecionados.">
<!-- Google Fonts -->
<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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
<style>
@import "../design-system/tokens.css";
/* ============================================================
Cardápio Digital — Emili Zaremba
Editorial gourmet light/cream tone
Mobile-first + Print A4 ready
============================================================ */
, ::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
background: var(--ivory);
color: var(--text-primary);
line-height: 1.7;
min-height: 100vh;
padding: 0;
-webkit-font-smoothing: antialiased;
}
/ Subtle paper texture (editorial cream) /
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
radial-gradient(circle at 25% 30%, rgba(88, 72, 56, 0.035) 0%, transparent 50%),
radial-gradient(circle at 75% 70%, rgba(88, 72, 56, 0.025) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.shell {
max-width: var(--content);
margin: 0 auto;
padding: 48px 24px;
position: relative;
z-index: 1;
}
/ Header editorial /
.menu-header {
text-align: center;
margin-bottom: 48px;
padding-bottom: 32px;
border-bottom: 1px solid var(--border);
}
.brand {
font-family: var(--font-display);
font-size: 3.25rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1.05;
margin-bottom: 8px;
}
.menu-title {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 400;
letter-spacing: 0.08em;
color: var(--text-secondary);
margin-bottom: 28px;
}
/ Selo gluten-free / dairy-free /
.allergen-seal {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 28px;
border: 1px solid var(--gold-warm);
background: var(--ivory-warm);
margin: 0 auto 12px;
}
.seal-text {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.4em;
color: var(--gold-warm);
text-transform: uppercase;
white-space: nowrap;
}
.seal-note {
font-size: 0.75rem;
color: var(--text-muted);
letter-spacing: 0.1em;
margin-top: 4px;
text-align: center;
}
/ Section /
.section {
margin-bottom: 56px;
}
.section-header {
text-align: center;
margin-bottom: 28px;
}
.label-upper {
display: block;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.38em;
color: var(--gold-warm);
text-transform: uppercase;
margin-bottom: 14px;
}
.line-ornament {
width: 112px;
height: 1px;
background: var(--border);
margin: 0 auto 22px;
position: relative;
}
.line-ornament::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 5px;
height: 5px;
background: var(--gold-warm);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.section-title {
font-family: var(--font-display);
font-size: 1.65rem;
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.01em;
}
/ Menu list /
.menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.menu-item {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid var(--border);
gap: 24px;
}
.menu-item:last-child {
border-bottom: none;
}
.item-name {
font-size: 1.02rem;
font-weight: 500;
color: var(--text-primary);
flex: 1;
}
.item-meta {
font-size: 0.875rem;
color: var(--text-secondary);
font-weight: 400;
white-space: nowrap;
}
.price {
font-weight: 600;
color: var(--text-primary);
font-feature-settings: "tnum";
letter-spacing: -0.01em;
}
/ Multi-size items (cookies, brownies, brookies) /
.menu-item.multi-size {
flex-direction: column;
align-items: stretch;
padding: 18px 0;
}
.multi-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 6px;
}
.size-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 0 4px 8px;
font-size: 0.95rem;
color: var(--text-secondary);
}
.size-row .price {
color: var(--text-primary);
font-weight: 600;
}
.size-label {
font-weight: 400;
color: var(--text-muted);
}
/ Footer /
.menu-footer {
margin-top: 72px;
padding-top: 32px;
border-top: 1px solid var(--border);
text-align: center;
}
.footer-note {
font-size: var(--text-xs);
color: var(--text-muted);
letter-spacing: 0.08em;
line-height: 1.6;
}
/ Print styles — A4 /
@media print {
@page {
size: A4;
margin: 18mm 16mm;
}
body {
background: #ffffff;
color: #2c2520;
}
.shell {
max-width: 100%;
padding: 0;
}
.menu-header {
padding-bottom: 24px;
margin-bottom: 40px;
border-bottom-color: #d4c9b5;
}
.section {
margin-bottom: 42px;
page-break-inside: avoid;
}
.menu-item {
page-break-inside: avoid;
padding: 11px 0;
}
.line-ornament {
background: #c9b89f;
}
.line-ornament::after {
background: #8c7a5f;
}
.allergen-seal {
background: #f8f1e3;
border-color: #b89d6e;
}
.footer-note {
color: #6a5f52;
}
}
/ Mobile refinements /
@media (max-width: 480px) {
.shell {
padding: 32px 20px;
}
.brand {
font-size: 2.75rem;
}
.menu-item {
padding: 14px 0;
gap: 16px;
}
.item-name {
font-size: 0.98rem;
}
}
</style>
</head>
<body>
<div class="shell">
<!-- Header -->
<header class="menu-header">
<h1 class="brand">Emili Zaremba</h1>
<div class="menu-title">Cardápio</div>
<!-- Selo 100% sem glúten e sem leite -->
<div class="allergen-seal">
<div>
<div class="seal-text">100% sem glúten • sem leite</div>
</div>
</div>
<div class="seal-note">Todos os itens são preparados sem glúten e sem leite, inclusive os com chocolate</div>
</header>
<!-- BOLOS DE CENOURA -->
<section class="section">
<div class="section-header">
<div class="label-upper">Bolos de Cenoura</div>
<div class="line-ornament"></div>
</div>
<ul class="menu-list">
<li class="menu-item">
<span class="item-name">Recheado grande</span>
<span class="item-meta"><span class="price">R$ 160,00</span></span>
</li>
<li class="menu-item">
<span class="item-name">Recheado pequeno</span>
<span class="item-meta"><span class="price">R$ 120,00</span></span>
</li>
<li class="menu-item">
<span class="item-name">Caseirinho</span>
<span class="item-meta"><span class="price">R$ 90,00</span></span>
</li>
</ul>
</section>
<!-- AMANTEIGADOS -->
<section class="section">
<div class="section-header">
<div class="label-upper">Amanteigados</div>
<div class="line-ornament"></div>
</div>
<ul class="menu-list">
<li class="menu-item">
<span class="item-name">Laranja <span class="size-label">(200g)</span></span>
<span class="item-meta"><span class="price">R$ 18,00</span></span>
</li>
<li class="menu-item">
<span class="item-name">Coco <span class="size-label">(200g)</span></span>
<span class="item-meta"><span class="price">R$ 22,00</span></span>
</li>
</ul>
</section>
<!-- COOKIES -->
<section class="section">
<div class="section-header">
<div class="label-upper">Cookies</div>
<div class="line-ornament"></div>
</div>
<ul class="menu-list">
<li class="menu-item multi-size">
<div class="multi-header">
<span class="item-name">Cookie</span>
</div>
<div class="size-row">
<span><span class="size-label">60g</span></span>
<span class="price">R$ 12,00</span>
</div>
<div class="size-row">
<span><span class="size-label">360g</span></span>
<span class="price">R$ 54,00</span>
</div>
</li>
</ul>
</section>
<!-- BROWNIES -->
<section class="section">
<div class="section-header">
<div class="label-upper">Brownies</div>
<div class="line-ornament"></div>
</div>
<ul class="menu-list">
<li class="menu-item multi-size">
<div class="multi-header">
<span class="item-name">Brownie</span>
</div>
<div class="size-row">
<span><span class="size-label">90g</span></span>
<span class="price">R$ 18,00</span>
</div>
<div class="size-row">
<span><span class="size-label">300g</span></span>
<span class="price">R$ 54,00</span>
</div>
</li>
</ul>
</section>
<!-- BROOKIES -->
<section class="section">
<div class="section-header">
<div class="label-upper">Brookies</div>
<div class="line-ornament"></div>
</div>
<ul class="menu-list">
<li class="menu-item multi-size">
<div class="multi-header">
<span class="item-name">Brookie</span>
</div>
<div class="size-row">
<span><span class="size-label">90g</span></span>
<span class="price">R$ 20,00</span>
</div>
<div class="size-row">
<span><span class="size-label">300g</span></span>
<span class="price">R$ 66,00</span>
</div>
</li>
</ul>
</section>
<!-- Footer -->
<footer class="menu-footer">
<p class="footer-note">
Preços válidos até 30 de junho de 2026 • Entregas em Florianópolis e região
</p>
</footer>
</div>
</body>
</html>
```
Copia o bloco acima, salva como cardapio-emili.html e abre no navegador.
Quer que eu ajuste algo (preços, textos, adicionar foto, mudar data de validade)?