Redesign da Loja: Visual Premium com Profundidade e Acabamento

NOVO

A loja do jogo passou por uma reforma visual completa. Cada elemento — dos cards de produtos à barra lateral do carrinho, das abas de canais aos botões de checkout — foi redesenhado com profundidade, acabamento e animações suaves.

O Que Mudou

Cards de Produtos

O coração da loja recebeu o maior upgrade:

Efeito de vidro com gradientes em camadas e sombras profundas
Hover suave — os cards se elevam, as imagens escalam para 1.08x, um brilho aparece
Imagens maiores (170px de altura, anteiormente 150px)
Carregamento lazy — as imagens carregam apenas quando rolam para a área visível, economizando banda
Separador de borda entre as informações do produto e a área de preço/botão
Preços maiores (16px) com brilho mais forte para as moedas CC e KC

Novo Cabeçalho da Loja

Uma nova barra de identidade aparece acima da grade de produtos, mostrando:

O ícone do tipo da loja em um contêiner colorido com cantos arredondados
O nome da loja em texto grande e em negrito
Um selo de tipo (ex.: “Hardware”, “Comida”, “Serviços”) com a cor do tipo
Contagem de produtos e moeda

Isso dá a cada loja uma identidade visual clara antes mesmo de você rolar até os produtos.

Abas de Canais

As abas para alternar entre lojas receberam um visual mais limpo:

Estilo pílula com cantos arredondados
Hover muda o fundo sutilmente
Aba ativa brilha com um gradiente azul-ciano e sombra interna
Removido o efeito complexo de máscara de borda para melhor desempenho

Barra de Filtros

Os controles de busca e filtro agora estão mais polidos:

Inputs arredondados (border-radius de 10px) com anéis de foco
Selects estilo pílula que destacam no hover
Contagem de filtros exibida como um selo com fundo
Botão de limpar com destaque vermelho e elevação no hover

Barra Lateral do Carrinho

O carrinho de compras e o painel de pedidos no lado direito:

Posicionamento fixo — permanece visível enquanto você rola pelos produtos
Scrollbar personalizada — barra azul fina em vez do padrão do navegador
Fundos com gradiente com sombras sutis
Botões maiores com efeito de elevação no hover
Botões de checkout com preenchimento em gradiente e brilho no hover

Avaliações

A seção de avaliações na parte inferior de cada loja:

Melhor hierarquia visual com uma linha divisória abaixo do resumo
Efeito de hover nos cards individuais de avaliação (borda esquerda acende)
Estrelas maiores e melhor espaçamento
Botão de envio com gradiente e sombra no hover

Busca por Proximidade e Busca de Lojas

Ambos os recursos de busca receberam designs de cards premium:

Profundidade com sombras em camadas
Animação de deslizamento no hover (cards de proximidade deslizam para a direita)
Efeito de elevação nos cards de busca de lojas com brilho roxo
Ícones maiores (40px) com suas próprias sombras

Estados Vazios

Quando não há produtos para exibir, em vez de uma simples mensagem de texto, você agora vê:

Um ícone grande (📦)
Uma mensagem clara (“Nenhum produto corresponde aos seus filtros” ou “Nenhum produto ainda”)
Uma dica útil (“Tente ajustar sua busca ou volte mais tarde”)

Animações

Os cards de produtos agora animam com uma entrada escalonada — cada card aparece com fade e escala levemente, com um pequeno atraso entre os cards. A animação usa uma curva de easing cubic-bezier suave para uma sensação premium.

Exclusão do Pino no Mapa

Esta versão também inclui um novo recurso de privacidade para proprietários de lojas:

Prestadores de serviço que não desejam revelar sua localização física agora podem desmarcar “Mostrar minha loja no mapa mundial” nas configurações da loja. A loja permanece totalmente funcional — apenas não aparece como um pino no mapa.

Isso é especialmente útil para consultores, prestadores de serviços digitais e qualquer pessoa cujo negócio não tenha uma loja física pública.

Desempenho

Apesar dos visuais mais ricos, a loja está, na verdade, mais rápida graças a:

loading="lazy" nas imagens de produtos — o navegador carrega apenas as imagens que estão visíveis
CSS simplificado (removidas as máscaras complexas de ::before nas abas de canais)
Transformações aceleradas por GPU para animações de hover

O Que Vem a Seguir

O redesign da loja estabelece a fundação visual para os próximos recursos:

Overlays de detalhes do produto com imagens em tamanho completo e especificações
Lista de desejos / favoritos — salve produtos para depois
Coleções de lojas — grupos de produtos curados
Códigos de desconto — preços promocionais
Analytics da loja para proprietários — visualizações, cliques, conversão

ENLIGHTENMENT é um jogo baseado em blockchain de crescimento pessoal, exploração arquetípica e ressonância coletiva. Junte-se a nós em getplasma.org.