From 226f5f15cc4763544501ad14c49bc998e9ed19b5 Mon Sep 17 00:00:00 2001 From: Keshav Anand <53607429-keshavananddev@users.noreply.replit.com> Date: Tue, 17 Mar 2026 22:09:07 +0000 Subject: [PATCH] finished v2 --- about.html | 1 + css/bundle.css | 72 ++++++++++++++++++++++++------------------------- css/enhance.css | 72 ++++++++++++++++++++++++------------------------- 3 files changed, 71 insertions(+), 74 deletions(-) diff --git a/about.html b/about.html index 2b8ae71..354cc13 100644 --- a/about.html +++ b/about.html @@ -127,6 +127,7 @@
+
diff --git a/css/bundle.css b/css/bundle.css index 21b5258..310f7f5 100644 --- a/css/bundle.css +++ b/css/bundle.css @@ -10635,36 +10635,12 @@ body { width: 100% !important; } -.page-about-us .about-img-1 figure { - display: block !important; - border-radius: 20px !important; - overflow: hidden !important; -} - -.page-about-us .about-img-1 img { - width: 100% !important; - height: auto !important; - aspect-ratio: 4 / 3 !important; - object-fit: cover !important; - object-position: center center !important; - border-radius: 20px !important; -} - /* Pastors section: remove inline dimension override, let CSS size it */ .pastors-message .about-img-2 img { width: 100% !important; height: auto !important; } -/* ============================================================ - DESKTOP (≥ 1200px) - ============================================================ */ -@media (min-width: 1200px) { - .page-about-us .about-img-1 img { - aspect-ratio: 3 / 4 !important; - } -} - /* ============================================================ TABLET (≤ 1024px) ============================================================ */ @@ -10828,28 +10804,50 @@ body { } /* ============================================================ - CRICKET IMAGE (first about section) — Natural aspect ratio, - width shrinks to fit; height constrained to match text column. + CRICKET IMAGE — blurred-backdrop frame + The .cricket-blur-bg div fills the full column with a blurred + version of the same image; the real img sits centered on top + at its natural aspect ratio so no void remains. ============================================================ */ -.page-about-us .about-img-1 { - width: auto !important; - max-width: 100% !important; +.page-about-us .about-img-1 figure { + position: relative !important; + overflow: hidden !important; + border-radius: 18px !important; + height: 490px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + box-shadow: + 0 0 0 2px rgba(217, 40, 0, 0.35), + 0 0 0 5px rgba(206, 156, 91, 0.15), + 0 16px 56px rgba(0, 0, 0, 0.45) !important; } -.page-about-us .about-img-1 figure { - display: flex !important; - justify-content: center !important; +.page-about-us .about-img-1 .cricket-blur-bg { + position: absolute !important; + inset: -40px !important; + background: url('../images/cricket.webp') center / cover no-repeat !important; + filter: blur(28px) brightness(0.55) saturate(1.4) !important; + z-index: 0 !important; + pointer-events: none !important; } .page-about-us .about-img-1 img { + position: relative !important; + z-index: 1 !important; width: auto !important; max-width: 100% !important; - height: auto !important; - max-height: 480px !important; - aspect-ratio: unset !important; - object-position: center center !important; + height: 100% !important; + object-fit: contain !important; display: block !important; - margin: 0 auto !important; + aspect-ratio: unset !important; + filter: drop-shadow(0 6px 28px rgba(0, 0, 0, 0.5)) !important; +} + +@media (max-width: 767px) { + .page-about-us .about-img-1 figure { + height: 320px !important; + } } /* ============================================================ diff --git a/css/enhance.css b/css/enhance.css index e427b5e..d71dba0 100644 --- a/css/enhance.css +++ b/css/enhance.css @@ -604,36 +604,12 @@ body { width: 100% !important; } -.page-about-us .about-img-1 figure { - display: block !important; - border-radius: 20px !important; - overflow: hidden !important; -} - -.page-about-us .about-img-1 img { - width: 100% !important; - height: auto !important; - aspect-ratio: 4 / 3 !important; - object-fit: cover !important; - object-position: center center !important; - border-radius: 20px !important; -} - /* Pastors section: remove inline dimension override, let CSS size it */ .pastors-message .about-img-2 img { width: 100% !important; height: auto !important; } -/* ============================================================ - DESKTOP (≥ 1200px) - ============================================================ */ -@media (min-width: 1200px) { - .page-about-us .about-img-1 img { - aspect-ratio: 3 / 4 !important; - } -} - /* ============================================================ TABLET (≤ 1024px) ============================================================ */ @@ -797,28 +773,50 @@ body { } /* ============================================================ - CRICKET IMAGE (first about section) — Natural aspect ratio, - width shrinks to fit; height constrained to match text column. + CRICKET IMAGE — blurred-backdrop frame + The .cricket-blur-bg div fills the full column with a blurred + version of the same image; the real img sits centered on top + at its natural aspect ratio so no void remains. ============================================================ */ -.page-about-us .about-img-1 { - width: auto !important; - max-width: 100% !important; +.page-about-us .about-img-1 figure { + position: relative !important; + overflow: hidden !important; + border-radius: 18px !important; + height: 490px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + box-shadow: + 0 0 0 2px rgba(217, 40, 0, 0.35), + 0 0 0 5px rgba(206, 156, 91, 0.15), + 0 16px 56px rgba(0, 0, 0, 0.45) !important; } -.page-about-us .about-img-1 figure { - display: flex !important; - justify-content: center !important; +.page-about-us .about-img-1 .cricket-blur-bg { + position: absolute !important; + inset: -40px !important; + background: url('../images/cricket.webp') center / cover no-repeat !important; + filter: blur(28px) brightness(0.55) saturate(1.4) !important; + z-index: 0 !important; + pointer-events: none !important; } .page-about-us .about-img-1 img { + position: relative !important; + z-index: 1 !important; width: auto !important; max-width: 100% !important; - height: auto !important; - max-height: 480px !important; - aspect-ratio: unset !important; - object-position: center center !important; + height: 100% !important; + object-fit: contain !important; display: block !important; - margin: 0 auto !important; + aspect-ratio: unset !important; + filter: drop-shadow(0 6px 28px rgba(0, 0, 0, 0.5)) !important; +} + +@media (max-width: 767px) { + .page-about-us .about-img-1 figure { + height: 320px !important; + } } /* ============================================================