From 33db3c91c79e969b972918e5b24b9fff931751ec Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Fri, 20 Jun 2025 15:15:59 +0100
Subject: [PATCH] Style metadata slice

---
 assets/css/app.css | 44 ++++++++++++++++++++++++++++++++++++++++++--
 index.html         | 44 +++++++++++++++++++++++---------------------
 2 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 815d681..686f5bf 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -23,13 +23,15 @@
   --space-xxl:  calc(5.25 * var(--space-unit));
 
   --cotech-white: white;
-  --cotech-grey: #1e2637;
+  --cotech-light-grey: #f7f7f5;
+  --cotech-grey: #7b8290;
+  --cotech-dark-grey: #1e2637;
   --cotech-blue: #38aad5;
 }
 
 p, li, a {
   font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-  color: var(--cotech-grey);
+  color: var(--cotech-dark-grey);
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -103,3 +105,41 @@ h1, h2, h3, h4, h5, h6 {
 .hero_button a {
   color: var(--cotech-white);
 }
+
+.slice {
+  width: 100%;
+  padding: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-sm);
+  text-align: center;
+}
+
+.slice--light-grey {
+  background-color: var(--cotech-light-grey);
+}
+
+.metadata {
+  display: flex;
+  gap: var(--space-xl);
+}
+
+.metadata_item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.metadata_heading {
+  font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  text-transform: uppercase;
+  color: var(--cotech-grey);
+  font-size: 0.95rem;
+  letter-spacing: 0.02em;
+}
+
+.metadata_value {
+  font-size: 2.2rem;
+  letter-spacing: 0.02em;
+}
diff --git a/index.html b/index.html
index 50179d3..85bcdc3 100644
--- a/index.html
+++ b/index.html
@@ -3,33 +3,35 @@ title: CoTech
 layout: home
 ---
 
-<section>
-  <div>
-    <h6>Co-ops</h6>
-    <h5>{{ site.coops.size }}</h5>
-  </div>
+<section class="slice slice--light-grey">
+  <div class="metadata">
+    <div class="metadata_item">
+      <h6 class="metadata_heading">Co-ops</h6>
+      <h5 class="metadata_value">{{ site.coops.size }}</h5>
+    </div>
 
-  <div>
-    <h6>Staff</h6>
-    {% assign total_members = 0 %}
-    {% for coop in site.coops %}
-    {% assign total_members = total_members | plus: coop.members %}
-    {% endfor %}
-    <h5>{{ total_members }}+</h5>
-  </div>
+    <div class="metadata_item">
+      <h6 class="metadata_heading">Staff</h6>
+      {% assign total_members = 0 %}
+      {% for coop in site.coops %}
+      {% assign total_members = total_members | plus: coop.members %}
+      {% endfor %}
+      <h5 class="metadata_value">{{ total_members }}+</h5>
+    </div>
 
-  <div>
-    <h6>Revenue</h6>
-    <h5>£10.3m</h5>
-  </div>
+    <div class="metadata_item">
+      <h6 class="metadata_heading">Revenue</h6>
+      <h5 class="metadata_value">£10.3m</h5>
+    </div>
 
-  <div>
-    <h6>Clients</h6>
-    <h5>{{ site.clients.size }}+</h5>
+    <div class="metadata_item">
+      <h6 class="metadata_heading">Clients</h6>
+      <h5 class="metadata_value">{{ site.clients.size }}+</h5>
+    </div>
   </div>
 </section>
 
-<section>
+<section class="slice slice--light-grey">
   <p>Co-tech is a network of ethical tech, digital and creative co-operatives.</p>
   <p>We're part of <a href="https://www.workers.coop">workers.coop</a>, <a href="/join">join us!</a></p>
   <p>Working with co-operatives has major benefits: you’ll work directly with the people who own the business, who have a stake in making sure your project succeeds. With no private shareholders drawing out dividends, you’ll get genuine value for money.  And on top of that, you’ll get the benefit of working with small and responsive businesses which draw on the skills, specialisms and security of a large network.</p>