Polish small components: team cards, support card alignment, gallery filters to CSS, budget sidebar, bullet list, select dropdown

html/about/index.html

@@ -49,12 +49,12 @@
       <p><strong>Taawunu (تَعَاوُنُوا)</strong> comes from the Quranic verse: <em>"And cooperate in righteousness and piety"</em> (Al-Ma'idah 5:2). The word is a plural imperative — it's not one person saving the world. It's a command to work together.</p>
       <p>We are a small, focused team that designs, manages, and verifies community development projects for marginalized populations. We partner with registered charities (who handle donations and provide tax receipts) and local implementation organisations (who coordinate ground-level work).</p>
       <p><strong>What we bring:</strong></p>
-      <ul style="padding-left: 20px; margin-bottom: 20px;">
+      <ul>
-        <li style="margin-bottom: 8px;">Project design — the 4-pillar sequential model</li>
+        <li>Project design — the 4-pillar sequential model</li>
-        <li style="margin-bottom: 8px;">Budget management — every pound tracked and reported</li>
+        <li>Budget management — every pound tracked and reported</li>
-        <li style="margin-bottom: 8px;">Monitoring & evaluation — field visits, honest reports</li>
+        <li>Monitoring & evaluation — field visits, honest reports</li>
-        <li style="margin-bottom: 8px;">Technology — dashboards, data systems, digital infrastructure</li>
+        <li>Technology — dashboards, data systems, digital infrastructure</li>
-        <li style="margin-bottom: 8px;">Fundraising strategy — campaign design for charity partners</li>
+        <li>Fundraising strategy — campaign design for charity partners</li>
       </ul>
       <p><strong>What we don't do:</strong> We don't collect donations directly. We don't issue tax receipts. We don't operate as a registered charity. This is intentional — it keeps us focused on design, management, and accountability rather than fundraising compliance.</p>
     </div>

html/css/style.css

@@ -864,6 +864,17 @@ p { margin-bottom: 16px; max-width: 720px; }
   text-align: center;
   padding: 32px;
 }
+.team-card {
+  background: var(--paper);
+  border-radius: 4px;
+  padding: 32px 24px;
+  box-shadow: 0 1px 6px rgba(61, 31, 21, 0.06);
+  transition: all 0.25s;
+}
+.team-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(61, 31, 21, 0.1);
+}
 .team-avatar {
   width: 80px;
   height: 80px;
@@ -1076,6 +1087,109 @@ p { margin-bottom: 16px; max-width: 720px; }
   .photo-mosaic img { height: 200px; }
 }
 
+/* ─── Gallery Item (from gallery page) ─── */
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.gallery-item {
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  aspect-ratio: 4/3;
+}
+.gallery-item.tall { grid-row: span 2; aspect-ratio: auto; }
+.gallery-item.wide { grid-column: span 2; }
+.gallery-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s;
+}
+.gallery-item:hover img { transform: scale(1.05); }
+.gallery-item .overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(61,31,21,0.8) 0%, transparent 50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 20px;
+}
+.gallery-item:hover .overlay { opacity: 1; }
+.overlay .pillar-tag {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  padding: 3px 8px;
+  border-radius: 2px;
+  margin-bottom: 6px;
+  width: fit-content;
+}
+.tag-water { background: rgba(37,120,161,0.85); color: white; }
+.tag-food { background: rgba(45,106,79,0.85); color: white; }
+.tag-livelihoods { background: rgba(107,58,42,0.85); color: white; }
+.tag-education { background: rgba(201,168,76,0.85); color: white; }
+.overlay .caption-title {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 15px;
+  color: white;
+  margin-bottom: 4px;
+}
+.overlay .caption-desc {
+  font-size: 12px;
+  color: rgba(245,239,224,0.8);
+  line-height: 1.4;
+}
+@media (max-width: 768px) {
+  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
+  .gallery-item.wide { grid-column: span 1; }
+  .gallery-item.tall { grid-row: span 1; aspect-ratio: 4/3; }
+}
+@media (max-width: 480px) {
+  .gallery-grid { grid-template-columns: 1fr; gap: 4px; }
+}
+
+/* ─── Gallery Filters ─── */
+.gallery-filters {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 24px 0 16px;
+}
+.filter-btn {
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 600;
+  padding: 6px 16px;
+  border-radius: 3px;
+  border: 1.5px solid var(--muted);
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.filter-btn:hover { opacity: 0.8; }
+.filter-btn.active {
+  background: var(--earth);
+  border-color: var(--earth);
+  color: white;
+}
+.filter-btn[data-filter="water"] { border-color: var(--water); color: var(--water); }
+.filter-btn[data-filter="food"] { border-color: var(--green); color: var(--green); }
+.filter-btn[data-filter="livelihoods"] { border-color: var(--earth); color: var(--earth); }
+.filter-btn[data-filter="education"] { border-color: var(--gold); color: var(--gold); }
+.filter-btn[data-filter="water"].active { background: var(--water); border-color: var(--water); color: white; }
+.filter-btn[data-filter="food"].active { background: var(--green); border-color: var(--green); color: white; }
+.filter-btn[data-filter="livelihoods"].active { background: var(--earth); border-color: var(--earth); color: white; }
+.filter-btn[data-filter="education"].active { background: var(--gold); border-color: var(--gold); color: white; }
+
 /* ─── Prose ─── */
 .prose {
   font-size: 17px;
@@ -1094,6 +1208,33 @@ p { margin-bottom: 16px; max-width: 720px; }
   border-radius: 4px;
   margin: 32px 0;
 }
+.prose ul {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 20px;
+}
+.prose ul li {
+  position: relative;
+  padding-left: 20px;
+  margin-bottom: 10px;
+  font-size: 15px;
+}
+.prose ul li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 9px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--gold);
+  opacity: 0.7;
+}
+
+/* ─── Responsive: budget + contact grids ─── */
+@media (max-width: 768px) {
+  .contact-grid { grid-template-columns: 1fr !important; }
+}
 
 /* ─── Animations ─── */
 .fade-up {
@@ -1119,6 +1260,8 @@ p { margin-bottom: 16px; max-width: 720px; }
   box-shadow: 0 1px 6px rgba(61, 31, 21, 0.06);
   border-top: 4px solid var(--green);
   transition: all 0.25s;
+  display: flex;
+  flex-direction: column;
 }
 .support-card:hover {
   transform: translateY(-4px);
@@ -1130,6 +1273,9 @@ p { margin-bottom: 16px; max-width: 720px; }
   color: #666;
   margin-bottom: 20px;
 }
+.support-card .support-card-bottom {
+  margin-top: auto;
+}
 .support-card .btn { width: 100%; justify-content: center; }
 
 /* ─── Contact Form ─── */
@@ -1154,6 +1300,12 @@ p { margin-bottom: 16px; max-width: 720px; }
   font-size: 15px;
   background: white;
   transition: border-color 0.2s;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239C9488' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 16px center;
+  padding-right: 40px;
 }
 .form-group input:focus,
 .form-group textarea:focus,

html/gallery/index.html

@@ -8,66 +8,7 @@
   <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
   <link rel="stylesheet" href="/css/style.css">
   <style>
-    .gallery-grid {
+    .gallery-item { cursor: pointer; }
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 6px;
-    }
-    .gallery-item {
-      position: relative;
-      overflow: hidden;
-      cursor: pointer;
-      aspect-ratio: 4/3;
-    }
-    .gallery-item.tall { grid-row: span 2; aspect-ratio: auto; }
-    .gallery-item.wide { grid-column: span 2; }
-    .gallery-item img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      transition: transform 0.5s ease;
-    }
-    .gallery-item:hover img { transform: scale(1.05); }
-    .gallery-item .overlay {
-      position: absolute;
-      inset: 0;
-      background: linear-gradient(to top, rgba(61,31,21,0.8) 0%, transparent 50%);
-      opacity: 0;
-      transition: opacity 0.3s;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-      padding: 20px;
-    }
-    .gallery-item:hover .overlay { opacity: 1; }
-    .overlay .pillar-tag {
-      display: inline-block;
-      font-size: 10px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      padding: 3px 8px;
-      border-radius: 2px;
-      margin-bottom: 6px;
-      width: fit-content;
-    }
-    .overlay .caption-title {
-      font-family: var(--font-display);
-      font-weight: 700;
-      font-size: 16px;
-      color: var(--cream);
-      margin-bottom: 4px;
-    }
-    .overlay .caption-desc {
-      font-size: 12px;
-      color: rgba(245,239,224,0.7);
-      line-height: 1.4;
-    }
-    .tag-water { background: rgba(37,120,161,0.8); color: white; }
-    .tag-food { background: rgba(45,106,79,0.8); color: white; }
-    .tag-livelihoods { background: rgba(107,58,42,0.8); color: white; }
-    .tag-education { background: rgba(201,168,76,0.8); color: var(--deep); }
-
     /* Lightbox */
     .lightbox {
       display: none;
@@ -124,15 +65,6 @@
     .lightbox-nav:hover { opacity: 1; }
     .lightbox-prev { left: 10px; }
     .lightbox-next { right: 10px; }
-
-    @media (max-width: 768px) {
-      .gallery-grid { grid-template-columns: repeat(2, 1fr); }
-      .gallery-item.wide { grid-column: span 1; }
-      .gallery-item.tall { grid-row: span 1; aspect-ratio: 4/3; }
-    }
-    @media (max-width: 480px) {
-      .gallery-grid { grid-template-columns: 1fr; gap: 4px; }
-    }
   </style>
 </head>
 <body>
@@ -167,13 +99,13 @@
 </section>
 
 <!-- Pillar filter -->
-<section style="padding: 24px 0; border-bottom: 1px solid rgba(156,148,136,0.15);">
+<section style="border-bottom: 1px solid rgba(156,148,136,0.15);">
-  <div class="container" style="display:flex; gap:12px; flex-wrap:wrap;">
+  <div class="container gallery-filters">
-    <button class="filter-btn active" data-filter="all" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--earth); background:var(--earth); color:white; cursor:pointer; transition:all 0.2s;">All</button>
+    <button class="filter-btn active" data-filter="all">All</button>
-    <button class="filter-btn" data-filter="water" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--water); background:transparent; color:var(--water); cursor:pointer; transition:all 0.2s;">💧 Water</button>
+    <button class="filter-btn" data-filter="water">💧 Water</button>
-    <button class="filter-btn" data-filter="food" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--green); background:transparent; color:var(--green); cursor:pointer; transition:all 0.2s;">🌾 Food</button>
+    <button class="filter-btn" data-filter="food">🌾 Food</button>
-    <button class="filter-btn" data-filter="livelihoods" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--earth); background:transparent; color:var(--earth); cursor:pointer; transition:all 0.2s;">💼 Livelihoods</button>
+    <button class="filter-btn" data-filter="livelihoods">💼 Livelihoods</button>
-    <button class="filter-btn" data-filter="education" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--gold); background:transparent; color:var(--gold); cursor:pointer; transition:all 0.2s;">📚 Education</button>
+    <button class="filter-btn" data-filter="education">📚 Education</button>
   </div>
 </section>
 
@@ -343,14 +275,8 @@ document.getElementById('navToggle').addEventListener('click', () => document.ge
 document.querySelectorAll('.filter-btn').forEach(btn => {
   btn.addEventListener('click', () => {
     document.querySelectorAll('.filter-btn').forEach(b => {
-      b.style.background = 'transparent';
       b.classList.remove('active');
     });
-    btn.style.background = btn.dataset.filter === 'all' ? 'var(--earth)' : 
-      btn.dataset.filter === 'water' ? 'var(--water)' :
-      btn.dataset.filter === 'food' ? 'var(--green)' :
-      btn.dataset.filter === 'livelihoods' ? 'var(--earth)' : 'var(--gold)';
-    btn.style.color = 'white';
     btn.classList.add('active');
     
     const filter = btn.dataset.filter;

html/projects/index.html

@@ -107,26 +107,38 @@
     <!-- Budget -->
     <h3 class="fade-up mt-5 mb-2">Budget Transparency</h3>
     <p class="fade-up" style="font-size:14px; color:#888;">Full budget breakdown. Updated after each phase.</p>
-    <table class="budget-table fade-up" style="max-width:640px;">
+    <div class="fade-up" style="display:grid; grid-template-columns:3fr 2fr; gap:40px; align-items:start;">
-      <thead>
+      <table class="budget-table">
-        <tr><th>Item</th><th style="text-align:right;">Amount</th></tr>
+        <thead>
-      </thead>
+          <tr><th>Item</th><th style="text-align:right;">Amount</th></tr>
-      <tbody>
+        </thead>
-        <tr><td>Land acquisition & preparation</td><td>£4,200</td></tr>
+        <tbody>
-        <tr><td>Pond construction (10 ponds)</td><td>£8,500</td></tr>
+          <tr><td>Land acquisition & preparation</td><td>£4,200</td></tr>
-        <tr><td>Hatchery construction</td><td>£3,800</td></tr>
+          <tr><td>Pond construction (10 ponds)</td><td>£8,500</td></tr>
-        <tr><td>Borehole & water infrastructure</td><td>£6,200</td></tr>
+          <tr><td>Hatchery construction</td><td>£3,800</td></tr>
-        <tr><td>Solar power system</td><td>£4,800</td></tr>
+          <tr><td>Borehole & water infrastructure</td><td>£6,200</td></tr>
-        <tr><td>Broodstock & fingerlings</td><td>£3,200</td></tr>
+          <tr><td>Solar power system</td><td>£4,800</td></tr>
-        <tr><td>Feed (Year 1)</td><td>£5,500</td></tr>
+          <tr><td>Broodstock & fingerlings</td><td>£3,200</td></tr>
-        <tr><td>Equipment & tools</td><td>£2,400</td></tr>
+          <tr><td>Feed (Year 1)</td><td>£5,500</td></tr>
-        <tr><td>Training & capacity building</td><td>£1,800</td></tr>
+          <tr><td>Equipment & tools</td><td>£2,400</td></tr>
-        <tr><td>Project management & M&E</td><td>£2,606</td></tr>
+          <tr><td>Training & capacity building</td><td>£1,800</td></tr>
-      </tbody>
+          <tr><td>Project management & M&E</td><td>£2,606</td></tr>
-      <tfoot>
+        </tbody>
-        <tr><td><strong>Total</strong></td><td><strong>£43,006</strong></td></tr>
+        <tfoot>
-      </tfoot>
+          <tr><td><strong>Total</strong></td><td><strong>£43,006</strong></td></tr>
-    </table>
+        </tfoot>
+      </table>
+      <div style="background:var(--light-cream); border-radius:4px; padding:28px; border-left:3px solid var(--gold);">
+        <div style="font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:16px;">Revenue Projection</div>
+        <div style="font-family:var(--font-mono); font-size:28px; color:var(--earth); line-height:1; margin-bottom:4px;">£92,000</div>
+        <div style="font-size:13px; color:var(--muted); margin-bottom:20px;">annual revenue from fish sales</div>
+        <div style="font-family:var(--font-mono); font-size:28px; color:var(--green); line-height:1; margin-bottom:4px;">167%</div>
+        <div style="font-size:13px; color:var(--muted); margin-bottom:20px;">3-year ROI</div>
+        <div style="font-family:var(--font-mono); font-size:28px; color:var(--gold); line-height:1; margin-bottom:4px;">6%</div>
+        <div style="font-size:13px; color:var(--muted); margin-bottom:20px;">management fee</div>
+        <div style="font-size:12px; color:var(--muted); padding-top:16px; border-top:1px solid rgba(156,148,136,0.2); line-height:1.5;">Every pound is tracked. Management fees are openly listed. This isn't overhead — it's how the system stays accountable.</div>
+      </div>
+    </div>
   </div>
 </section>
 

html/support/index.html

@@ -79,12 +79,14 @@
         <div class="label" style="color:var(--water); margin-bottom:8px;">💧 Water</div>
         <h3>Solar Water Well — Lolo Camp</h3>
         <p>Fund a solar-powered borehole providing 10,000 litres of clean water daily to 4,000+ refugees. No fuel costs, no recurring expenses — powered by the sun.</p>
-        <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
+        <div class="support-card-bottom">
-          <div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--water);">£5,000</strong></div>
+          <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
-          <div><span class="label">Type</span><br><strong style="font-size:14px;">Sadaqah Jariyah</strong></div>
+            <div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--water);">£5,000</strong></div>
+            <div><span class="label">Type</span><br><strong style="font-size:14px;">Sadaqah Jariyah</strong></div>
+          </div>
+          <a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
+          <p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
         </div>
-        <a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
-        <p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
       </div>
 
       <div class="support-card fade-up" style="border-top-color: var(--green);">
@@ -92,12 +94,14 @@
         <div class="label" style="color:var(--green); margin-bottom:8px;">🌾 Food</div>
         <h3>Lolo Aquaculture — Phase 2</h3>
         <p>Fund the next phase of the community fish farm: broodstock acquisition, hatchery commissioning, and first pond stocking. This is the step that turns infrastructure into food.</p>
-        <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
+        <div class="support-card-bottom">
-          <div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--green);">£8,700</strong></div>
+          <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
-          <div><span class="label">Type</span><br><strong style="font-size:14px;">Zakat Eligible</strong></div>
+            <div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--green);">£8,700</strong></div>
+            <div><span class="label">Type</span><br><strong style="font-size:14px;">Zakat Eligible</strong></div>
+          </div>
+          <a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
+          <p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
         </div>
-        <a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
-        <p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
       </div>
 
       <div class="support-card fade-up" style="border-top-color: var(--gold);">
@@ -105,12 +109,14 @@
         <div class="label" style="color:var(--gold); margin-bottom:8px;">📚 Education</div>
         <h3>Quran School Materials</h3>
         <p>Provide writing boards (alluha), ink, and solar lights for the traditional Quran schools at Lolo Camp. A small investment with deep cultural significance.</p>
-        <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
+        <div class="support-card-bottom">
-          <div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--gold);">£500</strong></div>
+          <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
-          <div><span class="label">Type</span><br><strong style="font-size:14px;">Sadaqah</strong></div>
+            <div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--gold);">£500</strong></div>
+            <div><span class="label">Type</span><br><strong style="font-size:14px;">Sadaqah</strong></div>
+          </div>
+          <a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
+          <p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
         </div>
-        <a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
-        <p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
       </div>
     </div>
   </div>