patx/rcraft_const

Simplify service areas into clear regional lists

Commit 7607ae8 · patx · 2026-09-22T00:01:41-04:00
Changeset: 7607ae8f8186edf76b35fc9af6d518687f925f31
Parents: 10e5a25eacda9509f8a142615fbc7b2107bf7edb
Comments

No comments yet.
Diff

diff --git a/docs/assets/site.css b/docs/assets/site.css
index b664c9b..44227bc 100644
--- a/docs/assets/site.css
+++ b/docs/assets/site.css
@@ -451,16 +451,11 @@
 
   .areas-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1px;
-    background: rgba(184,146,58,0.15);
-    border: 1px solid rgba(184,146,58,0.15);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 2.5rem;
   }
 
-  .area-card {
-    background: #24241c;
-    padding: 2rem;
-  }
+  .area-card { min-width: 0; }
 
   .area-title {
     font-family: 'Cormorant Garamond', serif;
@@ -470,21 +465,15 @@
   }
 
   .area-list {
-    list-style: none;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.65rem;
-  }
-
-  .area-list li {
-    border: 1px solid rgba(184,146,58,0.25);
     color: var(--light-stone);
-    font-size: 0.75rem;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    padding: 0.55rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.9;
   }
 
+  .areas-enquiry { margin-top: 2rem; color: var(--light-stone); line-height: 1.8; }
+  .areas-enquiry a { color: var(--gold-light); text-underline-offset: 3px; }
+  .area-title a { color: inherit; text-underline-offset: 4px; }
+
   /* PROJECTS */
   #projects {
     padding: 7rem 3rem;
@@ -1047,7 +1036,6 @@
     }
 
     .service-card,
-    .area-card,
     .project-tile {
       padding: 1.75rem 1.25rem;
     }
@@ -1095,12 +1083,8 @@
 
 /* Service and local guides */
 .text-link { display: inline-block; margin-top: 1.25rem; color: var(--gold-light); font-size: 0.85rem; line-height: 1.6; text-decoration: underline; text-underline-offset: 4px; }
+.text-link:hover { color: var(--gold-light); }
 .area-list a { color: inherit; text-underline-offset: 3px; }
-.location-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 0 0 3rem; }
-.location-guides > a { display: block; padding: 1.5rem 0; border-top: 1px solid var(--gold); text-decoration: none; color: var(--cream); }
-.location-guides h3 { font: 400 1.75rem/1.2 'Cormorant Garamond', serif; margin: 0.85rem 0; }
-.location-guides p { font-size: 0.9rem; color: var(--light-stone); line-height: 1.7; }
-.location-guides a:hover h3, .text-link:hover { color: var(--gold-light); }
 .skip-link { position: fixed; left: 1rem; top: -100px; z-index: 1100; padding: 1rem; background: var(--gold); color: var(--dark); }
 .skip-link:focus { top: 1rem; }
 a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
@@ -1151,7 +1135,6 @@ a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-light); o
   .related-section, .detail-enquiry { padding: 3rem 1.5rem; }
 }
 @media (max-width: 600px) {
-  .location-guides { grid-template-columns: 1fr; gap: 0.5rem; }
   .detail-page #hero { padding: 4rem 1rem; }
   .detail-hero h1 { font-size: clamp(2.5rem, 10vw, 3.5rem); }
   .breadcrumbs { margin-bottom: 2rem; }
diff --git a/docs/index.html b/docs/index.html
index e709c82..d2cb4ed 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -174,7 +174,7 @@
   "email": "[email protected]"
 }
 </script>
-<link rel="stylesheet" href="assets/site.css?v=20260910">
+<link rel="stylesheet" href="assets/site.css?v=20260922">
 </head>
 <body>
 
@@ -361,61 +361,24 @@
 
 <section id="areas">
   <div class="section-header">
-    <span class="section-eyebrow">Where We Work</span>
-    <h2>Builders Serving Watford, London &amp; Nearby Areas</h2>
+    <h2>Areas we cover</h2>
   </div>
-  <p class="areas-intro">Based in Watford, R Craft Construction works across local Hertfordshire towns, North and West London, selected South West and East London areas, Bedfordshire, and project locations further out by arrangement. Tell us your postcode and the work you have in mind so we can discuss your project and arrange the next steps.</p>
-<div class="location-guides"><a href="builders-london.html"><h3>Builders in London</h3><p>Planning access, defining the scope and building across the capital.</p><span class="text-link">Explore London <span aria-hidden="true">→</span></span></a><a href="builders-watford.html"><h3>Builders in Watford</h3><p>Our home base, with practical advice for your Hertfordshire project.</p><span class="text-link">Explore Watford <span aria-hidden="true">→</span></span></a><a href="builders-harrow.html"><h3>Builders in Harrow</h3><p>Extensions, loft space and alterations to your existing home.</p><span class="text-link">Explore Harrow <span aria-hidden="true">→</span></span></a></div>
+  <p class="areas-intro">Based in Watford, we work across London, Hertfordshire and Bedfordshire, with projects further afield by arrangement.</p>
   <div class="areas-grid">
     <div class="area-card">
       <h3 class="area-title">Watford &amp; Hertfordshire</h3>
-      <ul class="area-list">
-        <li><a href="builders-watford.html">Watford</a></li>
-        <li>Bushey</li>
-        <li>Northwood</li>
-        <li>Pinner</li>
-        <li>Rickmansworth</li>
-        <li>St Albans</li>
-        <li>Hemel Hempstead</li>
-        <li>Borehamwood</li>
-        <li>Radlett</li>
-      </ul>
+      <p class="area-list"><a href="builders-watford.html">Watford</a>, Bushey, Northwood, Pinner, Rickmansworth, St Albans, Hemel Hempstead, Borehamwood and Radlett.</p>
     </div>
     <div class="area-card">
-      <h3 class="area-title">London Service Areas</h3>
-      <ul class="area-list">
-        <li>Ealing</li>
-        <li>Brentford</li>
-        <li>Chiswick</li>
-        <li>Acton</li>
-        <li>Hammersmith</li>
-        <li>Battersea Park</li>
-        <li>Walthamstow</li>
-        <li><a href="builders-harrow.html">Harrow</a></li>
-        <li>Barnet</li>
-        <li>Edgware</li>
-        <li>Finchley</li>
-        <li>Wembley</li>
-        <li>Camden</li>
-        <li>Islington</li>
-      </ul>
+      <h3 class="area-title"><a href="builders-london.html">London</a></h3>
+      <p class="area-list">Ealing, Brentford, Chiswick, Acton, Hammersmith, Battersea Park, Walthamstow, <a href="builders-harrow.html">Harrow</a>, Barnet, Edgware, Finchley, Wembley, Camden and Islington.</p>
     </div>
     <div class="area-card">
-      <h3 class="area-title">Wider Coverage</h3>
-      <ul class="area-list">
-        <li>Luton</li>
-        <li>Dunstable</li>
-        <li>Hitchin</li>
-        <li>Stevenage</li>
-        <li>Uxbridge</li>
-        <li>Enfield</li>
-        <li>Twickenham</li>
-        <li>Richmond</li>
-        <li>Harston</li>
-        <li>Cambridgeshire</li>
-      </ul>
+      <h3 class="area-title">Further afield</h3>
+      <p class="area-list">Luton, Dunstable, Hitchin, Stevenage, Uxbridge, Enfield, Twickenham, Richmond and Harston (Cambridgeshire).</p>
     </div>
   </div>
+  <p class="areas-enquiry">Not sure if we cover your address? <a href="#contact">Send us your postcode and project details</a>.</p>
 </section>
 
 <section id="contact">