/* glass/carrinho-local.css — o carrinho do nosso site. Vem com glass/carrinho-local.js, que injeta o botão no `.navbar-inner` e o painel no fim do ``. Nada aqui depende de marcação escrita à mão nas páginas: os três arquivos que vendem carregam o par e ganham o carrinho. SEM VIDRO, e é decisão, não esquecimento. `backdrop-filter` só existe dentro do componente Glass; este painel usa superfície sólida. Um painel translúcido sobre a hero escura lavaria o texto que mora DENTRO dele — exatamente o erro que o projeto já cometeu uma vez. O CONTRASTE DO BOTÃO É O PONTO DELICADO. Ele é fixo e viaja sobre fundos opostos: a hero escura e as seções claras. Medido no projeto, #C89116 dá 5,57:1 sobre a hero e cai para 2,79:1 sobre o creme — abaixo do mínimo de 3:1 para controle não textual. Por isso o tom acompanha o contexto, do mesmo jeito que os três riscos do menu já faziam. */ /* ---- botão do carrinho ------------------------------------------------ */ .cart-toggle { pointer-events: auto; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; /* alvo de toque mínimo, sem inventar margem */ height: 44px; padding: 0; border: 0; background: none; color: var(--brand-blue); cursor: pointer; } .cart-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; /* o traço único do projeto */ stroke-linecap: round; stroke-linejoin: round; } /* Sobre a hero o fundo é escuro: o dourado vale, como no menu. Fora dela, e em toda página de fundo claro, o azul da marca. */ .navbar[data-sobre-hero]:not(.scrolled) .cart-toggle { color: var(--brand-gold); } /* ---- a bolinha da contagem -------------------------------------------- */ .cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--brand-blue); color: var(--text-on-dark); font: 600 .6875rem/18px var(--font-ui); text-align: center; letter-spacing: 0; } /* Sobre a hero escura o azul da marca some no fundo: inverte para o azul-neve com o número escuro, que é o mesmo par das pílulas do site. */ .navbar[data-sobre-hero]:not(.scrolled) .cart-count { background: var(--blue-frost); color: var(--brand-blue); } .cart-count[hidden] { display: none; } /* ---- fundo escurecido -------------------------------------------------- */ .cart-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(31, 45, 69, .45); opacity: 0; visibility: hidden; transition: opacity .28s var(--lg-ease, ease), visibility .28s; } .cart-overlay.aberto { opacity: 1; visibility: visible; } /* ---- painel ------------------------------------------------------------ */ .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 201; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--surface-raised); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .32s var(--lg-ease, ease); } .cart-drawer.aberto { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .cart-overlay, .cart-drawer { transition: none; } } .cart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border); } .cart-head h2 { margin: 0; font: 400 1.25rem/1.2 var(--font-display); color: var(--text-strong); text-transform: uppercase; letter-spacing: .04em; } .cart-close { display: inline-flex; align-items: center; justify-content: center; /* 44x44 é o mínimo para o dedo. Estava 40x40. */ width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-body); cursor: pointer; } .cart-close:hover { background: var(--surface-alt); } .cart-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .cart-body { flex: 1; overflow-y: auto; padding: var(--space-5); } .cart-vazio { margin: 0; color: var(--text-body); font: 400 .9375rem/1.6 var(--font-ui); } .cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-4); align-items: start; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); } .cart-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .cart-item img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); } .cart-item-nome { margin: 0; font: 600 .9375rem/1.35 var(--font-ui); color: var(--text-strong); } .cart-item-cfg { margin: 2px 0 0; font: 400 .8125rem/1.4 var(--font-ui); color: var(--text-body); } .cart-item-preco { margin: var(--space-2) 0 0; font: 700 .9375rem/1.2 var(--font-ui); color: var(--text-strong); } /* Item que a loja ainda não vende. A superfície é que avisa — o texto fica legível, porque a pessoa precisa ler o que escolheu para decidir tirar. */ .cart-item-indisp { display: inline-block; margin: var(--space-2) 0 0; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--surface-alt); color: var(--text-body); font: 500 .75rem/1.5 var(--font-ui); } .cart-qtd { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); } .cart-qtd button { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text-strong); font: 600 .875rem/1 var(--font-ui); cursor: pointer; } .cart-qtd button:hover { background: var(--surface-alt); } .cart-qtd span { min-width: 20px; text-align: center; font: 600 .875rem/1 var(--font-ui); color: var(--text-strong); } .cart-remover { padding: 0; border: 0; background: none; color: var(--text-body); font: 400 .8125rem/1.4 var(--font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .cart-remover:hover { color: var(--brand-blue); } .cart-foot { padding: var(--space-5); border-top: 1px solid var(--border); } .cart-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--space-4); font: 400 .9375rem/1.4 var(--font-ui); color: var(--text-body); } .cart-total strong { font: 700 1.25rem/1.2 var(--font-ui); color: var(--text-strong); } .cart-foot .btn { width: 100%; } .cart-continuar { display: block; width: 100%; margin-top: var(--space-3); padding: var(--space-2); border: 0; background: none; color: var(--brand-blue); font: 500 .875rem/1.5 var(--font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .cart-aviso { margin: var(--space-3) 0 0; font: 400 .8125rem/1.5 var(--font-ui); color: var(--text-body); text-align: center; } .cart-aviso[hidden] { display: none; } /* Botão de finalizar quando a compra não pode seguir. Recua a SUPERFÍCIE, e o texto permanece cheio: quem não pode comprar ainda precisa ler o porquê. */ .cart-foot .btn[aria-disabled="true"] { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-strong); cursor: default; } .cart-foot .btn[aria-disabled="true"]:hover, .cart-foot .btn[aria-disabled="true"]:active { background: transparent; color: var(--text-strong); transform: none; }