/* * ============================================================================ * CUSTOM OVERRIDES — Estilos customizados que sobrescrevem o bundle original * ============================================================================ * * Este arquivo contém TODOS os overrides de CSS aplicados sobre o bundle * compilado (index-Cl834OsA.css). Centralizado aqui para evitar CSS * espalhado em index.php, provider-logos-fix.js e home-tabs-redirect.js. * * Estrutura: * 0. Contrato de escopo (LEIA ANTES DE EDITAR) * 1. Globais (animações, badges) — valem para os 33 temas * 2. Skin `default` (Layout1) — vale para os 12 temas do Layout1 * 3. Check-in style_2 — global * * Para manutenção, consulte: /docs-auditoria/mapa.md * ============================================================================ */ /* ============================================================================= 0. CONTRATO DE ESCOPO — por que este arquivo deixou de falar em ".blue-default" ============================================================================= O PROBLEMA QUE ISTO RESOLVE --------------------------- Até 30/07/2026 a seção 2 inteira era prefixada com `.blue-default`. Essa classe e o TEMA, nao o layout: ela so entra no em 4 dos 33 skins (Blue, BlueV01, BlueV02, Blue_V01). Resultado pratico: o Blue ficava 100% ajustado e Green / AmberPurple / PineGreen / AuroraYellow nao recebiam nada, embora usem EXATAMENTE a mesma marcacao — so muda a cor. Replicar por copia significaria 5 blocos identicos de ~90 linhas com os hex trocados a mao, e cada ajuste futuro teria de ser feito 5 vezes. E o que este arquivo passa a evitar. AS DUAS CLASSES, E QUAL USAR ---------------------------- O bundle escreve DUAS coisas diferentes no DOM (index-T2Rmfk75.js): -> a cor. Ex.: blue-default, green-default, forest-green, amber-purple, auroral-yellow, purple-light, ... -> a MARCACAO. Sempre um de: default | first | second (+ v01 / v02 quando o tema tem variante de home) Mapa skin -> layout, extraido do proprio bundle: default = Layout1 (12 temas) <- e o que a secao 2 customiza first = Layout2 (20 temas) second = Layout3 (1 tema) Como os componentes ajustados aqui (.segment-c, .apart-view-c, .payment-box, .custom-segment) so existem no Layout1, o escopo certo e `body.default`. Nao e uma escolha de estilo: os proprios seletores do bundle para esses componentes so aparecem sob os 5 temas do Layout1 — confirmado por busca em index-Cl834OsA.css. POR QUE `body.default` E MAIS SEGURO QUE NAO TER ESCOPO NENHUM -------------------------------------------------------------- Sem escopo, as regras vazariam para Layout2/Layout3, que tem componentes de nome parecido (.payment-box existe nos tres) mas estrutura diferente. `body.default` cobre os 12 temas alvo e nenhum a mais. COR: USE TOKEN, NUNCA HEX ------------------------- O bundle ja tem um design system completo. Cada tema declara ~400 variaveis num bloco `. body div#app { ... }`, e 276 delas sao comuns aos temas do Layout1. Os tokens de superficie usados aqui, conferidos nos 5 temas: token blue green forest amber auroral --color-bg-100 #191e2d #2b4f14 #006849 #3b3466 #38342E --color-bg-200 #101629 #274116 #00563A #2c294d #24221F --color-bg-300 #090f1f #213b10 #004D37 #262346 #171616 --theme-color-500 #1680DC #17b663 #004D37 #7a3fe8 #fbc63d --color-text-white-100 #fff #fff #fff #fff #fff Escrevendo `var(--color-bg-200)` no lugar de `#131826`, a MESMA regra serve os 12 temas e cada um pinta com a sua cor. Manutencao passa a ser: escreve uma vez, vale para todos. Todos os `var()` abaixo levam fallback. Se um tema novo nao declarar o token, ele cai no valor do Blue em vez de renderizar sem cor. ESPECIFICIDADE — POR QUE TROCAR O PREFIXO NAO QUEBRA NADA --------------------------------------------------------- `body.default` (0,2,0) e uma especificidade MENOR que a do bundle, que chega a `.blue-default #inicio .main-content .order-container .apart-view-c [data-v-f727b2e9] .payment-box` (1,6,0). Isso seria um problema se a disputa fosse por especificidade — mas nao e: TODA declaracao desta secao usa `!important`, e o bundle NAO usa `!important` em nenhuma dessas regras (verificado). Regra com !important ganha de regra sem !important independentemente da especificidade. O prefixo antigo `.blue-default` (0,2,0) tinha exatamente a mesma especificidade do novo `body.default`, entao a troca e neutra tambem entre as regras deste arquivo. COMO ADICIONAR UM AJUSTE NOVO ----------------------------- 1. E estrutural (posicao, tamanho, display, raio)? Vai na secao 2 com `body.default`, sem citar tema. 2. E cor? Ache o token equivalente. Se nao existir, use hex COM comentario explicando por que nenhum token servia. 3. So se o ajuste for de UM tema especifico: `.tema body.default .alvo`. Isso deve ser excecao — hoje o unico caso e o selo (ver 2.3). ============================================================================= */ /* ============================================= 1. GLOBAIS — Componentes customizados Sem escopo de propósito: valem nos 33 temas. ============================================= */ /* Animação do badge "Mais Pedido" / "Destaque" nos cards de depósito */ @keyframes recommendedPulse { 0% { transform: translate(-50%, 0) scale(1); } 50% { transform: translate(-50%, -2px) scale(1.04); box-shadow: 0 4px 10px rgba(239,68,68,0.4); } 100% { transform: translate(-50%, 0) scale(1); } } /* Badge flutuante sobre o card de depósito recomendado. O gradiente vermelho/dourado NAO vira token de proposito: e uma cor de alerta comercial, que precisa gritar igual em qualquer tema. Se virasse var(--theme-color-*), no tema Green o badge sumiria dentro do proprio fundo. */ .recommended-badge { position: absolute !important; top: -12px !important; left: 50% !important; transform: translateX(-50%) !important; background: linear-gradient(90deg, #ff4e50, #f9d423) !important; color: white !important; font-size: 9px !important; padding: 2px 8px !important; border-radius: 12px !important; font-weight: bold !important; white-space: nowrap !important; box-shadow: 0 2px 6px rgba(255, 78, 80, 0.3) !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 2px !important; z-index: 10 !important; width: max-content !important; height: auto !important; line-height: normal !important; animation: recommendedPulse 1.5s infinite ease-in-out !important; } /* Borda dourada no card de depósito recomendado — mesma razão do badge acima */ .btn-wrap.recommended { border: 1.5px solid #f9d423 !important; box-shadow: 0 0 10px rgba(249, 212, 35, 0.3) !important; } /* ============================================================================= 2. SKIN `default` = LAYOUT1 — os 12 temas de uma vez ============================================================================= Cobre: Blue, Blue_V01, BlueV01, BlueV02, Green, GreenV01, GreenV02, PineGreenV01, PineGreenV02, AmberPurple, AmberPurpleV01, AuroraYellow ============================================================================= */ /* --- Tokens locais deste arquivo --- Declarados no escopo do skin para poderem ser trocados por tema numa linha so, sem duplicar as regras que os consomem (ver 2.3). */ body.default { --pp-grade-img: url("/images/skin-game-platform.png"); --pp-selo-trace: url("/images/game-provider-premium-mask-trace.svg?v=1"); --pp-selo-stars: url("/images/game-provider-premium-mask-stars.svg?v=1"); /* Tinta do selo. Por padrao acompanha a cor do tema — ver as duas excecoes medidas logo abaixo. Os fallbacks sao as cores originais do SVG. */ --pp-selo-tint: var(--theme-color-500, #3d90de); --pp-selo-star: var(--accent-color-red, #e8474e); } /* EXCECOES DE CONTRASTE — medidas, nao chutadas. Contraste WCAG entre --theme-color-500 e a cor real do rodape de cada tema (amostrada dos proprios previews em /uploads/temas): blue-default #1680DC sobre #171e31 ..... 4.07:1 ok green-default #17b663 sobre #213b10 ..... 4.66:1 ok auroral-yellow #fbc63d sobre #22211d ..... 10.16:1 ok forest-green #004D37 sobre #065238 ..... 1.07:1 INVISIVEL amber-purple #7a3fe8 sobre #262346 ..... 2.62:1 fraco No forest-green a cor do tema E a cor do fundo: o selo sumiria por completo. Cada excecao troca so a tinta, mantendo a familia de matiz do tema. */ .forest-green body.default { --pp-selo-tint: var(--theme-color-800, #17B663); } /* 1.07:1 -> 3.48:1, segue verde */ .amber-purple body.default { --pp-selo-tint: var(--color-primary-border-light, #c3a9f5); } /* 2.62:1 -> 7.31:1, segue roxo */ /* Estrelas: #e64021 rende 3.0~4.0:1 em quatro temas, mas so 2.25:1 no fundo verde-escuro do forest. Clareia so nesse. */ .forest-green body.default { --pp-selo-star: #ff7f6a; } /* 2.25:1 -> 4.02:1 */ /* --- 2.1 Barrinha de provedores (segment-c) --- */ /* Esconder o pseudo-elemento ::before (trapezoid / bgTrapezoid) */ body.default .wrapper.segment-c::before { display: none !important; background: none !important; } /* Container da barra de provedores. Era `background: #131826` cravado. #131826 nao existia em token nenhum: era um cinza-azulado escolhido a olho, entre --color-bg-200 (#101629) e --color-bg-100 (#191e2d) do tema Blue. Passou a --color-bg-200, o mais proximo por luminancia — no Blue a diferenca e imperceptivel (3 pontos de RGB) e em troca Green, Amber, PineGreen e Aurora ganham a barra na cor certa deles em vez de um azul fora de contexto. */ body.default .wrapper.segment-c { background: var(--color-bg-200, #101629) !important; border-radius: 8px !important; /* Cantos arredondados */ margin: 6px 12px 0 !important; /* Margem: cima lados baixo */ box-shadow: none !important; border: none !important; } /* Esconder a barrinha indicadora de seleção sob a aba ativa */ body.default .wrapper.segment-c .line, body.default .wrapper.segment-c .layout1.line, body.default .wrapper.segment-c [class*="line"], body.default .wrapper.segment-c ion-segment-button::part(indicator), body.default .wrapper.segment-c ion-segment-button::part(indicator-background) { display: none !important; opacity: 0 !important; } /* Texto dos nomes dos provedores ("Popular", "PG", "PP"...). Os 5 temas do Layout1 tem fundo escuro, entao o branco serve em todos — mas fica no token para acompanhar se um tema claro entrar no Layout1. BUG CORRIGIDO AQUI: a linha era `font-weight: 160rem`. `font-weight` nao aceita unidade de comprimento; a declaracao era invalida e o navegador a descartava em silencio desde sempre. O peso real aplicado era o herdado. Trocado por 600, que e o que a regra queria dizer. */ body.default .wrapper.segment-c ion-segment-button .label, body.default .wrapper.segment-c ion-segment-button ion-label { color: var(--color-text-white-100, #fff) !important; font-size: 0.82rem !important; font-weight: 600 !important; opacity: 1 !important; } /* Ícones/logos dos provedores — visibilidade total */ body.default .wrapper.segment-c ion-segment-button .type-img, body.default .wrapper.segment-c ion-segment-button .type-icon, body.default .wrapper.segment-c ion-segment-button i, body.default .wrapper.segment-c ion-segment-button img { opacity: 1 !important; filter: none !important; -webkit-filter: none !important; } /* Fundo do wrapper de jogos — transparente */ body.default .tabbar-tabs-inicio-components-GameWrapper-index { background: transparent !important; } /* --- 2.2 Rail vertical de categorias (/game/category/...) --- Estrutura: .category-container > ion-content.side > ion-segment.custom-segment > ion-segment-button (um por provedor). Antes, a altura de cada caixa era ditada pelo conteudo, e como alguns itens vinham com DUAS logos (bug corrigido no provider-logos-fix.js) as celulas ficavam com alturas diferentes — 70px, 77px, 95px — e a coluna parecia desalinhada. Fixar a altura aqui garante o padrao mesmo que um provedor tenha nome de duas linhas ("Askme Slots") ou logo de proporcao esquisita. Tudo nesta subsecao e geometria pura, zero cor: ja era identico nos 12 temas, so estava trancado no Blue por causa do prefixo. */ /* 96px (era 82px): a logo passou de 52x40 para 66x50 em provider-logos-fix.js (styleRailLogo). Sem subir a celula junto, a logo maior espremia o nome. */ body.default ion-segment.custom-segment ion-segment-button { min-height: 96px !important; height: 96px !important; justify-content: center !important; } /* Logo: caixa fixa e `contain` para caber sem distorcer, seja a logo larga (Askme) ou quadrada (JDB). O `contain` centraliza dentro da caixa. */ body.default ion-segment.custom-segment ion-segment-button .type-img { width: 70px !important; height: 46px !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; margin: 0 auto 2px !important; flex: none !important; } /* Nome do provedor: cabe em duas linhas dentro dos 96px sem estourar. */ body.default ion-segment.custom-segment ion-segment-button .label, body.default ion-segment.custom-segment ion-segment-button ion-label { font-size: 0.72rem !important; line-height: 1.15 !important; margin: 0 !important; } /* --- 2.3 Bloco "Game Provider Premium" + provedores, no rodapé --- Estrutura original do tema (componente PartView): .apart-view-c ├─ img.game-brand ....... grade com os 6 provedores (skin-game-platform.png) ├─ .social-box .......... ícones de redes sociais └─ .payment-box ......... só a arte de fundo (bg-partners-*.png), sem conteúdo ATENCAO — skin-game-platform.png NAO e placeholder vazio. E a grade dos provedores (Pragmatic Play, CQ9, TaDa, Evoplay, PG Soft, SpiniX). Ela so PARECE vazia em captura comprimida, porque os logos sao claros sobre fundo quase preto. Numa tentativa anterior eu troquei essa imagem pelo selo via `content:` e o efeito colateral foi sumir com os provedores do rodape. Nao repita isso. Layout final: o selo e a grade passam a morar DENTRO do .payment-box, empilhados sobre a arte de fundo que ja estava la — dois backgrounds no mesmo ::after, o selo no topo e a grade embaixo. Os dois blocos originais sao escondidos para nao duplicar. */ /* saem de cima: agora vivem dentro do .payment-box */ body.default .apart-view-c img.game-brand { display: none !important; } body.default .payment-box { position: relative !important; display: block !important; /* sem width explicito o box colapsa para 0: ao tornar o ion-img absolute ele perde a largura intrinseca que segurava o container. 37px = a mesma folga lateral dos .divider do rodape (486 - 449). */ width: calc(100% - 37px) !important; align-self: stretch !important; min-height: 300px !important; /* cabe selo + as duas fileiras de logos */ overflow: hidden !important; border-radius: 10px !important; } /* Arte de fundo (bg-partners-*.png) removida a pedido: o bloco fica limpo, so o selo e os provedores sobre o fundo do rodape. Era ela que dava largura ao .payment-box — por isso o width explicito na regra acima e obrigatorio, senao o box colapsa para 0. */ body.default .payment-box ion-img { display: none !important; } /* A GRADE fica no proprio .payment-box — nao e tingida, e um PNG com os logos coloridos dos provedores. Os dois pseudo-elementos ficam livres para o selo. */ body.default .payment-box { background: var(--pp-grade-img) center bottom 26px / 88% auto no-repeat !important; } /* O SELO — antes era um SVG de cor chapada carregada por url(), o que travava o azul #3d90de em TODOS os temas: uma imagem em url() nao enxerga var() nem currentColor. Agora o SVG virou duas MASCARAS e a cor vem de token, entao o selo acompanha o tema sozinho. ::before -> mascara do traco (louros + "GAME PROVIDER" + pilula) ::after -> mascara das estrelas ao lado de "PREMIUM" "PREMIUM" continua sem cor propria: e um vazado na pilula, um furo no alpha da mascara. O fundo do rodape aparece por ele, entao o texto acompanha o tema de graca — inclusive se um dia o tema clarear. As mascaras sao GERADAS a partir de /images/game-provider-premium.svg separando os paths por fill (3 de #3d90de, 2 de #e8474e). Nao edite as mascaras a mao: mexa no SVG original e gere de novo. Conferido: recompor as duas nas cores originais bate pixel a pixel com o arquivo original (0 divergencias em 163.680 pixels). Os prefixos -webkit- sao obrigatorios: a WebView do app Android ainda serve mask-image so na versao prefixada. */ body.default .payment-box::before, body.default .payment-box::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center 26px; mask-position: center 26px; -webkit-mask-size: auto 84px; mask-size: auto 84px; } body.default .payment-box::before { background-color: var(--pp-selo-tint); -webkit-mask-image: var(--pp-selo-trace); mask-image: var(--pp-selo-trace); } body.default .payment-box::after { background-color: var(--pp-selo-star); -webkit-mask-image: var(--pp-selo-stars); mask-image: var(--pp-selo-stars); } /* `?v=` e obrigatorio nas mascaras: sem ele o navegador continua servindo a versao anterior do arquivo mesmo depois de regerada. Suba o numero a cada edicao — nos DOIS arquivos, senao o traco e as estrelas dessincronizam. */ /* ============================================================================= 3. CHECK-IN (SignIn) — TEMPLATE style_2: LEGIBILIDADE ============================================================================= Tela: /activity/SignIn/1887@style_2 (componente data-v-5d3a1545 do bundle). ESCOPO: esta secao ja nascia sem prefixo de tema, entao ja vale nos 33 temas. Nao foi tocada na refatoracao de 30/07/2026 — foi ajustada por legibilidade, e trocar estes valores por token reintroduziria justamente o bug que ela corrige (ver a nota da pilula "Extra" abaixo). O tema entrega esse template com texto quase apagado. Valores originais, conferidos em index-Cl834OsA.css: .item-style02-days -> color: rgba(255,255,255,.4) font-size: .625rem .reward-money-style02 -> color: rgba(255,255,255,.4) font-size: .45rem .extra-give-money -> font-size: .45rem + classe .text-gradient O caso da pilula "Extra" e o pior: .text-gradient aplica `-webkit-text-fill-color: transparent !important` e o texto passa a ser pintado pelo PROPRIO gradiente de fundo da pilula — verde sobre verde. Por isso aqui o fill e forcado numa cor escura, e nao so o `color`. Especificidade: as regras do bundle usam 2~3 classes + o atributo de escopo [data-v-5d3a1545]. Os seletores abaixo usam 3 classes + !important, o que ganha das regras normais. A UNICA que continua vencendo de proposito e `.available-item-style02 .reward-money-style02 { color:#feb805 !important }` (4 pontos de especificidade), que pinta o dia liberado de dourado — o destaque do dia da vez continua funcionando, so que maior. NAO usar padding lateral nos itens: a grade e de 3 colunas de 3.875rem com margin-right de 2.375rem; folga horizontal extra quebra a linha em 2. ============================================================================= */ /* "DAY 1", "DAY 2"... */ .date-list-style02 .date-list-item .item-style02-days, .date-list-style02 .less-date-list-item .item-style02-days { color: rgba(255, 255, 255, .92) !important; font-size: .78rem !important; line-height: 1.05rem !important; letter-spacing: .01em; } /* Valor da recompensa do dia ("+100,00" / "Fixo" / faixa aleatoria) */ .date-list-style02 .date-list-item .reward-money-style02, .date-list-style02 .less-date-list-item .reward-money-style02 { color: #ffd86b !important; font-size: .72rem !important; line-height: 1.05rem !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); } /* Pilula "Extra +5,00" — texto escuro sobre o verde, em vez de verde no verde. Cores cravadas de proposito: o gradiente do tema era exatamente o problema. */ .date-list-style02 .date-list-item .extra-give-money, .date-list-style02 .less-date-list-item .extra-give-money { font-size: .58rem !important; line-height: .82rem !important; padding: .14rem .45rem !important; color: #10250a !important; -webkit-text-fill-color: #10250a !important; background: linear-gradient(180deg, #b6e04a, #7fd42d) !important; } /* NAO adicionar padding/borda/fundo em .date-list-item: testado e revertido. O item tem min-width 3.875rem e margin-right 2.375rem, com o zeramento da margem no :nth-child(3n) fechando 3 colunas. Qualquer folga horizontal extra empurra o terceiro item para a linha de baixo e a grade vira 2x4. */ /* Fita do topo: "+0,00 | x 0 | VIP 0" */ .receive-box-style02 .receive-item { height: auto !important; padding: .16rem .4rem !important; font-size: .72rem !important; line-height: 1rem !important; color: #ffe6a6 !important; } /* Aviso de check-in perdido / recado acima da grade */ .sign-main-style02 .sign-prompt { color: rgba(255, 255, 255, .85) !important; font-size: .68rem !important; } /* ========================================================================== CENTRAL DE PROMOÇÕES — card sem banner definido -------------------------------------------------------------------------- Contexto: a tabela `promocoes` guarda a imagem do card na coluna `img`, e o painel só sabia TROCAR essa imagem, nunca limpá-la. Resultado: a linha 1887 (Check-in Diário) ficou presa em /uploads/activity_default.png — um placeholder egípcio que ninguém escolheu e que não havia como remover pela tela. O painel ganhou "Remover a imagem atual" (admin/editar-promocoes.php); este bloco cuida do que o site mostra depois disso. Sem imagem, o bundle monta o estilo inline como: background: url() no-repeat; background-size: 100% auto; min-height: 7.75rem; O navegador serializa isso para `url("")`, que NÃO é descartado: vira uma imagem vazia e o card fica um buraco transparente de ~155px na página. Daí o seletor por `[style*='url("")']`: ele casa EXATAMENTE com o caso da imagem ausente. Card que tem banner traz uma url real no atributo e não é tocado por nada abaixo — não existe risco de cobrir um banner legítimo. (Medido no Chrome em /main/promo, 30/07/2026.) ========================================================================== */ [style*='url("")'].rounded-\[\.625rem\], [style*='url("")'].rounded-top { background-image: linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%), linear-gradient(160deg, #1b2440 0%, #131a2e 55%, #0d1322 100%) !important; background-repeat: no-repeat !important; background-size: cover !important; border: 1px solid rgba(255,255,255,.07); } /* Marca d'água discreta, só para o bloco não parecer uma falha de carregamento. Fica atrás do título e dos selos, que o bundle desenha em elementos filhos. */ /* Só na variante que já é `position: relative` (a classe vem do próprio bundle). Na outra o ::after escaparia do card e cobriria vizinhos. */ [style*='url("")'].rounded-\[\.625rem\].relative::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 28%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 42%); border-radius: inherit; }