From 04ff75a853d0fdb1acbed54062ba4fa375e4820d Mon Sep 17 00:00:00 2001 From: Omair Saleh Date: Mon, 9 Mar 2026 01:15:20 +0800 Subject: [PATCH] UI/UX audit fixes: stronger hero overlays, text-shadow for contrast, fix broken nav on about/gallery, constrain story blocks, fix photo mosaic object-position, normalize footers --- html/about/index.html | 4 +-- html/approach/index.html | 20 +++++++------- html/css/style.css | 56 +++++++++++++++++++++++++++++----------- html/gallery/index.html | 1 + html/index.html | 5 ++-- html/projects/index.html | 2 +- 6 files changed, 57 insertions(+), 31 deletions(-) diff --git a/html/about/index.html b/html/about/index.html index 30a6c5d..52cac36 100644 --- a/html/about/index.html +++ b/html/about/index.html @@ -22,7 +22,7 @@
  • Our Approach
  • Projects
  • Gallery
    • -
  • About
    • +
  • About
  • Support a Project
    • @@ -146,7 +146,7 @@

    Let's build something together.

    Whether you're a donor, a charity partner, a foundation, or just someone who cares — we'd like to hear from you.

    -
    +
    diff --git a/html/approach/index.html b/html/approach/index.html index bf47bd4..dd25030 100644 --- a/html/approach/index.html +++ b/html/approach/index.html @@ -53,11 +53,11 @@
    -
    +
    - Solar-powered borehole pumping 10,000 litres of clean water daily + Solar-powered borehole pumping 10,000 litres of clean water daily
    -
    +
    Pillar 1

    Water

    Without clean water, nothing else is possible. Dirty water causes disease, absorbs time (women walk kilometres to collect it), and can't support agriculture at scale.

    @@ -67,11 +67,11 @@
    -
    +
    Aerial view of 10 fish ponds carved into the red laterite earth
    -
    +
    Pillar 2

    Food

    With water secured, we establish food production systems. At Lolo, this means aquaculture — 10 earthen ponds stocked with catfish, with capacity for 35,000 fish across 3 harvest cycles per year.

    @@ -81,11 +81,11 @@
    -
    +
    - Fresh catfish for sale at the local market — surplus creates livelihoods + Fresh catfish for sale at the local market — surplus creates livelihoods
    -
    +
    Pillar 3

    Livelihoods

    Surplus food creates economic opportunity. Fish is sold at local markets. Revenue funds operations, creates employment, and builds an economy that doesn't depend on outside funding.

    @@ -95,11 +95,11 @@
    -
    +
    Children study at wooden desks in an open-air classroom with corrugated roof
    -
    +
    Pillar 4

    Education

    Education is the final pillar because it must be sustained. A school funded by a one-off campaign closes when the campaign ends. A school funded by a fish farm runs forever.

    diff --git a/html/css/style.css b/html/css/style.css index b0540ec..1a01a8b 100644 --- a/html/css/style.css +++ b/html/css/style.css @@ -232,9 +232,9 @@ p { margin-bottom: 16px; max-width: 720px; } inset: 0; background: linear-gradient( to bottom, - rgba(61, 31, 21, 0.3) 0%, - rgba(61, 31, 21, 0.5) 40%, - rgba(61, 31, 21, 0.85) 100% + rgba(61, 31, 21, 0.35) 0%, + rgba(61, 31, 21, 0.55) 40%, + rgba(61, 31, 21, 0.88) 100% ); } .hero-content { @@ -447,7 +447,8 @@ p { margin-bottom: 16px; max-width: 720px; } .story-block { display: grid; grid-template-columns: 1fr 1fr; - min-height: 500px; + min-height: 440px; + max-height: 600px; overflow: hidden; } .story-block.reverse { direction: rtl; } @@ -488,7 +489,12 @@ p { margin-bottom: 16px; max-width: 720px; } @media (max-width: 768px) { .story-block, - .story-block.reverse { grid-template-columns: 1fr; direction: ltr; } + .story-block.reverse { + grid-template-columns: 1fr; + direction: ltr; + max-height: none; + } + .story-block .story-photo { max-height: 320px; } .story-text { padding: 40px 24px; } } @@ -922,12 +928,18 @@ p { margin-bottom: 16px; max-width: 720px; } content: ''; position: absolute; inset: 0; - background: linear-gradient(to bottom, rgba(61,31,21,0.25) 0%, rgba(61,31,21,0.6) 50%, rgba(61,31,21,0.9) 100%); + background: linear-gradient( + to bottom, + rgba(61,31,21,0.55) 0%, + rgba(61,31,21,0.65) 30%, + rgba(61,31,21,0.78) 60%, + rgba(61,31,21,0.92) 100% + ); } .page-hero-visual .container { position: relative; z-index: 1; } -.page-hero-visual .label { color: var(--gold); margin-bottom: 8px; } -.page-hero-visual h1 { color: var(--cream); margin-bottom: 16px; } -.page-hero-visual p { font-size: 18px; color: rgba(245,239,224,0.8); max-width: 600px; } +.page-hero-visual .label { color: var(--gold); margin-bottom: 8px; text-shadow: 0 1px 6px rgba(0,0,0,0.3); } +.page-hero-visual h1 { color: var(--cream); margin-bottom: 16px; text-shadow: 0 2px 16px rgba(0,0,0,0.35); } +.page-hero-visual p { font-size: 18px; color: rgba(245,239,224,0.85); max-width: 600px; text-shadow: 0 1px 8px rgba(0,0,0,0.3); } /* ─── Photo Break (cinematic full-width strip) ─── */ .photo-break { @@ -947,7 +959,13 @@ p { margin-bottom: 16px; max-width: 720px; } display: flex; align-items: center; justify-content: center; - background: rgba(61,31,21,0.4); + background: linear-gradient( + to bottom, + rgba(61,31,21,0.35) 0%, + rgba(61,31,21,0.55) 40%, + rgba(61,31,21,0.6) 60%, + rgba(61,31,21,0.45) 100% + ); } .photo-break .photo-break-text { text-align: center; @@ -959,12 +977,14 @@ p { margin-bottom: 16px; max-width: 720px; } color: var(--cream); font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 8px; + text-shadow: 0 2px 12px rgba(0,0,0,0.4); } .photo-break .photo-break-text p { font-size: 15px; - color: rgba(245,239,224,0.7); + color: rgba(245,239,224,0.8); max-width: 500px; margin: 0 auto; + text-shadow: 0 1px 8px rgba(0,0,0,0.3); } @media (max-width: 768px) { .photo-break { height: 240px; } @@ -998,24 +1018,25 @@ p { margin-bottom: 16px; max-width: 720px; } /* ─── Support Card with image ─── */ .support-card-img { - height: 180px; + height: 160px; overflow: hidden; - margin: -32px -32px 24px -32px; + margin: -32px -32px 20px -32px; border-radius: 4px 4px 0 0; } .support-card-img img { width: 100%; height: 100%; object-fit: cover; + object-position: center 60%; transition: transform 0.4s; } .support-card:hover .support-card-img img { transform: scale(1.05); } /* ─── Pillar Card with thumbnail ─── */ .pillar-card-thumb { - height: 140px; + height: 130px; overflow: hidden; - margin: -32px -24px 20px -24px; + margin: -32px -24px 16px -24px; border-radius: 0; } .pillar-card-thumb img { @@ -1041,8 +1062,13 @@ p { margin-bottom: 16px; max-width: 720px; } width: 100%; height: 100%; object-fit: cover; + object-position: center 70%; transition: transform 0.5s; } +.photo-mosaic .mosaic-hero img, +.photo-mosaic img.mosaic-hero { + object-position: center 80%; +} .photo-mosaic img:hover { transform: scale(1.03); } @media (max-width: 768px) { .photo-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; } diff --git a/html/gallery/index.html b/html/gallery/index.html index 187d8fd..12b18d2 100644 --- a/html/gallery/index.html +++ b/html/gallery/index.html @@ -148,6 +148,7 @@
  • Home
  • Our Approach
  • Projects
    • +
  • Gallery
  • About
  • Support a Project
    • diff --git a/html/index.html b/html/index.html index 5668403..6743213 100644 --- a/html/index.html +++ b/html/index.html @@ -254,7 +254,7 @@
    تَعَاوُنُوا
    TAAWUNU
    -

    A social impact studio that designs, manages, and verifies community empowerment projects through a proven Water → Food → Livelihoods → Education model.

    +

    A social impact studio designing permanent self-sufficiency for marginalized communities.

    Explore

    @@ -262,7 +262,7 @@
  • Our Approach
  • Projects
  • Gallery
    • -
  • About Us
    • +
  • About Us
  • Support
    • @@ -271,7 +271,6 @@
    diff --git a/html/projects/index.html b/html/projects/index.html index 7770b9e..1811e46 100644 --- a/html/projects/index.html +++ b/html/projects/index.html @@ -57,7 +57,7 @@
    - Community members harvesting catfish from a pond — nets in hand, basins waiting on the red embankment + Community members harvesting catfish from a pond — nets in hand, basins waiting on the red embankment Workers digging fish ponds by hand into the laterite earth Freshly harvested catfish packed in a basin — the model works