/* ========================================================= FORNATTA · MOBILE FIX v2 (redesenhado · 2026) Ajustes responsivos completos para todas as páginas. Carregado por último em , sobrescreve os CSS originais. ========================================================= */ /* ----- Base ----- */ @media (max-width: 1024px) { html, body { overflow-x: hidden !important; } img { max-width: 100%; height: auto; } } /* ========================================================= TABLET / MOBILE GRANDE ≤ 900px ========================================================= */ @media (max-width: 900px) { /* ---------- NAVBAR (todas as páginas) ---------- */ header { position: relative !important; } .navbar { width: calc(100% - 20px) !important; margin: 12px auto !important; padding: 12px 16px !important; border-radius: 18px !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: space-between !important; align-items: center !important; } .navbar .logo img, .logo img { width: 92px !important; } .nav-links { order: 3 !important; width: 100% !important; margin: 4px -16px 0 !important; padding: 6px 16px !important; gap: 6px !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; border-top: 1px solid rgba(255,255,255,.12) !important; } .nav-links::-webkit-scrollbar { display: none !important; } .nav-links li { flex: 0 0 auto !important; } .nav-links a { display: inline-block !important; padding: 8px 14px !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; font-size: 13px !important; font-weight: 600 !important; color: #fff !important; white-space: nowrap !important; } .nav-links a:hover, .nav-links a.active { background: #f97316 !important; color: #fff !important; } .nav-right, .icons { gap: 10px !important; font-size: 18px !important; } .pedido-btn { padding: 9px 16px !important; font-size: 13px !important; } .user-area { max-width: 160px !important; padding: 6px 10px !important; font-size: 12px !important; } .user-area span, .user-area .user-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- HERO (home) ---------- */ .hero { height: auto !important; min-height: 60vh !important; padding: 80px 22px 60px !important; text-align: center !important; justify-content: center !important; background-position: center !important; } .hero-content { max-width: 100% !important; } .hero-content h1 { font-size: 36px !important; line-height: 1.15 !important; } .hero-content p { font-size: 15px !important; margin-bottom: 22px !important; } .hero-buttons { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; } .orange-btn, .dark-btn { padding: 14px 22px !important; font-size: 15px !important; border-radius: 999px !important; width: 100% !important; } /* ---------- CATEGORIAS ---------- */ .categorias { padding: 50px 18px !important; } .categorias h2, .restaurante h2, .destaques h2 { font-size: 26px !important; margin-bottom: 26px !important; } .categoria-container { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .categoria-card { width: 100% !important; height: 140px !important; border-radius: 20px !important; } .categoria-card i { font-size: 34px !important; } .categoria-card span { font-size: 15px !important; } /* ---------- RESTAURANTE ---------- */ .restaurante { padding: 50px 18px !important; } .restaurante-content { flex-direction: column !important; gap: 24px !important; } .galeria { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .galeria img { height: 140px !important; border-radius: 14px !important; } .restaurante-text h3 { font-size: 24px !important; } .restaurante-text p { font-size: 15px !important; } /* ---------- DESTAQUES / FOOD CARDS ---------- */ .destaques { padding: 50px 18px !important; } .foods { gap: 18px !important; } .food-card { width: 100% !important; max-width: 420px !important; margin: 0 auto !important; border-radius: 20px !important; } .food-card img { height: 200px !important; } .food-content { padding: 16px !important; } .food-content h3 { font-size: 17px !important; } .food-content p { font-size: 14px !important; margin-bottom: 14px !important; } .food-bottom span { font-size: 19px !important; } .food-bottom button { padding: 9px 16px !important; font-size: 13px !important; } /* ---------- FOOTER ---------- */ footer { padding: 40px 20px !important; } footer img { width: 130px !important; } .contato-info p { font-size: 14px !important; flex-wrap: wrap; justify-content: center; } .footer-icons { gap: 16px !important; font-size: 22px !important; } /* ===================================================== CARDÁPIO ===================================================== */ header h1.brand-title { font-size: 34px !important; padding-top: 24px !important; } .menu-intro { font-size: 14px !important; padding: 0 18px !important; } .categories-nav { display: flex !important; gap: 8px !important; overflow-x: auto !important; padding: 14px 16px !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; justify-content: flex-start !important; } .categories-nav::-webkit-scrollbar { display: none !important; } .category-btn { flex: 0 0 auto !important; padding: 9px 16px !important; font-size: 13px !important; border-radius: 999px !important; white-space: nowrap !important; } .menu-container { padding: 0 14px 80px !important; display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; } .menu-item { flex-direction: row !important; display: flex !important; gap: 12px !important; padding: 12px !important; border-radius: 18px !important; } .menu-item .item-image, .menu-item img.item-image { width: 110px !important; height: 110px !important; object-fit: cover !important; border-radius: 14px !important; flex-shrink: 0 !important; } .menu-item .item-details { flex: 1 !important; min-width: 0 !important; } .item-header { flex-wrap: wrap !important; gap: 4px !important; } .item-title { font-size: 15px !important; } .item-price { font-size: 15px !important; font-weight: 700 !important; } .item-description { font-size: 12.5px !important; line-height: 1.4 !important; } /* ===================================================== DELIVERY ===================================================== */ .delivery-hero { width: calc(100% - 20px) !important; margin: 12px auto !important; height: 200px !important; padding: 0 22px !important; border-radius: 22px !important; text-align: center !important; justify-content: center !important; align-items: center !important; } .delivery-hero .hero-content h1 { font-size: 28px !important; } .delivery-hero .hero-content p { font-size: 14px !important; } .delivery-container { width: calc(100% - 20px) !important; margin: 24px auto !important; flex-direction: column !important; gap: 22px !important; } .foods-area { grid-template-columns: 1fr !important; gap: 14px !important; } .foods-area .food-card { width: 100% !important; max-width: none !important; } /* Carrinho lateral vira bloco no topo / bottom */ .cart-area, .cart, .cart-container { position: static !important; width: 100% !important; border-radius: 22px !important; padding: 18px !important; } /* ===================================================== RESERVAS ===================================================== */ .reservas-hero, .reservation-hero { padding: 70px 20px 40px !important; text-align: center !important; } .reservas-hero h1, .reservation-hero h1 { font-size: 28px !important; } .reservas-container, .reservation-container, .reservas-content { width: calc(100% - 24px) !important; margin: 20px auto !important; padding: 20px !important; border-radius: 20px !important; flex-direction: column !important; gap: 18px !important; } .reservas-form, .reservation-form, form.reserva-form { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; width: 100% !important; } .reservas-form input, .reservas-form select, .reservas-form textarea, form input, form select, form textarea { width: 100% !important; padding: 13px 14px !important; font-size: 15px !important; border-radius: 12px !important; } .reservas-form button, form button[type="submit"] { width: 100% !important; padding: 14px !important; font-size: 15px !important; border-radius: 12px !important; } /* ===================================================== LOGIN ===================================================== */ .container { min-height: 100vh !important; padding: 24px 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .form-box, .form-box.login, .form-box.register { width: 100% !important; max-width: 420px !important; padding: 28px 22px !important; border-radius: 22px !important; position: static !important; transform: none !important; } .form-box h1 { font-size: 26px !important; margin-bottom: 18px !important; } .input-box { margin-bottom: 14px !important; } .input-box input { padding: 14px 42px 14px 16px !important; font-size: 15px !important; border-radius: 12px !important; } .input-box i { right: 14px !important; font-size: 18px !important; } .btn { padding: 14px !important; font-size: 15px !important; border-radius: 12px !important; } /* ===================================================== ADMIN ===================================================== */ .admin-login { padding: 18px !important; } .login-card { width: 100% !important; max-width: 420px !important; padding: 26px 22px !important; border-radius: 22px !important; } .login-card img { width: 76px !important; } .login-card h1 { font-size: 22px !important; } .dashboard { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr !important; } .sidebar { position: sticky !important; top: 0 !important; z-index: 50 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; overflow-x: auto !important; padding: 12px 14px !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } .sidebar::-webkit-scrollbar { display: none !important; } .sidebar .brand { flex: 0 0 auto !important; padding-right: 12px !important; border-right: 1px solid rgba(255,255,255,.15) !important; margin-right: 6px !important; } .sidebar .brand img { width: 36px !important; height: 36px !important; } .sidebar nav, .sidebar .menu, .sidebar ul { display: flex !important; flex-direction: row !important; gap: 6px !important; flex: 1 !important; } .sidebar a, .sidebar button { flex: 0 0 auto !important; padding: 8px 14px !important; font-size: 13px !important; border-radius: 999px !important; white-space: nowrap !important; } .main, .admin-main, .dashboard > main, .content { padding: 16px !important; } .topbar { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 14px !important; border-radius: 16px !important; } .topbar h2 { font-size: 18px !important; } .topbar input, .topbar button { width: 100% !important; padding: 11px 14px !important; font-size: 14px !important; } .stats, .cards-grid, .kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .panel, .card-stat { padding: 16px !important; border-radius: 16px !important; } table { font-size: 13px !important; } .table-wrapper, .panel { overflow-x: auto !important; } table th, table td { padding: 8px 10px !important; white-space: nowrap !important; } /* ===================================================== SPLASH (index) ===================================================== */ .splash-container .logo { width: 70% !important; max-width: 280px !important; } .splash-container .texto { font-size: 14px !important; letter-spacing: 2px !important; } .loading { width: 70% !important; max-width: 280px !important; } /* ---------- BOTÃO FLUTUANTE HOME ---------- */ .floating-home-btn { left: 12px !important; bottom: 12px !important; padding: 10px 14px !important; font-size: 13px !important; } } /* ========================================================= MOBILE PEQUENO ≤ 600px ========================================================= */ @media (max-width: 600px) { .navbar { padding: 10px 12px !important; border-radius: 16px !important; } .navbar .logo img, .logo img { width: 78px !important; } .pedido-btn { padding: 8px 12px !important; font-size: 12px !important; } .hero { min-height: 56vh !important; padding: 70px 18px 50px !important; } .hero-content h1 { font-size: 30px !important; } .hero-content p { font-size: 14px !important; } .categorias h2, .restaurante h2, .destaques h2 { font-size: 22px !important; } .categoria-card { height: 120px !important; border-radius: 18px !important; } .categoria-card i { font-size: 28px !important; } .categoria-card span { font-size: 13px !important; } .galeria img { height: 110px !important; } .menu-item .item-image, .menu-item img.item-image { width: 90px !important; height: 90px !important; } .item-title { font-size: 14px !important; } .item-price { font-size: 14px !important; } .delivery-hero { height: 170px !important; } .delivery-hero .hero-content h1 { font-size: 24px !important; } .floating-home-btn span { display: none !important; } .floating-home-btn { padding: 11px !important; border-radius: 50% !important; } .floating-home-btn i { font-size: 20px !important; } footer img { width: 110px !important; } .contato-info p { font-size: 13px !important; } } /* ========================================================= MOBILE EXTRA PEQUENO ≤ 380px ========================================================= */ @media (max-width: 380px) { .hero-content h1 { font-size: 26px !important; } .categoria-container { grid-template-columns: 1fr !important; } .categoria-card { height: 110px !important; } .nav-links a { padding: 7px 12px !important; font-size: 12px !important; } .menu-item .item-image, .menu-item img.item-image { width: 80px !important; height: 80px !important; } } /* ========================================================= LOGIN — toggle visível no mobile (Registrar / Login) ========================================================= */ @media (max-width: 900px) { /* Esconde o form que não está ativo */ .container .form-box.register { display: none !important; } .container.active .form-box.login { display: none !important; } .container.active .form-box.register { display: block !important; } /* Transforma o toggle-box em uma barra abaixo do formulário */ .container .toggle-box { position: static !important; width: 100% !important; max-width: 420px !important; margin: 14px auto 0 !important; background: transparent !important; display: block !important; height: auto !important; } .container .toggle-box::before, .container .toggle-box::after { display: none !important; } .container .toggle-panel { position: static !important; width: 100% !important; height: auto !important; transform: none !important; transition: none !important; color: #fff !important; background: linear-gradient(135deg, #ff7a18, #ff9a3c) !important; border-radius: 18px !important; padding: 16px 18px !important; text-align: center !important; display: none !important; box-shadow: 0 6px 18px rgba(255,122,24,.25) !important; } .container .toggle-panel h1 { font-size: 18px !important; margin: 0 0 4px !important; color: #fff !important; } .container .toggle-panel p { font-size: 13px !important; margin: 0 0 10px !important; color: #fff !important; opacity: .95; } .container .toggle-panel .btn { background: #fff !important; color: #ff7a18 !important; border: none !important; padding: 10px 22px !important; font-weight: 700 !important; border-radius: 999px !important; width: auto !important; display: inline-block !important; } /* Mostra o painel correto conforme o estado */ .container .toggle-panel.toggle-left { display: block !important; } .container.active .toggle-panel.toggle-left { display: none !important; } .container.active .toggle-panel.toggle-right { display: block !important; } }