/* ============================================================ responsive.css — JNEC Facilities Add to the of every blade file to get responsiveness. ============================================================ */ /* ─── TABLET (max 1024px) ─── */ @media (max-width: 1024px) { nav { padding: 14px 30px !important; } nav.scrolled { padding: 10px 30px !important; } section { padding: 80px 30px !important; } .features-grid { grid-template-columns: repeat(2, 1fr) !important; } .fac-cards-grid { grid-template-columns: repeat(2, 1fr) !important; } .how-steps { grid-template-columns: repeat(2, 1fr) !important; gap: 50px !important; } .how-steps::before { display: none !important; } .stats-bar { grid-template-columns: repeat(4, 1fr) !important; } } /* ─── MOBILE (max 768px) ─── */ @media (max-width: 768px) { /* Navbar */ nav { padding: 12px 20px !important; } nav.scrolled { padding: 10px 20px !important; } .nav-links a:not(.login-btn) { display: none !important; } .nav-logo span { font-size: 1rem !important; } .nav-logo img { height: 42px !important; } /* Hero */ .hero-title { font-size: 2rem !important; } .hero-sub { font-size: 0.95rem !important; } .hero-actions { flex-direction: column !important; align-items: center !important; } .btn-primary, .btn-outline { width: 100% !important; max-width: 280px !important; text-align: center !important; } .scroll-hint { display: none !important; } /* Stats */ .stats-bar { grid-template-columns: repeat(2, 1fr) !important; } .stat-num { font-size: 1.8rem !important; } .stat-item { padding: 22px 15px !important; } /* Sections */ section { padding: 60px 20px !important; } .section-title { font-size: 1.7rem !important; } /* Features */ .features-grid { grid-template-columns: 1fr !important; } /* Facilities */ .fac-cards-grid { grid-template-columns: 1fr !important; } /* How it works */ .how-steps { grid-template-columns: 1fr !important; gap: 40px !important; } .how-steps::before { display: none !important; } /* CTA */ .cta-inner { padding: 50px 24px !important; } .cta-actions { flex-direction: column !important; align-items: center !important; } /* Footer */ footer { flex-direction: column !important; text-align: center !important; padding: 30px 20px !important; } .footer-links { justify-content: center !important; flex-wrap: wrap !important; gap: 16px !important; } /* Dashboard navbar */ .dashboard-nav .nav-menu { display: none !important; } .dashboard-nav .hamburger { display: block !important; } } /* ─── SMALL PHONES (max 480px) ─── */ @media (max-width: 480px) { .hero-title { font-size: 1.7rem !important; } .hero-badge { font-size: 0.68rem !important; padding: 5px 12px !important; } .stats-bar { grid-template-columns: repeat(2, 1fr) !important; } .stat-num { font-size: 1.5rem !important; } .stat-label { font-size: 0.72rem !important; } .section-title { font-size: 1.5rem !important; } .fac-cards-grid { grid-template-columns: 1fr !important; } .features-grid { grid-template-columns: 1fr !important; } }