/* ============================================================ SellSideTrades mobile upgrade. Loaded last in so it wins over each page's own styles. The sticky action bar markup lives at the end of each . ============================================================ */ /* ---------- Mobile SEO and usability fixes ---------- */ /* 1. THE BIG ONE: iOS Safari zooms the whole page when a user taps any input with a font under 16px. The valuation form is multi-step, so this fires repeatedly and users lose their place. This kills it. */ @media (max-width: 767px) { input, select, textarea { font-size: 16px !important; } /* 2. Apple and Google both want tap targets at least 44x48px. Applies to every button and link styled as a button. */ button, .btn, a[class*="button"], input[type="submit"] { min-height: 48px; padding-top: 12px; padding-bottom: 12px; } /* 3. Form fields full width on phones, no horizontal scrolling */ input, select, textarea { width: 100%; box-sizing: border-box; } /* 4. Body text never below 16px on mobile. Google's mobile usability report flags "text too small to read." */ body { font-size: 16px; line-height: 1.55; } /* 5. Breathing room above the sticky bar */ body { padding-bottom: 76px; } } /* 6. Respect iPhone notch and gesture areas (Dynamic Island models) */ @supports (padding: env(safe-area-inset-bottom)) { .sst-mobile-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); } } /* ---------- Sticky mobile action bar (styles) ---------- */ .sst-mobile-bar { display: none; } @media (max-width: 767px) { .sst-mobile-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; gap: 10px; padding: 10px 12px; background: #0B1F3A; box-shadow: 0 -4px 16px rgba(0,0,0,0.25); } .sst-mobile-bar a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 8px; font-weight: 700; font-size: 16px; text-decoration: none; } .sst-bar-value { background: #D9A521; color: #0B1F3A; } .sst-bar-call { background: transparent; color: #FFFFFF; border: 2px solid #D9A521; } }