/* ========================================================================== ExtOffer — shared mobile stylesheet (assets/mobile.css) Every page inlines its own desktop CSS. This file is linked in each AFTER that CSS, so at equal specificity these rules win. `!important` is used only where a page sets an inline style attribute (logo height, the injected bell, the notification panel) that a normal rule can't override. Breakpoints ≤ 800px sidebar layouts (.app/.sidenav/.main, .app-layout) → slide-in drawer ≤ 700px card grids → one column; messaging → list/thread toggle ≤ 640px nav bar compaction (every page) ≤ 480px tighter paddings / type ========================================================================== */ /* ---------- Global guards ---------- */ @media (max-width: 800px) { html, body { overflow-x: hidden; } img, video, iframe { max-width: 100%; } /* Forms: side-by-side field pairs stack */ .form-row, .frow { grid-template-columns: 1fr !important; } /* Modals: full-width with breathing room */ .modal { width: calc(100vw - 24px) !important; max-width: none !important; padding: 22px 18px !important; } } /* ---------- Nav bar (all pages) ---------- */ @media (max-width: 640px) { nav { padding-left: 12px !important; padding-right: 12px !important; gap: 8px; } nav > a.logo img { height: 34px !important; } .nav-right { gap: 8px !important; min-width: 0; flex-shrink: 1; } .nav-right .nav-badge, .nav-badge { display: none !important; } .save-badge { display: none !important; } nav .btn-back { padding: 7px 10px !important; font-size: 12px !important; white-space: nowrap; gap: 4px !important; } nav .btn-offer, nav .btn-edit-post, nav .btn-primary, nav .btn-cta, nav .nav-cta, nav .btn-dash, nav .btn-browse, nav .btn-post-offer { padding: 8px 10px !important; font-size: 12px !important; white-space: nowrap; } .nav-right a, .nav-right button { white-space: nowrap; } .nav-avatar { width: 34px !important; height: 34px !important; font-size: 13px !important; flex-shrink: 0; } .mobile-menu-btn { padding: 6px 6px !important; } /* Injected notification bell */ #extoffer-notif-wrap { flex-shrink: 0; } #extoffer-notif-btn { width: 34px !important; height: 34px !important; font-size: 15px !important; } #extoffer-notif-panel { position: fixed !important; top: 72px !important; left: 12px !important; right: 12px !important; width: auto !important; max-height: 70vh !important; } /* Avatar dropdowns anchor to the right edge; keep them on screen */ #avatar-dropdown { right: 0 !important; max-width: calc(100vw - 24px); } /* Beta banner: one tidy line of smaller text */ #beta-banner { font-size: 12px !important; padding: 8px 32px 8px 12px !important; } } /* ---------- Sidebar layouts → drawer (profile, settings, dashboards) ---------- */ @media (max-width: 800px) { .app, .app-layout { grid-template-columns: minmax(0, 1fr) !important; } .sidenav { display: block; position: fixed; top: 0; left: 0; width: 280px; max-width: 85vw; height: 100vh; height: 100dvh; z-index: 999; background: #fff; transform: translateX(-100%); transition: transform .25s ease-out; box-shadow: 0 0 28px rgba(10,37,64,.18); overflow-y: auto; } .sidenav.open { transform: translateX(0); } .mobile-menu-btn { display: inline-flex !important; } .mobile-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(10,37,64,.4); z-index: 998; } .mobile-menu-overlay.open { display: block; } .main { padding: 20px 16px !important; max-width: none !important; } /* Inner grids on sidebar pages */ .profile-grid { grid-template-columns: minmax(0, 1fr) !important; } .profile-grid > *, .main > *, .card { min-width: 0; } .stat-row { grid-template-columns: 1fr 1fr 1fr !important; gap: 8px !important; } .two-col { grid-template-columns: minmax(0, 1fr) !important; } .plan-features { grid-template-columns: 1fr !important; } .settings-nav { width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } .settings-nav > * { white-space: nowrap; } .welcome { flex-direction: column; gap: 14px; align-items: flex-start; } } /* Desktop: never show the hamburger, even on pages that got it injected */ @media (min-width: 801px) { .mobile-menu-btn { display: none !important; } .mobile-menu-overlay { display: none !important; } } /* ---------- Browse pages ---------- */ @media (max-width: 1024px) { .props-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 700px) { .props-grid, .posts-grid, .similar-grid, .prop-grid { grid-template-columns: minmax(0, 1fr) !important; } .search-header { padding: 12px 12px !important; } .search-row { flex-wrap: wrap; gap: 8px !important; } .search-row .search-box { flex: 1 1 100% !important; } .search-row .filter-btn, .search-row .sort-select { flex: 1 1 auto; padding: 10px 12px !important; font-size: 13px !important; } .filter-inner { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .page-body { padding: 16px 12px !important; } .results-header { flex-wrap: wrap; gap: 10px; } } /* ---------- Property detail ---------- */ @media (max-width: 700px) { .content { grid-template-columns: minmax(0, 1fr) !important; padding-left: 12px !important; padding-right: 12px !important; } .content > * { min-width: 0; } .details-grid, .amenities-grid, .oc-details { grid-template-columns: 1fr 1fr !important; } .ll-stats { grid-template-columns: 1fr 1fr 1fr !important; } /* Gallery: the page shows thumbs with inline display:block, which beat its own mobile rule and stacked every photo full-height. Cover on top, two thumbs below, the rest through the lightbox ("Show all photos"). */ .gallery { padding: 12px 12px 0 !important; } .gallery-grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: 220px 96px !important; grid-auto-rows: 0 !important; gap: 6px !important; } .gallery-main { grid-column: 1 / 3 !important; grid-row: 1 !important; } .gallery-thumb { min-height: 0; } .gallery-thumb:nth-of-type(n+4) { display: none !important; } .gallery-thumb img, .gallery-main img { width: 100%; height: 100%; object-fit: cover; } } /* ---------- Public profiles / landlord post view (two-column .page) ---------- */ @media (max-width: 800px) { .page { grid-template-columns: minmax(0, 1fr) !important; } .page > * { min-width: 0; } .info-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 480px) { .info-grid { grid-template-columns: 1fr !important; } } /* ---------- Wizards (post-creation, landlord-post-creation) ---------- */ @media (max-width: 900px) { .page { grid-template-columns: 1fr !important; } .sidebar, aside.preview { display: none !important; } .photo-grid { grid-template-columns: repeat(3, 1fr) !important; } .toggle-grid, .three { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 600px) { .photo-grid { grid-template-columns: 1fr 1fr !important; } .toggle-grid, .three, .card-group, .amenity-grid { grid-template-columns: 1fr 1fr !important; } } /* ---------- Messaging: list ⇄ thread toggle ---------- */ @media (max-width: 700px) { /* Scoped to .chat-app: auth.html also has a .right-panel (the sign-up form). */ /* One visible pane at a time, so a single column (a hidden pane is not a grid item, which is why 0/1fr/0 tracks put the chat in a 0px column). */ .chat-app { grid-template-columns: minmax(0, 1fr) !important; height: calc(100vh - 64px); height: calc(100dvh - 64px); } .chat-app .convos { display: flex !important; border-right: 0; } .chat-app .chat-area { display: none !important; } .chat-app .right-panel { display: none !important; } body.thread-open .chat-app .convos { display: none !important; } body.thread-open .chat-app .chat-area { display: flex !important; } .ch-back { display: inline-flex !important; } .chat-header { padding: 10px 12px !important; } .ch-left { gap: 10px !important; min-width: 0; } .ch-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; } .messages-wrap { padding: 12px !important; } .input-area { padding: 10px 12px !important; } nav .nav-left { flex: 1 1 auto; min-width: 0; } nav .logo-wrap { min-width: 0 !important; padding: 0 6px 0 0 !important; border-right: 0 !important; } nav .nav-search { padding: 0 6px !important; min-width: 0; } nav .nav-search input { max-width: none !important; font-size: 13px !important; padding: 8px 10px 8px 30px !important; } nav .ns-icon { left: 14px !important; } .chat-app ~ * { min-width: 0; } nav .nav-right { flex-shrink: 0 !important; } } /* Back-to-list button exists only for phones */ .ch-back { display: none; width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid #E2E6EF; background: #fff; cursor: pointer; font-size: 18px; align-items: center; justify-content: center; flex-shrink: 0; color: #0A2540; font-family: inherit; } /* ---------- Landing / marketing pages ---------- */ @media (max-width: 640px) { .hero h1, h1.hero-title { font-size: 34px !important; line-height: 1.15 !important; } .hero-btns, .cta-row { flex-direction: column; align-items: stretch; } .hero-btns a, .cta-row a { text-align: center; } } /* ---------- Tight phones ---------- */ @media (max-width: 480px) { .card { padding: 20px 16px !important; } .verify-tiles { grid-template-columns: minmax(0, 1fr) !important; } .stat-row { grid-template-columns: 1fr 1fr 1fr !important; } .stats-row { grid-template-columns: 1fr 1fr !important; } .details-grid, .amenities-grid { grid-template-columns: 1fr 1fr !important; } .filter-inner { grid-template-columns: 1fr !important; } }