Compare commits
2 Commits
17da901a23
...
45f7c690e1
| Author | SHA1 | Date | |
|---|---|---|---|
| 45f7c690e1 | |||
| cad8a343ef |
@@ -10548,15 +10548,24 @@ header.main-header .header-sticky.active {
|
|||||||
animation: orbDrift 15s ease-in-out infinite;
|
animation: orbDrift 15s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- Animated gradient on accent spans ---- */
|
/* ---- Accent spans: solid colour guaranteed on every device ---- */
|
||||||
.section-title h2 span,
|
.section-title h2 span,
|
||||||
.section-title h1 span {
|
.section-title h1 span {
|
||||||
background: linear-gradient(90deg, #d92800 0%, #ff5c38 40%, #d92800 100%);
|
color: #d92800;
|
||||||
background-size: 200% auto;
|
}
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
/* ---- Upgrade to animated gradient where background-clip:text works ---- */
|
||||||
background-clip: text;
|
@supports (-webkit-background-clip: text) or (background-clip: text) {
|
||||||
animation: textGradientShift 4s ease infinite;
|
.section-title h2 span,
|
||||||
|
.section-title h1 span {
|
||||||
|
background: linear-gradient(90deg, #d92800 0%, #ff5c38 40%, #d92800 100%);
|
||||||
|
background-size: 200% auto;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
animation: textGradientShift 4s ease infinite;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes textGradientShift {
|
@keyframes textGradientShift {
|
||||||
@@ -10969,3 +10978,4 @@ body {
|
|||||||
transition: color 0.35s ease, text-shadow 0.35s ease;
|
transition: color 0.35s ease, text-shadow 0.35s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
424
css/enhance.css
424
css/enhance.css
@@ -517,15 +517,24 @@ header.main-header .header-sticky.active {
|
|||||||
animation: orbDrift 15s ease-in-out infinite;
|
animation: orbDrift 15s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---- Animated gradient on accent spans ---- */
|
/* ---- Accent spans: solid colour guaranteed on every device ---- */
|
||||||
.section-title h2 span,
|
.section-title h2 span,
|
||||||
.section-title h1 span {
|
.section-title h1 span {
|
||||||
background: linear-gradient(90deg, #d92800 0%, #ff5c38 40%, #d92800 100%);
|
color: #d92800;
|
||||||
background-size: 200% auto;
|
}
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
/* ---- Upgrade to animated gradient where background-clip:text works ---- */
|
||||||
background-clip: text;
|
@supports (-webkit-background-clip: text) or (background-clip: text) {
|
||||||
animation: textGradientShift 4s ease infinite;
|
.section-title h2 span,
|
||||||
|
.section-title h1 span {
|
||||||
|
background: linear-gradient(90deg, #d92800 0%, #ff5c38 40%, #d92800 100%);
|
||||||
|
background-size: 200% auto;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
animation: textGradientShift 4s ease infinite;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes textGradientShift {
|
@keyframes textGradientShift {
|
||||||
@@ -938,404 +947,3 @@ body {
|
|||||||
transition: color 0.35s ease, text-shadow 0.35s ease;
|
transition: color 0.35s ease, text-shadow 0.35s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
MOBILE POLISH v2 — Comprehensive phone & tablet refinements
|
|
||||||
These rules come last so they win the cascade cleanly.
|
|
||||||
============================================================ */
|
|
||||||
|
|
||||||
/* ---- Shared utility: word-wrap for long strings ---- */
|
|
||||||
.footer-info-box-content p,
|
|
||||||
.contact-info-content h3,
|
|
||||||
.footer-contact-details p {
|
|
||||||
word-break: break-word !important;
|
|
||||||
overflow-wrap: anywhere !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
TABLET (≤ 991px)
|
|
||||||
============================================================ */
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
|
|
||||||
/* About section on home: remove left margin that persists */
|
|
||||||
.about-content {
|
|
||||||
margin-left: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mission section: stack order — text first, image below */
|
|
||||||
.our-mission .row {
|
|
||||||
flex-direction: column !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.our-mission .col-lg-6 {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mission image at tablet: clear the circle-offset padding */
|
|
||||||
.mission-img {
|
|
||||||
padding: 0 !important;
|
|
||||||
text-align: center !important;
|
|
||||||
margin-top: 30px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fix reveal figure on mobile: bypass the GSAP slide-in (xPercent: -100
|
|
||||||
initial state) and just show the image centred and full-width. */
|
|
||||||
.mission-img .reveal,
|
|
||||||
.mission-img figure {
|
|
||||||
display: block !important;
|
|
||||||
width: 100% !important;
|
|
||||||
/* Override GSAP inline transform/visibility so image is always visible */
|
|
||||||
visibility: visible !important;
|
|
||||||
opacity: 1 !important;
|
|
||||||
transform: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Landscape aspect-ratio on mobile; override height:100% from .reveal img */
|
|
||||||
.mission-img img {
|
|
||||||
display: block !important;
|
|
||||||
width: 100% !important;
|
|
||||||
height: auto !important;
|
|
||||||
margin: 0 auto !important;
|
|
||||||
aspect-ratio: 16 / 9 !important;
|
|
||||||
border-radius: 0 0 50px 0 !important;
|
|
||||||
transform: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* CTA box: centre button at tablet */
|
|
||||||
.cta-box-btn {
|
|
||||||
text-align: center !important;
|
|
||||||
margin-top: 24px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* About us section padding tighter at tablet */
|
|
||||||
.about-us {
|
|
||||||
padding: 60px 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
PHONE LANDSCAPE / LARGE PHONE (≤ 767px)
|
|
||||||
============================================================ */
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
|
|
||||||
/* --- Hero: pull padding WAY in --- */
|
|
||||||
.hero {
|
|
||||||
padding: 105px 0 70px !important;
|
|
||||||
margin-top: -75px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Hero: center the CTA buttons --- */
|
|
||||||
.hero-content-body {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
align-items: center !important;
|
|
||||||
gap: 14px !important;
|
|
||||||
margin-top: 24px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content-body .btn-default,
|
|
||||||
.hero-content-body .btn-default.btn-highlighted {
|
|
||||||
margin-left: 0 !important;
|
|
||||||
margin-top: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hero subtitle (h3) — slightly tighter */
|
|
||||||
.hero-content .section-title h3 {
|
|
||||||
font-size: 14px !important;
|
|
||||||
margin-bottom: 16px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hero paragraph text: max-width on mobile */
|
|
||||||
.hero-content .section-title p {
|
|
||||||
font-size: 15px !important;
|
|
||||||
max-width: 85% !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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tighter corner radius at phone size; display:block & height:auto inherit from 991px */
|
|
||||||
.mission-img img {
|
|
||||||
border-radius: 0 0 40px 0 !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-us {
|
|
||||||
padding: 50px 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-us-footer {
|
|
||||||
text-align: center !important;
|
|
||||||
margin-top: 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* About content body: 1 column gap fix */
|
|
||||||
.about-content-body {
|
|
||||||
gap: 16px !important;
|
|
||||||
margin-bottom: 28px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- CTA box: centre everything --- */
|
|
||||||
.cta-box-content .section-title {
|
|
||||||
text-align: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta-box-btn {
|
|
||||||
text-align: center !important;
|
|
||||||
margin-top: 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Dallas / Austin league links: tighter padding --- */
|
|
||||||
.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-info-content h3 {
|
|
||||||
font-size: 14px !important;
|
|
||||||
word-break: break-word !important;
|
|
||||||
overflow-wrap: anywhere !important;
|
|
||||||
line-height: 1.4 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Contact info items: tighter layout */
|
|
||||||
.contact-info-item {
|
|
||||||
padding: 16px !important;
|
|
||||||
gap: 14px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Footer: email address wrapping --- */
|
|
||||||
.footer-info-box-content p {
|
|
||||||
font-size: 12px !important;
|
|
||||||
word-break: break-word !important;
|
|
||||||
overflow-wrap: anywhere !important;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-privacy-policy ul {
|
|
||||||
text-align: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Sponsors section: ensure 2-col grid on phones --- */
|
|
||||||
.sponsors-logo-grid {
|
|
||||||
display: flex !important;
|
|
||||||
flex-wrap: wrap !important;
|
|
||||||
justify-content: center !important;
|
|
||||||
gap: 16px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sponsor-logo-item {
|
|
||||||
flex: 0 0 calc(50% - 8px) !important;
|
|
||||||
max-width: calc(50% - 8px) !important;
|
|
||||||
min-width: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Page header (inner pages): tighter heading --- */
|
|
||||||
.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 --- */
|
|
||||||
.pastors-signature {
|
|
||||||
flex-wrap: wrap !important;
|
|
||||||
gap: 12px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pastors-signature-img {
|
|
||||||
display: flex !important;
|
|
||||||
gap: 12px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pastors-signature-img img {
|
|
||||||
max-width: 110px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
SMALL PHONE (≤ 575px)
|
|
||||||
============================================================ */
|
|
||||||
@media (max-width: 575px) {
|
|
||||||
|
|
||||||
/* --- Hero: even smaller padding --- */
|
|
||||||
.hero {
|
|
||||||
padding: 90px 0 55px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hero h1: readable on tiny screens */
|
|
||||||
.section-title h1,
|
|
||||||
.hero-content h1 {
|
|
||||||
font-size: 28px !important;
|
|
||||||
line-height: 1.2 !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-title h2 {
|
|
||||||
font-size: 24px !important;
|
|
||||||
line-height: 1.28 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title h3 {
|
|
||||||
font-size: 13px !important;
|
|
||||||
margin-bottom: 12px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Section row spacing --- */
|
|
||||||
.section-row {
|
|
||||||
margin-bottom: 22px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Btn-default: compact on tiny phones --- */
|
|
||||||
.btn-default {
|
|
||||||
font-size: 14px !important;
|
|
||||||
padding: 12px 52px 12px 14px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Counter heading --- */
|
|
||||||
.counter-title h2 {
|
|
||||||
font-size: 32px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Service ticker: smaller --- */
|
|
||||||
.service-ticker .scrolling-content span {
|
|
||||||
font-size: 42px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- CTA box heading --- */
|
|
||||||
.cta-box-content .section-title h2 {
|
|
||||||
font-size: 20px !important;
|
|
||||||
line-height: 1.3 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Page header heading --- */
|
|
||||||
.page-header-box h1 {
|
|
||||||
font-size: 30px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- League links: full readability --- */
|
|
||||||
.league-links .btn-default {
|
|
||||||
font-size: 13px !important;
|
|
||||||
padding: 12px 52px 12px 14px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Team card text --- */
|
|
||||||
.team-content h3 {
|
|
||||||
font-size: 16px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-content p {
|
|
||||||
font-size: 14px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Contact info: stack icon above text on very small --- */
|
|
||||||
.contact-info-item {
|
|
||||||
align-items: flex-start !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Sponsor logos: maintain 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 */
|
|
||||||
.pastors-message .about-img-1 img,
|
|
||||||
.pastors-message .about-img-2 img {
|
|
||||||
aspect-ratio: 3 / 4 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user