patx/rcraft_const

Match service area cards to the services layout

Commit 5d1cb29 · patx · 2026-09-22T00:03:26-04:00
Changeset: 5d1cb2926e63ff79eb93580231c0fc9937ff0928
Parents: 7607ae8f8186edf76b35fc9af6d518687f925f31
Comments

No comments yet.
Diff

diff --git a/docs/assets/site.css b/docs/assets/site.css
index 44227bc..984e1cf 100644
--- a/docs/assets/site.css
+++ b/docs/assets/site.css
@@ -449,30 +449,9 @@
     margin-bottom: 3rem;
   }
 
-  .areas-grid {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 2.5rem;
-  }
-
-  .area-card { min-width: 0; }
-
-  .area-title {
-    font-family: 'Cormorant Garamond', serif;
-    font-size: 1.35rem;
-    color: var(--white);
-    margin-bottom: 1rem;
-  }
 
-  .area-list {
-    color: var(--light-stone);
-    font-size: 1rem;
-    line-height: 1.9;
-  }
+  .areas-enquiry { max-width: 900px; margin-top: 2rem; color: var(--light-stone); font-size: 0.95rem; line-height: 1.8; }
 
-  .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 {
@@ -829,9 +808,6 @@
       grid-template-columns: repeat(2, 1fr);
     }
 
-    .areas-grid {
-      grid-template-columns: 1fr;
-    }
 
     footer {
       padding: 2rem 1.5rem;
@@ -1029,7 +1005,6 @@
     }
 
     .services-grid,
-    .areas-grid,
     .projects-mosaic,
     .form-row {
       grid-template-columns: 1fr;
@@ -1084,7 +1059,7 @@
 /* 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; }
+
 .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; }
diff --git a/docs/index.html b/docs/index.html
index d2cb4ed..d05fb5d 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=20260922">
+<link rel="stylesheet" href="assets/site.css?v=20260922b">
 </head>
 <body>
 
@@ -364,21 +364,24 @@
     <h2>Areas we cover</h2>
   </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>
-      <p class="area-list"><a href="builders-watford.html">Watford</a>, Bushey, Northwood, Pinner, Rickmansworth, St Albans, Hemel Hempstead, Borehamwood and Radlett.</p>
+  <div class="services-grid">
+    <div class="service-card">
+      <h3 class="service-title">Watford &amp; Hertfordshire</h3>
+      <p class="service-desc">Our home base, covering Bushey, Northwood, Pinner, Rickmansworth, St Albans, Hemel Hempstead, Borehamwood and Radlett.</p>
+      <a class="text-link" href="builders-watford.html">Explore Watford <span aria-hidden="true">→</span></a>
     </div>
-    <div class="area-card">
-      <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 class="service-card">
+      <h3 class="service-title">London</h3>
+      <p class="service-desc">Building across Ealing, Brentford, Chiswick, Acton, Hammersmith, Battersea Park, Walthamstow, Barnet, Edgware, Finchley, Wembley, Camden and Islington.</p>
+      <a class="text-link" href="builders-london.html">Explore London <span aria-hidden="true">→</span></a>
     </div>
-    <div class="area-card">
-      <h3 class="area-title">Further afield</h3>
-      <p class="area-list">Luton, Dunstable, Hitchin, Stevenage, Uxbridge, Enfield, Twickenham, Richmond and Harston (Cambridgeshire).</p>
+    <div class="service-card">
+      <h3 class="service-title">Harrow</h3>
+      <p class="service-desc">Extensions, loft conversions and alterations to existing homes. Find out what to prepare and how to plan your building project.</p>
+      <a class="text-link" href="builders-harrow.html">Explore Harrow <span aria-hidden="true">→</span></a>
     </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>
+  <p class="areas-enquiry">We also cover Luton, Dunstable, Hitchin, Stevenage, Uxbridge, Enfield, Twickenham, Richmond and Harston (Cambridgeshire). For other locations, include your postcode when you enquire.</p>
 </section>
 
 <section id="contact">