/* --- Gaveta de Serviços ------------------------------------------------ */ /* O item "Serviços" do menu não leva mais a lugar nenhum sozinho: ele abre a gaveta. Quem quiser a página com todos os serviços usa o último item da própria gaveta. A gaveta mora no fim do , e não dentro do menu, embora seja o menu que a comanda. O motivo é chato e decisivo: a barra do topo e dois blocos dentro dela têm `overflow: clip`. Pendurada ali dentro, a gaveta era montada, ficava na posição certa -- e era recortada na altura da própria barra. Existia e não aparecia. Fora da barra, nada a recorta. Em troca, a posição passa a ser calculada por script, porque `position: fixed` não sabe onde fica o item do menu. */ .squad-gaveta { position: fixed; z-index: 2147483000; display: none; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 2px 18px; padding: 18px; border-radius: 14px; /* um degrau mais claro que a barra, para a gaveta se destacar dela */ background: #0E3B6B; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); } .squad-gaveta.squad-aberta { display: grid; } /* A faixa invisível preenche o vão entre o item do menu e a gaveta: sem ela o ponteiro atravessa uma região "morta" no caminho e a gaveta se fecha bem na hora em que a pessoa vai clicar. */ .squad-gaveta::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } .squad-gaveta a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; white-space: nowrap; font-family: "Urbanist", "Urbanist Placeholder", sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; color: #FFFFFF; transition: background-color .2s ease, color .2s ease; } .squad-gaveta a:hover, .squad-gaveta a:focus-visible { background: #7CC4F5; color: #082A4D; outline: none; } .squad-gaveta .squad-gaveta-todos { grid-column: 1 / -1; margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; } /* --- Os três vetores dentro da gaveta ---------------------------------- */ /* A lista de dez serviços num monte só obrigava a ler tudo para achar um. Agora cada coluna é um vetor -- Limpeza, Portaria, Alojamento --, que é como o cliente procura. */ .squad-gaveta-grupo { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .squad-gaveta-grupo > span { padding: 6px 12px 8px; font-family: "Urbanist", "Urbanist Placeholder", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7CC4F5; white-space: nowrap; } /* O cabeçalho com o botão de fechar só faz sentido no celular: no computador a gaveta está claramente presa ao item do menu e fecha sozinha quando o ponteiro sai. */ .squad-gaveta-topo { display: none; } /* A setinha ao lado de "Serviços", para o item parecer o que é. */ .squad-seta { display: inline-block; width: 0; height: 0; margin-left: 7px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .65; } /* No celular a gaveta ocupa a largura da tela e rola por dentro: onze linhas não podem empurrar o resto do menu para fora do alcance. */ @media (max-width: 810px) { .squad-gaveta { grid-template-columns: 1fr; gap: 0; padding: 10px; max-height: 56vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .squad-gaveta a { white-space: normal; padding: 13px 10px; font-size: 16px; border-radius: 10px; } .squad-gaveta a:active { background: var(--token-823755eb-ad97-4037-9f1b-8a5594c1d68d, #7cc4f5); } .squad-gaveta::before { display: none; } .squad-gaveta-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .18); font-family: "Urbanist", "Urbanist Placeholder", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF; } .squad-gaveta-fechar { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: inherit; font-size: 22px; line-height: 1; cursor: pointer; } } /* Telas estreitas de verdade: uma coluna só, para os nomes longos ("Gestão de Alojamento") não estourarem a caixa. */ @media (max-width: 1080px) and (min-width: 810px) { .squad-gaveta { grid-template-columns: 1fr; } } @media (max-width: 810px) { /* no celular a gaveta é uma coluna só: os grupos viram seções, um abaixo do outro, com um respiro entre eles */ .squad-gaveta-grupo + .squad-gaveta-grupo { margin-top: 14px; } }