/* ============================================================ Dr. Zakir HM — Responsive Styles (responsive.css) Mobile, Tablet, Desktop breakpoints ============================================================ */ /* ============================================================ MAX 1280px — Large Desktop ============================================================ */ @media (max-width: 1280px) { .books-grid { grid-template-columns: repeat(3, 1fr); } .stats-grid { grid-template-columns: repeat(3, 1fr); } .dashboard-stats { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ MAX 1024px — Tablet Landscape ============================================================ */ @media (max-width: 1024px) { :root { --sidebar-width: 240px; } .hero-content { grid-template-columns: 1fr; text-align: center; } .hero-text { max-width: 100%; } .hero-buttons { justify-content: center; } .hero-image { display: none; } .hero-name { font-size: var(--text-5xl); } .bio-content { grid-template-columns: 1fr; } .bio-image img { height: 300px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } .contact-grid { grid-template-columns: 1fr; } .books-grid { grid-template-columns: repeat(2, 1fr); } .articles-grid { grid-template-columns: repeat(2, 1fr); } .awards-grid { grid-template-columns: repeat(2, 1fr); } .media-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: repeat(3, 1fr); } .stats-grid { grid-template-columns: repeat(3, 1fr); } .dashboard-grid { grid-template-columns: 1fr; } } /* ============================================================ MAX 768px — Tablet Portrait ============================================================ */ @media (max-width: 768px) { h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } .section { padding: var(--space-12) 0; } .section-title { font-size: var(--text-3xl); } /* ---- Navbar overrides ---- */ #navContactBtn { display: none !important; } .navbar-nav { display: none; } .navbar-toggle { display: flex; } .navbar-contact-btn span { display: none; } /* ---- Hero ---- */ .hero { min-height: auto; padding-top: var(--navbar-height); } .hero-name { font-size: var(--text-4xl); } .hero-bio { font-size: var(--text-base); } .hero-shape-1, .hero-shape-2 { max-width: 100%; overflow: hidden; } .hero-badge { font-size: var(--text-xs); } .banner-overlay { padding: 12px !important; justify-content: flex-end !important; height: 100% !important; } .banner-title { font-size: 1.1rem !important; line-height: 1.2 !important; margin-bottom: 4px !important; } .banner-subtitle { font-size: 0.85rem !important; line-height: 1.3 !important; max-width: 90% !important; } .main-banner-swiper, .main-banner-swiper .swiper-slide { height: auto !important; max-height: 500px !important; aspect-ratio: unset !important; } /* ---- Grids ---- */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .bio-info-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .articles-grid { grid-template-columns: 1fr; } .awards-grid { grid-template-columns: 1fr; } .media-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } /* ---- Page Header ---- */ .page-header { padding: calc(var(--navbar-height) + var(--space-10)) 0 var(--space-10); } .page-header h1 { font-size: var(--text-3xl); } /* ---- Filter Bar ---- */ .filter-bar { flex-direction: column; align-items: stretch; padding: var(--space-4); gap: var(--space-3); border-radius: var(--radius-xl); } .filter-search { width: 100%; min-width: 0; } .filter-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-2); -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ gap: var(--space-2); width: 100%; min-width: 0; } .filter-tabs::-webkit-scrollbar { display: none; /* Chrome, Safari and Opera */ } .filter-tab { white-space: nowrap; flex-shrink: 0; } .filter-tab:last-child { margin-right: var(--space-4); /* Add trailing space when scrolled */ } /* ---- Admin ---- */ .admin-sidebar { transform: translateX(-100%); } .admin-sidebar.active { transform: translateX(0); } .admin-main { margin-left: 0; } .admin-topbar { left: 0; } .topbar-toggle { display: flex; } .admin-content { padding: var(--space-4); } .dashboard-stats { grid-template-columns: 1fr 1fr; } .admin-page-header { flex-direction: column; align-items: flex-start; gap: var(--space-4); } .table-controls { flex-direction: column; align-items: stretch; } .table-search { width: 100%; } /* ---- Timeline ---- */ .timeline { padding-left: 40px; } .timeline::before { left: 19px; } .timeline-dot { left: -31px; } /* ---- Modal ---- */ .modal { max-width: 100%; border-radius: var(--radius-xl); } /* ---- Award Card ---- */ .award-card { padding: var(--space-8); } .award-title { font-size: var(--text-2xl); } } /* ============================================================ MAX 480px — Mobile ============================================================ */ @media (max-width: 480px) { :root { --container-padding: 1rem; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } .section-title { font-size: var(--text-2xl); } .hero-name { font-size: var(--text-3xl); } .hero-award-title { font-size: var(--text-xl); } .hero-buttons { flex-direction: column; } .hero-buttons .btn { width: 100%; } .books-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .stats-grid .stat-card { padding: var(--space-4) var(--space-2); } .stats-grid .stat-value { font-size: var(--text-2xl); } .stats-grid .stat-value .counter-suffix { font-size: var(--text-lg); } .stats-grid .stat-icon { width: 40px; height: 40px; font-size: var(--text-lg); margin-bottom: var(--space-2); } .stats-grid .stat-label { font-size: var(--text-xs); } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-stats { grid-template-columns: 1fr; } .quick-actions { grid-template-columns: 1fr; } .login-card { padding: var(--space-6); border-radius: var(--radius-2xl); } .pagination { flex-wrap: wrap; } .toast { min-width: auto; max-width: calc(100vw - 2rem); } .back-to-top { width: 40px; height: 40px; bottom: var(--space-4); right: var(--space-4); } /* ---- Table Responsive ---- */ .table-wrapper { border-radius: var(--radius-lg); } .data-table th, .data-table td { padding: var(--space-3); font-size: var(--text-xs); } .table-actions { flex-direction: column; } } /* ============================================================ PRINT STYLES ============================================================ */ @media print { .navbar, .mobile-menu, .mobile-menu-overlay, .search-overlay, .back-to-top, .admin-sidebar, .admin-topbar, .toast-container { display: none !important; } .admin-main { margin-left: 0 !important; padding-top: 0 !important; } body { background: white !important; color: black !important; } .card { box-shadow: none !important; border: 1px solid #ddd !important; } }