/* ============================================================ AJUSTES DE MOBILE — carregado por último, de propósito ============================================================ Este arquivo existe separado do mw-landing.css por um motivo prático: você sobe arquivos pelo gerenciador da Hostinger, um a um, e o mw-landing.css tem mais de duas mil linhas. Mandar o arquivo inteiro de volta para corrigir três regras arrisca desfazer alguma alteração sua que eu não tenha visto. Como ele entra DEPOIS do mw-landing.css no , o que estiver aqui vence em caso de empate — sem precisar de !important e sem depender de qual versão do mw-landing.css está no servidor. Quando quiser, é só recortar estas regras para dentro do mw-landing.css, nas @media correspondentes, e apagar este arquivo com o . ============================================================ */ /* ------------------------------------------------------------ 1. FAIXA INSTITUCIONAL COM VÃOS ENORMES ENTRE OS QUATRO ITENS ------------------------------------------------------------ A `.provas` vira `flex-direction: column` abaixo de 1080px. E a `.provas__l` tem `flex: 1 1 520px`. Em coluna, `flex-basis` deixa de valer para a LARGURA e passa a valer para a ALTURA: a lista ganhava 520px de altura fixa. Como ela é uma grade de quatro linhas automáticas, o `align-content` padrão espalhava a sobra entre as linhas — daí os vãos de dedo entre "Gestão inteligente" e "Tudo conectado". `flex: 0 0 auto` devolve a altura ao conteúdo. O `align-content: start` é cinto e suspensório: mesmo que algo volte a esticar a lista, as linhas ficam agrupadas em cima em vez de se espalharem. ------------------------------------------------------------ */ @media (max-width: 1080px) { .provas__l { flex: 0 0 auto; align-content: start; } } /* ------------------------------------------------------------ 2. BOTÃO DO HERO COM O TEXTO CORTADO ------------------------------------------------------------ "Começar agora gratuitamente" aparecia como "agora gratuitar", cortado dos dois lados. São duas causas somadas: a) `.bt` tem `white-space: nowrap`, então o texto não quebra. b) `.bt--brilho` tem `overflow: hidden` (é o que segura o brilho que atravessa o botão). E `overflow` diferente de `visible` desliga o `min-width: auto` dos itens de flex — que é justamente a trava que impediria o botão de encolher além do próprio texto. Resultado: o botão encolhia abaixo do conteúdo, o texto não quebrava, e o `overflow: hidden` cortava as pontas. O segundo botão, sem `overflow: hidden`, mantinha a largura — por isso ficou maior que o principal. `flex-direction: column` resolve por construção: em coluna não há disputa por largura, cada botão ocupa a linha inteira. Não depende de `width: 100%` pegar nem de o navegador acertar o encolhimento. O `white-space: normal` é a rede de segurança para telas muito estreitas. ------------------------------------------------------------ */ /* Entre 681px e 1000px (tablet em pé) os botões continuam lado a lado, e ali o `flex-direction: column` abaixo não vale. Este piso resolve a causa em vez do sintoma: com um mínimo declarado, o item de flex volta a se recusar a encolher abaixo do próprio texto, e o par quebra para a linha de baixo — que é o que o `flex-wrap: wrap` sempre quis fazer. */ .hero__bts .bt { min-width: min-content; } @media (max-width: 680px) { .hero__bts { flex-direction: column; align-items: stretch; } .hero__bts .bt { width: 100%; justify-content: center; white-space: normal; /* pode quebrar em duas linhas, não cortar */ text-align: center; line-height: 1.3; } } /* Abaixo de 380px (iPhone SE e afins) o rótulo ainda encosta nas bordas. */ @media (max-width: 380px) { .hero__bts .bt--g { padding-left: 16px; padding-right: 16px; font-size: .92rem; } } /* ------------------------------------------------------------ 3. MENU DO CELULAR — BRANCO, SEM ACABAMENTO, E SUMINDO ------------------------------------------------------------ Três problemas de uma vez: a) FUNDO BRANCO num cabeçalho escuro. O `background: var(--bg)` puxa #FFFFFF, que é o fundo da landing — mas o topo e a primeira dobra são escuros. O menu abria como uma folha branca colada embaixo de uma barra preta. b) `z-index: -1`. Isso foi posto para o menu deslizar por trás do cabeçalho, e funciona enquanto ele é o único elemento em jogo. O problema é que z-index negativo faz o menu ser pintado ANTES do conteúdo próprio da barra — e qualquer coisa com fundo que caia por cima o engole. É por isso que ele aparece numa altura da página e some noutra: depende do que estiver atrás. c) `transform: translateY(-140%)` para esconder. Fechado, ele continua existindo e sendo lido por leitor de tela; e a animação de deslizar 140% da própria altura, num menu de sete itens, é um movimento longo demais para um toque. A correção troca a folha branca por vidro escuro — o mesmo do cabeçalho rolado —, dá um z-index positivo (dentro do .topo, que já está em 90) e substitui o deslize por um esmaecimento curto com `visibility`, que tira o menu fechado do caminho de vez. ------------------------------------------------------------ */ @media (max-width: 860px) { .topo__nav { /* Positivo, e dentro do contexto do .topo: fica acima do fundo da barra e acima da página, sem depender de quem está atrás. */ z-index: 1; padding: 10px 12px 14px; gap: 2px; border-radius: 0 0 20px 20px; border-bottom: 1px solid rgba(255, 255, 255, .10); background: rgba(9, 15, 29, .96); backdrop-filter: saturate(170%) blur(18px); -webkit-backdrop-filter: saturate(170%) blur(18px); box-shadow: 0 26px 54px -26px rgba(2, 8, 23, .92), inset 0 1px 0 rgba(255, 255, 255, .06); /* Esmaecimento curto no lugar do deslize de 140%. `visibility` é o que tira o menu fechado do alcance do toque e do leitor de tela — sem ela, ele continua lá, só que fora da vista. */ visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity .2s ease, transform .26s cubic-bezier(.2, .8, .2, 1), visibility .26s; } .topo__nav.aberto { visibility: visible; opacity: 1; transform: none; } .topo__nav a { padding: 13px 14px; border-radius: 10px; font-size: .97rem; font-weight: 500; letter-spacing: -.01em; color: rgba(226, 232, 240, .88); border-bottom: 1px solid rgba(255, 255, 255, .06); } .topo__nav a:hover, .topo__nav a:active { background: rgba(255, 255, 255, .09); color: #fff; } /* As duas ações finais deixam de ser mais um item de lista. O risco de um menu todo igual é o visitante rolar até o fim e não achar onde entra — que é justamente o que a página inteira está pedindo. */ .topo__nav a.so-mini { border-bottom: 0; text-align: center; font-weight: 600; } .topo__nav a[href="/login"] { margin-top: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; } .topo__nav a[href="/cadastro"] { margin-top: 8px; background: var(--azul, #2563EB); color: #fff; border: 0; box-shadow: 0 12px 26px -14px rgba(37, 99, 235, .9); } .topo__nav a[href="/cadastro"]:active { background: #1D4ED8; } } @media (prefers-reduced-motion: reduce) { .topo__nav { transition: none; } }