/* ============================================ RATES & REALTY — MOBILE RESPONSIVE STYLES Applies to all pages site-wide ============================================ */ /* ── Base meta viewport (add to every HTML ) ── */ /* */ /* ── Breakpoints ── Desktop: 1024px+ Tablet: 768px – 1023px Mobile: < 768px Small: < 480px */ /* ── Global resets ── */ *, *::before, *::after { box-sizing: border-box; } img, video, iframe { max-width: 100%; height: auto; } table { width: 100%; } /* ── Typography scaling ── */ @media (max-width: 768px) { h1, .h1 { font-size: clamp(1.8rem, 6vw, 3rem) !important; } h2, .h2 { font-size: clamp(1.4rem, 5vw, 2.2rem) !important; } h3, .h3 { font-size: clamp(1.1rem, 4vw, 1.6rem) !important; } p, li { font-size: clamp(0.9rem, 3.5vw, 1rem) !important; line-height: 1.65; } } /* ── Navigation ── */ @media (max-width: 1024px) { .main-nav, nav, header nav { flex-wrap: wrap !important; padding: 12px 16px !important; } .nav-links, .nav-menu { display: none !important; width: 100% !important; flex-direction: column !important; gap: 4px !important; padding: 12px 0 !important; order: 3; } .nav-links.open, .nav-menu.open { display: flex !important; } .nav-ctas { gap: 8px !important; } .btn-apply, .btn-login { padding: 8px 14px !important; font-size: 13px !important; } } /* Mobile hamburger button — inject via JS */ .nav-hamburger { display: none; background: none; border: 1px solid rgba(186,117,23,0.5); border-radius: 6px; padding: 6px 10px; cursor: pointer; color: #BA7517; font-size: 18px; margin-left: auto; } @media (max-width: 1024px) { .nav-hamburger { display: block; } } /* ── Dropdown menus — full width on mobile ── */ @media (max-width: 1024px) { .nav-dropdown-menu { position: static !important; width: 100% !important; min-width: unset !important; flex-direction: column !important; gap: 0 !important; box-shadow: none !important; border: none !important; background: rgba(186,117,23,0.05) !important; border-radius: 8px !important; padding: 8px !important; } .nav-dropdown { width: 100%; } .nav-dropdown-trigger { width: 100%; text-align: left; } } /* ── Grid layouts → single column on mobile ── */ @media (max-width: 768px) { [class*="grid"], [class*="cards"], [class*="columns"], [class*="col-"], .two-col, .three-col, .four-col, .program-grid, .loan-grid, .stats-grid, .team-grid, .testimonial-grid { grid-template-columns: 1fr !important; columns: 1 !important; } /* Flex rows → column */ .flex-row, .row, [class*="flex"]:not(.nav-ctas):not(.nav-hamburger) { flex-direction: column !important; } /* Side-by-side form fields → stack */ .form-row, .field-row, .input-row { flex-direction: column !important; gap: 12px !important; } .form-row input, .field-row input, .input-row input { width: 100% !important; } } /* ── Tablet grid — 2 columns ── */ @media (min-width: 768px) and (max-width: 1023px) { .four-col, .loan-grid, .program-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ── Cards ── */ @media (max-width: 768px) { .card, [class*="card"], .program-card, .loan-card { padding: 16px !important; margin-bottom: 16px; } .card-top { flex-direction: column !important; gap: 8px !important; } } /* ── Hero sections ── */ @media (max-width: 768px) { .hero, [class*="hero"], .hero-section { padding: 60px 20px 40px !important; text-align: center !important; min-height: auto !important; } .hero-buttons, .cta-buttons, .hero-ctas { flex-direction: column !important; align-items: center !important; gap: 12px !important; } .hero-buttons a, .cta-buttons a, .hero-ctas a { width: 100% !important; max-width: 320px !important; text-align: center !important; } } /* ── Buttons — full width on mobile ── */ @media (max-width: 480px) { .btn-full-mobile, .cta-btn, [class*="apply-btn"] { width: 100% !important; text-align: center !important; } } /* ── Stats bar ── */ @media (max-width: 768px) { .stats-bar, .stats-ticker, [class*="stats-"] { flex-wrap: wrap !important; overflow: hidden !important; cursor: default !important; pointer-events: none !important; } .stat-item { min-width: 50% !important; padding: 16px 8px !important; } } /* ── Sections padding ── */ @media (max-width: 768px) { section, .section { padding: 40px 16px !important; } .container, .content-wrap { padding: 0 16px !important; max-width: 100% !important; } } /* ── Tables → horizontal scroll on mobile ── */ @media (max-width: 768px) { .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { min-width: 500px; } } /* ── Chat widget — full screen on small mobile ── */ @media (max-width: 480px) { #chat-panel { width: calc(100vw - 16px) !important; right: 8px !important; bottom: 76px !important; max-height: 70vh !important; } #chat-bubble { right: 16px !important; bottom: 16px !important; } } /* ── Matcher wizard ── */ @media (max-width: 768px) { .opt-grid.cols2, .opt-grid.cols3 { grid-template-columns: 1fr !important; } .opt { padding: 14px 12px !important; } .nav-row { flex-wrap: wrap; gap: 8px; } .btn-next, .btn-back { width: 100%; } } /* ── FAQ accordion ── */ @media (max-width: 768px) { .faq-item, [class*="faq"] { padding: 0 !important; } .faq-question { padding: 14px 12px !important; font-size: 14px !important; } .faq-answer { padding: 0 12px 14px !important; font-size: 14px !important; } } /* ── Footer ── */ @media (max-width: 768px) { footer, .footer, .site-footer { grid-template-columns: 1fr !important; text-align: center !important; gap: 24px !important; } .footer-links { justify-content: center !important; flex-wrap: wrap !important; } } /* ── Prevent horizontal scroll ── */ body { overflow-x: hidden !important; max-width: 100vw; } /* ── MOBILE GLOBAL FIX ── */ *, *::before, *::after { box-sizing: border-box; } html, body { width: 100%; max-width: 100vw; overflow-x: hidden; } img, video, iframe { max-width: 100%; height: auto; } input, select, textarea, button { font-size: 16px !important; /* prevents iOS auto-zoom on focus */ } @media (max-width: 768px) { .hero, .hero-section, [class*="hero"] { padding: 60px 16px 40px; } .hero h1, .hero-section h1, h1 { font-size: clamp(26px, 7vw, 48px); line-height: 1.2; } section, .section { padding: 40px 16px; } .grid, [class*="grid"], [class*="cards"] { grid-template-columns: 1fr !important; } .btn, [class*="btn"], button { width: 100%; text-align: center; } .stats-row, [class*="stats"] { grid-template-columns: repeat(2, 1fr) !important; } footer, .footer { padding: 30px 16px; text-align: center; } .footer-grid, .footer-columns, [class*="footer-col"] { grid-template-columns: 1fr !important; gap: 20px; } } @media (max-width: 480px) { h1 { font-size: clamp(22px, 8vw, 32px); } .stats-row, [class*="stats"] { grid-template-columns: 1fr !important; } } @media (min-width: 769px) and (max-width: 1024px) { .grid, [class*="grid"] { grid-template-columns: repeat(2, 1fr) !important; } section, .section { padding: 60px 32px; } }