Taawunu (تَعَاوُنُوا) comes from the Quranic verse: "And cooperate in righteousness and piety" (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.
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).
What we bring:
-What we don't do: 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.
diff --git a/html/css/style.css b/html/css/style.css index 1a01a8b..0224220 100644 --- a/html/css/style.css +++ b/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, diff --git a/html/gallery/index.html b/html/gallery/index.html index 12b18d2..f28bce5 100644 --- a/html/gallery/index.html +++ b/html/gallery/index.html @@ -8,66 +8,7 @@ @@ -167,13 +99,13 @@ -Full budget breakdown. Updated after each phase.
-| Item | Amount |
|---|---|
| Land acquisition & preparation | £4,200 |
| Pond construction (10 ponds) | £8,500 |
| Hatchery construction | £3,800 |
| Borehole & water infrastructure | £6,200 |
| Solar power system | £4,800 |
| Broodstock & fingerlings | £3,200 |
| Feed (Year 1) | £5,500 |
| Equipment & tools | £2,400 |
| Training & capacity building | £1,800 |
| Project management & M&E | £2,606 |
| Total | £43,006 |
| Item | Amount |
|---|---|
| Land acquisition & preparation | £4,200 |
| Pond construction (10 ponds) | £8,500 |
| Hatchery construction | £3,800 |
| Borehole & water infrastructure | £6,200 |
| Solar power system | £4,800 |
| Broodstock & fingerlings | £3,200 |
| Feed (Year 1) | £5,500 |
| Equipment & tools | £2,400 |
| Training & capacity building | £1,800 |
| Project management & M&E | £2,606 |
| Total | £43,006 |
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.
-Donations processed by SWAN London, UK registered charity. Gift Aid eligible.
Donations processed by SWAN London, UK registered charity. Gift Aid eligible.
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.
-Donations processed by SWAN London, UK registered charity. Gift Aid eligible.
Donations processed by SWAN London, UK registered charity. Gift Aid eligible.
Provide writing boards (alluha), ink, and solar lights for the traditional Quran schools at Lolo Camp. A small investment with deep cultural significance.
-Donations processed by SWAN London, UK registered charity. Gift Aid eligible.
Donations processed by SWAN London, UK registered charity. Gift Aid eligible.