/* Motion Fit — modal da campanha do mês. Abre ao clicar na faixa da campanha (includes/campanha_mes.php). Ocupa quase a tela inteira e desfoca o que está atrás. */ .campaign-modal[hidden] { display: none; } .campaign-modal { position: fixed; inset: 0; z-index: 10000; /* acima do WhatsApp flutuante (9999) */ display: grid; place-items: center; padding: clamp(12px, 2.5vw, 28px); } .campaign-modal-backdrop { position: absolute; inset: 0; background: rgba(9, 12, 8, .62); /* O desfoque é do backdrop, não do conteúdo do site: assim não é preciso aplicar filtro no , que quebraria o position:fixed dos filhos (WhatsApp flutuante, voltar ao topo). */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .22s ease; } .campaign-modal-box { position: relative; width: 1400px; min-height: 90vh; max-height: 94vh; display: grid; gap: 26px; align-content: center; transition: opacity .22s ease, transform .22s ease; } .campaign-modal.is-open .campaign-modal-backdrop { opacity: 1; } .campaign-modal.is-open .campaign-modal-box { opacity: 1; transform: none; } .campaign-modal-close { position: absolute; top: clamp(8px, 1.4vw, 16px); right: clamp(8px, 1.4vw, 16px); z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #131312; color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background .18s ease, transform .18s ease; } .campaign-modal-close:hover, .campaign-modal-close:focus-visible { background: #98c01f; color: #131312; transform: scale(1.06); } /* A arte do modal é configurável no admin e pode ter qualquer proporção: a faixa horizontal (2954x270) ou uma peça vertical. Limitar pelos dois eixos faz a imagem caber sozinha nos dois casos — a largura manda nas horizontais, a altura nas verticais — sem cortar nada nem estourar a tela. */ /* A imagem é o próprio link (leva para as unidades). */ .campaign-modal-media { display: grid; place-items: center; min-height: 0; cursor: pointer; } .campaign-modal-media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 72vh; border-radius: 14px; transition: transform .18s ease; } .campaign-modal-media:hover img, .campaign-modal-media:focus-visible img { transform: scale(1.015); } /* Trava a rolagem do site enquanto o modal está aberto. */ body.campaign-modal-open { overflow: hidden; } @media (max-width: 720px) { .campaign-modal-box { width: 96vw; max-height: 92vh; } } @media (prefers-reduced-motion: reduce) { .campaign-modal-media:hover img { transform: none; } } @media (prefers-reduced-motion: reduce) { .campaign-modal-backdrop, .campaign-modal-box, .campaign-modal-close { transition: none; } .campaign-modal-box { transform: none; } }