/* ============================================================ MOBILE RESPONSIVE FIXES Loaded LAST in so it overrides every other stylesheet. Goals: - No content hidden behind the navbar on any page. - No horizontal scroll on any viewport. - Services page stat cards remain visible on mobile/tablet. - Hero/CTA buttons stack & fill width on small screens. - Card grids degrade cleanly at every breakpoint. ============================================================ */ /* ───────────────────────────────────────────── GLOBAL OVERFLOW & TYPOGRAPHY GUARDRAILS ───────────────────────────────────────────── */ html, body { max-width: 100%; overflow-x: hidden; } img, video, canvas, svg, iframe { max-width: 100%; height: auto; } @media (max-width: 768px) { /* Force long words / URLs to wrap instead of pushing layout out */ h1, h2, h3, h4, h5, h6, p, a, span, li, strong, small { overflow-wrap: anywhere; word-break: break-word; } /* Inputs that escape on tiny screens */ input, select, textarea { max-width: 100%; box-sizing: border-box; } } /* ───────────────────────────────────────────── NAVBAR / MOBILE MENU SAFETY ───────────────────────────────────────────── */ @media (max-width: 900px) { /* Make sure the mobile menu has room for the close (toggle) button and that long link lists scroll if needed. */ .nav-menu { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: calc(env(safe-area-inset-top, 0px) + 6rem) !important; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem) !important; } .nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } /* Tap-friendly nav links */ .nav-link { min-height: 44px; display: flex; align-items: center; justify-content: center; } } /* ───────────────────────────────────────────── UNIVERSAL HERO CLEARANCE The navbar is FIXED at the top of every route. IndexStyling.css applies a high-specificity rule to non-home/non-products pages: body.page-shell:not(.page-home):not(.page-products) .hero-section / .apps-hero-section / .svc-hero { min-height: 100vh !important; align-items: center !important; padding-top: ... + 96px !important; } When the hero's CONTENT is taller than the viewport (e.g. Apps page on a phone: large title + subtitle + two buttons + side card), `align-items: center` causes the content to overflow UPWARD behind the fixed navbar. Padding-top alone cannot fix that — flex centering ignores padding when content > container. The fix below MATCHES that selector's specificity so our !important actually wins, then: 1. anchors content to the top (align-items:flex-start), 2. drops the 100vh min-height (let the section grow with content instead of forcing it tall), 3. reserves enough padding-top to clear the floating navbar plus the iOS safe-area inset. ───────────────────────────────────────────── */ @media (max-width: 900px) { body.page-shell .hero-section, body.page-shell .apps-hero-section, body.page-shell .svc-hero, body.page-shell .coverflow-section, body.page-shell .products-hero-section, body.page-shell .cookie-prefs, body.page-shell:not(.page-home):not(.page-products) .hero-section, body.page-shell:not(.page-home):not(.page-products) .apps-hero-section, body.page-shell:not(.page-home):not(.page-products) .svc-hero { min-height: auto !important; align-items: flex-start !important; justify-content: flex-start !important; padding-top: calc(env(safe-area-inset-top, 0px) + 140px) !important; padding-bottom: 3rem !important; } /* Reset any per-page rule that nudges the first heading up. */ body.page-shell .hero-section h1, body.page-shell .apps-hero-section h1, body.page-shell .svc-hero h1, body.page-shell .coverflow-section h1, body.page-shell .products-hero-section h1 { margin-top: 0 !important; } body.page-shell .hero-section > .hero-row, body.page-shell .apps-hero-section > .hero-row, body.page-shell .svc-hero > .svc-hero-inner, body.page-shell .hero-section > .hero-content, body.page-shell .apps-hero-section > .apps-hero-content { margin-top: 0 !important; } } @media (max-width: 600px) { body.page-shell .hero-section, body.page-shell .apps-hero-section, body.page-shell .svc-hero, body.page-shell .coverflow-section, body.page-shell .products-hero-section, body.page-shell .cookie-prefs, body.page-shell:not(.page-home):not(.page-products) .hero-section, body.page-shell:not(.page-home):not(.page-products) .apps-hero-section, body.page-shell:not(.page-home):not(.page-products) .svc-hero { padding-top: calc(env(safe-area-inset-top, 0px) + 150px) !important; } } @media (max-width: 380px) { body.page-shell .hero-section, body.page-shell .apps-hero-section, body.page-shell .svc-hero, body.page-shell .coverflow-section, body.page-shell .products-hero-section, body.page-shell .cookie-prefs, body.page-shell:not(.page-home):not(.page-products) .hero-section, body.page-shell:not(.page-home):not(.page-products) .apps-hero-section, body.page-shell:not(.page-home):not(.page-products) .svc-hero { padding-top: calc(env(safe-area-inset-top, 0px) + 160px) !important; } } /* ───────────────────────────────────────────── CONTACT US — force hero text BEFORE side panel On mobile the .cu-hero .hero-row was rendering the "What Happens Next" panel above the title. Stack vertically and explicitly order the children: 1) hero text (title / subtitle / CTAs) 2) hero side panel ───────────────────────────────────────────── */ @media (max-width: 1024px) { .cu-hero .hero-row, body.page-shell .cu-hero .hero-row, body.page-shell:not(.page-home):not(.page-products) .cu-hero .hero-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 2rem !important; } .cu-hero .hero-row .hero-content, body.page-shell .cu-hero .hero-row .hero-content, body.page-shell:not(.page-home):not(.page-products) .cu-hero .hero-row .hero-content { order: 1 !important; width: 100% !important; max-width: 100% !important; } .cu-hero .hero-row .hero-side-card, body.page-shell .cu-hero .hero-row .hero-side-card, body.page-shell:not(.page-home):not(.page-products) .cu-hero .hero-row .hero-side-card { order: 2 !important; width: 100% !important; max-width: 100% !important; transform: none !important; animation: none !important; } } /* ───────────────────────────────────────────── SERVICES PAGE — show hero stat cards on mobile The original CSS hides .svc-hero-right at <=1024px which removes the four stat cards. Restore them. ───────────────────────────────────────────── */ @media (max-width: 1024px) { .svc-hero-right { display: block !important; width: 100%; margin-top: 2.25rem; } .svc-hero-inner { grid-template-columns: 1fr !important; } .svc-hero-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; max-width: 100%; } .svc-hstat { padding: 1.1rem 0.9rem !important; } .svc-hstat .stat-number { font-size: 2rem !important; } .svc-hstat-sfx { font-size: 1.25rem !important; } .svc-hstat small { font-size: 0.65rem !important; letter-spacing: 0.08em !important; } } @media (max-width: 768px) { .svc-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .svc-hstat .stat-number { font-size: 1.85rem !important; } } @media (max-width: 380px) { .svc-hero-stats { grid-template-columns: 1fr 1fr; } .svc-hstat { padding: 0.95rem 0.75rem !important; } .svc-hstat .stat-number { font-size: 1.6rem !important; } .svc-hstat-sfx { font-size: 1.05rem !important; } } /* Keep the services hero domain tabs / panels readable on phones */ @media (max-width: 640px) { .svc-domains-section { padding: 4rem 1rem !important; } .svc-domain-tab { grid-template-columns: auto auto 1fr !important; padding: 0.95rem 1rem !important; } .svc-domain-tab .svc-domain-arrow { display: none; } .svc-domain-num { font-size: 0.85rem; } .svc-domain-meta strong { font-size: 0.95rem; } .svc-domain-meta small { font-size: 0.7rem; } } /* ───────────────────────────────────────────── ABOUT US — keep stats strip and tiles tidy ───────────────────────────────────────────── */ @media (max-width: 768px) { .abt-stats-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; } .abt-stat { padding: 1.1rem 0.9rem !important; } .abt-stat-num { font-size: 1.9rem !important; } } @media (max-width: 420px) { .abt-stats-row { grid-template-columns: 1fr !important; } } /* ───────────────────────────────────────────── APPS — apps hero stats: keep visible & tidy The page CSS stacks them as flex column with max-width:300px which works; just guarantee they aren't cut off horizontally. ───────────────────────────────────────────── */ @media (max-width: 768px) { .apps-hero-section .hero-row { gap: 2rem !important; } .apps-hero-stats { width: 100% !important; align-items: center !important; } .stat-item { width: 100% !important; max-width: 360px !important; } } /* ───────────────────────────────────────────── CONTACT US — form & quick tiles ───────────────────────────────────────────── */ @media (max-width: 768px) { .cu-quick-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 1rem !important; padding: 0 1rem !important; } .cu-quick-tile { width: 100% !important; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn-primary, .hero-actions .cu-btn-ghost, .hero-actions .btn-secondary { width: 100%; justify-content: center; } } /* ───────────────────────────────────────────── PRODUCTS — coverflow is touch friendly already, but make sure controls are reachable on tiny phones. ───────────────────────────────────────────── */ @media (max-width: 480px) { .cf-nav { width: 36px !important; height: 36px !important; } .cf-meta-name { font-size: 1.1rem !important; } .cf-meta-tag { font-size: 0.8rem !important; } } /* ───────────────────────────────────────────── FOOTER — tighter on phones, no overflow ───────────────────────────────────────────── */ @media (max-width: 600px) { .footer { padding: 3rem 0 0 !important; } .footer-content { padding: 0 1rem 1rem !important; } .footer-main { gap: 2rem !important; margin-bottom: 2rem !important; } .footer-links { gap: 1.75rem !important; } .footer-column h4 { margin-bottom: 1rem !important; } .perf-metrics { gap: 0.75rem !important; justify-content: center !important; } .perf-item { font-size: 0.6rem !important; } } /* ───────────────────────────────────────────── GENERIC GRID / CTA HARDENING ───────────────────────────────────────────── */ @media (max-width: 480px) { /* Anything we render as a multi-column grid should collapse to one column at the smallest sizes if it hasn't already. */ .features-grid, .platforms-grid, .monetization-grid, .process-timeline, .industries-grid, .svc-card-grid, .svc-cards-grid, .svc-industries-grid { grid-template-columns: 1fr !important; } .btn-primary, .btn-secondary, .btn-cta-primary, .btn-cta-secondary, .btn-ghost { width: 100%; justify-content: center; } } /* Reduce orb / glow blur on phones (perf + no overflow halos) */ @media (max-width: 600px) { .orb { filter: blur(80px) !important; } }