/* ==========================================================================
1. FONTS IMPORT & SYSTEM VARIABLES
========================================================================== */
@font-face {
font-family: 'Dustismo Roman';
src: local('Dustismo Roman'), url('asset/Dustismo-Roman.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Alstoria Regular";
src: url("https://db.onlinewebfonts.com/t/5074266f7956273a1430bceb16f8c61d.woff2") format("woff2");
}
:root {
--primary-gold: #c5a830;
--dark-bg: #1a0d06;
--text-dark: #333333;
--text-light: #ffffff;
--card-bg: #ecebe4;
--transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
--kanak-cubic: cubic-bezier(0.25, 1, 0.5, 1);
}
/* ==========================================================================
2. CORE GLOBAL RESETS
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Gotham', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #f9f9f9;
overflow-x: hidden;
width: 100%;
}
/* ==========================================================================
3. ANIMATIONS ENGINE (Smooth Fade-in & Slide-up)
========================================================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in {
animation: fadeIn 1s ease forwards;
}
.animate-up {
opacity: 0;
animation: fadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
/* ==========================================================================
4. NAVIGATION BAR HEADER
========================================================================== */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 5%;
background-color: var(--text-light);
position: relative;
z-index: 100;
}
.logo-container {
display: flex;
align-items: center;
text-decoration: none;
}
.main-logo {
height: auto;
width: 240px;
display: block;
z-index: 1000;
}
.nav-controls {
display: flex;
align-items: center;
gap: 35px;
}
.search-icon {
cursor: pointer;
display: flex;
align-items: center;
margin-right: 5px;
}
.search-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: var(--text-dark);
stroke-width: 1.8;
transition: var(--transition-smooth);
}
.search-icon:hover svg {
stroke: var(--primary-gold);
}
.nav-links {
display: flex;
align-items: center;
list-style: none;
gap: 30px;
}
.nav-links a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--transition-smooth);
display: flex;
align-items: center;
gap: 6px;
}
.nav-links a:hover {
color: var(--primary-gold);
}
.nav-links a svg {
transition: var(--transition-smooth);
}
.nav-links a:hover svg {
transform: translateY(2px);
}
.btn-giving {
border: 1.5px solid #1a568c;
padding: 8px 20px;
border-radius: 20px;
color: #1a568c;
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.5px;
transition: var(--transition-smooth);
white-space: nowrap;
}
.btn-giving:hover {
background-color: #1a568c;
color: var(--text-light);
}
.menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
}
.menu-toggle span {
width: 24px;
height: 2.5px;
background-color: var(--text-dark);
transition: var(--transition-smooth);
}
/* ==========================================================================
5. HERO BANNER MAIN COMPONENT
========================================================================== */
.hero {
position: relative;
min-height: 640px;
background: linear-gradient(rgba(26, 13, 6, 0.45), rgba(26, 13, 6, 0.45)),
url('asset/home-banner.webp') no-repeat center center/cover;
display: flex;
align-items: center;
padding: 40px 6%;
overflow: hidden;
}
.hero-windows-bg {
position: absolute;
right: 8%;
bottom: 0;
top: 0;
width: 50%;
display: flex;
justify-content: center;
align-items: flex-end;
gap: 24px;
pointer-events: none;
opacity: 0.85;
}
.window-arch {
width: 140px;
height: 80%;
background: linear-gradient(to top, rgba(253, 184, 19, 0.9), rgba(253, 230, 19, 0.2));
border-radius: 100px 100px 0 0;
box-shadow: 0 0 80px rgba(253, 184, 19, 0.6);
position: relative;
border: 4px solid rgba(255,255,255,0.1);
}
.window-arch::before {
content: '';
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 40px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
}
.window-arch.tall {
height: 90%;
width: 160px;
}
.info-card {
background-color: var(--card-bg);
padding: 50px 40px;
width: 100%;
max-width: 440px;
border-radius: 4px;
box-shadow: 0 20px 45px rgba(0,0,0,0.35);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
}
.info-card h1.heavitas-title{
font-family: 'Helvetica Neue', 'Montserrat', Arial, sans-serif;
font-size: 52px;
font-weight: 900;
color: #4a4a4a;
line-height: 1.05;
margin-bottom: 25px;
letter-spacing: -1px;
text-align: center;
}
.info-card p {
font-size: 13px;
color: #555;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 6px;
text-align: center;
}
.info-card .time {
font-size: 15px;
font-weight: 700;
color: #4a4a4a;
margin-bottom: 35px;
text-align: center;
}
.card-buttons {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
width: 100%;
}
.btn-card {
background-color: var(--primary-gold);
color: #443c13;
text-decoration: none;
text-align: center;
padding: 18px 10px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 2px;
transition: var(--transition-smooth);
display: flex;
align-items: center;
justify-content: center;
line-height: 1.3;
}
.btn-card:hover {
background-color: #b09527;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(197, 168, 48, 0.2);
}
/* ==========================================================================
6. COUNTDOWN TIMER PANEL
========================================================================== */
.countdown-widget {
position: absolute;
top: 25px;
right: 5%;
background-color: rgba(10, 5, 3, 0.88);
border-top: 3px solid var(--primary-gold);
padding: 14px 22px;
border-radius: 3px;
color: var(--text-light);
z-index: 10;
min-width: 270px;
}
.countdown-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
margin-bottom: 10px;
text-transform: uppercase;
color: #b3b3b3;
}
.timer-display {
display: flex;
gap: 14px;
align-items: center;
}
.timer-segment {
text-align: center;
}
.timer-number {
font-size: 22px;
font-weight: 700;
display: block;
line-height: 1;
}
.timer-label {
font-size: 8px;
text-transform: uppercase;
color: #888;
letter-spacing: 0.5px;
margin-top: 4px;
display: block;
}
.timer-info-icon {
margin-left: auto;
width: 18px;
height: 18px;
background-color: #1a568c;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
cursor: pointer;
}
/* ==========================================================================
7. WELCOME & MINISTRIES SECTIONS (FULL-WIDTH)
========================================================================== */
.welcome-ministries-section {
width: 100%;
background-color: #ffffff;
padding: 80px 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
}
.welcome-text-container {
text-align: center;
max-width: 1100px;
margin-bottom: 70px;
padding: 0 5%;
}
.welcome-sub {
font-size: 14px;
font-weight: 500;
color: #666666;
letter-spacing: 1.5px;
margin-bottom: 25px;
text-transform: uppercase;
}
.welcome-text-container h2.dustismo-quote {
font-family: 'Dustismo Roman', 'Georgia', 'Times New Roman', serif;
font-size: 46px;
font-weight: 400;
color: #1c252c;
line-height: 1.3;
margin-bottom: 35px;
letter-spacing: -0.5px;
text-transform: none;
}
.welcome-desc {
font-size: 15px;
color: #444444;
line-height: 1.6;
font-weight: 400;
}
.columns-full-width-bg {
background-color: #eef1f4;
width: 100%;
display: flex;
justify-content: center;
padding: 80px 0;
}
.columns-inner-content {
width: 100%;
max-width: 1200px;
padding: 0 5%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
}
.info-column {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.col-title {
font-size: 26px;
font-weight: 800;
line-height: 1.1;
letter-spacing: 0.5px;
margin-bottom: 18px;
}
.color-blue { color: #0c75bc; }
.color-gold { color: #c5a830; }
.col-schedule {
font-size: 14px;
color: #4a5568;
line-height: 1.4;
margin-bottom: 25px;
}
.button-matrix {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
width: 100%;
max-width: 360px;
}
.gold-matrix-wrapper {
width: 100%;
max-width: 380px;
margin-top: auto;
}
.matrix-row-single {
display: flex;
justify-content: center;
margin-bottom: 4px;
width: 100%;
}
.matrix-row-single .matrix-btn {
width: 70%;
}
.matrix-row-double {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
width: 100%;
}
.matrix-btn {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.5px;
padding: 14px 10px;
text-align: center;
transition: var(--transition-smooth);
min-height: 48px;
}
.btn-blue { background-color: #0c75bc; color: #ffffff; }
.btn-blue:hover { background-color: #095991; }
.btn-gold { background-color: #d1b438; color: #ffffff; }
.btn-gold:hover { background-color: #b09527; }
/* ==========================================================================
HEADING VISIBILITY TOGGLE
========================================================================== */
/* Hide the mobile heading by default on large screens */
.mobile-heading {
display: none;
}
/* Swap the headings on screens 992px and smaller */
@media (max-width: 992px) {
.desktop-heading {
display: none;
}
.mobile-heading {
display: block; /* or display: inline-block depending on your specific flow */
}
}
/* ==========================================================================
8. EXTRA LARGE SCREEN & IMAC CONFIGURATIONS (Responsive Scaling Up)
========================================================================== */
@media (min-width: 1600px) {
/* Navbar Scale */
.navbar { padding: 25px 8%; }
.main-logo { width: 310px; }
.nav-links { gap: 45px; }
.nav-links a { font-size: 15px; }
.btn-giving { padding: 10px 26px; font-size: 13px; }
.search-icon svg { width: 24px; height: 24px; }
/* Hero Layout Scale */
.hero { min-height: 800px; padding: 60px 8%; }
.info-card { max-width: 540px; padding: 65px 50px; }
.info-card h1.heavitas-title{ font-size: 64px; margin-bottom: 30px; }
.info-card p { font-size: 15px; }
.info-card .time { font-size: 18px; margin-bottom: 45px; }
.btn-card { font-size: 13px; padding: 22px 12px; }
/* Windows Graphical Layer Scale */
.hero-windows-bg { gap: 35px; right: 10%; }
.window-arch { width: 180px; }
.window-arch.tall { width: 210px; }
/* Countdown Widget Scale */
.countdown-widget { top: 40px; right: 8%; padding: 18px 28px; min-width: 320px; }
.countdown-title { font-size: 12px; }
.timer-number { font-size: 28px; }
.timer-label { font-size: 10px; }
/* Bottom Core Section Scale */
.welcome-ministries-section { padding-top: 110px; }
.welcome-text-container { max-width: 1300px; margin-bottom: 90px; }
.welcome-sub { font-size: 16px; }
.welcome-text-container h2.dustismo-quote { font-size: 58px; margin-bottom: 40px; }
.welcome-desc { font-size: 18px; }
.columns-full-width-bg { padding: 110px 0; }
.columns-inner-content { max-width: 1500px; gap: 120px; }
.col-title { font-size: 34px; margin-bottom: 24px; }
.col-schedule { font-size: 17px; margin-bottom: 35px; }
.matrix-btn { font-size: 13px; min-height: 56px; }
}
/* ==========================================================================
9. SMALLER SCREEN RESPONSIVE BREAKPOINTS (Laptop, iPad, Mobile phone)
========================================================================== */
@media (max-width: 1200px) {
.main-logo { width: 210px; }
.hero-windows-bg { width: 45%; right: 3%; }
.window-arch { width: 110px; }
.window-arch.tall { width: 130px; }
}
@media (max-width: 1024px) {
.nav-controls { gap: 20px; }
.navbar{
padding: 10px;
}
.nav-links a {
font-size: 11px;
}
}
@media (max-width: 992px) {
.navbar { padding: 15px 4%; }
.menu-toggle { display: flex; }
.nav-controls { gap: 20px; }
.hero { flex-direction: column; justify-content: center; padding: 50px 4% 60px 4%; min-height: auto; }
.hero-windows-bg { position: relative; width: 100%; right: auto; height: 260px; margin-top: 40px; order: 3; }
.window-arch { height: 90%; width: 95px; }
.window-arch.tall { height: 100%; width: 110px; }
.countdown-widget { position: relative; top: auto; right: auto; margin-bottom: 30px; align-self: flex-start; order: 1; }
.info-card { max-width: 100%; order: 2; }
.columns-inner-content { grid-template-columns: 1fr; gap: 60px; }
.columns-full-width-bg { padding: 50px 0; }
.welcome-text-container h2.dustismo-quote { font-size: 34px; }
}
@media (max-width: 576px) {
.navbar { padding: 12px 15px; }
.main-logo { width: 170px; }
.btn-giving { padding: 6px 14px; font-size: 10px; }
.nav-controls { gap: 15px; }
.info-card { padding: 35px 20px; }
.info-card h1.heavitas-title{ font-size: 38px; margin-bottom: 18px; }
.hero-windows-bg { height: 190px; gap: 12px; }
.window-arch { width: 75px; }
.window-arch.tall { width: 85px; }
.welcome-text-container h2.dustismo-quote { font-size: 26px; }
.welcome-desc br { display: none; }
.button-matrix, .gold-matrix-wrapper { grid-template-columns: 1fr; max-width: 100%; }
.matrix-row-double { grid-template-columns: 1fr; }
.matrix-row-single .matrix-btn { width: 100%; }
}
/* ==========================================================================
10. GROWING TOGETHER THROUGH CHRIST SECTION
========================================================================== */
.growing-section {
width: 100%;
background-color: #ecebe4; /* Beige background match */
padding: 100px 0;
display: flex;
justify-content: center;
align-items: center;
}
.growing-container {
width: 100%;
max-width: 1200px;
padding: 0 2%;
display: grid;
grid-template-columns: 3.5fr 6.5fr; /* Matches the text-to-image proportions */
gap: 60px;
align-items: start; /* Aligns text block to base neatly beside the image file */
}
/* --- LEFT SIDE DATA COLUMN --- */
.growing-content-col {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-bottom: 20px; /* Slight offset grounding alignment */
}
.growing-meta {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
.meta-brand {
font-size: 16px;
font-weight: 500;
color: #2b2b2b;
margin-bottom: 4px;
}
.meta-tagline {
font-size: 16px;
font-weight: 500;
color: #2b2b2b;
}
.growing-text {
font-size: 15px;
color: #2b2b2b;
line-height: 1.6;
margin-bottom: 40px;
font-weight: 400;
text-align: left;
max-width: 320px; /* Forces exact column structure flow */
}
.btn-connected {
display: inline-block;
background-color: #0c75bc;
color: #ffffff;
text-decoration: none;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
padding: 14px 28px;
transition: var(--transition-smooth);
}
.btn-connected:hover {
background-color: #095991;
transform: translateY(-2px);
}
/* --- RIGHT SIDE IMAGE & OVERHEAD HEADING COLUMN --- */
.growing-media-col {
display: flex;
flex-direction: column;
width: 100%;
}
.growing-media-col h2.dustismo-title {
font-family: 'Dustismo Roman', 'Georgia', 'Times New Roman', serif;
font-size: 42px;
font-weight: 400;
color: #1c252c;
margin-bottom: 35px;
letter-spacing: -0.5px;
text-align: center;
width: 100%;
}
.image-wrapper {
width: 100%;
aspect-ratio: 16 / 11; /* Preserves photo bounding grid sizing box ratio */
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ==========================================================================
11. XL DISPLAY SPECIFIC OPTIMIZATIONS
========================================================================== */
@media (min-width: 1600px) {
.growing-section { padding: 140px 0; }
.growing-container { max-width: 1500px; gap: 100px; }
.meta-brand, .meta-tagline { font-size: 18px; }
.growing-text { font-size: 16px; max-width: 400px; margin-bottom: 50px; }
.btn-connected { font-size: 13px; padding: 16px 36px; }
.growing-media-col h2.dustismo-title { font-size: 54px; margin-bottom: 45px; }
}
/* ==========================================================================
12. TABLET & MOBILE VIEWPORT DOWN-SCALING BREAKPOINTS
========================================================================== */
@media (max-width: 992px) {
.growing-container {
grid-template-columns: 1fr;
gap: 50px;
}
.growing-content-col {
align-items: center;
text-align: center;
order: 2; /* Content moves logically under the header element on screen drop */
}
.growing-text {
max-width: 100%;
text-align: center;
}
.growing-media-col {
order: 1;
}
.growing-media-col h2.dustismo-title {
font-size: 34px;
margin-bottom: 25px;
}
}
@media (max-width: 576px) {
.growing-section { padding: 60px 0; }
.growing-media-col h2.dustismo-title { font-size: 26px; }
.btn-connected { width: 100%; text-align: center; }
}
/* ==========================================================================
13. OUR LEADERSHIP BANNER SECTION
========================================================================== */
.leadership-section {
width: 100%;
background-color: #e57c73; /* Exact terracotta coral pink background match */
padding: 90px 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.leadership-content {
width: 100%;
max-width: 1200px;
padding: 0 2%;
display: flex;
flex-direction: column;
align-items: center;
}
/* Helvetica Neue applied to matching image title */
.leadership-title {
font-family: 'Helvetica Neue', 'Montserrat', Arial, sans-serif;
font-size: 62px;
font-weight: 900;
color: #ffffff;
letter-spacing: 2px;
margin-bottom: 25px;
line-height: 1.1;
}
.leadership-text {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 17px;
color: #ffffff;
line-height: 1.6;
font-weight: 400;
max-width: 950px;
margin-bottom: 45px;
letter-spacing: 0.3px;
opacity: 0.95;
}
/* Subtle slate brown button styled identically to image layout */
.btn-more-info {
display: inline-block;
background-color: #8c7b73;
color: #ffffff;
text-decoration: none;
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
padding: 15px 36px;
transition: var(--transition-smooth);
border-radius: 1px;
}
.btn-more-info:hover {
background-color: #73645e;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* ==========================================================================
14. BIG DISPLAY & HANDHELD VIEWPORT RESPONSIVENESS
========================================================================== */
/* Extra Large Screens Scale-Up */
@media (min-width: 1600px) {
.leadership-section { padding: 130px 0; }
.leadership-title { font-size: 78px; margin-bottom: 35px; }
.leadership-text { font-size: 21px; max-width: 1200px; margin-bottom: 55px; }
.btn-more-info { font-size: 13px; padding: 18px 45px; }
}
/* Medium Tablets / iPads Screen Adjustments */
@media (max-width: 992px) {
.leadership-section { padding: 75px 0; }
.leadership-title { font-size: 46px; }
.leadership-text { font-size: 15px; max-width: 100%; }
.leadership-text br { display: none; } /* Flows copy neatly on mid viewports */
}
/* Mobile Devices & Small Profiles (e.g. iPhone SE) */
@media (max-width: 576px) {
.leadership-section { padding: 60px 0; }
.leadership-title { font-size: 32px; letter-spacing: 1px; margin-bottom: 20px; }
.leadership-text { font-size: 14px; line-height: 1.5; margin-bottom: 35px; }
.btn-more-info { width: 100%; max-width: 280px; text-align: center; }
}
/* ==========================================================================
EXACT GALLERY LAYOUT DESIGN (UPDATED & ALIGNED)
========================================================================== */
.exact-gallery-section {
width: 100%;
background-color: #eae0cf; /* Clean beige matching the original context theme background */
padding: 100px 0;
display: flex;
justify-content: center;
align-items: center;
}
.exact-gallery-container {
width: 100%;
max-width: 1240px;
padding: 0 4%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center; /* Ensures the left heading is centered vertically next to the image block */
}
/* --- LEFT SIDE: VERTICALLY CENTERED HEADING --- */
.exact-gallery-left-col {
width: 100%;
display: flex;
align-items: center;
}
.alstoria-main-heading {
font-family: "Alstoria Regular", "Georgia", serif;
font-weight: 400;
display: flex;
flex-direction: column;
align-items: center; /* Centered horizontally in the flexbox container */
line-height: 0.85;
width: 100%;
}
.alstoria-main-heading .word-moments {
font-family: "Alstoria Regular", serif;
font-size: 130px;
letter-spacing: -2px;
text-align: center; /* Forces text alignment center */
/* Gold Gradient Color Effect */
background: linear-gradient(to right, #f0c723, #0c75bc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.alstoria-main-heading .word-of-worship {
font-family: "Alstoria Regular", serif;
font-size: 54px;
letter-spacing: -0.5px;
margin-top: -5px;
margin-left: 0; /* Removed the left offset to ensure true centering */
text-align: center;
/* Vibrant Cyan-Blue Gradient Color Effect */
background: linear-gradient(to right, #f0c723, #0c75bc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.alstoria-main-heading .word-community {
font-family: "Alstoria Regular", serif;
font-size: 74px;
letter-spacing: -1px;
margin-top: -2px;
margin-left: 0; /* Removed the left offset to ensure true centering */
text-align: center;
/* Matching Cyan-Blue Gradient Color Effect */
background: linear-gradient(to right, #f0c723, #0c75bc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
/* --- RIGHT SIDE: STAIRCASE GRID OVERLAY SYSTEM --- */
.exact-gallery-right-col {
width: 100%;
}
.exact-staircase-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
gap: 0px; /* Gap completely removed to emulate single composite frame look */
width: 100%;
background-color: transparent;
padding: 0px;
}
/* Statement typography element mapping */
.exact-gallery-statement {
grid-column: 1 / span 2; /* Spans across columns 1 and 2 */
grid-row: 1; /* Remains on row 1 */
padding-right: 25px;
padding-bottom: 25px;
align-self: end; /* Positions paragraphs snugly right above image row 2 */
}
.exact-gallery-statement p {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 800;
line-height: 1.3;
color: #555555;
letter-spacing: 0.6px;
text-align: left;
}
.exact-grid-item {
position: relative;
width: 100%;
aspect-ratio: 1 / 1; /* Retains 1:1 crisp square box mapping */
overflow: hidden;
display: block;
}
/* Exact Coordinates Mapping Layout Setup */
.img-top-right { grid-column: 3; grid-row: 1; }
.img-mid-left { grid-column: 2; grid-row: 2; }
.img-mid-right { grid-column: 3; grid-row: 2; }
.img-bot-left { grid-column: 1; grid-row: 3; }
.img-bot-mid { grid-column: 2; grid-row: 3; }
.img-bot-right { grid-column: 3; grid-row: 3; }
.exact-grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ==========================================================================
BREAKPOINT RESPONSIVENESS TWEAKS
========================================================================== */
@media (min-width: 1600px) {
.exact-gallery-container { max-width: 1550px; }
.alstoria-main-heading .word-moments { font-size: 165px; }
.alstoria-main-heading .word-of-worship { font-size: 72px; }
.alstoria-main-heading .word-community { font-size: 96px; }
.exact-gallery-statement p { font-size: 13px; }
}
@media (max-width: 1024px) {
/* ... keep your existing container and heading overrides ... */
/* Convert from flex-column to a neat 2-column responsive grid */
.exact-staircase-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
/* Reset the hardcoded desktop coordinates so images flow naturally into the new grid */
.exact-grid-item.img-top-right,
.exact-grid-item.img-mid-left,
.exact-grid-item.img-mid-right,
.exact-grid-item.img-bot-left,
.exact-grid-item.img-bot-mid,
.exact-grid-item.img-bot-right {
grid-column: auto;
grid-row: auto;
}
/* Make the text statement sit at the top and span across both mobile columns */
.exact-gallery-statement {
grid-column: 1 / -1;
padding: 0 0 20px 0;
text-align: center;
}
.exact-gallery-statement p {
text-align: center;
}
.exact-grid-item {
aspect-ratio: 1 / 1; /* Keep the images perfectly square */
}
}
/* Fine-tune for mobile phones */
@media (max-width: 576px) {
.exact-staircase-grid {
gap: 8px; /* Slightly tighter gaps for smaller screens */
}
}
/* ==========================================================================
MOBILE RESPONSIVENESS: EXACT GALLERY SECTION
========================================================================== */
/* Tablet & Large Mobile Adjustments */
@media (max-width: 992px) {
.exact-gallery-container {
grid-template-columns: 1fr; /* Ensures text block stacks above images */
gap: 50px; /* Controls the space between the text and the gallery grid */
}
.exact-gallery-left-col {
align-items: center;
text-align: center;
}
}
/* Standard Mobile Phones */
@media (max-width: 576px) {
/* Reduce large top/bottom whitespace for smaller screens */
.exact-gallery-section {
padding: 50px 0;
}
.exact-gallery-container {
gap: 35px;
}
/* Scale down the stylized Alstoria fonts so they fit horizontally */
.alstoria-main-heading .word-moments {
font-size: 62px;
letter-spacing: -1px;
}
.alstoria-main-heading .word-of-worship {
font-size: 34px;
}
.alstoria-main-heading .word-community {
font-size: 42px;
}
.exact-gallery-statement p {
font-size: 13px;
}
/* Make the button more touch-friendly and span cleanly on mobile */
.btn-view-gallery {
width: 100%;
max-width: 280px;
text-align: center;
padding: 16px 20px;
margin-top: 25px;
}
}
/* Extra Small Phones (e.g., iPhone SE) */
@media (max-width: 375px) {
.exact-gallery-section {
padding: 40px 0;
}
/* Prevent text wrapping on very narrow screens */
.alstoria-main-heading .word-moments {
font-size: 56px;
}
.alstoria-main-heading .word-of-worship {
font-size: 30px;
}
.alstoria-main-heading .word-community {
font-size: 36px;
}
}
/* ==========================================================================
18. SHARE YOUR HEART WITH US SECTION
========================================================================== */
.share-outer-container {
width: 100%;
background-color: #30c0cc; /* Exact vibrant cyan frame background color match */
padding: 100px 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.share-card-wrapper {
width: 100%;
max-width: 1200px;
background-color: #ffffff; /* Inner container canvas background */
margin: 0 5%;
display: grid;
grid-template-columns: 1fr 1.35fr; /* Matches content splits text to image box proportion */
position: relative;
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
/* --- FLOATING CIRCULAR BADGE --- */
.floating-badge {
position: absolute;
top: 0;
left: 45%; /* Perfectly intersecting center line between sections */
transform: translate(-50%, -50%);
width: 110px;
height: 110px;
background-color: #d65a31; /* Earthy terracotta orange/red color parameter */
border-radius: 50%;
z-index: 20;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
cursor: pointer;
transition: var(--transition-smooth);
}
.floating-badge:hover {
transform: translate(-50%, -50%) scale(1.05) rotate(15deg);
}
.circular-text-svg {
width: 100%;
height: 100%;
animation: rotateClockwise 20s linear infinite; /* Subtle continuous badge spin rotation loop */
}
@keyframes rotateClockwise {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.badge-arrow {
position: absolute;
}
/* --- LEFT COLUMN: TYPOGRAPHY LAYOUT --- */
.share-text-column {
padding: 70px 60px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.share-heading {
display: flex;
flex-direction: column;
line-height: 0.95;
margin-bottom: 30px;
}
/* Precise Text Outline Effect rule logic */
.share-heading .outline-text {
font-family: 'Helvetica Neue', 'Montserrat', sans-serif;
font-size: 58px;
font-weight: 700;
color: transparent;
-webkit-text-stroke: 1.5px #333333; /* Clean structural silhouette edge matching preview image */
letter-spacing: 1px;
}
.share-heading .solid-text {
font-family: 'Helvetica Neue', 'Montserrat', sans-serif;
font-size: 34px;
font-weight: 900;
color: #2b2b2b;
letter-spacing: -0.5px;
margin-top: 5px;
}
.share-description {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 15px;
color: #444444;
line-height: 1.5;
font-weight: 400;
margin-bottom: 40px;
text-align: left;
}
.btn-share-gold {
display: inline-block;
background-color: #d1b438; /* Gold accent styling */
color: #ffffff;
text-decoration: none;
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
padding: 14px 28px;
transition: var(--transition-smooth);
border-radius: 1px;
}
.btn-share-gold:hover {
background-color: #b09527;
transform: translateY(-2px);
}
/* --- RIGHT COLUMN: COMPONENT IMAGE LAYOUT --- */
.share-media-column {
width: 100%;
overflow: hidden;
}
.share-media-column img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ==========================================================================
19. EXTRA LARGE DISPLAY AND MOBILES BREAKPOINTS
========================================================================== */
@media (min-width: 1600px) {
.share-card-wrapper { max-width: 1400px; }
.share-text-column { padding: 100px 90px; }
.share-heading .outline-text { font-size: 72px; }
.share-heading .solid-text { font-size: 42px; }
.share-description { font-size: 18px; }
.btn-share-gold { font-size: 12px; padding: 16px 36px; }
.floating-badge { width: 130px; height: 130px; left: 43%; }
}
@media (max-width: 992px) {
.share-outer-container { padding: 60px 0; }
.share-card-wrapper { grid-template-columns: 1fr; margin: 0 4%; }
.share-text-column { padding: 60px 40px; align-items: center; text-align: center; }
.share-description { text-align: center; }
.floating-badge {
left: 50%;
top: 0;
width: 90px;
height: 90px;
}
.share-media-column {
height: 350px;
}
}
@media (max-width: 576px) {
.share-text-column { padding: 45px 24px; }
.share-heading .outline-text { font-size: 46px; }
.share-heading .solid-text { font-size: 26px; }
.share-description { font-size: 14px; }
.btn-share-gold { width: 100%; text-align: center; }
.share-media-column { height: 260px; }
}
/* ==========================================================================
20. EXACT COMPOSITE SITE FOOTER
========================================================================== */
.site-footer {
width: 100%;
background-color: #eae0cf; /* Exact soft cream-beige background tint match */
padding-top: 80px;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 50px;
padding-right: 50px ;
}
.footer-container {
width: 100%;
max-width: 1320px;
padding: 0 0% 50px 0%;
display: grid;
grid-template-columns: repeat(4, 1fr); /* Splits the 4 heading blocks symmetrically */
gap: 40px;
}
.footer-col {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* --- LONG THIN HORIZONTAL TRACKING DIVIDER HEADINGS --- */
.footer-heading {
font-family: 'Gotham', 'Montserrat', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
color: #1a1a1a;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 25px;
position: relative;
width: 100%;
padding-bottom: 8px;
}
/* Draws the full-width razor-thin bottom line divider under headings */
.footer-heading::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #737066; /* Matching muted slate line tint */
opacity: 0.6;
}
/* --- LINKS LIST PACKAGES --- */
.footer-links-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px; /* Clean spacing matching the image typography line-height tracking */
}
.footer-links-list a {
text-decoration: none;
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 14px;
color: #2b2b2b;
font-weight: 400;
transition: var(--transition-smooth);
}
.footer-links-list a:hover {
color: var(--primary-gold);
padding-left: 2px;
}
/* ==========================================================================
21. FOOTER BASELINE INTEGRATED BRAND BAR
========================================================================== */
.footer-bottom-bar {
width: 100%;
padding: 40px 0 60px 0;
display: flex;
justify-content: center;
}
.footer-bottom-container {
width: 100%;
max-width: 1320px;
padding: 0;
display: flex;
justify-content: space-between;
align-items: flex-end; /* Lowers brand assets and base credits to absolute bottom line tracking */
}
.footer-brand-box {
flex: 1;
display: flex;
justify-content: flex-start;
}
/* Left-aligned native brand rendering */
.footer-main-logo {
height: auto;
width: 230px;
display: block;
}
/* Centered cluster matching alignment coordinates from preview snapshot */
.footer-center-credits {
flex: 1.5;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.footer-socials {
display: flex;
align-items: center;
gap: 14px; /* tightened now that each icon has its own badge circle */
}
.footer-socials a {
width: 38px;
height: 38px;
border-radius: 50%;
background-color: rgba(26, 26, 26, 0.08);
color: #1a1a1a;
transition: var(--transition-smooth);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.footer-socials svg {
width: 20px;
height: 20px;
}
.footer-socials a:hover {
background-color: var(--primary-gold);
color: #ffffff;
transform: translateY(-2px) scale(1.06);
}
/* Custom serif layout rule for matching original copyright typeface style */
.copyright-text {
font-family: 'Dustismo Roman', 'Georgia', serif;
font-size: 20px;
font-weight: 400;
color: #1a1a1a;
letter-spacing: 0.2px;
margin-top: 2px;
}
/* Hidden container holding column geometry layout values uniform */
.hidden-spacer {
flex: 1;
pointer-events: none;
visibility: hidden;
}
/* ==========================================================================
22. HANDHELD VIEWPORT RESPONSIVE DROPDOWNS
========================================================================== */
@media (max-width: 1024px) {
.site-footer {
padding-left: 30px;
padding-right: 30px;
}
.footer-container {
grid-template-columns: repeat(2, 1fr); /* 2x2 split for standard tablets */
gap: 50px 30px;
padding-bottom: 70px;
}
.footer-bottom-container {
flex-direction: column;
align-items: center;
gap: 40px;
}
.footer-brand-box {
justify-content: center;
}
.hidden-spacer {
display: none;
}
}
@media (max-width: 576px) {
.site-footer {
padding-left: 24px;
padding-right: 24px;
}
.footer-container {
grid-template-columns: 1fr; /* Absolute vertical fold line alignment on mobile */
gap: 25px;
padding: 0 0% 20px 0%;
}
.footer-heading {
margin-bottom: 15px;
}
.footer-main-logo {
width: 180px;
}
.copyright-text {
font-size: 16px;
}
.footer-socials {
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
}
/* ==========================================================================
23. PASTOR WELCOME PROFILE SECTION
========================================================================== */
.pastor-welcome-section {
width: 100%;
background-color: #eef1f4; /* Subtle off-white/light gray canvas background */
padding: 100px 0 20px 0;
display: flex;
justify-content: center;
align-items: center;
}
.pastor-welcome-container {
width: 100%;
max-width: 1140px;
padding: 0 4%;
display: flex;
flex-direction: column;
align-items: center;
}
/* --- TOP HEADER ALSTORIA PROFILE GRAPHIC STYLE --- */
.pastor-header-block {
margin-bottom: 70px;
width: 100%;
}
.alstoria-welcome-heading {
font-family: "Alstoria Regular", "Georgia", serif;
font-weight: 400;
display: flex;
flex-direction: column;
align-items: center;
line-height: 0.82;
width: 100%;
}
.alstoria-welcome-heading .word-welcome {
font-family: "Alstoria Regular", "Georgia", serif;
font-size: 155px;
letter-spacing: -2px;
text-align: center;
background: linear-gradient(to right, #c5a830 35%, #0c75bc 75%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.alstoria-welcome-heading .word-to-mashi {
font-family: "Alstoria Regular", "Georgia", serif;
font-size: 64px;
color: #0c75bc;
letter-spacing: -0.5px;
margin-top: -10px;
text-align: center;
background: linear-gradient(to right, #c5a830 30%, #0c75bc 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.alstoria-welcome-heading .word-church {
font-family: "Alstoria Regular", "Georgia", serif;
font-size: 92px;
color: #0c75bc;
letter-spacing: -1px;
margin-top: -5px;
text-align: center;
background: linear-gradient(to right, #c5a830 30%, #0c75bc 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
/* --- BOTTOM PROFILE GRID CONFIGURATION --- */
.pastor-bio-grid {
display: grid;
grid-template-columns: 4fr 8fr; /* Accurate layout balance matching image */
gap: 55px;
width: 100%;
align-items: start;
}
/* --- IMAGE COLUMN DISPLAY --- */
.pastor-image-col {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.pastor-img-frame {
width: 100%;
max-width: 320px;
aspect-ratio: 4 / 5;
border-radius: 28px; /* Smooth rounded corners matched to layout view */
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
margin-bottom: 12px;
}
.pastor-img-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pastor-img-sub {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
line-height: 1.4;
color: #555555;
text-align: center;
letter-spacing: 0.2px;
}
/* --- BIO TEXT & SIGNATURE COLUMN --- */
.pastor-text-col {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.bio-paragraph {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 15px;
color: #2b2b2b;
line-height: 1.6;
font-weight: 500;
margin-bottom: 24px;
text-align: left;
letter-spacing: -0.1px;
}
.bio-paragraph:last-of-type {
margin-bottom: 35px;
}
/* Signoff Branding */
.pastor-signoff {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.signoff-blessings {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 700;
color: #2b2b2b;
margin-bottom: 4px;
}
.signature-svg-wrapper {
margin: 4px 0 2px -10px; /* Aligns signature loops over baseline text gracefully */
opacity: 0.9;
}
.signoff-title {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;
color: #444444;
}
/* ==========================================================================
24. RESPONSIVE MEDIA QUERIES FOR PROFILE SECTION
========================================================================== */
/* Wide Monitor Configurations */
@media (min-width: 1600px) {
.pastor-welcome-container { max-width: 1350px; }
.alstoria-welcome-heading .word-welcome { font-size: 195px; }
.alstoria-welcome-heading .word-to-mashi { font-size: 82px; }
.alstoria-welcome-heading .word-church { font-size: 114px; }
.pastor-bio-grid { gap: 80px; }
.bio-paragraph { font-size: 17px; margin-bottom: 30px; }
.pastor-img-frame { max-width: 380px; }
}
/* Tablets / Pro Screens */
@media (max-width: 992px) {
.pastor-welcome-section { padding: 70px 0; }
.pastor-bio-grid {
grid-template-columns: 1fr; /* Flex container unrolls sequentially */
gap: 45px;
}
.pastor-image-col {
order: 1;
}
.pastor-text-col {
order: 2;
align-items: center;
}
.bio-paragraph {
text-align: center;
}
.pastor-signoff {
align-items: center;
}
}
/* Smart Handheld Viewports (e.g., iPhone SE) */
@media (max-width: 576px) {
.alstoria-welcome-heading .word-welcome { font-size: 95px; }
.alstoria-welcome-heading .word-to-mashi { font-size: 42px; margin-top: -2px; }
.alstoria-welcome-heading .word-church { font-size: 58px; margin-top: 0; }
.pastor-header-block { margin-bottom: 45px; }
.bio-paragraph { font-size: 14px; line-height: 1.5; }
.pastor-img-frame { max-width: 260px; border-radius: 20px; }
}
/* ==========================================================================
25. PASTOR LANCY AND RITA BIO SECTION
========================================================================== */
.pastor-lancy-section {
width: 100%;
background-color: #eef1f4; /* Matches the consistent off-white background block */
padding: 20px 0 100px 0; /* Tightened top padding to sequence neatly after the first profile */
display: flex;
justify-content: center;
align-items: center;
}
.pastor-lancy-container {
width: 100%;
max-width: 1140px;
padding: 0 4%;
display: grid;
grid-template-columns: 4fr 8fr; /* Exactly matches the grid width layout of the row above */
gap: 55px;
}
/* Empty structural column to dynamically align bio text with the main content rightwards */
.pastor-lancy-spacer {
width: 100%;
}
.pastor-lancy-content {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
/* Uses Dustismo Roman to yield the elegant serif look from your image */
.lancy-title-serif {
font-family: 'Dustismo Roman', 'Georgia', 'Times New Roman', serif;
font-size: 42px;
font-weight: 400;
color: #1c252c;
margin-bottom: 20px;
letter-spacing: -0.5px;
line-height: 1.2;
}
.lancy-bio-text {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 15px;
color: #2b2b2b;
line-height: 1.6;
font-weight: 500;
text-align: left;
letter-spacing: -0.1px;
}
/* ==========================================================================
26. XL DISPLAY AND RESPONSIVE BREAKPOINTS FOR SECOND BIO
========================================================================== */
@media (min-width: 1600px) {
.pastor-lancy-container { max-width: 1350px; gap: 80px; }
.lancy-title-serif { font-size: 52px; margin-bottom: 25px; }
.lancy-bio-text { font-size: 17px; }
}
@media (max-width: 992px) {
.pastor-lancy-container {
grid-template-columns: 1fr; /* Unrolls columns into a straight line container on tablets */
gap: 0;
}
.pastor-lancy-spacer {
display: none; /* Destroys the layout indent margin box so text centers up nicely */
}
.pastor-lancy-content {
align-items: center;
}
.lancy-bio-text {
text-align: center;
}
}
@media (max-width: 576px) {
.pastor-lancy-section { padding-bottom: 60px; }
.lancy-title-serif { font-size: 28px; text-align: center; margin-bottom: 15px; }
.lancy-bio-text { font-size: 14px; line-height: 1.5; }
}
.line-sp{
height: 3px;
width: 100%;
background-color: #ffffff;
margin-top:50px;
}
/* ==========================================================================
MISSION AND INTERACTIVE STORY TIMELINE SECTION (MATCHED TO DESIGN)
========================================================================== */
.mission-timeline-section {
width: 100%;
display: flex;
flex-direction: column;
background-color: #141414;
/* NOTE: do not set overflow here. Any overflow value other than "visible"
on an ancestor of .stack-cards-sticky breaks position: sticky, which is
why the section wasn't pinning while the cards animated. */
}
/* --- MERGED MISSION + PHOTO BLOCK: one shared background image --- */
.mission-visual-block {
position: relative;
width: 100%;
height: 1040px;
overflow: hidden;
}
.mission-visual-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 0;
}
/* Dark gradient sits only over the top (text) portion of the image, then
fades out completely so the rest of the photo reads clean/unobstructed. */
.mission-visual-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 58%;
background: linear-gradient(
180deg,
rgba(8, 8, 10, 0.92) 0%,
rgba(8, 8, 10, 0.8) 35%,
rgba(8, 8, 10, 0.45) 70%,
rgba(8, 8, 10, 0) 100%
);
z-index: 1;
}
.mission-banner-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 90px 5% 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.mission-giant-heading {
font-family: 'Helvetica Neue', 'Montserrat', Arial, sans-serif;
font-size: 24px;
font-weight: 900;
color: #ffffff; /* White text now that it sits over the photo/overlay */
line-height: 1.3;
letter-spacing: -0.2px;
margin-bottom: 40px;
text-transform: uppercase;
}
.mission-sub-paragraph {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
font-weight: 500;
max-width: 780px;
margin-bottom: 30px;
}
.mission-tagline {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 13px;
color: var(--primary-gold);
font-weight: 700;
}
@media (min-width: 1600px) {
.mission-visual-block { height: 1280px; }
.mission-banner-content { max-width: 1100px; padding: 130px 5% 0; }
.mission-giant-heading { font-size: 30px; margin-bottom: 50px; }
.mission-sub-paragraph { font-size: 16px; max-width: 900px; margin-bottom: 36px; }
.mission-tagline { font-size: 15px; }
}
@media (max-width: 768px) {
.mission-visual-block { height: 760px; }
.mission-visual-overlay { height: 72%; }
.mission-banner-content { padding: 60px 6% 0; }
}
@media (max-width: 480px) {
.mission-visual-block { height: 640px; }
.mission-visual-overlay { height: 78%; }
.mission-banner-content { padding: 48px 7% 0; }
.mission-giant-heading { font-size: 18px; margin-bottom: 26px; }
.mission-sub-paragraph { font-size: 12px; margin-bottom: 20px; }
.mission-tagline { font-size: 12px; }
}
/* --- BLACK RIBBON ROW PANEL --- */
.story-ribbon-panel {
width: 100%;
background-color: #0b0b0b; /* True deep pitch-black */
padding: 50px 0;
display: flex;
justify-content: center;
align-items: center;
}
.story-ribbon-content {
width: 100%;
max-width: 1300px;
padding: 0 5%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.ribbon-title {
font-family: 'Helvetica Neue', 'Montserrat', Arial, sans-serif;
font-size: 32px;
font-weight: 900;
color: #ffffff;
letter-spacing: 0.5px;
margin-bottom: 15px;
}
.ribbon-desc {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 700;
color: #b3b3b3;
line-height: 1.5;
max-width: 900px;
}
/* ==========================================================================
27. STACKED CARD SCROLL-SCRUB ENGINE (Kanak Naturals style)
All cards share the exact same width/height and never resize. They sit on
top of one another, cascaded with a horizontal peek offset (each waiting
card visible only by its right edge). Scrolling scrubs the next card's
translateX from its resting "peek" offset down to 0, sliding it fully
over the currently active card. translateX-only, GPU accelerated, driven
by JS via requestAnimationFrame.
========================================================================== */
/* ==========================================================================
SECTION LAYOUT & CARD SIZING
========================================================================== */
.stack-cards-block {
width: 100%;
margin: 0;
padding: 0;
border: none;
background-color: #0b0b0b; /* Edge-to-edge background */
position: relative;
}
.stack-cards-sticky {
position: sticky;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Large bold heading placed at the top of the section */
.stack-section-heading {
font-family: 'Helvetica Neue', 'Montserrat', Arial, sans-serif;
font-size: 48px;
font-weight: 900;
color: #ffffff;
text-align: center;
padding: 30px 0;
margin: 0;
text-transform: uppercase;
}
.stack-cards-matrix {
position: relative;
width: 100%;
flex-grow: 1; /* Pushes the cards directly below the heading */
}
/* Identical sizing, absolute stacking, and rounded styling for all cards */
.stack-card {
position: absolute;
top: 0;
left: 0;
width: 60vw; /* Exact 60% of viewport width */
height: 100vh; /* 80-90vh requirement */
margin: 0;
padding: 0;
border: none;
border-radius: 20px; /* Rounded corners */
box-shadow: -15px 0 40px rgba(0, 0, 0, 0.4); /* Subtle shadow for stack depth */
will-change: transform;
transform: translateX(100vw); /* Default hidden off-screen */
backface-visibility: hidden;
}
.stack-card-inner {
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px 8%;
border-radius: inherit;
overflow: hidden;
}
/* Card background colors */
.stack-card:nth-child(4n + 1) .stack-card-inner { background-color: #1c1c1c; }
.stack-card:nth-child(4n + 2) .stack-card-inner { background-color: #201f1f; }
.stack-card:nth-child(4n + 3) .stack-card-inner { background-color: #1a1a1a; }
.stack-card:nth-child(4n + 4) .stack-card-inner { background-color: #1f1c1c; }
.stack-card-decor {
position: absolute;
top: 40px;
right: 40px;
width: 60px;
height: 70px;
opacity: 0.9;
pointer-events: none;
}
.stack-card-decor svg { width: 100%; height: 100%; display: block; }
.stack-card-year {
font-family: 'Helvetica Neue', 'Montserrat', Arial, sans-serif;
font-size: 58px;
font-weight: 900;
color: #e6d3af; /* Warm cream/tan tone matching the reference design */
line-height: 1;
margin-bottom: 28px;
display: block;
}
.stack-card-header {
font-family: 'Helvetica Neue', 'Montserrat', Arial, sans-serif;
font-size: 34px;
font-weight: 900;
color: #ffffff;
letter-spacing: 0.5px;
margin-bottom: 22px;
}
.stack-card-body-text {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;
color: #d9d9d9;
line-height: 1.7;
max-width: 500px;
}
/* --- PROGRESS RAIL: shows position within the stacked sequence --- */
.stack-cards-progress {
position: absolute;
left: 15%;
bottom: 40px;
display: flex;
gap: 10px;
z-index: 999;
}
.stack-cards-progress span {
width: 34px;
height: 3px;
background-color: rgba(255, 255, 255, 0.25);
transition: background-color 0.3s ease;
}
.stack-cards-progress span.active {
background-color: var(--primary-gold);
}
/* --- TABLET: same fixed-size mechanic, just a wider card and gentler peek offset (set via JS) --- */
@media (max-width: 1200px) {
.stack-card { width: auto; height: 100vh; }
.stack-card-inner { padding: 50px; }
.stack-card-year { font-size: 44px; margin-bottom: 20px; }
.stack-card-header { font-size: 26px; margin-bottom: 16px; }
.stack-cards-progress { left: 8%; }
}
/* --- MOBILE: sticky/scrub disabled, cards flow vertically full-size --- */
@media (max-width: 992px) {
.stack-cards-block { height: auto !important; }
.stack-cards-block .stack-cards-sticky {
position: relative;
height: auto;
overflow: visible;
padding: 60px 0;
}
.stack-cards-block .stack-cards-matrix {
height: auto;
display: flex;
flex-direction: column;
gap: 40px;
}
.stack-cards-block .stack-card {
position: relative;
top: auto;
left: auto;
width: 90%;
height: auto;
max-height: none;
margin: 0 auto;
transform: none !important;
}
.stack-cards-block .stack-card-inner {
padding: 40px 32px;
}
.stack-cards-progress { display: none; }
}
/* --- SMALL PHONES: tighter padding, smaller type, full-bleed card --- */
@media (max-width: 576px) {
.stack-cards-block .stack-card { width: 100%; }
.stack-cards-block .stack-card-inner {
padding: 34px 24px;
}
.stack-card-decor { top: 24px; right: 24px; width: 42px; height: 50px; }
.stack-card-year { font-size: 34px; margin-bottom: 16px; }
.stack-card-header { font-size: 20px; margin-bottom: 12px; }
.stack-card-body-text { font-size: 13.5px; line-height: 1.6; max-width: 100%; }
}
/* --- SMALLEST HANDHELDS (e.g. iPhone SE) --- */
@media (max-width: 375px) {
.stack-cards-block .stack-card-inner {
padding: 28px 20px;
}
.stack-card-decor { top: 18px; right: 18px; width: 36px; height: 42px; }
.stack-card-year { font-size: 28px; margin-bottom: 12px; }
.stack-card-header { font-size: 17px; margin-bottom: 10px; }
.stack-card-body-text { font-size: 13px; }
}
/* ==========================================================================
28. EVENTS & ACTIVITIES PAGE
========================================================================== */
/* --- Current-page nav indicator --- */
.nav-links a.nav-link-active {
color: var(--primary-gold);
}
/* --- Generic scroll-reveal fade/slide utility (paired with the
IntersectionObserver in script.js — element fades + rises into place
the first time it enters the viewport) --- */
.scroll-reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.7s var(--kanak-cubic), transform 0.7s var(--kanak-cubic);
}
.scroll-reveal.in-view {
opacity: 1;
transform: translateY(0);
}
/* --- HERO: heading + photo + search toolbar --- */
.events-hero-section {
width: 100%;
background-color: #eef1f4; /* Same subtle off-white/light gray canvas as the leadership hero */
padding: 110px 0 50px;
display: flex;
justify-content: center;
}
.events-hero-container {
width: 100%;
max-width: 1140px;
padding: 0 4%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.events-hero-heading {
font-family: "Alstoria Regular", "Georgia", serif;
font-weight: 400;
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 0.85;
margin-bottom: 38px;
}
.events-hero-heading .word-events {
font-family: "Alstoria Regular", "Georgia", serif;
font-size: 108px;
letter-spacing: -2px;
color: #0c75bc;
}
.events-hero-heading .word-activities {
font-family: 'Helvetica Neue', 'Montserrat', Arial, sans-serif;
font-weight: 900;
font-size: 60px;
letter-spacing: -0.5px;
color: var(--primary-gold);
display: flex;
align-items: baseline;
gap: 12px;
margin-top: 8px;
}
.events-hero-heading .amp-events {
font-weight: 600;
font-size: 66px;
color: #0c75bc;
}
.events-hero-photo {
width: 100%;
max-width: 1100px;
aspect-ratio: 16 / 8;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
margin-bottom: 28px;
}
.events-hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.events-toolbar {
width: 100%;
max-width: 1100px;
display: flex;
flex-direction: column;
gap: 14px;
}
.events-search-bar {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
background-color: #ffffff;
border: 1px solid #d8dbe0;
border-radius: 6px;
padding: 13px 20px;
}
.events-search-icon {
color: #666666;
flex-shrink: 0;
}
.events-search-bar input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 13px;
color: #333333;
}
.events-search-bar input::placeholder {
color: #8a8f96;
}
.events-view-toggle {
display: flex;
align-items: center;
gap: 16px;
padding-left: 16px;
border-left: 1px solid #e2e4e8;
flex-shrink: 0;
}
.events-view-toggle a {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 700;
color: #666666;
text-decoration: none;
letter-spacing: 0.3px;
transition: var(--transition-smooth);
}
.events-view-toggle a.active,
.events-view-toggle a:hover {
color: #0c75bc;
}
.events-today-row {
display: flex;
align-items: center;
gap: 18px;
}
.events-today-btn {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
color: #333333;
background-color: #ffffff;
border: 1px solid #c9ccd1;
border-radius: 4px;
padding: 7px 16px;
text-decoration: none;
transition: var(--transition-smooth);
}
.events-today-btn:hover {
border-color: var(--primary-gold);
color: var(--primary-gold);
}
.events-now-link {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
color: #0c75bc;
text-decoration: none;
}
.events-now-link:hover {
text-decoration: underline;
}
/* --- EVENTS LIST: date/location/description + flyer image --- */
.events-list-section {
width: 100%;
background-color: #ffffff;
padding: 70px 0 110px;
}
.events-list-container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 4%;
}
.event-card-row {
display: grid;
grid-template-columns: 7fr 4fr;
gap: 55px;
align-items: start;
padding-bottom: 55px;
border-bottom: 1px solid #ececec;
}
.event-title {
font-family: 'Helvetica Neue', 'Montserrat', Arial, sans-serif;
font-weight: 900;
font-size: 28px;
color: #161616;
text-transform: uppercase;
letter-spacing: 0.2px;
margin-bottom: 20px;
}
.event-meta-block {
display: flex;
flex-direction: column;
gap: 11px;
margin-bottom: 22px;
}
.event-meta-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 13.5px;
font-weight: 500;
color: #333333;
line-height: 1.55;
}
.event-meta-icon {
flex-shrink: 0;
margin-top: 2px;
color: var(--primary-gold);
}
.event-desc {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
color: #444444;
line-height: 1.75;
max-width: 560px;
}
.event-readmore {
color: #0c75bc;
font-weight: 700;
text-decoration: none;
}
.event-readmore:hover {
text-decoration: underline;
}
.event-flyer-col {
width: 100%;
}
.event-flyer-frame {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
}
.event-flyer-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: var(--transition-smooth);
}
.event-flyer-frame:hover img {
transform: scale(1.03);
}
.events-empty-state {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
color: #777777;
text-align: center;
padding: 50px 0;
}
/* --- RESPONSIVE: EVENTS PAGE --- */
@media (min-width: 1200px) {
.event-title { font-size: 32px; }
.event-desc { font-size: 14.5px; }
}
@media (min-width: 1600px) {
.events-hero-container { max-width: 1350px; }
.events-hero-heading .word-events { font-size: 138px; }
.events-hero-heading .word-activities { font-size: 74px; }
.events-hero-heading .amp-events { font-size: 82px; }
.events-list-container { max-width: 1350px; }
.event-title { font-size: 36px; }
.event-desc { font-size: 15px; max-width: 620px; }
}
@media (max-width: 992px) {
.events-hero-section { padding: 80px 0 40px; }
.events-hero-heading .word-events { font-size: 78px; }
.events-hero-heading .word-activities { font-size: 42px; }
.events-hero-heading .amp-events { font-size: 46px; }
.events-hero-photo { aspect-ratio: 16 / 10; }
.event-card-row {
grid-template-columns: 1fr;
gap: 30px;
}
.event-flyer-col { max-width: 340px; }
}
@media (max-width: 576px) {
.events-hero-heading .word-events { font-size: 54px; letter-spacing: -1px; }
.events-hero-heading .word-activities { font-size: 30px; gap: 8px; }
.events-hero-heading .amp-events { font-size: 34px; }
.events-hero-photo { border-radius: 14px; aspect-ratio: 4 / 3; }
.events-search-bar {
flex-wrap: wrap;
row-gap: 12px;
}
.events-view-toggle {
padding-left: 0;
border-left: none;
width: 100%;
justify-content: flex-start;
padding-top: 10px;
border-top: 1px solid #e2e4e8;
}
.event-title { font-size: 21px; }
.event-flyer-col { max-width: 100%; }
}
/* ==========================================================================
GET IN TOUCH PAGE STYLES
========================================================================== */
.contact-page-body {
background-color: #ededed; /* Matches the solid light gray background */
}
.get-in-touch-section {
width: 100%;
padding: 80px 0 120px 0;
display: flex;
justify-content: center;
}
.contact-container {
width: 100%;
max-width: 1140px;
padding: 0 5%;
display: flex;
flex-direction: column;
}
/* --- Header Area --- */
.contact-header {
margin-bottom: 50px;
}
.contact-main-title {
font-family: 'Helvetica Neue', 'Montserrat', Arial, sans-serif;
font-size: 64px;
font-weight: 900;
color: #6a7178; /* Muted slate/grey-blue color from the image */
margin-bottom: 25px;
letter-spacing: -1px;
}
.contact-intro {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 15px;
color: #2b2b2b;
line-height: 1.6;
font-weight: 500;
max-width: 800px;
}
/* --- Layout Grid --- */
.contact-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: start;
}
/* --- Form Styles --- */
.contact-form {
display: flex;
flex-direction: column;
gap: 25px;
width: 100%;
}
.form-group {
display: flex;
flex-direction: column;
}
.main-label {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 18px;
color: #2b2b2b;
font-weight: 500;
margin-bottom: 8px;
}
.name-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.input-wrapper {
display: flex;
flex-direction: column;
}
.sub-label {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 13px;
color: #2b2b2b;
margin-top: 6px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
border: 1px solid #a3a3a3; /* Sharp square borders */
background-color: #ffffff;
padding: 12px 15px;
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 15px;
color: #333;
outline: none;
border-radius: 0; /* Ensures square corners */
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
border-color: #0c75bc;
}
textarea {
resize: vertical;
}
/* --- reCAPTCHA Mockup --- */
.recaptcha-badge {
display: flex;
width: 220px;
height: 50px;
border: 1px solid #a3a3a3;
background: #fff;
margin-bottom: 30px;
}
.recaptcha-gold {
background-color: #d1b438;
color: #ffffff;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
padding: 0 10px;
}
.recaptcha-icon {
width: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f1f4f8;
}
/* --- Submit Button --- */
.btn-submit-contact {
background-color: #1a7eb8; /* Blue from the image */
color: #ffffff;
border: none;
padding: 12px 30px;
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 700;
cursor: pointer;
align-self: flex-start;
transition: background-color 0.3s ease;
border-radius: 0;
}
.btn-submit-contact:hover {
background-color: #0f5b8a;
}
/* --- Contact Info Sidebar --- */
.contact-info-col {
display: flex;
flex-direction: column;
padding-top: 40px; /* Aligns with the first input */
}
.info-row-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 35px;
}
.info-block {
margin-bottom: 35px;
}
.info-heading {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 13px;
color: #2b2b2b;
font-weight: 500;
margin-bottom: 8px;
text-transform: uppercase;
}
.info-text {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 13px;
color: #2b2b2b;
font-weight: 400;
line-height: 1.5;
}
.map-embed {
width: 100%;
border: none;
background-color: none;
height: 280px;
overflow: hidden;
}
/* --- Responsive Breakpoints --- */
@media (max-width: 992px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 60px;
}
.contact-info-col {
padding-top: 0;
}
}
@media (max-width: 576px) {
.contact-main-title {
font-size: 42px;
}
.name-inputs {
grid-template-columns: 1fr;
gap: 15px;
}
.info-row-top {
grid-template-columns: 1fr;
gap: 25px;
}
}
/* ==========================================================================
ONLINE GIVING PAGE STYLES
========================================================================== */
.giving-page-body {
background-color: #ededed; /* Matches the solid light gray background */
}
/* Button Active State for the Navbar */
.btn-giving.active-btn {
background-color: #1a568c;
color: #ffffff;
}
.giving-section {
width: 100%;
padding: 80px 0 120px 0;
display: flex;
justify-content: center;
}
.giving-container {
width: 100%;
max-width: 1140px;
padding: 0 5%;
display: flex;
flex-direction: column;
}
/* --- Typography --- */
.giving-main-title {
font-family: 'Helvetica Neue', 'Montserrat', Arial, sans-serif;
font-size: 64px;
font-weight: 900;
color: #6a7178; /* Muted slate/grey-blue matching Get In Touch */
line-height: 1.1;
margin-bottom: 25px;
letter-spacing: -1px;
text-transform: uppercase;
}
/* --- Layout Elements --- */
.giving-divider {
border: none;
height: 1px;
background-color: #555555;
margin: 0;
width: 100%;
}
.giving-text-row {
display: flex;
justify-content: flex-end; /* Pushes the paragraph to the right side */
padding: 25px 0;
}
.giving-desc {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 14px;
color: #2b2b2b;
line-height: 1.6;
font-weight: 500;
max-width: 650px;
text-align: left;
}
/* --- Two Column Media Grid --- */
.giving-content-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 50px;
align-items: center;
}
/* --- Venmo Card Module --- */
.venmo-wrapper {
display: flex;
justify-content: center;
}
.venmo-card {
background-color: #ffffff;
padding: 40px 30px;
text-align: center;
width: 100%;
max-width: 320px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.venmo-name {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
color: #2b2b2b;
margin-bottom: 5px;
}
.venmo-handle {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
color: #555555;
margin-bottom: 25px;
}
.venmo-qr-box {
width: 100%;
margin-bottom: 20px;
display: flex;
justify-content: center;
}
.venmo-qr-box img {
width: 80%;
height: auto;
display: block;
}
.venmo-logo-text {
font-family: 'Helvetica Neue', 'Montserrat', Arial, sans-serif;
font-size: 32px;
color: #000000;
letter-spacing: -1.5px;
text-transform: lowercase;
}
/* --- Image Module --- */
.giving-image-wrapper {
width: 100%;
overflow: hidden;
}
.giving-image-wrapper img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* --- Responsive Breakpoints --- */
@media (max-width: 992px) {
.giving-content-row {
grid-template-columns: 1fr;
gap: 50px;
}
.giving-text-row {
justify-content: flex-start;
}
.giving-desc {
max-width: 100%;
}
}
@media (max-width: 576px) {
.giving-main-title {
font-size: 42px;
}
.giving-desc {
font-size: 13px;
}
.venmo-card {
padding: 30px 20px;
}
}
/* ==========================================================================
DROPDOWN MENU (Matches the provided screenshot)
========================================================================== */
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: #ffffff;
min-width: 170px;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: var(--transition-smooth);
list-style: none;
padding: 12px 0;
z-index: 200;
border-radius: 4px;
}
/* Show dropdown on hover */
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu li a {
padding: 10px 22px;
display: block;
color: #0c75bc; /* Blue styling matching screenshot */
font-weight: 500;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dropdown-menu li a:hover {
background-color: #f7f9fc;
color: #095991;
transform: none; /* overrides parent nav link hover */
}
/* ==========================================================================
INTERACTIVE NAV SEARCH BAR
========================================================================== */
.nav-search-container {
display: flex;
align-items: center;
position: relative;
}
.nav-search-form {
position: absolute;
right: 35px;
opacity: 0;
visibility: hidden;
width: 0;
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
background: #ffffff;
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
overflow: hidden;
display: flex;
align-items: center;
z-index: 1001; /* above the mobile full-screen nav overlay (z-index: 999) */
max-width: calc(100vw - 30px); /* never overflow the viewport on very narrow phones */
}
.nav-search-form.active {
opacity: 1;
visibility: visible;
width: 220px;
border: 1px solid #e0e0e0;
}
.nav-search-form input {
border: none;
outline: none;
padding: 10px 16px;
width: 100%;
font-size: 13px;
color: #333;
font-family: 'Gotham', 'Montserrat', sans-serif;
}
/* ==========================================================================
MASTER RESPONSIVENESS (TVs, iMacs, MacBooks, iPads, iPhones, Notes)
========================================================================== */
/* 4K/6K TVs and iMac 32" (min-width: 2560px) */
@media (min-width: 2560px) {
.navbar { padding: 40px 10%; }
.main-logo { width: 400px; }
.hero { min-height: 1200px; }
.info-card { transform: scale(1.4); transform-origin: left top; }
.footer-container { max-width: 1800px; transform: scale(1.2); }
.countdown-widget { transform: scale(1.2); transform-origin: top right; }
}
/* iMac 24" & Large External Displays (min-width: 1920px) */
@media (min-width: 1920px) {
.navbar { padding: 30px 8%; }
.hero { min-height: 950px; }
.welcome-text-container { max-width: 1500px; }
.columns-inner-content { max-width: 1600px; }
}
/* MacBook Pro 14" / 16" / Neo (max-width: 1536px) - Covered by default styles */
/* MacBook Air 13" (max-width: 1280px) */
@media (max-width: 1280px) {
.nav-links { gap: 20px; }
.nav-links a { font-size: 12px; }
}
/* iPad Pro / iPad Air 6 (max-width: 1024px) */
@media (max-width: 1024px) {
.dropdown-menu {
position: static;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
display: none;
padding-left: 20px;
}
.dropdown-menu.show-mobile {
display: block; /* Toggle handled in JS */
}
}
/* iPad Mini (max-width: 768px) - Handled beautifully by existing 992px breakpoints */
/* iPhone 17 Pro Max (max-width: 430px) */
@media (max-width: 430px) {
.main-logo { width: 170px; }
.info-card h1.heavitas-title{ font-size: 40px; }
.nav-search-form.active { width: 180px; }
}
/* iPhone 12 Mini & iPhone SE (max-width: 375px) */
@media (max-width: 375px) {
.main-logo { width: 150px; }
.nav-controls { gap: 12px; }
.btn-giving { padding: 8px 12px; font-size: 10px; }
.info-card h1.heavitas-title{ font-size: 32px; }
}
/* Samsung Note 7 & Ultra-Small Handhelds (max-width: 360px) */
@media (max-width: 360px) {
.main-logo { width: 135px; }
.nav-links { padding: 20px 5%; }
.mobile-giving-item .btn-giving { font-size: 13px; padding: 14px; }
}
/* ==========================================================================
WORSHIP & MINISTRIES SCHEDULE SECTION (EXACT MATCH DESIGN)
========================================================================== */
.worship-schedule-section {
width: 100%;
display: flex;
flex-direction: column;
}
/* Hero Image Banner Setup */
.worship-schedule-banner {
width: 100%;
height: 80vh;
overflow: hidden;
}
.worship-schedule-banner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
/* Deep Charcoal/Olive Background */
.schedule-dark-bg {
background-color: #1a1a18;
width: 100%;
padding: 100px 0 120px 0;
color: #f1ebd9;
}
.schedule-container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 5%;
display: grid;
grid-template-columns: 4.5fr 7.5fr; /* Matches the visual proportion width of left vs right columns */
gap: 90px;
align-items: start;
}
/* --- LEFT COLUMN: SUNDAY WORSHIP --- */
.schedule-left-col {
display: flex;
flex-direction: column;
position: sticky;
top: 120px; /* Keeps the title in frame while scrolling through the long list on the right */
}
.schedule-main-title {
font-family: 'Helvetica Neue', 'Montserrat', sans-serif;
font-size: 58px;
font-weight: 900;
color: #f0ebd6;
line-height: 1.1;
margin-bottom: 30px;
letter-spacing: 0.5px;
}
.schedule-main-desc {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
color: #d6d1c0;
margin-bottom: 50px;
max-width: 320px;
}
.schedule-main-time {
display: flex;
flex-direction: column;
gap: 8px;
}
.schedule-main-time .time-label {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 400;
color: #d6d1c0;
}
.schedule-main-time .time-value {
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 400;
color: #d6d1c0;
letter-spacing: 0.5px;
}
/* --- RIGHT COLUMN: MINISTRIES LIST --- */
.schedule-right-col {
display: flex;
flex-direction: column;
}
.schedule-item {
display: grid;
/* Increase the first column width to accommodate the larger icon */
grid-template-columns: 80px 1fr;
gap: 25px;
padding: 35px 0;
border-top: 1px solid rgba(240, 235, 214, 0.25); /* The thin subtle divider lines */
}
/* Ensure a final border appears under the last item matching the design */
.schedule-item:last-child {
border-bottom: 1px solid rgba(240, 235, 214, 0.25);
}
.item-icon {
display: flex;
justify-content: center;
align-items: flex-start; /* Align icon to the top of the row */
padding-top: 2px;
}
/* Updated to target the ![]()
tags directly and make them larger */
.item-icon img {
width: 60px; /* Increased from the previous SVG size of 32px */
height: 60px; /* Increased from the previous SVG size of 32px */
object-fit: contain; /* Ensures the image doesn't distort if dimensions vary */
}
/* Keep the fallback for SVGs if you switch back */
.item-icon svg {
width: 60px;
height: 60px;
stroke: #26a5b8; /* Cyan/Teal icon color exact match */
}
.item-content {
display: flex;
flex-direction: column;
}
/* ...rest of the schedule item styles remain the same... */
.item-content h3 {
font-family: 'Helvetica Neue', 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 900;
color: #f0ebd6;
margin-bottom: 12px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.item-content p {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.6;
color: #d6d1c0;
margin-bottom: 16px;
max-width: 500px;
}
.item-time {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
color: #d6d1c0;
}
/* ==========================================================================
RESPONSIVE BREAKPOINTS FOR SMALLER SCREENS
========================================================================== */
@media (min-width: 1600px) {
.schedule-container { max-width: 1400px; gap: 120px; }
.schedule-main-title { font-size: 68px; }
.schedule-main-desc { font-size: 17px; max-width: 400px; }
.item-content h3 { font-size: 18px; }
.item-content p { font-size: 13px; max-width: 600px; }
.worship-schedule-banner {
height: 80vh;
}
}
@media (max-width: 992px) {
.schedule-container {
grid-template-columns: 1fr;
gap: 60px;
}
.schedule-left-col {
position: relative;
top: 0;
}
.schedule-main-title {
font-size: 46px;
}
.worship-schedule-banner {
height: 400px;
}
}
@media (max-width: 576px) {
.worship-schedule-banner {
height: 280px;
}
.schedule-dark-bg {
padding: 60px 0;
}
.schedule-main-title {
font-size: 38px;
}
.schedule-main-time .time-label {
font-size: 17px;
}
.schedule-main-time .time-value {
font-size: 18px;
}
.schedule-item {
grid-template-columns: 30px 1fr;
gap: 15px;
padding: 25px 0;
}
.item-icon img {
width: 24px;
height: 24px;
}
.item-content h3 {
font-size: 14px;
}
}
/* ==========================================================================
MOBILE MENU & IPHONE SE OPTIMIZATIONS
========================================================================== */
/* Lock background scrolling when the full-screen menu is open. Toggled on
both and — belt-and-braces for iOS Safari, which sometimes
ignores overflow:hidden on body alone. */
html.no-scroll,
body.no-scroll {
overflow: hidden;
height: 100%;
}
/* Hide mobile giving item on desktop (shown again inside the mobile menu
itself via the @media block below — never hidden outright on small
screens, since it needs to stay reachable there). */
.mobile-giving-item {
display: none;
}
@media (max-width: 992px) {
/* 1. Navbar stays pinned so the overlay below always lines up under it */
.navbar {
position: sticky;
top: 0;
z-index: 1000;
}
/* 2. Hide the standalone header Giving button; it now lives inside the menu */
.desktop-giving {
display: none !important;
}
.mobile-giving-item {
display: block;
width: 100%;
margin-top: 15px;
}
.mobile-giving-item .btn-giving {
display: flex;
width: 100%;
justify-content: center;
padding: 16px;
font-size: 15px;
}
/* 3. TRUE FULL-SCREEN OVERLAY — always laid out at this breakpoint, but
hidden via opacity/visibility/transform (not display) so it can
transition smoothly in BOTH directions: opening and closing. */
.nav-links {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: fixed;
top: 64px; /* Matches default mobile navbar height */
left: 0;
width: 100%;
height: calc(100dvh - 64px); /* Dynamic viewport height fills the screen perfectly */
background-color: var(--text-light);
padding: 40px 6%;
gap: 8px;
overflow-y: auto;
z-index: 999;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-16px);
transition: opacity 0.35s var(--kanak-cubic),
transform 0.35s var(--kanak-cubic),
visibility 0.35s;
}
.nav-links.mobile-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* Large, touch-friendly rows with a subtle divider between items */
.nav-links li {
width: 100%;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.nav-links li:last-child {
border-bottom: none;
}
.nav-links a {
font-size: 17px;
justify-content: center;
padding: 18px 0;
min-height: 26px; /* combined with padding, comfortably exceeds a 44px tap target */
width: 100%;
}
/* Dropdown accordion inside the full-screen menu */
.dropdown-menu li {
border-bottom: none;
}
.dropdown-menu li:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
}
/* --- IPHONE SE / SMALL PHONES (375px) STRICT BREAKPOINT --- */
@media (max-width: 375px) {
.navbar {
padding: 14px 15px;
}
/* Adjust top offset for the slightly smaller header on SE-class phones */
.nav-links {
top: 58px;
height: calc(100dvh - 58px);
padding: 25px 6%;
}
.main-logo {
width: 145px;
}
.nav-controls {
gap: 12px;
}
/* Stop the expanding search bar from breaking the flex layout on SE */
.nav-search-form.active {
width: 150px;
}
/* Hero layout optimization */
.info-card {
padding: 30px 20px;
}
.info-card h1.heavitas-title{
font-size: 34px;
margin-bottom: 15px;
}
.info-card .time {
font-size: 13px;
margin-bottom: 25px;
}
.card-buttons {
grid-template-columns: 1fr; /* Stack buttons vertically on tiny screens */
gap: 10px;
}
.btn-card {
padding: 14px 10px;
}
.countdown-widget {
padding: 12px 16px;
min-width: 100%;
}
.timer-display {
gap: 8px;
}
.timer-number {
font-size: 18px;
}
}
.fa-brands {
padding: 15px;
font-size: 25px;
width: 25px;
text-align: center;
text-decoration: none;
margin: 5px;
border-radius: 50%;
}
.fa-facebook { background: #3B5998; color: white; }
.fa-instagram { background: #E1306C; color: white; }
/* Add styles for other icons as needed */
@media (max-width: 992px) {
/* Full screen overlay */
.nav-links.mobile-open {
display: flex;
flex-direction: column;
position: fixed;
top: 64px;
left: 0;
width: 100%;
height: calc(100dvh - 64px);
background-color: var(--text-light);
padding: 40px 6%;
z-index: 999;
overflow-y: auto;
}
/* Distribute menu items with gap and push Giving to the bottom */
.nav-links.mobile-open {
justify-content: flex-start; /* Keeps main items top-aligned */
}
/* Pushes the last item (Giving) to the bottom */
.mobile-giving-item {
margin-top: auto !important;
margin-bottom: 40px !important;
width: 100%;
}
.nav-links.mobile-open a {
font-size: 20px;
font-weight: 500;
justify-content: center;
}
}
/* ==========================================================================
OUR CHURCH PAGE & COMMUNITY ENGAGEMENT SECTION
========================================================================== */
.church-community-section {
width: 100%;
background-color: #eae0cf; /* Matching beige canvas background */
padding: 60px 0 100px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.church-artistic-header {
width: 100%;
max-width: 1240px;
padding: 0 5%;
margin-bottom: 60px;
}
.alstoria-church-title {
font-family: "Alstoria Regular", serif;
font-weight: 400;
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 0.85;
}
.alstoria-church-title .word-our {
font-family: "Alstoria Regular", serif;
font-size: 140px;
letter-spacing: -2px;
/* Soft gold gradient for "Our" */
background: linear-gradient(to right, #d1b438, #bba030);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-left: 10%;
}
.alstoria-church-title .word-church-text {
font-family: "Alstoria Regular", serif;
font-size: 140px;
letter-spacing: -2px;
/* Gradient transition from gold to cyan/teal for "Church" */
background: linear-gradient(to right, #d1b438 10%, #30c0cc 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: -15px;
margin-left: 18%; /* Indented to match mockup */
}
.community-grid-container {
width: 100%;
max-width: 1240px;
padding: 0 5%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.community-text-col {
display: flex;
flex-direction: column;
padding-top: 10px;
}
.community-title {
font-family: 'Helvetica Neue', 'Montserrat', sans-serif;
font-size: 38px;
font-weight: 900;
color: #2b2b2b; /* Dark charcoal */
line-height: 1.1;
margin-bottom: 25px;
letter-spacing: 0.5px;
}
.community-desc {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;
color: #2b2b2b;
line-height: 1.6;
max-width: 480px;
letter-spacing: -0.1px;
}
.community-image-col {
width: 100%;
}
.community-image-col img {
width: 100%;
height: auto;
display: block;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
/* ==========================================================================
FAITHFUL WORSHIP SECTION
========================================================================== */
.faithful-worship-section {
width: 100%;
background-color: #1a1a18; /* Dark Olive/Charcoal matching the schedule bg */
padding: 70px 0 90px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.faithful-title {
font-family: 'Helvetica Neue', 'Montserrat', sans-serif;
font-size: 32px;
font-weight: 900;
color: #e6d3af; /* Warm cream/tan */
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 30px;
text-align: center;
}
.faithful-banner {
width: 100%;
max-height: 600px;
overflow: hidden;
margin-bottom: 50px;
}
.faithful-banner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.faithful-text-container {
width: 100%;
max-width: 1200px;
padding: 0 5%;
text-align: center;
}
.faithful-desc {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 600;
color: #e6d3af; /* Warm cream/tan matching the heading */
line-height: 1.6;
text-transform: uppercase; /* Enforces the all-caps look from mockup */
letter-spacing: 0.3px;
}
/* ==========================================================================
WHAT WE BELIEVE SECTION
========================================================================== */
.what-we-believe-section {
width: 100%;
background-color: #eae0cf; /* Matching the soft beige background from the design */
padding: 100px 0 120px 0;
display: flex;
justify-content: center;
align-items: center;
}
.believe-container {
width: 100%;
max-width: 1240px;
padding: 0 5%;
display: flex;
flex-direction: column;
align-items: center;
}
.believe-title {
font-family: 'Helvetica Neue', 'Montserrat', sans-serif;
font-size: 38px;
font-weight: 900;
color: #2b2b2b;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 70px;
text-align: center;
}
.believe-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Creates the 3 uniform columns */
gap: 60px;
width: 100%;
}
.believe-column {
display: flex;
flex-direction: column;
gap: 35px; /* Vertical spacing between the text blocks in the same column */
}
.believe-text {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;
color: #2b2b2b;
line-height: 1.6;
letter-spacing: -0.1px;
}
/* ==========================================================================
OUR MISSION SCROLL-SCRUB SECTION (UPDATED FOR FULL WIDTH & BIG FONTS)
========================================================================== */
.our-mission-section {
width: 100%;
background-color: #1a1a18;
position: relative;
/* Height is injected dynamically by JavaScript based on item count */
transition: opacity 0.25s ease;
/* --------------------------------------------------------------
Dynamic spacing controls.
These defaults are the spacious, "plenty of viewport height"
values. On short viewports, script.js proportionally shrinks
these (down to a readability-preserving floor) instead of
disabling the sticky animation outright — so laptops/tablets
with limited height still get the full storytelling effect,
just with tighter spacing.
-------------------------------------------------------------- */
--mission-container-margin-top: 5vh;
--mission-heading-margin-bottom: 25px;
--mission-intro-margin-bottom: 45px;
--mission-item-padding-top: 40px;
--mission-header-margin-bottom: 20px;
--mission-offset: 120px; /* vertical gap between stacked cards, read by script.js */
}
/* --------------------------------------------------------------------
SCRUB-DISABLED FALLBACK
Applied by script.js (missionScrollEngine) whenever the available
viewport height is too short to display an upcoming mission item
in full while pinned. Mirrors the <=992px fallback below, but is
driven by an actual height measurement instead of a width breakpoint,
so short/landscape viewports on wide screens get the same safe,
fully-visible, normally-scrolling layout instead of being clipped
or trapped inside the sticky section.
-------------------------------------------------------------------- */
.our-mission-section.scrub-disabled {
height: auto !important;
padding: 80px 0;
}
.our-mission-section.scrub-disabled .mission-sticky-wrapper {
position: relative;
height: auto;
overflow: visible;
display: block;
}
.our-mission-section.scrub-disabled .mission-container {
height: auto;
margin-top: 0;
}
.our-mission-section.scrub-disabled .mission-list {
display: flex;
flex-direction: column;
position: static;
}
.our-mission-section.scrub-disabled .mission-item {
position: relative;
height: auto;
transform: none !important;
padding-bottom: 35px;
padding-top: 35px;
}
.our-mission-section.scrub-disabled .mission-item-desc {
padding-left: 0;
margin-top: 15px;
}
.our-mission-section.scrub-disabled .mission-intro {
text-align: left;
}
.mission-sticky-wrapper {
position: sticky;
top: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden; /* Clips cards that are off-screen at the bottom */
}
.mission-container {
width: 100%;
max-width: 1400px; /* Increased dramatically from 950px for a full-width look */
padding-top: 50PX;
padding: 0 5%;
display: flex;
flex-direction: column;
height: 90vh;
margin-top: var(--mission-container-margin-top);
}
.mission-heading {
font-family: 'Helvetica Neue', 'Montserrat', sans-serif;
font-size: 38px; /* Slightly larger heading */
font-weight: 900;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--mission-heading-margin-bottom);
text-align: center;
}
.mission-intro {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 600;
color: #ffffff;
line-height: 1.6;
text-align: center;
margin-bottom: var(--mission-intro-margin-bottom);
letter-spacing: 0.2px;
}
/* Stacking Architecture */
.mission-list {
position: relative;
width: 100%;
flex-grow: 1;
}
.mission-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150vh;
background-color: #1a1a18;
padding: var(--mission-item-padding-top) 0 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.25);
will-change: transform;
transform: translateY(100vh);
}
.mission-item:first-child {
transform: translateY(0);
}
.mission-item-header {
display: flex;
align-items: center;
gap: 20px; /* Increased gap */
margin-bottom: var(--mission-header-margin-bottom);
}
.mission-bullet {
color: #e6d3af;
font-size: 28px; /* Much larger bullet */
line-height: 1;
}
.mission-item-title {
font-family: 'Helvetica Neue', 'Montserrat', sans-serif;
font-size: 38px; /* Increased significantly from 26px */
font-weight: 900;
color: #e6d3af;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mission-item-desc {
font-family: 'Montserrat', sans-serif;
font-size: 18px; /* Increased from 14px */
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
padding-left: 48px; /* Adjusted to align perfectly under the new bigger title */
max-width: 1100px; /* Allows text to stretch much further across the screen */
}
/* ==========================================================================
WELCOME BANNER SECTION (OUR CHURCH PAGE)
========================================================================== */
.welcome-banner-section {
width: 100%;
background-color: #1a1a18;
padding: 0 0 20px 0; /* Top padding removed */
display: flex;
justify-content: center;
position: relative;
z-index: 20; /* Ensures it layers above the empty mission background */
}
/* Pull the banner up to cover the empty space left by the mission items moving up */
@media (min-width: 993px) {
.welcome-banner-section {
margin-top: -25vh;
}
}
.welcome-banner-container {
width: 100%;
max-width: 1240px;
padding: 0 5%;
display: grid;
grid-template-columns: 2fr 1.2fr;
gap: 40px;
align-items: center;
}
/* Groups the beige box and the image together flush */
.welcome-banner-visuals {
display: flex;
align-items: stretch;
width: 100%;
}
.welcome-banner-cta {
background-color: #eae0cf;
padding: 45px 35px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.welcome-banner-title {
font-family: 'Helvetica Neue', 'Montserrat', sans-serif;
font-size: 32px;
font-weight: 900;
color: #2b2b2b;
line-height: 1.1;
margin-bottom: 30px;
letter-spacing: -0.5px;
}
.btn-welcome-connect {
display: inline-block;
width: 100%;
background-color: #d1b438;
color: #2b2b2b;
text-align: center;
padding: 18px 10px;
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
text-decoration: none;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: background-color 0.3s ease;
}
.btn-welcome-connect:hover {
background-color: #bba030;
}
.welcome-banner-img {
flex: 1.3;
}
.welcome-banner-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.welcome-banner-text {
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 17px;
font-weight: 400;
color: #ffffff;
line-height: 1.6;
}
/* ==========================================================================
BREAKPOINTS (OUR CHURCH PAGE COMPONENTS)
========================================================================== */
/* --- Extra Large Screens --- */
@media (min-width: 1600px) {
/* Header/Faithful Worship */
.alstoria-church-title .word-our { font-size: 180px; }
.alstoria-church-title .word-church-text { font-size: 180px; margin-top: -20px; }
.community-title { font-size: 46px; margin-bottom: 35px; }
.community-desc { font-size: 17px; max-width: 550px; }
.faithful-title { font-size: 40px; margin-bottom: 40px; }
.faithful-desc { font-size: 19px; }
.faithful-banner { max-height: 750px; }
/* What We Believe */
.believe-container { max-width: 1400px; }
.believe-title { font-size: 46px; margin-bottom: 80px; }
.believe-grid { gap: 80px; }
.believe-text { font-size: 17px; }
/* Mission */
.our-mission-section {
--mission-heading-margin-bottom: 35px;
--mission-intro-margin-bottom: 60px;
}
.mission-container { max-width: 1600px;
padding-top: 50PX;}
.mission-heading { font-size: 46px; }
.mission-intro { font-size: 20px; max-width: 1200px; margin-left: auto; margin-right: auto;}
.mission-item-title { font-size: 48px; }
.mission-bullet { font-size: 34px; }
.mission-item-desc { font-size: 22px; padding-left: 54px; max-width: 1300px; }
/* Welcome Banner */
.welcome-banner-container { max-width: 1600px; }
.welcome-banner-title { font-size: 40px; }
.btn-welcome-connect { font-size: 13px; padding: 22px 10px; }
.welcome-banner-text { font-size: 20px; }
}
@media (min-width: 993px) {
.welcome-banner-section {
margin-top: -18vh; /* Adjust this to get the exact "little gap" you want */
}
}
@media (max-width: 992px) {
/* Header/Faithful Worship */
.community-grid-container {
grid-template-columns: 1fr;
gap: 40px;
}
.alstoria-church-title .word-our { margin-left: 0; }
.alstoria-church-title .word-church-text { margin-left: 10%; }
.community-text-col { padding-top: 0; }
.community-desc { max-width: 100%; }
/* What We Believe */
.believe-grid {
grid-template-columns: repeat(2, 1fr);
gap: 50px;
}
/* Welcome Banner */
.welcome-banner-section {
margin-top: 0; /* Resets the negative pull-up on mobile */
}
.welcome-banner-container {
grid-template-columns: 1fr;
gap: 30px;
}
.welcome-banner-text {
text-align: center;
padding: 0 20px;
}
}
@media (max-width: 576px) {
/* Header/Faithful Worship */
.alstoria-church-title .word-our { font-size: 90px; }
.alstoria-church-title .word-church-text { font-size: 90px; margin-top: -10px; }
.community-title { font-size: 30px; }
.community-desc { font-size: 14px; }
.faithful-title { font-size: 24px; margin-bottom: 25px; }
.faithful-desc { font-size: 13px; line-height: 1.5; }
.faithful-banner { max-height: 350px; }
/* What We Believe */
.what-we-believe-section { padding: 70px 0 80px 0; }
.believe-title { font-size: 28px; margin-bottom: 45px; }
.believe-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.believe-column { gap: 25px; }
.believe-text { font-size: 14px; }
/* Mission */
.our-mission-section { padding: 60px 0; }
.mission-heading { font-size: 28px; margin-bottom: 25px; }
.mission-intro { font-size: 14px; margin-bottom: 40px; }
.mission-item-header { gap: 10px; margin-bottom: 0; align-items: flex-start; }
.mission-bullet { font-size: 20px; margin-top: 3px; }
.mission-item-title { font-size: 24px; line-height: 1.2; }
.mission-item-desc { font-size: 15px;}
/* Welcome Banner */
.welcome-banner-section { padding: 10px 0; }
.welcome-banner-visuals {
flex-direction: column;
}
.welcome-banner-cta { padding: 35px 25px; }
.welcome-banner-title { font-size: 28px; }
.welcome-banner-img img {
height: 250px;
}
.welcome-banner-text { font-size: 15px; padding: 0; }
.our-mission-section.scrub-disabled {
height: auto !important;
padding: 50px 0 10px 0;
}
}
@media (max-width: 375px) {
/* Header/Faithful Worship */
.alstoria-church-title .word-our { font-size: 70px; }
.alstoria-church-title .word-church-text { font-size: 70px; margin-top: -5px; }
.community-title { font-size: 26px; }
}
.volunteer-body { background-color: #f4f4f4; }
.volunteer-hero-section {
padding: 80px 5%;
display: flex;
flex-direction: column;
align-items: center;
}
.volunteer-main-title {
font-family: "Alstoria Regular", serif;
font-size: 80px;
color: #0c75bc;
margin-bottom: 40px;
}
.volunteer-hero-img {
width: 100%;
max-width: 900px;
height: 400px;
border-radius: 20px;
overflow: hidden;
}
.volunteer-hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.volunteer-container {
max-width: 1100px;
margin: 0 auto;
padding: 50px 5% 100px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
}
.section-title {
font-family: 'Helvetica Neue', sans-serif;
font-size: 32px;
margin-bottom: 20px;
}
.volunteer-desc {
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
margin-bottom: 30px;
color: #333;
}
.btn-get-connected {
background: #0c75bc;
color: white;
padding: 12px 25px;
text-decoration: none;
font-weight: 700;
}
/* Form Styling */
.form-group { margin-bottom: 20px; }
.name-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
input, select {
width: 100%;
padding: 12px;
border: 1px solid #aaa;
background: white;
color: #222;
font-size: 16px;
color-scheme: light;
font-family: 'Montserrat', sans-serif;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 15px center;
padding-right: 40px;
}
select:invalid {
color: #666;
}
select option {
background: #fff;
color: #222;
font-size: 17px;
padding: 10px;
}
.btn-send-message {
background: #0c75bc;
color: white;
border: none;
padding: 15px 30px;
cursor: pointer;
font-weight: 700;
}
@media (max-width: 768px) {
.volunteer-container { grid-template-columns: 1fr; }
.volunteer-hero-img { height: 240px; }
}
/* ================= MINISTRIES DROPDOWN ================= */
.ministries-dropdown {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.ministries-toggle {
background: none;
border: none;
padding: 5px 10px;
margin-left: 5px;
cursor: pointer;
color: inherit;
display: flex;
align-items: center;
transition: transform 250ms ease;
}
.ministries-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.ministries-toggle svg {
transition: transform 250ms ease;
}
.ministries-menu {
list-style: none;
margin: 10px 0 0;
padding: 14px 0;
position: absolute;
top: 100%;
left: 0;
min-width: 240px;
max-width: 300px;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity 250ms ease-out, transform 250ms ease-out, visibility 250ms ease-out;
z-index: 999;
}
.ministries-menu.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ministries-menu li {
margin: 0;
}
.ministries-menu a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 22px;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;
color: #222;
text-decoration: none;
white-space: nowrap;
transition: background-color 250ms ease, color 250ms ease, padding-left 250ms ease;
}
.ministries-menu a:hover,
.ministries-menu a:focus-visible {
background-color: #f2f6fb;
color: #0c75bc;
padding-left: 30px;
outline: none;
}
.ministries-chev {
color: #aaa;
font-size: 18px;
line-height: 1;
transition: color 250ms ease;
}
.ministries-menu a:hover .ministries-chev,
.ministries-menu a:focus-visible .ministries-chev {
color: #0c75bc;
}
@media (max-width: 992px) {
.ministries-dropdown {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.ministries-menu {
position: static;
width: 100%;
max-width: none;
min-width: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
opacity: 1;
visibility: visible;
transform: none;
max-height: 0;
overflow: hidden;
padding: 0;
margin: 0;
transition: max-height 300ms ease;
}
.ministries-menu.open {
max-height: 500px;
padding: 6px 0 10px;
}
.ministries-menu a {
padding: 14px 10px 14px 34px;
font-size: 16px;
white-space: normal;
}
.ministries-menu a:hover,
.ministries-menu a:focus-visible {
padding-left: 40px;
}
}
/* ================= CUSTOM MINISTRY SELECT (icon list) ================= */
.ministry-select {
position: relative;
width: 100%;
}
.ministry-select-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #fff;
border: 1px solid #aaa;
border-radius: 2px;
padding: 14px 18px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
color: #222;
cursor: pointer;
text-align: left;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.ministry-select-toggle.placeholder span {
color: #666;
}
.ministry-select-toggle:hover,
.ministry-select-toggle:focus-visible {
border-color: #0c75bc;
outline: none;
}
.ministry-select-toggle.invalid {
border-color: #d9534f;
}
.ministry-chevron {
flex-shrink: 0;
color: #666;
transition: transform 250ms ease;
}
.ministry-select-toggle[aria-expanded="true"] .ministry-chevron {
transform: rotate(180deg);
}
.ministry-panel {
list-style: none;
margin: 10px 0 0;
padding: 10px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 320px;
overflow-y: auto;
background: #fff;
border-radius: 2px;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 220ms ease-out, transform 220ms ease-out, visibility 220ms ease-out;
z-index: 999;
}
.ministry-panel.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ministry-panel li {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border-radius: 2px;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #222;
cursor: pointer;
transition: background-color 200ms ease;
}
.ministry-panel li:hover,
.ministry-panel li:focus,
.ministry-panel li.active,
.ministry-panel li[aria-selected="true"] {
background-color: #f0f2f5;
outline: none;
}
.ministry-icon {
width: 20px;
text-align: center;
font-size: 17px;
color: #0c75bc;
flex-shrink: 0;
}
/* Visually hidden but still a real, focusable form field for the underlying value */
.ministry-native-select {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 768px) {
.ministry-panel { max-height: 260px; }
.ministry-panel li { padding: 14px; font-size: 16px; }
}
/* Sermon Section Styling */
.sermon-section {
padding: 80px 5%;
background-color: #f9f9f9;
text-align: center;
}
.sermon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.sermon-card {
aspect-ratio: 16 / 9;
background: #000;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.sermon-card iframe {
width: 100%;
height: 100%;
}
/* Ensure the Section Title matches your design system */
.section-title {
font-family: 'Helvetica Neue', sans-serif;
font-size: 36px;
color: #333;
letter-spacing: 1px;
}
/* Mobile responsiveness for the video grid */
@media (max-width: 768px) {
.sermon-grid {
grid-template-columns: 1fr;
}
}
.media-room-section {
overflow-x: hidden;
}
/* Moments Header Alignment (scoped to .media-room-section so this always
wins over the generic .exact-staircase-grid rules used elsewhere on the
site, regardless of stylesheet order) */
.media-room-section .moments-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 80px 5% 50px;
max-width: 1200px;
margin: 0 auto;
gap: 30px;
}
.media-room-section .moments-statement {
max-width: 300px;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
color: #2b2b2b;
}
/* Gradient Text Effect */
.word-moments, .word-of-worship, .word-community {
background: linear-gradient(to right, #f0c723, #0c75bc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: "Alstoria Regular", serif;
}
/* 3x2 Grid Setup */
.media-room-section .exact-staircase-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
max-width: 1200px;
margin: 0 auto 30px;
padding: 0 1%;
}
.media-room-section .exact-grid-item {
overflow: hidden;
cursor: pointer;
}
.media-room-section .exact-grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
display: block;
transition: transform 0.5s var(--kanak-cubic);
}
.media-room-section .exact-grid-item:hover img {
transform: scale(1.05);
}
/* ==========================================================================
SERMON VIDEO CAROUSEL — thumbnail + tap-to-play facade
========================================================================== */
.sermon-title {
text-align: center;
font-family: 'Helvetica Neue', sans-serif;
font-size: 32px;
margin: 60px 0 8px;
}
.sermon-subtitle {
text-align: center;
font-size: 13px;
color: #777;
letter-spacing: 0.3px;
margin-bottom: 36px;
}
.sermon-carousel {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 4px 5% 20px;
max-width: 1200px;
margin: 0 auto;
}
.sermon-carousel::-webkit-scrollbar {
display: none;
}
.sermon-card {
scroll-snap-align: start;
flex: 0 0 320px;
display: flex;
flex-direction: column;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
transition: transform 0.3s var(--kanak-cubic), box-shadow 0.3s ease;
}
.sermon-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}
.sermon-thumb {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background-color: #111;
cursor: pointer;
}
.sermon-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sermon-thumb iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.sermon-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.55);
border: 2px solid rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-smooth);
}
.sermon-thumb:hover .sermon-play-btn {
background-color: var(--primary-gold);
border-color: var(--primary-gold);
transform: translate(-50%, -50%) scale(1.08);
}
.sermon-play-btn svg {
width: 18px;
height: 18px;
fill: #fff;
margin-left: 3px;
}
.sermon-card-info {
padding: 14px 16px 16px;
}
.sermon-card-title {
font-size: 14px;
font-weight: 700;
color: #222;
line-height: 1.3;
font-family: 'Montserrat', sans-serif;
}
.sermon-card-meta {
font-size: 11px;
color: #888;
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* "View all sermons" CTA card at the end of the row */
.sermon-card.sermon-cta {
background: linear-gradient(135deg, #0c75bc, #094e7d);
text-decoration: none;
}
.sermon-cta-body {
aspect-ratio: 16 / 9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: #fff;
text-align: center;
padding: 20px;
}
.sermon-cta-body svg {
width: 32px;
height: 32px;
fill: #fff;
}
.sermon-cta-body span {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Prev / Next controls */
.carousel-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
margin-top: 4px;
padding-bottom: 15px;
}
.carousel-nav button {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1.5px solid #ddd;
background-color: #fff;
color: #333;
font-size: 15px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-smooth);
}
.carousel-nav button:hover:not(:disabled) {
background-color: var(--primary-gold);
border-color: var(--primary-gold);
color: #fff;
}
.carousel-nav button:disabled {
opacity: 0.35;
cursor: default;
}
/* ==========================================================================
MEDIA ROOM — RESPONSIVE BREAKPOINTS
========================================================================== */
@media (max-width: 992px) {
.media-room-section .moments-header {
flex-direction: column;
align-items: center;
text-align: center;
padding: 50px 6% 30px;
gap: 18px;
}
.media-room-section .moments-statement {
max-width: 460px;
text-align: center;
}
.media-room-section .exact-staircase-grid {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.sermon-card {
flex: 0 0 78vw;
}
}
@media (max-width: 576px) {
.media-room-section .moments-header {
padding: 36px 6% 20px;
}
.media-room-section .exact-staircase-grid {
grid-template-columns: repeat(2, 1fr);
gap: 4px;
padding: 0 3%;
}
.sermon-title {
font-size: 24px;
margin: 40px 0 6px;
}
.sermon-subtitle {
font-size: 12px;
margin-bottom: 22px;
}
.sermon-carousel {
padding: 4px 4% 16px;
}
.sermon-card {
flex: 0 0 85vw;
}
.sermon-play-btn {
width: 48px;
height: 48px;
}
.carousel-nav button {
width: 38px;
height: 38px;
}
}
/* Button styling */
.btn-view-gallery {
display: inline-block;
margin-top: 30px;
padding: 15px 35px;
background-color: #0c75bc;
color: #ffffff;
font-family: 'Gotham', 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
text-decoration: none;
letter-spacing: 1px;
transition: var(--transition-smooth);
border-radius: 1px;
}
.btn-view-gallery:hover {
background-color: #095991;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* Ensure alignment on Desktop */
.exact-gallery-left-col {
display: flex;
flex-direction: column;
align-items: center; /* This centers the heading and the button horizontally */
text-align: center; /* This ensures the text inside the heading block is centered */
}
/* Responsive adjustment for Mobile/Tablet */
@media (max-width: 1024px) {
.exact-gallery-left-col {
align-items: center; /* Centers the button on smaller screens */
}
}
/* ==========================================================================
RESPONSIVE IMAGE POPUP MODAL (LIGHTBOX)
========================================================================== */
.popup-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85); /* Dark background as intended by the JS */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* Ensures it sits above the nav and mobile menus */
/* Hidden state matching the JS .show toggle */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Active state triggered by JavaScript */
.popup-modal.show {
opacity: 1;
visibility: visible;
}
.popup-content {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
/* Subtle zoom-in effect when opening */
transform: scale(0.95);
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.popup-modal.show .popup-content {
transform: scale(1);
}
.popup-close {
position: absolute;
top: 25px;
right: 35px;
color: #ffffff;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 44px;
font-weight: 300;
line-height: 1;
cursor: pointer;
user-select: none;
transition: var(--transition-smooth);
z-index: 10000;
}
.popup-close:hover {
color: var(--primary-gold); /* Ties into your root variables */
transform: scale(1.1);
}
/* Adjustments for mobile screens */
@media (max-width: 576px) {
.popup-close {
top: 15px;
right: 20px;
font-size: 36px;
}
.popup-content {
max-width: 95vw;
border-radius: 4px;
}
}
/* ==========================================================================
EVENT CALENDAR VIEWS (LIST, MONTH, DAY)
========================================================================== */
/* Top Toolbar */
.events-toolbar-container {
background: #fff;
border: 1px solid #eee;
border-radius: 4px;
padding: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
margin-bottom: 20px;
}
.events-toolbar-top {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 15px;
}
.events-search-bar {
display: flex;
align-items: center;
flex: 1;
min-width: 250px;
}
.search-input-wrapper {
position: relative;
flex: 1;
}
.search-input-wrapper input {
width: 100%;
padding: 10px 10px 10px 35px;
border: none;
outline: none;
font-size: 14px;
color: #333;
}
.search-input-wrapper svg {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #888;
}
.btn-find-events {
background-color: #3b5998; /* Blue button from mockup */
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
margin-left: 10px;
transition: background-color 0.2s;
}
.btn-find-events:hover {
background-color: #2d4373;
}
.events-view-toggle {
display: flex;
gap: 20px;
}
.events-view-toggle a {
text-decoration: none;
color: #555;
font-weight: 500;
font-size: 14px;
padding-bottom: 5px;
border-bottom: 2px solid transparent;
}
.events-view-toggle a:hover,
.events-view-toggle a.active {
color: #333;
border-bottom-color: #333; /* Dark underline for active */
}
/* Secondary Toolbar */
.events-toolbar-bottom {
display: flex;
align-items: center;
gap: 15px;
}
.events-nav-arrows {
display: flex;
align-items: center;
gap: 10px;
}
.nav-arrow {
color: #333;
text-decoration: none;
font-size: 16px;
padding: 5px;
}
.events-today-btn {
border: 1px solid #ccc;
padding: 5px 10px;
border-radius: 4px;
text-decoration: none;
color: #555;
font-size: 12px;
}
.events-current-title {
font-size: 20px;
font-weight: 500;
color: #333;
margin-left: 10px;
}
.dropdown-icon {
font-size: 14px;
color: #888;
margin-left: 5px;
}
/* List View Styles */
.events-content-container {
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
}
.month-separator {
font-size: 18px;
font-weight: bold;
color: #333;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 20px;
margin-top: 30px;
}
.time-separator {
font-size: 16px;
color: #555;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 20px;
margin-top: 20px;
}
.event-card-row {
display: flex;
background: #fff;
margin-bottom: 20px;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
padding: 20px;
align-items: flex-start;
}
.event-date-box {
display: flex;
flex-direction: column;
align-items: center;
min-width: 70px;
padding-right: 20px;
border-right: 1px solid #eee;
margin-right: 20px;
}
.date-month-day {
font-size: 12px;
font-weight: bold;
color: #888;
text-transform: uppercase;
}
.date-number {
font-size: 24px;
font-weight: bold;
color: #333;
}
.event-card-inner {
display: flex;
flex: 1;
justify-content: space-between;
}
.event-info-col {
flex: 1;
padding-right: 20px;
}
.event-time-top {
font-size: 13px;
color: #666;
margin-bottom: 5px;
}
.event-title {
font-size: 20px;
color: #333;
margin-bottom: 10px;
}
.event-venue-block {
font-size: 14px;
color: #444;
margin-bottom: 10px;
}
.event-desc {
font-size: 14px;
color: #666;
line-height: 1.5;
}
.event-flyer-col {
width: 250px;
flex-shrink: 0;
}
.event-flyer-col img {
width: 100%;
height: auto;
border-radius: 4px;
}
/* Month View Calendar */
.calendar-grid-wrapper {
background: #fff;
border: 1px solid #eee;
}
.calendar-header-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: #f9f9f9;
text-align: center;
padding: 15px 0;
font-weight: bold;
color: #666;
border-bottom: 1px solid #eee;
}
.calendar-days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.calendar-cell {
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 10px;
min-height: 100px;
position: relative;
}
.calendar-cell:nth-child(7n) {
border-right: none;
}
.calendar-cell.empty {
background: #fafafa;
}
.calendar-cell .day-number {
font-size: 18px;
font-weight: bold;
color: #555;
margin-bottom: 10px;
display: block;
}
.calendar-cell.today .day-number {
color: #3b5998;
}
.calendar-event-dot {
display: flex;
align-items: center;
text-decoration: none;
color: #333;
font-size: 11px;
background: #f0f4ff;
padding: 2px 4px;
border-radius: 3px;
margin-bottom: 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.calendar-event-dot:hover {
background: #dbe4ff;
}
.event-dot {
width: 6px;
height: 6px;
background: #3b5998;
border-radius: 50%;
margin-right: 5px;
flex-shrink: 0;
}
.event-time {
font-weight: bold;
margin-right: 4px;
}
.no-results-msg {
background: #f1f3f5;
padding: 20px;
border-radius: 4px;
text-align: center;
color: #555;
font-size: 14px;
}
.no-results-msg a {
color: #3b5998;
text-decoration: underline;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.events-toolbar-top {
flex-direction: column;
align-items: stretch;
}
.events-view-toggle {
justify-content: center;
margin-top: 15px;
}
.event-card-row {
flex-direction: column;
}
.event-card-inner {
flex-direction: column;
}
.event-date-box {
border-right: none;
border-bottom: 1px solid #eee;
padding-right: 0;
padding-bottom: 15px;
margin-right: 0;
margin-bottom: 15px;
width: 100%;
flex-direction: row;
gap: 15px;
}
.event-flyer-col {
width: 100%;
margin-top: 20px;
}
}