/* ========================================================================== Mobile -------------------------------------------------------------------------- Replaces the old mobile-fix.css, which styled a menu system whose markup no longer exists and whose one live rule hid every direct child of under 768px unless it appeared on a hardcoded whitelist. The rebuilt header is .site-header, which was not on that list — so phones got no logo and no menu at all. Everything here is scoped to a selector that exists today, and nothing uses the blanket-hide pattern. Square throughout: squared.css zeroes radius globally, so no rule sets one. ========================================================================== */ /* -------------------------------------------------------------------------- Bottom tab bar — signed-in pages only, phones only -------------------------------------------------------------------------- */ .app-tabbar { display: none; } @media (max-width: 768px) { .app-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--ls-surface, #fff); border-top: 1px solid var(--ls-border, #e5e7eb); /* Clears the iOS home indicator so the last row is not half-covered. */ padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -2px 12px rgba(0, 0, 0, .08); } .app-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; /* 56px keeps every tab at or above the 44px minimum touch target. */ min-height: 56px; padding: 8px 2px; text-decoration: none; color: var(--ls-text-muted, #6b7280); font-size: .68rem; line-height: 1; min-width: 0; -webkit-tap-highlight-color: transparent; } .app-tab-icon { position: relative; font-size: 1.05rem; line-height: 1; } .app-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-tab.is-active { color: var(--ls-brand-600, #4f46e5); /* An inset bar rather than a border, so the tab does not shift by 2px when it becomes active. */ box-shadow: inset 0 2px 0 0 var(--ls-brand-600, #4f46e5); } .app-tab-badge { position: absolute; top: -6px; left: 60%; min-width: 15px; padding: 1px 3px; background: #dc2626; color: #fff; font-size: .58rem; font-weight: 700; line-height: 1.3; text-align: center; } /* Reserve the bar's height so the last element on the page is reachable. Applied to the dashboard shell rather than , so public pages — which have no tab bar — get no phantom gap above the footer. */ body:has(.app-tabbar) .dashboard-main, body:has(.app-tabbar) .dashboard-content, body:has(.app-tabbar) .main-content { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* The assistant launcher sits bottom-right and would land on the tab bar. */ body:has(.app-tabbar) .ls-assistant { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } /* :has() is unsupported on older Android WebViews, so those get the padding unconditionally on signed-in pages via a class the chrome already carries. */ @supports not selector(:has(*)) { @media (max-width: 768px) { .dashboard-main, .dashboard-content { padding-bottom: 84px; } } } /* -------------------------------------------------------------------------- Card action rows -------------------------------------------------------------------------- The two-button rows added to the services and product listings were laying out at 26px and 18px tall on a phone, clipping their own labels. The cause is a global `.button { line-height: 1 }` combined with flex children that were free to shrink below their content height. Pinning a min-height and stopping the shrink fixes both rows without touching the global button rule. -------------------------------------------------------------------------- */ @media (max-width: 768px) { .service-actions, .loan-product-actions { flex-direction: column; align-items: stretch; gap: 10px; } .service-actions .button, .loan-product-actions .button { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 12px 16px; line-height: 1.2; white-space: normal; overflow: visible; } } /* -------------------------------------------------------------------------- Gradient CTA bands -------------------------------------------------------------------------- The "Ready to Help You Succeed" band paints a photo behind a purple gradient. On a phone the stat labels under each figure were rendering at roughly 1.6:1 against that photo — legible on a desktop mock, not on a handset in daylight. The overlay is darkened and the labels are given their own weight so the contrast no longer depends on which part of the image sits behind them. -------------------------------------------------------------------------- */ @media (max-width: 768px) { .cta-section, .support-cta, .help-cta-section { background-attachment: scroll; } .cta-section .stat-label, .support-cta .stat-label, .cta-stats .stat-label { color: rgba(255, 255, 255, .92); font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); } .cta-section .stat-number, .support-cta .stat-number, .cta-stats .stat-number { text-shadow: 0 1px 3px rgba(0, 0, 0, .4); } } /* -------------------------------------------------------------------------- Overflow guards -------------------------------------------------------------------------- Several sections were pushing the document wider than the viewport, which is what produced the sideways drift in the screenshots: a horizontally scrolling shifts every fixed-position element with it. -------------------------------------------------------------------------- */ @media (max-width: 768px) { html, body { overflow-x: hidden; max-width: 100%; } /* Wide content scrolls inside its own box instead of widening the page. */ .table-responsive, .data-table-wrap, .info-facts { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Long unbroken strings (reference codes, emails) were the other cause. */ .card, .info-card, .loan-product-card, .service-card, .stat-card { min-width: 0; overflow-wrap: anywhere; } } /* Screen-reader-only helper used by the tab bar's unread count. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Signed-in app bar and menu, phones only -------------------------------------------------------------------------- The app bar carried a hamburger, a logo, the page title, a theme toggle, a notification bell, a verification badge and a profile shortcut — seven items across 375px. The title collided with the logo and the controls crowded the right edge. A phone app bar now carries three things: the logo, the notification bell and the menu button. The theme toggle moves into the menu (rendered by render-sidebar.php) and the profile shortcut is dropped, because "My Profile" is already a menu item and the bottom tab bar has an Account tab. Nothing is lost — each control just has one home instead of two. -------------------------------------------------------------------------- */ @media (max-width: 768px) { .dashboard-header { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 56px; } /* Removed from the bar; both are reachable from the menu and the tab bar. */ .header-action-theme, .header-action-profile, .header-action-verified { display: none; } /* The page title duplicates the heading at the top of the content area, and it was the element pushing the logo into the controls. */ .dashboard-header .header-title { display: none; } /* Menu button first, then logo, then the bell hard right. */ .mobile-sidebar-toggle { order: -2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; background: transparent; border: 0; font-size: 1.15rem; color: var(--ls-text, #1f2937); cursor: pointer; } .ls-appbar-logo { order: -1; display: flex; align-items: center; min-width: 0; flex: 1 1 auto; } .ls-appbar-logo img { height: 30px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; } .dashboard-header .header-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } .dashboard-header .notification-button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ---------------------------------------------------------- full menu -- The drawer was a narrow off-canvas panel with the page showing behind it. On a phone the menu takes the whole screen, so the list is readable and nothing behind it competes for attention. */ .dashboard-sidebar { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; height: 100dvh; z-index: 1100; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); transition: transform .25s ease; background: var(--ls-surface, #fff); padding-bottom: env(safe-area-inset-bottom, 0); } /* .show is the class dashboard.js toggles; the others are kept so the rule still holds if a page uses a different open-state convention. */ .dashboard-sidebar.show, .dashboard-sidebar.active, .dashboard-sidebar.open, body.sidebar-open .dashboard-sidebar { transform: translateX(0); } /* Full-screen means there is nothing to dim behind it. */ .sidebar-overlay, .dashboard-overlay { display: none !important; } .dashboard-sidebar .sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 56px; border-bottom: 1px solid var(--ls-border, #e5e7eb); position: sticky; top: 0; background: inherit; z-index: 1; } .dashboard-sidebar .sidebar-logo img { height: 30px; width: auto; } /* Close control, injected by dashboard.js when the menu goes full-screen. */ .sidebar-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; font-size: 1.35rem; line-height: 1; color: var(--ls-text-muted, #6b7280); cursor: pointer; flex: 0 0 auto; } /* Roomier rows: a full screen has space, and 48px is a comfortable target. */ .dashboard-sidebar .sidebar-nav-link { min-height: 48px; display: flex; align-items: center; gap: 12px; font-size: .95rem; } .sidebar-appearance { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin-top: auto; border-top: 1px solid var(--ls-border, #e5e7eb); } .sidebar-appearance-label { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--ls-text-secondary, #374151); } /* The tab bar must not sit on top of the open menu. */ body.sidebar-open .app-tabbar { display: none; } } /* The appearance row and the menu close button belong to the phone menu only. dashboard.js injects the close button on every page regardless of width — the sidebar is a permanent column on desktop and has nothing to close — so it is hidden here rather than conditionally injected, which keeps the button available the moment the viewport is narrowed without a reload. */ @media (min-width: 769px) { .sidebar-appearance { display: none; } .sidebar-close { display: none; } } /* -------------------------------------------------------------------------- App-bar brand mark -------------------------------------------------------------------------- On desktop the sidebar is a permanent column and already carries the logo, so repeating it in the app bar beside the page title was a duplicate. It is hidden from 769px up. It stays on phones: there the sidebar is off-canvas, so the app bar is the only thing identifying the app — which is why the phone bar is logo, bell and menu button. -------------------------------------------------------------------------- */ @media (min-width: 769px) { .ls-appbar-logo { display: none; } }