:root { --ink: #15110b; --muted: #625642; --paper: #fffaf0; --cream: #f6edda; --gold: #d6a529; --gold-2: #ffe38a; --black: #090806; --line: rgba(129, 94, 22, .26); --card: rgba(255, 252, 244, .86); --shadow: 0 10px 22px rgba(38, 24, 6, .13); --radius: 16px; color-scheme: light; /* Theme system tokens */ --bg-primary: #faf8f4; --bg-secondary: #f5f0e8; --bg-card: #ffffff; --bg-header: rgba(255, 250, 238, 0.52); --bg-footer: #090806; --text-primary: #15110b; --text-secondary: #625642; --text-muted: #8a670f; --text-inverse: #faf8f4; --accent-gold: #d6a529; --accent-gold-light: #ffe38a; --border-subtle: rgba(145, 107, 25, 0.28); --border-card: rgba(207, 165, 58, 0.34); --shadow-card: 0 10px 22px rgba(38, 24, 6, 0.13); --overlay-dark: rgba(10, 8, 4, 0.55); --mobile-nav-bg: rgba(255, 250, 238, 0.97); --mobile-nav-text: #15110b; --mobile-nav-active: #d6a529; --pill-bg: #f5e4a0; --pill-text: #090806; --transition-theme: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; --site-header-height: 76px; --hero-min-height: 100vh; --hero-min-height: 100svh; --hero-min-height: 100dvh; } [data-theme="dark"] { color-scheme: dark; --bg-primary: #0b0905; --bg-secondary: #15110b; --bg-card: #1b160d; --bg-header: rgba(10, 8, 4, 0.72); --bg-footer: #070604; --text-primary: #fff6dd; --text-secondary: #dccda9; --text-muted: #c8a85a; --text-inverse: #0b0905; --accent-gold: #e6c870; --accent-gold-light: #ffe38a; --border-subtle: rgba(255, 219, 111, 0.28); --border-card: rgba(255, 219, 111, 0.22); --shadow-card: 0 10px 22px rgba(0, 0, 0, 0.35); --overlay-dark: rgba(10, 8, 4, 0.72); --mobile-nav-bg: rgba(10, 8, 4, 0.97); --mobile-nav-text: #fff6dd; --mobile-nav-active: #ffe38a; --pill-bg: #1a1710; --pill-text: #fff6dd; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Trebuchet MS", "Aptos", system-ui, sans-serif; color: var(--ink); overflow-x: hidden; background: radial-gradient(circle at top right, rgba(255, 230, 143, .42), transparent 34rem), linear-gradient(180deg, #fffaf0 0%, #f3ead7 55%, #fffaf1 100%); } /* Anti-flash: applied via data-theme on before body class is set by JS */ html[data-theme="dark"] body { --ink: #fff6dd; --muted: #dccda9; --paper: #0b0905; --cream: #15110b; --card: rgba(27, 22, 13, .9); --line: rgba(255, 219, 111, .24); color: #fff6dd; background: radial-gradient(circle at top right, rgba(214, 165, 41, .28), transparent 34rem), linear-gradient(180deg, #070604 0%, #161006 58%, #090806 100%); } html[data-theme="dark"] .site-header { background: rgba(8, 6, 3, .72); border-bottom-color: rgba(214, 165, 41, .22); } html[data-theme="dark"] .mobile-bottom { background: rgba(8, 6, 3, .88); border-top-color: rgba(214, 165, 41, .18); } a { color: inherit; } img, video { max-width: 100%; display: block; } video { width: 100%; margin-top: 16px; border-radius: 14px; background: #090806; } button, a { -webkit-tap-highlight-color: transparent; } .page-shell { position: relative; z-index: 1; overflow: clip; } .site-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 76px; padding: max(12px, env(safe-area-inset-top, 0px)) clamp(18px, 4vw, 56px) 12px; border-bottom: 1px solid rgba(207, 165, 58, .32); background: rgba(255, 250, 238, .56); backdrop-filter: blur(16px); box-shadow: 0 6px 18px rgba(48, 34, 7, .06); } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; } .brand img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(222, 184, 78, .72); box-shadow: 0 0 0 4px rgba(255, 236, 166, .24); } .brand b { display: block; font-family: Georgia, "Times New Roman", serif; font-size: clamp(17px, 1.8vw, 24px); line-height: 1; } .brand span { display: block; margin-top: 2px; color: #8a670f; font-size: 11px; font-weight: 900; text-transform: uppercase; } .nav { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px; border: 1px solid rgba(159, 114, 20, .22); border-radius: 999px; background: rgba(255, 255, 255, .54); } .nav a { text-decoration: none; padding: 11px 15px; border-radius: 999px; color: #2a2317; font-size: 14px; font-weight: 850; } .nav a[aria-current="page"], .nav a:hover { background: #11100e; color: #ffe792; } .nav a[href*="phase-1"] { background: linear-gradient(180deg, #fff1a7 0%, #e3af30 78%); color: #090806; box-shadow: inset 0 1px 0 rgba(255,255,255,.72); } .main-nav { gap: 2px; padding: 6px; } .main-nav a { padding: 9px 9px; font-size: 12.5px; } .jubilee-nav { gap: 6px; } .header-actions { justify-self: end; display: flex; align-items: center; gap: 12px; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border-subtle); background: var(--bg-card); color: var(--text-primary); cursor: pointer; flex-shrink: 0; padding: 0; transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease, color 0.3s ease; position: relative; overflow: hidden; } .theme-toggle:hover { transform: scale(1.08); border-color: var(--accent-gold); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { position: absolute; transition: opacity 0.3s ease, transform 0.4s ease; } .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); } [data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.6); } [data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } body.dark-mode .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.6); } body.dark-mode .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } body.dark-mode { --ink: #fff6dd; --muted: #dccda9; --paper: #0b0905; --cream: #15110b; --card: rgba(27, 22, 13, .9); --line: rgba(255, 219, 111, .24); color: var(--ink); background: radial-gradient(circle at top right, rgba(214, 165, 41, .28), transparent 34rem), linear-gradient(180deg, #070604 0%, #161006 58%, #090806 100%); } body.dark-mode .theme-toggle { background: #1a1710; border-color: rgba(255, 223, 129, .36); color: #fff6dd; } body.dark-mode .site-header, body.dark-mode .mobile-bottom, body.dark-mode .nav { background: rgba(10, 8, 4, .68); } body.dark-mode .brand b, body.dark-mode .nav a, body.dark-mode .nav::before, body.dark-mode .mobile-bottom a, body.dark-mode .feature-card p, body.dark-mode .event-card p, body.dark-mode .prayer-card p, body.dark-mode .live-card p, body.dark-mode .section-lede, body.dark-mode .admin-card p, body.dark-mode .ministry-detail p, body.dark-mode .action-card p, body.dark-mode .info-card p, body.dark-mode .event-topic p, body.dark-mode .admin-note { color: var(--ink); } body.dark-mode .feature-card, body.dark-mode .event-card, body.dark-mode .prayer-card, body.dark-mode .live-card, body.dark-mode .year-panel, body.dark-mode .modal-card, body.dark-mode .admin-card, body.dark-mode .ministry-detail, body.dark-mode .admin-login, body.dark-mode .action-card, body.dark-mode .info-card, body.dark-mode .event-topic, body.dark-mode .form-panel, body.dark-mode .timeline-list { background: rgba(19, 15, 8, .94); } body.dark-mode .form-field, body.dark-mode .form-field input, body.dark-mode .form-field select, body.dark-mode .form-field textarea, body.dark-mode .steps-list li, body.dark-mode .stat-chip, body.dark-mode .timeline-item { color: var(--ink); background: rgba(16, 12, 6, .82); } body.dark-mode .resource-link, [data-theme="dark"] .resource-link { color: #f5edd8; background: rgba(20, 16, 8, 0.92); border-color: rgba(230, 200, 112, 0.2); } body.dark-mode .resource-link span, [data-theme="dark"] .resource-link span { color: #e6c870; } .pill-btn, .gold-btn, .dark-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 950; letter-spacing: 0; border: 1px solid rgba(120, 84, 10, .45); transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1); position: relative; overflow: hidden; } .gold-btn, .pill-btn { color: #090806; background: linear-gradient(180deg, #fff1a7 0%, #e3af30 72%, #c89018 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 14px 28px rgba(185, 132, 23, .24); } .header-actions .pill-btn, .give-mini { min-height: 46px; padding: 0 22px; border-radius: 999px; border-color: rgba(96, 61, 3, .28); color: #161006; background: linear-gradient(180deg, rgba(255, 246, 191, .98) 0%, rgba(227, 175, 48, .92) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 9px 20px rgba(120, 81, 8, .16); text-transform: none; font-weight: 900; letter-spacing: .01em; } .header-actions .pill-btn:hover, .give-mini:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 14px 28px rgba(120, 81, 8, .22); } .gold-btn::after, .pill-btn::after, .dark-btn::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transition: transform .52s cubic-bezier(.2,.8,.2,1); } .dark-btn { color: #fff2bf; background: linear-gradient(180deg, #272015 0%, #080604 100%); box-shadow: inset 0 0 0 1px rgba(255, 213, 99, .24), 0 14px 28px rgba(0,0,0,.2); } .pill-btn:hover, .gold-btn:hover, .dark-btn:hover { transform: translateY(-2px); } .pill-btn:hover::after, .gold-btn:hover::after, .dark-btn:hover::after { transform: translateX(120%) skewX(-18deg); } .menu-toggle { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(145, 107, 25, .28); background: rgba(255,255,255,.76); font-weight: 950; font-size: 0; position: relative; cursor: pointer; } .menu-toggle::before, .menu-toggle::after, .menu-toggle span { content: ""; position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 999px; background: #15110b; transition: transform .22s cubic-bezier(.2,.8,.2,1), top .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease; } .menu-toggle::before { top: 15px; } .menu-toggle span { top: 23px; } .menu-toggle::after { top: 31px; } .menu-toggle[aria-expanded="true"]::before { top: 23px; transform: rotate(45deg); } .menu-toggle[aria-expanded="true"] span { opacity: 0; } .menu-toggle[aria-expanded="true"]::after { top: 23px; transform: rotate(-45deg); } body.dark-mode .menu-toggle { background: rgba(255,255,255,.14); } body.dark-mode .menu-toggle::before, body.dark-mode .menu-toggle::after, body.dark-mode .menu-toggle span { background: #ffe38a; } .hero, .page-hero { min-height: var(--hero-min-height); } .hero { display: grid; align-items: center; margin-top: calc(-1 * var(--site-header-height)); padding: calc(var(--site-header-height) + clamp(28px, 5vw, 72px)) clamp(20px, 6vw, 94px) clamp(40px, 7vw, 96px); background: linear-gradient(90deg, rgba(255,250,240,.83) 0%, rgba(255,250,240,.58) 48%, rgba(255,250,240,.22) 100%), url("images/church-family.jpg") center / cover no-repeat; } body.jubilee-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.81) 0%, rgba(255,250,240,.56) 45%, rgba(255,250,240,.16) 100%), url("images/_church_zip_tmp/Prayer%20mountain.jpg") center / cover no-repeat; } body.events-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.67) 0%, rgba(255,250,240,.42) 48%, rgba(255,250,240,.03) 100%), url("images/jubilee-invitation.jpg") right center / min(46vw, 560px) no-repeat, url("images/church-family.jpg") center / cover no-repeat; } body.live-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.82) 0%, rgba(255,250,240,.56) 48%, rgba(255,250,240,.16) 100%), url("images/worship-moment.jpg") center / cover no-repeat; } body.ministry-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.82) 0%, rgba(255,250,240,.58) 48%, rgba(255,250,240,.18) 100%), url("../../phase-1/assets/IMG_9876.JPG") center / cover no-repeat; } body.ministries-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/IMG_9876.JPG") center / cover no-repeat; } body.ministries-page .hero h1 { color: #1a1710; text-shadow: none; } body.ministries-page .hero .eyebrow { color: #1a1710; } body.ministries-page .hero .eyebrow::before { background: linear-gradient(90deg, transparent, #1a1710); } body.ministries-page .hero .hero-copy { color: #1a1710; } /* Dark mode: restore gold hero text for ministries page */ body.dark-mode.ministries-page .hero h1, [data-theme="dark"] body.ministries-page .hero h1 { color: #ffe38a !important; text-shadow: 0 2px 12px rgba(0,0,0,.4) !important; } body.dark-mode.ministries-page .hero .eyebrow, [data-theme="dark"] body.ministries-page .hero .eyebrow { color: #d6a529 !important; } body.dark-mode.ministries-page .hero .eyebrow::before, [data-theme="dark"] body.ministries-page .hero .eyebrow::before { background: linear-gradient(90deg, transparent, #d6a529) !important; } body.dark-mode.ministries-page .hero .hero-copy, [data-theme="dark"] body.ministries-page .hero .hero-copy { color: #f0dfb4 !important; } body.admin-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.82) 0%, rgba(255,250,240,.64) 56%, rgba(255,250,240,.30) 100%), url("images/jubilee-logo-color.png") right 8% center / min(34vw, 420px) no-repeat, url("images/church-family.jpg") center / cover no-repeat; } body.prayer-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.81) 0%, rgba(255,250,240,.56) 48%, rgba(255,250,240,.15) 100%), url("images/IMG_9563.JPG") center / cover no-repeat; } body.media-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.81) 0%, rgba(255,250,240,.56) 48%, rgba(255,250,240,.15) 100%), url("../../phase-1/assets/P1230253.JPG") center / cover no-repeat; } body.giving-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.82) 0%, rgba(255,250,240,.58) 48%, rgba(255,250,240,.18) 100%), url("images/jubilee-souvenir.jpg") center / cover no-repeat; } body.main-events-page .hero, body.belief-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.82) 0%, rgba(255,250,240,.58) 48%, rgba(255,250,240,.20) 100%), url("images/church-family.jpg") center / cover no-repeat; } body.contact-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.72) 0%, rgba(255,250,240,.48) 48%, rgba(255,250,240,.14) 100%), url("images/P1100434.jpg") center top / cover no-repeat; } body.history-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.82) 0%, rgba(255,250,240,.58) 48%, rgba(255,250,240,.20) 100%), url("images/IMG_0749.JPG") center / cover no-repeat; } body.reservation-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.82) 0%, rgba(255,250,240,.58) 48%, rgba(255,250,240,.20) 100%), url("images/grand-hall-2.jpg") center / cover no-repeat; } /* ── Dark Mode Hero Backgrounds ─────────────────────────── */ body.dark-mode .hero { background: linear-gradient(90deg, rgba(6,4,1,.88) 0%, rgba(6,4,1,.72) 48%, rgba(6,4,1,.44) 100%), url("images/church-family.jpg") center / cover no-repeat; } body.dark-mode.jubilee-page .hero { background: linear-gradient(90deg, rgba(6,4,1,.86) 0%, rgba(6,4,1,.68) 48%, rgba(6,4,1,.36) 100%), url("images/_church_zip_tmp/Prayer%20mountain.jpg") center / cover no-repeat; } body.dark-mode.events-page .hero { background: linear-gradient(90deg, rgba(6,4,1,.73) 0%, rgba(6,4,1,.55) 48%, rgba(6,4,1,.23) 100%), url("images/jubilee-invitation.jpg") right center / min(46vw, 560px) no-repeat, url("images/church-family.jpg") center / cover no-repeat; } body.dark-mode.live-page .hero { background: linear-gradient(90deg, rgba(6,4,1,.88) 0%, rgba(6,4,1,.70) 48%, rgba(6,4,1,.40) 100%), url("images/worship-moment.jpg") center / cover no-repeat; } body.dark-mode.ministry-page .hero { background: linear-gradient(90deg, rgba(6,4,1,.88) 0%, rgba(6,4,1,.70) 48%, rgba(6,4,1,.38) 100%), url("../../phase-1/assets/IMG_9876.JPG") center / cover no-repeat; } body.dark-mode.ministries-page .hero { background: linear-gradient(90deg, rgba(4,3,1,.88) 0%, rgba(6,4,1,.70) 48%, rgba(6,4,1,.40) 100%), url("../../phase-1/assets/IMG_9876.JPG") center / cover no-repeat; } body.dark-mode.admin-page .hero { background: linear-gradient(90deg, rgba(6,4,1,.88) 0%, rgba(6,4,1,.74) 56%, rgba(6,4,1,.46) 100%), url("images/jubilee-logo-color.png") right 8% center / min(34vw, 420px) no-repeat, url("images/church-family.jpg") center / cover no-repeat; } body.dark-mode.prayer-page .hero { background: linear-gradient(90deg, rgba(6,4,1,.88) 0%, rgba(6,4,1,.70) 48%, rgba(6,4,1,.38) 100%), url("images/IMG_9563.JPG") center / cover no-repeat; } body.dark-mode.media-page .hero { background: linear-gradient(90deg, rgba(6,4,1,.88) 0%, rgba(6,4,1,.70) 48%, rgba(6,4,1,.38) 100%), url("../../phase-1/assets/P1230253.JPG") center / cover no-repeat; } body.dark-mode.giving-page .hero { background: linear-gradient(90deg, rgba(6,4,1,.88) 0%, rgba(6,4,1,.70) 48%, rgba(6,4,1,.38) 100%), url("images/jubilee-souvenir.jpg") center / cover no-repeat; } body.dark-mode.main-events-page .hero, body.dark-mode.belief-page .hero { background: linear-gradient(90deg, rgba(6,4,1,.88) 0%, rgba(6,4,1,.70) 48%, rgba(6,4,1,.38) 100%), url("images/church-family.jpg") center / cover no-repeat; } body.dark-mode.contact-page .hero { background: linear-gradient(90deg, rgba(6,4,1,.88) 0%, rgba(6,4,1,.70) 48%, rgba(6,4,1,.38) 100%), url("images/P1100434.jpg") center top / cover no-repeat; } body.dark-mode.history-page .hero { background: linear-gradient(90deg, rgba(6,4,1,.88) 0%, rgba(6,4,1,.70) 48%, rgba(6,4,1,.38) 100%), url("images/IMG_0749.JPG") center / cover no-repeat; } body.dark-mode.reservation-page .hero { background: linear-gradient(90deg, rgba(6,4,1,.88) 0%, rgba(6,4,1,.70) 48%, rgba(6,4,1,.38) 100%), url("images/grand-hall-2.jpg") center / cover no-repeat; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(330px, .74fr); gap: clamp(28px, 5vw, 76px); align-items: center; width: min(1180px, 100%); margin: 0 auto; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; color: #8a650d; font-size: 14px; font-weight: 950; text-transform: uppercase; } .eyebrow::before { content: ""; width: 52px; height: 2px; background: linear-gradient(90deg, transparent, #d7a824); } h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0; } .hero h1 { max-width: 820px; margin: 20px 0 18px; font-size: clamp(52px, 8vw, 96px); line-height: .94; color: #191109; text-shadow: 0 1px 0 #ffe7a0, 0 10px 22px rgba(99, 67, 5, .16); text-wrap: balance; } .gold-flow { background-image: linear-gradient( 100deg, #c88a14 0%, #f5c842 18%, #fff6c0 36%, #ffd84d 50%, #fff8d0 64%, #e8a820 82%, #c88a14 100% ); background-size: 250% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: goldFlow 3.8s ease-in-out infinite; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.72)) drop-shadow(0 1px 2px rgba(0,0,0,0.9)); } @keyframes goldFlow { 0% { background-position: 200% center; } 100% { background-position: -40% center; } } body.dark-mode .hero .gold-flow { background-image: linear-gradient( 100deg, #ffe08a 0%, #fff4c2 20%, #ffffff 38%, #ffd84d 52%, #fff4c2 66%, #f5c842 84%, #ffe08a 100% ); filter: drop-shadow(0 4px 28px rgba(0,0,0,0.85)) drop-shadow(0 2px 4px rgba(0,0,0,0.95)); } body.dark-mode .hero h1 { color: #ffe08a; text-shadow: 0 1px 0 #5d4108, 0 12px 28px rgba(0,0,0,.45); } body.dark-mode .hero .eyebrow { color: #d6a52a; } body.dark-mode .hero .eyebrow::before { background: linear-gradient(90deg, transparent, #d6a52a); } body.dark-mode .hero-copy { color: #f0dfb4; } /* dark-mode gold-flow now defined inline with the .gold-flow block above */ .hero-copy { max-width: 760px; font-size: clamp(19px, 2vw, 25px); line-height: 1.55; font-weight: 750; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero-card { border-radius: 18px; padding: clamp(22px, 3vw, 38px); background: rgba(255, 252, 244, .86); color: #1d1608; border: 1px solid rgba(207, 165, 58, .34); box-shadow: var(--shadow); } .hero-card img { width: min(280px, 76%); margin: 0 auto 24px; filter: drop-shadow(0 12px 22px rgba(0,0,0,.25)); } .launch-panel { padding: 24px; border-radius: 14px; background: linear-gradient(160deg, rgba(255,237,172,.70), rgba(255,255,255,.80)); border: 1px solid rgba(160, 111, 18, .26); } .launch-panel b { display: block; color: #8a650d; text-transform: uppercase; margin-bottom: 10px; text-shadow: 0 0 18px rgba(255,221,107,.8); } .launch-panel strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; } .launch-panel p { color: #514737; } body.dark-mode .hero-card { background: rgba(12, 9, 4, .9); color: #fff5d1; border-color: rgba(255, 216, 99, .28); } body.dark-mode .launch-panel { background: linear-gradient(160deg, rgba(255,221,107,.12), rgba(0,0,0,.42)); border-color: rgba(255, 217, 95, .3); } body.dark-mode .launch-panel b { color: var(--gold-2); } body.dark-mode .launch-panel p { color: #f3e7c5; } .section { padding: clamp(54px, 8vw, 108px) clamp(20px, 6vw, 94px); } .section.gold-wash { background: radial-gradient(circle at top left, rgba(255, 224, 126, .24), transparent 30rem), linear-gradient(180deg, rgba(255, 250, 240, .92), rgba(246, 237, 218, .96)); } body.dark-mode .section.gold-wash { background: radial-gradient(circle at top left, rgba(255, 224, 126, .12), transparent 26rem), linear-gradient(180deg, rgba(16, 12, 6, .98), rgba(9, 8, 6, .98)); } .section.photo-wash { background: linear-gradient(90deg, rgba(255,250,240,.92), rgba(255,250,240,.78)), url("images/church-family.jpg") center / cover fixed; } body.events-page .section.photo-wash { background: linear-gradient(90deg, rgba(255,250,240,.91), rgba(255,250,240,.78)), url("images/jubilee-invitation.jpg") center / cover fixed; } body.live-page .section.photo-wash, body.live-page .section.dark-wash { background: linear-gradient(180deg, rgba(8,7,4,.82), rgba(8,7,4,.90)), url("images/worship-moment.jpg") center / cover fixed; } #prayer.section { background: linear-gradient(90deg, rgba(255,250,240,.94), rgba(255,250,240,.82)), url("images/IMG_9563.JPG") center / cover fixed; } body.dark-mode #prayer.section, [data-theme="dark"] #prayer.section { background: linear-gradient(180deg, rgba(8,7,4,.88), rgba(8,7,4,.92)), url("images/IMG_9563.JPG") center / cover fixed !important; color: #f5edd8; } body.dark-mode #prayer .eyebrow, [data-theme="dark"] #prayer .eyebrow, body.dark-mode #prayer h2, [data-theme="dark"] #prayer h2, body.dark-mode #prayer .section-lede, [data-theme="dark"] #prayer .section-lede { color: #f5edd8; } body.dark-mode #prayer .prayer-card, [data-theme="dark"] #prayer .prayer-card { background: rgba(20, 16, 8, 0.92); color: #f5edd8; border-color: rgba(230, 200, 112, 0.2); } body.dark-mode #prayer .prayer-card h3, [data-theme="dark"] #prayer .prayer-card h3, body.dark-mode #prayer .prayer-card p, [data-theme="dark"] #prayer .prayer-card p, body.dark-mode #prayer .prayer-meta span, [data-theme="dark"] #prayer .prayer-meta span { color: #f5edd8; } body.dark-mode #prayer .filter-btn, [data-theme="dark"] #prayer .filter-btn, body.dark-mode #prayer .pill-btn, [data-theme="dark"] #prayer .pill-btn { color: #f5edd8; background: rgba(255, 255, 255, 0.08); border-color: rgba(230, 200, 112, 0.25); } body.dark-mode #prayer .filter-btn.active, [data-theme="dark"] #prayer .filter-btn.active, body.dark-mode #prayer .pill-btn.active, [data-theme="dark"] #prayer .pill-btn.active { color: #090806; background: #e6c870; } body.dark-mode .section.photo-wash { background: linear-gradient(90deg, rgba(9,8,6,.94), rgba(9,8,6,.84)), url("images/church-family.jpg") center / cover fixed; } .section.dark-wash { color: #fff6dd; background: linear-gradient(180deg, rgba(8,7,4,.88), rgba(8,7,4,.92)), url("images/worship-moment.jpg") center / cover fixed; } .section.dark-wash .section-lede, .section.dark-wash .eyebrow, .section.dark-wash h2 { color: #fff6dd; } .section.dark-wash .live-card { background: rgba(255, 252, 244, .90); color: #1d1608; } .section.dark-wash .live-card p, .section.dark-wash .live-card h3 { color: #1d1608; } body.dark-mode .section.dark-wash .live-card { background: rgba(19, 15, 8, .94); color: #fff6dd; } body.dark-mode .section.dark-wash .live-card p, body.dark-mode .section.dark-wash .live-card h3 { color: #fff6dd; } /* ── Promos & Highlights dark-wash feature cards ─────────── */ .section.dark-wash .section-head h2 { color: #fff6dd; } .section.dark-wash .feature-card { background: rgba(14, 10, 4, .88); border-color: rgba(255, 213, 99, .18); color: #fff6dd; } .section.dark-wash .feature-card strong { color: #d6a529; } .section.dark-wash .feature-card h3 { color: #fff6dd; } .section.dark-wash .feature-card p { color: #e8d9bb; } /* Info cards inside dark-wash sections */ .section.dark-wash .info-card { background: rgba(14, 10, 4, .82); border-color: rgba(255, 213, 99, .16); color: #fff6dd; } .section.dark-wash .info-card-title { color: #e6c870; } .section.dark-wash .info-card h3 { color: #fff6dd; } .section.dark-wash .info-card p { color: #e8d9bb; } .section.dark-wash .resource-link { color: #1a1710; background: rgba(255, 252, 244, 0.95); border-color: rgba(201, 168, 76, 0.25); } .section.dark-wash .resource-link span { color: #7a560f; font-weight: 800; } body.dark-mode .section.dark-wash .resource-link, [data-theme="dark"] .section.dark-wash .resource-link { color: #f5edd8; background: rgba(20, 16, 8, 0.92); border-color: rgba(230, 200, 112, 0.2); } body.dark-mode .section.dark-wash .resource-link span, [data-theme="dark"] .section.dark-wash .resource-link span { color: #e6c870; } .section.dark-wash .feature-card video { border-radius: 10px; border: 1px solid rgba(214, 165, 41, .20); max-height: 220px; object-fit: cover; } .section-inner { width: min(1180px, 100%); margin: 0 auto; } .section-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(280px, .52fr); gap: 28px; align-items: end; margin-bottom: 34px; } .section h2 { margin: 10px 0 0; font-size: clamp(36px, 5vw, 72px); line-height: .98; text-wrap: balance; } .section-lede { color: var(--muted); font-size: clamp(17px, 1.65vw, 21px); line-height: 1.55; } .quick-grid, .event-grid, .prayer-grid, .topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .feature-card, .event-card, .prayer-card, .live-card, .action-card, .info-card, .event-topic { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 14px rgba(64, 45, 12, .08); } .feature-card { min-height: 250px; padding: 26px; } .feature-card strong, .event-card strong, .prayer-card strong { display: block; color: #8d670d; font-size: 13px; font-weight: 950; text-transform: uppercase; margin-bottom: 14px; } .feature-card h3 { margin: 0 0 12px; font-size: 30px; line-height: 1; } .feature-card p, .event-card p, .prayer-card p, .live-card p { color: #514737; line-height: 1.55; } .event-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .event-card .event-body { padding: 20px; } .event-card h3 { margin: 0 0 8px; font-size: 28px; line-height: 1.05; } .event-card .card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .small-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 13px; border-radius: 999px; color: #090806; background: rgba(255, 226, 140, .92); border: 1px solid rgba(145, 104, 18, .26); text-decoration: none; font-size: 13px; font-weight: 950; transition: transform .2s ease, box-shadow .2s ease; } .small-link:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(145, 104, 18, .16); } .calendar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .year-panel { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.72); overflow: hidden; box-shadow: var(--shadow); } .year-panel h3 { margin: 0; padding: 18px 24px; background: linear-gradient(90deg, #0c0904, #2a1c06); color: #ffe28c; font-size: 32px; } .calendar-row { display: grid; grid-template-columns: 138px 1fr; gap: 18px; padding: 18px 22px; border-top: 1px solid rgba(145, 104, 18, .18); transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s ease, box-shadow .22s ease; } .calendar-date { color: #8c650d; font-weight: 950; text-transform: uppercase; } .calendar-row p { margin: 0; line-height: 1.45; } .calendar-row:hover, .calendar-row:focus-within { transform: translateY(-2px); background: rgba(255, 238, 176, .34); box-shadow: inset 4px 0 0 rgba(214, 165, 41, .72); } body.dark-mode .calendar-row:hover, body.dark-mode .calendar-row:focus-within { background: rgba(255, 226, 140, .10); } .calendar-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: -8px 0 24px; } .prayer-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .filter-btn { border: 1px solid rgba(145, 104, 18, .35); border-radius: 999px; padding: 10px 14px; background: rgba(255,255,255,.68); font-weight: 900; cursor: pointer; } .filter-btn.active { background: #080704; color: #ffe38a; } body.dark-mode .filter-btn { color: #fff6dd; background: rgba(255,255,255,.08); } body.dark-mode .filter-btn.active { color: #090806; background: #ffe38a; } .prayer-card { padding: 22px; min-height: 210px; } .prayer-card:not(.pending) { cursor: pointer; } .prayer-card:not(.pending)::after { content: "Tap scripture"; position: absolute; right: 16px; bottom: 14px; padding: 7px 10px; border-radius: 999px; color: #090806; background: linear-gradient(180deg, #fff1a7, #d6a529); font-size: 11px; font-weight: 950; text-transform: uppercase; box-shadow: 0 8px 18px rgba(137, 95, 13, .16); } .prayer-meta { display: flex; justify-content: space-between; gap: 12px; color: #8d670d; font-weight: 950; font-size: 13px; text-transform: uppercase; } .prayer-card h3 { margin: 14px 0 10px; font-size: 25px; } .prayer-card.pending { background: rgba(255,255,255,.48); border-style: dashed; } .live-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(320px, .65fr); gap: 24px; } .video-frame { min-height: 370px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.72)), url("images/worship-moment.jpg") center / cover no-repeat; color: #fff3c6; text-align: center; padding: 28px; border: 1px solid rgba(255, 220, 105, .3); box-shadow: var(--shadow); } .video-frame h3 { margin: 10px 0; font-size: clamp(32px, 4vw, 56px); } .live-card { padding: 26px; } .live-card + .live-card { margin-top: 16px; } .ministry-card { min-height: 360px; display: grid; align-content: end; padding: 22px; color: #fff6dd; background-color: #1a1710; background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.65) 100%), var(--image, none); background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid rgba(255, 223, 129, .28); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; } .ministry-card .gold-btn { width: fit-content; min-height: 42px; padding-inline: 18px; } .ministry-card strong { color: #ffe38a; text-transform: uppercase; font-size: 13px; font-weight: 950; } .ministry-card h3 { margin: 10px 0; font-size: 32px; } .ministry-card p { margin: 0 0 18px; line-height: 1.5; } .ministry-detail { display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, .75fr); gap: 24px; align-items: center; padding: clamp(22px, 4vw, 34px); border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); } .ministry-detail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255, 220, 105, .26); } .ministry-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .ministry-gallery { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; } .ministry-gallery img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255, 220, 105, .26); } .ministry-gallery img:first-child { grid-row: span 2; } .hall-gallery { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 14px; } .hall-gallery img { width: 100%; height: clamp(190px, 22vw, 280px); object-fit: cover; border-radius: 16px; border: 1px solid rgba(177, 128, 24, .24); box-shadow: var(--shadow); } .hall-gallery img:nth-child(2) { grid-column: span 2; } .bank-card, .hall-card { border-color: rgba(201, 151, 47, .34); background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,244,199,.50)); } .action-card, .info-card, .event-topic, .admin-card { padding: 22px; } .action-card h3, .info-card h3, .event-topic h3 { margin-top: 8px; font-size: 26px; } .info-card summary { cursor: pointer; color: #8d670d; font-weight: 950; text-transform: uppercase; list-style: none; } .info-card summary::-webkit-details-marker { display: none; } .info-card summary::after { content: "+"; float: right; width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; color: #090806; background: #ffe38a; } .info-card[open] summary::after { content: "-"; } .contact-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; } .split-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: clamp(22px, 4vw, 48px); align-items: start; } .form-panel { display: grid; gap: 16px; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 252, 244, .92); box-shadow: var(--shadow); } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .form-field { display: grid; gap: 7px; font-weight: 900; color: #44381f; } .form-field.full { grid-column: 1 / -1; } .form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 48px; border: 1px solid rgba(120, 84, 10, .28); border-radius: 12px; padding: 12px 14px; color: #17110a; background: rgba(255, 255, 255, .86); font: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.78); } .form-field textarea { min-height: 132px; resize: vertical; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 3px solid rgba(214, 165, 41, .28); border-color: rgba(136, 94, 12, .7); } .stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; } .stat-chip { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.7); } .stat-chip strong { display: block; color: #8a670f; font-size: 12px; text-transform: uppercase; } .stat-chip span { display: block; margin-top: 6px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 3vw, 34px); font-weight: 900; } .steps-list { counter-reset: steps; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .steps-list li { counter-increment: steps; display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.72); } .steps-list li::before { content: counter(steps); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #090806; background: linear-gradient(180deg, #fff1a7, #dba32b); font-weight: 950; } .media-frame { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #090806; box-shadow: var(--shadow); } .media-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; } .timeline-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: rgba(255,252,244,.82); } .timeline-item { display: grid; grid-template-columns: minmax(150px, .32fr) 1fr; gap: 18px; padding: 18px; border-bottom: 1px solid var(--line); } .timeline-item:last-child { border-bottom: 0; } .timeline-item strong { color: #8a670f; text-transform: uppercase; } .resource-list { display: grid; gap: 12px; } .resource-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid rgba(201, 168, 76, 0.25); border-radius: 14px; background: rgba(255, 252, 244, 0.95); color: #1a1710; text-decoration: none; font-weight: 950; } .resource-link span { color: #7a560f; font-weight: 800; } .event-topic { min-height: 210px; } .event-topic strong { display: inline-flex; color: #8d670d; font-size: 13px; font-weight: 950; text-transform: uppercase; } .admin-login, .admin-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: 0 16px 46px rgba(64, 45, 12, .09); } .admin-login form, .admin-grid { display: grid; gap: 14px; } .admin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .admin-login label { display: grid; gap: 6px; color: #8d670d; font-weight: 950; text-transform: uppercase; font-size: 12px; } .admin-login input, .admin-login textarea, .admin-card textarea, .admin-card input, .admin-card select { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--ink); background: rgba(255,255,255,.72); font: inherit; } body.dark-mode .admin-login input, body.dark-mode .admin-login textarea, body.dark-mode .admin-card textarea, body.dark-mode .admin-card input, body.dark-mode .admin-card select { color: var(--ink); background: rgba(255,255,255,.08); } .admin-status { display: inline-flex; width: fit-content; border-radius: 999px; padding: 8px 12px; color: #090806; background: linear-gradient(180deg, #fff1a7, #d6a529); font-size: 12px; font-weight: 950; text-transform: uppercase; } .admin-note { margin: 12px 0 0; padding: 14px; border-radius: 14px; background: rgba(255, 226, 140, .24); border: 1px solid rgba(145, 104, 18, .2); line-height: 1.45; } .demo-login { display: grid; gap: 8px; margin: 14px 0; padding: 14px; border-radius: 16px; background: rgba(9, 8, 6, .9); color: #ffe38a; font-weight: 900; } .admin-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; } .poster-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .poster-carousel { position: relative; } .poster-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 285px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; } .poster-track .poster-button { scroll-snap-align: start; } .poster-arrow { position: absolute; top: 42%; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 226, 140, .55); color: #ffe38a; background: rgba(9, 8, 6, .9); font-size: 24px; font-weight: 950; cursor: pointer; } .poster-arrow.prev { left: -14px; } .poster-arrow.next { right: -14px; } .poster-button { border: 0; padding: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: #100d08; box-shadow: var(--shadow); } .poster-button img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .28s cubic-bezier(.2,.8,.2,1); } .poster-button:hover img { transform: scale(1.04); } .poster-caption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; border-radius: 999px; color: #fff6dd; background: rgba(9, 8, 6, .82); font-size: 13px; font-weight: 950; } .site-footer { padding: 48px clamp(20px, 6vw, 94px) 100px; color: #efe6cf; background: radial-gradient(circle at top left, rgba(214, 165, 41, .18), transparent 26rem), #090806; } .footer-grid { display: grid; grid-template-columns: 1.2fr repeat(3, minmax(0, .7fr)); gap: 26px; width: min(1180px, 100%); margin: 0 auto; } .footer-grid h3, .footer-grid h4 { color: #ffe28c; margin-top: 0; } .footer-grid a { display: block; color: #fff7df; text-decoration: none; margin: 9px 0; } .footer-slogan { width: min(1180px, 100%); margin: 26px auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 226, 140, .18); color: #fff7df; font-weight: 900; } .footer-credit { width: min(1180px, 100%); margin: 14px auto 0; color: rgba(255, 247, 223, .74); font-size: 13px; font-weight: 800; } .dev-credit { width: min(1180px, 100%); margin: 6px auto 0; color: rgba(255, 247, 223, .45); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; } .info-card-title { display: block; color: #8d670d; font-weight: 950; text-transform: uppercase; margin-bottom: 12px; } .mobile-bottom { display: none; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.9); border-top: 1px solid rgba(145, 104, 18, .18); backdrop-filter: blur(18px); } .mobile-bottom a { text-decoration: none; color: #1a150c; font-size: 11px; font-weight: 900; display: grid; justify-items: center; gap: 4px; } .mobile-bottom svg { width: 22px; height: 22px; stroke-width: 2.5; } .modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(6,5,3,.78); } .modal.open { display: flex; } .modal-card { width: min(980px, 100%); max-height: min(860px, 88svh); overflow: auto; border-radius: 16px; background: #fffaf0; padding: clamp(22px, 4vw, 42px); border: 1px solid rgba(255, 220, 105, .35); } .modal-card img { margin: 0 auto; max-height: 70svh; object-fit: contain; } .pdf-modal-card { width: min(1100px, 100%); padding: clamp(18px, 3vw, 28px); } .pdf-modal-card h2 { margin: 0 0 14px; padding-right: 52px; } .pdf-modal-card iframe { width: 100%; min-height: min(72svh, 760px); border: 1px solid rgba(201, 168, 76, 0.25); border-radius: 12px; background: #fff; } body.dark-mode .pdf-modal-card iframe { background: #fff; } .scripture-modal .modal-card { background: radial-gradient(circle at top right, rgba(255, 225, 126, .22), transparent 18rem), #fffaf0; } .scripture-ref { display: inline-flex; border: 1px solid rgba(145, 104, 18, .32); border-radius: 999px; padding: 8px 12px; color: #8d670d; font-weight: 950; background: rgba(255,255,255,.62); } .scripture-prayer { margin-top: 18px; padding: 18px; border: 1px solid rgba(145, 104, 18, .28); background: rgba(255, 239, 184, .3); border-radius: 14px; line-height: 1.55; } .modal-close { float: right; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #090806; color: #ffe38a; font-weight: 950; } .reveal { opacity: 1; transform: none; filter: none; } .js-ready .reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1), filter .55s cubic-bezier(.2,.8,.2,1); } .js-ready .reveal.visible, .reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); } @media (max-width: 920px) { :root { --site-header-height: 70px; } .site-header { grid-template-columns: minmax(0, 1fr) auto; min-height: 70px; padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px; gap: 8px; } .brand { gap: 8px; min-width: 0; } .brand img { width: 40px; height: 40px; } .brand b { display: block; font-size: clamp(16px, 5vw, 20px); white-space: nowrap; } .brand span { display: block; min-width: 0; } .brand span span { display: none; } .nav { position: fixed; top: 78px; left: 14px; right: 14px; display: none; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; border-radius: 16px; background: radial-gradient(circle at top right, rgba(255, 226, 140, .22), transparent 15rem), rgba(255, 250, 238, .96); box-shadow: var(--shadow); } .nav.open { display: flex; } .nav::before { content: "Site Menu"; color: #8a650d; font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; padding: 2px 6px 4px; } .jubilee-nav::before { content: "Jubilee Menu"; } .nav a { text-align: center; padding: 15px; border-radius: 16px; background: rgba(255,255,255,.66); border: 1px solid rgba(145, 104, 18, .16); } .nav a[href*="phase-1"] { margin-top: 6px; border-radius: 999px; } .header-actions { gap: 7px; } .theme-toggle { width: 38px; height: 38px; } .header-actions .pill-btn { min-height: 42px; padding: 0 14px; width: auto; } .menu-toggle { display: inline-grid; place-items: center; } .hero { margin-top: calc(-1 * var(--site-header-height)); padding: calc(var(--site-header-height) + 28px) 18px 58px; background-position: center top; } .hero-grid { grid-template-columns: 1fr; gap: 26px; width: min(390px, 100%); } .hero h1 { font-size: clamp(42px, 13vw, 58px); text-align: center; } .hero-copy, .eyebrow { text-align: center; justify-content: center; } .eyebrow::before { display: none; } .hero-actions { justify-content: center; } .gold-btn, .dark-btn, .pill-btn { width: 100%; } .section { padding: 52px 18px; } .section.photo-wash, .section.dark-wash { background-attachment: scroll; } .section h2 { font-size: clamp(34px, 12vw, 52px); } .section-head, .live-layout, .calendar, .ministry-detail { grid-template-columns: 1fr; } .quick-grid, .event-grid, .prayer-grid, .poster-strip, .admin-grid, .topic-grid, .contact-strip, .split-layout, .form-grid, .stat-strip { grid-template-columns: 1fr; } .timeline-item { grid-template-columns: 1fr; } .resource-link { align-items: flex-start; flex-direction: column; } .calendar-row { grid-template-columns: 1fr; gap: 6px; } .ministry-gallery { grid-template-columns: 1fr; } .ministry-gallery img:first-child { grid-row: auto; } .hall-gallery { grid-template-columns: 1fr; } .hall-gallery img, .hall-gallery img:nth-child(2) { grid-column: auto; height: 230px; } .prayer-card:not(.pending)::after { position: static; width: fit-content; margin-top: 12px; display: inline-flex; } .prayer-tools { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; } .filter-btn { flex: 0 0 auto; min-height: 44px; } .footer-grid { grid-template-columns: 1fr; } .mobile-bottom { display: grid; grid-template-columns: repeat(5, 1fr); } .site-footer { padding-bottom: 128px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; filter: none; } } /* Phase 4 final polish overrides */ .hero { background: linear-gradient(90deg, rgba(255,250,240,.86) 0%, rgba(255,250,240,.58) 48%, rgba(255,250,240,.20) 100%), url("images/church-family.jpg") center / cover no-repeat !important; } body.jubilee-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.81) 0%, rgba(255,250,240,.56) 45%, rgba(255,250,240,.16) 100%), url("images/jubilee-logo-color.png") right 9% center / min(34vw, 430px) no-repeat, url("images/_church_zip_tmp/Prayer%20mountain.jpg") center / cover no-repeat !important; } body.events-page .hero, body.main-events-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.84) 0%, rgba(255,250,240,.56) 48%, rgba(255,250,240,.18) 100%), url("images/20250601_084034.jpg") center / cover no-repeat !important; } body.media-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.81) 0%, rgba(255,250,240,.56) 48%, rgba(255,250,240,.15) 100%), url("../../phase-1/assets/P1230253.JPG") center / cover no-repeat !important; } body.prayer-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.81) 0%, rgba(255,250,240,.56) 48%, rgba(255,250,240,.15) 100%), url("images/IMG_9563.JPG") center / cover no-repeat !important; } body.giving-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.84) 0%, rgba(255,250,240,.58) 48%, rgba(255,250,240,.20) 100%), url("images/IMG-20250605-WA0006.jpg") center / cover no-repeat !important; } body.reservation-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.82) 0%, rgba(255,250,240,.56) 48%, rgba(255,250,240,.18) 100%), url("images/grand-hall-2.jpg") center / cover no-repeat !important; } body.contact-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.72) 0%, rgba(255,250,240,.48) 48%, rgba(255,250,240,.14) 100%), url("images/P1100434.jpg") center top / cover no-repeat !important; } body.history-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.82) 0%, rgba(255,250,240,.58) 48%, rgba(255,250,240,.20) 100%), url("images/IMG_0749.JPG") center / cover no-repeat !important; } body.ministries-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/IMG_9876.JPG") center / cover no-repeat !important; } body.dark-mode .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.76) 52%, rgba(12,9,5,.52) 100%), url("images/church-family.jpg") center / cover no-repeat !important; } body.dark-mode.jubilee-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 52%, rgba(12,9,5,.40) 100%), url("images/jubilee-logo-color.png") right 9% center / min(34vw, 430px) no-repeat, url("images/_church_zip_tmp/Prayer%20mountain.jpg") center / cover no-repeat !important; } body.dark-mode.events-page .hero, body.dark-mode.main-events-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88), rgba(12,9,5,.70)), url("images/20250601_084034.jpg") center / cover no-repeat !important; } body.dark-mode.media-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88), rgba(12,9,5,.70)), url("../../phase-1/assets/P1230253.JPG") center / cover no-repeat !important; } body.dark-mode.prayer-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88), rgba(12,9,5,.70)), url("images/IMG_9563.JPG") center / cover no-repeat !important; } body.dark-mode.giving-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88), rgba(12,9,5,.70)), url("images/IMG-20250605-WA0006.jpg") center / cover no-repeat !important; } body.dark-mode.reservation-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88), rgba(12,9,5,.70)), url("images/grand-hall-2.jpg") center / cover no-repeat !important; } body.dark-mode.contact-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88), rgba(12,9,5,.70)), url("images/P1100434.jpg") center top / cover no-repeat !important; } body.dark-mode.history-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88), rgba(12,9,5,.70)), url("images/IMG_0749.JPG") center / cover no-repeat !important; } body.dark-mode.ministries-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88), rgba(12,9,5,.70)), url("../../phase-1/assets/IMG_9876.JPG") center / cover no-repeat !important; } body.dark-mode .hero h1, body.dark-mode .hero-copy, body.dark-mode .section-lede, body.dark-mode .eyebrow, body.dark-mode .launch-panel p, body.dark-mode .feature-card p, body.dark-mode .event-card p, body.dark-mode .info-card p { color: #fff2c6 !important; } body.dark-mode .dark-btn { color: #fff2c6 !important; border-color: rgba(255,226,140,.45) !important; } body.dark-mode .gold-btn, body.dark-mode .pill-btn, body.dark-mode .small-link { color: #100b04 !important; } .hero-card, .feature-card, .event-card, .prayer-card, .live-card, .action-card, .info-card, .event-topic { backdrop-filter: blur(10px); } /* ── Per-ministry unique hero backgrounds (matched to card photos) ── */ body.ministry-women-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9471.JPG") center / cover no-repeat !important; } body.ministry-family-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9490.JPG") center / cover no-repeat !important; } body.ministry-evangelism-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9416.JPG") center / cover no-repeat !important; } body.ministry-youth-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9430.JPG") center / cover no-repeat !important; } body.ministry-children-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_0050.JPG") center / cover no-repeat !important; } body.ministry-disc-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9537.JPG") center / cover no-repeat !important; } body.ministry-prayer-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9563.JPG") center / cover no-repeat !important; } body.ministry-men-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9445.JPG") center / cover no-repeat !important; } body.ministry-music-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9682.JPG") center / cover no-repeat !important; } body.ministry-ushering-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9700.JPG") center / cover no-repeat !important; } body.ministry-community-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9520.JPG") center / cover no-repeat !important; } body.ministry-communications-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_0002.JPG") center / cover no-repeat !important; } body.ministry-care-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9760.JPG") center / cover no-repeat !important; } body.ministry-young-adults-page .hero { background: linear-gradient(90deg, rgba(255,250,240,.78) 0%, rgba(255,250,240,.52) 48%, rgba(255,250,240,.12) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9449.JPG") center / cover no-repeat !important; } /* ── Dark mode per-ministry heroes ──────────────────────── */ body.dark-mode.ministry-women-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9471.JPG") center / cover no-repeat !important; } body.dark-mode.ministry-family-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9490.JPG") center / cover no-repeat !important; } body.dark-mode.ministry-evangelism-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9416.JPG") center / cover no-repeat !important; } body.dark-mode.ministry-youth-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9430.JPG") center / cover no-repeat !important; } body.dark-mode.ministry-children-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_0050.JPG") center / cover no-repeat !important; } body.dark-mode.ministry-disc-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9537.JPG") center / cover no-repeat !important; } body.dark-mode.ministry-prayer-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9563.JPG") center / cover no-repeat !important; } body.dark-mode.ministry-men-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9445.JPG") center / cover no-repeat !important; } body.dark-mode.ministry-music-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9682.JPG") center / cover no-repeat !important; } body.dark-mode.ministry-ushering-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9700.JPG") center / cover no-repeat !important; } body.dark-mode.ministry-community-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9520.JPG") center / cover no-repeat !important; } body.dark-mode.ministry-communications-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_0002.JPG") center / cover no-repeat !important; } body.dark-mode.ministry-care-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9760.JPG") center / cover no-repeat !important; } body.dark-mode.ministry-young-adults-page .hero { background: linear-gradient(90deg, rgba(7,6,4,.88) 0%, rgba(12,9,5,.70) 48%, rgba(12,9,5,.38) 100%), url("../../phase-1/assets/chruch%20photos/IMG_9449.JPG") center / cover no-repeat !important; } /* ── Renovation / Renew & Restore section background ─────── */ .renew-restore-bg, .section.renew-restore { background: linear-gradient(90deg, rgba(255,250,240,.90) 0%, rgba(255,250,240,.78) 50%, rgba(255,250,240,.60) 100%), url("images/20250601_084034.jpg") center / cover fixed; } body.dark-mode .renew-restore-bg, body.dark-mode .section.renew-restore { background: linear-gradient(90deg, rgba(7,6,4,.90) 0%, rgba(12,9,5,.80) 100%), url("images/20250601_084034.jpg") center / cover fixed !important; } /* ── Premium button polish ───────────────────────────────── */ .gold-btn, .pill-btn { font-weight: 950; letter-spacing: .02em; } .gold-btn:hover, .pill-btn:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 20px 40px rgba(185,132,23,.32), 0 6px 12px rgba(185,132,23,.16); } .dark-btn:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,213,99,.38), 0 20px 40px rgba(0,0,0,.30); } /* ── Premium header polish ───────────────────────────────── */ .site-header { backdrop-filter: blur(22px) saturate(1.3); background: rgba(255, 250, 238, .52); border-bottom: 1px solid rgba(207, 165, 58, .38); } body.dark-mode .site-header { background: rgba(8, 6, 3, .72); border-bottom-color: rgba(214, 165, 41, .22); backdrop-filter: blur(22px) saturate(1.1); } /* ── Mobile bottom nav polish ───────────────────────────── */ .mobile-bottom { background: rgba(255, 252, 246, .92); backdrop-filter: blur(24px) saturate(1.4); border-top: 1px solid rgba(145, 104, 18, .22); box-shadow: 0 -8px 32px rgba(38, 24, 6, .08); } .mobile-bottom a[aria-current="page"], .mobile-bottom a.active { color: #d6a529; } .mobile-bottom a[aria-current="page"] svg, .mobile-bottom a.active svg { color: #d6a529; } body.dark-mode .mobile-bottom { background: rgba(8, 6, 3, .88); border-top-color: rgba(214, 165, 41, .18); backdrop-filter: blur(24px) saturate(1.1); } body.dark-mode .mobile-bottom a { color: #c9b37e; } body.dark-mode .mobile-bottom a[aria-current="page"], body.dark-mode .mobile-bottom a.active { color: #ffe38a; }