/* ------------------------------------------------------------------ mobile.css — shared phone / tablet / iOS polish for every page. Loaded last so it can correct the page's own rules. ------------------------------------------------------------------ */ /* Never let iOS silently enlarge text in landscape. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Nothing may push the page sideways on a phone. The clip lives on only — putting it on as well turns the page into a scroll container and quietly kills every position:sticky. */ html, body { max-width: 100%; } body { overflow-x: hidden; } img, video, canvas, iframe { max-width: 100%; } /* A vertical swipe that runs off the top/bottom of the page must not chain into the browser's own pull-to-refresh / back-swipe UI (Android Chrome especially) — that hand-off is what makes a page scroll feel like it "catches" right at the edges. The page itself keeps its native bounce. */ html, body { overscroll-behavior-y: contain; } /* No grey flash box when tapping on iOS. */ a, button, label, .pk, .dl, .rv { -webkit-tap-highlight-color: rgba(242, 109, 13, .14); } /* Swiping a horizontal strip must not trigger the browser's back gesture. */ .strip, .thumbs, .rt { overscroll-behavior-x: contain; } /* A vertical swipe that starts on a horizontal strip should still scroll the page, and the browser should not wait to find out. */ .strip, .thumbs, .rt { touch-action: pan-x pan-y; } /* Taps register straight away instead of after the 300ms double-tap wait. */ a, button, label, select, input, textarea, .pk, .dl, .rv { touch-action: manipulation; } /* Momentum scrolling for the scrollable strips. */ .strip, .rt, .thumbs, .grid, textarea, table { -webkit-overflow-scrolling: touch; } /* Wide tables scroll instead of stretching the page. */ @media (max-width: 820px) { table { display: block; overflow-x: auto; white-space: nowrap; } } /* ---- iOS: Safari zooms in whenever a focused field is under 16px ---- */ @media (max-width: 820px) { /* Covers fields with no type attribute too — those default to text. */ input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]), select, textarea, .rt, [contenteditable] { font-size: 16px !important; } } /* Consistent field rendering on iOS (no inner shadow, no rounded override). */ input, select, textarea, button { -webkit-appearance: none; appearance: none; border-radius: inherit; } input[type=checkbox], input[type=radio] { -webkit-appearance: auto; appearance: auto; } select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6485' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 34px; } /* ---- comfortable tap targets ---- */ @media (max-width: 820px) { .btn, button, a.btn, .pk, .dl, .nav-link, .pg, .tpl { min-height: 44px; } .btn, a.btn, button { padding-top: 12px; padding-bottom: 12px; } } /* ---- fixed bottom bars must clear the iPhone home indicator ---- */ .bar, .stick, .bottom { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } body { padding-bottom: env(safe-area-inset-bottom, 0px); } /* ---- full-height panels: 100vh is wrong on iOS Safari ---- */ @supports (height: 100dvh) { .full-height, body.centered { min-height: 100dvh; } } /* Landing pages run edge to edge — they space their own sections. */ body.flush { padding-left: 0 !important; padding-right: 0 !important; } /* ---- phone layout tweaks ---- */ @media (max-width: 640px) { body { padding-left: 14px; padding-right: 14px; } .hero h1 { font-size: clamp(23px, 7vw, 32px); } /* .u is the column (ring + label); only the ring itself is round. */ .cd .u .c { width: 54px; height: 54px; } .cd b { font-size: 17px; } .rv { flex: 0 0 82vw; } .thumbs { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } .top { gap: 10px; } .top h1 { font-size: 19px; } } /* Small print stays readable on a phone. */ @media (max-width: 640px) { .hint, .sub, .sz, .note, .trust, .lb-note { font-size: 12.5px; } .cd span, .tag { font-size: 11px; } } /* ---- tablets ---- */ @media (min-width: 641px) and (max-width: 1024px) { .wrap { padding-left: 6px; padding-right: 6px; } } /* ---- dashboard pages on a phone ---------------------------------- */ @media (max-width: 640px) { /* 24px all round is a lot of the screen on a phone. */ body:not(.flush) { padding-top: 16px; padding-bottom: 22px; } /* Deep shadows are the most expensive thing to repaint while scrolling. */ .panel, .stat, .it, .fsec, .pk-row, .logo-box { box-shadow: 0 4px 14px rgba(60, 40, 90, .06); } /* Action buttons share the row instead of overflowing it. */ .actions .btn, .actions button, .lb-row .btn, .lb-row a.btn { flex: 1 1 auto; } .lb-row input { min-width: 100%; } } /* The media library can hold hundreds of thumbnails; tiles that are still off screen are not painted until they are needed. */ .it { content-visibility: auto; contain-intrinsic-size: auto 190px; } /* Smooth jumps when a link points further down the same page. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Respect users who ask for less motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }