Improve homepage layout and animations for mobile devices
Update CSS and JavaScript to enhance mobile responsiveness, fix image alignment issues, and refine animations for a better user experience on smaller screens. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 8e995c99-f0dc-4535-89de-ddffaca13380 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 9c30b65d-1fff-4139-8042-cad809186f1b Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/e2c5cd18-6007-4bb1-a111-e14cc125923d/8e995c99-f0dc-4535-89de-ddffaca13380/imQgZBK Replit-Helium-Checkpoint-Created: true
This commit is contained in:
keshavanand12
369
css/enhance.css
369
css/enhance.css
@@ -939,8 +939,8 @@ body {
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MOBILE POLISH v2 — Comprehensive phone & tablet refinements
|
||||
These rules come last so they win the cascade cleanly.
|
||||
MOBILE POLISH v3 — Comprehensive phone & tablet refinements
|
||||
Loaded last so every rule wins the cascade cleanly.
|
||||
============================================================ */
|
||||
|
||||
/* ---- Shared utility: word-wrap for long strings ---- */
|
||||
@@ -956,43 +956,54 @@ body {
|
||||
============================================================ */
|
||||
@media (max-width: 991px) {
|
||||
|
||||
/* About section on home: remove left margin that persists */
|
||||
/* About section: remove left margin */
|
||||
.about-content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Mission section: stack order — text first, image below */
|
||||
.our-mission .row {
|
||||
flex-direction: column !important;
|
||||
/* About section padding */
|
||||
.about-us {
|
||||
padding: 60px 0 !important;
|
||||
}
|
||||
|
||||
.our-mission .col-lg-6 {
|
||||
/* Mission image outer container: full width */
|
||||
.mission-image {
|
||||
margin-top: 36px !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* Mission image at tablet: clear the circle-offset padding */
|
||||
/* Mission img inner: CLEAR the decorative left/bottom offset
|
||||
(the life circle is hidden at 1024px — its padding is dead weight) */
|
||||
.mission-img {
|
||||
padding: 0 0 0 0 !important;
|
||||
text-align: center !important;
|
||||
margin-top: 30px !important;
|
||||
padding: 0 !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.mission-img figure,
|
||||
.mission-img img {
|
||||
aspect-ratio: 16 / 9 !important;
|
||||
border-radius: 0 0 50px 0 !important;
|
||||
width: 100% !important;
|
||||
border-radius: 0 0 60px 0 !important;
|
||||
}
|
||||
|
||||
/* CTA box: centre button at tablet */
|
||||
/* CTA box: centre button */
|
||||
.cta-box-btn {
|
||||
text-align: center !important;
|
||||
margin-top: 24px !important;
|
||||
}
|
||||
|
||||
/* About us section padding tighter at tablet */
|
||||
.about-us {
|
||||
padding: 60px 0 !important;
|
||||
/* Counter: remove dividers between stacked items */
|
||||
.counter-item {
|
||||
border-right: none !important;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.2) !important;
|
||||
padding-bottom: 20px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.counter-box .col-lg-3:last-child .counter-item {
|
||||
border-bottom: none !important;
|
||||
padding-bottom: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1001,13 +1012,11 @@ body {
|
||||
============================================================ */
|
||||
@media (max-width: 767px) {
|
||||
|
||||
/* --- Hero: pull padding WAY in --- */
|
||||
/* ── Hero ── */
|
||||
.hero {
|
||||
padding: 105px 0 70px !important;
|
||||
margin-top: -75px !important;
|
||||
padding: 130px 0 60px !important;
|
||||
}
|
||||
|
||||
/* --- Hero: center the CTA buttons --- */
|
||||
.hero-content-body {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
@@ -1022,67 +1031,139 @@ body {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Hero subtitle (h3) — slightly tighter */
|
||||
.hero-content .section-title h3 {
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 16px !important;
|
||||
font-size: 13px !important;
|
||||
margin-bottom: 14px !important;
|
||||
}
|
||||
|
||||
.hero-content .section-title h1 {
|
||||
font-size: 36px !important;
|
||||
line-height: 1.15 !important;
|
||||
}
|
||||
|
||||
/* Hero paragraph text: max-width on mobile */
|
||||
.hero-content .section-title p {
|
||||
font-size: 15px !important;
|
||||
max-width: 85% !important;
|
||||
max-width: 88% !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
/* --- Mission image: no decorative offset (life circle is hidden) --- */
|
||||
.mission-img {
|
||||
padding: 0 !important;
|
||||
text-align: center !important;
|
||||
margin-top: 28px !important;
|
||||
margin-bottom: 0 !important;
|
||||
/* ── Section titles ── */
|
||||
.section-title h2 {
|
||||
font-size: 30px !important;
|
||||
line-height: 1.22 !important;
|
||||
}
|
||||
|
||||
.mission-img figure,
|
||||
.mission-img img {
|
||||
aspect-ratio: 16 / 9 !important;
|
||||
border-radius: 0 0 40px 0 !important;
|
||||
.section-title h3 {
|
||||
font-size: 12px !important;
|
||||
letter-spacing: 0.06em !important;
|
||||
}
|
||||
|
||||
/* --- Mission content: centre-align the sub-label + heading --- */
|
||||
.mission-content .section-title {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/* Keep the decorative icon visible when centred */
|
||||
.mission-content .section-title h3 {
|
||||
padding-left: 25px !important;
|
||||
}
|
||||
|
||||
/* Mission footer: centre the CTA button */
|
||||
.mission-content-footer {
|
||||
text-align: center !important;
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
/* --- About section (home): tighten + centre footer btn --- */
|
||||
/* ── About section ── */
|
||||
.about-us {
|
||||
padding: 50px 0 !important;
|
||||
}
|
||||
|
||||
.about-us-footer {
|
||||
text-align: center !important;
|
||||
margin-top: 8px !important;
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
/* About content body: 1 column gap fix */
|
||||
.about-content-body {
|
||||
gap: 16px !important;
|
||||
margin-bottom: 28px !important;
|
||||
gap: 14px !important;
|
||||
margin-bottom: 26px !important;
|
||||
}
|
||||
|
||||
/* --- CTA box: centre everything --- */
|
||||
/* ── Counter section ── */
|
||||
/* 2 per row on phones via the col-sm-6 Bootstrap class — keep dividers clean */
|
||||
.counter-title h2 {
|
||||
font-size: 42px !important;
|
||||
}
|
||||
|
||||
.counter-content h3 {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.counter-box {
|
||||
border-radius: 0 0 60px 0 !important;
|
||||
padding: 30px 10px !important;
|
||||
}
|
||||
|
||||
/* Reset right borders; add bottom separators between rows */
|
||||
.counter-item {
|
||||
border-right: none !important;
|
||||
padding-right: 0 !important;
|
||||
padding-bottom: 18px !important;
|
||||
margin-bottom: 18px !important;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.18) !important;
|
||||
}
|
||||
|
||||
.counter-box .col-sm-6:nth-child(3) .counter-item,
|
||||
.counter-box .col-sm-6:nth-child(4) .counter-item {
|
||||
border-bottom: none !important;
|
||||
padding-bottom: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Add a vertical divider between the 2 items in each row */
|
||||
.counter-box .col-sm-6:nth-child(odd) .counter-item {
|
||||
border-right: 1px solid rgba(255,255,255,0.18) !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
/* ── Mission section ── */
|
||||
.mission-content .section-title {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.mission-content-footer {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
/* CORE FIX: clear the decorative padding on .mission-img (inner wrapper)
|
||||
that shifts the image 80px to the right — life circle is hidden at mobile */
|
||||
.mission-img {
|
||||
padding: 0 !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.mission-img figure,
|
||||
.mission-img img {
|
||||
width: 100% !important;
|
||||
aspect-ratio: 16 / 9 !important;
|
||||
border-radius: 0 0 50px 0 !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
/* Outer container: margin above the image block */
|
||||
.mission-image {
|
||||
margin-top: 32px !important;
|
||||
width: 100% !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* Hide life circle on phones (belt + suspenders with the 1024px rule) */
|
||||
.mission-life-circle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ── Services ── */
|
||||
.our-services {
|
||||
padding: 50px 0 20px !important;
|
||||
}
|
||||
|
||||
.service-ticker .scrolling-content span {
|
||||
font-size: 52px !important;
|
||||
}
|
||||
|
||||
/* ── Team images ── */
|
||||
.team-image figure,
|
||||
.team-image img {
|
||||
aspect-ratio: 4 / 3 !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
/* ── CTA box ── */
|
||||
.cta-box-content .section-title {
|
||||
text-align: center !important;
|
||||
}
|
||||
@@ -1092,35 +1173,13 @@ body {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
/* --- Dallas / Austin league links: tighter padding --- */
|
||||
/* ── League links ── */
|
||||
.league-links .btn-default {
|
||||
font-size: 14px !important;
|
||||
padding: 12px 56px 12px 16px !important;
|
||||
}
|
||||
|
||||
/* --- Services section: tighter padding --- */
|
||||
.our-services {
|
||||
padding: 50px 0 20px !important;
|
||||
}
|
||||
|
||||
/* Service items: centre footer row */
|
||||
.service-footer {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
/* --- Service ticker: smaller on phone --- */
|
||||
.service-ticker .scrolling-content span {
|
||||
font-size: 52px !important;
|
||||
}
|
||||
|
||||
/* --- Teams grid: consistent image heights on mobile --- */
|
||||
.team-image figure,
|
||||
.team-image img {
|
||||
aspect-ratio: 4 / 3 !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
/* --- Contact page: email wrapping --- */
|
||||
/* ── Contact page ── */
|
||||
.contact-info-content h3 {
|
||||
font-size: 14px !important;
|
||||
word-break: break-word !important;
|
||||
@@ -1128,13 +1187,12 @@ body {
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
/* Contact info items: tighter layout */
|
||||
.contact-info-item {
|
||||
padding: 16px !important;
|
||||
gap: 14px !important;
|
||||
}
|
||||
|
||||
/* --- Footer: email address wrapping --- */
|
||||
/* ── Footer ── */
|
||||
.footer-info-box-content p {
|
||||
font-size: 12px !important;
|
||||
word-break: break-word !important;
|
||||
@@ -1142,17 +1200,14 @@ body {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
/* Footer info icon: keep it from shrinking */
|
||||
.footer-info-box .icon-box {
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
/* Footer links col: tighter spacing */
|
||||
.footer-links {
|
||||
margin-bottom: 28px !important;
|
||||
}
|
||||
|
||||
/* Footer copyright: already centred in custom.css but reinforce */
|
||||
.footer-copyright-text {
|
||||
text-align: center !important;
|
||||
margin-bottom: 8px !important;
|
||||
@@ -1162,7 +1217,7 @@ body {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/* --- Sponsors section: ensure 2-col grid on phones --- */
|
||||
/* ── Sponsors ── */
|
||||
.sponsors-logo-grid {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
@@ -1176,18 +1231,13 @@ body {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
/* --- Page header (inner pages): tighter heading --- */
|
||||
/* ── Inner page header ── */
|
||||
.page-header-box h1 {
|
||||
font-size: 38px !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
/* --- Section row: less bottom margin --- */
|
||||
.section-row {
|
||||
margin-bottom: 28px !important;
|
||||
}
|
||||
|
||||
/* --- About page: founders signature wrap fix --- */
|
||||
/* ── About page: founders signature ── */
|
||||
.pastors-signature {
|
||||
flex-wrap: wrap !important;
|
||||
gap: 12px !important;
|
||||
@@ -1208,118 +1258,133 @@ body {
|
||||
============================================================ */
|
||||
@media (max-width: 575px) {
|
||||
|
||||
/* --- Hero: even smaller padding --- */
|
||||
/* ── Hero ── */
|
||||
.hero {
|
||||
padding: 90px 0 55px !important;
|
||||
padding: 120px 0 50px !important;
|
||||
}
|
||||
|
||||
/* Hero h1: readable on tiny screens */
|
||||
.section-title h1,
|
||||
.hero-content h1 {
|
||||
.hero-content .section-title h1 {
|
||||
font-size: 28px !important;
|
||||
line-height: 1.2 !important;
|
||||
line-height: 1.18 !important;
|
||||
}
|
||||
|
||||
/* --- Hero buttons: CENTRE (override the flex-start from earlier block) --- */
|
||||
.hero-content-body {
|
||||
align-items: center !important;
|
||||
gap: 12px !important;
|
||||
}
|
||||
|
||||
/* Hero paragraph: full width on tiny phones */
|
||||
.hero-content .section-title p {
|
||||
max-width: 100% !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* --- Section headings --- */
|
||||
/* ── Section headings ── */
|
||||
.section-title h2 {
|
||||
font-size: 24px !important;
|
||||
line-height: 1.28 !important;
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.section-title h3 {
|
||||
font-size: 13px !important;
|
||||
margin-bottom: 12px !important;
|
||||
font-size: 11px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
/* --- Section row spacing --- */
|
||||
.section-row {
|
||||
margin-bottom: 22px !important;
|
||||
}
|
||||
|
||||
/* --- Btn-default: compact on tiny phones --- */
|
||||
/* ── Buttons ── */
|
||||
.btn-default {
|
||||
font-size: 14px !important;
|
||||
font-size: 13px !important;
|
||||
padding: 12px 52px 12px 14px !important;
|
||||
}
|
||||
|
||||
/* --- Counter heading --- */
|
||||
/* ── Counter ── */
|
||||
.counter-title h2 {
|
||||
font-size: 32px !important;
|
||||
font-size: 36px !important;
|
||||
}
|
||||
|
||||
/* --- Service ticker: smaller --- */
|
||||
.counter-content h3 {
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
/* At 575px, items become col-12 (1 per row) — switch back to horizontal dividers */
|
||||
.counter-item {
|
||||
border-right: none !important;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.18) !important;
|
||||
padding-bottom: 16px !important;
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
|
||||
.counter-box .col-sm-6:nth-child(odd) .counter-item {
|
||||
border-right: none !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
/* ── Mission image ── */
|
||||
.mission-img {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.mission-img figure,
|
||||
.mission-img img {
|
||||
aspect-ratio: 4 / 3 !important;
|
||||
border-radius: 0 0 36px 0 !important;
|
||||
}
|
||||
|
||||
/* ── Service ticker ── */
|
||||
.service-ticker .scrolling-content span {
|
||||
font-size: 42px !important;
|
||||
font-size: 38px !important;
|
||||
}
|
||||
|
||||
/* --- CTA box heading --- */
|
||||
/* ── CTA box ── */
|
||||
.cta-box-content .section-title h2 {
|
||||
font-size: 20px !important;
|
||||
line-height: 1.3 !important;
|
||||
line-height: 1.28 !important;
|
||||
}
|
||||
|
||||
/* --- Page header heading --- */
|
||||
/* ── Page header ── */
|
||||
.page-header-box h1 {
|
||||
font-size: 30px !important;
|
||||
font-size: 28px !important;
|
||||
}
|
||||
|
||||
/* --- League links: full readability --- */
|
||||
.league-links .btn-default {
|
||||
font-size: 13px !important;
|
||||
padding: 12px 52px 12px 14px !important;
|
||||
/* ── About content body: 1 column ── */
|
||||
.about-content-body {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 12px !important;
|
||||
}
|
||||
|
||||
/* --- Team card text --- */
|
||||
.team-content h3 {
|
||||
font-size: 16px !important;
|
||||
/* ── Navbar: tighter ── */
|
||||
.navbar {
|
||||
padding: 14px 0 !important;
|
||||
}
|
||||
|
||||
.team-content p {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* --- Contact info: stack icon above text on very small --- */
|
||||
/* ── Contact info ── */
|
||||
.contact-info-item {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
/* --- Sponsor logos: maintain 2 col --- */
|
||||
/* ── Sponsor logos: 2-col ── */
|
||||
.sponsor-logo-item {
|
||||
flex: 0 0 calc(50% - 8px) !important;
|
||||
max-width: calc(50% - 8px) !important;
|
||||
}
|
||||
|
||||
/* --- About content body: full 1 column --- */
|
||||
.about-content-body {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 14px !important;
|
||||
}
|
||||
|
||||
/* --- Mission content body quote line --- */
|
||||
.mission-content-body p {
|
||||
padding-left: 14px !important;
|
||||
}
|
||||
|
||||
/* --- Navbar: tighter on very small phones --- */
|
||||
.navbar {
|
||||
padding: 14px 0 !important;
|
||||
}
|
||||
|
||||
/* Founders: portrait aspect on small phones */
|
||||
/* ── About page founders ── */
|
||||
.pastors-message .about-img-1 img,
|
||||
.pastors-message .about-img-2 img {
|
||||
aspect-ratio: 3 / 4 !important;
|
||||
}
|
||||
|
||||
/* ── League links ── */
|
||||
.league-links .btn-default {
|
||||
font-size: 13px !important;
|
||||
padding: 12px 50px 12px 14px !important;
|
||||
}
|
||||
|
||||
/* ── Team cards ── */
|
||||
.team-content h3 {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.team-content p {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user