/* ========================================================================== kaiops.tech — responsive layer Loaded on every page via in . Uses !important to override the page's inline styles at breakpoints. Breakpoints: <=1024 tablet <=900 small tablet <=640/<=560 phone ========================================================================== */ /* never allow absolutely-positioned decor to create horizontal scroll */ html, body { max-width: 100%; overflow-x: hidden; } * { -webkit-tap-highlight-color: transparent; } /* -------------------------------------------------------------------------- NAV — the fixed pill holds 7 links + a CTA; it overflows narrow screens. Make it a horizontally-scrollable pill (no JS, all links stay reachable). -------------------------------------------------------------------------- */ @media (max-width: 900px) { nav { max-width: calc(100vw - 20px) !important; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } nav::-webkit-scrollbar { display: none; } nav > a { flex: 0 0 auto !important; } } @media (max-width: 560px) { nav { top: 12px !important; gap: 2px !important; padding: 6px !important; } nav > a { padding: 8px 12px !important; font-size: 12.5px !important; } nav > a:first-child { width: 32px !important; height: 32px !important; font-size: 16px !important; } } /* -------------------------------------------------------------------------- SECTION — trim the generous 44px side padding on phones. (Only horizontal padding is overridden; vertical rhythm is preserved.) -------------------------------------------------------------------------- */ @media (max-width: 640px) { section { padding-left: 18px !important; padding-right: 18px !important; } } /* -------------------------------------------------------------------------- HERO -------------------------------------------------------------------------- */ /* keep the 3D sculpture strictly behind the copy so text is always legible */ .hero-canvas { z-index: 0 !important; } .hero-copy { position: relative; z-index: 2; } /* The floating ROAS / Revenue-growth chips overlap the headline once the viewport is narrow enough for the text column to reach them. Hide them below desktop — the identical numbers live in the proof strip just below. */ @media (max-width: 1024px) { .hero-chip { display: none !important; } } /* tighten hero inner padding as the screen shrinks */ @media (max-width: 900px) { .hero-inner { padding: 104px 22px 36px !important; } } @media (max-width: 560px) { .hero-inner { padding: 96px 18px 32px !important; } .hero-drag-hint { display: none !important; } /* clutter on phones */ } /* -------------------------------------------------------------------------- GENERIC GRID SAFETY — make any 2-up inner grids stack on the smallest screens so stat tiles / columns never get crushed. -------------------------------------------------------------------------- */ @media (max-width: 420px) { [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } }