/** * Mobile navigation (phones, up to 767px). See inc/mobile-nav.php. * Colours follow the site: #2874f0 links/accents, #1d1c72 navy buttons, * #d3d3d3 / #eee borders, Lexend Deca inherited from the theme. */ /* Added by mobile-nav.js on every screen size; only shown on phones. */ .bl-sheet-head, .bl-sheet-foot, .bl-sheet-backdrop, .bl-listnav, .bl-filter-pill { display: none; } @media (max-width: 767px) { .bl-sheet-foot, .bl-sheet-backdrop, .bl-listnav { display: block; } .bl-sheet-host { z-index: 100001 !important; } .bl-sheet .bl-sheet-dup { display: none !important; } /* Dropdowns opened from inside a sheet (select2, the plugin's category / address autocomplete) are attached to ; keep them above it. */ html.bl-sheet-lock .select2-container--open, html.bl-sheet-lock .select2-dropdown, html.bl-sheet-lock .ui-autocomplete, html.bl-sheet-lock .ui-menu { z-index: 100010 !important; } .bl-filter-pill { display: inline-flex; } /* ------------------------------------------------------------------ * Bottom sheet * ------------------------------------------------------------------ */ html.bl-sheet-lock, html.bl-sheet-lock body { overflow: hidden !important; } .bl-sheet-backdrop { position: fixed; inset: 0; z-index: 100000; background: rgba(17, 24, 39, .45); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; } .bl-sheet-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .2s ease; } .bl-sheet { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; z-index: 100001 !important; width: auto !important; max-width: none !important; max-height: 88vh; max-height: 88dvh; margin: 0 !important; padding: 0 0 env(safe-area-inset-bottom) !important; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #fff; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(17, 24, 39, .18); transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; } .bl-sheet.is-open { transform: translateY(0); visibility: visible; transition: transform .25s ease; } .bl-sheet:focus { outline: none; } .bl-sheet-head { position: sticky; top: 0; z-index: 1000; /* above the search form, which has z-index: 100 */ display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 8px 0 18px; background: #fff; border-bottom: 1px solid #eee; } .bl-sheet-head::before { /* grab handle */ content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #d3d3d3; } .bl-sheet-title { color: #222; font-size: 17px; font-weight: 600; line-height: 1.3; } .bl-sheet .bl-sheet-close { position: relative; flex: none; width: 44px; height: 44px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 50%; background: transparent !important; box-shadow: none !important; cursor: pointer; } .bl-sheet .bl-sheet-close::before, .bl-sheet .bl-sheet-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; background: #555; transform: rotate(45deg); } .bl-sheet .bl-sheet-close::after { transform: rotate(-45deg); } .bl-sheet-foot { position: sticky; bottom: 0; z-index: 1000; /* above the search form, which has z-index: 100 */ padding: 10px 16px; background: #fff; border-top: 1px solid #eee; } .bl-sheet .bl-sheet-apply { display: block; width: 100%; height: 48px; margin: 0; border: 0; border-radius: 5px; background: #1d1c72; color: #fff; font-family: inherit; font-size: 16px; font-weight: 500; cursor: pointer; } /* ------------------------------------------------------------------ * Listing / category pages * ------------------------------------------------------------------ */ .bl-listnav { margin: 0 10px 12px; } /* Home (page 12836): the picture slider of categories (widget 7816dc0d) repeats the category list just above it; phones show the list only. */ .elementor-12836 .elementor-element.elementor-element-7816dc0d { display: none !important; } /* Listings page (Elementor page 12834): 80px of top padding left a blank band under the fixed header on phones. */ .elementor-12834 .elementor-element.elementor-element-c48b844 { padding-top: 16px !important; } .bl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 10px; color: #222; font-size: 14px; line-height: 1.4; } .bl-crumbs > * + *::before { content: "\203A"; margin: 0 8px; color: #999; } .bl-crumbs a { color: #2874f0; text-decoration: none; } .bl-crumbs span:last-child { font-weight: 600; } .bl-chips { display: flex; gap: 8px; margin: 0 -10px 12px; padding: 2px 10px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .bl-chips::-webkit-scrollbar { display: none; } .bl-chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid #dde3ea; border-radius: 20px; background: #fff; color: #444; font-size: 14px; line-height: 1; white-space: nowrap; text-decoration: none; } .bl-chip.is-active { border-color: #1d1c72; background: #1d1c72; color: #fff; } .bl-filter-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 1px solid #1d1c72; border-radius: 5px; background: #fff; color: #1d1c72; font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; } .bl-filter-btn::before { /* sliders icon */ content: ""; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1c72' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") no-repeat center / contain; } .bl-filterbar .bl-filter-btn { width: 100%; } .bl-filter-pill { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 9990; height: 44px; border-radius: 22px; box-shadow: 0 4px 16px rgba(17, 24, 39, .22); transform: translateX(-50%); } .bl-filter-pill[hidden] { display: none; } /* The sidebar leaves the page flow; the sheet head already says "Filters". */ .bl-has-filter-sheet .listing-archive-sidearea.bl-sheet .main-search-bar { padding: 6px 4px 0; } /* ------------------------------------------------------------------ * Mobile menu panel. It lives inside the fixed bottom bar (z-index 100), * which sat under the header (z-index 10000), so the top of the panel * was hidden behind the header. Lift the bar while the menu is open, * dim the page behind it and let a long menu scroll. * ------------------------------------------------------------------ */ .elementor-section:has(nav.hfb-dropdown.menu-is-active) { z-index: 10001 !important; } html:has(nav.hfb-dropdown.menu-is-active), html:has(nav.hfb-dropdown.menu-is-active) body { overflow: hidden !important; } /* Specific enough to beat the theme's ".elementor-widget-pacz-navigation-menu.hfb-nav-menu__breakpoint-tablet .hfb-active-menu + .hfb-nav-menu__layout-horizontal { width: 270px !important }". */ html body .elementor-widget-pacz-navigation-menu nav.hfb-dropdown.menu-is-active.hfb-nav-menu__layout-horizontal { width: min(86vw, 340px) !important; max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 0 0 100vmax rgba(17, 24, 39, .45); } /* The theme's close button sat just outside the panel's right edge, which the scrolling panel now clips; put it in the panel's top-right corner. */ nav.hfb-dropdown.menu-is-active > .hfb-nav-menu-close { position: absolute !important; top: 6px !important; right: 6px !important; left: auto !important; z-index: 5; display: flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; margin: 0 !important; background: transparent !important; } nav.hfb-dropdown.menu-is-active > .hfb-nav-menu-close .hfb-nav-menu-icon { background: transparent !important; } nav.hfb-dropdown.menu-is-active .bl-mmenu-user { padding-right: 56px; } /* Menu links were light grey; "home" is lower-case in the menu itself. */ html body nav.hfb-dropdown.menu-is-active > ul > li > a, html body nav.hfb-dropdown.menu-is-active > ul > li > div > a { color: #333 !important; font-size: 16px !important; text-transform: capitalize; } nav.hfb-dropdown.menu-is-active .bl-mmenu-actions { margin-right: -36px; } /* ------------------------------------------------------------------ * Mobile menu header * ------------------------------------------------------------------ */ .bl-mmenu-user { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 18px 20px; background: #f5f8ff; border-bottom: 1px solid #e6ebf2; } .bl-mmenu-avatar img { display: block; width: 44px; height: 44px; border-radius: 50%; } .bl-mmenu-hello { flex: 1 1 auto; color: #222; font-size: 16px; font-weight: 600; } .bl-mmenu-actions { display: flex; flex: 1 1 100%; gap: 10px; } .bl-mmenu-btn { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; height: 44px; border: 1px solid #1d1c72; border-radius: 5px; background: #1d1c72; color: #fff !important; font-size: 15px; font-weight: 500; text-decoration: none; } .bl-mmenu-btn--ghost { background: #fff; color: #1d1c72 !important; } .bl-mmenu-cats { border-bottom: 1px solid #eee; } .bl-mmenu-cats summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 20px; color: #222; font-size: 16px; font-weight: 600; list-style: none; cursor: pointer; } .bl-mmenu-cats summary::-webkit-details-marker { display: none; } .bl-mmenu-cats summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid #888; border-bottom: 2px solid #888; transform: rotate(45deg); transition: transform .15s ease; } .bl-mmenu-cats[open] summary::after { margin-top: 4px; transform: rotate(-135deg); } .bl-mmenu-cats ul { margin: 0; padding: 0 0 8px; list-style: none; } .bl-mmenu-cats li { margin: 0; list-style: none; } .bl-mmenu-cats li a { display: flex; align-items: center; min-height: 44px; padding: 0 20px 0 32px; color: #444; font-size: 15px; text-decoration: none; } .bl-mmenu-cats li.bl-mmenu-cats-all a { color: #2874f0; font-weight: 500; } }