/* ========================================================================== ACABAMENTO — camada de polimento sobre o tema da loja ========================================================================== Carregado depois de loja.css, e só nas páginas do comprador. Não muda estrutura nenhuma: mexe em tipografia, profundidade, toque e movimento. Separado em arquivo próprio para que ajustar o acabamento nunca arrisque quebrar a hierarquia de compra, que já está validada. O alvo é o celular. "Boa parte dos clientes será mobile" muda o que conta como acabamento: alvo de toque grande vale mais que sombra bonita, e o que é decorativo não pode custar rolagem. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tipografia -------------------------------------------------------------------------- Sem arquivo de fonte: a CSP da aplicação é `font-src 'self'`, e afrouxá-la numa página de pagamento para buscar fonte de terceiro é troca ruim. Então o ganho vem de COMO o texto é composto, não de qual família. Inter, SF Pro e Segoe UI Variable entram na frente da pilha porque existem em boa parte dos aparelhos e são desenhadas para tela; quem não tiver cai no mesmo sistema de antes, sem prejuízo. -------------------------------------------------------------------------- */ .loja { --font-ui: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; /* Um pelinho de tracking negativo tira o ar "padrão de sistema" do texto corrido sem que ninguém consiga apontar o que mudou. */ letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Quanto maior o texto, mais fechado o espacejamento: é o que o olho espera, e é a diferença entre um título que parece composto e um que parece digitado. */ .loja h1, .loja .vitrine__titulo { letter-spacing: -0.03em; line-height: 1.12; } .loja h2 { letter-spacing: -0.022em; line-height: 1.2; } .loja h3, .loja .bloco__titulo { letter-spacing: -0.014em; } /* Todo número que representa dinheiro ou contagem alinha em coluna. Sem isto, um total que muda de R$ 9,00 para R$ 10,00 "pula" na barra de compra. */ .loja .price, .loja .preco-selo__valor, .loja .barra-compra__total, .loja .pagar__total, .loja .premio-cota__valor, .loja .progresso-loja__legenda strong, .loja .counter, .loja .qty-preset__price { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv01" 1; } /* Texto pequeno precisa de MAIS espaço entre letras, não menos. */ .loja .fs-xs, .loja .hint, .loja .sub, .loja .subtle { letter-spacing: 0; } .loja .preco-selo__rotulo, .loja .barra-compra__rotulo, .loja .pagar__rotulo { letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; font-weight: 600; } /* -------------------------------------------------------------------------- 2. Profundidade -------------------------------------------------------------------------- Sombra sozinha não cria material em tema escuro -- preto sobre preto some. O que dá volume é a combinação: um fio de luz na borda de cima (como se a luz viesse de cima) e sombra embaixo. -------------------------------------------------------------------------- */ .loja .bloco, .loja .card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .4); } .loja .card--pagar, .loja .premios { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .45); } .loja .barra-compra { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 -8px 32px rgba(0, 0, 0, .55); } .loja .masthead { box-shadow: 0 1px 0 rgba(255, 255, 255, .04); } /* -------------------------------------------------------------------------- 3. Botões -------------------------------------------------------------------------- */ .loja .btn { transition: transform .12s cubic-bezier(.2, 0, .2, 1), background .15s, border-color .15s, box-shadow .15s; } .loja .btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, .4), 0 0 0 0 rgba(34, 197, 94, .4); } /* Afunda ao toque. Num celular não existe hover: o feedback de que o toque pegou é isto, e sem ele a pessoa toca duas vezes. */ .loja .btn:active { transform: translateY(1px) scale(.995); } .loja .btn--primary:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); } .loja .ticket:active:not(:disabled), .loja .qty-preset:active, .loja .qty-step:active { transform: scale(.94); } /* O botão principal respira devagar enquanto há algo a pagar. Só na barra fixa, e só quando está habilitado -- chamar atenção para um botão morto seria pior que não chamar. */ .loja .barra-compra .btn--primary:not(:disabled) { animation: pulso-compra 2.6s ease-in-out infinite; } @keyframes pulso-compra { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 3px rgba(0,0,0,.4), 0 0 0 0 rgba(34,197,94,.35); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 3px rgba(0,0,0,.4), 0 0 0 6px rgba(34,197,94,0); } } /* -------------------------------------------------------------------------- 4. Alvos de toque -------------------------------------------------------------------------- 44px é o mínimo recomendado pela Apple e pelo Google. Abaixo disso o dedo erra, e num fluxo de pagamento errar o alvo é abandono de carrinho. -------------------------------------------------------------------------- */ @media (max-width: 719px) { .loja .btn { min-height: 44px; padding-inline: var(--sp-4); } .loja .btn--sm { min-height: 38px; font-size: 13px; } .loja .masthead nav a.navlink { min-height: 44px; display: inline-flex; align-items: center; } /* A ficha continua pequena para caber muito número, mas ganha respiro entre vizinhas para o dedo não pegar a errada. */ .loja .ticket-grid { gap: 6px; } .loja .ticket { min-height: 42px; } /* Rolagem com inércia na grade e nas fichas selecionadas. */ .loja .ticket-grid, .loja .scroll-y { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } /* Tira o realce cinza do toque no Android/iOS -- temos feedback próprio. */ .loja a, .loja button { -webkit-tap-highlight-color: transparent; } /* -------------------------------------------------------------------------- 5. Foco visível -------------------------------------------------------------------------- :focus-visible aparece para quem navega por teclado e some para quem usa o dedo -- o anel não fica preso no botão depois do toque. -------------------------------------------------------------------------- */ .loja a:focus-visible, .loja button:focus-visible, .loja input:focus-visible, .loja select:focus-visible, .loja textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); } .loja input:focus, .loja select:focus, .loja textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); } /* -------------------------------------------------------------------------- 6. Capa sem foto -------------------------------------------------------------------------- Antes era um vazio cinza com um ícone no meio: parecia imagem que falhou ao carregar. Vira uma superfície deliberada, com o nome do prêmio como protagonista. -------------------------------------------------------------------------- */ .capa__vazio { background: radial-gradient(80% 60% at 50% 30%, rgba(34, 197, 94, .14), transparent 70%), linear-gradient(160deg, #1a2028 0%, #0f1318 60%, #0b0d10 100%); color: var(--fg-muted); } .capa__vazio svg { opacity: .5; } .capa__vazio .fs-sm { font-size: 15px; font-weight: 600; color: var(--fg); max-width: 26ch; line-height: 1.35; } /* Mesmo tratamento no cartão da vitrine: "Sem imagem" em cima de cinza chapado lê como foto que falhou; sobre uma superfície com intenção, lê como cartão ainda sem foto. */ .loja .raffle__media:has(.raffle__placeholder) { background: radial-gradient(70% 100% at 50% 0%, rgba(34, 197, 94, .10), transparent 70%), linear-gradient(160deg, #171d24, #0f1318); } .loja .raffle__placeholder { opacity: .55; } /* Foto real ganha um leve zoom-out ao entrar: dá a sensação de que a página "assentou", em vez de aparecer estática. */ .capa img { animation: assentar .6s cubic-bezier(.2, 0, .2, 1) both; } @keyframes assentar { from { transform: scale(1.04); opacity: .6; } to { transform: scale(1); opacity: 1; } } /* -------------------------------------------------------------------------- 7. Entrar e criar conta -------------------------------------------------------------------------- O `place-items: center` num viewport de celular empurrava o cartão para o meio e deixava ~200px de vazio no topo -- parecia página quebrada. No celular o formulário encosta em cima; do tablet para cima, centralizar volta a fazer sentido. -------------------------------------------------------------------------- */ @media (max-width: 719px) { .loja .auth { align-items: start; min-height: 0; padding: var(--sp-5) var(--sp-4) var(--sp-8); } } .loja .auth__card .card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 40px rgba(0, 0, 0, .5); } /* -------------------------------------------------------------------------- 8. Progresso -------------------------------------------------------------------------- */ /* Brilho que corre sobre a barra enquanto a rifa está vendendo. Puramente decorativo -- desligado junto com o resto do movimento lá embaixo. */ .progresso-loja .meter { position: relative; overflow: hidden; } .progresso-loja .meter > span { position: relative; } .progresso-loja .meter > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); animation: correr 2.4s ease-in-out infinite; } @keyframes correr { from { transform: translateX(-100%); } to { transform: translateX(300%); } } /* -------------------------------------------------------------------------- 9. Cartões da vitrine -------------------------------------------------------------------------- */ .loja .raffle { transition: transform .18s cubic-bezier(.2, 0, .2, 1), border-color .18s, box-shadow .18s; } .loja .raffle:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 28px rgba(0, 0, 0, .5); } .loja .raffle:active { transform: translateY(0) scale(.995); } .loja .raffle__media img { transition: transform .4s cubic-bezier(.2, 0, .2, 1); } .loja .raffle:hover .raffle__media img { transform: scale(1.03); } /* -------------------------------------------------------------------------- 10. Carregamento -------------------------------------------------------------------------- Esqueleto no lugar do disquinho girando: mostra o formato do que vem, então a página não "salta" quando os dados chegam. -------------------------------------------------------------------------- */ .loja .loading { width: 100%; max-width: none; height: auto; border: 0; animation: none; } .loja .loading::before { content: ""; display: block; height: 220px; border-radius: var(--radius-lg); background: linear-gradient(100deg, #14181d 30%, #1c222a 50%, #14181d 70%); background-size: 220% 100%; animation: brilho 1.3s linear infinite; } @keyframes brilho { from { background-position: 130% 0; } to { background-position: -30% 0; } } /* -------------------------------------------------------------------------- 11. Movimento reduzido -------------------------------------------------------------------------- Quem pediu menos animação no sistema recebe menos animação. Não é detalhe de acessibilidade abstrato: movimento repetitivo dispara enxaqueca e náusea em parte real das pessoas. Toda animação acima é decorativa -- desligar não tira função nenhuma. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .loja *, .loja *::before, .loja *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .loja .capa img { animation: none; } }