/* ═══════════════════════════════════════════════════════════════ FADL MOBILE — iPhone / Instagram-ad optimisation Only touches things the existing CSS genuinely doesn't handle. ═══════════════════════════════════════════════════════════════ */ /* ── 1. CRITICAL: restore GSAP script blocks on mobile ───────── The shared CSS sets `.code-block { display:none }` at ≤767px, which silently kills every GSAP animation. Scripts are inside these divs, so hiding them stops them running. We make the container invisible but present so the scripts still execute. */ @media screen and (max-width: 767px) { .code-block { display: block !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } } /* ── 2. iPhone safe-area: notch / Dynamic Island / home bar ───── viewport-fit=cover is already set in . Without these insets content hides behind hardware chrome. */ @supports (padding: env(safe-area-inset-top)) { .nav-w { padding-top: env(safe-area-inset-top); } .sec.hero { /* hero already has padding-top from the shared CSS; we only add the safe-area on top of that */ padding-top: calc(6rem + env(safe-area-inset-top)); } .sec.footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important; } } /* ── 3. Use dvh for the hero on iPhone Safari ─────────────────── svh/100vh both include Safari's collapsible address bar, making the hero too tall on first load from an Instagram in-app browser. dvh updates as the browser chrome collapses. */ @media screen and (max-width: 767px) { .sec.hero { height: 100dvh; min-height: 100dvh; } } /* ── 4. Tap targets: only the elements that are actually too small. DO NOT apply min-height globally — it breaks the city toggle. */ @media screen and (max-width: 767px) { /* Primary CTA buttons only */ .btn-link, .btn-link2 { touch-action: manipulation; /* removes 300ms tap delay */ } /* City toggle options already have sufficient area via the grid; just ensure touch-action so they respond instantly */ .city-toggle-opt { touch-action: manipulation; } /* Footer navigation links */ .link-li-w.footer { padding-top: 0.4rem; padding-bottom: 0.4rem; } } /* ── 5. Disable hover styles on touch devices ─────────────────── On iOS, :hover fires on tap and then sticks, leaving buttons in their hover colour until you tap elsewhere. */ @media (hover: none) { .btn-link:hover { background-color: var(--primary); color: var(--secondary); } .btn-link2:hover { background-color: var(--primary); color: var(--secondary); } .city-toggle-opt:hover { opacity: 1; } } /* ── 6. Prevent iOS callout / selection on interactive elements ─ */ @media screen and (max-width: 767px) { .btn-link, .btn-link2, .city-toggle-opt, .toggle-slider, .toggle-ball { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } } /* ── 7. Prevent horizontal scroll bleed ──────────────────────── The marquee / stripe overflow can cause a horizontal scrollbar on some iPhone models. Clip it at the body level. */ @media screen and (max-width: 767px) { body { overflow-x: hidden; } } /* ── 8. Price section scroll distance ────────────────────────── Desktop uses 400svh so the sky animation has room to breathe. On mobile that's a very long dead-scroll before reaching the insurance slider. The timeline has "Pris?" animating in first (0–30% of scroll), then the sky covers it (30–100%). We need enough height that "Pris?" is readable before being covered, but not so much that the section feels endless. The ScrollTrigger end is also tightened to "bottom bottom" on mobile (in index.html) removing the 100vh overshoot, so the animation finishes right as the section bottom hits the viewport. */ @media screen and (max-width: 767px) { .sec.scrolltrigger-sec { height: 110svh; } } /* ── 9. Marquee readable size on mobile ──────────────────── The city name scrollers are decorative at 50vw (single words, meant to fill the screen). "Hvorfor vente?" is 14 characters and needs to be legible as a phrase. 18vw shows ~3 characters at a time and is comfortably readable as the marquee scrolls. */ @media screen and (max-width: 767px) { .comp.scroller2 .scroller-text { font-size: 18vw; } } @media screen and (max-width: 479px) { .comp.scroller2 .scroller-text { font-size: 18vw; } } /* ── 10. Hero title: clear of the city toggle on mobile ───────── .comp.toggle-w sits at top:-3rem (767px) / top:-1.5rem (479px), pulling it up over the h1 below it. Adding margin-bottom to the title pushes it up just enough to avoid the overlap. */ @media screen and (max-width: 767px) { .font-c.hero-text { margin-bottom: 2rem; } } @media screen and (max-width: 479px) { .font-c.hero-text { margin-bottom: 1rem; } } /* -- 11. Section selector: visible on mobile -------------------- The shared CSS hides .overflow-w at 767px entirely. On mobile the nav JS handles show/hide on scroll direction. We also tighten the sizing so it fits on small screens. */ @media screen and (max-width: 767px) { .overflow-w { display: block; padding: 0.5rem 1rem 1rem; top: 0; } .sub-nav-bg { display: inline-flex; margin: 0 auto; } .sub-nav-w { font-size: 11px; gap: 0.1rem; } .link-li-w { padding: 0.2rem 0.5rem; } } /* -- 12. Forsikring slide images: smaller on mobile ------------- Desktop: .comp .dual-img-img is 180x120px, with .slide-img .dual-img adding scale(1.5) on top (~270x180px effective). On mobile the slide is narrower so we reduce both. */ @media screen and (max-width: 767px) { .slide-img .dual-img { transform: scale(1); } .comp .dual-img-img { width: 110px; height: 75px; } } /* ── 13. Restore iOS/Android native momentum scrolling ───────── overflow-x:hidden on body can suppress WebKit's kinetic scroll engine. We re-enable momentum on the html/body axis and give the browser an unambiguous touch-action so it keeps the natural flick-and-coast feel on Safari and Chrome for iOS. */ @media (hover: none) and (pointer: coarse) { html { overflow-y: auto; -webkit-overflow-scrolling: touch; /* belt-and-suspenders for older iOS */ overscroll-behavior-y: auto; /* allow natural bounce at page edges */ } body { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; /* tells browser: vertical scroll only, no interception */ } }