/* =====================================================
LUSONIX ESPORTS — MOBILE.CSS
Developed by Izán Alvarez
Breakpoints:
900px — large tablets / modal
768px — tablets & phones (main)
480px — small phones
420px — extra small phones
Add AFTER style.css in every HTML :
Root:
pag/:
===================================================== */
/* ==============================================
FIX GLOBAL: Overlay e Backdrop não bloqueiam
cliques/toques quando estão inactivos
============================================== */
#overlay {
pointer-events: none;
}
#overlay.active {
pointer-events: all;
}
#modal-backdrop {
pointer-events: none;
}
#modal-backdrop.active {
pointer-events: all;
}
/* ==============================================
900px — Modal fullscreen em tablets grandes
============================================== */
@media (max-width: 900px) {
.product-modal {
width: 100%; height: 100%;
top: 0; left: 0;
transform: none;
border-radius: 0;
overflow-y: auto;
}
.modal-layout {
grid-template-columns: 1fr !important;
height: auto;
}
.modal-left-col { height: 40vh; }
.modal-right-col { padding: 22px; overflow-y: visible; }
}
/* ==============================================
768px — Tablets e Telemóveis (principal)
============================================== */
@media (max-width: 768px) {
/* GLOBAL */
html, body { overflow-x: hidden; width: 100%; -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; }
section { padding: 40px 15px !important; }
/* Touch targets: mínimo 44px (Apple/Google guideline) */
button,
a.btn-hero-main, a.btn-hero-outline,
.btn-add-lnx, .btn-adicionar, .size-btn,
.lnx-btn-watch,
.nav-main-list.active li a,
.footer-social-flex a, .social-flex a {
min-height: 44px;
}
/* PROMO BAR */
.top-promo-bar {
font-size: 9px;
letter-spacing: 1px;
padding: 10px 15px 35px;
}
/* NAVBAR */
.header-container { padding: 0 10px; width: 100%; }
.navbar-floating {
padding: 0 15px !important;
height: 65px !important;
position: relative;
justify-content: space-between !important;
}
.nav-logo-area {
flex-grow: 1;
display: flex !important;
justify-content: flex-start;
align-items: center !important;
}
.nav-logo-area img { height: 42px !important; }
/* Widget próximo jogo: esconder */
#next-match-header, #nav-sep { display: none !important; }
/* Hambúrguer: esconder o trigger duplicado, mostrar apenas o menu-toggle */
.mobile-menu-trigger { display: none !important; }
.menu-toggle,
.lnx-hamburger {
display: flex !important;
flex-shrink: 0;
cursor: pointer;
z-index: 1001;
margin-left: auto;
background: none;
border: none;
flex-direction: column;
justify-content: center;
gap: 5px;
padding: 8px;
}
.menu-toggle span,
.lnx-hamburger span {
display: block;
width: 24px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: all 0.3s ease;
}
.lnx-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lnx-hamburger.open span:nth-child(2) { opacity: 0; }
.lnx-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Menu desktop: esconder */
.nav-main-list { display: none !important; }
/* Menu mobile aberto */
.nav-main-list.active {
display: flex !important;
flex-direction: column !important;
position: absolute !important;
top: 65px !important; left: 0 !important;
width: 100% !important;
background: #0d0d0d !important;
padding: 15px 0 20px !important;
z-index: 1000 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
border-radius: 0 0 12px 12px !important;
}
.nav-main-list.active > li { width: 100% !important; text-align: center !important; }
.nav-main-list.active > li > a {
padding: 14px 20px !important;
font-size: 12px !important;
display: block !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
/* Dropdown "Clube": inline no mobile */
.nav-main-list.active .dropdown-menu {
position: static !important;
display: block !important;
opacity: 1 !important; visibility: visible !important;
transform: none !important;
background: #1a1a1a !important;
box-shadow: none !important; border: none !important;
border-radius: 0 !important;
min-width: unset !important; width: 100% !important;
padding: 0 !important;
}
.nav-main-list.active .dropdown-menu::before { display: none !important; }
.nav-btn-loja { margin: 10px 20px !important; border-radius: 8px !important; display: block !important; }
/* HERO */
.hero-impact { padding: 80px 20px 60px !important; }
.hero-container-inner {
flex-direction: column !important;
text-align: center !important;
gap: 30px !important;
}
.hero-visual { order: 1; width: 100% !important; display: flex; justify-content: center; }
.hero-text-content { order: 2; width: 100% !important; }
.floating-img { max-width: 200px !important; animation: none !important; }
.hero-text-content h1 { font-size: 36px !important; line-height: 1.1 !important; }
.hero-subtitle { font-size: 11px !important; letter-spacing: 3px !important; }
.hero-cta-group {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
width: 100% !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
a.btn-hero-main, a.btn-hero-outline {
width: 100% !important;
text-align: center !important;
padding: 16px 20px !important;
font-size: 12px !important;
}
/* SPONSORS */
.sponsors-wrapper { gap: 20px !important; padding: 15px 10px !important; }
.sponsor-item { min-width: 90px !important; flex: 0 0 auto !important; }
.sponsor-item img { max-height: 30px !important; }
/* NOTICIAS */
.news-section { padding: 40px 15px !important; }
.news-grid { grid-template-columns: 1fr !important; gap: 20px !important; padding: 10px 0 !important; }
.card-media { height: 180px !important; }
/* VIDEOS */
.video-grid-3 { grid-template-columns: 1fr !important; gap: 15px !important; margin-top: 25px !important; }
.video-card-tv.featured { transform: none !important; }
.modal-content { width: 95% !important; }
/* LOJA HOMEPAGE */
.shop-highlights-clean.compact { padding: 40px 15px !important; }
.shop-grid-clean { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; max-width: 100% !important; }
.img-box-clean { height: 140px !important; }
/* LOJA PÁGINA */
.products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; padding: 0 10px !important; margin: 20px auto !important; }
.img-container { height: 200px !important; }
.product-name { font-size: 11px !important; }
.price { font-size: 16px !important; }
.nav-menu { display: none !important; }
.inner-nav-bar { border-radius: 30px !important; padding: 0 20px !important; }
/* FIX: Botão ADICIONAR nos cards — Safari/iOS touch fix */
.product-card {
position: relative;
z-index: 1;
overflow: visible !important;
}
.btn-adicionar {
position: relative;
z-index: 2;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* CARRINHO */
.cart-sidebar {
width: 100% !important; height: 100% !important;
top: 0 !important; right: -100% !important;
transform: none !important;
border-radius: 0 !important;
}
.cart-sidebar.open { right: 0 !important; }
/* MODAL PRODUTO */
.product-modal {
width: 100% !important; height: 100% !important;
top: 0 !important; left: 0 !important;
transform: none !important;
border-radius: 0 !important;
overflow-y: auto !important;
}
.modal-layout { grid-template-columns: 1fr !important; height: auto !important; }
.modal-left-col { height: 280px !important; }
.modal-right-col { padding: 20px !important; overflow-y: visible !important; }
.modal-prod-name { font-size: 22px !important; }
.modal-footer-actions { flex-direction: column !important; gap: 10px !important; }
.qty-control-pill { width: 100% !important; justify-content: space-between !important; }
.btn-add-cart-modal {
width: 100% !important;
/* FIX: Safari/iOS — o ::before pseudo-elemento bloqueava o touch */
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
-webkit-transform: translateZ(0);
}
/* FOOTER */
.legal-footer { padding: 30px 0 15px !important; }
.footer-container { grid-template-columns: 1fr !important; gap: 25px !important; padding: 0 20px 30px !important; text-align: center !important; }
.footer-section, .footer-column { text-align: center; }
.contact-item { justify-content: center !important; }
.footer-links li, .simple-nav li { text-align: center; }
.footer-social-flex, .social-flex { justify-content: center !important; gap: 20px !important; font-size: 26px !important; }
.footer-social-flex a, .social-flex a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.footer-bottom { flex-direction: column !important; text-align: center !important; gap: 12px !important; padding: 20px 15px !important; }
.footer-legal-links { flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }
.footer-legal-links span { display: none !important; }
.footer-legal-links a { font-size: 10px !important; }
.footer-main { grid-template-columns: 1fr !important; text-align: center; }
.footer-bottom-info { text-align: center !important; }
.copyright-flex { flex-direction: column; gap: 20px; text-align: center; }
.legal-menu a { margin: 0 10px; }
}
/* ==============================================
480px — Telemóveis pequenos
============================================== */
@media (max-width: 480px) {
.section-header-news h2,
.section-header-centered h2 { font-size: 18px !important; }
.hero-text-content h1 { font-size: 28px !important; }
}
/* ==============================================
420px — Telemóveis extra pequenos
============================================== */
@media (max-width: 420px) {
.shop-grid-clean { grid-template-columns: 1fr !important; }
.products-grid { grid-template-columns: 1fr !important; }
}