/* ═══════════════════════════════════════════════════════════════ RUNNING JACK ICT ACADEMY — MOBILE RESPONSIVE FIX File: mobile.css — include in every page after main CSS Fixes: landing page, navbar, courses, about, contact, login, register, student & admin dashboards ═══════════════════════════════════════════════════════════════ */ /* ── TABLET (≤1024px) ───────────────────────────────────────── */ @media(max-width:1024px){ /* Nav */ nav .nav-mid, nav .navbar-center { display:none !important; } nav { padding:0 20px !important; } /* Hero */ .hero { grid-template-columns:1fr !important; padding:90px 24px 60px !important; gap:40px !important; min-height:auto !important; } .hero-right,.dash-wrap { display:none !important; } /* Sections */ .section { padding:72px 24px !important; } .cta-wrap { padding:72px 24px !important; } footer { padding:52px 24px 28px !important; } /* Grids */ .courses-grid { grid-template-columns:repeat(2,1fr) !important; } .steps-grid { grid-template-columns:1fr 1fr !important; border:none !important; } .testi-grid { grid-template-columns:repeat(2,1fr) !important; } .step { border:1px solid var(--border) !important; border-radius:12px !important; margin-bottom:8px !important; } .foot-grid { grid-template-columns:1fr 1fr !important; gap:32px !important; } } /* ── MOBILE (≤768px) ────────────────────────────────────────── */ @media(max-width:768px){ /* ── GLOBAL ── */ body { overflow-x:hidden !important; } * { max-width:100%; } /* ── NAV / TOPBAR ── */ nav { padding:0 16px !important; height:62px !important; } nav .nav-mid, nav .navbar-center, .nav-links { display:none !important; } /* Public nav hamburger */ .nav-ham { display:flex !important; width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:rgba(255,255,255,.04); flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; } .nav-ham span { display:block; width:18px; height:2px; background:var(--muted2,rgba(245,240,232,.55)); border-radius:2px; transition:transform .3s, opacity .2s; } .nav-ham.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); background:var(--rose,#e8186d); } .nav-ham.open span:nth-child(2){ opacity:0; } .nav-ham.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); background:var(--rose,#e8186d); } /* Mobile nav dropdown */ .nav-mobile-menu { display:none; position:fixed; top:62px; left:0; right:0; background:rgba(10,10,15,.98); border-bottom:1px solid var(--border); backdrop-filter:blur(20px); padding:16px; z-index:799; flex-direction:column; gap:4px; } [data-theme="light"] .nav-mobile-menu { background:rgba(245,240,232,.99); } .nav-mobile-menu.open { display:flex !important; } .nav-mobile-menu a { display:block; padding:13px 16px; border-radius:10px; font-size:.88rem; font-weight:500; color:var(--muted2,rgba(245,240,232,.55)); text-decoration:none; transition:all .2s; } .nav-mobile-menu a:hover, .nav-mobile-menu a.active { color:var(--rose,#e8186d); background:rgba(232,24,109,.08); } .nav-mobile-menu .nav-mobile-btns { display:flex; gap:10px; padding:12px 0 4px; border-top:1px solid var(--border); margin-top:8px; } .nav-mobile-menu .nav-mobile-btns a { flex:1; text-align:center; padding:12px 16px !important; font-size:.8rem !important; font-weight:700 !important; } .nav-mobile-menu .btn-rose { background:var(--rose,#e8186d) !important; color:#fff !important; border-radius:8px !important; } /* ── HERO ── */ .hero { grid-template-columns:1fr !important; padding:80px 18px 48px !important; min-height:auto !important; gap:0 !important; } .hero-right,.dash-wrap { display:none !important; } .hero::before { display:none !important; } h1 { font-size:clamp(2.4rem,10vw,3.2rem) !important; letter-spacing:-1.5px !important; line-height:1 !important; } .hero-desc { font-size:.9rem !important; max-width:100% !important; margin-bottom:28px !important; } .hero-eyebrow { margin-bottom:18px !important; } .hero-cta-row { gap:12px !important; flex-wrap:wrap !important; } .btn-hero { padding:14px 28px !important; font-size:.82rem !important; width:100% !important; text-align:center !important; } .play-link { justify-content:center; width:100%; } /* Hero stats */ .hero-stats { flex-direction:row !important; flex-wrap:wrap !important; gap:0 !important; padding-top:28px !important; } .hero-stats .stat { flex:1 1 45% !important; padding:14px 12px !important; border-left:none !important; border:1px solid var(--border) !important; border-radius:10px !important; margin:4px !important; } .stat-n { font-size:2rem !important; } /* Chips */ .chip { display:none !important; } /* ── SECTIONS ── */ .section { padding:56px 18px !important; } .section-inner { padding:0 !important; } .sec-h { font-size:clamp(1.8rem,7vw,2.4rem) !important; letter-spacing:-1px !important; } .sec-p { font-size:.88rem !important; max-width:100% !important; } .courses-head { flex-direction:column !important; align-items:flex-start !important; margin-bottom:28px !important; } /* ── COURSES GRID ── */ .courses-grid, .features-grid { grid-template-columns:1fr !important; gap:12px !important; } .c-card { border-radius:14px !important; } .c-img { height:120px !important; } .c-body { padding:16px !important; } .c-name { font-size:.92rem !important; } /* ── STEPS ── */ .steps-grid { grid-template-columns:1fr !important; border:none !important; gap:10px !important; margin-top:32px !important; } .step { border:1px solid var(--border) !important; border-radius:14px !important; padding:24px 20px !important; margin:0 !important; } /* ── TESTIMONIALS ── */ .testi-grid { grid-template-columns:1fr !important; gap:12px !important; margin-top:32px !important; } .t-card { padding:22px 18px !important; } /* ── CTA ── */ .cta-wrap { padding:56px 18px !important; } .cta-h { font-size:clamp(2rem,8vw,3rem) !important; letter-spacing:-1.5px !important; } .cta-p { font-size:.88rem !important; } .cta-ring { display:none !important; } /* ── FOOTER ── */ footer { padding:44px 18px 24px !important; } .foot-grid { grid-template-columns:1fr !important; gap:32px !important; margin-bottom:32px !important; } .foot-brand p { max-width:100% !important; } .foot-bottom { flex-direction:column !important; gap:10px !important; text-align:center !important; } /* ── MARQUEE ── */ .marquee { padding:10px 0 !important; } /* ── NAVBAR.PHP (alternate navbar) ── */ .navbar { padding:0 16px !important; height:60px !important; } .navbar-center { display:none !important; } .mobile-menu-toggle { display:flex !important; } .navbar-right .btn-ghost, .navbar-right .btn-primary { display:none !important; } .navbar-right .btn-ghost:last-of-type, .navbar-right .btn-primary:last-of-type { display:none !important; } /* ── LOGIN / REGISTER ── */ .login-wrap,.register-wrap,.auth-wrap { padding:80px 16px 40px !important; } .login-card,.register-card,.auth-card { width:100% !important; max-width:100% !important; padding:28px 20px !important; border-radius:20px !important; } /* ── COURSES PAGE ── */ .courses-page-header { padding:90px 18px 32px !important; } .courses-filter-bar { flex-wrap:wrap !important; gap:8px !important; padding:0 18px !important; } .filter-btn { font-size:.7rem !important; padding:7px 12px !important; } /* ── ABOUT PAGE ── */ .about-hero { padding:90px 18px 48px !important; } .about-grid { grid-template-columns:1fr !important; gap:24px !important; } /* ── CONTACT PAGE ── */ .contact-wrap { padding:90px 18px 48px !important; } .contact-grid { grid-template-columns:1fr !important; gap:20px !important; } /* ── DASHBOARD PAGES ── */ .main-content, .main { margin-left:0 !important; padding:72px 14px 84px !important; } /* Stat widgets */ .wid-row,.stats-row,.score-bar { grid-template-columns:1fr 1fr !important; gap:10px !important; } .wid,.stat-card { padding:14px 12px !important; border-radius:14px !important; } .wid-n { font-size:1.4rem !important; } /* Cards */ .card { border-radius:14px !important; padding:16px !important; } /* Tables */ .table-wrap,.tbl-wrap,.table-scroll { overflow-x:auto !important; -webkit-overflow-scrolling:touch; border-radius:12px; } .table-wrap table,.tbl-wrap table,.table-scroll table, table.table { min-width:520px !important; } .table th,.table td, th,td { padding:10px 12px !important; font-size:.76rem !important; white-space:nowrap; } /* Two-col grids */ .two-col,.grid-2 { grid-template-columns:1fr !important; gap:14px !important; } /* Page headers */ .page-header,.page-top { flex-direction:column !important; align-items:flex-start !important; gap:12px !important; } .page-header h1,.ptitle,.page-title { font-size:1.35rem !important; } /* Tabs */ .tab-row,.tab-bar,.settings-tabs { overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; flex-wrap:nowrap !important; padding-bottom:4px; scrollbar-width:none; } .tab-row::-webkit-scrollbar, .tab-bar::-webkit-scrollbar, .settings-tabs::-webkit-scrollbar { display:none; } .tab-btn { white-space:nowrap !important; flex-shrink:0 !important; font-size:.72rem !important; padding:8px 14px !important; } /* Modals */ .modal-box,.modal-inner,.modal { width:95vw !important; max-width:95vw !important; margin:16px auto !important; padding:20px 16px !important; border-radius:20px !important; } /* Buttons */ .page-actions { flex-wrap:wrap !important; gap:8px !important; } .form-actions { flex-direction:column !important; } .form-actions .btn-primary, .form-actions .btn-ghost { width:100% !important; justify-content:center !important; } /* Hide desktop cursor */ #dot,#ring { display:none !important; } body,*,a,button,input,select,textarea { cursor:auto !important; } } /* ── SMALL MOBILE (≤420px) ──────────────────────────────────── */ @media(max-width:420px){ .wid-row,.stats-row,.score-bar { grid-template-columns:1fr !important; } h1 { font-size:2.2rem !important; } .cta-h { font-size:2rem !important; } .section { padding:44px 14px !important; } .main-content { padding:70px 12px 82px !important; } .courses-grid { grid-template-columns:1fr !important; } .testi-grid { grid-template-columns:1fr !important; } } /* ── MOBILE NAV TOGGLE SCRIPT HELPER ────────────────────────── */ /* Add this to your navbar HTML — the hamburger + mobile menu: */ /* ── HIDE BACK BUTTONS ON MOBILE ─────────────────── */ @media(max-width: 768px) { .back-home-btn, .back-btn, a.back-btn, .btn-back[href], a.btn-back, .back-nav-btn, .go-back-btn { display: none !important; } } /* ───────────────────────────────────────────────────────────── TOPBAR MOBILE FIXES Problems solved: 1. Brand text ("Running Jack ICT") overflows on phones ≤768px because logo + brand + right-side icons exceed screen width. 2. Redundant profile icon in student topbar (profile is in the bottom More tray — duplicate wastes precious space). 3. Bottom tabs lack iOS safe-area inset — home indicator overlaps the tab bar on iPhones. 4. main-content bottom padding didn't account for the iOS home indicator, so last content row was cut off. ───────────────────────────────────────────────────────────── */ @media(max-width: 768px) { /* 1 — Topbar: tighter padding, prevent any horizontal overflow */ .top-navbar { padding: 0 14px !important; gap: 8px !important; overflow: hidden; /* safety net against stray overflow */ } /* 2 — Hide brand text: the logo image alone identifies the site, and hiding the text saves ~110px — enough room for all icons */ .tnav-brand { font-size: .75rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px !important; } /* 3 — Collapse spacer so it doesn't cause misalignment on tiny screens */ .tnav-spacer { flex: 1; min-width: 0; } /* 4 — Shrink user pill to just the avatar on mobile (remove side padding) */ .tnav-user { padding: 3px !important; background: transparent !important; border: none !important; } /* 5 — Remove the redundant profile icon button from student topbar. Profile is accessible via the bottom "More" tray — this icon adds ~44px of width for no benefit on mobile. */ .top-navbar .tnav-icon[title="Profile"] { display: none !important; } /* 6 — iOS safe-area inset for bottom tab bar. Without this, the home indicator on iPhone X+ overlaps the tabs. */ .bottom-tabs { height: calc(64px + env(safe-area-inset-bottom, 0px)) !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; } /* 7 — Push main content bottom padding up to match the taller tab bar */ .main-content, .main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; } } /* ── SMALL PHONES (≤640px) ─────────────────────────────────── */ @media(max-width:640px){ .hero-right { display:none !important; } .hero-visual { display:none !important; } .lesson-sidebar { display:none !important; } .footer-grid { grid-template-columns:1fr !important; } .contact-grid { grid-template-columns:1fr !important; } .main-content, .main { padding:70px 12px 82px !important; } .card { padding:14px !important; border-radius:14px !important; } .page-top { flex-direction:column !important; gap:10px !important; } .ptitle { font-size:1.3rem !important; } } /* ── THEME TOGGLE ICONS (moon/sun SVGs inside .t-knob / .tnav-knob) ── */ .t-knob, .tnav-knob { display: flex !important; align-items: center !important; justify-content: center !important; } .ico-moon { display: block; } .ico-sun { display: none; } [data-theme="light"] .ico-moon { display: none; } [data-theme="light"] .ico-sun { display: block; } /* ── PUBLIC NAV: push .nav-end / hamburger to the right edge on mobile ── When .nav-links is display:none its margin:0 auto has no effect, so .nav-end collapses next to the logo. margin-left:auto fixes it. */ @media(max-width:1024px) { .nav-end { margin-left: auto !important; } } /* ── AUDIT / FIREWALL STAT CARDS: horizontal layout on phones ─────── */ @media(max-width:768px) { /* security-audit.php score-card + firewall.php stat-card */ .score-card, .stat-card { display: flex !important; align-items: center !important; gap: 14px !important; padding: 12px 14px !important; min-height: 0 !important; } /* Icon stays left, text block takes remaining space */ .score-card .sc-icon, .stat-card .sc-icon { margin-bottom: 0 !important; flex-shrink: 0 !important; } /* Stack number + label vertically inside the flex row */ .score-card .sc-top { flex-direction: column !important; align-items: flex-start !important; margin-bottom: 0 !important; flex: 1 !important; gap: 2px !important; } .sc-n { font-size: 1.3rem !important; } .sc-l { margin-top: 0 !important; } } /* ── SECURITY AUDIT: prevent check-item flex overflow ─────── */ @media(max-width: 768px) { .check-left { min-width: 0; overflow: hidden; flex: 1; } .check-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .check-item { overflow: hidden; } .progress-wrap { width: 100% !important; max-width: 120px; } } /* ── FIREWALL: prevent rule-row and form overflow ───────────── */ @media(max-width: 768px) { .rule-left { min-width: 0; flex: 1; overflow: hidden; } .rule-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rule-row { overflow: hidden; } .add-form .form-input, .add-form .form-select { width: 100% !important; box-sizing: border-box; } .add-form { overflow: hidden; } .card { overflow: hidden; } } /* ── STAT ROW: add .stat-row to mobile grid resets ──────────── */ @media(max-width: 768px) { .stat-row { grid-template-columns: 1fr 1fr !important; } } @media(max-width: 420px) { .stat-row { grid-template-columns: 1fr !important; } } /* ── SECURITY AUDIT: sc-head (icon+badge row) mobile fix ──── */ @media(max-width: 768px) { .score-card .sc-head { margin-bottom: 0 !important; flex-shrink: 0 !important; align-items: center !important; gap: 8px !important; } /* sc-top now wraps the text (sc-n + sc-l) — give it flex:1 */ .score-card .sc-top { flex: 1 !important; min-width: 0 !important; } }