/* Sage Homes — global responsive overrides. * Loaded on every page via the tag injection. * Strategy: keep desktop layout untouched, narrow as needed for tablet (≤1024px) * and phone (≤768px). Most overrides use !important because page templates * have a lot of inline styles. */ /* iPhone/iOS prevents zoom on input focus when font-size ≥ 16px */ input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="search"], input[type="tel"], input[type="password"], textarea, select { font-size: 16px; } /* Horizontal-scroll wrapper utility — apply to wide tables */ .mobile-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ===================== TABLET (iPad portrait & smaller) ===================== */ @media (max-width: 1024px) { body { font-size: 11pt; } /* Nav — keep visible, trim padding */ .topnav { padding: 0 14px !important; } .topnav .brand { padding: 6px 14px 6px 0 !important; } .topnav .brand img { height: 42px !important; } .topnav .brand span { font-size: 11pt !important; letter-spacing: 1.5px !important; } .topnav .tab { padding: 12px 14px !important; font-size: 10.5pt !important; } .topnav .user { padding: 0 4px 0 10px !important; } /* Page headers */ header { padding: 18px 18px 14px !important; } header h1 { font-size: 17pt !important; } /* Main containers */ main { padding: 0 14px !important; } .pane { padding: 14px 16px !important; } /* Wide tables: allow horizontal scroll inside their parents */ .pane > table, .pane > .table-wrap, table.gantt, table.flat { max-width: 100%; } table.gantt { font-size: 9pt !important; } /* Grid layouts collapse to fewer columns */ .stats { grid-template-columns: repeat(2, 1fr) !important; } .ba-grid { grid-template-columns: 1fr !important; } /* Buttons / tap targets */ button, .btn, .btn-primary, .btn-secondary, input[type="submit"], input[type="button"] { min-height: 40px; padding: 10px 16px; } } /* ===================== PHONE (≤ 768px) ===================== */ @media (max-width: 768px) { body { font-size: 11pt; } /* Topnav: scroll horizontally, hide "SAGE HOMES" wordmark, hide username */ .topnav { padding: 0 8px !important; } .topnav .brand { padding: 6px 10px 6px 0 !important; border-right: none !important; margin-right: 4px !important; } .topnav .brand img { height: 36px !important; } .topnav .brand span { display: none !important; } .topnav .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .topnav .tabs::-webkit-scrollbar { display: none; } .topnav .tab { padding: 12px 12px !important; font-size: 10.5pt !important; white-space: nowrap; } .topnav .user { padding: 0 4px 0 6px !important; } .topnav .user .who { display: none !important; } /* Big headers */ header { padding: 14px 14px 10px !important; } header h1 { font-size: 16pt !important; } header .sub, header .kicker { font-size: 9.5pt !important; } /* Floating action links (right side) — let them wrap below the title */ header a.upload, header a.edit, header a.back { float: none !important; display: inline-block; margin: 6px 6px 0 0 !important; } /* Main + panes */ main { padding: 0 10px !important; margin-top: 12px !important; } .pane { padding: 12px 14px !important; } h2 { font-size: 13pt !important; } /* Tables — force horizontal scroll for anything table-like */ .pane > table, .pane > div > table, table.gantt, table.flat { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } table.gantt { font-size: 8.5pt !important; } table.gantt thead th, table.gantt td.lot, table.gantt td.close { font-size: 8pt !important; } /* Stats grids: single column on phone */ .stats { grid-template-columns: 1fr !important; gap: 8px !important; } .stats .card .val { font-size: 18pt !important; } /* Tab strips */ .tabs { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; } .tabs a { white-space: nowrap; padding: 10px 14px !important; font-size: 10pt !important; } /* Forms */ input, select, textarea, button, .btn, .btn-primary, .btn-secondary { min-height: 44px; box-sizing: border-box; } input[type="checkbox"], input[type="radio"] { min-height: auto; min-width: auto; transform: scale(1.2); } label { font-size: 11pt; } /* Cards / grids generic collapse */ [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr 1fr !important; } [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } /* Sidebars stack below content */ .sidebar, aside, .lot-sidebar { width: 100% !important; max-width: none !important; } } /* ===================== SMALL PHONE (≤ 480px) ===================== */ @media (max-width: 480px) { .topnav .tab { padding: 10px 10px !important; font-size: 10pt !important; } header h1 { font-size: 14.5pt !important; } .pane { padding: 10px 12px !important; } .stats .card { padding: 10px 12px !important; } [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; } } /* ===================== TOUCH ADJUSTMENTS ===================== */ @media (hover: none) and (pointer: coarse) { /* No hover affordances; make tap targets generous */ a.tab, button, .btn, .btn-primary, .btn-secondary { -webkit-tap-highlight-color: rgba(116,121,101,0.25); } /* Larger select arrows */ select { padding-right: 32px; } }