/* Mobile Responsive Styles for Careerlogist.com */ /* Add this file AFTER style.css in all pages */ /* ======================================== MOBILE-FIRST APPROACH ======================================== */ /* Ensure viewport is set correctly */ /* Add to : */ /* Base responsive improvements */ img { max-width: 100%; height: auto; } /* ======================================== TABLET & MOBILE (max-width: 968px) ======================================== */ @media (max-width: 968px) { /* Typography scaling */ h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.35rem; } h4 { font-size: 1.15rem; } /* Section padding - maintain breathing room on tablets */ .section { padding: 4rem 0; } /* Container padding */ .container { padding: 1.5rem 1.25rem; } /* Grid adjustments */ .card-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } /* Event cards */ .event-card { flex-direction: column; } .event-card img { width: 100%; max-width: 100%; height: auto; } /* Product grid */ .product-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* Member dashboard grid */ .dashboard-grid { grid-template-columns: 1fr; } /* News feed grid */ .news-grid { grid-template-columns: 1fr; } /* Admin engagement table - make scrollable */ .engagement-table { overflow-x: auto; } .engagement-table table { min-width: 800px; } } /* ======================================== TABLET & MOBILE NAV (max-width: 1024px) Hamburger menu activates here to prevent nav wrapping on narrower screens ======================================== */ @media (max-width: 1024px) { /* Navigation - hamburger menu */ .nav-menu { display: none; position: absolute; top: 70px; left: 0; right: 0; background-color: var(--primary-blue); flex-direction: column; padding: 1rem; gap: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 1000; } .nav-menu.active { display: flex; } .nav-menu li { width: 100%; text-align: center; } .nav-menu a { display: block; padding: 0.75rem 1rem; border-left: 2px solid transparent; border-bottom: none; transition: color 0.3s ease, border-color 0.3s ease; } .nav-menu a:hover, .nav-menu a.active { color: var(--accent-orange); border-left-color: var(--accent-orange); } .menu-toggle { display: flex !important; flex-direction: column; gap: 4px; cursor: pointer; padding: 0.5rem; } .menu-toggle span { width: 25px; height: 3px; background-color: white; transition: all 0.3s ease; } } /* ======================================== MOBILE ONLY (max-width: 768px) ======================================== */ @media (max-width: 768px) { /* Typography further scaling */ h1 { font-size: 1.75rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; } /* Section padding - mobile breathing room */ .section { padding: 3.5rem 0; } /* Hero section */ .hero { padding: 3rem 1rem; } .hero h1 { font-size: 1.75rem; line-height: 1.3; } .hero .tagline { font-size: 1rem; } /* Buttons */ .btn, .cta-button { padding: 0.75rem 1.5rem; font-size: 0.95rem; } /* Grid layouts - single column */ .card-grid, .product-grid, .event-grid, .testimonials-grid { grid-template-columns: 1fr; } /* Footer - Minimal Two-Row */ .footer-minimal { padding: 2rem 1.5rem; } .footer-row-top { flex-direction: column; gap: 1.25rem; text-align: center; padding-bottom: 1.25rem; margin-bottom: 1.25rem; } .footer-brand-name { font-size: 1.2rem; } .footer-social { gap: 1.75rem; } .footer-social a { font-size: 1.2rem; } .footer-row-bottom { flex-direction: column; gap: 0.5rem; text-align: left; align-items: flex-start; } .footer-left { align-items: flex-start; text-align: left; } .footer-business-info { font-size: 0.75rem; } .footer-dp-link { font-size: 0.75rem; } .footer-links { display: inline !important; font-size: 0.72rem; line-height: 1.8; } .footer-links a { font-size: 0.72rem; } /* Member Dashboard */ .member-dashboard .welcome-section { flex-direction: column; text-align: center; } .member-stats { grid-template-columns: 1fr; } /* Checkout form */ .checkout-container { grid-template-columns: 1fr; } /* Event details */ .event-details-grid { grid-template-columns: 1fr; } /* Product details */ .product-details { flex-direction: column; } /* News feed cards */ .news-card { padding: 1rem; } .news-card-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } /* Comments section */ .comment { padding: 0.75rem; } /* Resources grid */ .resources-grid { grid-template-columns: 1fr; } /* Profile sections */ .profile-grid { grid-template-columns: 1fr; } /* Rewards page */ .rewards-layout { grid-template-columns: 1fr; } .credits-sidebar { position: static !important; margin-top: 2rem; } } /* ======================================== ADMIN PANEL RESPONSIVE ======================================== */ /* Admin sidebar toggle button (hidden on desktop) */ .admin-sidebar-toggle { display: none; background: none; border: none; color: var(--primary-blue); font-size: 1.4rem; cursor: pointer; padding: 0.25rem 0.5rem; } @media (max-width: 968px) { /* Show sidebar toggle */ .admin-sidebar-toggle { display: block; } /* Admin layout - stack */ .admin-layout { flex-direction: column; } /* Sidebar - hidden by default on mobile, slide down when active */ .admin-sidebar { width: 100%; position: relative; display: none; padding: 0.5rem 0; } .admin-sidebar.active { display: block; } .admin-sidebar .admin-logo { display: none; } .admin-sidebar .admin-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; } .admin-sidebar .admin-menu li { list-style: none; } .admin-sidebar .admin-menu a { padding: 0.6rem 0.25rem; font-size: 0.7rem; text-align: center; border-left: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-sidebar .admin-menu a:hover, .admin-sidebar .admin-menu a.active { border-left: none !important; background-color: rgba(255,255,255,0.15); } .admin-sidebar .admin-menu a i { display: block; margin-bottom: 0.2rem; font-size: 1rem; } /* Admin header - stack on mobile */ .admin-header { flex-direction: row; padding: 0.75rem 1rem !important; gap: 0.5rem; flex-wrap: wrap; } .admin-header h2 { font-size: 1.1rem !important; } .admin-header > div:last-child { display: flex; gap: 0.5rem; align-items: center; font-size: 0.8rem; } .admin-header > div:last-child span { display: none; } .admin-header .btn, .admin-header .btn-outline { padding: 0.3rem 0.6rem !important; font-size: 0.8rem !important; } /* Admin content */ .admin-content { width: 100%; padding: 1rem !important; } /* All inline grid layouts → single column on mobile */ .admin-content div[style*="grid-template-columns: 1fr 1fr"], .admin-content div[style*="grid-template-columns: 1fr 1fr 1fr auto"], .admin-content div[style*="grid-template-columns: 1fr 1fr auto"], .admin-content div[style*="grid-template-columns: 350px 1fr"], .admin-content div[style*="grid-template-columns: 1fr 1fr 1fr"], .admin-content div[style*="grid-template-columns: 1fr 1fr 150px"] { grid-template-columns: 1fr !important; } /* Flex rows that should wrap */ .admin-content div[style*="justify-content: space-between"] { flex-wrap: wrap; gap: 0.75rem; } /* Admin card padding */ .admin-card { padding: 1rem !important; } .admin-card h2 { font-size: 1.1rem; } /* Tables - scrollable container */ .table-responsive, .admin-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1rem; padding: 0 1rem; } .admin-content table.table { min-width: 500px; font-size: 0.85rem; } .admin-content table.table th, .admin-content table.table td { padding: 0.5rem 0.6rem; white-space: nowrap; } /* Stat boxes */ .engagement-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 0.75rem; } .stat-card { padding: 1rem; } .stat-card h3 { font-size: 1.5rem; } /* Filters bar */ .filters-bar { flex-direction: column; align-items: stretch; } .filters-bar > div { width: 100%; } .filters-bar select { width: 100%; } /* Engagement table */ .engagement-table { overflow-x: auto; } .engagement-table table { font-size: 0.85rem; } .engagement-table th, .engagement-table td { padding: 0.5rem; white-space: nowrap; } /* Profile grid */ .profile-grid { grid-template-columns: 1fr !important; } .profile-header { padding: 1.5rem 1rem; } .profile-header h1 { font-size: 1.5rem; } /* Activity modal */ #activityModal > div { width: 95%; margin: 2% auto; max-height: 90vh; } /* Messages page grid */ .admin-content div[style*="grid-template-columns: 350px"] { grid-template-columns: 1fr !important; height: auto !important; } /* Page title h1 */ .admin-content h1 { font-size: 1.3rem; } /* Forms */ .admin-content .form-group { margin-bottom: 0.75rem; } /* Buttons in flex rows */ .admin-content .btn { white-space: nowrap; } } @media (max-width: 480px) { /* Sidebar menu 3 columns on very small screens */ .admin-sidebar .admin-menu { grid-template-columns: repeat(3, 1fr); } .admin-sidebar .admin-menu a { font-size: 0.65rem; padding: 0.5rem 0.25rem; } .admin-content { padding: 0.75rem !important; } .admin-card { padding: 0.75rem !important; } .admin-content table.table { font-size: 0.8rem; } } /* ======================================== SMALL MOBILE (max-width: 480px) ======================================== */ @media (max-width: 480px) { /* Typography - smallest screens */ h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; } body { font-size: 0.9rem; } /* Section padding - small mobile */ .section { padding: 3rem 0; } /* Container padding */ .container { padding: 1rem 1rem; } /* Buttons full width */ .btn, .cta-button { width: 100%; text-align: center; } /* Hero */ .hero { padding: 2rem 1rem; } /* Cards */ .card { padding: 1rem; } /* Stat cards - 2 columns max */ .engagement-stats, .member-stats { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .stat-card { padding: 0.75rem; } .stat-card h3 { font-size: 1.25rem; } .stat-card p { font-size: 0.75rem; } /* Forms */ input, textarea, select { font-size: 16px; /* Prevents zoom on iOS */ } /* Tables - extreme condensing */ table { font-size: 0.75rem; } th, td { padding: 0.5rem 0.25rem; } /* Profile photos smaller */ .profile-photo { width: 60px !important; height: 60px !important; } /* Modal full screen */ #activityModal > div { width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; } /* Hide less important columns in tables */ .hide-mobile { display: none !important; } } /* ======================================== TOUCH IMPROVEMENTS ======================================== */ /* Increase touch target sizes */ @media (hover: none) and (pointer: coarse) { /* Touch devices */ button, .btn, a { min-height: 44px; min-width: 44px; padding: 0.75rem 1rem; } /* Clickable table rows */ tr { cursor: pointer; } /* Remove hover effects on touch */ *:hover { /* Disable hover on touch screens */ } } /* ======================================== LANDSCAPE ORIENTATION (Mobile) ======================================== */ @media (max-height: 500px) and (orientation: landscape) { /* Reduce vertical padding in landscape */ .hero { padding: 1.5rem 1rem; } section { padding: 2rem 0; } /* Make modals scrollable in landscape */ #activityModal > div { max-height: 95vh; overflow-y: auto; } } /* ======================================== PRINT STYLES ======================================== */ @media print { /* Hide navigation, buttons, and interactive elements */ nav, .menu-toggle, .btn, button, .filters-bar, .admin-sidebar { display: none !important; } /* Expand content */ .admin-content, .container { width: 100%; max-width: 100%; margin: 0; padding: 0; } /* Prevent page breaks inside elements */ .card, .stat-card, tr { page-break-inside: avoid; } /* Show URLs for links */ a[href]:after { content: " (" attr(href) ")"; font-size: 0.8em; } } /* ======================================== ACCESSIBILITY - HIGH CONTRAST MODE ======================================== */ @media (prefers-contrast: high) { /* Increase contrast for better readability */ :root { --primary-blue: #000080; --text-color: #000000; } .status-badge { border: 2px solid currentColor; } } /* ======================================== ACCESSIBILITY - REDUCED MOTION ======================================== */ @media (prefers-reduced-motion: reduce) { /* Disable animations for users who prefer reduced motion */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }