/* ============================================================================ compacto.css — reducao de escala do layout mobile ---------------------------------------------------------------------------- Pedido do dono em 18/08/2026: "as letras menores, mais simplificado". Calibrado medindo os dois prints de referencia que ele mandou: a palavra "Depositar" tem 27px de altura na tela desejada contra 35px na atual, ou seja 77% -- uma reducao de 23%. Aqui usamos 20%, um pouco mais conservador, para nao comprometer legibilidade em tela pequena. ARQUIVO ISOLADO DE PROPOSITO. Para desligar tudo, basta remover a linha do header.php que o inclui -- nenhum outro arquivo foi tocado. Carregado DEPOIS do tailwind.css, entao vence por ordem de cascata sem precisar de !important em tudo. Onde o !important aparece, e porque a regra original ja usava (o Tailwind do site compila com important: ".tailwindcss"). ========================================================================== */ /* -------------------------------------------------------------------------- 1. TIPOGRAFIA — escala reduzida em ~20% Os valores originais estao no comentario ao lado para facilitar o ajuste. -------------------------------------------------------------------------- */ .tailwindcss .text-3xl { font-size: 1.5rem; line-height: 1.85rem; } /* 30 -> 24 */ .tailwindcss .text-2xl { font-size: 1.2rem; line-height: 1.6rem; } /* 24 -> 19 */ .tailwindcss .text-xl { font-size: 1rem; line-height: 1.4rem; } /* 20 -> 16 */ .tailwindcss .text-lg { font-size: 0.9rem; line-height: 1.3rem; } /* 18 -> 14 */ .tailwindcss .text-base{ font-size: 0.8rem; line-height: 1.2rem; } /* 16 -> 13 */ .tailwindcss .text-sm { font-size: 0.72rem; line-height: 1.05rem; } /* 14 -> 11.5 */ .tailwindcss .text-xs { font-size: 0.65rem; line-height: 0.95rem; } /* 12 -> 10.4 */ /* Titulos do site fora do escopo do Tailwind (CSS legado do Webflow) */ .window-register h2, .card.windows h2 { font-size: 1.2rem !important; line-height: 1.5rem; } .card.windows .gray { font-size: 0.78rem; } /* -------------------------------------------------------------------------- 2. ESPACAMENTO — reducao menor (~15%), para o layout nao ficar apertado -------------------------------------------------------------------------- */ .tailwindcss .p-5 { padding: 1rem; } /* 20 -> 16 */ .tailwindcss .p-4 { padding: 0.8rem; } /* 16 -> 13 */ .tailwindcss .p-3 { padding: 0.62rem; } /* 12 -> 10 */ .tailwindcss .py-3 { padding-top: 0.62rem; padding-bottom: 0.62rem; } .tailwindcss .py-2 { padding-top: 0.4rem; padding-bottom: 0.4rem; } .tailwindcss .space-y-5 > * + * { margin-top: 1rem; } .tailwindcss .space-y-4 > * + * { margin-top: 0.8rem; } .tailwindcss .space-y-3 > * + * { margin-top: 0.62rem; } /* -------------------------------------------------------------------------- 3. CONTROLES — botoes e campos mais baixos, acompanhando a tipografia Minimo de 40px de altura preservado: abaixo disso o alvo de toque fica menor que o recomendado para dedo em tela pequena. -------------------------------------------------------------------------- */ .tailwindcss button, .tailwindcss .btn, .tailwindcss input[type="text"], .tailwindcss input[type="number"], .tailwindcss input[type="tel"], .tailwindcss input[type="password"] { min-height: 40px; } .tailwindcss input[type="text"], .tailwindcss input[type="number"], .tailwindcss input[type="tel"], .tailwindcss input[type="password"] { font-size: 0.85rem; } /* O CTA principal continua com destaque, so que proporcional ao resto */ .tailwindcss .text-xl.font-bold[class*="bg-primary"] { font-size: 1rem; } /* -------------------------------------------------------------------------- 5. TELAS MUITO ESTREITAS — um passo a mais de reducao abaixo de 380px -------------------------------------------------------------------------- */ @media (max-width: 379px) { .tailwindcss .text-3xl { font-size: 1.35rem; line-height: 1.7rem; } .tailwindcss .text-2xl { font-size: 1.1rem; line-height: 1.45rem; } .tailwindcss .text-xl { font-size: 0.95rem; line-height: 1.3rem; } } /* -------------------------------------------------------------------------- MODAL DE DEPOSITO: TELA CHEIA (27/08/2026) -------------------------------------------------------------------------- Havia aqui duas secoes que tiravam o #modalDeposito2 da tela cheia: uma encolhia o painel, a outra o transformava em cartao flutuante centralizado com o fundo escurecido. Vieram de um pedido anterior do dono e sairam a pedido dele tambem, depois de comparar com o site no ar -- la o deposito ocupa a tela inteira. Sem elas o `x-data="fullscreen"` volta a valer sozinho, que e exatamente o comportamento de producao (onde nao existe compacto.css). O qrCodeModal usa o MESMO componente e nunca foi afetado: tudo o que saiu estava escopado em #modalDeposito2. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- LOGIN E CADASTRO NA ESCALA DE PRODUCAO (27/08/2026) -------------------------------------------------------------------------- Pedido do dono: estas duas telas iguais as do site no ar. O compacto continua valendo no resto do site -- so estas tres modais voltam a escala original. Os valores abaixo foram MEDIDOS no ar (slottpiixbet.com, 390x844), nao deduzidos: titulo 24/32, subtitulo 14/20, botao 16/24, campo 13px, botao de fechar 32x32. Escopado por ID de proposito: id vence classe na cascata, entao nada aqui precisa de !important e nada vaza para o resto do site. -------------------------------------------------------------------------- */ #entrarModal2 .text-3xl, #cadastroModal2 .text-3xl, #cadastroSair .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } #entrarModal2 .text-2xl, #cadastroModal2 .text-2xl, #cadastroSair .text-2xl { font-size: 1.5rem; line-height: 2rem; } #entrarModal2 .text-xl, #cadastroModal2 .text-xl, #cadastroSair .text-xl { font-size: 1.25rem; line-height: 1.75rem; } #entrarModal2 .text-lg, #cadastroModal2 .text-lg, #cadastroSair .text-lg { font-size: 1.125rem; line-height: 1.75rem; } #entrarModal2 .text-base, #cadastroModal2 .text-base, #cadastroSair .text-base { font-size: 1rem; line-height: 1.5rem; } #entrarModal2 .text-sm, #cadastroModal2 .text-sm, #cadastroSair .text-sm { font-size: 0.875rem; line-height: 1.25rem; } #entrarModal2 .text-xs, #cadastroModal2 .text-xs, #cadastroSair .text-xs { font-size: 0.75rem; line-height: 1rem; } #entrarModal2 .space-y-5 > * + *, #cadastroModal2 .space-y-5 > * + *, #cadastroSair .space-y-5 > * + * { margin-top: 1.25rem; } #entrarModal2 .space-y-4 > * + *, #cadastroModal2 .space-y-4 > * + *, #cadastroSair .space-y-4 > * + * { margin-top: 1rem; } #entrarModal2 .space-y-3 > * + *, #cadastroModal2 .space-y-3 > * + *, #cadastroSair .space-y-3 > * + * { margin-top: 0.75rem; } #entrarModal2 .p-5, #cadastroModal2 .p-5, #cadastroSair .p-5 { padding: 1.25rem; } #entrarModal2 .p-4, #cadastroModal2 .p-4, #cadastroSair .p-4 { padding: 1rem; } #entrarModal2 .p-3, #cadastroModal2 .p-3, #cadastroSair .p-3 { padding: 0.75rem; } #entrarModal2 .py-3, #cadastroModal2 .py-3, #cadastroSair .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } #entrarModal2 .py-2, #cadastroModal2 .py-2, #cadastroSair .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* O min-height de 40px do compacto esticava o botao de fechar (size-8) para 32x40. Producao nao tem esse minimo: la o X e um quadrado de 32. Os campos e o CTA nao dependiam dele -- ja passam de 40px pelo proprio padding. */ #entrarModal2 button, #cadastroModal2 button, #cadastroSair button, #entrarModal2 input, #cadastroModal2 input, #cadastroSair input { min-height: 0; } /* 13,3333px e o padrao do navegador para . Producao nao tem regra nenhuma aqui, entao e esse valor que ela mostra (medido: 13px). O compacto punha 0.85rem = 13,6px. */ #entrarModal2 input, #cadastroModal2 input, #cadastroSair input { font-size: 13.3333px; } /* O passo extra de reducao abaixo de 380px tambem nao vale aqui. */ @media (max-width: 379px) { #entrarModal2 .text-3xl, #cadastroModal2 .text-3xl, #cadastroSair .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } #entrarModal2 .text-2xl, #cadastroModal2 .text-2xl, #cadastroSair .text-2xl { font-size: 1.5rem; line-height: 2rem; } #entrarModal2 .text-xl, #cadastroModal2 .text-xl, #cadastroSair .text-xl { font-size: 1.25rem; line-height: 1.75rem; } } /* -------------------------------------------------------------------------- O COMPACTO NAO VALE DENTRO DE MODAL (27/08/2026) -------------------------------------------------------------------------- Producao nao tem este arquivo, entao nos modais dela a escala e a original. Medido no navegador, 390x844, comparando com slottpiixbet.com: titulo do deposito 24px -> 19,2px CTA do deposito 20/28 -> 16/22,4 (e a caixa de 44 -> 40px) text-xs 12/16 -> 10,4/15,2 em 5 de 5 elementos text-sm 14/20 -> 11,52/16,8 em 8 elementos botao X do deposito 36x36 -> 36x40 (min-height:40px) chip "RESGATAR" 78x32 -> 78x40 Eram 30 botoes com piso de 40px que producao nao tem. Havia excecao caso a caso para seis modais; isto substitui a lista por uma regra so. O compacto continua valendo nas telas de conteudo -- home, cassino, minha conta --, que foi o pedido de 18/08. So os modais voltam a escala do site no ar. Mesma especificidade das regras do compacto (0,2,0), mas DEPOIS no arquivo; as duas tem !important, entao a ordem decide. -------------------------------------------------------------------------- */ .modal .text-3xl, [x-data="fullscreen"] .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; } .modal .text-2xl, [x-data="fullscreen"] .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; } .modal .text-xl, [x-data="fullscreen"] .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; } .modal .text-lg, [x-data="fullscreen"] .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; } .modal .text-base,[x-data="fullscreen"] .text-base{ font-size: 1rem !important; line-height: 1.5rem !important; } .modal .text-sm, [x-data="fullscreen"] .text-sm { font-size: .875rem !important; line-height: 1.25rem !important; } .modal .text-xs, [x-data="fullscreen"] .text-xs { font-size: .75rem !important; line-height: 1rem !important; } .modal .p-5, [x-data="fullscreen"] .p-5 { padding: 1.25rem !important; } .modal .p-4, [x-data="fullscreen"] .p-4 { padding: 1rem !important; } .modal .p-3, [x-data="fullscreen"] .p-3 { padding: .75rem !important; } .modal .py-3, [x-data="fullscreen"] .py-3 { padding-top: .75rem !important; padding-bottom: .75rem !important; } .modal .py-2, [x-data="fullscreen"] .py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; } .modal .space-y-5 > * + *, [x-data="fullscreen"] .space-y-5 > * + * { margin-top: 1.25rem !important; } .modal .space-y-4 > * + *, [x-data="fullscreen"] .space-y-4 > * + * { margin-top: 1rem !important; } .modal .space-y-3 > * + *, [x-data="fullscreen"] .space-y-3 > * + * { margin-top: .75rem !important; } /* O piso de 40px e o que mais aparece: transforma botao quadrado em retangulo. */ .modal button, .modal .btn, .modal input, [x-data="fullscreen"] button, [x-data="fullscreen"] .btn, [x-data="fullscreen"] input { min-height: 0 !important; } /* -------------------------------------------------------------------------- AREA LOGADA NA ESCALA DE PRODUCAO (27/08/2026) -------------------------------------------------------------------------- Mesma razao do bloco dos modais, para minha conta e indique. Escopo por `.escala-producao`, classe que estas duas telas passam a carregar no proprio wrapper `.tailwindcss` -- nao existia classe de pagina. -------------------------------------------------------------------------- */ .escala-producao .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; } .escala-producao .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; } .escala-producao .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; } .escala-producao .text-base{ font-size: 1rem !important; line-height: 1.5rem !important; } .escala-producao .text-sm { font-size: .875rem !important; line-height: 1.25rem !important; } .escala-producao .text-xs { font-size: .75rem !important; line-height: 1rem !important; } .escala-producao .p-4 { padding: 1rem !important; } .escala-producao .p-3 { padding: .75rem !important; } .escala-producao .py-3 { padding-top: .75rem !important; padding-bottom: .75rem !important; } .escala-producao .space-y-3 > * + * { margin-top: .75rem !important; } .escala-producao .space-y-5 > * + * { margin-top: 1.25rem !important; } /* Os cinco "Resgatar" do indique iam de ~24px para 40px pelo piso do compacto. */ .escala-producao button { min-height: 0 !important; }