* { box-sizing: border-box; } /* Desliga a "rolagem âncora" (scroll anchoring) na página inteira, não só no grid de apps. O navegador tenta sozinho "compensar" a posição da rolagem quando o conteúdo muda de altura acima do que tá visível (troca de categoria, "Início" reaparecendo cards escondidos, etc.) — só que com um grid que se reorganiza inteiro, ele calcula errado e a tela pula pra um ponto aleatório. Desligado aqui, a posição da rolagem sempre fica exatamente onde a gente manda (ou onde já estava). */ html { overflow-anchor: none; } /* ---------- Variáveis de tema ---------- */ /* Valores padrão = tema "Escuro" (o visual original da loja). Os outros temas (Claro, Neon, Minimalista) sobrescrevem essas variáveis via classe no , definida em index.php de acordo com o tema escolhido em Configurações. As cores --cor-primaria/--cor-secundaria continuam vindo do seletor de cores do admin e valem em qualquer tema. */ :root { --cor-fundo: #121218; --cor-texto: #f2f2f5; --cor-categorias-fundo: #1a1a22; --cor-categoria-pill: #24242f; --cor-categoria-texto: #cfcfe0; --cor-card-fundo: #1e1e27; --cor-card-imagem-fundo: #2a2a35; --cor-texto-suave: #b3b3c6; --cor-texto-suave-2: #c2c2d4; --cor-codigo-fundo: #24242f; --cor-codigo-rotulo: #a6a6ba; --cor-modal-fundo: #1e1e27; --cor-barra-fundo: #2a2a35; --cor-footer-texto: #7d7d92; --cor-footer-borda: #26263a; --cor-copyright-texto: #55556a; --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* ---------- Tema Claro ---------- */ body.tema-claro { --cor-fundo: #f4f4f8; --cor-texto: #1a1a22; --cor-categorias-fundo: #e9e9f2; --cor-categoria-pill: #ffffff; --cor-categoria-texto: #46465a; --cor-card-fundo: #ffffff; --cor-card-imagem-fundo: #eaeaf2; --cor-texto-suave: #55556a; --cor-texto-suave-2: #46465a; --cor-codigo-fundo: #f0f0f7; --cor-codigo-rotulo: #7a7a90; --cor-modal-fundo: #ffffff; --cor-barra-fundo: #e4e4ee; --cor-footer-texto: #6b6b80; --cor-footer-borda: #dcdce6; --cor-copyright-texto: #9a9ab0; } /* ---------- Tema Cinza Escuro (meio-termo entre Escuro e Claro) ---------- */ body.tema-cinza-escuro { --cor-fundo: #2b2d31; --cor-texto: #e8e8ea; --cor-categorias-fundo: #232428; --cor-categoria-pill: #35373c; --cor-categoria-texto: #c9c9ce; --cor-card-fundo: #313338; --cor-card-imagem-fundo: #3a3c42; --cor-texto-suave: #b5b5bc; --cor-texto-suave-2: #a8a8b0; --cor-codigo-fundo: #26272b; --cor-codigo-rotulo: #9a9aa2; --cor-modal-fundo: #313338; --cor-barra-fundo: #3a3c42; --cor-footer-texto: #8b8b93; --cor-footer-borda: #3a3c42; --cor-copyright-texto: #6b6b73; } /* ---------- Tema Cinza Claro (meio-termo entre Escuro e Claro) ---------- */ body.tema-cinza-claro { --cor-fundo: #dcdde0; --cor-texto: #26272a; --cor-categorias-fundo: #cfd0d4; --cor-categoria-pill: #eaebed; --cor-categoria-texto: #45464a; --cor-card-fundo: #eeeff1; --cor-card-imagem-fundo: #d8d9dc; --cor-texto-suave: #5a5b60; --cor-texto-suave-2: #4a4b50; --cor-codigo-fundo: #e3e4e7; --cor-codigo-rotulo: #75767c; --cor-modal-fundo: #eeeff1; --cor-barra-fundo: #d8d9dc; --cor-footer-texto: #6e6f75; --cor-footer-borda: #c7c8cc; --cor-copyright-texto: #96979c; } /* ---------- Tema Neon ---------- */ body.tema-neon { --cor-fundo: #08060f; --cor-texto: #eafcff; --cor-categorias-fundo: #0d0a1a; --cor-categoria-pill: #170f2e; --cor-categoria-texto: #b8a6ff; --cor-card-fundo: #140f26; --cor-card-imagem-fundo: #1c1533; --cor-texto-suave: #b9a8ff; --cor-texto-suave-2: #9de8ff; --cor-codigo-fundo: #1c1533; --cor-codigo-rotulo: #8f7fd6; --cor-modal-fundo: #140f26; --cor-barra-fundo: #1c1533; --cor-footer-texto: #8f7fd6; --cor-footer-borda: #241a44; --cor-copyright-texto: #5c4f8f; } body.tema-neon .app-card:hover, body.tema-neon .app-card:focus-within { box-shadow: 0 0 0 6px rgba(0, 206, 201, .3), 0 0 26px rgba(140, 100, 255, .35); } /* ---------- Tema Minimalista ---------- */ body.tema-minimalista { --cor-fundo: #ffffff; --cor-texto: #202020; --cor-categorias-fundo: #ffffff; --cor-categoria-pill: #f0f0f0; --cor-categoria-texto: #404040; --cor-card-fundo: #fafafa; --cor-card-imagem-fundo: #eeeeee; --cor-texto-suave: #666666; --cor-texto-suave-2: #555555; --cor-codigo-fundo: #f0f0f0; --cor-codigo-rotulo: #808080; --cor-modal-fundo: #ffffff; --cor-barra-fundo: #eaeaea; --cor-footer-texto: #888888; --cor-footer-borda: #e5e5e5; --cor-copyright-texto: #aaaaaa; } body.tema-minimalista .loja-header { box-shadow: none; } body.tema-minimalista .app-card:hover, body.tema-minimalista .app-card:focus-within { box-shadow: none; transform: none; outline-width: 2px; } body { margin: 0; font-family: var(--fonte); background: var(--cor-fundo); color: var(--cor-texto); } /* ---------- Cabeçalho da loja ---------- */ .loja-header { background: linear-gradient(135deg, var(--cor-primaria, #6C5CE7), var(--cor-secundaria, #00CEC9)); padding: 28px 20px 32px; display: flex; flex-direction: column; gap: 18px; border-radius: 0 0 22px 22px; box-shadow: 0 8px 26px rgba(0, 0, 0, .35); position: relative; z-index: 2; } .loja-header-conteudo { display: flex; align-items: center; gap: 16px; max-width: 1100px; margin: 0 auto; } .loja-logo { max-width: 108px; max-height: 84px; width: auto; height: auto; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35)); } .loja-header h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: .3px; color: #fff; text-shadow: 0 2px 3px rgba(0, 0, 0, .55), 0 5px 16px rgba(0, 0, 0, .4); -webkit-text-stroke: .6px rgba(0, 0, 0, .35); } .loja-header p { margin: 4px 0 0; opacity: .92; font-size: 14.5px; } .loja-busca { display: flex; gap: 8px; max-width: 1100px; margin: 0 auto; width: 100%; } .loja-busca-campo { position: relative; flex: 1; display: flex; align-items: center; } .loja-busca-campo input { width: 100%; padding: 10px 34px 10px 14px; border-radius: 8px; border: none; font-size: 14px; } .loja-busca-limpar { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.15); color: #333; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 16px; line-height: 1; font-weight: 700; } .loja-busca-limpar:hover, .loja-busca-limpar:focus { background: rgba(0,0,0,.3); outline: 3px solid #fff; outline-offset: 2px; } .loja-busca button { padding: 10px 16px; border-radius: 8px; border: none; background: rgba(0,0,0,.25); color: #fff; cursor: pointer; } .loja-busca-campo input:focus, .loja-busca button:focus { outline: 3px solid #fff; outline-offset: 2px; } /* ---------- Categorias ---------- */ /* Fica "grudada" no topo da tela ao rolar a página (sticky) — assim dá pra trocar de categoria sem precisar voltar lá em cima. Só ela gruda, não o banner: nas telas de celular, se os dois ficassem fixos sobraria pouco espaço pra ver os apps. */ .loja-categorias { display: flex; gap: 8px; overflow-x: auto; padding: 14px 20px; background: var(--cor-categorias-fundo); max-width: 1140px; margin: 0 auto; position: sticky; top: 0; z-index: 10; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); } .loja-categorias a { color: var(--cor-categoria-texto); text-decoration: none; padding: 6px 14px; border-radius: 20px; background: var(--cor-categoria-pill); white-space: nowrap; font-size: 13px; } .loja-categorias a.ativo { background: var(--cor-primaria, #6C5CE7); color: #fff; } /* ---------- Grid de apps ---------- */ .loja-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; padding: 20px; max-width: 1140px; margin: 0 auto; /* Sem isso, ao trocar de categoria e esconder/mostrar vários cards de uma vez, o navegador tenta "compensar" a rolagem sozinho pra manter algo visualmente parecido no lugar (scroll anchoring) — só que como o grid todo se reorganiza, ele calculava errado e a página pulava pra um ponto aleatório. Desligando isso aqui, a posição da rolagem fica exatamente onde estava. */ overflow-anchor: none; } .loja-vazio { grid-column: 1 / -1; text-align: center; color: #999; padding: 40px 0; } /* Escondido pelo JS quando o app não pertence à categoria selecionada no momento (a troca de categoria não recarrega mais a página). Repete ".app-card" no seletor (em vez de só ".app-card-oculto") pra garantir mais especificidade que a regra "display:flex" do ".app-card" normal, que vem depois no arquivo — senão o "display:none" perdia pra ela. */ .app-card.app-card-oculto { display: none; } .app-card { background: var(--cor-card-fundo); border-radius: 14px; padding: 14px; position: relative; display: flex; flex-direction: column; gap: 8px; text-align: center; outline-offset: 3px; overflow: hidden; /* Espaço reservado no topo pro scroll parar abaixo da barra de categorias (que é sticky) — sem isso, ao pular de card em card pelo controle remoto, o card de cima podia ficar escondido atrás dela. */ scroll-margin-top: 78px; } /* Agrupa tudo que vem depois da imagem (nome, descrição, meta, código, botão) num bloco só. No layout "Grade" isso não muda nada visualmente (ainda é uma coluna só). No layout "Lista" isso permite colocar a imagem à esquerda e esse bloco à direita, lado a lado. */ .app-corpo { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; } /* Garante que textos digitados sem espaços (nome, descrição, código) quebrem a linha em vez de vazar pra fora do card e cobrir o que vem depois. */ .app-card * { overflow-wrap: anywhere; word-break: break-word; } .app-destaque { position: absolute; top: 10px; right: 10px; background: #ffb020; color: #1a1a1a; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; z-index: 3; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); border: 2px solid #fff; } /* Número de posição do app na vitrine (opcional, ligado em Configurações). Fica do lado oposto ao selo "Destaque" pra nunca disputar o mesmo espaço. */ .app-numero { position: absolute; top: 10px; left: 10px; width: 34px; height: 34px; background: rgba(0, 0, 0, .6); color: #fff; border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; z-index: 3; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); } /* No PC/telas largas, onde o card fica bem menor por causa das várias colunas lado a lado, o número fica ainda um pouco maior pra continuar bem visível. */ @media (min-width: 640px) { .app-numero { width: 42px; height: 42px; font-size: 18px; border-width: 3px; } } .app-imagem { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--cor-card-imagem-fundo); position: relative; } .app-imagem-placeholder { font-size: 40px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* Preenche o quadrado sempre, mesmo quando a foto enviada não é quadrada: atrás fica a própria imagem borrada e ampliada (preenchendo tudo, sem barras vazias), e por cima a imagem nítida inteira, sem cortar nenhuma parte dela. É a mesma técnica usada em apps de streaming pra fotos de tamanhos variados. */ .app-imagem-slide { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; } .app-imagem-slide.ativa { display: flex; } .app-imagem-slide::before { content: ''; position: absolute; inset: -8%; background-image: var(--foto); background-size: cover; background-position: center; filter: blur(18px) brightness(.55); transform: scale(1.1); } .app-imagem-slide img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45)); } .app-galeria-seta { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.45); color: #fff; border: none; width: 24px; height: 24px; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; z-index: 2; } .app-galeria-anterior { left: 6px; } .app-galeria-proxima { right: 6px; } .app-galeria-pontos { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; z-index: 2; } .app-galeria-pontos span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.4); } .app-galeria-pontos span.ativo { background: #fff; } /* Nome e código do app ficam sempre em 1 linha (com "..." se for muito grande) pra o card não crescer sem limite — em vez disso, o valor completo sempre pode ser conferido/editado no painel. */ .app-nome { font-size: 18px; font-weight: 800; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Descrição: mostra 3 linhas por padrão; se o texto for maior que isso, em vez de crescer o card ou cortar o final, aparece uma rolagem vertical pra pessoa arrastar e ler o resto. */ .app-descricao { font-size: 13.5px; color: var(--cor-texto-suave); margin: 0; line-height: 17px; max-height: 51px; overflow-y: auto; } .app-descricao::-webkit-scrollbar { width: 4px; } .app-descricao::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 4px; } .app-categorias-tags { display: flex; flex-wrap: wrap; gap: 4px; } .app-categoria-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .2px; padding: 2px 8px; border-radius: 20px; background: var(--cor-barra-fundo); color: var(--cor-texto-suave); white-space: nowrap; } .app-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--cor-texto-suave-2); } /* Versão em destaque, no estilo "selo", pra ficar fácil de bater o olho e ver qual versão está disponível (em vez de só mais um texto solto no meio dos outros dados). */ .app-versao-destaque { background: linear-gradient(135deg, var(--cor-primaria, #6C5CE7), var(--cor-secundaria, #00CEC9)); color: #fff; padding: 2px 9px; border-radius: 20px; font-weight: 700; } /* Códigos (NTDOWN / Downloader): ficam lado a lado quando os dois existem, e quebram pra linha de baixo normalmente se não couberem (sem rolagem e sem cortar nada). */ .app-codigos { display: flex; flex-wrap: wrap; gap: 8px; } .app-codigo-chip { background: var(--cor-codigo-fundo); padding: 7px 9px; border-radius: 6px; display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 90px; } .app-codigo-rotulo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--cor-codigo-rotulo); } .app-codigo-valor { font-size: 14.5px; } .app-acoes { display: flex; flex-direction: column; gap: 8px; margin-top: auto; } .app-baixar { text-align: center; text-decoration: none; background: var(--cor-primaria, #6C5CE7); color: #fff; padding: 11px; border-radius: 8px; font-weight: 700; font-size: 14.5px; letter-spacing: .3px; border: none; cursor: pointer; } .app-baixar:hover { filter: brightness(1.1); } .app-detalhes-botao { background: transparent; color: var(--cor-texto-suave); border: 1px solid var(--cor-footer-borda); padding: 9px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; } .app-detalhes-botao:hover, .app-detalhes-botao:focus { background: var(--cor-codigo-fundo); color: var(--cor-texto); outline: none; } /* ---------- Destaque de seleção: mouse (hover), teclado e controle remoto de TV Box (focus) ---------- */ .app-card:hover, .app-card:focus-within { outline: 3px solid var(--cor-secundaria, #00CEC9); box-shadow: 0 0 0 6px rgba(0, 206, 201, .25); transform: scale(1.03); transition: transform .12s ease, box-shadow .12s ease; z-index: 3; } .app-baixar:hover, .app-baixar:focus, .loja-categorias a:hover, .loja-categorias a:focus { outline: 3px solid #fff; outline-offset: 2px; } .app-baixar:hover, .app-baixar:focus { background: var(--cor-secundaria, #00CEC9); } /* ---------- Modal de progresso de download ---------- */ .modal-download { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; } .modal-download.escondido { display: none; } .modal-download-caixa { background: var(--cor-modal-fundo); border-radius: 14px; padding: 24px; max-width: 340px; width: 100%; text-align: center; } .modal-download-caixa h3 { margin: 0 0 14px; font-size: 16px; } .barra-progresso { background: var(--cor-barra-fundo); border-radius: 20px; height: 10px; overflow: hidden; margin-bottom: 10px; } .barra-progresso-preenchida { background: var(--cor-primaria, #6C5CE7); height: 100%; width: 0%; transition: width .2s; } #modal-download-status { font-size: 13px; color: var(--cor-texto-suave); margin: 0 0 14px; } .modal-download-fechar { background: var(--cor-barra-fundo); color: var(--cor-texto); border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; } .modal-download-fechar:hover, .modal-download-fechar:focus { outline: 3px solid var(--cor-secundaria, #00CEC9); outline-offset: 2px; } /* ---------- Janela de detalhes do app ---------- */ .modal-detalhes { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; } .modal-detalhes.escondido { display: none; } .modal-detalhes-caixa { background: var(--cor-modal-fundo); color: var(--cor-texto); border-radius: 14px; padding: 24px; max-width: 420px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; } .modal-detalhes-caixa h3 { margin: 0 22px 14px 0; font-size: 18px; } .modal-detalhes-fechar { position: absolute; top: 16px; right: 16px; background: var(--cor-barra-fundo); color: var(--cor-texto); border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; } .modal-detalhes-fechar:hover, .modal-detalhes-fechar:focus { outline: 3px solid var(--cor-secundaria, #00CEC9); outline-offset: 2px; } .modal-detalhes-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .modal-detalhes-badge { background: var(--cor-codigo-fundo); color: var(--cor-texto-suave); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 20px; } .modal-detalhes-secao { margin-bottom: 16px; } .modal-detalhes-secao h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--cor-texto-suave-2); margin: 0 0 8px; } .modal-detalhes-lista { display: flex; flex-direction: column; gap: 6px; } .modal-detalhes-linha { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; background: var(--cor-codigo-fundo); padding: 8px 10px; border-radius: 8px; } .modal-detalhes-linha span { color: var(--cor-texto-suave); } .modal-detalhes-links-extra-lista { display: flex; flex-direction: column; gap: 6px; } .modal-detalhes-link-extra { display: block; text-align: center; font-size: 13.5px; font-weight: 700; text-decoration: none; background: var(--cor-codigo-fundo); color: var(--cor-secundaria, #00CEC9); padding: 9px 10px; border-radius: 8px; border: 1px solid var(--cor-secundaria, #00CEC9); } .modal-detalhes-link-extra:hover, .modal-detalhes-link-extra:focus { opacity: .85; outline: 3px solid var(--cor-secundaria, #00CEC9); outline-offset: 2px; } .modal-detalhes-permissoes-lista .modal-detalhes-badge, #modal-detalhes-permissoes-lista .modal-detalhes-badge { background: var(--cor-barra-fundo); } .modal-detalhes-acoes { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; } /* "Outras opções de download" agora vem depois de BAIXAR/Copiar link (antes ficava acima) — dá um respiro em vez de colar direto nos botões. */ .modal-detalhes-acoes + .modal-detalhes-secao { margin-top: 20px; margin-bottom: 0; } .botao-copiar-link { background: transparent; color: var(--cor-texto-suave); border: 1px solid var(--cor-footer-borda); padding: 10px; border-radius: 8px; font-weight: 600; font-size: 13.5px; cursor: pointer; } .botao-copiar-link:hover, .botao-copiar-link:focus { background: var(--cor-codigo-fundo); color: var(--cor-texto); outline: 3px solid var(--cor-secundaria, #00CEC9); outline-offset: 2px; } /* ---------- Tela de senha ---------- */ .pagina-senha { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; } .caixa-senha { background: var(--cor-modal-fundo); border-radius: 16px; padding: 32px; max-width: 340px; width: 100%; text-align: center; } .caixa-senha-logo { width: 56px; height: 56px; border-radius: 12px; margin-bottom: 12px; } .caixa-senha h1 { font-size: 18px; margin: 0 0 6px; } .caixa-senha p { color: var(--cor-texto-suave); font-size: 13px; margin: 0 0 20px; } .caixa-senha form { display: flex; flex-direction: column; gap: 10px; } .caixa-senha input { padding: 12px; border-radius: 8px; border: none; font-size: 16px; text-align: center; letter-spacing: 2px; } .caixa-senha button { padding: 12px; border-radius: 8px; border: none; background: var(--cor-primaria, #6C5CE7); color: #fff; font-weight: 600; cursor: pointer; } /* ---------- Flash messages ---------- */ .flash { margin: 12px auto; max-width: 1100px; padding: 10px 14px; border-radius: 8px; font-size: 13px; } .flash-sucesso { background: #1f4d3a; color: #8ef0c0; } .flash-erro { background: #4d1f27; color: #f08e9c; } /* ---------- Banner/destaque no topo (carrossel, opcional, gerenciado em Banners) ---------- */ .loja-banner { max-width: 1140px; margin: 16px auto 0; padding: 0 20px; } /* Caixa de tamanho fixo (não muda conforme a imagem); a imagem estica pra preencher 100% do espaço, sem sobrar borda nem cortar. Testado com o dono da loja — em fotos com pessoas dá uma leve achatada, mas no celular (o uso mais comum) fica praticamente imperceptível, e ele preferiu assim a deixar espaço sobrando nas laterais. */ .loja-banner-imagem-area { position: relative; aspect-ratio: 21 / 7; border-radius: 14px; overflow: hidden; background: var(--cor-card-imagem-fundo); box-shadow: 0 8px 22px rgba(0, 0, 0, .25); } .loja-banner-imagem-slide { position: absolute; inset: 0; display: none; } .loja-banner-imagem-slide.ativa { display: block; } .loja-banner-link { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; } .loja-banner-imagem { width: 100%; height: 100%; object-fit: fill; display: block; } .loja-banner-link:hover .loja-banner-imagem { filter: brightness(1.05); } .loja-banner-link:focus { outline: 3px solid var(--cor-secundaria, #00CEC9); outline-offset: -3px; } /* Texto (título/descrição) de cada banner fica centralizado, abaixo da imagem — só o do banner ativo no momento aparece, trocando junto quando passa pra próxima foto. */ .loja-banner-texto-slide { display: none; text-align: center; padding: 12px 4px 0; } .loja-banner-texto-slide.ativa { display: block; } .loja-banner-texto-slide h2 { margin: 0 0 4px; font-size: 19px; font-weight: 800; } .loja-banner-texto-slide p { margin: 0; font-size: 13.5px; color: var(--cor-texto-suave); } .loja-banner-seta { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, .4); color: #fff; border: none; width: 38px; height: 38px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; z-index: 2; } .loja-banner-seta:hover { background: rgba(0, 0, 0, .6); } .loja-banner-anterior { left: 10px; } .loja-banner-proxima { right: 10px; } .loja-banner-pontos { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; } .loja-banner-pontos span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 3px rgba(0, 0, 0, .4); } .loja-banner-pontos span.ativo { background: #fff; } @media (max-width: 640px) { .loja-banner-imagem-area { aspect-ratio: 16 / 9; } .loja-banner-seta { width: 32px; height: 32px; font-size: 17px; } } /* ---------- Layout do card: Grade (padrão) ou Lista ---------- */ /* "Grade" é o layout original (várias colunas, card na vertical). "Lista" deixa os apps em uma coluna só, com a imagem menor à esquerda e as informações à direita — bom pra lojas com poucos apps ou quando a pessoa prefere um visual mais compacto tipo lista de contatos. */ .loja-grid.layout-lista { grid-template-columns: 1fr; max-width: 760px; gap: 10px; } .loja-grid.layout-lista .app-card { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 10px; } .loja-grid.layout-lista .app-imagem { width: 88px; height: 88px; aspect-ratio: unset; flex-shrink: 0; } .loja-grid.layout-lista .app-corpo { text-align: left; } .loja-grid.layout-lista .app-meta { justify-content: flex-start; } .loja-grid.layout-lista .app-acoes { flex-direction: row; align-self: flex-start; margin-top: 4px; } .loja-grid.layout-lista .app-baixar { width: auto; padding: 9px 22px; } .loja-grid.layout-lista .app-detalhes-botao { width: auto; padding: 9px 16px; } @media (max-width: 480px) { .loja-grid.layout-lista .app-imagem { width: 68px; height: 68px; } } /* ---------- Rodapé ---------- */ .loja-footer { text-align: center; padding: 24px 20px 40px; color: var(--cor-footer-texto); font-size: 12.5px; max-width: 1140px; margin: 0 auto; } .loja-footer a { color: var(--cor-secundaria, #00CEC9); } .loja-copyright { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cor-footer-borda); color: var(--cor-copyright-texto); font-size: 11.5px; letter-spacing: .2px; } /* Selo/badge com o total de acessos — estilo "placar digital": fundo escuro fixo (não muda com o tema da loja, de propósito — é pra parecer um contador físico, tipo painel de LED) com o número em destaque monoespaçado e um leve brilho verde. Mesmo visual do card "Visitas hoje" do Dashboard do painel, pra ficar claro que é a mesma ideia. */ .loja-contador-acessos { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; padding: 8px 18px; border-radius: 20px; background: #14151f; border: 1px solid rgba(255, 255, 255, .08); } .loja-contador-acessos-icone { font-size: 14px; line-height: 1; } .loja-contador-acessos-texto { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: #9a9ab0; } .loja-contador-acessos-numero { font-family: 'Courier New', Courier, monospace; font-size: 15px; font-weight: 700; letter-spacing: 1.5px; color: #3ee06b; text-shadow: 0 0 8px rgba(62, 224, 107, .45); } /* ---------- Botões flutuantes de navegação (Topo/Início) ---------- */ /* Ficam do lado esquerdo (o WhatsApp já ocupa o direito), só aparecem depois de rolar um pouco a página — pra não ocupar espaço à toa numa tela pequena de celular/TV logo de cara. */ .loja-flutuante-navegacao { position: fixed; left: 16px; bottom: 20px; z-index: 90; flex-direction: column; gap: 8px; } /* "escondido" aqui é display:none de verdade (mesma classe usada no resto do site) — importante pra quem navega por Tab/seta não cair sem querer num botão invisível fora da tela. JS troca "escondido" por "visivel" conforme rola a página. */ .loja-flutuante-navegacao.escondido { display: none; } .loja-flutuante-navegacao.visivel { display: flex; } .loja-flutuante-botao { display: flex; align-items: center; gap: 6px; border: none; cursor: pointer; background: var(--cor-card-fundo, #222); color: var(--cor-texto); padding: 9px 14px 9px 10px; border-radius: 24px; font-size: 12.5px; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); white-space: nowrap; } .loja-flutuante-icone { font-size: 15px; line-height: 1; } .loja-flutuante-botao:hover { filter: brightness(1.15); } .loja-flutuante-botao:hover, .loja-flutuante-botao:focus { outline: 3px solid var(--cor-secundaria, #00CEC9); outline-offset: 2px; } @media (max-width: 480px) { /* Na tela pequena, os dois botões de navegação + o do WhatsApp podiam disputar espaço na mesma faixa horizontal — deixa só os ícones aqui pra caber tudo confortavelmente. */ .loja-flutuante-texto { display: none; } .loja-flutuante-botao { padding: 10px; border-radius: 50%; } } /* ---------- Botão flutuante de WhatsApp ---------- */ .whats-flutuante { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .whats-flutuante-dica { background: #fff; color: #222; padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; white-space: nowrap; } .whats-flutuante:hover .whats-flutuante-dica { opacity: 1; transform: translateY(0); } /* Só a logo do WhatsApp (sem disco/borda verde por trás) — o "botão" é a própria logo, do mesmo tamanho que ocupava o círculo + ícone antes. O brilho pulsante continua, só que ao redor da logo em vez de uma borda. */ .whats-flutuante-botao { width: 58px; height: 58px; border-radius: 50%; background: transparent; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); animation: whats-pulso 2.4s infinite; } .whats-flutuante-botao img { width: 100%; height: 100%; object-fit: contain; } .whats-flutuante-botao:hover { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)) brightness(1.06); } .whats-flutuante-botao:focus { outline: 3px solid #fff; outline-offset: 2px; border-radius: 50%; } @keyframes whats-pulso { 0%, 100% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)) drop-shadow(0 0 0 rgba(37, 211, 102, .6)); } 50% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)) drop-shadow(0 0 9px rgba(37, 211, 102, .6)); } } .whats-flutuante-cartao { width: 300px; max-width: calc(100vw - 40px); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px rgba(0, 0, 0, .28); color: #222; } .whats-flutuante-cartao.escondido { display: none; } .whats-flutuante-topo { background: #25D366; color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 8px; } .whats-flutuante-topo strong { flex: 1; font-size: 14px; } .whats-flutuante-fechar { background: rgba(255, 255, 255, .2); border: none; color: #fff; width: 24px; height: 24px; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; } .whats-flutuante-fechar:hover { background: rgba(255, 255, 255, .35); } .whats-flutuante-corpo { padding: 14px; font-size: 13.5px; line-height: 19px; } .whats-flutuante-corpo p { margin: 0 0 10px; } .whats-flutuante-corpo p:last-child { margin-bottom: 0; } .whats-flutuante-iniciar { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 14px 14px; background: #25D366; color: #fff; text-decoration: none; padding: 10px; border-radius: 24px; font-weight: 700; font-size: 13.5px; } .whats-flutuante-iniciar:hover { filter: brightness(1.06); } @media (max-width: 480px) { .whats-flutuante { right: 14px; bottom: 14px; } .whats-flutuante-botao { width: 52px; height: 52px; } } /* ---------- Lightbox: ver a foto do app em tela cheia ---------- */ /* O zoom agora só abre pelo botão da lupa (não mais clicando na foto toda). */ .app-imagem-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 2; cursor: zoom-in; width: 34px; height: 34px; padding: 0; border: none; background: transparent; display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .15s ease; } .app-imagem-zoom-icone { font-size: 18px; line-height: 1; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .85)) drop-shadow(0 0 4px rgba(0, 0, 0, .6)); } .app-imagem-zoom-texto { display: none; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; background: rgba(0, 0, 0, .78); color: #fff; padding: 5px 10px; border-radius: 20px; } .app-imagem-zoom:hover, .app-imagem-zoom:focus-visible { transform: scale(1.05); } .app-imagem-zoom:hover .app-imagem-zoom-icone, .app-imagem-zoom:focus-visible .app-imagem-zoom-icone { display: none; } .app-imagem-zoom:hover .app-imagem-zoom-texto, .app-imagem-zoom:focus-visible .app-imagem-zoom-texto { display: block; } @media (max-width: 640px) { .app-imagem-zoom { width: 30px; height: 30px; } .app-imagem-zoom-icone { font-size: 16px; } } .lightbox-imagem { position: fixed; inset: 0; background: rgba(5, 5, 8, .92); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .lightbox-imagem.escondido { display: none; } .lightbox-imagem-foto { max-width: min(92vw, 900px); max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); } .lightbox-imagem-fechar { position: absolute; top: 18px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; border: none; font-size: 24px; line-height: 1; cursor: pointer; } .lightbox-imagem-fechar:hover, .lightbox-imagem-fechar:focus { background: rgba(255, 255, 255, .25); outline: 3px solid #fff; outline-offset: 2px; } .lightbox-imagem-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; border: none; font-size: 26px; line-height: 1; cursor: pointer; } .lightbox-imagem-seta:hover, .lightbox-imagem-seta:focus { background: rgba(255, 255, 255, .25); outline: 3px solid #fff; outline-offset: 2px; } .lightbox-imagem-anterior { left: 14px; } .lightbox-imagem-proxima { right: 14px; } .lightbox-imagem-contador { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .75); font-size: 13px; } body.lightbox-aberto { overflow: hidden; } @media (max-width: 640px) { .lightbox-imagem-seta { width: 38px; height: 38px; font-size: 22px; } .lightbox-imagem-fechar { top: 10px; right: 12px; } }