/* ===================================================================================================================== Sewa Rent — site-audit fixes (owned by the audit agent; report: docs/qa/site-audit.md, defect IDs SA-xx). Loaded last (functions.php, wp_enqueue_scripts priority 60, after Listeo, plugins, style.css, style-home.css and style-typography.css), so equal specificity wins. Mobile-first. One commented block per defect: page(s), selector, and the Listeo/plugin rule it overrides. !important only where the other side uses it or an inline style, and the block says why. Every block was verified on https://staging.sewa.rent by injecting this file with Playwright (WebKit 390x844 + Chromium 1440x900). ===================================================================================================================== */ /* --------------------------------------------------------------------------------------------------------------------- SA-02 · Home header at 1025–1239 px (iPad Air/Pro landscape 1180, small laptops 1100–1200): the right side ("Contact Us", "Sign In", flag) jumps ABOVE the header, both labels wrap onto two lines, the header grows to 151 px and the page scrolls sideways (document 1180–1220 px wide). Cause: Listeo's two-row header for this range — `.right-side { margin-top: -122px; display: inline-block }` (0,1,0), `#navigation.style-1 { margin: 25px 0 5px -5px; padding-top: 15px }` (1,1,0) and its 940 px divider `#navigation.style-1:before` — collides with child style.css, which already lays logo + menu + account out on ONE flex row from 1025 px (`#header .container { display: flex }`, `.left-side { width: 70% }`, `.right-side { width: 30% }`). Finish the one-row layout for this range: no negative margin, natural widths, no divider, no wrapping. Since the IDR currency pill joined the right side (E3.7), the fixed 70/30 split also wraps "Contact / Us" and "Sign / In" onto two lines at 1440 px, so the natural-width part applies to every width ≥ 1025 px. --------------------------------------------------------------------------------------------------------------------- */ @media (min-width: 1025px) { #header .left-side { width: auto; flex: 1 1 auto; min-width: 0; } #header .right-side { width: auto; flex: 0 0 auto; } #header .right-side .header-widget > a { white-space: nowrap; } } @media (min-width: 1025px) and (max-width: 1239px) { #header .right-side { margin-top: 0; } #header .left-side #navigation.style-1 { margin-top: 0; margin-bottom: 0; padding-top: 0; width: auto; } #header .left-side #navigation.style-1:before { display: none; } } /* --------------------------------------------------------------------------------------------------------------------- SA-05 · Footer (every page, desktop + tablet): "Support" floats next to "For owners" in the same 1/4 column; menu items wrap ("Become a / partner") and the Support title sits 47 px lower than the others. Overrides Listeo style.css `#footer ul.menu { width: 50%; float: left; display: inline-block }` (1,1,1), which is meant for ONE long menu split into two halves. Our column holds two short menus, so they must stack. --------------------------------------------------------------------------------------------------------------------- */ #footer .footer-widget.widget_nav_menu ul.menu { float: none; width: 100%; display: block; margin-bottom: 0; } #footer .footer-widget.widget_nav_menu + .footer-widget.widget_nav_menu { margin-top: 28px; } /* --------------------------------------------------------------------------------------------------------------------- SA-11 · Footer links on phones are 30 px tall (14 links per page below the 44 px tap target). Overrides Listeo `#footer ul.menu li a { padding: 0 0 9px 14px; line-height: 21px; display: inline-block }` (1,2,2) and the chevron `#footer ul.menu li:before { top: -1px }` (1,2,1). --------------------------------------------------------------------------------------------------------------------- */ @media (max-width: 767px) { #footer .footer-widget ul.menu li a { padding-top: 11px; padding-bottom: 12px; line-height: 21px; } #footer .footer-widget ul.menu li:before { top: 11px; } } /* --------------------------------------------------------------------------------------------------------------------- SA-10 · Social icons (footer bottom bar + mobile drawer): X, LinkedIn, Messenger, Instagram link to "#" (dead links, reload the page). Hidden until real profile URLs are set in Listeo > Footer social icons; the WhatsApp and contact icons in the drawer keep showing. Each icon is an
  • in `.new-footer-social-icons` (Listeo footer/mobile widget). --------------------------------------------------------------------------------------------------------------------- */ .new-footer-social-icons li:has(> a[href="#"]) { display: none; } /* --------------------------------------------------------------------------------------------------------------------- SA-12 · Mobile drawer (all pages, phones): the navy logo sits on Listeo's near-black drawer header, so only the red pin is visible. Render it white there (one mono logo on dark is the usual pattern; no extra file needed, works on staging and production alike). Listeo has no rule for `.menu-logo img` colours; the drawer is `.mobile-navigation-wrapper`. --------------------------------------------------------------------------------------------------------------------- */ .mobile-navigation-wrapper .menu-logo img { filter: brightness(0) invert(1); } /* --------------------------------------------------------------------------------------------------------------------- SA-13 · Header logo link: 100x28 (inner pages) / 125x36 (home) — below 44 px. Grow the hit area with an invisible pseudo-element so the header height and logo position do not move. Listeo sets no ::after on `#logo a`. SA-14 · Breadcrumb links ("Sewa Rent (staging)", "404"…): 23 px tall. Same technique; Listeo draws the "›" separator on `#breadcrumbs ul li:before`, not on the link. --------------------------------------------------------------------------------------------------------------------- */ #logo a { position: relative; } #logo a::after { content: ""; position: absolute; top: -8px; right: -4px; bottom: -8px; left: -4px; } #breadcrumbs ul li a { position: relative; } #breadcrumbs ul li a::after { content: ""; position: absolute; top: -11px; right: -4px; bottom: -11px; left: -4px; } /* Same for the footer's inline WhatsApp / "contact form" links (18 px tall on phones). Listeo sets no ::after there. */ @media (max-width: 767px) { #footer .footer-widget p a { position: relative; } #footer .footer-widget p a::after { content: ""; position: absolute; top: -13px; right: -4px; bottom: -13px; left: -4px; } } /* --------------------------------------------------------------------------------------------------------------------- SA-15 · Map zoom +/− on touch screens (listings, category, region and half-map pages): 34x34 px. Overrides Listeo `.leaflet-control-zoom-in, .leaflet-control-zoom-out { width/height: 34px }` (0,1,0) and Leaflet's `.leaflet-touch .leaflet-bar a { 30px }` (0,2,1). --------------------------------------------------------------------------------------------------------------------- */ .leaflet-touch .leaflet-bar a.leaflet-control-zoom-in, .leaflet-touch .leaflet-bar a.leaflet-control-zoom-out { width: 44px; height: 44px; line-height: 44px; margin: 4px 10px; } /* --------------------------------------------------------------------------------------------------------------------- SA-16 · Home header on phones: "Contact Us" (red text) sits right next to the icon-only Sign In arrow and reads as one "Contact Us →" button; it also pushes the flag against the menu button. Contact Us is already the 5th item of the mobile drawer, so the header keeps logo · sign-in · flag · menu. (`.sewa-contact-link` is created by child main.js.) Also gives the icon-only Sign In link a 44 px hit area (Listeo sets font-size 0 and ~38x32 on phones). --------------------------------------------------------------------------------------------------------------------- */ @media (max-width: 767px) { #header .header-widget a.sewa-contact-link { display: none; } #header .header-widget a.sign-in { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* --------------------------------------------------------------------------------------------------------------------- SA-17 · Home hero search (phones and desktop) — follow-up to the integrator's "three separate fields" restyle: (a) phones: the Location field has no inner padding — placeholder text touches the white field's left edge (Listeo `.main-search-input-item.location` resets padding; the integrator's `.sewa-hero-search .main-search-input-item { padding: 0 16px }` is (0,2,0), Listeo's location rule wins) → (0,3,0) here; (b) "Any Categories": the bootstrap-select button is 46 px inside a 54–56 px field with its own white pill and shadow (a second rounded shape shows at the bottom), and the chevron renders BELOW the field: `.caret` inherits line-height 56px and is 58 px tall with `top: 50%` (Listeo `.bootstrap-select.btn-group .dropdown-toggle .caret`); (c) "type and hit enter" tooltip (Listeo `.type-and-hit-enter`) pops over the Location field on focus — the owner's screenshot complaint; it is not needed on the hero (Location has autocomplete). --------------------------------------------------------------------------------------------------------------------- */ .sewa-hero-search .type-and-hit-enter { display: none; } .sewa-hero-search .bootstrap-select.btn-group .dropdown-toggle { height: 100%; min-height: 46px; background: transparent; box-shadow: none; border: 0; } .sewa-hero-search .bootstrap-select.btn-group .dropdown-toggle .filter-option { top: 0; } .sewa-hero-search .bootstrap-select.btn-group .dropdown-toggle .caret { height: 12px; line-height: 12px; margin-top: -6px; } @media (max-width: 991px) { .sewa-hero-search .main-search-input .main-search-input-item.location, .sewa-hero-search .main-search-input .main-search-input-item:is(.select-taxonomy,.sewa-category,.sewa-location) { padding: 0 16px; } .sewa-hero-search .main-search-input .main-search-input-item.location #autocomplete-container input { padding-left: 0; } .sewa-hero-search .main-search-input-item:is(.select-taxonomy,.sewa-category,.sewa-location) .bootstrap-select, .sewa-hero-search .main-search-input-item:is(.select-taxonomy,.sewa-category,.sewa-location) .bootstrap-select.btn-group .dropdown-toggle { height: 54px; min-height: 54px; } .sewa-hero-search .main-search-input-item:is(.select-taxonomy,.sewa-category,.sewa-location) .bootstrap-select.btn-group .dropdown-toggle { padding: 0; line-height: 54px; } .sewa-hero-search .main-search-input-item:is(.select-taxonomy,.sewa-category,.sewa-location) .bootstrap-select.btn-group .dropdown-toggle .filter-option { height: 54px; line-height: 54px; } .sewa-hero-search .main-search-input-item:is(.select-taxonomy,.sewa-category,.sewa-location) .bootstrap-select.btn-group .dropdown-toggle .caret { right: 0; } } @media (min-width: 992px) { .sewa-hero-search .main-search-input-item:is(.select-taxonomy,.sewa-category,.sewa-location) .bootstrap-select, .sewa-hero-search .main-search-input-item:is(.select-taxonomy,.sewa-category,.sewa-location) .bootstrap-select.btn-group .dropdown-toggle { height: 56px; } .sewa-hero-search .main-search-input-item:is(.select-taxonomy,.sewa-category,.sewa-location) .bootstrap-select.btn-group .dropdown-toggle .filter-option { height: 56px; line-height: 56px; } } /* --------------------------------------------------------------------------------------------------------------------- SA-18 · Mobile "Request dates" bar → booking widget (listing pages, phones): the tap scrolls the widget so its "Booking" title is cut by the fixed header (the anchor sits ~104 px inside the widget). Overrides sewa-rent-core listing.css `#booking-widget-anchor { scroll-margin-top: 120px }` (1,0,0) on phones/tablets. --------------------------------------------------------------------------------------------------------------------- */ @media (max-width: 992px) { html body #booking-widget-anchor { scroll-margin-top: 176px; } } /* --------------------------------------------------------------------------------------------------------------------- SA-27 · Listing page, scrolled (all widths): Listeo's sticky section nav (Overview · Features · Specs · Add Review…, `nav.listing-nav-container.listeo-section-nav.cloned.stick`, position fixed, top 0, z-index 998) slides in UNDER the fixed header (z-index 1001). Desktop: completely hidden behind the 106 px header; phones: its bottom 20 px peek out below the 48 px header as a half-cut strip of pills. Park it right below the header. Heights are Listeo's header-with-search sizes measured on staging: 48 px (≤ 767), 63 px (768–1024), 106 px (≥ 1025). Overrides Listeo listing-gallery/style `.listeo-section-nav.stick { top: 0 }`. --------------------------------------------------------------------------------------------------------------------- */ .hws-header .listing-nav-container.listeo-section-nav.cloned { top: 48px; } @media (min-width: 768px) { .hws-header .listing-nav-container.listeo-section-nav.cloned { top: 63px; } } @media (min-width: 1025px) { .hws-header .listing-nav-container.listeo-section-nav.cloned { top: 106px; } } /* Its price summary prints Listeo's raw `listeo_output_price()` — "Rp36208000 Per night" (no separators, and a boat day rate labelled per night). Hidden until the template override in the report (SA-27b) lands; the button stays. */ .listeo-section-nav .listing-nav-booking-summary { display: none; } /* --------------------------------------------------------------------------------------------------------------------- SA-19 · Listing page sidebar: "Not verified. Claim this listing!" box on every listing (Listeo claim-listing feature). For curated vendors it is wrong and undermines trust (E6 shows our own "Verified" badge). Hidden here; proper fix = switch off Listeo claims (see report). Listeo `.claim-badge` has no display rule to override. --------------------------------------------------------------------------------------------------------------------- */ .single-listing .claim-badge { display: none; } /* --------------------------------------------------------------------------------------------------------------------- SA-20 · Listing page, desktop: 5 px horizontal scroll (document 1445 px at 1440). Cause: the four invisible `input.rating-validator` fields of the review form are 762 px wide and absolutely positioned at each star group's left edge; the last one ends at x=1445. Listeo sets their width via `.add-sub-rating .rating-validator` (100%). --------------------------------------------------------------------------------------------------------------------- */ .add-sub-rating input.rating-validator { width: 1px; max-width: 1px; } /* --------------------------------------------------------------------------------------------------------------------- SA-21 · My account (/my-account/, logged out, phones): WooCommerce puts Login and Register side by side at 390 px (two 173 px columns, labels wrap, fields too narrow). Overrides woocommerce.min.css `.woocommerce .col2-set .col-1, … .col-2 { float: left/right; width: 48% }` (0,2,0). SA-22 · Same page, all widths: the Login/Register buttons are the only square-cornered (3 px) primary buttons on the site. Overrides Listeo woocommerce.min.css `body .woocommerce input.button { border-radius: 3px }` (0,2,2). --------------------------------------------------------------------------------------------------------------------- */ @media (max-width: 767px) { .woocommerce .u-columns.col2-set .u-column1, .woocommerce .u-columns.col2-set .u-column2 { float: none; width: 100%; } .woocommerce .u-columns.col2-set .u-column2 { margin-top: 36px; } } body .woocommerce input.woocommerce-Button.button, body .woocommerce button.woocommerce-Button.button { border-radius: 50px; padding-left: 28px; padding-right: 28px; } /* --------------------------------------------------------------------------------------------------------------------- SA-28 · On-page sign-in forms on phones ≤ 480 px (/dashboard/, /add-listing/, /my-profile/ = the /host/ redirect): the "Log In" and "Register" tabs stack as two full-width rows, so "Register" looks like a heading, not a tab. Overrides Listeo `@media (max-width: 480px) { .tabs-nav li, .tabs-nav li a { width: 100% } }` (0,1,1) for the sign-in form only (product tabs elsewhere keep Listeo's behaviour). Same centred row as the Sign In popup. --------------------------------------------------------------------------------------------------------------------- */ @media (max-width: 480px) { .sign-in-form .tabs-nav { display: flex; justify-content: center; flex-wrap: wrap; } .sign-in-form .tabs-nav li, .sign-in-form .tabs-nav li a { width: auto; float: none; } } /* --------------------------------------------------------------------------------------------------------------------- SA-23 · Content and legal pages (become-a-partner, how-it-works-*, terms, cookie policy, trust, licence, insurance, weather, cancellation, owner agreement): the title appears twice — Listeo's titlebar H1 and the page body's own leading "# Title" H1 (two identical H1s, ~120 px wasted on phones). Hide the body copy of the title only when the titlebar is present and the H1 is the first content element (after the `` marker paragraph, which is :empty because it only holds a comment). Proper fix = drop the leading H1 in the content source (see report). --------------------------------------------------------------------------------------------------------------------- */ #titlebar + .content-container .page-container-col > p:first-child:empty, #titlebar + .content-container .page-container-col > p:first-child:empty + h1, #titlebar + .content-container .page-container-col > h1:first-child { display: none; } /* --------------------------------------------------------------------------------------------------------------------- SA-24 · Site search results (/?s=…) and the listing page: post meta prints "By" followed by an empty author link (`li.meta-author > a.author-link` with href "/author/" → 404) because the pages' author account no longer exists. Hide the meta item only when the link is empty; real author names keep showing. --------------------------------------------------------------------------------------------------------------------- */ li.meta-author:has(> a.author-link:empty) { display: none; } /* --------------------------------------------------------------------------------------------------------------------- SA-25 · Empty category archives (/listing-category/villas/, cars, motorbikes, equipment, aircraft, /aircraft-category/helicopter/): Listeo's category strip above the results lists only categories that have listings, so the Villas page shows a single "Boats" tile marked active (and Helicopter shows "All · Boats"). Hide the strip while our empty state (search.php, `[data-sewa-test="empty-state"]`) is visible; search.js sets [hidden] on it when an AJAX search later finds results, and the strip comes back. Listeo has no rule to override (`.slider-container` is shown). --------------------------------------------------------------------------------------------------------------------- */ body:has([data-sewa-test="empty-state"]:not([hidden])) .filter-button-container .slider-container { display: none; } /* --------------------------------------------------------------------------------------------------------------------- Visual review 2026-10-08 (docs/qa/visual-review.md) #4 · Sign-in / Register popup shifted ~30px left on /zh/ (any language could hit it): Listeo widens the dialog header past the dialog (`left:-30px; width:calc(100% + 60px)`), so #sign-in-dialog (overflow:hidden) has 30px of horizontal scroll and a focus/scrollIntoView scrolls it. `overflow: clip` forbids any scrolling of the box (hidden still allows programmatic scroll); the header still spans the padding box exactly. Pre-clip browsers keep `hidden`. --------------------------------------------------------------------------------------------------------------------- */ html body #sign-in-dialog, html body .small-dialog { overflow: hidden; overflow: clip; } #sign-in-dialog .tabs-container, #sign-in-dialog form { max-width: 100%; } /* Tap targets >= 44px on touch screens: header "Sign In" icon, save button, booking CTA, share links, address link. */ @media (max-width: 991px) { #header a.sign-in, .mobile-nav-icons a.sign-in { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* W5 QA 2026-10-10: Listeo zooms #header .right-side to 0.9 on phones, so 44 CSS px rendered as a 40x40 target; 49 px inside the zoomed box = 44 px on screen. */ #header .right-side a.sign-in { min-width: 49px; min-height: 49px; } .single-listing .like-button-notlogged, .single-listing .like-button { min-height: 44px; } .booking-widget a.button.fullwidth, .booking-widget button.button.fullwidth { min-height: 48px; display: flex; align-items: center; justify-content: center; } ul.share-buttons li a { min-height: 44px; display: inline-flex; align-items: center; } .single-listing a.listing-address { display: inline-flex; align-items: center; min-height: 44px; } .single-listing .sewa-lp-chip { font-size: 14px; } } /* W5 QA 2026-10-10: "Start listing — it's free" (/become-a-partner/, shortcode in cabinet/wizard/register.php) was 41 px high. */ a.button.sewa-partner-cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }