/* ========================================================================== ZappyXPlay — ajustes sobre o Spotlight ========================================================================== ⚠️ Este arquivo NÃO reescreve o tema: ele corrige o que quebra quando as páginas do sistema (login, cadastro, suporte, preços) usam um template feito para uma landing page de agência. Carregado DEPOIS do `main.css`. Cada bloco abaixo resolve um defeito visto na tela, e diz qual. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Conteúdo passando por baixo do cabeçalho -------------------------------------------------------------------------- O cabeçalho é `position: fixed`, e no template só DUAS coisas compensam a altura dele: `.hero` (`padding-top: 160px`) e `.page-title`. Toda página que não começa com uma das duas — o login, por exemplo — nasce com o título escondido atrás da barra. Aqui a compensação passa a ser do `.main`, e as duas exceções a devolvem: quem já tinha o respiro embutido não pode ganhar outro. -------------------------------------------------------------------------- */ /* ⚠️ **A compensação é por CLASSE, não por `:has()` nem margem negativa.** * * Duas tentativas anteriores falharam, e as duas de um jeito visível: * * · `margin-top: -100px` no primeiro filho puxava o BLOCO inteiro para * dentro da faixa do cabeçalho fixo — o título grande ficava cortado ao * meio, atrás da barra; * · `:has()` resolveria, mas o player roda em WebView de TV Box antigo, onde * o seletor não existe. O CSS é o mesmo para todo o site. * * Então quem sabe se precisa de respiro é o PHP, que já sabe se a página tem * cabeçalho: o `` recebe `sem-cabecalho` quando não tem, e só nesse caso * o `.main` compensa a altura da barra. Quem tem `hero` ou `page-title` já * carrega o próprio `padding-top`. */ body.sem-cabecalho .main { padding-top: 100px; } @media (max-width: 991px) { body.sem-cabecalho .main { padding-top: 80px; } } /* -------------------------------------------------------------------------- 2. Formulários ilegíveis -------------------------------------------------------------------------- ⚠️ Este é o defeito mais grave dos três: o Bootstrap desenha `.form-control` com fundo BRANCO e texto escuro. Num tema escuro o campo vira um retângulo branco, e o texto digitado sai quase invisível — foi o que aconteceu no login, com o CPF digitado sumindo dentro do campo. O Spotlight só estiliza os campos DENTRO de `.php-email-form`, que é o formulário de contato dele. Nenhum formulário do sistema usa essa classe. -------------------------------------------------------------------------- */ .form-control, .form-select { background-color: color-mix(in srgb, var(--surface-color), transparent 20%); border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%); color: var(--default-color); padding: 12px 15px; border-radius: 8px; } .form-control:focus, .form-select:focus { background-color: var(--surface-color); border-color: var(--accent-color); color: var(--default-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 85%); } /* O texto de exemplo precisa ser visivelmente mais fraco que o digitado — senão a pessoa não distingue o que ela escreveu do que o campo sugere. */ .form-control::placeholder { color: color-mix(in srgb, var(--default-color), transparent 55%); opacity: 1; } .form-label { color: var(--heading-color); font-weight: 500; margin-bottom: .4rem; } /* `.form-text` é a linha de ajuda embaixo do campo. O Bootstrap a pinta de cinza escuro, que sobre fundo escuro fica ilegível — era o caso de "É por aqui que a resposta chega" no suporte. */ .form-text, .text-muted { color: color-mix(in srgb, var(--default-color), transparent 40%) !important; } /* O select abre uma lista desenhada pelo sistema operacional: sem isto, as opções saem escuras sobre fundo escuro em boa parte dos navegadores. */ .form-select option { background-color: var(--surface-color); color: var(--default-color); } textarea.form-control { min-height: 120px; } /* -------------------------------------------------------------------------- 3. Botões sem contraste -------------------------------------------------------------------------- ⚠️ `.btn-accent` e `.btn-ghost` existem no Spotlight, mas SÓ dentro de `.hero .hero-actions` e `.why-us .intro-content`. Usados em qualquer outro lugar — no login, na página de preços — eles caem no botão cru do Bootstrap: transparente, com texto escuro sobre fundo escuro. Era o "Entrar" invisível do login e o "Testar 14 dias grátis" apagado nos preços. -------------------------------------------------------------------------- */ .btn-accent { background-color: var(--accent-color); color: var(--contrast-color); border: 2px solid var(--accent-color); padding: 12px 28px; border-radius: 50px; font-weight: 600; transition: .3s; } .btn-accent:hover, .btn-accent:focus { background-color: color-mix(in srgb, var(--accent-color), #fff 15%); border-color: color-mix(in srgb, var(--accent-color), #fff 15%); color: var(--contrast-color); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--default-color); border: 2px solid color-mix(in srgb, var(--default-color), transparent 70%); padding: 12px 28px; border-radius: 50px; font-weight: 600; transition: .3s; } .btn-ghost:hover, .btn-ghost:focus { border-color: var(--accent-color); color: var(--accent-color); background: color-mix(in srgb, var(--accent-color), transparent 92%); } /* Os botões de escolha (pessoa física / jurídica) no cadastro. */ .btn-outline-secondary { color: var(--default-color); border-color: color-mix(in srgb, var(--default-color), transparent 70%); } .btn-outline-secondary:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 88%); border-color: var(--accent-color); color: var(--accent-color); } .btn-check:checked + .btn-outline-secondary { background-color: var(--accent-color); border-color: var(--accent-color); color: var(--contrast-color); } /* -------------------------------------------------------------------------- 4. Cartões e avisos -------------------------------------------------------------------------- */ .card { background-color: var(--surface-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%); color: var(--default-color); } .alert { border: 1px solid transparent; border-radius: 8px; } .alert-success { background-color: color-mix(in srgb, #22c55e, transparent 88%); border-color: color-mix(in srgb, #22c55e, transparent 70%); color: #86efac; } .alert-danger { background-color: color-mix(in srgb, #ef4444, transparent 88%); border-color: color-mix(in srgb, #ef4444, transparent 70%); color: #fca5a5; } .alert-warning { background-color: color-mix(in srgb, #f59e0b, transparent 88%); border-color: color-mix(in srgb, #f59e0b, transparent 70%); color: #fcd34d; } .alert-info { background-color: color-mix(in srgb, var(--accent-color), transparent 90%); border-color: color-mix(in srgb, var(--accent-color), transparent 70%); color: var(--accent-color); } /* -------------------------------------------------------------------------- 5. A grade de planos -------------------------------------------------------------------------- O `.offering-block` do template foi feito para um cartão de serviço, de altura livre. Numa grade de preços os cartões precisam terminar na mesma linha, com o botão colado embaixo — senão o plano de descrição mais curta fica com o botão subindo no meio do cartão. -------------------------------------------------------------------------- */ .services .offering-block { height: 100%; display: flex; flex-direction: column; } .services .offering-block .offering-body { display: flex; flex-direction: column; flex: 1 1 auto; } /* Empurra o botão para o rodapé do cartão. */ .services .offering-block .offering-body > .btn { margin-top: auto; } .services .offering-block ul li { color: var(--default-color); } /* -------------------------------------------------------------------------- 6. O cabeçalho das páginas internas -------------------------------------------------------------------------- É o bloco que a Central de atendimento já usava e que agora abre TODAS as páginas internas: título grande, uma linha de contexto e a trilha de volta. O template desenha o fundo com um verde de 2% sobre o preto — quase nada, e na tela o bloco somia no fundo da página. Aqui ele ganha peso suficiente para ler-se como um cabeçalho, sem virar um segundo herói. -------------------------------------------------------------------------- */ .page-title { background: linear-gradient( 180deg, color-mix(in srgb, var(--accent-color), transparent 92%) 0%, var(--background-color) 100% ); border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .page-title .heading { padding: 140px 0 50px; } .page-title .heading h1 { color: var(--heading-color); font-weight: 700; margin-bottom: .75rem; } /* A linha de contexto: precisa ser lida, mas não competir com o título. */ .page-title .heading p { color: color-mix(in srgb, var(--default-color), transparent 25%); font-size: 1.05rem; max-width: 640px; margin-inline: auto; } /* A trilha (Início / Suporte) — o que diz onde a pessoa está. * * ⚠️ **Só o fundo é nosso.** O tema já cuida do separador `/` (por `::after`), * do espaçamento entre itens, da cor dos links e do destaque do item atual. * * A primeira versão redeclarava tudo isso e o resultado foi visível: um * `::before` próprio somava um segundo separador e a trilha saía * "Início / / Criar conta". Redeclarar o que o tema já faz não é neutro — é * assim que nasce esse tipo de defeito. */ .page-title .breadcrumbs { background-color: color-mix(in srgb, var(--surface-color), transparent 55%); border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 92%); padding: 14px 0; } @media (max-width: 991px) { .page-title .heading { padding: 110px 0 40px; } .page-title .heading h1 { font-size: 1.9rem; } } /* -------------------------------------------------------------------------- 7. A caixa dos formulários curtos (login, cadastro) -------------------------------------------------------------------------- `.reservation-form-bg` é do template antigo e não existe mais no Spotlight: a caixa do cadastro ficava sem fundo nenhum, solta no meio da página. -------------------------------------------------------------------------- */ .reservation-form-bg { background-color: var(--surface-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%); border-radius: 14px; padding-bottom: 1.5rem; } /* -------------------------------------------------------------------------- 8. Títulos que separam blocos de formulário — e o espaço entre eles -------------------------------------------------------------------------- "Dados da empresa" e "Dados do titular" no cadastro. Sem a linha embaixo os dois grupos se misturam num paredão de campos, e é justamente a separação que explica por que o CPF aparece depois do CNPJ. -------------------------------------------------------------------------- */ .titulo-bloco { color: var(--heading-color); font-size: 1.05rem; font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%); /* ⚠️ O espaço vem daqui, e não das classes `mt-4 mb-3` do Bootstrap: o tema define `margin` nos títulos (`h1..h6`) DEPOIS delas na cascata, e o título acabava colado no campo anterior. Declarar aqui vence, porque este arquivo é o último a carregar. */ margin-top: 2.5rem; margin-bottom: 1.25rem; padding-bottom: .5rem; } /* -------------------------------------------------------------------------- 9. A caixa do formulário: respiro -------------------------------------------------------------------------- ⚠️ `.reservation-form-bg` vinha do tema ANTIGO e lá trazia o padding junto. No Spotlight a classe não existe: os campos encostavam nas bordas da caixa, e o formulário virava uma laje cinza sem margem nenhuma. -------------------------------------------------------------------------- */ .reservation-form-bg { padding: 2rem; } @media (max-width: 575px) { .reservation-form-bg { padding: 1.25rem; } } /* ⚠️ NÃO use `:first-of-type` aqui. * * Ele conta entre IRMÃOS, e os dois títulos vivem em divs diferentes * (`#bloco-empresa` e `#bloco-titular`): cada um é o primeiro `h5` do próprio * pai, então a regra zerava a margem dos DOIS — e "Dados do titular" colava no * campo de cima. * * ⚠️ **A regra que zerava o `#bloco-empresa` foi REMOVIDA (26/08/2026).** Ela * nasceu quando "Dados da empresa" era a primeira coisa da caixa. Hoje o * seletor Empresa/Pessoa física vem antes dele, e o título ficava grudado nos * dois botões — sem nada separando a escolha do bloco que ela comanda. * * O respiro certo é sempre o mesmo, e agora todo título de bloco o recebe. O * primeiro elemento da caixa é o rótulo "Esta conta é de", que traz o próprio. */ /* -------------------------------------------------------------------------- 10. A escolha do plano dentro do cadastro -------------------------------------------------------------------------- ⚠️ `.opcoes-escolha` e `.opcao-pagamento` são classes do PAINEL (`assets/css/painel.css`), que a página pública não carrega. Sem estilo nenhum, os quatro planos viravam uma pilha de texto solto — nada indicava que eram escolhas, nem qual estava marcada. -------------------------------------------------------------------------- */ .opcoes-escolha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-top: .5rem; } .opcao-pagamento { display: flex; flex-direction: column; gap: .15rem; padding: 1rem; border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%); border-radius: 12px; background-color: color-mix(in srgb, var(--surface-color), transparent 35%); cursor: pointer; transition: .2s; text-align: center; } .opcao-pagamento:hover { border-color: color-mix(in srgb, var(--accent-color), transparent 50%); } /* A marcada precisa ser óbvia à distância: é a única coisa que diz o que a pessoa está prestes a contratar. */ .opcao-pagamento.selecionada { border-color: var(--accent-color); background-color: color-mix(in srgb, var(--accent-color), transparent 88%); } .opcao-pagamento h4 { font-size: 1rem; font-weight: 600; color: var(--heading-color); margin: 0; } .opcao-pagamento .valor { font-size: 1.25rem; font-weight: 700; color: var(--accent-color); } .opcao-pagamento p { font-size: .8rem; margin: 0; color: color-mix(in srgb, var(--default-color), transparent 35%); } /* -------------------------------------------------------------------------- 11. Botão sem classe -------------------------------------------------------------------------- ⚠️ O `#btn-criar` é um `