/* ============================================================ LEONIDAS — RESPONSIVE OVERRIDES Single file — linked from all pages. Edit here to change mobile/tablet behaviour site-wide. ============================================================ */ /* ── 0. Base safety ──────────────────────────────────────────── */ /* overflow-x: hidden on breaks position:fixed (nav scrolls/offsets). Keep it ONLY on body — body can be the overflow container without affecting the viewport-relative fixed positioning of the nav. */ html { max-width: 100%; } body { max-width: 100%; overflow-x: hidden; } img, svg, video, iframe { max-width: 100%; } *, *::before, *::after { box-sizing: border-box; } /* ── 1. Typography — phones (≤480px) ────────────────────────── */ @media (max-width: 480px) { /* Hero headline custom class */ .hero-h1 { font-size: clamp(1.75rem, 8vw, 2.6rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; } /* Process giant outline numbers */ .process-number { font-size: 3.5rem !important; } /* Stat counters */ .stat-number { font-size: 2rem !important; } /* Any element using inline style with a large clamp minimum */ [style*="font-size:clamp(2.8"], [style*="font-size: clamp(2.8"], [style*="font-size:clamp(3"], [style*="font-size: clamp(3"] { font-size: clamp(1.65rem, 7vw, 2.8rem) !important; } [style*="font-size:clamp(2.2"], [style*="font-size: clamp(2.2"] { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; } [style*="font-size:clamp(2rem"], [style*="font-size: clamp(2rem"] { font-size: clamp(1.4rem, 6vw, 2rem) !important; } /* Prevent text overflow */ h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } } /* ── 2. Typography — tablets (≤768px) ───────────────────────── */ @media (max-width: 768px) { .hero-h1 { font-size: clamp(2rem, 7vw, 3.5rem) !important; } .process-number { font-size: 4.5rem !important; } [style*="font-size:clamp(3.5"], [style*="font-size: clamp(3.5"] { font-size: clamp(2rem, 6vw, 3.5rem) !important; } [style*="font-size:clamp(2.8"], [style*="font-size: clamp(2.8"] { font-size: clamp(1.9rem, 5vw, 2.8rem) !important; } } /* ── 3. Section vertical spacing ────────────────────────────── */ @media (max-width: 768px) { .py-28 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .py-16 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .pt-16 { padding-top: 2rem !important; } .pb-16 { padding-bottom: 2rem !important; } .mb-20 { margin-bottom: 2.5rem !important; } .mb-16 { margin-bottom: 2rem !important; } .gap-16 { gap: 2rem !important; } .gap-20 { gap: 2rem !important; } .gap-12 { gap: 1.5rem !important; } .gap-10 { gap: 1.25rem !important; } } /* ── 4. Horizontal padding ───────────────────────────────────── */ @media (max-width: 640px) { .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .max-w-7xl.mx-auto { padding-left: 1rem; padding-right: 1rem; } } /* ── 5. Hero sections — inline padding-top:8rem etc. ────────── */ @media (max-width: 768px) { /* Targets the hero sections on service + contact pages */ [style*="padding-top:8rem"], [style*="padding-top: 8rem"] { padding-top: 5rem !important; } [style*="padding-top:10rem"], [style*="padding-top: 10rem"] { padding-top: 5.5rem !important; } [style*="padding-bottom:6rem"], [style*="padding-bottom: 6rem"] { padding-bottom: 3rem !important; } [style*="padding-bottom:4rem"], [style*="padding-bottom: 4rem"] { padding-bottom: 2.5rem !important; } /* min-height: 100vh hero on homepage */ section[style*="min-height:100vh"], section[style*="min-height: 100vh"] { min-height: unset !important; padding-top: 5rem !important; padding-bottom: 3rem !important; } } /* ── 6. Buttons ──────────────────────────────────────────────── */ @media (max-width: 480px) { .btn-primary, .btn-ghost { width: 100% !important; justify-content: center !important; padding: 0.875rem 1.25rem !important; } .flex.flex-wrap.gap-4 { gap: 0.625rem !important; } } /* ── 7. Hero flex: stack content on tablet ───────────────────── */ @media (max-width: 1024px) { /* The homepage hero is a flex row — make it a column on tablet */ .flex.items-center.gap-12, .flex.items-center.gap-20 { flex-direction: column !important; align-items: flex-start !important; gap: 2rem !important; } /* Hero text takes full width once SVG viz is hidden */ .flex.items-center.gap-12 > .flex-1, .flex.items-center.gap-20 > .flex-1 { min-width: 100%; } } /* ── 8. Stats strip ──────────────────────────────────────────── */ @media (max-width: 480px) { .stats-strip .grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { /* Stats row inside hero (dividers) */ .flex.gap-8.mt-12 { gap: 1rem !important; flex-wrap: wrap !important; } } /* ── 9. Grids — tablet overrides ────────────────────────────── */ @media (max-width: 768px) { /* Anything still 2-col at 768 should go 1-col on phones */ .grid.grid-cols-2:not([class*="md:"]) { grid-template-columns: 1fr !important; } /* 3-col partner/industry grids → 2-col on tablet */ .grid.grid-cols-2.md\:grid-cols-3, .grid.grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { /* Force single column on small phones */ .grid.grid-cols-2.md\:grid-cols-3 { grid-template-columns: 1fr !important; } } /* ── 10. Contact page ────────────────────────────────────────── */ @media (max-width: 1024px) { /* 12-column form/sidebar layout → single column */ .grid.grid-cols-1.lg\:grid-cols-12 { grid-template-columns: 1fr !important; } [class*="lg:col-span-"] { grid-column: 1 / -1 !important; } } /* ── 11. About page specifics ────────────────────────────────── */ @media (max-width: 768px) { /* "2 col" stat/number grid on about page */ .mt-10.grid.grid-cols-2.gap-4 { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 380px) { .mt-10.grid.grid-cols-2.gap-4 { grid-template-columns: 1fr !important; } } /* ── 12. Blog grid ───────────────────────────────────────────── */ @media (max-width: 640px) { #blogGrid { grid-template-columns: 1fr !important; } } @media (max-width: 768px) { /* Blog filter tabs — allow scrolling instead of wrapping awkwardly */ .filter-bar, [class*="filter"] > div { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; padding-bottom: 0.5rem; } } /* ── 13. Blog post page ──────────────────────────────────────── */ @media (max-width: 1024px) { #articleLayout { flex-direction: column !important; } #articleLayout > * { max-width: 100% !important; width: 100% !important; } } @media (max-width: 768px) { .article-body h2 { font-size: 1.2rem !important; } .article-body p { font-size: 0.9375rem !important; line-height: 1.75 !important; } #prevNextBtns { flex-direction: column !important; gap: 0.75rem !important; } } /* ── 14. Footer ──────────────────────────────────────────────── */ @media (max-width: 768px) { footer .grid.grid-cols-1.md\:grid-cols-12, footer .grid.md\:grid-cols-12 { grid-template-columns: 1fr !important; } footer [class*="md:col-span-"], footer [class*="md:col-start-"] { grid-column: 1 / -1 !important; grid-column-start: 1 !important; } /* Footer bottom bar */ footer .flex.flex-col.md\:flex-row { flex-direction: column !important; gap: 0.5rem; text-align: center; } } /* ── 15. Partner marquee ─────────────────────────────────────── */ @media (max-width: 480px) { .marquee-track { gap: 1.5rem !important; } .marquee-track span, .marquee-track .partner-name { font-size: 0.75rem !important; } } /* ── 16. Nav — mobile touch targets ─────────────────────────── */ /* Prevent the fixed nav bar itself from overflowing the viewport */ nav { max-width: 100vw; } @media (max-width: 768px) { #mobile-menu a, #mobileMenu a { min-height: 44px; display: flex !important; align-items: center; padding: 0.5rem 0.75rem !important; font-size: 0.9375rem; } /* Mobile menu CTA button */ #mobile-menu .btn-primary, #mobileMenu .btn-primary, #mobileMenu .nav-cta, #mobile-menu .nav-cta { justify-content: center !important; text-align: center !important; } } /* ── 17. Performance on mobile ───────────────────────────────── */ @media (max-width: 768px) { /* Slow down grid drift animation — less GPU usage */ .grid-bg { animation-duration: 60s !important; } /* Reduce orb blur — less compositing layers */ .orb { filter: blur(40px) !important; animation-duration: 14s !important; } } /* ── 18. Disable hover transforms on touch devices ───────────── */ @media (hover: none) { .service-card:hover, .industry-tile:hover, .blog-card:hover { transform: none !important; box-shadow: none !important; } .btn-primary:hover, .btn-ghost:hover { transform: none !important; box-shadow: none !important; } } /* ── 19. Safe-area insets (iPhone notch / Dynamic Island) ────── */ @supports (padding: max(0px)) { nav > .max-w-7xl { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } body { padding-bottom: env(safe-area-inset-bottom); } } /* ── 20. Tablet tweaks (769px – 1024px) ─────────────────────── */ @media (min-width: 769px) and (max-width: 1024px) { .hero-h1 { font-size: clamp(2.5rem, 5vw, 4rem) !important; } .py-28 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; } .py-24 { padding-top: 4rem !important; padding-bottom: 4rem !important; } /* Service/contact hero padding */ [style*="padding-top:8rem"], [style*="padding-top: 8rem"] { padding-top: 6rem !important; } }