/* ============================================================= ui.css — Camada de refinamento visual (X-Bom) ------------------------------------------------------------- Carregado DEPOIS do style.css, sobrescrevendo só o necessário. Nada do style.css original foi alterado — para desfazer tudo, basta remover a linha que carrega este arquivo no index.html. Inclusão no , logo abaixo do style.css: O que muda: 1. Modais viram bottom sheets no celular (sobem de baixo, com alça, cabeçalho fixo e botão principal no rodapé) 2. Campos com borda neutra; amarelo só no foco 3. Checkout em uma coluna no celular, agrupado em blocos 4. Formas de pagamento como cartões selecionáveis 5. Micro-animações e tracker de pedido animado ============================================================= */ :root{ --linha:#e6e6ee; /* borda neutra dos campos */ --sombra-suave:0 2px 10px rgba(17,24,39,.06); --sombra-media:0 12px 32px rgba(17,24,39,.14); --brand-escuro:#7a4d00; } /* ============================================================= 1. CAMPOS DE FORMULÁRIO — leves, amarelo só no foco ============================================================= */ .input, .select, .textarea{ border:1.5px solid var(--linha); border-radius:14px; box-shadow:none; background:#fcfcfd; transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; } .input:hover, .select:hover, .textarea:hover{ border-color:#d6d6e2; } .input:focus, .select:focus, .textarea:focus{ background:#fff; border-color:var(--brand); box-shadow:0 0 0 4px rgba(255,189,0,.20); } .input::placeholder, .textarea::placeholder{ color:#a8a8b4; } form label, #prod-sheet label, #prefill-sheet label{ font-size:13px; font-weight:800; letter-spacing:.1px; color:#374151; } /* ============================================================= 2. BOTÕES — profundidade e resposta ao toque ============================================================= */ .btn{ border-radius:14px; transition:transform .12s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; box-shadow:var(--sombra-suave); } .btn:hover{ border-color:#dcdce6; } .btn:active{ transform:scale(.975); } .btn-primary{ background:linear-gradient(180deg,#ffc61a,#f5a800); border-color:#f0ad00; color:#3d2600; box-shadow:0 6px 16px rgba(240,173,0,.32); } .btn-primary:hover{ box-shadow:0 8px 20px rgba(240,173,0,.42); } .btn-primary:disabled{ background:#efeff4; border-color:#e6e6ee; color:#a6a6b2; box-shadow:none; cursor:not-allowed; } .btn-added{ animation:pulso-ok .5s ease; } @keyframes pulso-ok{ 0%{ transform:scale(1); } 45%{ transform:scale(1.09); } 100%{ transform:scale(1); } } .qbtn{ border-radius:10px; transition:transform .12s ease, background .16s ease, border-color .16s ease; } .qbtn:hover{ background:#fffaf0; border-color:var(--brand); } .qbtn:active{ transform:scale(.9); } /* ============================================================= 3. CATEGORIAS (chips) ============================================================= */ .chip{ transition:transform .14s ease, background .16s ease, border-color .16s ease, color .16s ease; box-shadow:var(--sombra-suave); } .chip:active{ transform:scale(.96); } .chip.active{ color:#3d2600; box-shadow:0 4px 14px rgba(240,173,0,.34); } /* ============================================================= 4. ITENS DO CARDÁPIO E DO CARRINHO ============================================================= */ .item{ transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease; } .item:hover{ transform:translateY(-2px); box-shadow:var(--sombra-media); border-color:#e2e2ec; } .cart-item{ border-radius:14px; border-color:var(--linha); box-shadow:var(--sombra-suave); animation:entra-item .26s ease both; } @keyframes entra-item{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } } /* ============================================================= 5. MODAIS — bottom sheet no celular ============================================================= */ .sheet{ background:rgba(15,17,26,.5); backdrop-filter:blur(3px); animation:fade-fundo .22s ease; } @keyframes fade-fundo{ from{ opacity:0; } to{ opacity:1; } } .sheet-wrap{ border:none; border-radius:24px; box-shadow:0 24px 60px rgba(0,0,0,.26); padding:20px; animation:sobe-card .28s cubic-bezier(.22,1,.36,1); } @keyframes sobe-card{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:translateY(0) scale(1); } } /* Títulos dos modais com mais respiro */ .sheet-wrap > h2{ font-size:20px; letter-spacing:-.2px; } @media (max-width:640px){ /* ATENÇÃO: nada de "display" aqui — o .sheet precisa continuar display:none quando fechado. Só o estado .show define como aparece. */ .sheet{ padding:0; align-items:flex-end; } .sheet.show{ display:flex; align-items:flex-end; } .sheet-wrap{ width:100%; max-width:none; margin:0; border-radius:24px 24px 0 0; max-height:92vh; padding:8px 16px calc(18px + env(safe-area-inset-bottom)); animation:sobe-folha .3s cubic-bezier(.22,1,.36,1); } @keyframes sobe-folha{ from{ transform:translateY(100%); } to{ transform:translateY(0); } } /* Alça de arrasto no topo da folha */ .sheet-wrap::before{ content:""; display:block; width:44px; height:5px; border-radius:999px; background:#dcdce4; margin:6px auto 14px; } } /* ============================================================= 6. CHECKOUT — uma coluna no celular e blocos separados ============================================================= */ @media (max-width:640px){ .grid2{ grid-template-columns:1fr; gap:14px; } } /* Botão principal do checkout fixo no rodapé da folha */ @media (max-width:640px){ #order-form > div:last-child, #cart-sheet .sheet-wrap > div:last-child{ position:sticky; bottom:0; background:linear-gradient(180deg, rgba(255,255,255,0), #fff 22%); padding:14px 0 6px; margin-top:4px; z-index:2; } #order-form > div:last-child .btn, #cart-sheet .sheet-wrap > div:last-child .btn{ flex:1; height:50px; font-size:15.5px; } } /* Resumo do pedido dentro do checkout */ #checkout-summary{ border-color:var(--linha) !important; border-radius:18px !important; box-shadow:var(--sombra-suave) !important; background:#fcfcfd !important; } /* ============================================================= 7. FORMAS DE PAGAMENTO — seletor segmentado (tipo abas) ============================================================= */ .pay-options{ display:flex; flex-direction:row; gap:4px; padding:4px; margin-top:6px; background:#f3f3f8; border:1px solid var(--linha); border-radius:16px; } .pay-opt{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; text-align:center; padding:10px 6px; border:1.5px solid transparent; border-radius:13px; background:transparent; box-shadow:none; transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease; } .pay-opt:hover{ background:rgba(255,255,255,.7); } .pay-opt:active{ transform:scale(.985); } /* Esconde o círculo do radio sem perder acessibilidade */ .pay-opt input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .pay-opt span{ display:flex; flex-direction:column; align-items:center; gap:1px; flex:none; width:100%; } .pay-opt strong{ font-size:14.5px; font-weight:800; color:#4b5563; line-height:1.2; white-space:nowrap; } .pay-opt small{ font-size:10.5px; font-weight:600; color:#9ca3af; line-height:1.25; } /* Segmento selecionado */ .pay-opt:has(input:checked){ background:#fff; border-color:var(--brand); box-shadow:0 3px 10px rgba(240,173,0,.24); } .pay-opt:has(input:checked) strong{ color:#3d2600; font-weight:900; } .pay-opt:has(input:checked) small{ color:var(--brand-escuro); } /* Foco por teclado */ .pay-opt:has(input:focus-visible){ outline:3px solid rgba(255,189,0,.5); outline-offset:1px; } /* Navegadores sem :has() — o radio volta a aparecer, nada quebra */ @supports not selector(:has(*)){ .pay-options{ flex-direction:column; background:transparent; border:none; padding:0; gap:8px; } .pay-opt{ flex-direction:row; text-align:left; border-color:var(--linha); background:#fff; } .pay-opt span{ align-items:flex-start; } .pay-opt input{ position:static; width:20px; height:20px; opacity:1; pointer-events:auto; } } /* Sub-opções de "Na entrega" — 5 itens, ficam melhor como etiquetas */ #cash-change-wrap .pay-options{ flex-wrap:wrap; background:transparent; border:none; padding:0; gap:8px; } #cash-change-wrap .pay-opt{ flex:0 0 auto; flex-direction:row; padding:9px 14px; border-radius:999px; border-color:var(--linha); background:#fff; box-shadow:var(--sombra-suave); } #cash-change-wrap .pay-opt span{ flex-direction:row; width:auto; font-size:13.5px; font-weight:700; color:#4b5563; } #cash-change-wrap .pay-opt:has(input:checked){ background:linear-gradient(180deg,#fffdf5,#fff4d9); } #cash-change-wrap .pay-opt:has(input:checked) span{ color:#3d2600; font-weight:900; } /* ============================================================= 8. CARRINHO FLUTUANTE ============================================================= */ .floating-cart>button{ height:56px; border:none; border-radius:18px; box-shadow:0 10px 26px rgba(240,173,0,.42); background:linear-gradient(180deg,#ffc61a,#f5a800); color:#3d2600; transition:transform .14s ease, box-shadow .18s ease; } .floating-cart>button:active{ transform:scale(.985); } .floating-cart small{ color:var(--brand-escuro); opacity:.9; } /* ============================================================= 9. TRACKER DO PEDIDO ============================================================= */ .tracker-icon{ transition:background .35s ease, border-color .35s ease, color .35s ease, transform .35s ease; } .tracker-step.active .tracker-icon{ transform:scale(1.1); animation:pulsa-passo 1.9s ease-in-out infinite; } @keyframes pulsa-passo{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,189,0,.5); } 50%{ box-shadow:0 0 0 9px rgba(255,189,0,0); } } .tracker-line{ transition:background .45s ease; } /* ============================================================= 10. TOAST ============================================================= */ .toast-card{ border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.24); animation:sobe-card .28s cubic-bezier(.22,1,.36,1); } /* ============================================================= 11. ACESSIBILIDADE — respeita quem prefere menos movimento ============================================================= */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }