/* ═══════════════════════════════════════════════════════════════════════════ RivCut app surfaces — shared mobile/tablet fixes Loaded on: quote, checkout, quotes, account, signup, credit-application AFTER css/rc-shell.css. Those six pages carry `class="rc-app"` on . Cascade: see the header of css/rc-shell.css. Overrides of existing classes are written `body.rc-app .x { ... !important }` — specificity (0,2,1), which beats css/mobile.css (0,1,0) and css/quote.css's `.page-container{padding-top:40px !important}` (0,1,0) alike. New primitives use the .rc-* namespace and need no !important. ═══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── 1. iOS input zoom — the single highest-impact fix on these six pages Safari auto-zooms on focus for any field under 16px and never zooms back, leaving the rest of the flow off-centre and horizontally scrolled. Current sizes: 13px on quote.css (.qty-input, .coupon-input, .config-textarea) and across all 9 sections of credit-application.html; 14px on checkout, quotes, account and signup. Fixed with font-size, NOT `maximum-scale=1` — disabling pinch-zoom breaks WCAG 1.4.4 and is hostile to low-vision users. ───────────────────────────────────────────────────────────────────────── */ @media screen and (max-width: 1023px) { body.rc-app input:not([type='checkbox']):not([type='radio']), body.rc-app select, body.rc-app textarea { font-size: 16px !important; } /* Only ever raise, never lower. credit-application.html:621 renders the typed electronic signature at 22px in a script face; forcing 16px on it would shrink a legally binding signature to look like an ordinary field. Anything already >=16px cannot trigger the iOS zoom, so leave it alone. Keyed on the ID deliberately. The site-wide anti-zoom rule in css/rc-shell.css is body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]) and :not() carries its argument's specificity, so that selector is (0,5,2) — it outranks `body.rc-app .sig-typed-wrap input` at (0,2,2), and specificity is compared before source order. #sigTyped is (1,1,1), which wins on the ID column. */ body.rc-app #sigTyped, body.rc-app .sig-typed-wrap input#sigTyped { font-size: 22px !important; } } /* ───────────────────────────────────────────────────────────────────────── 2. Viewport-height units Every one of these pages gates first paint with a 100vh rule, which overflows under iOS Safari's collapsing URL bar. 100vh is kept immediately above each 100dvh as the fallback for pre-15.4 Safari. ───────────────────────────────────────────────────────────────────────── */ @media screen and (max-width: 1023px) { body.rc-app:not(.auth-ready) { height: 100vh; height: 100dvh; } /* MUST stay inside the media query. signup.html's own .auth-wrapper (signup.html:35-41) has flex:1 and NO min-height, so an unscoped rule here grew the wrapper to the full viewport on desktop, re-centring the auth card lower and adding page scroll that did not exist. */ body.rc-app .auth-gate, body.rc-app .auth-wrapper { min-height: 100vh; min-height: 100dvh; } } /* ───────────────────────────────────────────────────────────────────────── 3. Layout chrome ───────────────────────────────────────────────────────────────────────── */ @media screen and (max-width: 1023px) { /* The nav offset itself is handled globally in rc-shell.css; these pages additionally need their content wells to clear it and the tab bar. */ body.rc-app .page-wrap, body.rc-app .page-container { padding-top: calc(24px + var(--rc-promo-h, 0px) + 56px) !important; padding-left: 16px !important; padding-right: 16px !important; padding-bottom: calc(24px + var(--rc-cta-h, 0px) + var(--rc-tabbar-h, 0px)) !important; max-width: 100% !important; } /* rc-shell.css already adds body padding for the tab bar. On app pages the sticky CTA sits above it and the content well owns the clearance, so the body-level padding would double-count. */ body.rc-app { padding-bottom: 0 !important; } /* ...but the site footer is a SIBLING of .page-wrap / .page-container, not a child, so it inherits none of that clearance. Without this the sticky CTA permanently covers the last rows of the footer, and on quote.html those rows are the legal links: Privacy Policy, Terms of Sale, Cookie Policy, Do Not Sell My Personal Information, Accessibility, Cookie Preferences. They sit at the very bottom of the document, so no amount of scrolling frees them. Give the footer its own clearance. */ body.rc-app .footer { padding-bottom: calc(24px + var(--rc-cta-h, 0px) + var(--rc-tabbar-h, 0px)) !important; } } /* ───────────────────────────────────────────────────────────────────────── 4. Touch targets WCAG 2.5.8 asks 24px; Apple and Material both ask 44/48. The prototype uses 44 for segments and 48 for primary actions, so we match the prototype. ───────────────────────────────────────────────────────────────────────── */ @media screen and (max-width: 1023px) { body.rc-app .btn-sm, body.rc-app .btn-next, body.rc-app .btn-save, body.rc-app .btn-cancel, body.rc-app .btn-add, body.rc-app .tab-btn, body.rc-app .link-btn, body.rc-app .pagination-btns button { min-height: 44px !important; } body.rc-app .btn-submit, body.rc-app .btn-resume, body.rc-app .pc-continue { min-height: 48px !important; width: 100% !important; } /* Radio and checkbox rows: the control is 16px, so the ROW carries the target rather than inflating the control out of proportion. */ body.rc-app .radio-group label, body.rc-app .checkbox-group label, body.rc-app .check-label { min-height: 44px !important; display: flex !important; align-items: center !important; gap: 10px !important; } body.rc-app input[type='radio'], body.rc-app input[type='checkbox'] { width: 20px !important; height: 20px !important; flex: none !important; } } /* Invisible 44x44 hit area for small toggles, with zero visual change. account.html's .toggle-switch is 44x24 — wide enough, 20px too short. MUST use ::before. account.html:145 already uses ::after AS THE VISIBLE KNOB (`top:2px; left:2px; width:20px; height:20px; background:#fff; radius:50%`). Adding `inset` there overrides its top/left, over-constrains the box, and throws the white knob 4px outside the pill and 10px above it. */ @media screen and (max-width: 1023px) { body.rc-app .toggle-switch { position: relative !important; } body.rc-app .toggle-switch::before { content: ''; position: absolute; inset: -10px -4px; /* purely a hit target */ background: none; border: 0; } } /* ───────────────────────────────────────────────────────────────────────── 5. Tables checkout, quotes and account all render real s that overflow a 358px card. Let them scroll inside their own container rather than pushing the page sideways. ───────────────────────────────────────────────────────────────────────── */ @media screen and (max-width: 1023px) { body.rc-app .payment-table, body.rc-app .parts-table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; white-space: nowrap !important; max-width: 100% !important; } } /* ───────────────────────────────────────────────────────────────────────── 6. Sticky glass CTA bar (prototype lines 526, 921, 1008) Sits directly above the tab bar. Publishes its own height into --rc-cta-h via js so the content well can clear it. ───────────────────────────────────────────────────────────────────────── */ .rc-cta-bar { position: fixed; left: 0; right: 0; bottom: var(--rc-tabbar-h, 0px); z-index: 994; /* below .rc-tabbar (995) */ display: none; flex-direction: column; gap: 9px; padding: 11px 16px 12px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--rc-line, #DFE3E8); box-shadow: 0 -6px 18px rgba(11, 31, 59, .06); } @media screen and (max-width: 1023px) { .rc-cta-bar.is-on { display: flex; } } .rc-cta-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: 'IBM Plex Sans', system-ui, sans-serif; } .rc-cta-label { font-size: 12px; font-weight: 500; color: var(--gray-500, #6E7580); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-cta-total { font-family: 'Geist', system-ui, sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: var(--dark, #0B1F3B); flex: none; } .rc-cta-btn { display: block; width: 100%; min-height: 48px; padding: 14px 16px; border: 0; border-radius: 13px; background: var(--blue, #0d4fb4); color: #fff; font-family: 'Geist', system-ui, sans-serif; font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; box-shadow: 0 8px 22px rgba(13, 79, 180, .25); transition: background .18s var(--rc-ease, ease), opacity .18s var(--rc-ease, ease); } .rc-cta-btn:active { opacity: .82; } /* Amber = blocked by a gate (unreviewed tabs, drawing still being read). The button stays TAPPABLE so it can explain itself and scroll to the fix. */ .rc-cta-btn.is-blocked { background: #d97706; box-shadow: 0 8px 22px rgba(217, 119, 6, .25); } .rc-cta-note { font-size: 11.5px; font-weight: 500; color: #92400e; text-align: center; margin-top: -3px; } /* ───────────────────────────────────────────────────────────────────────── 7. Bottom sheet (prototype lines 1369, 1386, 1407) Used for the finish picker, which today is an absolutely-positioned menu clipped by .part-card{overflow:hidden}. position:fixed escapes the clip. ───────────────────────────────────────────────────────────────────────── */ .rc-scrim { position: fixed; inset: 0; z-index: 1060; background: rgba(11, 31, 59, .45); animation: rc-in .2s var(--rc-ease, ease); } .rc-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1061; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #fff; border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgba(11, 31, 59, .2); padding: 10px 12px max(16px, env(safe-area-inset-bottom, 0px)); animation: rc-sheet .3s var(--rc-ease, ease); } .rc-sheet::before { content: ''; display: block; width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: var(--rc-line, #DFE3E8); } /* ───────────────────────────────────────────────────────────────────────── 8. Toasts and modals ───────────────────────────────────────────────────────────────────────── */ @media screen and (max-width: 1023px) { /* account.html's .toast is bottom:24px right:24px — behind the tab bar. */ body.rc-app .toast { left: 16px !important; right: 16px !important; bottom: calc(16px + var(--rc-tabbar-h, 0px) + var(--rc-cta-h, 0px)) !important; width: auto !important; text-align: center !important; } body.rc-app .modal-card { padding: 32px 20px !important; width: calc(100% - 32px) !important; max-width: none !important; max-height: 80vh !important; max-height: 80dvh !important; overflow-y: auto !important; } } /* ───────────────────────────────────────────────────────────────────────── 9. quotes.html — the saved-quotes list quotes.html:203 collapses the six-column row to `grid-template-columns:1fr`, which turns a table row into six unlabeled stacked values: id, date, parts, price, status, actions. Nothing says which number is which. Lay it out as a card instead, using named areas keyed off child order. ───────────────────────────────────────────────────────────────────────── */ @media screen and (max-width: 1023px) { body.rc-app .quote-card-main { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: 'id price' 'meta status' 'act act' !important; gap: 6px 12px !important; padding: 16px !important; align-items: center !important; } body.rc-app .quote-card-main > :nth-child(1) { grid-area: id !important; } body.rc-app .quote-card-main > :nth-child(2) { grid-area: meta !important; } /* Child 3 (.quote-parts) is already shown in .quote-id-sub at quotes.html:568. */ body.rc-app .quote-card-main > :nth-child(3) { display: none !important; } body.rc-app .quote-card-main > :nth-child(4) { grid-area: price !important; justify-self: end !important; font-size: 17px !important; } body.rc-app .quote-card-main > :nth-child(5) { grid-area: status !important; justify-self: end !important; } body.rc-app .quote-actions { grid-area: act !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 6px !important; } body.rc-app .quote-actions .btn-sm { width: 100% !important; min-height: 44px !important; } /* Three 96px-tall full-width stat cards eat the entire first screen. */ body.rc-app .stats-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } body.rc-app .stat-card { padding: 12px !important; } body.rc-app .stat-value { font-size: 20px !important; } body.rc-app .stat-label { font-size: 11px !important; } body.rc-app .filter-bar { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } body.rc-app .search-wrap { grid-column: 1 / -1 !important; } body.rc-app .pagination-btns { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; } body.rc-app .resume-banner.visible { flex-direction: column !important; align-items: stretch !important; } } /* ───────────────────────────────────────────────────────────────────────── 10. Forms — shared shapes across checkout / signup / credit-application ───────────────────────────────────────────────────────────────────────── */ @media screen and (max-width: 1023px) { body.rc-app .form-row, body.rc-app .card-input-row { flex-direction: column !important; gap: 0 !important; } body.rc-app .btn-next { float: none !important; width: 100% !important; margin-top: 12px !important; } body.rc-app .btn-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } /* Nested scrollers must not chain their scroll to the page. */ body.rc-app .terms-scroll { max-height: 45vh !important; max-height: 45dvh !important; overscroll-behavior: contain !important; } /* Signature pad: without touch-action the browser scrolls the page instead of drawing, and the handler is left fighting it with preventDefault(). Height is set inline by resizeCanvas() so the bitmap and the box agree. */ body.rc-app #sigCanvas { touch-action: none !important; -webkit-user-select: none !important; user-select: none !important; } body.rc-app .clause-header { min-height: 48px !important; } body.rc-app .sig-pad-tab { min-height: 44px !important; } } /* ───────────────────────────────────────────────────────────────────────── 11. signup.html The OTP and stacked-form-row rules only apply below 500px (signup.html:433, :435), so at 501-1023px they render at desktop size. 6 x 44 + 5 x 8 = 304px, which fits inside the card at 375px. ───────────────────────────────────────────────────────────────────────── */ @media screen and (max-width: 1023px) { body.rc-app .otp-inputs { display: flex !important; gap: 8px !important; justify-content: center !important; } body.rc-app .otp-inputs input { width: 44px !important; height: 52px !important; font-size: 20px !important; text-align: center !important; padding: 0 !important; } body.rc-app .auth-card { padding: 24px 20px !important; border-radius: 20px !important; } body.rc-app .auth-wrapper { padding: 24px 16px calc(24px + max(0px, env(safe-area-inset-bottom, 0px))) !important; } }