/* ═══════════════════════════════════════════════════════════════════ A SACOLA NO CELULAR — folha que sobe, não gaveta lateral ═══════════════════════════════════════════════════════════════════ Medido em 375px antes de escrever: a sacola abria com 337px de largura e 38px de faixa morta à esquerda. Ninguém escreveu esse 38px — é a regra do UA do Chrome para (`max-width: calc(100% - 6px - 2em)`) vencendo o `width: min(420px, 100vw)`. E não existia media query nenhuma para `.drawer`: a geometria do PC valia igual no celular. `max-width: none` mata o 38px. O resto é o gesto do polegar: a folha encosta nas três bordas, sobe de baixo, e o que importa (stepper, total, fechar pedido) fica na metade de baixo da tela. */ @media (max-width: 640px) { .drawer { top: auto; right: 0; bottom: 0; left: 0; margin: 0; width: 100%; max-width: none; height: auto; max-height: 88dvh; border-left: none; border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; } .drawer[open] { animation: sheet-in .34s var(--ease-out); } @keyframes sheet-in { from { transform: translateY(28px); opacity: 0; } } /* alça: signifier de "isto é uma folha, dá pra fechar" */ .drawer-head { position: relative; padding-top: 22px; } .drawer-head::before { content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0; width: 36px; height: 4px; border-radius: 2px; background: var(--cream-low); opacity: .35; } /* sem isto o botão de fechar pedido fica debaixo da barra de gestos do iPhone. `env(safe-area-inset-*)` não aparecia em CSS nenhum do projeto. */ .drawer-foot { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } } /* ── O ARRASTO PARA DE VAZAR PARA A PÁGINA DE TRÁS ───────────────── Chegando ao fim da lista da sacola, o gesto continuava e passava a rolar o cardápio ATRÁS do popup — a folha ficava parada e o fundo andava. Chama-se scroll chaining, e `contain` é exatamente o freio: o embalo morre na borda do container em vez de ser entregue ao pai. No `body` também, porque a top layer do não impede o documento de rolar por baixo em iOS. */ .drawer-body, .modal, .seletor-lista { overscroll-behavior: contain; } html:has(dialog[open]) body { overflow: hidden; } /* ═══════════════════════════════════════════════════════════════════ DENSIDADE NO CELULAR — tirar a sensação de amontoado ═══════════════════════════════════════════════════════════════════ Medido em 375x812 antes de escrever: topbar ............ 375 x 121 (15% da tela antes do conteúdo) card do carrossel . 261 x 484 (60% da tela para UM card) foto do card ...... 259 x 324 título de seção ... 28px, com 40px de respiro em cima nome 18px · descrição 14px · preço 20px Topbar + um card ocupavam 605 dos 812px. E o `@media (max-width:480px)` que já existia só encolhe os cards do `.grid` — os do CARROSSEL (que são justamente os maiores, os destaques) não recebiam nada. A redução abaixo é de ~15 a 25% no que ocupa espaço, e NÃO mexe em alvo de toque: onde o ícone diminui, a área clicável cresce para 44px (que é o mínimo, e que os botões da topbar não cumpriam nem antes). */ @media (max-width: 640px) { /* ── topbar: 121px é caro demais para uma barra ───────────────── */ .topbar-brand { font-size: 1rem; letter-spacing: .06em; } .topbar-brand svg { width: 30px; height: 30px; } /* Ícone menor, área de toque preservada. ⚠️ ESCOPADO À TOPBAR DE PROPÓSITO. `.tema-btn` sozinho pega DOIS botões: o da topbar (`.topbar-cart.tema-btn`) e o do hero (`.tema-toggle.tema-btn`, que é `position:absolute; top:20; left:20`). Uma regra solta com `position: relative` matava o absolute do segundo e jogava o botão de tema para cima do logo. E nem era preciso: o `.topbar-cart` JÁ nasce `position: relative`. */ .topbar .topbar-cart { width: 38px; height: 38px; } .topbar .topbar-cart svg { width: 20px; height: 20px; } .topbar .topbar-cart::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; } /* O do hero encolhe sem encostar em `position`. */ .tema-toggle { width: 40px; height: 40px; top: 14px; left: 14px; } .tema-toggle svg { width: 20px; height: 20px; } /* ── seções: menos grito, mais respiro entre blocos ───────────── */ .secao { padding-top: 28px; } .secao h2, .secao-titulo { font-size: 1.375rem; letter-spacing: .04em; } .secao-sub { font-size: .8125rem; } /* ── a grade, agora a única forma de listar produto ────────────── Os Destaques eram carrossel horizontal: arrastar para o lado escondia metade dos itens atrás da borda e o card aparecia cortado. Viraram grade, e a grade passa a valer de 640px para baixo (não só 480), para não existir a faixa de 481-640px com uma coluna só e fonte de duas. */ .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .grid .card-body { padding: 12px; gap: 4px; } .grid .card-nome { font-size: .9375rem; } .grid .card-desc { font-size: .75rem; -webkit-line-clamp: 3; } .grid .card-preco { font-size: 1.0625rem; } /* Botão de adicionar: menor na tela, 44px no dedo. ⚠️ NÃO declarar `position` aqui. O original é `absolute` com `right:14px; bottom:14px` — é isso que o prende no canto do card. Sobrescrever para `relative` jogou o botão no fluxo e ele saiu para fora da borda arredondada. `absolute` já é contexto para o ::before. */ .card-add { width: 34px; height: 34px; right: 10px; bottom: 10px; } .card-add svg { width: 15px; height: 15px; } .card-add::before { content: ""; position: absolute; inset: -5px; } /* o preço precisa abrir espaço para o botão menor, senão encostam */ .card-preco-row { padding-right: 40px; } /* ── a topbar em si: 121px eram duas faixas cheias ────────────── Medido: .topbar-inner 64px + .catnav 56px. As duas altas o bastante para o dedo, mas somadas comem 15% da tela antes de qualquer comida aparecer. Encolhendo a caixa sem encolher o alvo de toque (os botões mantêm os 44px pelo ::before acima). */ .topbar-inner { height: 52px; } .catnav { height: 46px; } .catnav a, .catnav button { font-size: .8125rem; padding: 0 14px; } .catnav svg { width: 15px; height: 15px; } }