diff --git a/about.html b/about.html index a865acc..5efe2db 100644 --- a/about.html +++ b/about.html @@ -343,6 +343,7 @@
diff --git a/attached_assets/image_1773784079107.png b/attached_assets/image_1773784079107.png new file mode 100644 index 0000000..9de48b0 Binary files /dev/null and b/attached_assets/image_1773784079107.png differ diff --git a/css/bundle.css b/css/bundle.css index ccd7b3a..56b15c8 100644 --- a/css/bundle.css +++ b/css/bundle.css @@ -10203,8 +10203,7 @@ header.main-header .header-sticky.active { box-shadow: 0 10px 30px rgba(217, 40, 0, 0.35); } -/* About image layout is intentionally handled by custom.css only. - The overlay (position:absolute) must be preserved at all screen sizes. */ +/* About image layout overrides are handled below in the FOUNDERS SECTION block. */ /* ---- Counter section enhanced ---- */ .our-counter { @@ -10828,3 +10827,144 @@ body { } } +/* ============================================================ + CRICKET IMAGE (first about section) — Fix portrait ratio + The 3/4 ratio on desktop made it excessively tall. + Use a landscape ratio that fits the column nicely. + ============================================================ */ +@media (min-width: 1200px) { + .page-about-us .about-img-1 img { + aspect-ratio: 4 / 3 !important; + } +} + +.page-about-us .about-img-1 img { + max-height: 480px !important; + object-position: center 20% !important; +} + +/* ============================================================ + FOUNDERS SECTION — Responsive staggered side-by-side layout + Completely replaces the position:absolute overlay from + custom.css which broke on every device below desktop. + ============================================================ */ + +/* Remove the padding-top reserved for the overlay */ +.pastors-message .about-image { + padding-top: 0 !important; + display: flex !important; + flex-direction: row !important; + align-items: flex-start !important; + gap: 14px !important; +} + +/* Left image: taller, primary founder */ +.pastors-message .about-img-1 { + position: static !important; + width: 60% !important; + flex-shrink: 0 !important; +} + +/* Right image: staggered down slightly for visual depth */ +.pastors-message .about-img-2 { + position: static !important; + top: auto !important; + right: auto !important; + width: 40% !important; + flex-shrink: 0 !important; + margin-top: 40px !important; +} + +.pastors-message .about-img-1 figure, +.pastors-message .about-img-2 figure { + display: block !important; + border-radius: 16px !important; + overflow: hidden !important; +} + +.pastors-message .about-img-1 img { + width: 100% !important; + height: auto !important; + aspect-ratio: 3 / 4 !important; + object-fit: cover !important; + object-position: top center !important; + border-radius: 16px !important; + border: none !important; +} + +.pastors-message .about-img-2 img { + width: 100% !important; + height: auto !important; + aspect-ratio: 3 / 4 !important; + object-fit: cover !important; + object-position: top center !important; + border-radius: 16px !important; + border: 5px solid white !important; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18) !important; +} + +/* ---- Founders: tablet (≤ 991px) ---- */ +@media (max-width: 991px) { + .pastors-message .about-image { + max-width: 560px !important; + margin: 0 auto 35px !important; + gap: 10px !important; + } + + .pastors-message .about-img-1 { + width: 57% !important; + } + + .pastors-message .about-img-2 { + width: 43% !important; + margin-top: 28px !important; + } + + .pastors-message .about-img-2 img { + border-width: 4px !important; + } +} + +/* ---- Founders: mobile (≤ 767px) ---- */ +@media (max-width: 767px) { + .pastors-message .about-image { + max-width: 480px !important; + gap: 8px !important; + } + + .pastors-message .about-img-2 { + margin-top: 20px !important; + } + + .pastors-message .about-img-2 img { + border-width: 3px !important; + } +} + +/* ---- Founders: small mobile (≤ 575px) — stack vertically ---- */ +@media (max-width: 575px) { + .pastors-message .about-image { + flex-direction: column !important; + max-width: 100% !important; + gap: 10px !important; + margin: 0 0 30px !important; + } + + .pastors-message .about-img-1, + .pastors-message .about-img-2 { + width: 100% !important; + margin-top: 0 !important; + } + + .pastors-message .about-img-1 img, + .pastors-message .about-img-2 img { + aspect-ratio: 4 / 3 !important; + max-height: 280px !important; + border-radius: 12px !important; + } + + .pastors-message .about-img-2 img { + border-width: 3px !important; + } +} + diff --git a/css/enhance.css b/css/enhance.css index efe0124..d86dc92 100644 --- a/css/enhance.css +++ b/css/enhance.css @@ -172,8 +172,7 @@ header.main-header .header-sticky.active { box-shadow: 0 10px 30px rgba(217, 40, 0, 0.35); } -/* About image layout is intentionally handled by custom.css only. - The overlay (position:absolute) must be preserved at all screen sizes. */ +/* About image layout overrides are handled below in the FOUNDERS SECTION block. */ /* ---- Counter section enhanced ---- */ .our-counter { @@ -796,3 +795,144 @@ body { margin-bottom: 24px !important; } } + +/* ============================================================ + CRICKET IMAGE (first about section) — Fix portrait ratio + The 3/4 ratio on desktop made it excessively tall. + Use a landscape ratio that fits the column nicely. + ============================================================ */ +@media (min-width: 1200px) { + .page-about-us .about-img-1 img { + aspect-ratio: 4 / 3 !important; + } +} + +.page-about-us .about-img-1 img { + max-height: 480px !important; + object-position: center 20% !important; +} + +/* ============================================================ + FOUNDERS SECTION — Responsive staggered side-by-side layout + Completely replaces the position:absolute overlay from + custom.css which broke on every device below desktop. + ============================================================ */ + +/* Remove the padding-top reserved for the overlay */ +.pastors-message .about-image { + padding-top: 0 !important; + display: flex !important; + flex-direction: row !important; + align-items: flex-start !important; + gap: 14px !important; +} + +/* Left image: taller, primary founder */ +.pastors-message .about-img-1 { + position: static !important; + width: 60% !important; + flex-shrink: 0 !important; +} + +/* Right image: staggered down slightly for visual depth */ +.pastors-message .about-img-2 { + position: static !important; + top: auto !important; + right: auto !important; + width: 40% !important; + flex-shrink: 0 !important; + margin-top: 40px !important; +} + +.pastors-message .about-img-1 figure, +.pastors-message .about-img-2 figure { + display: block !important; + border-radius: 16px !important; + overflow: hidden !important; +} + +.pastors-message .about-img-1 img { + width: 100% !important; + height: auto !important; + aspect-ratio: 3 / 4 !important; + object-fit: cover !important; + object-position: top center !important; + border-radius: 16px !important; + border: none !important; +} + +.pastors-message .about-img-2 img { + width: 100% !important; + height: auto !important; + aspect-ratio: 3 / 4 !important; + object-fit: cover !important; + object-position: top center !important; + border-radius: 16px !important; + border: 5px solid white !important; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18) !important; +} + +/* ---- Founders: tablet (≤ 991px) ---- */ +@media (max-width: 991px) { + .pastors-message .about-image { + max-width: 560px !important; + margin: 0 auto 35px !important; + gap: 10px !important; + } + + .pastors-message .about-img-1 { + width: 57% !important; + } + + .pastors-message .about-img-2 { + width: 43% !important; + margin-top: 28px !important; + } + + .pastors-message .about-img-2 img { + border-width: 4px !important; + } +} + +/* ---- Founders: mobile (≤ 767px) ---- */ +@media (max-width: 767px) { + .pastors-message .about-image { + max-width: 480px !important; + gap: 8px !important; + } + + .pastors-message .about-img-2 { + margin-top: 20px !important; + } + + .pastors-message .about-img-2 img { + border-width: 3px !important; + } +} + +/* ---- Founders: small mobile (≤ 575px) — stack vertically ---- */ +@media (max-width: 575px) { + .pastors-message .about-image { + flex-direction: column !important; + max-width: 100% !important; + gap: 10px !important; + margin: 0 0 30px !important; + } + + .pastors-message .about-img-1, + .pastors-message .about-img-2 { + width: 100% !important; + margin-top: 0 !important; + } + + .pastors-message .about-img-1 img, + .pastors-message .about-img-2 img { + aspect-ratio: 4 / 3 !important; + max-height: 280px !important; + border-radius: 12px !important; + } + + .pastors-message .about-img-2 img { + border-width: 3px !important; + } +}