KeshavAnandCode/tscb-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve image display and counter hover effects on the homepage and about page

Browse Source 
Refactor CSS to correct image aspect ratios, equalize founder image sizes with consistent borders, and update counter hover state color for better contrast.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1cf11e65-6deb-45c8-b84b-15ffb586a42f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 2aec9677-3784-4e92-8b41-c655a2a3ab1a
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/ef74882e-373e-40b4-93c7-cf128544a855/1cf11e65-6deb-45c8-b84b-15ffb586a42f/S9Ta7w0
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
keshavananddev
2026-03-17 21:58:51 +00:00
parent f7df852a00
commit 85d955fdad
3 changed files with 104 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1773784449474.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

115
css/bundle.css
View File

@@ -10828,114 +10828,85 @@ body {
} }
/* ============================================================ /* ============================================================
CRICKET IMAGE (first about section) — Fix portrait ratio CRICKET IMAGE (first about section) — Natural aspect ratio
The 3/4 ratio on desktop made it excessively tall. Let the image display at its own proportions; no forced crop.
Use a landscape ratio that fits the column nicely.
============================================================ */ ============================================================ */
@media (min-width: 1200px) {
.page-about-us .about-img-1 img { .page-about-us .about-img-1 img {
aspect-ratio: 4 / 3 !important; aspect-ratio: unset !important;
} max-height: none !important;
} height: auto !important;
object-position: center center !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 FOUNDERS SECTION — Equal-sized side-by-side layout
Completely replaces the position:absolute overlay from Both founders shown at identical size with matching borders.
custom.css which broke on every device below desktop. Stacks vertically on mobile.
============================================================ */ ============================================================ */
/* Remove the padding-top reserved for the overlay */
.pastors-message .about-image { .pastors-message .about-image {
padding-top: 0 !important; padding-top: 0 !important;
display: flex !important; display: flex !important;
flex-direction: row !important; flex-direction: row !important;
align-items: flex-start !important; align-items: stretch !important;
gap: 14px !important; gap: 12px !important;
} }
/* Left image: taller, primary founder */ /* Both images exactly equal width */
.pastors-message .about-img-1 { .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 { .pastors-message .about-img-2 {
position: static !important; position: static !important;
top: auto !important; top: auto !important;
right: auto !important; right: auto !important;
width: 40% !important; width: 50% !important;
flex-shrink: 0 !important; flex: 0 0 50% !important;
margin-top: 40px !important; margin-top: 0 !important;
} }
.pastors-message .about-img-1 figure, .pastors-message .about-img-1 figure,
.pastors-message .about-img-2 figure { .pastors-message .about-img-2 figure {
display: block !important; display: block !important;
height: 100% !important;
border-radius: 16px !important; border-radius: 16px !important;
overflow: hidden !important; overflow: hidden !important;
} }
.pastors-message .about-img-1 img { /* Identical treatment on both images */
width: 100% !important; .pastors-message .about-img-1 img,
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 { .pastors-message .about-img-2 img {
width: 100% !important; width: 100% !important;
height: auto !important; height: 100% !important;
aspect-ratio: 3 / 4 !important; aspect-ratio: 3 / 4 !important;
object-fit: cover !important; object-fit: cover !important;
object-position: top center !important; object-position: top center !important;
border-radius: 16px !important; border-radius: 16px !important;
border: 5px solid white !important; border: 4px solid rgba(255, 255, 255, 0.85) !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16) !important;
} }
/* ---- Founders: tablet (≤ 991px) ---- */ /* ---- Founders: tablet (≤ 991px) ---- */
@media (max-width: 991px) { @media (max-width: 991px) {
.pastors-message .about-image { .pastors-message .about-image {
max-width: 560px !important; max-width: 520px !important;
margin: 0 auto 35px !important; margin: 0 auto 35px !important;
gap: 10px !important; gap: 10px !important;
} }
.pastors-message .about-img-1 { .pastors-message .about-img-1,
width: 57% !important;
}
.pastors-message .about-img-2 { .pastors-message .about-img-2 {
width: 43% !important; width: 50% !important;
margin-top: 28px !important; flex: 0 0 50% !important;
}
.pastors-message .about-img-2 img {
border-width: 4px !important;
} }
} }
/* ---- Founders: mobile (≤ 767px) ---- */ /* ---- Founders: mobile (≤ 767px) ---- */
@media (max-width: 767px) { @media (max-width: 767px) {
.pastors-message .about-image { .pastors-message .about-image {
max-width: 480px !important; max-width: 420px !important;
gap: 8px !important; gap: 8px !important;
} }
.pastors-message .about-img-2 { .pastors-message .about-img-1 img,
margin-top: 20px !important;
}
.pastors-message .about-img-2 img { .pastors-message .about-img-2 img {
border-width: 3px !important; border-width: 3px !important;
} }
@@ -10953,18 +10924,36 @@ body {
.pastors-message .about-img-1, .pastors-message .about-img-1,
.pastors-message .about-img-2 { .pastors-message .about-img-2 {
width: 100% !important; width: 100% !important;
margin-top: 0 !important; flex: 0 0 100% !important;
} }
.pastors-message .about-img-1 img, .pastors-message .about-img-1 img,
.pastors-message .about-img-2 img { .pastors-message .about-img-2 img {
aspect-ratio: 4 / 3 !important; aspect-ratio: 4 / 3 !important;
max-height: 280px !important; border-width: 3px !important;
border-radius: 12px !important; border-radius: 12px !important;
} }
}
.pastors-message .about-img-2 img {
border-width: 3px !important; /* ============================================================
} COUNTER HOVER — Distinct color change (not orange/cream)
The default cream (#f3dbbb) blends into the accent color.
On hover: crisp white with a blue-tinted glow to contrast.
============================================================ */
.counter-item:hover .counter-title h2 {
color: #ffffff !important;
text-shadow: 0 0 24px rgba(130, 200, 255, 0.55),
0 0 8px rgba(130, 200, 255, 0.35) !important;
transition: color 0.35s ease, text-shadow 0.35s ease !important;
}
.counter-item:hover .counter-content h3 {
color: #ffffff !important;
transition: color 0.35s ease !important;
}
.counter-title h2,
.counter-content h3 {
transition: color 0.35s ease, text-shadow 0.35s ease;
} }

111
css/enhance.css
View File

@@ -797,114 +797,85 @@ body {
} }
/* ============================================================ /* ============================================================
CRICKET IMAGE (first about section) — Fix portrait ratio CRICKET IMAGE (first about section) — Natural aspect ratio
The 3/4 ratio on desktop made it excessively tall. Let the image display at its own proportions; no forced crop.
Use a landscape ratio that fits the column nicely.
============================================================ */ ============================================================ */
@media (min-width: 1200px) {
.page-about-us .about-img-1 img { .page-about-us .about-img-1 img {
aspect-ratio: 4 / 3 !important; aspect-ratio: unset !important;
} max-height: none !important;
} height: auto !important;
object-position: center center !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 FOUNDERS SECTION — Equal-sized side-by-side layout
Completely replaces the position:absolute overlay from Both founders shown at identical size with matching borders.
custom.css which broke on every device below desktop. Stacks vertically on mobile.
============================================================ */ ============================================================ */
/* Remove the padding-top reserved for the overlay */
.pastors-message .about-image { .pastors-message .about-image {
padding-top: 0 !important; padding-top: 0 !important;
display: flex !important; display: flex !important;
flex-direction: row !important; flex-direction: row !important;
align-items: flex-start !important; align-items: stretch !important;
gap: 14px !important; gap: 12px !important;
} }
/* Left image: taller, primary founder */ /* Both images exactly equal width */
.pastors-message .about-img-1 { .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 { .pastors-message .about-img-2 {
position: static !important; position: static !important;
top: auto !important; top: auto !important;
right: auto !important; right: auto !important;
width: 40% !important; width: 50% !important;
flex-shrink: 0 !important; flex: 0 0 50% !important;
margin-top: 40px !important; margin-top: 0 !important;
} }
.pastors-message .about-img-1 figure, .pastors-message .about-img-1 figure,
.pastors-message .about-img-2 figure { .pastors-message .about-img-2 figure {
display: block !important; display: block !important;
height: 100% !important;
border-radius: 16px !important; border-radius: 16px !important;
overflow: hidden !important; overflow: hidden !important;
} }
.pastors-message .about-img-1 img { /* Identical treatment on both images */
width: 100% !important; .pastors-message .about-img-1 img,
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 { .pastors-message .about-img-2 img {
width: 100% !important; width: 100% !important;
height: auto !important; height: 100% !important;
aspect-ratio: 3 / 4 !important; aspect-ratio: 3 / 4 !important;
object-fit: cover !important; object-fit: cover !important;
object-position: top center !important; object-position: top center !important;
border-radius: 16px !important; border-radius: 16px !important;
border: 5px solid white !important; border: 4px solid rgba(255, 255, 255, 0.85) !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16) !important;
} }
/* ---- Founders: tablet (≤ 991px) ---- */ /* ---- Founders: tablet (≤ 991px) ---- */
@media (max-width: 991px) { @media (max-width: 991px) {
.pastors-message .about-image { .pastors-message .about-image {
max-width: 560px !important; max-width: 520px !important;
margin: 0 auto 35px !important; margin: 0 auto 35px !important;
gap: 10px !important; gap: 10px !important;
} }
.pastors-message .about-img-1 { .pastors-message .about-img-1,
width: 57% !important;
}
.pastors-message .about-img-2 { .pastors-message .about-img-2 {
width: 43% !important; width: 50% !important;
margin-top: 28px !important; flex: 0 0 50% !important;
}
.pastors-message .about-img-2 img {
border-width: 4px !important;
} }
} }
/* ---- Founders: mobile (≤ 767px) ---- */ /* ---- Founders: mobile (≤ 767px) ---- */
@media (max-width: 767px) { @media (max-width: 767px) {
.pastors-message .about-image { .pastors-message .about-image {
max-width: 480px !important; max-width: 420px !important;
gap: 8px !important; gap: 8px !important;
} }
.pastors-message .about-img-2 { .pastors-message .about-img-1 img,
margin-top: 20px !important;
}
.pastors-message .about-img-2 img { .pastors-message .about-img-2 img {
border-width: 3px !important; border-width: 3px !important;
} }
@@ -922,17 +893,35 @@ body {
.pastors-message .about-img-1, .pastors-message .about-img-1,
.pastors-message .about-img-2 { .pastors-message .about-img-2 {
width: 100% !important; width: 100% !important;
margin-top: 0 !important; flex: 0 0 100% !important;
} }
.pastors-message .about-img-1 img, .pastors-message .about-img-1 img,
.pastors-message .about-img-2 img { .pastors-message .about-img-2 img {
aspect-ratio: 4 / 3 !important; aspect-ratio: 4 / 3 !important;
max-height: 280px !important; border-width: 3px !important;
border-radius: 12px !important; border-radius: 12px !important;
} }
}
.pastors-message .about-img-2 img { /* ============================================================
border-width: 3px !important; COUNTER HOVER — Distinct color change (not orange/cream)
The default cream (#f3dbbb) blends into the accent color.
On hover: crisp white with a blue-tinted glow to contrast.
============================================================ */
.counter-item:hover .counter-title h2 {
color: #ffffff !important;
text-shadow: 0 0 24px rgba(130, 200, 255, 0.55),
0 0 8px rgba(130, 200, 255, 0.35) !important;
transition: color 0.35s ease, text-shadow 0.35s ease !important;
} }
.counter-item:hover .counter-content h3 {
color: #ffffff !important;
transition: color 0.35s ease !important;
}
.counter-title h2,
.counter-content h3 {
transition: color 0.35s ease, text-shadow 0.35s ease;
} }