/* =================================== css/responsive.css Consolidated responsive breakpoints for ResearchPlugHub. SCOPE: Only rules extracted from modular CSS files (navbar.css, site-footer.css, pages.css). The mega-blocks in styles.css and service-pages.css remain authoritative in their own files until the final pruning pass. LOAD ORDER (in after all other modular files): styles.css → global.css → navbar.css → site-footer.css → pages.css → forms.css → responsive.css BREAKPOINTS: @media (max-width: 768px) — tablet / large mobile @media (max-width: 480px) — small mobile =================================== */ /* ── Global menu open states ── */ /* NOTE: No scroll-lock on body — the menu is a simple dropdown, not a full-screen overlay. Locking body with position:fixed caused the page to jump/blur. */ body.menu-open .floating-contacts { display: none !important; /* Hide floating widgets when menu is open */ } /* ============================================================ @media (max-width: 768px) — tablet / large mobile ============================================================ */ @media (max-width: 768px) { /* ── Release containing block for mobile fixed elements ── */ .navbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #0066ff !important; /* solid corporate brand blue for perfect brand matching and layout stability */ } /* ── Mobile Nav Overlay (subtle backdrop, NO blur so page content stays sharp) ── */ .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 9998; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: fadeIn 0.25s ease; } .nav-overlay.active { display: block; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── Top Dropdown Panel ── */ .nav-links { display: none !important; /* Hidden completely when inactive */ flex-direction: column; position: fixed !important; /* Fixed positioning breaks completely out of flex container quirks */ top: 70px !important; /* Positioned exactly at the bottom of the fixed navbar */ left: 0 !important; right: 0 !important; width: 100% !important; height: auto; max-height: calc(100vh - 70px); /* Fit screen height but scroll if content overflows */ background: linear-gradient(180deg, #0052d4 0%, #0066FF 100%); z-index: 10000; padding: 1.25rem 2rem 2rem; gap: 0; margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); border-bottom: 3px solid #0052d4; border-radius: 0 0 16px 16px; /* Elegant bottom rounded corners */ overflow-y: auto; -webkit-overflow-scrolling: touch; animation: none !important; /* Disable styles.css keyframe */ } .nav-links.active { display: flex !important; animation: slideDownMobile 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; pointer-events: auto !important; } @keyframes slideDownMobile { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .nav-links a { padding: 0.85rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); width: 100%; font-size: 1.05rem; color: rgba(255, 255, 255, 0.95); transition: all 0.2s ease; } .nav-links a::after { display: none !important; /* Disable desktop hover line animation */ } .nav-links a:hover, .nav-links a:active { color: #ffffff; padding-left: 5px; /* Subtle tapping feedback */ } .nav-links a:last-child { border-bottom: none; } /* Style the buttons (Login and Cloned WhatsApp) */ .login-btn { margin-left: 0 !important; margin-top: 1.25rem; display: flex !important; justify-content: center; align-items: center; text-align: center; width: 100%; box-sizing: border-box; border: 1.5px solid rgba(255, 255, 255, 0.4) !important; border-radius: 50px !important; padding: 0.65rem 1.5rem !important; color: white !important; background: rgba(255, 255, 255, 0.1) !important; font-weight: 600; } .login-btn:hover, .login-btn:active { background: white !important; color: #0066FF !important; border-color: white !important; } /* Cloned CTA container inside mobile menu */ .nav-links .mobile-nav-cta { margin-top: 0.75rem; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0.6rem; width: 100%; box-sizing: border-box; } .nav-links .mobile-nav-cta .whatsapp-btn { display: flex !important; align-items: center; justify-content: center; gap: 8px; padding: 0.75rem 1.5rem !important; background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important; color: white !important; border-radius: 50px !important; font-weight: 600; text-decoration: none; flex: 1; box-sizing: border-box; border: none !important; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } .nav-links .mobile-nav-cta .whatsapp-btn:hover, .nav-links .mobile-nav-cta .whatsapp-btn:active { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important; } .nav-links .mobile-nav-cta .whatsapp-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .nav-links .mobile-nav-cta .nav-qr-container { display: block !important; position: relative !important; width: 100% !important; } /* ── Mobile QR panel: always visible, inline inside the menu panel ── */ .nav-links .mobile-nav-cta .nav-qr-btn { display: none !important; /* hide the toggle icon — QR is shown inline on mobile */ } .nav-links .mobile-nav-cta .nav-qr-dropdown { /* Override the absolute-positioned desktop popover */ position: static !important; display: flex !important; flex-direction: column !important; align-items: center !important; opacity: 1 !important; visibility: visible !important; transform: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 12px !important; padding: 0.85rem !important; box-shadow: none !important; margin-top: 0 !important; } /* Hide the desktop arrow caret inside mobile */ .nav-links .mobile-nav-cta .nav-qr-dropdown::before { display: none !important; } /* QR image: constrained to fit the panel */ .nav-links .mobile-nav-cta .nav-qr-dropdown img { width: 100% !important; max-width: 120px !important; height: auto !important; margin: 0 auto !important; display: block !important; } /* Scan label text inside mobile QR block */ .nav-links .mobile-nav-cta .nav-qr-dropdown p { font-size: 0.7rem !important; margin: 0.4rem 0 0 !important; text-align: center !important; } /* Hamburger button — 44x44px accessible touch target */ .mobile-menu-toggle { display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; position: relative; z-index: 10001; /* Renders on top of the slide-out menu panel (z-index 10000) */ margin-right: -8px; /* Tucks it nicely against the right screen edge */ transition: var(--transition-base); } .mobile-menu-toggle span { display: block; width: 24px; height: 3px; background: var(--light-text); border-radius: 2px; transition: var(--transition-base); } /* Morph hamburger to standard white 'X' close button on active */ .mobile-menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); background: #ffffff !important; } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: #ffffff !important; } /* Show the header CTA container on mobile to display the QR (scan) button next to hamburger toggle */ .nav-cta { display: flex !important; align-items: center !important; margin-left: auto !important; gap: 0.5rem !important; } .nav-cta .whatsapp-btn { display: none !important; } .nav-cta .nav-qr-container { display: block !important; } /* Shrink the slogan font size on mobile to prevent any overlap */ .nav-slogan { font-size: 0.5rem !important; } /* ── Pricing billing toggle — responsive compact layout ── */ .billing-toggle { flex-wrap: wrap; gap: 0.65rem; justify-content: center; margin-bottom: 2.25rem; } .toggle-label { font-size: 0.92rem; } .save-tag { display: inline; font-size: 0.72rem; padding: 0.18rem 0.55rem; } /* ── Floating contacts — compact icon pills on mobile ── */ .floating-contacts { bottom: 1rem; right: 1rem; gap: 0.5rem; } .float-btn { font-size: 0 !important; /* Hide label text, keep SVG */ width: 46px; height: 46px; padding: 0; border-radius: 50%; justify-content: center; align-items: center; } .float-btn svg { width: 20px; height: 20px; flex-shrink: 0; } /* ── Pricing cards stack (from pages.css) ── */ .pricing-grid { grid-template-columns: 1fr; } /* ── Pricing card — compact padding on mobile ── */ .price-card { padding: 2rem 1.5rem; min-height: auto; } /* ── Price button — 44px minimum touch height ── */ .price-btn { min-height: 48px; display: flex; align-items: center; justify-content: center; } /* ── FAQ accordion button — 44px minimum touch height ── */ .faq-q { min-height: 44px; padding: 1.25rem 1.5rem; font-size: 1rem; } /* ── Pricing CTA — compact on mobile ── */ .pricing-cta { padding: 2.5rem 1.5rem; margin: 3rem auto 0; } .pricing-cta h2 { font-size: 1.75rem; } .pricing-cta p { font-size: 1rem; margin-bottom: 1.75rem; } /* ── Services CTA section — compact on mobile ── */ .cta-section { padding: 2.5rem 1.5rem; border-radius: 16px; } .cta-section h2 { font-size: 1.75rem; } .cta-section p { font-size: 1rem; margin-bottom: 1.75rem; } /* ── Contact two-column to single column (from pages.css) ── */ .contact-grid { grid-template-columns: 1fr; } /* ── Contact info box — release sticky on mobile (avoids z-index layering) ── */ .contact-info-box { position: static; padding: 2rem 1.5rem; } .contact-info-box h2 { font-size: 1.4rem; margin-bottom: 1.5rem; } /* ── Contact method — compact on mobile ── */ .contact-method { padding: 1.25rem; margin-bottom: 1.25rem; } /* ── WhatsApp channel buttons — stack on mobile ── */ .wa-channel-btn { padding: 0.75rem 1rem; font-size: 0.9rem; } /* ── Guarantees grid — stack on tablet ── */ .guarantees-grid { grid-template-columns: repeat(2, 1fr); } /* ── Global Layout Padding & Spacing Standardizations ── */ .services-hero, .portfolio-hero, .pricing-hero, .contact-hero, .page-header { padding: var(--hero-padding-mobile) !important; } .services-main, .portfolio-main, .pricing-main, .contact-main, .about, #testimonials, .contact { padding: var(--section-padding-mobile) !important; } .services-hero h1, .portfolio-hero h1, .pricing-hero h1, .contact-hero h1, .hero-title, .main-title { font-size: 2.25rem !important; } .services-hero p, .portfolio-hero p, .pricing-hero p, .contact-hero p, .hero-description, .tagline { font-size: 1rem !important; line-height: 1.5 !important; } /* ── Portfolio grid — force single column on mobile ── */ .portfolio-grid { grid-template-columns: 1fr; gap: 1.25rem; } /* ── Portfolio filter pills — 44px touch target, wrap nicely ── */ .portfolio-filters { gap: 0.6rem; margin-bottom: 2.25rem; } .filter-btn { min-height: 44px; padding: 0.6rem 1.25rem; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; } /* ── Portfolio satisfaction badge row — wrap gracefully ── */ .satisfaction-badge-row { gap: 0.85rem 1.25rem; padding: 0.75rem 1rem; border-radius: 16px; } .sat-badge-item.divider { display: none; } /* hide dividers when wrapping */ /* ── Service boxes grid — single column ── */ .service-boxes { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 3rem; } /* ── Service box — reduce inner padding ── */ .service-box { padding: 1.75rem; } /* ── Subjects & tech section headings ── */ .subjects-section h2, .tech-section h2 { font-size: 1.75rem; margin-bottom: 1.75rem; } /* ── Subjects grid — tighter columns on tablet ── */ .subjects-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; } /* ── Tech categories — single column ── */ .tech-categories { grid-template-columns: 1fr; } /* ── Hero trust row (index.html) — wrap neatly ── */ .hero-trust-row { flex-wrap: wrap; gap: 0.4rem 0.75rem; justify-content: center; } .hero-trust-row .sep { display: none; } /* ── Hero CTA buttons — stack on small screens ── */ .hero-cta { flex-direction: column; align-items: center; gap: 0.85rem; } .hero-cta .btn { width: 100%; max-width: 340px; justify-content: center; } /* ── Trust badges grid (index.html) — 2 col ── */ .trust-badges-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } /* ── Authority section header — stack icon + title ── */ .authority-header { flex-direction: column; gap: 0.75rem; } /* ── Level track — already set in pages.css; keep connector hidden ── */ .level-connector { display: none; } .level-track { flex-direction: column; align-items: flex-start; gap: 0.6rem; } /* ── Citation grid — 2 col on mobile ── */ .citation-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } /* ── Trust metrics row — 2 col on mobile ── */ .trust-metrics-row { grid-template-columns: repeat(2, 1fr); } /* ── WhatsApp CTA button — full width on mobile ── */ .whatsapp-cta, .wa-cta-btn { width: 100%; justify-content: center; padding: 1rem 1.5rem; } } /* ============================================================ @media (max-width: 480px) — small mobile ============================================================ */ @media (max-width: 480px) { /* ── Navbar logo shrink (from navbar.css) ── */ .logo span { font-size: 0.9rem; } .nav-slogan { font-size: 0.46rem !important; } /* Ultra-narrow screens (e.g., iPhone SE/320px): scale down slogan slightly to fit */ @media (max-width: 360px) { .nav-slogan { font-size: 0.42rem !important; } } /* ── Floating contacts already icon-only from 768px rule above ── */ .floating-contacts { bottom: 0.75rem; right: 0.75rem; } .float-btn { width: 42px; height: 42px; } /* ── Pricing card — tighter padding on small phones ── */ .price-card { padding: 1.5rem 1.1rem; } .price-amount { font-size: 2.25rem; } /* ── Pricing CTA — full stretch on small phones ── */ .pricing-cta { padding: 2rem 1rem; border-radius: 16px; } .pricing-cta h2 { font-size: 1.5rem; } /* ── FAQ — tighter padding on small phones ── */ .faq-q { padding: 1rem 1.25rem; font-size: 0.95rem; } .faq-a-inner { padding: 0.25rem 1.25rem 1.25rem; font-size: 0.9rem; } /* ── Guarantees grid — 1 column on small phones ── */ .guarantees-grid { grid-template-columns: 1fr; } /* ── Guarantee card — reduce padding ── */ .guarantee-card { padding: 1.25rem; } /* ── Portfolio filter pills — tighter on small phones ── */ .filter-btn { padding: 0.5rem 0.9rem; font-size: 0.8rem; min-height: 40px; } .portfolio-filters { gap: 0.4rem; } /* ── Portfolio card — reduce min-height ── */ .portfolio-card { padding: 1.5rem; min-height: auto; } /* ── Satisfaction badge row — column stack on very small screens ── */ .satisfaction-badge-row { flex-direction: column; gap: 0.5rem; border-radius: 12px; padding: 1rem; } /* ── CTA section — tighter on small phones ── */ .cta-section { padding: 1.75rem 1rem; border-radius: 12px; } .cta-section h2 { font-size: 1.5rem; } /* ── Service box — tighter on small phones ── */ .service-box { padding: 1.35rem; } .service-box h2 { font-size: 1.2rem; } /* ── Subjects grid — 2 fixed columns on small phones ── */ .subjects-grid { grid-template-columns: repeat(2, 1fr); } /* ── Contact info box — tighter on small phones ── */ .contact-info-box { padding: 1.5rem 1rem; } /* ── Contact method — compact on small phones ── */ .contact-method { padding: 1rem; } /* ── Authority section title ── */ .authority-title { font-size: 1.25rem; } /* ── Citation grid — 2 col still, but tighter ── */ .citation-grid { gap: 0.5rem; } /* ── Trust metrics — still 2 col on small phones ── */ .trust-metrics-row { gap: 0.65rem; } .trust-metric-card { padding: 1rem 0.75rem; } .trust-metric-num { font-size: 1.6rem; } /* ── Trust badges grid — single column on very small phones ── */ .trust-badges-grid { grid-template-columns: 1fr; } /* ── Hero heading size floor ── */ .hero-title, .main-title { font-size: 1.9rem !important; } /* ── Section titles ── */ .section-title { font-size: 1.75rem !important; } /* ── Guarantees title & FAQ title ── */ .guarantees-title, .faq-title { font-size: 1.75rem; margin: 3rem auto 1.75rem; } /* ── Legal content pages — extra padding reduction ── */ .legal-content { padding: 2rem 0.85rem 3.5rem !important; } .legal-content h1 { font-size: 1.6rem !important; } .legal-intro { padding: 1rem 1.1rem; } }