/* ───────────────────────────────────────────────────────────── Hunial · cross-device layer Loaded last on every page. Fixes the behaviour that differs between desktop devtools emulation and real mobile browsers (iOS Safari, Chrome/Samsung on Android, in-app webviews). ───────────────────────────────────────────────────────────── */ /* ── 1. Text scaling ── iOS/Android inflate text on their own unless this is pinned. That is the main reason a page looks different on a real phone. */ html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* ── 2. No sideways drag, ever ── Set on the root only: putting overflow-x on turns body into a scroll container and breaks `position: sticky` headers. */ html { overflow-x: hidden; overscroll-behavior-x: none; } body { max-width: 100%; } img, svg, video, canvas, iframe { max-width: 100%; } /* ── 3. iOS auto-zoom on focus ── Safari scales the whole document when a focused control is under 16px and leaves the page zoomed (and pannable) after blur. */ @media (max-width: 900px) { input, select, textarea { font-size: 16px; } } /* ── 4. Touch behaviour ── */ @media (hover: none), (pointer: coarse) { a, button, [role='button'], summary, label { touch-action: manipulation; } /* A tap must not leave a lifted button behind */ .product-btn:hover, .account-feedback-btn:hover, .auth-submit:hover, .auth-google:hover, .hf-submit:hover, .btn-primary:hover:not(:disabled) { transform: none; } } /* ── 5. Comfortable hit areas on phones ── */ @media (max-width: 767px) { .nav-cta, .nav-logout, .nav-back, .lang-switch-trigger, .product-btn, .auth-submit, .auth-google, .hf-submit, .account-feedback-btn, .account-cta, .hero-cta, .final-cta { min-height: 44px; } .lang-switch-trigger, .nav-cta, .nav-logout { display: inline-flex; align-items: center; justify-content: center; } } /* ── 6. Landscape notch / rounded corners ── env() only resolves once the page opts into viewport-fit=cover. */ @media (max-width: 900px) and (orientation: landscape) { nav, .container, .hero-inner, .problem-inner, .solution-inner, .traj-inner, .account-inner, .final-inner, .auth-page, .dash, footer { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } } /* ── 7. Long unbreakable strings (emails, names, URLs) ── A single long word is the usual source of a horizontal overflow. */ #welcome-title, #profile-name, #profile-email, .profile-email, .plan-name, .hf-dialog h2, .auth-intro h1, .welcome h1 { overflow-wrap: anywhere; word-break: break-word; } /* ── 8. Language switcher: bottom sheet on phones ── */ @media (max-width: 767px) { .lang-switch-panel { -webkit-overflow-scrolling: touch; box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.55); } .lang-switch-option { min-height: 48px; font-size: 15px; padding: 12px 14px; } .lang-switch-option-code { font-size: 11px; } } /* ── 9. Feedback modal on phones ── */ @media (max-width: 767px) { .hf-modal { padding: 0; align-items: flex-end; } .hf-dialog { width: 100%; max-width: 100%; max-height: min(92vh, 92dvh); border-radius: 24px 24px 0 0; padding: 26px 20px max(22px, env(safe-area-inset-bottom)); transform: translateY(100%) scale(1); } .hf-modal.is-open .hf-dialog { transform: translateY(0) scale(1); } .hf-close { width: 40px; height: 40px; top: 12px; right: 12px; } .hf-field textarea { font-size: 16px; min-height: 132px; } .hf-cat { min-height: 38px; font-size: 12px; padding: 8px 13px; } } /* ── 10. Motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }