/* * responsive.css — Mobile-first responsive overrides for all pages * Covers: index.php, login.php, signup.php, forgot_password.php, * reset_password.php, contact.php, about.php, resources.php, * visitor_diaries.php * * Include in every page AFTER Bootstrap and any page-specific CSS: * */ /* ═══════════════════════════════════════════════════════════════ GLOBAL / SHARED ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } img, video, iframe { max-width: 100%; height: auto; } /* Remove horizontal scroll on all pages */ html, body { overflow-x: hidden; max-width: 100vw; } /* Sidebar: hide on mobile – the navbar already provides navigation */ @media (max-width: 767.98px) { .page-sidebar { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ NAVBAR (index.php + shared header) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 991.98px) { .navbar-brand { font-size: 1.3rem !important; } .navbar-brand i { width: 36px !important; height: 36px !important; font-size: 1rem !important; } /* Collapse menu: center all nav links */ .navbar-nav { text-align: center !important; align-items: center !important; } /* Nav links — centered, no underline pseudo-element */ .navbar-nav .nav-link { padding: 0.65rem 1rem !important; font-size: 1rem !important; text-align: center !important; width: 100% !important; } /* Remove the white sliding underline on mobile */ .navbar-nav .nav-link::after { display: none !important; } /* Collapse menu: center the login/signup buttons */ .navbar-collapse .d-flex { flex-direction: row; flex-wrap: wrap; justify-content: center !important; gap: 8px; padding: 12px 0 8px; } .navbar-collapse .btn { width: auto; padding: 8px 14px !important; font-size: 0.9rem !important; } } @media (max-width: 575.98px) { .navbar-brand .brand-tagline { display: none !important; } .navbar-brand { font-size: 1.15rem !important; } .navbar { padding: 4px 8px; } } /* ═══════════════════════════════════════════════════════════════ INDEX.PHP — HERO SECTION ═══════════════════════════════════════════════════════════════ */ @media (max-width: 991.98px) { .hero-section { padding: 100px 0 60px; } .hero-content { grid-template-columns: 1fr !important; gap: 40px !important; margin-top: -60px !important; } .hero-title { font-size: 2.8rem !important; } .hero-subtitle { font-size: 1rem !important; } .hero-right { order: -1; /* stats before text on tablet so they act as hero visual */ } .hero-stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .hsc-num { font-size: 1.8rem !important; } } @media (max-width: 575.98px) { .hero-section { padding: 80px 16px 48px; min-height: auto; } .hero-content { margin-top: -40px !important; gap: 28px !important; } .hero-title { font-size: 2rem !important; } .hero-eyebrow { font-size: 0.75rem !important; padding: 5px 14px !important; } .hero-btns { flex-direction: column; gap: 12px !important; } .hero-btns .btn-primary, .hero-btns .btn-outline-light { width: 100%; justify-content: center; padding: 13px 20px !important; } .hero-stat-grid { grid-template-columns: repeat(2, 1fr) !important; } .hsc-num { font-size: 1.5rem !important; } .hsc-label { font-size: 0.7rem !important; } .hero-stat-card { padding: 18px 14px !important; border-radius: 14px !important; } .hero-badge-strip { gap: 8px !important; } .hero-badge { font-size: 0.75rem !important; padding: 6px 12px !important; } } /* ═══════════════════════════════════════════════════════════════ INDEX.PHP — FEATURES SECTION ═══════════════════════════════════════════════════════════════ */ @media (max-width: 575.98px) { .features-section { padding: 60px 0 !important; } .section-title { font-size: 1.8rem !important; } .section-subtitle { font-size: 0.95rem !important; } .section-header { margin-bottom: 40px !important; } .feature-card { padding: 28px 22px !important; } .feature-icon { width: 60px !important; height: 60px !important; font-size: 1.4rem !important; margin-bottom: 20px !important; } .feature-title { font-size: 1.1rem !important; } } /* ═══════════════════════════════════════════════════════════════ INDEX.PHP — JOBS SECTION ═══════════════════════════════════════════════════════════════ */ @media (max-width: 575.98px) { .jobs-section { padding: 60px 0 !important; } .jobs-header { flex-direction: column; align-items: flex-start !important; gap: 12px !important; margin-bottom: 32px !important; } .jobs-title { font-size: 1.6rem !important; } .job-card { padding: 20px !important; } .job-title { font-size: 1.1rem !important; } .company-logo-container { width: 60px !important; height: 60px !important; margin-right: 12px !important; } } /* ═══════════════════════════════════════════════════════════════ INDEX.PHP — REGISTRATION / LOGIN SECTION (power button + form) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 991.98px) { .registration-container { grid-template-columns: 1fr !important; gap: 40px !important; } } @media (max-width: 575.98px) { .registration-title { font-size: 1.8rem !important; } .registration-text { font-size: 0.95rem !important; } /* Login form card inside index.php */ .login-form-container { padding: 1.8rem 1.2rem 1.6rem !important; border-radius: 20px !important; } /* Power button orbit — shrink on mobile */ #pwOrbit { width: 120px !important; height: 120px !important; } /* Reveal panel form */ .pw-reveal-panel .registration-container { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════════ INDEX.PHP — TALENT / SKILLS SECTION ═══════════════════════════════════════════════════════════════ */ @media (max-width: 767.98px) { .talent-stats-bar { flex-direction: row !important; flex-wrap: wrap !important; } .talent-stat { min-width: calc(50% - 1px) !important; border-bottom: 1px solid #e2e8f0; } .talent-stat:nth-child(2n) { border-right: none !important; } .talent-stat-num { font-size: 2rem !important; } } @media (max-width: 575.98px) { .talent-section { padding: 60px 0 50px !important; } .skills-cloud { gap: 8px !important; } .skill-chip { font-size: 0.78rem !important; padding: 6px 12px !important; } } /* ═══════════════════════════════════════════════════════════════ INDEX.PHP — TESTIMONIALS / DIARIES CAROUSEL ═══════════════════════════════════════════════════════════════ */ @media (max-width: 767.98px) { .diary-carousel-track { gap: 16px !important; } .diary-carousel-item { min-width: calc(100vw - 48px) !important; max-width: calc(100vw - 48px) !important; } .diary-card { padding: 22px 18px !important; } .diary-title { font-size: 1.05rem !important; } } @media (max-width: 575.98px) { .carousel-nav-btn { width: 36px !important; height: 36px !important; font-size: 0.8rem !important; } } /* Testimonials section */ @media (max-width: 767.98px) { .testimonial-carousel-item { min-width: calc(100vw - 48px) !important; max-width: calc(100vw - 48px) !important; } } /* ═══════════════════════════════════════════════════════════════ INDEX.PHP — FOOTER / BOTTOM SECTION ═══════════════════════════════════════════════════════════════ */ @media (max-width: 767.98px) { footer .row > [class*="col-"] { margin-bottom: 24px; } footer { text-align: center; } footer .d-flex { justify-content: center !important; flex-wrap: wrap; } } /* ═══════════════════════════════════════════════════════════════ LOGIN.PHP (standalone login page) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 575.98px) { /* Card */ .login-card { max-width: 100% !important; border-radius: 20px !important; margin: 0 !important; } .card-header-area { padding: 18px 20px 16px !important; } .card-header-area h2 { font-size: 1.2rem !important; } .card-body-area, .login-card > div:not(.card-header-area) { padding: 20px 18px !important; } /* Back button */ .back-btn { top: 12px !important; left: 12px !important; font-size: 0.8rem !important; padding: 6px 12px !important; } /* Body padding so card clears back button — login.php only */ body:has(.login-card) { padding-top: 52px !important; padding-left: 12px !important; padding-right: 12px !important; } /* CAPTCHA row */ .captcha-row, .d-flex.align-items-center.gap-2 { flex-wrap: wrap !important; gap: 8px !important; } .captcha-img-wrap img, img[src*="captcha"] { max-width: 160px !important; } /* Social auth divider */ .social-divider { margin: 14px 0 !important; } /* Google btn */ .btn-google { font-size: 0.88rem !important; padding: 10px 16px !important; } } /* ═══════════════════════════════════════════════════════════════ SIGNUP.PHP ═══════════════════════════════════════════════════════════════ */ @media (max-width: 991.98px) { /* Two-column form grids → single column */ .signup-form .row .col-md-6, .form-two-col .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; } } @media (max-width: 575.98px) { /* Role toggle pills */ .role-toggle, .role-selector { flex-direction: column !important; gap: 8px !important; } .role-toggle .btn, .role-pill { width: 100% !important; text-align: center !important; } /* Stepper */ .step-indicator, .steps-bar { overflow-x: auto; white-space: nowrap; padding-bottom: 4px; } .step-indicator::-webkit-scrollbar { height: 3px; } /* File upload area */ .file-upload-area, .upload-zone { padding: 20px 12px !important; } /* Card */ .signup-card, .auth-card { padding: 20px 16px !important; border-radius: 18px !important; } /* Full-width submit */ .signup-card .btn-primary, .auth-card .btn-primary { width: 100% !important; justify-content: center !important; } } /* ═══════════════════════════════════════════════════════════════ FORGOT PASSWORD & RESET PASSWORD ═══════════════════════════════════════════════════════════════ */ @media (max-width: 575.98px) { .forgot-card, .reset-card, .auth-box { padding: 24px 18px !important; border-radius: 20px !important; max-width: 100% !important; } .forgot-card .btn-primary, .reset-card .btn-primary { width: 100% !important; } .otp-input-group, .otp-row { gap: 8px !important; } .otp-input-group input, .otp-row input { width: 44px !important; height: 44px !important; font-size: 1rem !important; padding: 0 !important; } /* Password strength bar */ .password-strength { margin-top: 6px; } } /* ═══════════════════════════════════════════════════════════════ CONTACT.PHP ═══════════════════════════════════════════════════════════════ */ @media (max-width: 991.98px) { /* Side-by-side info + form → stack */ .contact-wrapper, .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .contact-info-panel, .contact-sidebar { order: 2; } .contact-form-panel, .contact-main { order: 1; } } @media (max-width: 575.98px) { .contact-hero, .contact-header { padding: 60px 16px 40px !important; } .contact-hero h1 { font-size: 1.8rem !important; } .contact-card, .contact-form-card { padding: 22px 16px !important; border-radius: 18px !important; } .contact-info-item { flex-direction: row; align-items: flex-start; gap: 12px; } .contact-form-card .btn-primary { width: 100% !important; } } /* ═══════════════════════════════════════════════════════════════ ABOUT.PHP ═══════════════════════════════════════════════════════════════ */ @media (max-width: 767.98px) { /* Stats band: 4-col → 2-col */ .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0 !important; } .stat-item { padding: 20px 16px !important; border-bottom: 1px solid rgba(255,255,255,0.1); } /* Remove left borders on even items */ .stat-item + .stat-item { border-left: none !important; } .stat-item:nth-child(even) { border-left: 1px solid rgba(255,255,255,0.1) !important; } .stat-number { font-size: 2rem !important; } /* Team grid: 2-col on tablet */ .team-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Features grid already uses auto-fit, but set a minimum */ .features-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 575.98px) { /* About hero */ .hero-about { padding: 72px 16px 80px !important; } .hero-title { font-size: clamp(1.7rem, 6vw, 2.4rem) !important; } .hero-sub { font-size: 0.88rem !important; } .hero-scroll-hint { margin-top: 24px !important; } /* Wrapper padding */ .about-wrapper { padding: 40px 16px 56px !important; } /* Mission card */ .mission-card { padding: 24px 18px !important; } .mission-card-header { gap: 10px !important; } .mission-card-header h3 { font-size: 1.1rem !important; } /* Stats band */ .stats-band { padding: 32px 16px !important; border-radius: 12px !important; } .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .stat-number { font-size: 1.8rem !important; } .stat-label { font-size: 0.78rem !important; } /* Features grid: 1-col on mobile */ .features-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .feature-card { padding: 22px 18px !important; } /* Team grid: 1-col on very small screens */ .team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } /* Values / process grids */ .values-grid, .process-grid { grid-template-columns: 1fr !important; } } @media (max-width: 400px) { .team-grid { grid-template-columns: 1fr !important; max-width: 260px; margin-left: auto !important; margin-right: auto !important; } } /* ═══════════════════════════════════════════════════════════════ RESOURCES.PHP (page already has built-in @768 and @480 queries — we only add what those miss) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 575.98px) { .hero-resources { padding: 52px 0 72px !important; } .hero-resources-inner { padding: 0 16px !important; } .resources-wrapper { padding: 36px 12px 48px !important; } /* Stats row — 3-col already collapses to 1-col at 768, good */ .stat-card { padding: 20px 16px !important; } /* CTA banner already stacks at 768px */ } /* ═══════════════════════════════════════════════════════════════ VISITOR DIARIES.PHP (page already has built-in @768 and @480 queries — we only add what those miss) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 575.98px) { .hero-feedback { padding: 16px 0 72px !important; } .feedback-wrapper { padding: 36px 12px 48px !important; } .feedback-card { padding: 18px 14px !important; } /* Back button: avoid overlapping hero title */ .btn-back { top: 12px !important; left: 12px !important; font-size: 0.75rem !important; padding: 6px 12px !important; } /* Rating stars — always keep tappable size */ .star-icon { font-size: 2.2rem !important; } .rating-stars { gap: 6px !important; flex-wrap: wrap !important; justify-content: center !important; } } /* ═══════════════════════════════════════════════════════════════ SHARED FORM ELEMENTS (all auth pages) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 575.98px) { /* Generic input groups */ .input-group .btn { white-space: nowrap; } /* Error / success banners */ .alert { font-size: 0.88rem !important; padding: 10px 14px !important; border-radius: 10px !important; } /* Form labels */ label { font-size: 0.85rem !important; } /* Inputs */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea { font-size: 16px !important; /* Prevents iOS auto-zoom */ } } /* ═══════════════════════════════════════════════════════════════ BOOTSTRAP UTILITY PATCHES Fix Bootstrap breakpoint gaps when our content overflows ═══════════════════════════════════════════════════════════════ */ @media (max-width: 575.98px) { .container, .container-fluid { padding-left: 16px !important; padding-right: 16px !important; } /* Section spacing tighter on mobile — exclude hero sections */ section:not(.hero-feedback):not(.hero-resources):not(.hero-about):not(.hero-section) { padding-top: 56px !important; padding-bottom: 56px !important; } /* Cards */ .card { border-radius: 16px !important; } .card-body { padding: 18px 16px !important; } /* Buttons: minimum tap target */ .btn { min-height: 44px; } .btn-sm { min-height: 36px; } } /* ═══════════════════════════════════════════════════════════════ SPECIFIC COMPONENT FIXES ═══════════════════════════════════════════════════════════════ */ /* ── Disclaimer / Cookie popup ── */ @media (max-width: 575.98px) { .disclaimer-modal, .cookie-banner, #disclaimerModal .modal-dialog { margin: 12px !important; } #disclaimerModal .modal-content { border-radius: 18px !important; } #disclaimerModal .modal-body { padding: 20px 16px !important; font-size: 0.88rem !important; } } /* ── Bootstrap modal dialog centering on mobile ── */ @media (max-width: 575.98px) { .modal-dialog { margin: 16px !important; max-width: calc(100vw - 32px) !important; } .modal-content { border-radius: 18px !important; } } /* ── Dropdown menus ── */ @media (max-width: 575.98px) { .dropdown-menu { font-size: 0.9rem !important; border-radius: 14px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; } .dropdown-item { padding: 10px 16px !important; } } /* ── Table: scroll wrapper on small screens ── */ @media (max-width: 767.98px) { .table-responsive-wrapper, .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ── Badges / Pills that might overflow ── */ @media (max-width: 575.98px) { .badge, .pill { font-size: 0.72rem !important; } .job-badge { font-size: 0.7rem !important; } } /* ── CAPTCHA refresh button alignment ── */ @media (max-width: 400px) { .captcha-wrapper { flex-direction: column !important; align-items: flex-start !important; gap: 8px; } .captcha-wrapper img { max-width: 100% !important; } .captcha-wrapper input { width: 100% !important; } } /* ── Hero orbs: reduce blur cost on mobile ── */ @media (max-width: 575.98px) { .hero-orb { filter: blur(40px) !important; } .hero-orb-1 { width: 300px !important; height: 300px !important; } .hero-orb-2 { width: 200px !important; height: 200px !important; } .hero-orb-3 { width: 150px !important; height: 150px !important; } } /* ── Section gap variable override ── */ @media (max-width: 767.98px) { :root { --section-gap: 72px !important; } } @media (max-width: 575.98px) { :root { --section-gap: 56px !important; } } /* ── Login page: starfield canvas shouldn't create scrollbars ── */ .bg-canvas { overflow: hidden; } /* ── Back button: ensure it doesn't overlap content on tiny screens ── */ @media (max-width: 360px) { .back-btn { font-size: 0 !important; padding: 8px !important; } .back-btn span, .back-btn .back-text { display: none; } .back-btn i { font-size: 1rem !important; } } /* ═══════════════════════════════════════════════════════════════ PRINT — strip decorative chrome ═══════════════════════════════════════════════════════════════ */ @media print { .page-sidebar, .navbar, .hero-orbs, .hero-bg-grid, .bg-canvas, .particles-bg { display: none !important; } body { background: white !important; color: black !important; } }