/* ========================================================================== styles_search.css REWRITTEN 8 September 2026, second pass. Phase 3 of MLS-Revitalisation-Plan.md. For search.php ONLY, the catch-all that serves the category, location, company and portal pages. Opted in with body class="mls-modern mls-search", so styles_modern.css must load first for the palette and the header. WHY THIS IS A REWRITE. The first pass was scoped "header, palette and type only", leaving the three column layout alone. Uploaded and reviewed the same afternoon: "basically the same page as before, buttons on left, forum content on right no longer looks right." Correct. Recolouring a 2010 layout leaves a 2010 layout. This pass changes the layout: OUT the "Business forum discussions" panel that filled the right column with unrelated thumbnails, so the page read as two websites at once OUT the six stacked green buttons in the left column, every link of which is already in the modern header or the footer, so nothing is lost OUT the "Forum Showcase" button OUT the duplicate "Search results" line sitting under the H1 IN a two column CSS grid: results wide on the left, one quiet 300px sidebar on the right IN sidebar panel one, the same category in nearby towns, deterministic IN sidebar panel two, the three actions worth having as real buttons WHY GRID AND NOT FLOATS. Grid lets the sidebar sit AFTER the results in the source and still render on the right. That puts the results first for a crawler and first on a phone, which floats could not do without duplicating markup. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE PAGE FRAME styles_modern.css strips .main_page in its neutraliser, so it is rebuilt here as the grid rather than restored as a plain container. -------------------------------------------------------------------------- */ body.mls-modern.mls-search .main_page{ max-width:1180px;margin:0 auto;padding:16px 20px 44px;background:none; display:grid; grid-template-columns:minmax(0,1fr) 300px; grid-template-areas:"crumbs crumbs" "main side"; column-gap:34px; align-items:start; } body.mls-modern.mls-search .breadcrumbs{grid-area:crumbs} /* .column-center is display:inline-block;width:82% in styles_new.css. As a grid item it is blockified automatically, but the percentage width is not, so it is cleared explicitly. min-width:0 stops a long category list forcing the column wider than its track, which is the classic grid overflow. */ body.mls-modern.mls-search .column-center{ grid-area:main;width:auto;max-width:none;min-width:0;display:block;float:none;margin:0 } /* .column-right is float:right;width:20-25% in styles_new.css, and display:none below its breakpoint. Both are overridden. */ body.mls-modern.mls-search .column-right{ grid-area:side;width:auto;min-width:0;display:block;float:none;margin:0; position:sticky;top:16px } /* The left menu is gone from the markup on this page. This is belt and braces in case a cached copy of the old search.php is served during the rollout. */ body.mls-modern.mls-search .menu_left{display:none} /* One column below 980px: results, then sidebar underneath. The sidebar is not printed at all for deviceType 'phone', so this covers tablets and narrow desktop windows. */ @media(max-width:980px){ body.mls-modern.mls-search .main_page{ grid-template-columns:minmax(0,1fr); grid-template-areas:"crumbs" "main" "side"; row-gap:8px } body.mls-modern.mls-search .column-right{position:static;margin-top:14px} } /* -------------------------------------------------------------------------- 2. TYPE -------------------------------------------------------------------------- */ body.mls-modern.mls-search h1, body.mls-modern.mls-search .search_results_h1{ font-size:34px;line-height:1.15;font-weight:700;color:var(--m-ink); letter-spacing:-.5px;margin:0 0 4px } @media(max-width:900px){body.mls-modern.mls-search h1, body.mls-modern.mls-search .search_results_h1{font-size:27px}} body.mls-modern.mls-search h2{font-size:19px;font-weight:700;color:var(--m-ink);margin:22px 0 12px} /* "Search results" printed under an H1 that already says what the results are. It told the visitor nothing and it was the second largest thing on the page. */ body.mls-modern.mls-search .search_results_near{display:none} body.mls-modern.mls-search .showing_results{font-size:15px;color:var(--m-muted); text-align:left;margin:0 0 16px} body.mls-modern.mls-search .breadcrumbs{font-size:13px;color:var(--m-muted);margin:0 0 12px} body.mls-modern.mls-search .breadcrumblink{display:inline} body.mls-modern.mls-search .breadcrumbs a{color:var(--m-muted);text-decoration:none} body.mls-modern.mls-search .breadcrumbs a:hover{color:var(--m-green);text-decoration:underline} /* Links at a weight BELOW any component that styles its own. Same :where() trick as the shell block, for the same reason: a 0,3,1 rule here would outrank the result card, the Full details button and the pagination, which is exactly how the green-on-green button happened on checkout1. */ :where(body.mls-modern.mls-search) .column-center a{color:var(--m-green)} /* -------------------------------------------------------------------------- 3. THE SORT CONTROL -------------------------------------------------------------------------- */ body.mls-modern.mls-search .order_by{font-size:15px;color:var(--m-muted); margin:0 0 18px;display:flex;align-items:center;gap:8px} body.mls-modern.mls-search .order_by label{font-weight:600} body.mls-modern.mls-search .select_search, body.mls-modern.mls-search .order_by select{font-family:inherit;font-size:15px;height:40px; padding:0 10px;border:1px solid var(--m-line);border-radius:9px;background:#fff;color:var(--m-ink)} body.mls-modern.mls-search .order_by select:focus{outline:2px solid var(--m-green);outline-offset:1px} /* -------------------------------------------------------------------------- 4. THE RESULT CARDS The whole card is one link, so the card itself carries the hover. -------------------------------------------------------------------------- */ body.mls-modern.mls-search .search_results ul{padding:0;margin:0} body.mls-modern.mls-search .search_results li a{ border:1px solid var(--m-line);border-radius:12px;background:#fff; padding:16px 18px;margin-bottom:14px;color:var(--m-ink); box-shadow:0 1px 2px rgba(16,32,24,.05); transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease } body.mls-modern.mls-search .search_results li a:hover{ border-color:var(--m-green);transform:translateY(-1px); box-shadow:0 2px 6px rgba(16,32,24,.08),0 10px 26px rgba(16,32,24,.10) } body.mls-modern.mls-search .search_results li a.bus_premium{ border-color:#f0dd9a;background:#fffdf5 } body.mls-modern.mls-search .search_results li a.bus_premium:hover{border-color:var(--m-green)} body.mls-modern.mls-search .search_results_bus_name{ font-size:19px;font-weight:700;color:var(--m-ink);line-height:1.25;display:block;margin-bottom:2px} body.mls-modern.mls-search .search_results li a:hover .search_results_bus_name{color:var(--m-green)} /* The sponsored line, a pill rather than loose amber text. */ body.mls-modern.mls-search .search_results_sponsored{ display:inline-block;font-size:12px;font-weight:700;letter-spacing:.03em; color:#6b5200;background:#fdf3d4;border-radius:20px;padding:2px 9px;margin:2px 0 4px} body.mls-modern.mls-search .search_results_distance{ font-size:14px;color:var(--m-muted);padding-left:16px;margin:2px 0 6px;display:block} body.mls-modern.mls-search .results_categories{font-size:14px;color:var(--m-muted);line-height:1.55} body.mls-modern.mls-search .search_results_reviews{font-size:14px;color:var(--m-muted)} /* The Full details button, matched to the modern button in styles_modern.css. */ body.mls-modern.mls-search .button_search_results{ background:var(--m-green);border:1px solid var(--m-green);color:#fff; font-weight:700;font-size:14px;padding:7px 14px;border-radius:9px} body.mls-modern.mls-search .search_results li a:hover .button_search_results{ background:var(--m-green-dk);border-color:var(--m-green-dk);color:#fff} /* -------------------------------------------------------------------------- 5. PAGINATION -------------------------------------------------------------------------- */ body.mls-modern.mls-search .pagination{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center} body.mls-modern.mls-search .pagination a, body.mls-modern.mls-search .pagination_no_link{ border:1px solid var(--m-line);border-radius:9px;color:var(--m-green); padding:6px 12px;font-weight:600;text-decoration:none;line-height:1.2} body.mls-modern.mls-search .pagination a:hover{border-color:var(--m-green);background:var(--m-green-lt)} body.mls-modern.mls-search .pagination_no_link{ background:var(--m-green);border-color:var(--m-green);color:#fff} /* -------------------------------------------------------------------------- 6. THE SIDEBAR Panel treatment 2 from MLS-Style-Guide.md section 6: a bordered white panel, no lift, because the panel is not itself a link. Only the rows inside are. -------------------------------------------------------------------------- */ body.mls-modern.mls-search .side_card{ background:#fff;border:1px solid var(--m-line);border-radius:12px; padding:16px 18px;margin:0 0 16px; box-shadow:0 1px 2px rgba(16,32,24,.05)} body.mls-modern.mls-search .side_card_head{ font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--m-muted);margin:0 0 12px;padding-bottom:10px; border-bottom:1px solid var(--m-line)} body.mls-modern.mls-search .side_links{list-style:none;padding:0;margin:0} body.mls-modern.mls-search .side_links li{margin:0} body.mls-modern.mls-search .side_links li + li{border-top:1px solid #eef3f0} body.mls-modern.mls-search .side_links a{ display:block;padding:9px 0;font-size:15px;font-weight:600;line-height:1.35; color:var(--m-ink);text-decoration:none} body.mls-modern.mls-search .side_links a:hover{color:var(--m-green)} body.mls-modern.mls-search .side_links_in{font-weight:400;color:var(--m-muted)} body.mls-modern.mls-search .side_links a:hover .side_links_in{color:var(--m-green)} body.mls-modern.mls-search .side_links_plain{margin-top:12px;border-top:1px solid var(--m-line);padding-top:4px} body.mls-modern.mls-search .side_links_plain a{font-weight:400;font-size:14px;color:var(--m-muted)} body.mls-modern.mls-search .side_links_plain a:hover{color:var(--m-green)} body.mls-modern.mls-search .side_action{ display:block;text-align:center;font-size:15px;font-weight:700; padding:11px 12px;border-radius:9px;margin:0 0 9px;text-decoration:none; border:1px solid var(--m-green);background:#fff;color:var(--m-green); transition:background .15s ease,color .15s ease,border-color .15s ease} body.mls-modern.mls-search .side_action:hover{background:var(--m-green-lt)} body.mls-modern.mls-search .side_action_primary{background:var(--m-green);color:#fff} body.mls-modern.mls-search .side_action_primary:hover{ background:var(--m-green-dk);border-color:var(--m-green-dk);color:#fff} /* -------------------------------------------------------------------------- 7. THE AD SLOT #adblock2 is the AdSense for Search unit and it is 74.8% of the account. It is made to LOOK like a result card so the sponsored unit reads as part of the page rather than as something bolted into it, and it is NOT touched in any other way. No display, no position, no size, no script. Two inline styles in search.php have to be beaten, hence the !important on this block and nowhere else in this file. The wrapper carries padding-right:20px, which is what made the ad box 786px wide while the result cards next to it were 806px, so it never lined up on the right hand edge. The unit itself carries a 2px #D5D5D5 border, a 5px radius and 8px of padding, which is the old card treatment. Both are overridden to the values the result cards use: 1px --m-line, 12px radius, 16px/18px padding, 14px below. The inline styles are left in the markup rather than edited out, so the ad still renders correctly on any page or cached copy that does not have this stylesheet. -------------------------------------------------------------------------- */ body.mls-modern.mls-search .search_results .option_box{ padding:0 !important;margin:0 0 14px !important;border:0 !important} body.mls-modern.mls-search #adblock2{ border:1px solid var(--m-line) !important; border-radius:12px !important; padding:16px 18px !important; background:#fff; box-shadow:0 1px 2px rgba(16,32,24,.05)} /* -------------------------------------------------------------------------- 8. THE CATEGORY CONTENT BLOCK, added 8 September 2026. `.search_content` is the drill-down content SR wrote in an SEO exercise years ago and had forgotten about. It is arbitrary TinyMCE HTML pulled from `drill_down_content` and printed between the results list and the pagination, and it carried NO styling at all: the only legacy rule in styles_new.css is `.search_content li{list-style-type:decimal}`. On the old layout nobody noticed. On the new one it lands under a column of tidy cards as raw browser-default HTML, so it needs a treatment or it undoes the redesign on every category that has content. Read as an article rather than as page furniture: a rule to separate it from the results, a 720px measure because 806px of 16px text is about 100 characters a line and too wide to read comfortably, and a heading scale that starts BELOW the page H1 so a stray h1 in the pasted content cannot compete with "Builders near London". Whether this content should exist at all in 2026 is a separate question and is owned by `MLS\MLS-Category-Content.md`. This block only makes it look like part of the site. -------------------------------------------------------------------------- */ body.mls-modern.mls-search .search_content{ max-width:720px;margin:34px 0 0;padding:28px 0 0; border-top:1px solid var(--m-line); font-size:16px;line-height:1.7;color:var(--m-ink)} body.mls-modern.mls-search .search_content p{margin:0 0 16px} body.mls-modern.mls-search .search_content h1, body.mls-modern.mls-search .search_content h2{ font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.3px; color:var(--m-ink);margin:28px 0 12px} body.mls-modern.mls-search .search_content h3{ font-size:19px;font-weight:700;line-height:1.3;color:var(--m-ink);margin:24px 0 10px} body.mls-modern.mls-search .search_content h4, body.mls-modern.mls-search .search_content h5{ font-size:17px;font-weight:700;color:var(--m-ink);margin:20px 0 8px} body.mls-modern.mls-search .search_content > *:first-child{margin-top:0} body.mls-modern.mls-search .search_content img{ max-width:100%;height:auto;border-radius:12px;display:block;margin:0 0 22px} body.mls-modern.mls-search .search_content a{color:var(--m-green);text-decoration:underline} body.mls-modern.mls-search .search_content a:hover{color:var(--m-green-dk)} body.mls-modern.mls-search .search_content ul, body.mls-modern.mls-search .search_content ol{margin:0 0 16px;padding-left:22px} /* styles_new.css forces list-style-type:decimal on every li in here, bullets included, so a plain bulleted list came out numbered. */ body.mls-modern.mls-search .search_content ul li{list-style-type:disc} body.mls-modern.mls-search .search_content li{margin:0 0 6px} body.mls-modern.mls-search .search_content strong, body.mls-modern.mls-search .search_content b{font-weight:700;color:var(--m-ink)} body.mls-modern.mls-search .search_content table{ width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px} body.mls-modern.mls-search .search_content td, body.mls-modern.mls-search .search_content th{ border:1px solid var(--m-line);padding:8px 10px;text-align:left}