/* ========================================================================== 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:16px;color:var(--m-muted); text-align:left;margin:0 0 16px} body.mls-modern.mls-search .breadcrumbs{font-size:15px;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:16px;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:16px;height:42px; 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) } /* SPONSORED CARDS, changed with the ground on 8 September 2026. The cream fill #fffdf5 was lighter than the old green ground so it read as a lift. On eggshell it is DARKER than the white cards beside it, which inverts the hierarchy: the sponsored listing would look recessed rather than promoted. White card, yellow edge instead, so it still stands out and still stands forward. */ /* 2px and a stronger amber, 8 September 2026. SR: sponsored listings "need to make them stand out a bit more as they are no longer yellow". Correct: the cream fill used to do the signalling and a 1px edge in the same weight as every other card cannot replace it. Doubling the border is the honest fix, because it makes the card itself the signal rather than adding another badge to a card that already has one. */ body.mls-modern.mls-search .search_results li a.bus_premium{ border:2px solid #dcae2e;background:#fff;padding:15px 17px } 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:14px;font-weight:700;letter-spacing:.02em; color:#5f4900;background:#fbeab4;border-radius:20px;padding:4px 12px;margin:3px 0 6px} body.mls-modern.mls-search .search_results_distance{ font-size:16px;color:var(--m-muted);padding-left:16px;margin:2px 0 6px;display:block} body.mls-modern.mls-search .results_categories{font-size:16px;color:var(--m-muted);line-height:1.55} body.mls-modern.mls-search .search_results_reviews{font-size:16px;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:16px;padding:9px 16px;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 MOVED OUT OF THIS FILE, 8 September 2026, when details_new.php was converted and needed exactly the same cards. The .side_card, .side_action and .side_links rules now live in styles_modern.css under plain `body.mls-modern` so BOTH pages get them from one place. Two copies that have to be kept in step is the drift trap, and one page's sidebar quietly diverging from the other's is precisely how it would show up. Nothing page-specific was lost: the rules were identical either way, which was proved by re-rendering the search fixture after the move and comparing. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 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} /* -------------------------------------------------------------------------- 9. AT A GLANCE, AND WHAT CUSTOMERS SAID. Added 8 September 2026. The replacement for the drill-down content removed the same day, built to the rule in MLS\MLS-Category-Content.md section 7: if a sentence could appear unchanged on a competitor's site, it does not go on ours. Same article measure as the dormant .search_content treatment above, so if the two ever appear together they read as one piece rather than two. The quote cards take the YELLOW left bar rather than the green hover of a result card. That is the house rule set on the homepage: a card that LINKS somewhere gets the green treatment, a card that is STATIC CONTENT gets the yellow bar. A quote is content, so it does not lift, glow or change on hover, and only the business name inside it is a link. -------------------------------------------------------------------------- */ body.mls-modern.mls-search .page_glance{ max-width:720px;margin:34px 0 0;padding:28px 0 0; border-top:1px solid var(--m-line); font-size:16px;line-height:1.65;color:var(--m-ink)} body.mls-modern.mls-search .page_glance h2{ font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.3px; color:var(--m-ink);margin:0 0 10px} body.mls-modern.mls-search .page_glance h3{ font-size:17px;font-weight:700;color:var(--m-ink);margin:26px 0 12px} body.mls-modern.mls-search .page_glance > p{margin:0;color:var(--m-muted)} body.mls-modern.mls-search .page_glance > p strong{color:var(--m-ink);font-weight:700} /* The quote bar went GREEN on 8 September 2026 with the ground change. The house rule that produced the yellow bar still stands, a card that is static content gets a coloured bar rather than a hover, but yellow is 1.43:1 on this ground and 1.61:1 on white, so it stopped being able to carry the job. Green is 5.43:1 on white. THE RULE IS NOW: yellow works as a FILL behind dark text, the tag pill, the Search button, the top bar over green. It does not work as a thin bar on a light ground. */ body.mls-modern.mls-search .page_quote{ margin:0 0 12px;padding:14px 16px; background:#fff;border:1px solid var(--m-line); border-left:4px solid var(--m-green);border-radius:10px} body.mls-modern.mls-search .page_quote p{ margin:0 0 8px;font-size:16px;line-height:1.6;color:var(--m-ink)} body.mls-modern.mls-search .page_quote p:before{content:"\201C"} body.mls-modern.mls-search .page_quote p:after{content:"\201D"} body.mls-modern.mls-search .page_quote cite{ display:block;font-style:normal;font-size:15px;color:var(--m-muted)} body.mls-modern.mls-search .page_quote cite a{color:var(--m-green);font-weight:600;text-decoration:none} body.mls-modern.mls-search .page_quote cite a:hover{text-decoration:underline}