/** * AgPro Africa - Responsive Styles * Mobile-first responsive breakpoints */ /* ===== TABLET (max-width: 992px) ===== */ @media (max-width: 992px) { .hero-stats { gap: var(--spacing-lg); } .hero-stat-number { font-size: 2rem; } .map-container { grid-template-columns: 1fr; } .map-info { order: -1; } .footer-grid { grid-template-columns: repeat(2, 1fr); } .testimonials-grid { grid-template-columns: 1fr; } } /* ===== MOBILE LANDSCAPE & TABLET (max-width: 768px) ===== */ @media (max-width: 768px) { :root { --spacing-xxl: 3rem; } /* Top Bar - Simplified on mobile */ .top-bar-content { flex-direction: row; flex-wrap: wrap; gap: var(--spacing-xs); justify-content: space-between; align-items: center; } .top-bar-left { flex-direction: row; gap: var(--spacing-md); } /* Hide "Send Inquiry" text link on mobile - accessible via nav Get a Quote */ .top-bar-left a:last-child { display: none; } /* Navigation */ .mobile-menu-btn { display: block; } .nav-menu { position: fixed; top: 0; right: -100%; width: 300px; height: 100vh; background: var(--background-white); flex-direction: column; align-items: stretch; padding: 80px var(--spacing-md) var(--spacing-md); box-shadow: var(--shadow-xl); transition: right var(--transition-normal); overflow-y: auto; gap: 0; /* Very high z-index - div overlay is added to body directly by JS */ z-index: 9999; } .nav-menu.active { right: 0; } .nav-menu>li { border-bottom: 1px solid var(--border-gray); } .nav-menu>li>a { padding: var(--spacing-md); display: flex; justify-content: space-between; align-items: center; } .nav-cta { margin: var(--spacing-md) 0 0 0; } .nav-cta.btn { width: 100%; text-align: center; } /* Dropdown Mobile */ .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; background: var(--accent-gray); border-radius: 0; padding: 0; } .dropdown.active .dropdown-menu { display: block; } .dropdown-menu li a { padding-left: var(--spacing-lg); } .dropdown-toggle i { transition: transform var(--transition-fast); } .dropdown.active .dropdown-toggle i { transform: rotate(180deg); } /* Overlay div injected directly into by JS - no stacking context issues */ .menu-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9998; /* Just below nav-menu at 9999 */ cursor: pointer; } body.menu-open { overflow: hidden; } /* Hide WhatsApp button when mobile menu is open to avoid overlap */ body.menu-open .whatsapp-float { display: none; } /* Hero */ .hero { min-height: 70vh; background-attachment: scroll; } .hero-buttons { flex-direction: column; } .hero-buttons .btn { width: 100%; } .hero-stats { flex-wrap: wrap; justify-content: center; gap: var(--spacing-md); } .hero-stat { flex: 0 0 45%; } /* Services Grid */ .services-grid { grid-template-columns: 1fr; } /* Equipment Grid */ .equipment-grid { grid-template-columns: 1fr; } /* CTA */ .cta-buttons { flex-direction: column; } .cta-buttons .btn { width: 100%; } /* Forms */ .form-row { grid-template-columns: 1fr; } /* Footer */ .footer-grid { grid-template-columns: 1fr; text-align: center; } .footer-section h4::after { left: 50%; transform: translateX(-50%); } .footer-social { justify-content: center; } .footer-contact li { justify-content: center; } /* WhatsApp Float */ .whatsapp-float { bottom: 20px; right: 20px; width: 55px; height: 55px; font-size: 1.75rem; } /* Map */ .map-embed { height: 350px; } } /* ===== MOBILE PORTRAIT (max-width: 480px) ===== */ @media (max-width: 480px) { :root { --spacing-xxl: 2.5rem; --spacing-xl: 2rem; } html { font-size: 15px; } .container { padding: 0 var(--spacing-sm); } /* Top Bar - minimal on small phones */ .top-bar { padding: 6px 0; } /* Hide social icons on very small screens - they scroll into footer */ .top-bar-right { display: none; } .top-bar-left span, .top-bar-left a { font-size: 0.82rem; } /* Logo */ .logo img { height: 45px; } /* Hero */ .hero { min-height: 60vh; } .hero-label { font-size: 0.75rem; } .hero-subtitle { font-size: 1.1rem; } .hero-stats { flex-direction: column; gap: var(--spacing-sm); } .hero-stat { display: flex; align-items: center; gap: var(--spacing-sm); flex: none; } .hero-stat-number { font-size: 1.75rem; } /* Service Cards */ .service-card { padding: var(--spacing-md); } .service-icon { width: 70px; height: 70px; } .service-icon i { font-size: 1.75rem; } /* Testimonials */ .testimonials-grid { grid-template-columns: 1fr; } .testimonial-card { padding: var(--spacing-md); } .testimonial-quote { font-size: 1rem; padding-left: var(--spacing-md); } /* Page Header */ .page-header { padding: var(--spacing-xl) 0; } .breadcrumb { flex-wrap: wrap; justify-content: center; } /* Buttons */ .btn { padding: 0.75rem 1.5rem; } .btn-lg { padding: 0.875rem 1.75rem; } /* Map */ .map-embed { height: 280px; } .map-info-item { flex-direction: column; text-align: center; } .map-info-item i { margin: 0 auto; } } /* ===== PRINT STYLES ===== */ @media print { .top-bar, .main-nav, .whatsapp-float, .main-footer { display: none !important; } .hero { min-height: auto; padding: var(--spacing-lg) 0; background: var(--forest-green) !important; color: var(--background-white); } body { font-size: 12pt; line-height: 1.5; } a { text-decoration: underline; color: var(--forest-green); } .btn { border: 1px solid currentColor; background: transparent !important; } } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ===== HIGH CONTRAST ===== */ @media (prefers-contrast: high) { :root { --primary-gold: #FFD700; --forest-green: #004D00; --text-gray: #000000; --border-gray: #000000; } .btn { border-width: 3px; } .form-control { border-width: 3px; } }