/* ============================================================ FARGOSCAPITAL — Global Responsive Overrides Covers: 320px (iPhone SE) → 480px → 768px → 1024px → 1440px+ Applied to every page via in ============================================================ */ /* ── Global base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { width: 100%; max-width: 100%; overflow-x: hidden; min-width: unset !important; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } /* iPhone notch / Dynamic Island safe areas */ body { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } img, video, iframe, svg { max-width: 100%; height: auto; } /* Prevent any element from causing horizontal scroll */ * { min-width: 0; } /* ── Tables — always scrollable on mobile ────────────────── */ .admin-panel, .admin-table-wrap, [style*="overflow-x:auto"], [style*="overflow-x: auto"] { -webkit-overflow-scrolling: touch; } /* ── Floating chat bubble safe area ─────────────────────── */ #jivo-fab { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); right: calc(28px + env(safe-area-inset-right, 0px)); } /* ============================================================ DESKTOP: 1025px + ============================================================ */ @media (min-width: 1025px) { .container { padding: 0 32px; } } /* ============================================================ TABLET: 769px – 1024px ============================================================ */ @media (max-width: 1024px) { .container { padding: 0 20px; } /* Public pages */ .hero__inner { gap: 40px; } .navbar { padding: 0 20px; } .footer__top { gap: 32px; } /* Dashboard */ .balance-grid { grid-template-columns: repeat(2, 1fr); } .accounts-grid { grid-template-columns: 1fr 1fr; } /* Admin */ .admin-section { padding: 20px 16px 40px; } } /* ============================================================ LARGE MOBILE: 481px – 768px ============================================================ */ @media (max-width: 768px) { /* ── GLOBAL ── */ .container { padding: 0 16px; } section, .section { padding: 48px 0; } h1 { font-size: clamp(1.5rem, 5vw, 2rem); } h2 { font-size: clamp(1.25rem, 4vw, 1.6rem); } h3 { font-size: clamp(1rem, 3.5vw, 1.25rem); } /* ── NAVBAR (public pages) ── */ .navbar { padding: 0 16px; } .navbar__logo-text { font-size: .9rem; } /* ── HERO (homepage) ── */ .hero { padding: 60px 0 48px; text-align: center; } .hero__inner { flex-direction: column; align-items: center; gap: 32px; } .hero__cta { flex-direction: column; width: 100%; } .hero__cta .btn { width: 100%; justify-content: center; } .hero__visual { display: none; } .hero__stats { justify-content: center; flex-wrap: wrap; gap: 20px; } /* ── PAGE HERO (inner pages) ── */ .page-hero { padding: 48px 0 40px; } .page-hero h1 { font-size: clamp(1.4rem, 5vw, 2rem); } /* ── FOOTER ── */ .footer { padding: 48px 0 24px; } .footer__top { grid-template-columns: 1fr; gap: 28px; } .footer__links { grid-template-columns: repeat(2, 1fr); gap: 24px; } .footer__bottom { flex-direction: column; gap: 12px; text-align: center; } /* ── CARDS / GRIDS ── */ .features__grid, .testimonials__grid, .rates__grid, .accounts-grid, .stat-row, .product-grid, .team-grid, .branch-grid, .contact-grid, .form-grid, .calc-row, .account-type-grid { grid-template-columns: 1fr !important; } .quick-access__grid { grid-template-columns: repeat(2, 1fr); } /* ── ALL TABLES ── */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; font-size: 13px; } thead, tbody, tr { min-width: max-content; } /* ── FORMS ── */ .form-row, .form-row-2, [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr 1fr"], [style*="grid-template-columns:repeat(2"], [style*="grid-template-columns: repeat(2"], [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; } input, select, textarea { font-size: 16px !important; /* prevents iOS zoom on focus */ width: 100%; } /* ── SIDEBAR — DASHBOARD & ADMIN ── */ .sidebar { position: fixed !important; left: -280px !important; transform: none !important; width: 280px !important; max-width: 85vw; height: 100dvh; height: 100vh; z-index: 9999; transition: left 0.3s ease !important; overflow-y: auto; -webkit-overflow-scrolling: touch; top: 0; } .sidebar.open { left: 0 !important; transform: none !important; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9998; } .sidebar-overlay.open { display: block; } /* ── DASHBOARD MAIN ── */ .dash-main { margin-left: 0 !important; width: 100% !important; padding: 0 !important; } .dash-topbar { padding: 0 12px !important; position: sticky; top: 0; z-index: 100; } .dash-section { padding: 16px 12px 80px !important; } .dash-section__heading { font-size: 1.1rem; } .dash-topbar__date { display: none; } /* Balance cards */ .balance-grid { grid-template-columns: 1fr !important; gap: 10px; } .balance-card { padding: 16px; } .balance-amount { font-size: 1.6rem; } /* Quick actions */ .quick-actions { flex-wrap: wrap; gap: 8px; justify-content: space-between; } .quick-action { flex: 1 1 calc(25% - 8px); min-width: 56px; padding: 10px 6px; } .quick-action-label { font-size: .65rem; } /* Transaction list */ .tx-item { padding: 10px 12px; } /* Modals — slide up from bottom on mobile */ .modal-backdrop { align-items: flex-end !important; } .modal { border-radius: 20px 20px 0 0 !important; max-width: 100% !important; width: 100% !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; margin: 0 !important; max-height: 92dvh; max-height: 92vh; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* Cards grid */ .cards-grid { grid-template-columns: 1fr !important; } .card-controls-grid { grid-template-columns: 1fr 1fr; } /* Settings / loans */ .settings-grid { grid-template-columns: 1fr !important; } .loan-progress-steps { gap: 4px; } .loan-step-line { display: none; } .loan-page-header { flex-direction: column; align-items: flex-start; gap: 10px; } /* International transfer */ .intl-form-wrap { max-width: 100%; } .intl-card { padding: 16px; } /* ── ADMIN MAIN ── */ .admin-main { margin-left: 0 !important; width: 100% !important; } .admin-topbar { padding: 0 12px !important; gap: 8px; position: sticky; top: 0; z-index: 100; } .admin-section { padding: 16px 12px 80px !important; } .admin-section__heading { font-size: 1.1rem; } /* Admin stat cards */ .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; } /* Admin filters */ .tx-filters { flex-direction: column !important; gap: 8px; width: 100%; } .tx-filters .admin-select { width: 100% !important; } .admin-search { width: 100% !important; } /* Admin panels */ .admin-panel { border-radius: 10px; } .admin-panel__header { padding: 14px 16px; flex-wrap: wrap; gap: 8px; } .admin-panel[style*="max-width"] { max-width: 100% !important; } /* Admin tables */ .admin-table { font-size: .75rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .admin-table td, .admin-table th { padding: 8px 10px; white-space: nowrap; } /* User cards */ .user-card { padding: 14px; } .user-card__actions { flex-wrap: wrap; gap: 6px; } /* Buttons */ .btn-primary, .btn-ghost { font-size: .85rem; padding: 10px 14px; } /* Loan table */ .loans-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Admin modal */ .admin-modal { max-width: 100% !important; border-radius: 20px 20px 0 0; } /* Manage TX panel */ #atx-manage-panel .admin-panel, #txr-edit-panel .admin-panel, #txr-email-panel .admin-panel { max-width: 100% !important; } #atx-manage-body [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* LOGIN */ .login-wrap { grid-template-columns: 1fr !important; } .login-panel--left { display: none !important; } .login-panel--right { min-height: 100dvh; min-height: 100vh; padding: 32px 20px; } /* Open account wizard */ .wizard-card { padding: 28px 20px; } .wizard-steps { gap: 0; } .wizard-step__label { display: none; } /* Page layout sidebar (inner pages) */ .page-layout { grid-template-columns: 1fr !important; } .page-sidebar { position: static !important; } } /* ============================================================ SMALL MOBILE: 320px – 480px ============================================================ */ @media (max-width: 480px) { /* ── GLOBAL ── */ .container { padding: 0 14px; } section, .section { padding: 36px 0; } /* ── HOMEPAGE ── */ .navbar { padding: 0 14px; height: 60px; } .navbar__logo-mark { width: 28px; height: 28px; font-size: .75rem; } .hero { padding: 48px 0 36px; } .hero__stats { gap: 16px; } .stat__divider { display: none; } .quick-access__grid { grid-template-columns: 1fr 1fr; gap: 8px; } .footer__links { grid-template-columns: 1fr; } .section { padding: 48px 0; } /* ── DASHBOARD ── */ .dash-topbar { height: 52px; } .balance-amount { font-size: 1.45rem; } .balance-card { padding: 14px; } .quick-action { min-width: 52px; padding: 9px 4px; } .quick-action svg { width: 20px; height: 20px; } .quick-action-label { font-size: .62rem; } .otp-input { width: 44px !important; height: 50px !important; font-size: 1.25rem !important; } .form-label { font-size: .82rem; } .form-control { font-size: 16px !important; padding: 9px 12px; } .dash-section__heading { font-size: 1rem; } .balance-grid { grid-template-columns: 1fr !important; } .biller-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; } .receipt { font-size: .8rem; } .intl-fee-box { font-size: .8rem; } /* ── ADMIN ── */ .admin-topbar { height: 52px; } .stat-grid { grid-template-columns: 1fr !important; } .stat-card { padding: 14px 16px; } .stat-card__val { font-size: 1.5rem; } .admin-section__heading { font-size: 1rem; } .btn-primary, .btn-ghost { font-size: .82rem; padding: 9px 14px; } .admin-table td, .admin-table th { padding: 7px 8px; font-size: .7rem; } .sidebar__link { padding: 10px 14px; font-size: .82rem; } .sidebar__link svg { width: 16px; height: 16px; } .user-detail-row { grid-template-columns: 1fr !important; } .loan-action-btns { flex-direction: column; } .loan-action-btns button { width: 100%; } /* Admin forms inline grids */ [style*="display:grid"], [style*="display: grid"] { grid-template-columns: 1fr !important; } /* ── LOGIN ── */ .login-panel--right { padding: 24px 16px; } .otp-wrap { gap: 6px; } .login-alt { grid-template-columns: 1fr !important; gap: 8px; } /* ── PAGES ── */ .page-hero { padding: 36px 0 28px; } .page-hero h1 { font-size: 1.4rem; } .stat-row { grid-template-columns: 1fr 1fr !important; } .team-grid { grid-template-columns: repeat(2, 1fr) !important; } .wizard-card { padding: 20px 14px; } .wizard-nav { flex-direction: column; gap: 10px; } .wizard-nav .btn-back, .wizard-nav .btn-next { width: 100%; justify-content: center; } /* ── FLOATING CHAT ── */ #jivo-fab { width: 52px !important; height: 52px !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); } #jivo-fab svg { width: 24px !important; height: 24px !important; } #jivo-fab span { width: 11px !important; height: 11px !important; } } /* ============================================================ EXTRA SMALL: 320px (iPhone SE, Galaxy A series small) ============================================================ */ @media (max-width: 360px) { .container { padding: 0 12px; } .navbar__logo-text { display: none; } .otp-input { width: 40px !important; height: 46px !important; font-size: 1.1rem !important; } .quick-action { min-width: 46px; } .sidebar__link span { font-size: .78rem; } .balance-amount { font-size: 1.3rem; } .stat-card__val { font-size: 1.3rem; } .admin-table td, .admin-table th { padding: 6px 7px; font-size: .68rem; } } /* ============================================================ LANDSCAPE PHONE: max-height 500px ============================================================ */ @media (max-height: 500px) and (orientation: landscape) { .sidebar { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .modal { max-height: 85vh !important; overflow-y: auto !important; } .login-panel--right { padding: 20px 24px; } .hero { padding: 30px 0; } } /* ============================================================ PRINT — strip UI chrome ============================================================ */ @media print { .sidebar, .dash-topbar, .admin-topbar, .navbar, #jivo-fab { display: none !important; } .dash-main, .admin-main { margin-left: 0 !important; } }