. We give the hero a full-bleed feel by using pseudos that escape the container. */ /* ---------- Hero (.branches-hero) ---------- */ body.theme-modern.page-mission main.container-adepr { padding-top: 0; } body.theme-modern.page-mission .branches-hero { position: relative; overflow: hidden; isolation: isolate; margin: 0 0 clamp(48px, 6vw, 80px); padding: clamp(72px, 12vh, 128px) clamp(20px, 4vw, 56px); min-height: clamp(440px, 65vh, 720px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; border-radius: var(--radius-xl); background: radial-gradient(800px 500px at 80% 20%, rgba(252, 212, 0, 0.14) 0%, transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(10, 76, 199, 0.18) 0%, transparent 60%), linear-gradient(135deg, #f5f7fb 0%, #ffffff 100%); border: 1px solid rgba(15, 23, 42, 0.05); box-shadow: var(--shadow-md); } body.theme-modern.page-mission .branches-hero__bg { display: none; } /* Drifting glow + grain overlay */ body.theme-modern.page-mission .branches-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 70% 30%, rgba(252, 212, 0, 0.18) 0%, transparent 60%), radial-gradient(520px 320px at 20% 80%, rgba(0, 50, 125, 0.16) 0%, transparent 60%); z-index: 0; pointer-events: none; animation: hero-drift 22s ease-in-out infinite alternate; } body.theme-modern.page-mission .branches-hero::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 80%); z-index: 0; pointer-events: none; opacity: 0.6; } /* Make hero content sit above pseudos */ body.theme-modern.page-mission .branches-hero > *:not(.branches-hero__bg) { position: relative; z-index: 1; } /* Eyebrow → gold pill */ body.theme-modern.page-mission .branches-hero .text-label-caps { display: inline-block; padding: 6px 14px; font-size: 11px; letter-spacing: 0.18em; background: rgba(252, 212, 0, 0.18); color: var(--color-secondary); border-radius: var(--radius-full); margin-bottom: 22px !important; } body.theme-modern.page-mission .branches-hero__title { font-style: italic; font-weight: 500; font-size: clamp(46px, 7vw, 92px); letter-spacing: -0.035em; line-height: 0.98; margin-bottom: 22px !important; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; max-width: 14ch; } body.theme-modern.page-mission .branches-hero__lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; max-width: 56ch; margin: 0; color: var(--color-on-surface-variant); } /* Stagger reveal */ body.theme-modern.page-mission .branches-hero > *:not(.branches-hero__bg) { opacity: 0; transform: translateY(14px); animation: hero-rise 900ms var(--ease) forwards; } body.theme-modern.page-mission .branches-hero > *:nth-child(2) { animation-delay: 120ms; } body.theme-modern.page-mission .branches-hero > *:nth-child(3) { animation-delay: 260ms; } body.theme-modern.page-mission .branches-hero > *:nth-child(4) { animation-delay: 400ms; } @media (prefers-reduced-motion: reduce) { body.theme-modern.page-mission .branches-hero > *:not(.branches-hero__bg) { opacity: 1; transform: none; animation: none; } body.theme-modern.page-mission .branches-hero::before { animation: none; } } /* ---------- Section watermarks (01 / 02) ---------- */ body.theme-modern.page-mission main > section:nth-of-type(2), body.theme-modern.page-mission main > section:nth-of-type(3) { position: relative; overflow: hidden; } body.theme-modern.page-mission main > section:nth-of-type(2)::before, body.theme-modern.page-mission main > section:nth-of-type(3)::before { position: absolute; top: clamp(-16px, -1vw, 0px); right: clamp(8px, 2vw, 32px); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(120px, 18vw, 220px); letter-spacing: -0.04em; line-height: 1; color: transparent; background: linear-gradient(180deg, rgba(0, 50, 125, 0.08), rgba(0, 50, 125, 0)); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; z-index: 0; } body.theme-modern.page-mission main > section:nth-of-type(2)::before { content: "01"; } body.theme-modern.page-mission main > section:nth-of-type(3)::before { content: "02"; } body.theme-modern.page-mission main > section:nth-of-type(2) > *, body.theme-modern.page-mission main > section:nth-of-type(3) > * { position: relative; z-index: 1; } /* ---------- Mission / Vision dual cards ---------- */ /* Mission card (.card-bordered) */ body.theme-modern.page-mission .card-bordered { border: 1px solid rgba(15, 23, 42, 0.06); border-radius: var(--radius-xl); background: var(--gradient-surface); box-shadow: var(--shadow-sm); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); overflow: hidden; } body.theme-modern.page-mission .card-bordered:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } body.theme-modern.page-mission .card-bordered::before { height: 4px; background: var(--gradient-secondary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } body.theme-modern.page-mission .card-bordered__body { padding: clamp(28px, 4vw, 48px); } /* Eyebrow pill */ body.theme-modern.page-mission .card-bordered .card-eyebrow, body.theme-modern.page-mission section[aria-labelledby="strategicTitle"] .card-eyebrow { display: inline-block; margin-bottom: 14px; padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--color-secondary); background: rgba(252, 212, 0, 0.18); border-radius: var(--radius-full); } body.theme-modern.page-mission .card-bordered .text-h2 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; line-height: 1.1; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Mission "Proclaim / Disciple / Serve" info rows — circular tinted icon wells */ body.theme-modern.page-mission .card-bordered .info-row { align-items: center; gap: 14px; padding: 12px 0 !important; border-bottom: 1px solid rgba(15, 23, 42, 0.05); } body.theme-modern.page-mission .card-bordered .info-row:last-child { border-bottom: 0; } body.theme-modern.page-mission .card-bordered .info-row .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(0, 50, 125, 0.08); color: var(--color-primary); font-size: 22px; flex: 0 0 auto; } body.theme-modern.page-mission .card-bordered .info-row strong { font-weight: 700; font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; color: var(--color-on-surface); } body.theme-modern.page-mission .card-bordered .info-row span { display: block; color: var(--color-on-surface-variant); font-size: 14.5px; line-height: 1.55; } /* Vision card (.branch-feature.branch-feature--inverted) */ body.theme-modern.page-mission .branch-feature--inverted { border: 0; border-radius: var(--radius-xl); background: radial-gradient(700px 400px at 100% 0%, rgba(10, 76, 199, 0.45) 0%, transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(252, 212, 0, 0.18) 0%, transparent 60%), linear-gradient(135deg, #00224f 0%, #00327d 60%, #0a4cc7 100%); position: relative; isolation: isolate; overflow: hidden; box-shadow: var(--shadow-primary); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } body.theme-modern.page-mission .branch-feature--inverted:hover { transform: translateY(-4px); box-shadow: 0 28px 60px -12px rgba(10, 76, 199, 0.55); } body.theme-modern.page-mission .branch-feature--inverted::before { display: block; content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); z-index: 0; pointer-events: none; } body.theme-modern.page-mission .branch-feature--inverted .branch-feature__body { padding: clamp(28px, 4vw, 48px); position: relative; z-index: 1; } /* Vision eyebrow */ body.theme-modern.page-mission .branch-feature--inverted .card-eyebrow { display: inline-block; padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; background: rgba(252, 212, 0, 0.16); color: var(--color-secondary-fixed) !important; border-radius: var(--radius-full); border: 1px solid rgba(252, 212, 0, 0.25); } /* Vision title — italic display in gold→white gradient */ body.theme-modern.page-mission .branch-feature--inverted .text-h2 { font-style: italic; font-weight: 500; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.02em; line-height: 1.1; margin-top: 12px; background: linear-gradient(180deg, #fff 0%, #ffe16d 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* Verse — pulled out as italic display */ body.theme-modern.page-mission .branch-feature--inverted .text-body-md { font-family: var(--font-display); font-style: italic; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; padding-left: 16px; border-left: 2px solid var(--color-secondary-fixed); color: rgba(255,255,255,0.85) !important; opacity: 1 !important; } /* ---------- Strategic Pillars (5 value-cards) ---------- */ body.theme-modern.page-mission section[aria-labelledby="strategicTitle"] header { text-align: center; margin-bottom: 48px; } body.theme-modern.page-mission section[aria-labelledby="strategicTitle"] h2.text-h2 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.025em; line-height: 1.1; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Strategic pillars use direct child icons — give them tinted wells */ body.theme-modern.page-mission section[aria-labelledby="strategicTitle"] .value-card > .material-symbols-outlined.icon-lg.d-block { display: inline-flex !important; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(0, 50, 125, 0.08); margin-bottom: 18px !important; font-size: 28px; } body.theme-modern.page-mission section[aria-labelledby="strategicTitle"] .value-card--filled > .material-symbols-outlined.icon-lg.d-block { background: rgba(255, 255, 255, 0.14); } body.theme-modern.page-mission section[aria-labelledby="strategicTitle"] .value-card--gold > .material-symbols-outlined.icon-lg.d-block { background: rgba(252, 212, 0, 0.16); } body.theme-modern.page-mission section[aria-labelledby="strategicTitle"] .value-card .text-h3 { font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.015em; margin-bottom: 10px; } /* Refine the rule under each pillar */ body.theme-modern.page-mission .value-card__rule { margin-top: 22px; height: 3px; border-radius: 999px; background: var(--gradient-primary); } body.theme-modern.page-mission .value-card--filled .value-card__rule { background: var(--gradient-secondary); } /* ---------- Partner CTA banner (.cta-banner.directory-cta) ---------- */ body.theme-modern.page-mission .cta-banner.directory-cta { background: radial-gradient(700px 400px at 0% 100%, rgba(252, 212, 0, 0.22) 0%, transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(10, 76, 199, 0.45) 0%, transparent 60%), linear-gradient(135deg, #00224f 0%, #00327d 60%, #0a4cc7 100%); border: 0; border-radius: var(--radius-xl); padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 64px); position: relative; isolation: isolate; overflow: hidden; box-shadow: var(--shadow-primary); color: #fff; margin-top: clamp(32px, 5vw, 64px); } body.theme-modern.page-mission .cta-banner.directory-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); z-index: 0; pointer-events: none; } body.theme-modern.page-mission .cta-banner.directory-cta > * { position: relative; z-index: 1; } /* Replace the small corner heart icon with a giant watermark */ body.theme-modern.page-mission .cta-banner.directory-cta .cta-banner__bg-icon { top: auto; right: -40px; bottom: -60px; width: auto; height: auto; opacity: 0.08; z-index: 0; } body.theme-modern.page-mission .cta-banner.directory-cta .cta-banner__bg-icon .material-symbols-outlined.icon-xxl { font-size: clamp(220px, 28vw, 380px) !important; color: var(--color-secondary-fixed); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } body.theme-modern.page-mission .cta-banner.directory-cta h2.text-h2 { font-style: italic; font-weight: 500; font-size: clamp(36px, 5vw, 60px); letter-spacing: -0.025em; line-height: 1.05; color: #fff !important; margin-bottom: 18px !important; } body.theme-modern.page-mission .cta-banner.directory-cta .text-body-lg { color: var(--color-primary-fixed) !important; font-size: clamp(16px, 1.5vw, 19px); } /* The outline default btn-adepr inside the dark CTA needs to switch to outline-light vibe */ body.theme-modern.page-mission .cta-banner.directory-cta .btn-adepr:not(.btn-adepr--primary):not(.btn-adepr--secondary) { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.theme-modern.page-mission .cta-banner.directory-cta .btn-adepr:not(.btn-adepr--primary):not(.btn-adepr--secondary):hover { background: rgba(255,255,255,0.16); border-color: #fff; } /* Spacing between the four sections inside container */ body.theme-modern.page-mission main > section.mb-xl { margin-bottom: clamp(72px, 9vw, 120px) !important; } /* Responsive: dual-card stack rhythm */ @media (max-width: 991.98px) { body.theme-modern.page-mission .branch-feature--inverted { margin-top: 24px; } } /* ============================================================================= OUR CHURCHES PAGE — premium pass (scoped via .page-our-churches) ============================================================================= */ /* ---------- Cinematic interior hero (.life-hero) ---------- */ body.theme-modern.page-our-churches .life-hero { height: auto; min-height: calc(100vh - var(--header-height)); min-height: calc(100dvh - var(--header-height)); background: var(--color-primary); isolation: isolate; padding: clamp(48px, 8vh, 96px) var(--space-margin); } @media (max-width: 767.98px) { body.theme-modern.page-our-churches .life-hero { min-height: calc(100vh - var(--header-height) - var(--bottom-nav-height)); min-height: calc(100dvh - var(--header-height) - var(--bottom-nav-height)); } } body.theme-modern.page-our-churches .life-hero__media { opacity: 1; } body.theme-modern.page-our-churches .life-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); animation: hero-zoom 22s ease-in-out infinite alternate; } body.theme-modern.page-our-churches .life-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(0,18,58,0.92) 0%, rgba(0,50,125,0.78) 38%, rgba(10,76,199,0.42) 78%, rgba(252,212,0,0.18) 100%), radial-gradient(700px 400px at 12% 100%, rgba(252, 212, 0, 0.18) 0%, transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(10, 76, 199, 0.35) 0%, transparent 60%); z-index: 1; pointer-events: none; animation: hero-drift 22s ease-in-out infinite alternate; } body.theme-modern.page-our-churches .life-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px), url("data:image/svg+xml;utf8,"); background-size: 40px 40px, 40px 40px, 200px 200px; mask-image: radial-gradient(ellipse at 28% 50%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 28% 50%, black 0%, transparent 75%); z-index: 1; pointer-events: none; } body.theme-modern.page-our-churches .life-hero__content { position: relative; z-index: 2; text-align: left; max-width: 1320px; width: 100%; margin-inline: auto; padding: 0; } body.theme-modern.page-our-churches .life-hero__chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-full); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11px; letter-spacing: 0.18em; font-weight: 700; margin-bottom: 22px; } body.theme-modern.page-our-churches .life-hero__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary-container); box-shadow: 0 0 0 3px rgba(252, 212, 0, 0.25); } body.theme-modern.page-our-churches .life-hero__title { color: #fff; font-style: italic; font-weight: 500; font-size: clamp(46px, 7vw, 96px); letter-spacing: -0.035em; line-height: 0.98; margin-bottom: 22px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18); max-width: 18ch; } body.theme-modern.page-our-churches .life-hero__lead { color: var(--color-primary-fixed); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; max-width: 56ch; margin: 0; opacity: 0.92; } body.theme-modern.page-our-churches .life-hero__content > * { opacity: 0; transform: translateY(14px); animation: hero-rise 900ms var(--ease) forwards; } body.theme-modern.page-our-churches .life-hero__content > *:nth-child(1) { animation-delay: 120ms; } body.theme-modern.page-our-churches .life-hero__content > *:nth-child(2) { animation-delay: 260ms; } body.theme-modern.page-our-churches .life-hero__content > *:nth-child(3) { animation-delay: 400ms; } @media (prefers-reduced-motion: reduce) { body.theme-modern.page-our-churches .life-hero__content > * { opacity: 1; transform: none; animation: none; } body.theme-modern.page-our-churches .life-hero__media img, body.theme-modern.page-our-churches .life-hero::before { animation: none; } } body.theme-modern.page-our-churches .life-hero__divider { left: var(--space-margin); bottom: 24px; transform: none; width: 56px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.7), rgba(255,255,255,0)); } body.theme-modern.page-our-churches .life-hero__divider::after { content: "Scroll"; position: absolute; left: 68px; top: -7px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.6); white-space: nowrap; animation: hero-cue 2.4s ease-in-out infinite; } @media (max-width: 575.98px) { body.theme-modern.page-our-churches .life-hero__divider { display: none; } } /* ---------- Section watermarks 01 / 02 / 03 ---------- */ body.theme-modern.page-our-churches main { counter-reset: section; } body.theme-modern.page-our-churches main > .pillars-life, body.theme-modern.page-our-churches main > .engagement, body.theme-modern.page-our-churches main > section.container-adepr { counter-increment: section; position: relative; overflow: hidden; } body.theme-modern.page-our-churches main > .pillars-life::before, body.theme-modern.page-our-churches main > .engagement::before, body.theme-modern.page-our-churches main > section.container-adepr::before { content: counter(section, decimal-leading-zero); position: absolute; top: clamp(24px, 5vw, 48px); right: clamp(16px, 4vw, 56px); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(120px, 18vw, 220px); letter-spacing: -0.04em; line-height: 1; color: transparent; background: linear-gradient(180deg, rgba(0, 50, 125, 0.08), rgba(0, 50, 125, 0)); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; z-index: 0; } body.theme-modern.page-our-churches main > .pillars-life > *, body.theme-modern.page-our-churches main > .engagement > *, body.theme-modern.page-our-churches main > section.container-adepr > * { position: relative; z-index: 1; } /* ---------- Three Pillars (.pillars-life + .pillar-card) ---------- */ body.theme-modern.page-our-churches .pillars-life { padding: clamp(72px, 10vw, 120px) var(--space-margin); background: radial-gradient(900px 500px at 50% -10%, rgba(0,50,125,0.06) 0%, transparent 60%), #fff; background-image: none; } body.theme-modern.page-our-churches .pillar-card { border: 1px solid rgba(15, 23, 42, 0.06); border-radius: var(--radius-xl); padding: 36px 32px; background: var(--gradient-surface); box-shadow: var(--shadow-sm); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease); position: relative; overflow: hidden; } body.theme-modern.page-our-churches .pillar-card:hover { background: #fff; transform: translateY(-6px); box-shadow: var(--shadow-lg); } body.theme-modern.page-our-churches .pillar-card:hover .pillar-card__title, body.theme-modern.page-our-churches .pillar-card:hover .pillar-card__cta { color: var(--color-primary); } body.theme-modern.page-our-churches .pillar-card:hover .pillar-card__body { color: var(--color-on-surface-variant); } body.theme-modern.page-our-churches .pillar-card:hover .pillar-card__icon-wrap .material-symbols-outlined { color: var(--color-primary); } body.theme-modern.page-our-churches .pillar-card:hover .pillar-card__sub { color: var(--color-secondary); } body.theme-modern.page-our-churches .pillar-card__icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(0, 50, 125, 0.08); border-bottom: 0; padding: 0; margin-bottom: 22px; } body.theme-modern.page-our-churches .pillar-card__icon-wrap .material-symbols-outlined.icon-lg { font-size: 30px; } body.theme-modern.page-our-churches .pillar-card__title { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; margin-bottom: 6px; } body.theme-modern.page-our-churches .pillar-card__sub { font-size: 11px; letter-spacing: 0.16em; color: var(--color-secondary); } body.theme-modern.page-our-churches .pillar-card__body { color: var(--color-on-surface-variant); font-size: 15.5px; line-height: 1.65; } /* CTA link with arrow that slides on hover */ body.theme-modern.page-our-churches .pillar-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-size: 12px; letter-spacing: 0.16em; color: var(--color-primary); transition: gap var(--t-base) var(--ease), color var(--t-base) var(--ease); } body.theme-modern.page-our-churches .pillar-card__cta:hover { gap: 14px; color: var(--color-primary-container); } body.theme-modern.page-our-churches .pillar-card__cta .material-symbols-outlined { font-size: 18px; background: rgba(0, 50, 125, 0.08); border-radius: 999px; padding: 4px; transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--ease); } body.theme-modern.page-our-churches .pillar-card__cta:hover .material-symbols-outlined { background: var(--color-primary); color: #fff; transform: translateX(2px); } /* gradient ring on hover */ body.theme-modern.page-our-churches .pillar-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(0,50,125,0), rgba(0,50,125,0.35), rgba(252,212,0,0.45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--t-base) var(--ease); pointer-events: none; } body.theme-modern.page-our-churches .pillar-card:hover::after { opacity: 1; } /* ---------- Engagement (image:7 / copy:5 — wider imagery) ---------- */ body.theme-modern.page-our-churches .engagement { background: radial-gradient(800px 500px at 80% 0%, rgba(252, 212, 0, 0.06) 0%, transparent 60%), var(--color-surface-container-low); padding: clamp(72px, 10vw, 120px) 0; } body.theme-modern.page-our-churches .engagement__media { height: auto; aspect-ratio: 5 / 4; border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } body.theme-modern.page-our-churches .engagement__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 35%; background: linear-gradient(180deg, rgba(0,50,125,0) 0%, rgba(0,18,58,0.5) 100%); pointer-events: none; } body.theme-modern.page-our-churches .engagement__media img { transition: transform 1.6s var(--ease); } body.theme-modern.page-our-churches .engagement__media:hover img { transform: scale(1.05); } body.theme-modern.page-our-churches .engagement .find-branch__heading { font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.025em; line-height: 1.1; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px !important; } body.theme-modern.page-our-churches .engagement .text-body-lg { color: var(--color-on-surface-variant); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; } /* Engagement info-rows: pill icon wells, no harsh borders */ body.theme-modern.page-our-churches .engagement .info-row { align-items: center; gap: 14px; padding: 14px 0 !important; border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important; } body.theme-modern.page-our-churches .engagement .info-row:last-child { border-bottom: 0 !important; } body.theme-modern.page-our-churches .engagement .info-row .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(0, 50, 125, 0.08); color: var(--color-primary); font-size: 22px; flex: 0 0 auto; } body.theme-modern.page-our-churches .engagement .info-row strong { font-weight: 700; font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; color: var(--color-on-surface); } body.theme-modern.page-our-churches .engagement .info-row span { display: block; color: var(--color-on-surface-variant); font-size: 14.5px; line-height: 1.55; } /* The full-width primary CTA */ body.theme-modern.page-our-churches .engagement .btn-adepr.w-100 { border-radius: var(--radius-full); padding: 16px 32px; font-size: 13px; letter-spacing: 0.12em; } /* ---------- Faith Pillars Table — premium card grid ---------- */ body.theme-modern.page-our-churches main > section.container-adepr { padding-top: clamp(72px, 10vw, 120px); padding-bottom: clamp(72px, 10vw, 120px); } body.theme-modern.page-our-churches main > section.container-adepr h2.text-h2 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.025em; line-height: 1.1; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: clamp(40px, 6vw, 72px) !important; } /* Replace harsh table borders with a refined card grid */ body.theme-modern.page-our-churches main > section.container-adepr .bg-white { background: #fff !important; border: 1px solid rgba(15, 23, 42, 0.06) !important; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; } /* Header row */ body.theme-modern.page-our-churches main > section.container-adepr .bg-white > .row.d-md-flex { border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important; background: linear-gradient(180deg, rgba(0,50,125,0.04) 0%, transparent 100%); } body.theme-modern.page-our-churches main > section.container-adepr .bg-white > .row.d-md-flex > [class*="col-"] { padding: 18px 24px !important; background: transparent !important; border-right: 1px solid rgba(15, 23, 42, 0.06) !important; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--color-secondary); } body.theme-modern.page-our-churches main > section.container-adepr .bg-white > .row.d-md-flex > [class*="col-"]:last-child { border-right: 0 !important; } /* Body rows */ body.theme-modern.page-our-churches main > section.container-adepr .bg-white > .row:not(.d-md-flex) { border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important; transition: background-color var(--t-base) var(--ease); } body.theme-modern.page-our-churches main > section.container-adepr .bg-white > .row:not(.d-md-flex):last-child { border-bottom: 0 !important; } body.theme-modern.page-our-churches main > section.container-adepr .bg-white > .row:not(.d-md-flex):hover { background: rgba(0, 50, 125, 0.025); } body.theme-modern.page-our-churches main > section.container-adepr .bg-white > .row:not(.d-md-flex) > [class*="col-"] { padding: 24px !important; border-right: 1px solid rgba(15, 23, 42, 0.06) !important; } body.theme-modern.page-our-churches main > section.container-adepr .bg-white > .row:not(.d-md-flex) > [class*="col-"]:last-child { border-right: 0 !important; } @media (max-width: 767.98px) { body.theme-modern.page-our-churches main > section.container-adepr .bg-white > .row:not(.d-md-flex) > [class*="col-"] { border-right: 0 !important; border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important; } body.theme-modern.page-our-churches main > section.container-adepr .bg-white > .row:not(.d-md-flex) > [class*="col-"]:last-child { border-bottom: 0 !important; } } /* Pillar label cells: italic display navy */ body.theme-modern.page-our-churches main > section.container-adepr .text-h3.text-primary-adepr { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.015em; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* Description body */ body.theme-modern.page-our-churches main > section.container-adepr .text-on-surface-variant { font-size: 15.5px; line-height: 1.65; } /* Commitment chip — gold pill */ body.theme-modern.page-our-churches main > section.container-adepr .text-secondary-adepr.fw-bold { display: inline-block; padding: 6px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-secondary) !important; background: rgba(252, 212, 0, 0.18); border-radius: var(--radius-full); } /* ---------- Newsletter CTA (.bg-primary-adepr at end) ---------- */ body.theme-modern.page-our-churches main > section.bg-primary-adepr { background: var(--color-primary); background-image: radial-gradient(700px 400px at 0% 100%, rgba(252, 212, 0, 0.18) 0%, transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(10, 76, 199, 0.45) 0%, transparent 60%), linear-gradient(135deg, #00224f 0%, #00327d 60%, #0a4cc7 100%); position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 10vw, 120px) var(--space-margin); } body.theme-modern.page-our-churches main > section.bg-primary-adepr::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); z-index: 0; pointer-events: none; } body.theme-modern.page-our-churches main > section.bg-primary-adepr > * { position: relative; z-index: 1; } body.theme-modern.page-our-churches main > section.bg-primary-adepr h2.text-h2 { font-style: italic; font-weight: 500; font-size: clamp(36px, 5vw, 60px); letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 18px !important; color: #fff !important; } body.theme-modern.page-our-churches main > section.bg-primary-adepr p { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; } /* Newsletter form — modern pill input */ body.theme-modern.page-our-churches main > section.bg-primary-adepr form { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-full); padding: 6px; gap: 0 !important; flex-direction: row !important; align-items: stretch; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } body.theme-modern.page-our-churches main > section.bg-primary-adepr form:focus-within { border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 0 0 3px rgba(252, 212, 0, 0.18); } body.theme-modern.page-our-churches main > section.bg-primary-adepr form input[type="email"] { flex: 1 1 auto; background: transparent !important; border: 0 !important; padding: 12px 22px !important; color: #fff !important; font-size: 15px; outline: none; min-width: 0; } body.theme-modern.page-our-churches main > section.bg-primary-adepr form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.6); } body.theme-modern.page-our-churches main > section.bg-primary-adepr form .btn-adepr { flex: 0 0 auto; border-radius: var(--radius-full); padding: 12px 22px; font-size: 12px; letter-spacing: 0.12em; } @media (max-width: 575.98px) { body.theme-modern.page-our-churches main > section.bg-primary-adepr form { flex-direction: column !important; border-radius: var(--radius-lg); } body.theme-modern.page-our-churches main > section.bg-primary-adepr form .btn-adepr { width: 100%; } } /* ---------- Responsive layout tightening ---------- */ @media (max-width: 991.98px) { body.theme-modern.page-our-churches .engagement .row > .col-12:first-child { margin-bottom: 32px; } } /* ============================================================================= BRANCHES PAGE — premium pass (scoped via .page-branches) ============================================================================= */ /* Page is wrapped in

. */ body.theme-modern.page-branches main.container-adepr { padding-top: 0; } /* ---------- Hero (.branches-hero) ---------- */ body.theme-modern.page-branches .branches-hero { position: relative; overflow: hidden; isolation: isolate; margin: 0 0 clamp(48px, 6vw, 80px); padding: clamp(72px, 12vh, 128px) clamp(20px, 4vw, 56px); min-height: clamp(380px, 55vh, 600px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; border-radius: var(--radius-xl); background: radial-gradient(800px 500px at 80% 20%, rgba(252, 212, 0, 0.14) 0%, transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(10, 76, 199, 0.18) 0%, transparent 60%), linear-gradient(135deg, #f5f7fb 0%, #ffffff 100%); border: 1px solid rgba(15, 23, 42, 0.05); box-shadow: var(--shadow-md); } body.theme-modern.page-branches .branches-hero__bg { display: none; } body.theme-modern.page-branches .branches-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 70% 30%, rgba(252, 212, 0, 0.18) 0%, transparent 60%), radial-gradient(520px 320px at 20% 80%, rgba(0, 50, 125, 0.16) 0%, transparent 60%); z-index: 0; pointer-events: none; animation: hero-drift 22s ease-in-out infinite alternate; } body.theme-modern.page-branches .branches-hero::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 80%); z-index: 0; pointer-events: none; opacity: 0.6; } body.theme-modern.page-branches .branches-hero > *:not(.branches-hero__bg) { position: relative; z-index: 1; } /* Inject a directory-eyebrow pill in front of the title via ::before of the title */ body.theme-modern.page-branches .branches-hero__title { font-style: italic; font-weight: 500; font-size: clamp(46px, 7vw, 92px); letter-spacing: -0.035em; line-height: 0.98; margin-bottom: 22px !important; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; max-width: 14ch; } body.theme-modern.page-branches .branches-hero__lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; max-width: 56ch; color: var(--color-on-surface-variant); margin: 0; } /* Stagger reveal */ body.theme-modern.page-branches .branches-hero > *:not(.branches-hero__bg) { opacity: 0; transform: translateY(14px); animation: hero-rise 900ms var(--ease) forwards; } body.theme-modern.page-branches .branches-hero > *:nth-child(2) { animation-delay: 120ms; } body.theme-modern.page-branches .branches-hero > *:nth-child(3) { animation-delay: 260ms; } @media (prefers-reduced-motion: reduce) { body.theme-modern.page-branches .branches-hero > *:not(.branches-hero__bg) { opacity: 1; transform: none; animation: none; } body.theme-modern.page-branches .branches-hero::before { animation: none; } } /* ---------- Bento grid spacing ---------- */ body.theme-modern.page-branches .branches-grid > [class*="col-"] { margin-bottom: 0; } /* ---------- Branch feature card (Remera default + Kicukiro inverted) ---------- */ body.theme-modern.page-branches .branch-feature { border: 0; border-radius: var(--radius-xl); background: var(--gradient-surface); box-shadow: var(--shadow-sm); overflow: hidden; position: relative; isolation: isolate; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } body.theme-modern.page-branches .branch-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } body.theme-modern.page-branches .branch-feature::before { content: ""; position: absolute; top: 0; left: 0; height: 4px; width: 100%; background: var(--gradient-secondary); z-index: 2; } body.theme-modern.page-branches .branch-feature__media { height: 320px; position: relative; } body.theme-modern.page-branches .branch-feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,18,58,0) 60%, rgba(0,18,58,0.35) 100%); pointer-events: none; } body.theme-modern.page-branches .branch-feature__media img { filter: none; transition: transform 1.6s var(--ease); } body.theme-modern.page-branches .branch-feature:hover .branch-feature__media img { transform: scale(1.05); } @media (min-width: 768px) { body.theme-modern.page-branches .branch-feature__media { width: 50%; height: auto; min-height: 360px; } body.theme-modern.page-branches .branch-feature__body { width: 50%; } } body.theme-modern.page-branches .branch-feature__body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: space-between; } /* Eyebrow pill */ body.theme-modern.page-branches .branch-feature .card-eyebrow, body.theme-modern.page-branches .card-bordered .card-eyebrow { display: inline-block; margin-bottom: 12px; padding: 5px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--color-secondary); background: rgba(252, 212, 0, 0.18); border-radius: var(--radius-full); } /* Branch title */ body.theme-modern.page-branches .branch-feature .text-h2 { font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 10px; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } body.theme-modern.page-branches .branch-feature .text-body-md { color: var(--color-on-surface-variant); font-size: 15px; line-height: 1.6; } /* Info rows */ body.theme-modern.page-branches .info-row { align-items: center; gap: 12px; } body.theme-modern.page-branches .info-row .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 50, 125, 0.08); color: var(--color-primary); font-size: 20px; flex: 0 0 auto; } body.theme-modern.page-branches .info-row strong { font-weight: 700; font-family: var(--font-display); font-size: 15.5px; color: var(--color-on-surface); } body.theme-modern.page-branches .info-row span { display: block; color: var(--color-on-surface-variant); font-size: 13.5px; line-height: 1.5; } /* Refine the buttons inside feature card */ body.theme-modern.page-branches .branch-feature .btn-adepr { font-size: 12px; padding: 11px 18px; } /* ---------- Card-bordered (Kimironko, Kacyiru) ---------- */ body.theme-modern.page-branches .card-bordered { border: 1px solid rgba(15, 23, 42, 0.06); border-radius: var(--radius-xl); background: var(--gradient-surface); box-shadow: var(--shadow-sm); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); overflow: hidden; } body.theme-modern.page-branches .card-bordered:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } body.theme-modern.page-branches .card-bordered::before { height: 4px; background: var(--gradient-primary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } body.theme-modern.page-branches .card-bordered__body { padding: clamp(24px, 3vw, 40px); } body.theme-modern.page-branches .card-bordered .text-h3 { font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 8px !important; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } body.theme-modern.page-branches .card-bordered .text-body-md { color: var(--color-on-surface-variant); font-size: 14.5px; line-height: 1.6; } /* Compact info-row variant inside the smaller branch cards */ body.theme-modern.page-branches .card-bordered .info-row { font-size: 13.5px; } body.theme-modern.page-branches .card-bordered .info-row .material-symbols-outlined { width: 32px; height: 32px; border-radius: 8px; font-size: 18px; } /* Side-by-side button row */ body.theme-modern.page-branches .card-bordered .row.g-sm .btn-adepr { font-size: 11.5px; padding: 11px 12px; letter-spacing: 0.1em; } /* ---------- Inverted feature card (Kicukiro) ---------- */ body.theme-modern.page-branches .branch-feature--inverted { background: radial-gradient(700px 400px at 100% 0%, rgba(10, 76, 199, 0.45) 0%, transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(252, 212, 0, 0.18) 0%, transparent 60%), linear-gradient(135deg, #00224f 0%, #00327d 60%, #0a4cc7 100%); box-shadow: var(--shadow-primary); } body.theme-modern.page-branches .branch-feature--inverted:hover { box-shadow: 0 28px 60px -12px rgba(10, 76, 199, 0.55); } body.theme-modern.page-branches .branch-feature--inverted::before { background: var(--gradient-secondary); } body.theme-modern.page-branches .branch-feature--inverted::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); z-index: 0; pointer-events: none; } body.theme-modern.page-branches .branch-feature--inverted .branch-feature__body { position: relative; z-index: 1; } body.theme-modern.page-branches .branch-feature--inverted .card-eyebrow { background: rgba(252, 212, 0, 0.16); color: var(--color-secondary-fixed) !important; border: 1px solid rgba(252, 212, 0, 0.25); } body.theme-modern.page-branches .branch-feature--inverted .text-h2 { font-style: italic; font-weight: 500; background: linear-gradient(180deg, #fff 0%, #ffe16d 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } body.theme-modern.page-branches .branch-feature--inverted .text-body-md { color: rgba(255, 255, 255, 0.86) !important; } /* Inverted info-rows: gold icon wells, white body */ body.theme-modern.page-branches .branch-feature--inverted .info-row .material-symbols-outlined { background: rgba(252, 212, 0, 0.16); color: var(--color-secondary-fixed); } body.theme-modern.page-branches .branch-feature--inverted .info-row strong { color: #fff; } body.theme-modern.page-branches .branch-feature--inverted .info-row span { color: rgba(255, 255, 255, 0.72); } /* Inverted media side */ body.theme-modern.page-branches .branch-feature--inverted .branch-feature__media { position: relative; z-index: 1; } body.theme-modern.page-branches .branch-feature--inverted .branch-feature__media-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 50, 125, 0.35) 0%, transparent 60%); } /* Ensure outline-light variant on the inverted card actually reads light */ body.theme-modern.page-branches .branch-feature--inverted .btn-adepr--outline-light { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.4); } body.theme-modern.page-branches .branch-feature--inverted .btn-adepr--outline-light:hover { background: rgba(255,255,255,0.16); border-color: #fff; } /* ---------- Directory CTA (.cta-banner.directory-cta) ---------- */ body.theme-modern.page-branches .cta-banner.directory-cta { background: radial-gradient(700px 400px at 0% 100%, rgba(252, 212, 0, 0.22) 0%, transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(10, 76, 199, 0.45) 0%, transparent 60%), linear-gradient(135deg, #00224f 0%, #00327d 60%, #0a4cc7 100%); border: 0; border-radius: var(--radius-xl); padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 64px); position: relative; isolation: isolate; overflow: hidden; box-shadow: var(--shadow-primary); color: #fff; margin-top: clamp(48px, 8vw, 96px); } body.theme-modern.page-branches .cta-banner.directory-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); z-index: 0; pointer-events: none; } body.theme-modern.page-branches .cta-banner.directory-cta > * { position: relative; z-index: 1; } /* Big watermark map icon */ body.theme-modern.page-branches .cta-banner.directory-cta .cta-banner__bg-icon { top: auto; right: -50px; bottom: -70px; width: auto; height: auto; opacity: 0.08; z-index: 0; } body.theme-modern.page-branches .cta-banner.directory-cta .cta-banner__bg-icon .material-symbols-outlined.icon-xxl { font-size: clamp(220px, 28vw, 380px) !important; color: var(--color-secondary-fixed); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } body.theme-modern.page-branches .cta-banner.directory-cta h2.text-h2 { font-style: italic; font-weight: 500; font-size: clamp(36px, 5vw, 60px); letter-spacing: -0.025em; line-height: 1.05; color: #fff !important; margin-bottom: 18px !important; } body.theme-modern.page-branches .cta-banner.directory-cta .text-body-lg { color: var(--color-primary-fixed) !important; font-size: clamp(16px, 1.5vw, 19px); } /* ---------- Responsive grid rhythm ---------- */ @media (max-width: 767.98px) { body.theme-modern.page-branches .branches-grid > [class*="col-"] { margin-bottom: var(--space-gutter); } } /* ============================================================================= BRANCH DETAIL PAGES — premium pass (scoped via .page-branch) Shared by branch-remera, branch-kimironko, branch-kacyiru, branch-kicukiro. ============================================================================= */ body.theme-modern.page-branch main.container-adepr { padding-top: 0; } /* ---------- Breadcrumb back-link ---------- */ body.theme-modern.page-branch nav[aria-label="Breadcrumb"] { margin-bottom: clamp(20px, 3vw, 32px) !important; } body.theme-modern.page-branch nav[aria-label="Breadcrumb"] .link-arrow { display: inline-flex; align-items: center; gap: 8px !important; padding: 8px 14px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-on-surface-variant); background: rgba(0, 50, 125, 0.06); border-radius: var(--radius-full); transition: gap var(--t-base) var(--ease), color var(--t-base) var(--ease), background-color var(--t-base) var(--ease); } body.theme-modern.page-branch nav[aria-label="Breadcrumb"] .link-arrow:hover { gap: 14px !important; color: var(--color-primary); background: rgba(0, 50, 125, 0.1); } body.theme-modern.page-branch nav[aria-label="Breadcrumb"] .link-arrow .material-symbols-outlined { font-size: 16px; } /* ---------- Hero (.branches-hero) ---------- */ body.theme-modern.page-branch .branches-hero { position: relative; overflow: hidden; isolation: isolate; margin: 0 0 clamp(48px, 6vw, 80px); padding: clamp(64px, 10vh, 112px) clamp(20px, 4vw, 56px); min-height: clamp(360px, 50vh, 560px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; border-radius: var(--radius-xl); background: radial-gradient(800px 500px at 80% 20%, rgba(252, 212, 0, 0.14) 0%, transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(10, 76, 199, 0.18) 0%, transparent 60%), linear-gradient(135deg, #f5f7fb 0%, #ffffff 100%); border: 1px solid rgba(15, 23, 42, 0.05); box-shadow: var(--shadow-md); } body.theme-modern.page-branch .branches-hero__bg { display: none; } body.theme-modern.page-branch .branches-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 70% 30%, rgba(252, 212, 0, 0.18) 0%, transparent 60%), radial-gradient(520px 320px at 20% 80%, rgba(0, 50, 125, 0.16) 0%, transparent 60%); z-index: 0; pointer-events: none; animation: hero-drift 22s ease-in-out infinite alternate; } body.theme-modern.page-branch .branches-hero::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 80%); z-index: 0; pointer-events: none; opacity: 0.6; } body.theme-modern.page-branch .branches-hero > *:not(.branches-hero__bg) { position: relative; z-index: 1; } /* District eyebrow → gold pill */ body.theme-modern.page-branch .branches-hero .text-label-caps { display: inline-block; padding: 6px 14px; font-size: 11px; letter-spacing: 0.18em; background: rgba(252, 212, 0, 0.18); color: var(--color-secondary); border-radius: var(--radius-full); margin-bottom: 22px !important; } body.theme-modern.page-branch .branches-hero__title { font-style: italic; font-weight: 500; font-size: clamp(40px, 6vw, 80px); letter-spacing: -0.035em; line-height: 0.98; margin-bottom: 22px !important; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; max-width: 14ch; } body.theme-modern.page-branch .branches-hero__lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; max-width: 56ch; color: var(--color-on-surface-variant); margin: 0; } /* Stagger reveal for hero children */ body.theme-modern.page-branch .branches-hero > *:not(.branches-hero__bg) { opacity: 0; transform: translateY(14px); animation: hero-rise 900ms var(--ease) forwards; } body.theme-modern.page-branch .branches-hero > *:nth-child(2) { animation-delay: 120ms; } body.theme-modern.page-branch .branches-hero > *:nth-child(3) { animation-delay: 260ms; } body.theme-modern.page-branch .branches-hero > *:nth-child(4) { animation-delay: 400ms; } @media (prefers-reduced-motion: reduce) { body.theme-modern.page-branch .branches-hero > *:not(.branches-hero__bg) { opacity: 1; transform: none; animation: none; } body.theme-modern.page-branch .branches-hero::before { animation: none; } } /* ---------- Section watermarks 01 / 02 / 03 ---------- */ /* The four content sections (after hero) are: feature, about, ministries, cta. We number the first three; the CTA closes the page. */ body.theme-modern.page-branch main { counter-reset: section; } body.theme-modern.page-branch main > section.mb-xl { counter-increment: section; position: relative; overflow: hidden; } body.theme-modern.page-branch main > section.mb-xl::before { content: counter(section, decimal-leading-zero); position: absolute; top: clamp(-12px, -1vw, 0px); right: clamp(8px, 2vw, 32px); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(120px, 18vw, 220px); letter-spacing: -0.04em; line-height: 1; color: transparent; background: linear-gradient(180deg, rgba(0, 50, 125, 0.07), rgba(0, 50, 125, 0)); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; z-index: 0; } body.theme-modern.page-branch main > section.mb-xl > * { position: relative; z-index: 1; } /* ---------- Featured branch card (.branch-feature) ---------- */ body.theme-modern.page-branch .branch-feature { border: 0; border-radius: var(--radius-xl); background: var(--gradient-surface); box-shadow: var(--shadow-md); overflow: hidden; position: relative; isolation: isolate; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } body.theme-modern.page-branch .branch-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } body.theme-modern.page-branch .branch-feature::before { content: ""; position: absolute; top: 0; left: 0; height: 4px; width: 100%; background: var(--gradient-secondary); z-index: 2; } body.theme-modern.page-branch .branch-feature__media { height: 320px; position: relative; } body.theme-modern.page-branch .branch-feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,18,58,0) 60%, rgba(0,18,58,0.35) 100%); pointer-events: none; } body.theme-modern.page-branch .branch-feature__media img { filter: none; transition: transform 1.6s var(--ease); } body.theme-modern.page-branch .branch-feature:hover .branch-feature__media img { transform: scale(1.05); } @media (min-width: 768px) { body.theme-modern.page-branch .branch-feature__media { width: 50%; height: auto; min-height: 380px; } body.theme-modern.page-branch .branch-feature__body { width: 50%; } } body.theme-modern.page-branch .branch-feature__body { padding: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; justify-content: space-between; } /* Eyebrow pill */ body.theme-modern.page-branch .card-eyebrow { display: inline-block; margin-bottom: 12px; padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--color-secondary); background: rgba(252, 212, 0, 0.18); border-radius: var(--radius-full); } body.theme-modern.page-branch .branch-feature .text-h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px !important; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } body.theme-modern.page-branch .branch-feature .text-body-md { color: var(--color-on-surface-variant); font-size: 15.5px; line-height: 1.65; } /* Info-rows: circular tinted icon wells */ body.theme-modern.page-branch .info-row { align-items: center; gap: 12px; } body.theme-modern.page-branch .info-row .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 50, 125, 0.08); color: var(--color-primary); font-size: 20px; flex: 0 0 auto; } body.theme-modern.page-branch .info-row strong { font-weight: 700; font-family: var(--font-display); font-size: 16px; color: var(--color-on-surface); } body.theme-modern.page-branch .info-row span { display: block; color: var(--color-on-surface-variant); font-size: 14px; line-height: 1.55; } /* ---------- Inverted feature card (Kicukiro) ---------- */ body.theme-modern.page-branch .branch-feature--inverted { background: radial-gradient(700px 400px at 100% 0%, rgba(10, 76, 199, 0.45) 0%, transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(252, 212, 0, 0.18) 0%, transparent 60%), linear-gradient(135deg, #00224f 0%, #00327d 60%, #0a4cc7 100%); box-shadow: var(--shadow-primary); } body.theme-modern.page-branch .branch-feature--inverted:hover { box-shadow: 0 28px 60px -12px rgba(10, 76, 199, 0.55); } body.theme-modern.page-branch .branch-feature--inverted::before { background: var(--gradient-secondary); } body.theme-modern.page-branch .branch-feature--inverted::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); z-index: 0; pointer-events: none; } body.theme-modern.page-branch .branch-feature--inverted .branch-feature__body { position: relative; z-index: 1; } body.theme-modern.page-branch .branch-feature--inverted .card-eyebrow { background: rgba(252, 212, 0, 0.16); color: var(--color-secondary-fixed) !important; border: 1px solid rgba(252, 212, 0, 0.25); } body.theme-modern.page-branch .branch-feature--inverted .text-h2 { font-style: italic; font-weight: 500; background: linear-gradient(180deg, #fff 0%, #ffe16d 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } body.theme-modern.page-branch .branch-feature--inverted .text-body-md { color: rgba(255, 255, 255, 0.86) !important; } body.theme-modern.page-branch .branch-feature--inverted .info-row .material-symbols-outlined { background: rgba(252, 212, 0, 0.16); color: var(--color-secondary-fixed); } body.theme-modern.page-branch .branch-feature--inverted .info-row strong { color: #fff; } body.theme-modern.page-branch .branch-feature--inverted .info-row span { color: rgba(255, 255, 255, 0.72); } body.theme-modern.page-branch .branch-feature--inverted .branch-feature__media-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 50, 125, 0.35) 0%, transparent 60%); } /* ---------- About this branch (split layout) ---------- */ body.theme-modern.page-branch section[aria-labelledby="branchAboutTitle"] .text-h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.025em; line-height: 1.1; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; margin-bottom: 18px !important; } body.theme-modern.page-branch section[aria-labelledby="branchAboutTitle"] .text-body-lg { color: var(--color-on-surface); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; } body.theme-modern.page-branch section[aria-labelledby="branchAboutTitle"] .text-body-md { color: var(--color-on-surface-variant); font-size: 15.5px; line-height: 1.65; } /* Drop-cap on the lead paragraph */ body.theme-modern.page-branch section[aria-labelledby="branchAboutTitle"] .text-body-lg::first-letter { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 3em; float: left; line-height: 0.9; padding: 6px 12px 0 0; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Leadership card (.card-bordered.card-bordered--no-accent) */ body.theme-modern.page-branch .card-bordered--no-accent { border: 1px solid rgba(15, 23, 42, 0.06); border-radius: var(--radius-xl); background: var(--gradient-surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } body.theme-modern.page-branch .card-bordered--no-accent:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } body.theme-modern.page-branch .card-bordered--no-accent::before { display: none; } body.theme-modern.page-branch .card-bordered--no-accent .card-bordered__body { padding: clamp(28px, 3vw, 40px); } body.theme-modern.page-branch .card-bordered--no-accent .text-h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--color-primary); margin-bottom: 18px !important; } body.theme-modern.page-branch .card-bordered--no-accent .info-row { border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important; padding: 14px 0 !important; } body.theme-modern.page-branch .card-bordered--no-accent .info-row:last-child { border-bottom: 0 !important; } /* ---------- Ministries grid (.value-card x4) ---------- */ body.theme-modern.page-branch section[aria-labelledby="ministriesTitle"] header { margin-bottom: clamp(40px, 6vw, 64px); } body.theme-modern.page-branch section[aria-labelledby="ministriesTitle"] header .card-eyebrow { margin-bottom: 12px; } body.theme-modern.page-branch section[aria-labelledby="ministriesTitle"] h2.text-h2 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.025em; line-height: 1.1; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* Direct-child icon → tinted square well */ body.theme-modern.page-branch section[aria-labelledby="ministriesTitle"] .value-card > .material-symbols-outlined.icon-lg.d-block { display: inline-flex !important; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(0, 50, 125, 0.08); margin-bottom: 18px !important; font-size: 28px; } body.theme-modern.page-branch section[aria-labelledby="ministriesTitle"] .value-card .text-h3 { font-size: 20px; letter-spacing: -0.015em; margin-bottom: 8px !important; } body.theme-modern.page-branch section[aria-labelledby="ministriesTitle"] .value-card .text-body-md { font-size: 14.5px; line-height: 1.6; } body.theme-modern.page-branch section[aria-labelledby="ministriesTitle"] .value-card .value-card__rule { margin-top: 22px; height: 3px; border-radius: 999px; background: var(--gradient-primary); } /* ---------- "Plan Your First Visit" CTA ---------- */ body.theme-modern.page-branch .cta-banner.directory-cta { background: radial-gradient(700px 400px at 0% 100%, rgba(252, 212, 0, 0.22) 0%, transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(10, 76, 199, 0.45) 0%, transparent 60%), linear-gradient(135deg, #00224f 0%, #00327d 60%, #0a4cc7 100%); border: 0; border-radius: var(--radius-xl); padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 64px); position: relative; isolation: isolate; overflow: hidden; box-shadow: var(--shadow-primary); color: #fff; margin-top: clamp(48px, 8vw, 96px); } body.theme-modern.page-branch .cta-banner.directory-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); z-index: 0; pointer-events: none; } body.theme-modern.page-branch .cta-banner.directory-cta > * { position: relative; z-index: 1; } /* Giant church icon watermark (per branch) */ body.theme-modern.page-branch .cta-banner.directory-cta .cta-banner__bg-icon { top: auto; right: -50px; bottom: -70px; width: auto; height: auto; opacity: 0.08; z-index: 0; } body.theme-modern.page-branch .cta-banner.directory-cta .cta-banner__bg-icon .material-symbols-outlined.icon-xxl { font-size: clamp(220px, 28vw, 380px) !important; color: var(--color-secondary-fixed); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } body.theme-modern.page-branch .cta-banner.directory-cta h2.text-h2 { font-style: italic; font-weight: 500; font-size: clamp(36px, 5vw, 60px); letter-spacing: -0.025em; line-height: 1.05; color: #fff !important; margin-bottom: 18px !important; } body.theme-modern.page-branch .cta-banner.directory-cta .text-body-lg { color: var(--color-primary-fixed) !important; font-size: clamp(16px, 1.5vw, 19px); } /* ---------- Section spacing rhythm ---------- */ body.theme-modern.page-branch main > section.mb-xl { margin-bottom: clamp(72px, 9vw, 120px) !important; } /* Stack the about layout on small screens */ @media (max-width: 767.98px) { body.theme-modern.page-branch section[aria-labelledby="branchAboutTitle"] .row > .col-12:first-child { margin-bottom: 24px; } } /* ============================================================================= EVENTS PAGE — premium pass (scoped via .page-events) ============================================================================= */ body.theme-modern.page-events main.container-adepr { padding-top: 0; } /* ---------- Hero (.branches-hero) ---------- */ body.theme-modern.page-events .branches-hero { position: relative; overflow: hidden; isolation: isolate; margin: 0 0 clamp(48px, 6vw, 80px); padding: clamp(64px, 10vh, 112px) clamp(20px, 4vw, 56px); min-height: clamp(400px, 58vh, 600px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; border-radius: var(--radius-xl); background: radial-gradient(800px 500px at 80% 20%, rgba(252, 212, 0, 0.14) 0%, transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(10, 76, 199, 0.18) 0%, transparent 60%), linear-gradient(135deg, #f5f7fb 0%, #ffffff 100%); border: 1px solid rgba(15, 23, 42, 0.05); box-shadow: var(--shadow-md); } body.theme-modern.page-events .branches-hero__bg { display: none; } body.theme-modern.page-events .branches-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 70% 30%, rgba(252, 212, 0, 0.18) 0%, transparent 60%), radial-gradient(520px 320px at 20% 80%, rgba(0, 50, 125, 0.16) 0%, transparent 60%); z-index: 0; pointer-events: none; animation: hero-drift 22s ease-in-out infinite alternate; } body.theme-modern.page-events .branches-hero::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 80%); z-index: 0; pointer-events: none; opacity: 0.6; } body.theme-modern.page-events .branches-hero > *:not(.branches-hero__bg) { position: relative; z-index: 1; } body.theme-modern.page-events .branches-hero .text-label-caps { display: inline-block; padding: 6px 14px; font-size: 11px; letter-spacing: 0.18em; background: rgba(252, 212, 0, 0.18); color: var(--color-secondary); border-radius: var(--radius-full); margin-bottom: 22px !important; } body.theme-modern.page-events .branches-hero__title { font-style: italic; font-weight: 500; font-size: clamp(46px, 7vw, 92px); letter-spacing: -0.035em; line-height: 0.98; margin-bottom: 22px !important; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; max-width: 16ch; } body.theme-modern.page-events .branches-hero__lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; max-width: 60ch; color: var(--color-on-surface-variant); margin: 0; } /* Stagger reveal */ body.theme-modern.page-events .branches-hero > *:not(.branches-hero__bg) { opacity: 0; transform: translateY(14px); animation: hero-rise 900ms var(--ease) forwards; } body.theme-modern.page-events .branches-hero > *:nth-child(2) { animation-delay: 120ms; } body.theme-modern.page-events .branches-hero > *:nth-child(3) { animation-delay: 260ms; } body.theme-modern.page-events .branches-hero > *:nth-child(4) { animation-delay: 400ms; } @media (prefers-reduced-motion: reduce) { body.theme-modern.page-events .branches-hero > *:not(.branches-hero__bg) { opacity: 1; transform: none; animation: none; } body.theme-modern.page-events .branches-hero::before { animation: none; } } /* ---------- Section watermarks 01 / 02 ---------- */ body.theme-modern.page-events main { counter-reset: section; } body.theme-modern.page-events main > section[aria-labelledby="upcomingTitle"], body.theme-modern.page-events main > section[aria-labelledby="galleryTitle"] { counter-increment: section; position: relative; overflow: hidden; } body.theme-modern.page-events main > section[aria-labelledby="upcomingTitle"]::before, body.theme-modern.page-events main > section[aria-labelledby="galleryTitle"]::before { content: counter(section, decimal-leading-zero); position: absolute; top: clamp(-12px, -1vw, 0px); right: clamp(8px, 2vw, 32px); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(120px, 18vw, 220px); letter-spacing: -0.04em; line-height: 1; color: transparent; background: linear-gradient(180deg, rgba(0, 50, 125, 0.07), rgba(0, 50, 125, 0)); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; z-index: 0; } body.theme-modern.page-events main > section[aria-labelledby="upcomingTitle"] > *, body.theme-modern.page-events main > section[aria-labelledby="galleryTitle"] > * { position: relative; z-index: 1; } /* ---------- Upcoming Gatherings — section header ---------- */ body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] > .d-flex.flex-column { border-left: 0 !important; padding-left: 0 !important; margin-bottom: clamp(32px, 4vw, 56px) !important; align-items: flex-start; gap: 14px; } @media (min-width: 768px) { body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] > .d-flex.flex-column { align-items: flex-end; } } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] > .d-flex.flex-column > div:first-child { position: relative; padding-left: 16px; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] > .d-flex.flex-column > div:first-child::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 999px; background: var(--gradient-secondary); } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] h2.text-h2 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.025em; line-height: 1.1; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; margin-bottom: 6px !important; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .link-arrow { font-size: 12px; letter-spacing: 0.16em; padding: 8px 14px; background: rgba(0, 50, 125, 0.06); border-radius: var(--radius-full); } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .link-arrow:hover { background: rgba(0, 50, 125, 0.1); } /* ---------- Bento event cards (.card-bordered + .branch-feature--inverted) ---------- */ /* Common card-bordered treatment */ body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .card-bordered { border: 1px solid rgba(15, 23, 42, 0.06); border-radius: var(--radius-xl); background: var(--gradient-surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); display: flex; flex-direction: column; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .card-bordered:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .card-bordered::before { height: 4px; background: var(--gradient-primary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .card-bordered__body { padding: clamp(22px, 2.5vw, 32px); flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; } /* Featured card image at top */ body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .card-bordered .branch-feature__media { position: relative; overflow: hidden; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .card-bordered .branch-feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,18,58,0) 60%, rgba(0,18,58,0.35) 100%); pointer-events: none; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .card-bordered .branch-feature__media img { filter: none; transition: transform 1.6s var(--ease); } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .card-bordered:hover .branch-feature__media img { transform: scale(1.05); } /* Eyebrow as a clean date/badge pill */ body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .card-eyebrow { display: inline-block; padding: 6px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--color-secondary); background: rgba(252, 212, 0, 0.18); border-radius: var(--radius-full); margin-bottom: 12px; } /* Event title */ body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .card-bordered .text-h3 { font-style: italic; font-weight: 500; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 10px !important; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .card-bordered .text-body-md { color: var(--color-on-surface-variant); font-size: 14.5px; line-height: 1.6; } /* Info rows: refined icon wells */ body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .info-row { align-items: center; gap: 12px; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .info-row .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(0, 50, 125, 0.08); color: var(--color-primary); font-size: 18px; flex: 0 0 auto; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .info-row span { color: var(--color-on-surface-variant); font-size: 14px; line-height: 1.4; } /* Buttons */ body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .btn-adepr { font-size: 12px; letter-spacing: 0.12em; padding: 11px 20px; } /* ---------- Inverted Harvest Festival event card ---------- */ body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .branch-feature--inverted { border: 0; border-radius: var(--radius-xl); background: radial-gradient(700px 400px at 100% 0%, rgba(10, 76, 199, 0.45) 0%, transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(252, 212, 0, 0.18) 0%, transparent 60%), linear-gradient(135deg, #00224f 0%, #00327d 60%, #0a4cc7 100%); box-shadow: var(--shadow-primary); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .branch-feature--inverted:hover { transform: translateY(-5px); box-shadow: 0 28px 60px -12px rgba(10, 76, 199, 0.55); } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .branch-feature--inverted::before { content: ""; position: absolute; top: 0; left: 0; height: 4px; width: 100%; background: var(--gradient-secondary); z-index: 2; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .branch-feature--inverted::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 75%); z-index: 0; pointer-events: none; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .branch-feature--inverted .branch-feature__body { position: relative; z-index: 1; padding: clamp(22px, 2.5vw, 32px); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .branch-feature--inverted .card-eyebrow { background: rgba(252, 212, 0, 0.16); color: var(--color-secondary-fixed) !important; border: 1px solid rgba(252, 212, 0, 0.25); } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .branch-feature--inverted .text-h3 { font-style: italic; font-weight: 500; background: linear-gradient(180deg, #fff 0%, #ffe16d 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .branch-feature--inverted .text-body-md { color: rgba(255, 255, 255, 0.86) !important; } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .branch-feature--inverted .info-row .material-symbols-outlined { background: rgba(252, 212, 0, 0.16); color: var(--color-secondary-fixed); } body.theme-modern.page-events section[aria-labelledby="upcomingTitle"] .branch-feature--inverted .info-row span { color: rgba(255, 255, 255, 0.85); } /* ---------- Sacred Moments gallery preview ---------- */ body.theme-modern.page-events section[aria-labelledby="galleryTitle"] { padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(64px, 9vw, 112px); } body.theme-modern.page-events section[aria-labelledby="galleryTitle"] > .text-center.mb-lg { margin-bottom: clamp(40px, 6vw, 64px) !important; } body.theme-modern.page-events section[aria-labelledby="galleryTitle"] h2.text-h2 { font-style: italic; font-weight: 500; font-size: clamp(34px, 4.5vw, 56px); letter-spacing: -0.025em; line-height: 1.1; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; margin-bottom: 10px !important; } body.theme-modern.page-events section[aria-labelledby="galleryTitle"] > .text-center .text-body-md { font-size: 16px; color: var(--color-on-surface-variant); } body.theme-modern.page-events section[aria-labelledby="galleryTitle"] > .text-center .link-arrow { color: var(--color-primary); font-weight: 700; } /* Masonry items: rounded, soft shadow, modern caption */ body.theme-modern.page-events .gallery-item { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } body.theme-modern.page-events .gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } body.theme-modern.page-events .gallery-item img { filter: grayscale(100%); transition: filter var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } body.theme-modern.page-events .gallery-item:hover img { filter: grayscale(0%); transform: scale(1.04); } body.theme-modern.page-events .gallery-item figcaption { border-top: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 100%); color: var(--color-primary); padding: 32px 16px 14px; font-size: 11px; letter-spacing: 0.16em; font-weight: 700; opacity: 0; } body.theme-modern.page-events .gallery-item:hover figcaption, body.theme-modern.page-events .gallery-item:focus-within figcaption { opacity: 1; } /* CTA at bottom of gallery preview */ body.theme-modern.page-events section[aria-labelledby="galleryTitle"] > .text-center.mt-lg { margin-top: clamp(40px, 6vw, 64px) !important; } body.theme-modern.page-events section[aria-labelledby="galleryTitle"] .btn-adepr--lg { padding: 16px 32px; } /* ---------- Section spacing rhythm ---------- */ body.theme-modern.page-events main > section.mb-xl { margin-bottom: clamp(72px, 9vw, 120px) !important; } /* ============================================================================= GALLERY PAGE — premium pass (scoped via .page-gallery) ============================================================================= */ body.theme-modern.page-gallery main.container-adepr { padding-top: 0; } /* ---------- Hero (.branches-hero) ---------- */ body.theme-modern.page-gallery .branches-hero { position: relative; overflow: hidden; isolation: isolate; margin: 0 0 clamp(48px, 6vw, 80px); padding: clamp(64px, 10vh, 112px) clamp(20px, 4vw, 56px); min-height: clamp(380px, 55vh, 560px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; border-radius: var(--radius-xl); background: radial-gradient(800px 500px at 80% 20%, rgba(252, 212, 0, 0.14) 0%, transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(10, 76, 199, 0.18) 0%, transparent 60%), linear-gradient(135deg, #f5f7fb 0%, #ffffff 100%); border: 1px solid rgba(15, 23, 42, 0.05); box-shadow: var(--shadow-md); } body.theme-modern.page-gallery .branches-hero__bg { display: none; } body.theme-modern.page-gallery .branches-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 70% 30%, rgba(252, 212, 0, 0.18) 0%, transparent 60%), radial-gradient(520px 320px at 20% 80%, rgba(0, 50, 125, 0.16) 0%, transparent 60%); z-index: 0; pointer-events: none; animation: hero-drift 22s ease-in-out infinite alternate; } body.theme-modern.page-gallery .branches-hero::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 80%); z-index: 0; pointer-events: none; opacity: 0.6; } body.theme-modern.page-gallery .branches-hero > *:not(.branches-hero__bg) { position: relative; z-index: 1; } body.theme-modern.page-gallery .branches-hero .text-label-caps { display: inline-block; padding: 6px 14px; font-size: 11px; letter-spacing: 0.18em; background: rgba(252, 212, 0, 0.18); color: var(--color-secondary); border-radius: var(--radius-full); margin-bottom: 22px !important; } body.theme-modern.page-gallery .branches-hero__title { font-style: italic; font-weight: 500; font-size: clamp(46px, 7vw, 92px); letter-spacing: -0.035em; line-height: 0.98; margin-bottom: 22px !important; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; max-width: 14ch; } body.theme-modern.page-gallery .branches-hero__lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; max-width: 56ch; color: var(--color-on-surface-variant); margin: 0; } body.theme-modern.page-gallery .branches-hero > *:not(.branches-hero__bg) { opacity: 0; transform: translateY(14px); animation: hero-rise 900ms var(--ease) forwards; } body.theme-modern.page-gallery .branches-hero > *:nth-child(2) { animation-delay: 120ms; } body.theme-modern.page-gallery .branches-hero > *:nth-child(3) { animation-delay: 260ms; } body.theme-modern.page-gallery .branches-hero > *:nth-child(4) { animation-delay: 400ms; } @media (prefers-reduced-motion: reduce) { body.theme-modern.page-gallery .branches-hero > *:not(.branches-hero__bg) { opacity: 1; transform: none; animation: none; } body.theme-modern.page-gallery .branches-hero::before { animation: none; } } /* ---------- Filter pills ---------- */ body.theme-modern.page-gallery .gallery-filters { margin-bottom: clamp(32px, 4vw, 56px) !important; padding: 6px; background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.06); border-radius: var(--radius-full); box-shadow: var(--shadow-xs); display: inline-flex; flex-wrap: wrap; gap: 4px !important; margin-inline: auto; width: max-content; max-width: 100%; } body.theme-modern.page-gallery .gallery-filters .btn-adepr { border: 0; background: transparent; color: var(--color-on-surface-variant); padding: 9px 18px !important; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; border-radius: var(--radius-full); box-shadow: none; transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease); } body.theme-modern.page-gallery .gallery-filters .btn-adepr:hover { background: rgba(0, 50, 125, 0.06); color: var(--color-primary); transform: none; } body.theme-modern.page-gallery .gallery-filters .btn-adepr.is-active { background: var(--gradient-primary) !important; color: #fff !important; box-shadow: var(--shadow-primary); } body.theme-modern.page-gallery .gallery-filters .btn-adepr.is-active::after { display: none; } /* Center the filter pill group */ body.theme-modern.page-gallery section[aria-labelledby="galleryGridTitle"] > .d-flex.gallery-filters { justify-content: center; } @media (max-width: 575.98px) { body.theme-modern.page-gallery .gallery-filters { width: 100%; border-radius: var(--radius-lg); } } /* ---------- Masonry: tighter rhythm + premium tiles ---------- */ body.theme-modern.page-gallery .gallery-masonry { column-gap: clamp(14px, 1.6vw, 22px); } .gallery-item.is-hidden { display: none !important; } .gallery-item.is-new { animation: gallery-fade-in 480ms ease both; } @keyframes gallery-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } body.theme-modern.page-gallery .gallery-item { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin: 0 0 clamp(14px, 1.6vw, 22px); position: relative; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } body.theme-modern.page-gallery .gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,18,58,0) 50%, rgba(0,18,58,0.45) 100%); opacity: 0; transition: opacity var(--t-base) var(--ease); pointer-events: none; z-index: 1; } body.theme-modern.page-gallery .gallery-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } body.theme-modern.page-gallery .gallery-item:hover::after, body.theme-modern.page-gallery .gallery-item:focus-within::after { opacity: 1; } body.theme-modern.page-gallery .gallery-item img { filter: grayscale(100%); transition: filter var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } body.theme-modern.page-gallery .gallery-item:hover img { filter: grayscale(0%); transform: scale(1.04); } /* Caption: glass pill anchored bottom-left, fades on hover */ body.theme-modern.page-gallery .gallery-item figcaption { position: absolute; inset: auto auto 12px 12px; bottom: 12px; left: 12px; right: auto; background: rgba(255, 255, 255, 0.92); border: 0; border-radius: var(--radius-full); padding: 7px 14px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--color-primary); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); z-index: 2; } body.theme-modern.page-gallery .gallery-item:hover figcaption, body.theme-modern.page-gallery .gallery-item:focus-within figcaption { opacity: 1; transform: none; } /* Tiny tap target on mobile — caption always visible (no hover) */ @media (hover: none) { body.theme-modern.page-gallery .gallery-item figcaption { opacity: 1; transform: none; } } /* ---------- LOAD MORE CTA ---------- */ body.theme-modern.page-gallery section[aria-labelledby="galleryGridTitle"] > .text-center.mt-lg { margin-top: clamp(40px, 6vw, 72px) !important; } body.theme-modern.page-gallery section[aria-labelledby="galleryGridTitle"] .btn-adepr--lg { padding: 16px 32px; font-size: 13px; letter-spacing: 0.14em; } /* ---------- Section spacing ---------- */ body.theme-modern.page-gallery main > section[aria-labelledby="galleryGridTitle"] { padding-bottom: clamp(56px, 8vw, 96px); } /* Masonry column count override on very large screens — 4 columns */ @media (min-width: 1400px) { body.theme-modern.page-gallery .gallery-masonry { column-count: 4; } } /* ============================================================================= CONTACT PAGE — premium pass (scoped via .page-contact) ============================================================================= */ /* ---------- Cinematic life-hero ---------- */ body.theme-modern.page-contact .life-hero { height: auto; min-height: calc(100vh - var(--header-height)); min-height: calc(100dvh - var(--header-height)); background: var(--color-primary); isolation: isolate; padding: clamp(48px, 8vh, 96px) var(--space-margin); } @media (max-width: 767.98px) { body.theme-modern.page-contact .life-hero { min-height: calc(100vh - var(--header-height) - var(--bottom-nav-height)); min-height: calc(100dvh - var(--header-height) - var(--bottom-nav-height)); } } body.theme-modern.page-contact .life-hero__media { opacity: 1; } body.theme-modern.page-contact .life-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); animation: hero-zoom 22s ease-in-out infinite alternate; } body.theme-modern.page-contact .life-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(0,18,58,0.92) 0%, rgba(0,50,125,0.78) 38%, rgba(10,76,199,0.42) 78%, rgba(252,212,0,0.18) 100%), radial-gradient(700px 400px at 12% 100%, rgba(252, 212, 0, 0.18) 0%, transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(10, 76, 199, 0.35) 0%, transparent 60%); z-index: 1; pointer-events: none; animation: hero-drift 22s ease-in-out infinite alternate; } body.theme-modern.page-contact .life-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px), url("data:image/svg+xml;utf8,"); background-size: 40px 40px, 40px 40px, 200px 200px; mask-image: radial-gradient(ellipse at 28% 50%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 28% 50%, black 0%, transparent 75%); z-index: 1; pointer-events: none; } body.theme-modern.page-contact .life-hero__content { position: relative; z-index: 2; text-align: left; max-width: 1320px; width: 100%; margin-inline: auto; padding: 0; } body.theme-modern.page-contact .life-hero__chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-full); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11px; letter-spacing: 0.18em; font-weight: 700; margin-bottom: 22px; } body.theme-modern.page-contact .life-hero__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary-container); box-shadow: 0 0 0 3px rgba(252, 212, 0, 0.25); } body.theme-modern.page-contact .life-hero__title { color: #fff; font-style: italic; font-weight: 500; font-size: clamp(46px, 7vw, 96px); letter-spacing: -0.035em; line-height: 0.98; margin-bottom: 22px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18); max-width: 18ch; } body.theme-modern.page-contact .life-hero__lead { color: var(--color-primary-fixed); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; max-width: 56ch; margin: 0; opacity: 0.92; } body.theme-modern.page-contact .life-hero__content > * { opacity: 0; transform: translateY(14px); animation: hero-rise 900ms var(--ease) forwards; } body.theme-modern.page-contact .life-hero__content > *:nth-child(1) { animation-delay: 120ms; } body.theme-modern.page-contact .life-hero__content > *:nth-child(2) { animation-delay: 260ms; } body.theme-modern.page-contact .life-hero__content > *:nth-child(3) { animation-delay: 400ms; } @media (prefers-reduced-motion: reduce) { body.theme-modern.page-contact .life-hero__content > * { opacity: 1; transform: none; animation: none; } body.theme-modern.page-contact .life-hero__media img, body.theme-modern.page-contact .life-hero::before { animation: none; } } /* ---------- Section watermarks 01 / 02 ---------- */ body.theme-modern.page-contact main { counter-reset: section; } body.theme-modern.page-contact main > section.container-adepr { counter-increment: section; position: relative; overflow: hidden; } body.theme-modern.page-contact main > section.container-adepr::before { content: counter(section, decimal-leading-zero); position: absolute; top: clamp(24px, 5vw, 48px); right: clamp(16px, 4vw, 56px); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(120px, 18vw, 220px); letter-spacing: -0.04em; line-height: 1; color: transparent; background: linear-gradient(180deg, rgba(0, 50, 125, 0.08), rgba(0, 50, 125, 0)); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; z-index: 0; } body.theme-modern.page-contact main > section.container-adepr > * { position: relative; z-index: 1; } /* ---------- Card-bordered base treatment for contact page ---------- */ body.theme-modern.page-contact .card-bordered { border: 1px solid rgba(15, 23, 42, 0.06); border-radius: var(--radius-xl); background: var(--gradient-surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } body.theme-modern.page-contact .card-bordered::before { height: 4px; background: var(--gradient-secondary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } body.theme-modern.page-contact .card-bordered--no-accent { box-shadow: var(--shadow-xs); } body.theme-modern.page-contact .card-bordered--no-accent::before { display: none; } body.theme-modern.page-contact .card-bordered--no-accent:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } body.theme-modern.page-contact .card-bordered__body { padding: clamp(24px, 3vw, 40px); } /* mb-gutter shim for the form-card spacing inside the left column */ body.theme-modern.page-contact .col-lg-7 > .card-bordered.mb-gutter { margin-bottom: var(--space-gutter); } /* ---------- Prayer Request form card ---------- */ body.theme-modern.page-contact .card-bordered .d-flex.align-items-center.gap-sm { gap: 14px !important; margin-bottom: 18px !important; } /* Icon → circular tinted well */ body.theme-modern.page-contact .card-bordered > .card-bordered__body > .d-flex.align-items-center.gap-sm > .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(0, 50, 125, 0.08); color: var(--color-primary) !important; font-size: 26px; } /* Giving card icon — gold tint */ body.theme-modern.page-contact .card-bordered > .card-bordered__body > .d-flex.align-items-center.gap-sm > .material-symbols-outlined.text-secondary-adepr { background: rgba(252, 212, 0, 0.18); color: var(--color-secondary) !important; } body.theme-modern.page-contact .card-bordered .text-h2 { font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.02em; line-height: 1.1; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* Italic verse */ body.theme-modern.page-contact .card-bordered .text-body-md.fst-italic { font-family: var(--font-display); font-style: italic; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; padding-left: 16px; border-left: 2px solid var(--color-secondary-container); color: var(--color-on-surface-variant); margin-bottom: clamp(28px, 3vw, 40px) !important; } /* ---------- Form fields ---------- */ body.theme-modern.page-contact form .form-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--color-on-surface-variant); margin-bottom: 8px !important; } body.theme-modern.page-contact form .form-control, body.theme-modern.page-contact form .form-select { border: 1px solid rgba(15, 23, 42, 0.1) !important; border-radius: var(--radius-lg) !important; padding: 12px 16px !important; background: #fff; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--color-on-surface); box-shadow: var(--shadow-xs); transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } body.theme-modern.page-contact form .form-control::placeholder { color: rgba(15, 23, 42, 0.4); } body.theme-modern.page-contact form .form-control:focus, body.theme-modern.page-contact form .form-select:focus { outline: none; border-color: rgba(0, 50, 125, 0.4) !important; box-shadow: var(--ring-focus), var(--shadow-sm); } body.theme-modern.page-contact form textarea.form-control { min-height: 140px; resize: vertical; } /* Custom select chevron */ body.theme-modern.page-contact form .form-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; padding-right: 40px !important; } /* Custom checkbox */ body.theme-modern.page-contact form .form-check { padding-left: 0; display: flex; align-items: flex-start; gap: 10px; margin-left: 0 !important; } body.theme-modern.page-contact form .form-check-input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 2px 0 0 0; border: 1.5px solid rgba(15, 23, 42, 0.25); border-radius: 5px; background: #fff; cursor: pointer; transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); position: relative; flex: 0 0 auto; } body.theme-modern.page-contact form .form-check-input:checked { background: var(--gradient-primary); border-color: var(--color-primary); } body.theme-modern.page-contact form .form-check-input:checked::after { content: ""; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } body.theme-modern.page-contact form .form-check-input:focus-visible { outline: none; box-shadow: var(--ring-focus); } body.theme-modern.page-contact form .form-check-label { font-size: 14px; line-height: 1.55; cursor: pointer; } /* Submit button */ body.theme-modern.page-contact form .btn-adepr.w-100 { border-radius: var(--radius-full); padding: 16px 32px; font-size: 13px; letter-spacing: 0.14em; margin-top: 6px; } /* ---------- Visit Us + Office Hours info cards ---------- */ body.theme-modern.page-contact .col-lg-7 .row.g-gutter .card-bordered--no-accent .card-bordered__body { padding: clamp(20px, 2.4vw, 28px) !important; } body.theme-modern.page-contact .col-lg-7 .card-bordered--no-accent .text-h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-primary); margin-bottom: 14px !important; } /* Info-rows in Visit Us */ body.theme-modern.page-contact .col-lg-7 .card-bordered--no-accent .info-row { align-items: center; gap: 12px; padding: 8px 0; } body.theme-modern.page-contact .col-lg-7 .card-bordered--no-accent .info-row .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(0, 50, 125, 0.08); color: var(--color-primary); font-size: 18px; flex: 0 0 auto; } body.theme-modern.page-contact .col-lg-7 .card-bordered--no-accent .info-row span { display: block; color: var(--color-on-surface-variant); font-size: 14px; line-height: 1.5; } /* Office hours list */ body.theme-modern.page-contact .col-lg-7 .card-bordered--no-accent ul.list-unstyled-clean li { padding: 10px 0; border-bottom: 1px solid rgba(15, 23, 42, 0.06); font-size: 14px; } body.theme-modern.page-contact .col-lg-7 .card-bordered--no-accent ul.list-unstyled-clean li:last-child { border-bottom: 0; } body.theme-modern.page-contact .col-lg-7 .card-bordered--no-accent ul.list-unstyled-clean li > span:first-child { color: var(--color-on-surface); font-weight: 600; } body.theme-modern.page-contact .col-lg-7 .card-bordered--no-accent ul.list-unstyled-clean li > span:last-child { color: var(--color-primary); font-weight: 700; font-feature-settings: "tnum"; } /* ---------- Giving card ---------- */ body.theme-modern.page-contact .col-lg-5 .card-bordered { border-width: 1px !important; box-shadow: var(--shadow-md); position: sticky; top: calc(var(--header-height) + 20px); } body.theme-modern.page-contact .col-lg-5 .card-bordered::before { background: var(--gradient-secondary); } /* Give-options — refined cards */ body.theme-modern.page-contact .give-option { border: 1px solid rgba(15, 23, 42, 0.08); border-radius: var(--radius-lg); padding: 14px 16px; gap: 14px; background: #fff; transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } body.theme-modern.page-contact .give-option:hover { border-color: rgba(0, 50, 125, 0.3); transform: translateY(-2px); box-shadow: var(--shadow-sm); } body.theme-modern.page-contact .give-option--gold { background: linear-gradient(135deg, rgba(252, 212, 0, 0.12), rgba(252, 212, 0, 0.04)); border-color: rgba(252, 212, 0, 0.3); } body.theme-modern.page-contact .give-option--gold:hover { border-color: rgba(252, 212, 0, 0.55); } body.theme-modern.page-contact .give-option__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(0, 50, 125, 0.08); font-size: 22px !important; flex: 0 0 auto; } body.theme-modern.page-contact .give-option--gold .give-option__icon { background: rgba(252, 212, 0, 0.16); } body.theme-modern.page-contact .give-option__text strong { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-on-surface); } body.theme-modern.page-contact .give-option__text span { color: var(--color-on-surface-variant); font-size: 13px; line-height: 1.45; } body.theme-modern.page-contact .give-option__chev { font-size: 22px; color: var(--color-on-surface-variant); } /* Quick support pill row */ body.theme-modern.page-contact .col-lg-5 .text-label-caps.text-secondary-adepr { display: inline-block; padding: 5px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; background: rgba(252, 212, 0, 0.18); color: var(--color-secondary); border-radius: var(--radius-full); margin-bottom: 12px !important; } body.theme-modern.page-contact .col-lg-5 .row.g-sm .btn-adepr { padding: 10px 12px; font-size: 14px; font-weight: 700; letter-spacing: 0; font-family: var(--font-body); } body.theme-modern.page-contact .col-lg-5 .row.g-sm .btn-adepr:hover { background: rgba(0, 50, 125, 0.06); border-color: rgba(0, 50, 125, 0.2); color: var(--color-primary); } /* DONATE NOW button */ body.theme-modern.page-contact .col-lg-5 .btn-adepr--secondary.w-100 { border-radius: var(--radius-full); padding: 16px 32px; font-size: 13px; letter-spacing: 0.14em; } /* Verse quote card */ body.theme-modern.page-contact .col-lg-5 .bg-surface-container-low { background: linear-gradient(135deg, rgba(252, 212, 0, 0.1) 0%, rgba(0, 50, 125, 0.04) 100%) !important; border: 1px solid rgba(252, 212, 0, 0.2); border-radius: var(--radius-lg); padding: 18px 22px !important; margin-top: clamp(20px, 2.5vw, 32px) !important; } body.theme-modern.page-contact .col-lg-5 .bg-surface-container-low p { font-family: var(--font-display); font-style: italic; font-size: 14px !important; line-height: 1.55; color: var(--color-on-surface-variant); } /* ---------- Find Your Local Branch ---------- */ body.theme-modern.page-contact main > section.container-adepr.pb-xl { padding-bottom: clamp(72px, 10vw, 120px); } body.theme-modern.page-contact .container-adepr.pb-xl .card-bordered--no-accent { border: 1px solid rgba(15, 23, 42, 0.06); background: radial-gradient(700px 400px at 90% 10%, rgba(0, 50, 125, 0.06) 0%, transparent 60%), var(--gradient-surface); box-shadow: var(--shadow-md); } body.theme-modern.page-contact .container-adepr.pb-xl .card-bordered__body { padding: clamp(32px, 4vw, 56px) !important; } body.theme-modern.page-contact .container-adepr.pb-xl h2.text-h2 { font-style: italic; font-weight: 500; font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.025em; line-height: 1.1; background: linear-gradient(180deg, var(--color-primary) 0%, #0a4cc7 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; margin-bottom: 18px !important; } body.theme-modern.page-contact .container-adepr.pb-xl .text-body-lg { color: var(--color-on-surface-variant); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; margin-bottom: 24px !important; } /* Map */ body.theme-modern.page-contact .container-adepr.pb-xl .find-branch__map { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; position: relative; } body.theme-modern.page-contact .container-adepr.pb-xl .find-branch__map img { transition: transform 1.6s var(--ease); } body.theme-modern.page-contact .container-adepr.pb-xl .find-branch__map:hover img { transform: scale(1.05); } /* ---------- Responsive layout tightening ---------- */ @media (max-width: 991.98px) { body.theme-modern.page-contact .col-lg-5 .card-bordered { position: static; margin-top: 24px; } } @media (max-width: 575.98px) { body.theme-modern.page-contact .col-lg-5 .row.g-sm > [class*="col-"] { margin-bottom: 8px; } }