/* ------------------------------------------------------------------ My Local Services UK homepage. NEW FILE, 6 September 2026. Everything is scoped under body.mls-home and every class is prefixed h-, so this file cannot affect any other page even if it is ever linked somewhere by accident. styles_modern.css is NOT touched, so the signup page is unaffected. Palette taken from styles_modern.css so the two pages match. ------------------------------------------------------------------ */ body.mls-home{--hg:#0a5f30;--hg2:#0d7a3d;--hy:#f7c600;--hink:#16211c;--hmut:#5d6b64;--hline:#dfe6e2;--hbg:#f6f8f7} body.mls-home .h-wrap{max-width:1180px;margin:0 auto;padding:0 20px} body.mls-home .h-rule{height:4px;background:var(--hy)} body.mls-home .h-h1{margin:28px 0 0;font-size:21px;line-height:1.25;letter-spacing:-.2px;color:var(--hink);font-weight:700} body.mls-home .h-doors{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:16px 0 8px} /* THE TWO CARDS ARE SYMMETRICAL, 6 September 2026. SR asked for the Search button to line up with Add your business. Done by pinning both action rows to the BOTTOM of their card rather than by counting lines of copy: the grid already makes the two cards equal height, so margin-top:auto puts both rows on the same line whatever happens to the wording above them. Matching the copy line for line would work today and break the first time either lede gains a word. */ body.mls-home .h-door{border:1px solid var(--hline);border-radius:12px;padding:26px;background:#fcfdfc; display:flex;flex-direction:column} body.mls-home .h-door > form, body.mls-home .h-door > .h-row{margin-top:auto} body.mls-home .h-door > form{margin-bottom:0} body.mls-home .h-door p:last-of-type{margin-bottom:20px} body.mls-home .h-door.h-pick{border:2px solid var(--hg);background:#fff;box-shadow:0 3px 14px rgba(10,95,48,.08)} /* align-self added 6 September 2026. The door became a flex column so the action rows could be pinned to the bottom, and a flex item stretches across the cross axis by default, so this inline-block tag went full width and the yellow pill turned into a yellow banner. Caught by looking at the render. */ body.mls-home .h-tag{align-self:flex-start;display:inline-block;background:var(--hy);color:#3a2c00;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;padding:4px 10px;border-radius:4px;margin-bottom:11px} body.mls-home .h-door h2{margin:0 0 6px;font-size:24px;letter-spacing:-.3px;color:var(--hink);line-height:1.2} body.mls-home .h-door h2 em{font-style:normal;color:var(--hg)} body.mls-home .h-door p{margin:0 0 18px;color:var(--hmut);font-size:15px;line-height:1.5} body.mls-home .h-row{display:flex;gap:9px;flex-wrap:wrap} /* ONE EXPLICIT HEIGHT FOR EVERY CONTROL IN THE TWO DOORS, 6 September 2026. SR: the Search button was taller than the two boxes beside it. It was not a padding fault. Rendered in Chromium the input and the button both came out at 45px, so on his machine the difference is the system font's own metrics, Segoe UI against the fallback, feeding a height that is only ever implied by padding plus line box. So the height is stated rather than implied. 46px on the two inputs, the submit and both link buttons, box-sizing is already border-box, so the 2px border on the secondary button costs it nothing. This cannot drift with the font any more. SR chose the button's height and asked the boxes to match it, not the other way round. */ body.mls-home .h-row input[type=text], body.mls-home .h-row input[type=submit], body.mls-home .h-door a.h-btn{height:46px} body.mls-home .h-row input[type=text]{flex:1 1 190px;min-width:150px;padding:0 14px;border:1px solid #c9d4cd;border-radius:7px;font-size:15px;background:#fff;font-family:inherit} body.mls-home .h-btn{background:var(--hg);color:#fff;border:0;border-radius:7px;padding:0 24px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit;text-decoration:none;line-height:1} /* An has no native vertical centring, an does. */ body.mls-home .h-door a.h-btn{display:inline-flex;align-items:center;justify-content:center} body.mls-home .h-btn:hover{background:var(--hg2);color:#fff} body.mls-home .h-btn.h-alt{background:#fff;color:var(--hg);border:2px solid var(--hg);padding:0 22px} body.mls-home .h-btn.h-alt:hover{background:#e8f5ed;color:var(--hg)} /* .h-chips and .h-chip removed 6 September 2026 with the markup that used them. Nothing else on this page uses them. Dead CSS is how a stylesheet stops being readable. */ body.mls-home .h-band{margin:34px 0 0;padding:26px 0;border-top:1px solid var(--hline)} body.mls-home .h-band h2{margin:0 0 14px;font-size:15px;text-transform:uppercase;letter-spacing:.8px;color:var(--hmut);font-weight:700} body.mls-home .h-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:9px} body.mls-home .h-cats a{display:block;text-align:center;border:1px solid var(--hline);border-radius:7px;padding:9px 8px;font-size:13.5px;line-height:1.3;text-decoration:none;color:var(--hink);background:#fcfdfc} body.mls-home .h-cats a:hover{border-color:var(--hg);color:var(--hg)} body.mls-home .h-says{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} body.mls-home .h-quote{border-left:3px solid var(--hy);padding:2px 0 2px 14px;font-size:14.5px;line-height:1.55;color:var(--hink)} body.mls-home .h-quote span{display:block;margin-top:8px;font-size:13px;color:var(--hmut)} body.mls-home .h-recent{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px} body.mls-home .h-rev{border:1px solid var(--hline);border-radius:10px;padding:16px;background:#fcfdfc} body.mls-home .h-rev .h-bn{font-weight:700;font-size:15px;margin-bottom:4px} body.mls-home .h-rev .h-bn a{color:var(--hg);text-decoration:none} body.mls-home .h-rev .h-txt{font-size:14px;color:var(--hmut);line-height:1.5} /* .h-dt is gone from the markup, 6 September 2026. SR: a review headed "recent" and dated nearly a week ago advertises low volume, and the date earned nothing else. */ body.mls-home .h-foot{margin-top:30px;padding:18px 0 26px;border-top:1px solid var(--hline);color:var(--hmut);font-size:13.5px} body.mls-home .h-foot a{color:var(--hg)} @media(max-width:900px){ body.mls-home .h-doors{grid-template-columns:1fr} body.mls-home .h-says{grid-template-columns:1fr 1fr} body.mls-home .h-recent{grid-template-columns:1fr} body.mls-home .h-cats{grid-template-columns:repeat(3,1fr)} } @media(max-width:560px){ body.mls-home .h-says{grid-template-columns:1fr} body.mls-home .h-cats{grid-template-columns:1fr 1fr} body.mls-home .h-door h2{font-size:21px} body.mls-home .h-h1{font-size:19px} } /* Featured businesses. Restored 6 September 2026 at SR's request, as a grid rather than the old one-at-a-time CSS fade slideshow. */ body.mls-home .h-feat{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} body.mls-home .h-fb{display:block;border:1px solid var(--hline);border-radius:10px;padding:14px;background:#fcfdfc;text-decoration:none;color:var(--hink);transition:border-color .15s,box-shadow .15s} body.mls-home .h-fb:hover{border-color:var(--hg);box-shadow:0 2px 10px rgba(10,95,48,.08)} body.mls-home .h-fb-img{display:block;max-width:100%;height:auto;max-height:54px;margin-bottom:10px} body.mls-home .h-fb-name{font-weight:700;font-size:15px;line-height:1.3;margin-bottom:3px;color:var(--hg)} body.mls-home .h-fb-loc{font-size:13px;color:var(--hmut);margin-bottom:8px} body.mls-home .h-fb-txt{font-size:13.5px;color:var(--hmut);line-height:1.5} @media(max-width:1050px){body.mls-home .h-feat{grid-template-columns:repeat(3,1fr)}} @media(max-width:700px){body.mls-home .h-feat{grid-template-columns:repeat(2,1fr)}} @media(max-width:420px){body.mls-home .h-feat{grid-template-columns:1fr}} /* ================================================================== ROUND FOUR, 6 September 2026. "Cleaner and slicker, but still a bit template-like, and something is missing." The measured answer, taken off the live page rather than guessed: every element passed WCAG AA, seventeen out of seventeen, so it was never an accessibility fault. What the page had was NO VALUE CONTRAST. card #fcfdfc vs page #f6f8f7 = 1.05:1 (1.00 is invisible) border #dfe6e2 vs page #f6f8f7 = 1.19:1 the List door's green border = 7.31:1 So one door was six times more visible than the other, and every card below them was doing the same disappearing act. Measured against the three sites SR named: paragraph text gov.uk 19px BBC 18px Yell 20px MLS was 15px header nav link gov.uk 16px BBC 16px Yell 16px MLS was 14px h1 gov.uk 64px BBC 44px Yell 44px MLS was 21px The h1 was also INVERTED: 21px sitting above two 24px door headings. ================================================================== */ /* --- 1. THE HERO BAND. Full width, breaks out of .h-wrap on purpose. --- */ /* The yellow rule at the foot of the hero, 6 September 2026. SR's read of round four was "very green with a tiny bit of yellow", and he is right. The live site has always framed its header in yellow, .m-topbar does it at the very top, and closing the green band with the same 4px bracket puts the brand colour back without turning it into a field. Yellow is an ACCENT here and never a background: at 1.51:1 against white it is too weak to carry text or to outline a box, which is why the yellow border idea for the Find door was dropped. */ body.mls-home .h-hero{background:var(--hg);padding:2px 0 34px;border-bottom:4px solid var(--hy)} body.mls-home .h-in{max-width:1180px;margin:0 auto;padding:0 20px} body.mls-home .h-hero .h-h1{color:#fff;font-size:34px;margin:30px 0 6px;letter-spacing:-.7px} body.mls-home .h-sub{color:#bfe3cd;font-size:17px;margin:0 0 22px;line-height:1.5} body.mls-home .h-hero .h-doors{margin:0} /* Both doors are now white cards on green, so NEITHER needs a border to be seen. That is the fix for the washed out Find box, and it makes the two equal weight. */ body.mls-home .h-hero .h-door, body.mls-home .h-hero .h-door.h-pick{background:#fff;border:1px solid rgba(255,255,255,.25); box-shadow:0 6px 26px rgba(0,0,0,.18)} /* --- 2. LIFT EVERY OTHER CARD OFF THE PAGE --- */ /* The page tint was overridden here, homepage only, which is what gave the homepage and the signup page different backgrounds. SR asked whether that was deliberate: it was a scoping side effect, not a design decision. It is now ONE shared value, --m-bg in styles_modern.css, and the override is gone. See the note on that line for why the value is #e2ebe6 and cannot go darker without failing WCAG AA on muted text. */ body.mls-home .h-fb, body.mls-home .h-rev, body.mls-home .h-cats a{background:#fff;border-color:#ccd9d2; box-shadow:0 1px 2px rgba(16,32,24,.05),0 4px 14px rgba(16,32,24,.06)} /* THE YELLOW BAR, 6 September 2026 at SR's request. He spotted it on the "Why we charge £1" box on the signup page, `.m-honesty`, recognised it from the Trusted Trader social imagery and asked for it here. Same 4px, same yellow. IT CARRIES A RULE, now written into MLS-Style-Guide.md: a card that is CLICKABLE gets the green hover outline, a card that is STATIC CONTENT gets the yellow bar. So featured businesses keep the hover, review cards get the bar, and the two are telling the visitor something rather than just being decorated differently. The testimonial quotes have carried the same bar since the page was built, so this makes them a set of three. IT MUST SIT AFTER THE RULE ABOVE. That rule sets `border-color` on all four sides at the same specificity, so a yellow left border declared any earlier in this file is silently overwritten. That is exactly what happened on the first attempt, and it was caught by measuring the rendered border rather than by reading the CSS. */ body.mls-home .h-rev{border-left:4px solid var(--hy);padding-left:18px} /* --- 3. HEADINGS THAT READ AS HEADINGS --- */ /* Were 15px uppercase muted grey, which read as filing labels. */ body.mls-home .h-band h2{font-size:19px;text-transform:none;letter-spacing:-.2px; color:var(--hink);margin-bottom:16px} body.mls-home .h-band{border-top:0;margin:26px 0 0} /* --- 4. TYPE SIZES, TOWARD GOV.UK, BBC AND YELL --- */ body.mls-home .h-door p{font-size:16px} body.mls-home .h-quote{font-size:15.5px} body.mls-home .h-fb-name{font-size:15.5px} body.mls-home .h-fb-loc{font-size:13.5px} body.mls-home .h-fb-txt{font-size:14.5px} body.mls-home .h-rev .h-bn{font-size:16px} body.mls-home .h-rev .h-txt{font-size:15px} body.mls-home .h-cats a{font-size:14.5px;padding:11px 8px} body.mls-home .h-foot{font-size:14.5px} /* --- 5. THE MISALIGNED HEADER, NOW FIXED AT SOURCE --- */ /* This used to override the shared header to 1180px for the homepage only, because the signup page's content was 1060px and widening its header would have misaligned that page instead. SR then asked for the two pages to be the same width, which is the better answer: 1180px is now the single site-wide container in styles_modern.css and this override is gone. Nothing to do here any more. */ @media(max-width:900px){ body.mls-home .h-hero{padding-bottom:26px} body.mls-home .h-hero .h-h1{font-size:27px;margin-top:24px} body.mls-home .h-sub{font-size:16px} }