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;
+ }
+}