/* ============================================ RESPONSIVE FIXES FOR STRATEGIC CONNEXUS Add this to of all pages AFTER styles.css ============================================ */ /* BASE MOBILE-FIRST STYLES */ * { box-sizing: border-box; } /* Ensure images are responsive */ img { max-width: 100%; height: auto; display: block; } /* Responsive containers */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } @media (min-width: 768px) { .container { padding: 0 40px; } } @media (min-width: 1024px) { .container { padding: 0 60px; } } /* Navigation fixes for mobile */ @media (max-width: 768px) { .nav-menu { position: fixed; top: 70px; left: -100%; width: 100%; height: calc(100vh - 70px); background: white; flex-direction: column; transition: left 0.3s ease; padding: 20px; overflow-y: auto; box-shadow: 0 5px 20px rgba(0,0,0,0.1); z-index: 999; } .nav-menu.active { left: 0; } .nav-menu li { width: 100%; margin: 10px 0; } .nav-menu a { display: block; padding: 15px; text-align: center; } .hamburger { display: block !important; cursor: pointer; } } /* Hero section mobile optimization */ @media (max-width: 768px) { .hero { padding: 60px 0 !important; min-height: auto !important; } .hero-title { font-size: 2rem !important; line-height: 1.2 !important; } .hero-subtitle { font-size: 1rem !important; line-height: 1.6 !important; } .hero-cta { flex-direction: column !important; gap: 15px !important; } .hero-cta .btn { width: 100% !important; text-align: center !important; } } /* Grid layouts - force single column on mobile */ @media (max-width: 640px) { .benefits-grid, .diff-grid, .services-grid, .philosophy-grid { grid-template-columns: 1fr !important; gap: 20px !important; } /* Override any grid-column spans on mobile */ .benefit-card, .diff-item, .service-card { grid-column: span 1 !important; } } /* Contact form 2-column layout fix */ @media (max-width: 768px) { .contact-form-section div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 30px !important; } .form-row { flex-direction: column !important; } } /* Button sizing for mobile */ @media (max-width: 640px) { .btn-nav { padding: 8px 16px !important; font-size: 0.85rem !important; } .btn-nav-main { font-size: 0.85rem !important; } .btn-nav-sub { font-size: 0.65rem !important; } .btn-large { padding: 14px 28px !important; font-size: 0.95rem !important; } } /* Footer responsive */ @media (max-width: 768px) { .footer-content { grid-template-columns: 1fr !important; gap: 30px !important; text-align: center !important; } .footer-bottom { flex-direction: column !important; gap: 15px !important; text-align: center !important; } } /* Section spacing mobile */ @media (max-width: 768px) { section { padding: 40px 0 !important; } .section-header { margin-bottom: 30px !important; } .section-header h2 { font-size: 1.75rem !important; } } /* Certification logos mobile */ @media (max-width: 640px) { div[style*="display:flex"][style*="gap:60px"] { flex-direction: column !important; gap: 25px !important; } } /* About page photo grid mobile */ @media (max-width: 768px) { .about-intro-grid { grid-template-columns: 1fr !important; gap: 30px !important; text-align: center !important; } } /* Prevent horizontal scroll */ body { overflow-x: hidden; max-width: 100vw; } /* Ensure tap targets are large enough (48px minimum) */ a, button, input, select, textarea { min-height: 44px; min-width: 44px; } /* Make sure text doesn't get too small */ body { font-size: 16px; line-height: 1.6; } @media (max-width: 640px) { body { font-size: 15px; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } p { font-size: 0.95rem; } } /* Cookie banner responsive */ @media (max-width: 640px) { #cookie-banner > div { flex-direction: column !important; align-items: flex-start !important; gap: 15px !important; } #cookie-banner button { width: 100%; } } /* Ensure links are descriptive (for SEO) */ a[href]:empty::before { content: "Link"; } /* Service cards mobile */ @media (max-width: 768px) { .service-card { padding: 25px !important; } .service-number { font-size: 3rem !important; } } /* Methodology/Process steps mobile */ @media (max-width: 640px) { .methodology-phases, .process-step { padding: 20px !important; } .step-number { font-size: 1.5rem !important; width: 50px !important; height: 50px !important; } } /* Table responsiveness (if any tables exist) */ @media (max-width: 768px) { table { display: block; overflow-x: auto; white-space: nowrap; } } /* Fix any fixed-width elements */ @media (max-width: 768px) { * { max-width: 100vw !important; } img, video, iframe { max-width: 100% !important; height: auto !important; } } /* Improve touch targets */ @media (hover: none) and (pointer: coarse) { a, button { padding: 12px 18px; } }