/* ============================================================================ Area pages — /dry-cleaning- ============================================================================ ⚠ THIS FILE IS ENQUEUED BY template-locality.php ALONE. No other page on the site requests a byte of it. That is deliberate, and it is a constraint rather than a preference: - The area pages are un-approved drafts reviewable only on staging, and staging shares production's DATABASE, so WordPress resolves theme asset URLs against qsec.in. A staging page therefore loads PRODUCTION's stylesheet. New rules added to assets/css/style.css would not reach the only host where these drafts can be seen — and rules for six pages that 404 have no business in the stylesheet all 27 live URLs download. - So the file ships to production (it must, for staging to fetch it) and is loaded by nothing there. Zero bytes on any live page. EVERY SELECTOR IS PREFIXED .loc- SO IT CANNOT COLLIDE with the 1,400 lines of style.css. Colours, type and spacing are taken from the existing token set — no new palette is invented here; the whole point is that these pages read as the same site. THE DESIGN, IN ONE LINE: the page is organised around one geographic fact at three zooms — the studio (a point), the area (a set of chips), the city (neighbouring areas) — and the coverage band is the signature. ⚠ NO MAP EMBED, ON PURPOSE. ops/seo-audit-v2.md measured /locations' two map iframes at 1.25 MB of third-party JavaScript, and warned that repeating that per area page was the single thing to fix before scaling. A map also answers "where is the shop" when the reader's question is "do you come to ME" — which the chips answer, scannably, at ~2 KB. If a map is ever wanted here, it must be a click-to-load facade, never a raw iframe. ========================================================================= */ /* ---- Hero additions ------------------------------------------------------- .svc-hero itself is reused verbatim from the service pages, so an area page is recognisably the same furniture the moment it loads. Only the things a service page has no need for are added: the proximity badge and a CTA pair. */ /* .svc-hero is fixed at 21/9 with max-height:340px, which is right for a page whose hero holds a breadcrumb and an H1. This one also holds a badge, a supporting line and two buttons, and at 340px the CTAs were pressed against the bottom edge. The area variant gets room rather than smaller type. */ .svc-hero.loc-hero{max-height:none;min-height:390px;aspect-ratio:auto} .svc-hero.loc-hero .container{padding-top:34px;padding-bottom:34px} .loc-hero-sub{color:rgba(255,255,255,.82);font-size:15.5px;line-height:1.5;max-width:52ch;margin-top:10px} .loc-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(181,218,60,.16);border:1px solid rgba(181,218,60,.45);color:#dff09a;border-radius:999px;padding:5px 13px;font-size:12px;font-weight:600;letter-spacing:.01em;margin-bottom:4px} .loc-hero-badge svg{width:14px;height:14px;flex-shrink:0} .loc-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} /* .btn-secondary is built for white sections — a light border and dark text. Dropped straight onto the hero photograph it read as an empty rectangle. */ .loc-hero-cta .btn-secondary{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(2px)} .loc-hero-cta .btn-secondary:hover{background:rgba(255,255,255,.18);border-color:#fff} /* ---- ★ THE COVERAGE BAND — the signature block ---------------------------- Two panels on one purple ground: the studio as a card, and the area as chips. The asymmetry is the information — one point, many places. */ .loc-cover{background:var(--purple);color:#fff;position:relative;overflow:hidden} .loc-cover::before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(181,218,60,.10);filter:blur(70px);top:-200px;right:-80px;pointer-events:none} .loc-cover>.container{position:relative;z-index:1} .loc-cover-grid{display:grid;grid-template-columns:minmax(280px,.85fr) 1.15fr;gap:28px;align-items:stretch} .loc-studio{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:24px} .loc-studio h3{font-size:19px;color:#fff;margin-bottom:4px;line-height:1.2} .loc-studio .loc-studio-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--neon);margin-bottom:10px} .loc-studio-row{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.76);margin-bottom:9px} .loc-studio-row svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--neon)} .loc-studio-row a{color:inherit;text-decoration:underline;text-underline-offset:2px} .loc-studio-note{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.7)} .loc-areas h3{font-size:19px;color:#fff;margin-bottom:6px} .loc-areas>p{font-size:14px;color:rgba(255,255,255,.7);margin-bottom:16px;max-width:56ch} /* The chips. This is the block a reader scans for their own street name, so it is the one thing on the page tuned purely for scanning speed: high contrast, generous hit area, no decoration competing with the words. */ .loc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;padding:0;list-style:none} .loc-chips li{margin:0} /* ⚠ NOT INTERACTIVE, and styled so it does not pretend to be. These were given a hover lift in the first pass; that is a lie about affordance — there is nowhere for a chip to go, and a 44px tap target would be meaningless. They are labels a reader scans, so they get contrast and spacing and nothing else. */ .loc-chip{display:inline-flex;align-items:center;min-height:34px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);font-size:13.5px;font-weight:500;color:#fff} /* Pincodes are DATA, so they are set as data: tabular figures, aligned, in the utility face. They are also the single most checkable thing on the page. */ .loc-pins{display:flex;flex-wrap:wrap;gap:7px;padding:0;list-style:none;margin:0 0 16px} .loc-pins li{font-family:'Satoshi',sans-serif;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--neon);background:rgba(181,218,60,.12);border:1px solid rgba(181,218,60,.3);border-radius:6px;padding:4px 9px} .loc-cover-ask{font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.6} .loc-cover-ask a{color:var(--neon);text-decoration:underline;text-underline-offset:2px} /* ---- Services grid -------------------------------------------------------- Card language borrowed from .q27-benefit rather than invented, so this reads as the same system. Nine cards, every service, every area — the pages differ in EMPHASIS (below), never in what is available. */ /* Nine services, so the grid is capped at THREE columns on wide screens: 3×3 lands evenly, where auto-fill gave 4/4/1 and left one card stranded. The count is a fact about the catalogue, so the layout may as well know it. */ .loc-svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px} @media(min-width:820px){.loc-svc-grid{grid-template-columns:repeat(3,1fr)}} .loc-svc{display:flex;gap:13px;align-items:flex-start;padding:16px 17px;border-radius:13px;background:#fff;border:1px solid var(--border);text-decoration:none;color:inherit;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease} .loc-svc:hover{border-color:var(--neon);box-shadow:0 8px 22px rgba(55,39,114,.08);transform:translateY(-2px)} .loc-svc-ico{width:38px;height:38px;border-radius:10px;background:var(--neon);color:var(--dark);display:flex;align-items:center;justify-content:center;flex-shrink:0} .loc-svc-ico i,.loc-svc-ico svg{width:19px;height:19px} .loc-svc h3{font-size:14.5px;font-weight:700;margin-bottom:3px;line-height:1.25} .loc-svc p{font-size:13px;line-height:1.5;color:var(--text-secondary);margin:0} /* ---- Area highlight — the three angles ------------------------------------ The only section whose CONTENT differs completely between areas, so it gets the only accent rail on the page. One boldness, spent once. */ .loc-angles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} .loc-angle{background:#fff;border:1px solid var(--border);border-left:3px solid var(--neon);border-radius:0 14px 14px 0;padding:22px 24px} .loc-angle h3{font-size:16.5px;margin-bottom:8px;line-height:1.3} .loc-angle p{font-size:14.5px;line-height:1.65;color:var(--text-secondary);margin-bottom:12px} .loc-angle a{font-size:13.5px;font-weight:600;color:var(--neon-deep);text-decoration:none;display:inline-flex;align-items:center;gap:5px} .loc-angle a:hover{text-decoration:underline;text-underline-offset:3px} /* ---- Nearby areas --------------------------------------------------------- Plain, on purpose. It is navigation, not a pitch. */ .loc-nearby{display:flex;flex-wrap:wrap;gap:10px;padding:0;list-style:none;margin:0} .loc-nearby a{display:inline-flex;align-items:center;min-height:44px;gap:8px;padding:10px 18px;border-radius:10px;background:#fff;border:1px solid var(--border);font-size:14px;font-weight:600;color:var(--text);text-decoration:none;transition:border-color .2s ease,color .2s ease} .loc-nearby a:hover{border-color:var(--neon);color:var(--neon-deep)} /* ---- Two-column prose + why ---------------------------------------------- */ /* Separated from the steps above it by a rule, not just space — without one it read as a fourth, unnumbered step rather than a summary of the whole thing. */ .loc-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:34px;padding-top:28px;border-top:1px solid var(--border)} .loc-why div{display:flex;gap:11px;align-items:flex-start} .loc-why svg{width:19px;height:19px;color:var(--neon-deep);flex-shrink:0;margin-top:2px} .loc-why h4{font-size:14.5px;margin-bottom:3px} .loc-why p{font-size:13.5px;line-height:1.6;color:var(--text-secondary);margin:0} /* ---- Responsive ----------------------------------------------------------- 360 / 390 / 414 are the widths that matter here; the coverage band is the only thing with a real two-column dependency and it stacks first. */ @media(max-width:900px){ .loc-cover-grid{grid-template-columns:1fr;gap:20px} } @media(max-width:600px){ .loc-hero-sub{font-size:14.5px} .loc-hero-cta .btn{flex:1 1 auto;justify-content:center} .loc-studio,.loc-angle{padding:18px 18px} .loc-angle{border-radius:0 12px 12px 0} .loc-svc{padding:14px} .loc-chip{font-size:13px;padding:6px 12px} .loc-nearby a{width:100%} } @media(prefers-reduced-motion:reduce){ .loc-svc{transition:none} .loc-svc:hover{transform:none} } /* Keyboard focus must be visible on every interactive element added here — style.css sets none of these, so they inherit the browser default and that default is invisible against the purple band. */ .loc-svc:focus-visible,.loc-nearby a:focus-visible, .loc-angle a:focus-visible,.loc-studio-row a:focus-visible{outline:2px solid var(--neon);outline-offset:2px;border-radius:6px}