/* ============================================================ AGAPE CHRISTIAN FELLOWSHIP — main.css v2 Light mode (default) / Dark mode via [data-theme="dark"] on Fonts: Cormorant Garamond (display) · Outfit (UI) · Lora (body) ============================================================ */ /* === LIGHT THEME (default) ============================= */ :root, html[data-theme="light"] { --bg: #FAFAF8; --surface: #F0EBE1; --card: #E8E2D6; --card-hover: #DDD7CB; --text: #1C1A17; --text-sec: #4A4640; --muted: #7A756E; --gold: #9A7328; --gold-light: #C49535; --gold-dim: rgba(154, 115, 40, 0.10); --gold-border: rgba(154, 115, 40, 0.30); --border: rgba(28, 26, 23, 0.10); --border-faint: rgba(28, 26, 23, 0.04); --nav-bg: rgba(250, 250, 248, 0.95); --shadow: 0 4px 24px rgba(28, 26, 23, 0.08); --shadow-md: 0 8px 40px rgba(28, 26, 23, 0.12); color-scheme: light; } /* === DARK THEME ========================================= */ html[data-theme="dark"] { --bg: #080808; --surface: #111111; --card: #1A1A1A; --card-hover: #222222; --text: #F4EFE6; --text-sec: #C8C2B8; --muted: #6B6B6B; --gold: #D4A843; --gold-light: #E8C876; --gold-dim: rgba(212, 168, 67, 0.10); --gold-border: rgba(212, 168, 67, 0.28); --border: rgba(255, 255, 255, 0.07); --border-faint: rgba(255, 255, 255, 0.03); --nav-bg: rgba(8, 8, 8, 0.95); --shadow: 0 4px 24px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 40px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* === ALWAYS-DARK constants (hero, footer, page headers) = */ :root { --always-black: #080808; --always-dark-text: #F4EFE6; --always-muted: rgba(244, 239, 230, 0.58); --always-gold: #D4A843; --always-border: rgba(255, 255, 255, 0.07); --always-gold-border: rgba(212, 168, 67, 0.28); --font-display: 'Cormorant Garamond', Georgia, serif; --font-ui: 'Outfit', sans-serif; --font-body: 'Lora', Georgia, serif; --nav-h: 72px; --section-pad: clamp(72px, 10vw, 130px); --container: 1160px; --radius: 3px; --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* === RESET ============================================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.75; overflow-x: hidden; transition: background 0.35s var(--ease), color 0.35s var(--ease); } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { border: none; background: none; cursor: pointer; font-family: inherit; } ul { list-style: none; } /* === TYPOGRAPHY ======================================== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; line-height: 1.05; letter-spacing: -0.01em; } h1 { font-size: clamp(3.5rem, 10vw, 9rem); } h2 { font-size: clamp(2.2rem, 5vw, 5rem); } h3 { font-size: clamp(1.3rem, 2.5vw, 2rem); font-weight: 400; } .eyebrow { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .eyebrow--light { color: var(--always-gold); } .scripture-ref { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 8px; display: block; } /* === LAYOUT ============================================ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); } .section { padding: var(--section-pad) 0; position: relative; } .section--surface { background: var(--surface); } .section--card { background: var(--card); } .section-header { margin-bottom: clamp(44px, 7vw, 72px); } .section-header.centered { text-align: center; } .section-header .eyebrow { margin-bottom: 14px; } .section-header h2 { margin-bottom: 16px; } .section-header p { font-size: 1.05rem; color: var(--muted); max-width: 560px; } .section-header.centered p { margin: 0 auto; } .rule { width: 48px; height: 1px; background: var(--gold); margin: 20px 0; } .rule--light { background: var(--always-gold); } .rule.centered { margin: 20px auto; } /* === BUTTONS =========================================== */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 15px 34px; border-radius: var(--radius); transition: all 0.28s var(--ease); position: relative; white-space: nowrap; } .btn--gold { background: var(--gold); color: #fff; } .btn--gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: var(--shadow); } .btn--outline { border: 1px solid var(--gold-border); color: var(--gold); } .btn--outline:hover { background: var(--gold-dim); transform: translateY(-2px); } .btn--dark-outline { border: 1px solid rgba(244,239,230,0.35); color: var(--always-dark-text); } .btn--dark-outline:hover { border-color: var(--always-gold); color: var(--always-gold); } .btn--lg { padding: 18px 44px; font-size: 0.82rem; } /* === SCROLL REVEAL ===================================== */ .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); } .reveal.visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: 0.12s; } .reveal-delay-2 { transition-delay: 0.24s; } .reveal-delay-3 { transition-delay: 0.38s; } .reveal-delay-4 { transition-delay: 0.52s; } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); display: flex; align-items: center; transition: background 0.4s var(--ease), backdrop-filter 0.4s, border-color 0.4s; border-bottom: 1px solid transparent; } .nav.scrolled { background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: var(--border); box-shadow: var(--shadow); } .nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); gap: 16px; } .nav__logo { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; } .nav__logo-primary { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.06em; color: var(--always-dark-text); transition: color 0.3s; } .nav.scrolled .nav__logo-primary { color: var(--text); } .nav__logo-sub { font-family: var(--font-ui); font-size: 0.5rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--always-gold); margin-top: 2px; } .nav.scrolled .nav__logo-sub { color: var(--gold); } .nav__links { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); } .nav__link { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 239, 230, 0.75); position: relative; transition: color 0.25s; } .nav.scrolled .nav__link { color: var(--text-sec); } .nav__link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--always-gold); transition: width 0.3s var(--ease); } .nav.scrolled .nav__link::after { background: var(--gold); } .nav__link:hover, .nav__link.active { color: var(--always-dark-text); } .nav.scrolled .nav__link:hover, .nav.scrolled .nav__link.active { color: var(--text); } .nav__link:hover::after, .nav__link.active::after { width: 100%; } /* Language switcher */ .lang-switcher { display: flex; align-items: center; gap: 5px; } .lang-btn { font-family: var(--font-ui); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; padding: 3px 1px; color: rgba(244, 239, 230, 0.5); transition: color 0.2s; } .nav.scrolled .lang-btn { color: var(--muted); } .lang-btn:hover, .lang-btn.active { color: var(--always-gold); } .nav.scrolled .lang-btn:hover, .nav.scrolled .lang-btn.active { color: var(--gold); } .lang-divider { color: rgba(255,255,255,0.15); font-size: 0.75rem; line-height: 1; } .nav.scrolled .lang-divider { color: var(--border); } /* Donate Now nav pill */ .nav__donate-btn { display: none; font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 18px; border-radius: 100px; background: var(--always-gold); color: #fff; transition: background 0.25s, transform 0.2s; white-space: nowrap; flex-shrink: 0; } .nav__donate-btn:hover { background: #c4992a; transform: translateY(-1px); } @media (min-width: 900px) { .nav__donate-btn { display: inline-flex; } } /* Theme toggle */ .theme-toggle { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(244,239,230,0.65); font-size: 1.05rem; transition: color 0.25s, background 0.25s; flex-shrink: 0; } .nav.scrolled .theme-toggle { color: var(--muted); } .theme-toggle:hover { color: var(--always-gold); } .nav.scrolled .theme-toggle:hover { color: var(--gold); } .icon-sun { display: none; } .icon-moon { display: inline; } html[data-theme="dark"] .icon-sun { display: inline; } html[data-theme="dark"] .icon-moon { display: none; } /* Hamburger */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; cursor: pointer; flex-shrink: 0; } .hamburger span { display: block; width: 22px; height: 1.5px; background: var(--always-dark-text); transition: all 0.3s var(--ease); transform-origin: center; } .nav.scrolled .hamburger span { background: var(--text); } .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile Drawer */ .nav__drawer { display: none; position: fixed; inset: var(--nav-h) 0 0 0; background: var(--nav-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); z-index: 999; flex-direction: column; align-items: center; justify-content: center; gap: 32px; opacity: 0; pointer-events: none; border-top: 1px solid var(--border); } .nav__drawer.open { display: flex; opacity: 1; pointer-events: all; } .nav__drawer .nav__link { font-size: 1rem; letter-spacing: 0.18em; color: var(--text); } .nav__drawer .nav__link:hover { color: var(--gold); } .nav__drawer .nav__link::after { background: var(--gold); } /* ============================================================ HERO (always dark) ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--always-black); } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.55) 40%, rgba(8,8,8,0.82) 100% ); z-index: 1; } /* Scanline */ .hero::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 4px); z-index: 1; pointer-events: none; } @keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.07); } } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; z-index: 0; animation: heroZoom 24s ease-in-out infinite alternate; transform-origin: center center; } .hero__content { position: relative; z-index: 2; text-align: center; max-width: 860px; padding: var(--nav-h) clamp(20px, 5vw, 64px) 40px; } .hero__eyebrow { margin-bottom: 20px; opacity: 0; animation: fadeUp 0.9s var(--ease) 0.3s forwards; } .hero__title { font-size: clamp(4rem, 11vw, 10rem); font-weight: 300; line-height: 0.96; letter-spacing: -0.02em; color: var(--always-dark-text); opacity: 0; animation: fadeUp 1.1s var(--ease) 0.55s forwards; } .hero__title em { font-style: italic; color: var(--always-gold); } .hero__scripture { font-family: var(--font-body); font-style: italic; font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(244,239,230,0.75); margin-top: 28px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.7; opacity: 0; animation: fadeUp 1s var(--ease) 0.82s forwards; } .hero__scripture cite { font-style: normal; display: block; margin-top: 8px; font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--always-gold); } .hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; opacity: 0; animation: fadeUp 1s var(--ease) 1.05s forwards; } .hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; animation: fadeUp 1s var(--ease) 1.4s forwards; } .hero__scroll span { font-family: var(--font-ui); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244,239,230,0.45); } .hero__scroll-line { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--always-gold), transparent); animation: scrollPulse 2s ease-in-out infinite; } /* ============================================================ PAGE HERO (always dark – services, donations pages) ============================================================ */ .page-hero { background-color: var(--always-black); background-size: cover; background-position: center; position: relative; overflow: hidden; padding: calc(var(--nav-h) + 80px) 0 80px; text-align: center; } .page-hero::before { content: ''; position: absolute; inset: 0; background: rgba(8,8,8,0.72); z-index: 1; } .page-hero .container { position: relative; z-index: 2; } .page-hero .eyebrow { margin-bottom: 16px; } .page-hero h1 { font-size: clamp(2.8rem, 7vw, 6rem); color: var(--always-dark-text); margin-bottom: 20px; } .page-hero p { font-family: var(--font-body); font-style: italic; font-size: 1.1rem; color: var(--always-muted); max-width: 540px; margin: 0 auto; } /* ============================================================ ABOUT (themed) ============================================================ */ .about { background: var(--surface); } .about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 88px); align-items: center; } .about__image-wrap { position: relative; } .about__image-wrap img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; } .about__image-wrap::after { content: ''; position: absolute; bottom: -14px; right: -14px; width: 55%; height: 55%; border: 1px solid var(--gold-border); border-radius: 2px; pointer-events: none; transition: border-color 0.3s; } .about__body .eyebrow { margin-bottom: 16px; } .about__body h2 { margin-bottom: 24px; } .about__body p { color: var(--text-sec); margin-bottom: 18px; font-size: 1rem; } .about__pullquote { font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-style: italic; font-weight: 300; color: var(--gold); line-height: 1.45; border-left: 2px solid var(--gold); padding-left: 20px; margin: 28px 0; } .about__pastor { display: flex; align-items: center; gap: 14px; padding: 20px; background: var(--card); border-radius: 4px; border: 1px solid var(--border); margin-top: 28px; margin-bottom: 28px; } .about__pastor-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--gold-dim); border: 2px solid var(--gold-border); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); flex-shrink: 0; } .about__pastor-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--text); line-height: 1.2; } .about__pastor-title { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 3px; } .about__stats { display: flex; gap: 32px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); } .about__stat-num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 300; color: var(--gold); line-height: 1; } .about__stat-label { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-top: 5px; } /* ============================================================ SERVICES PREVIEW (on index) ============================================================ */ .services-preview { background: var(--bg); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; } .service-card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 32px 28px; transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s; } .service-card:hover { border-color: var(--gold-border); transform: translateY(-3px); box-shadow: var(--shadow); } .service-card__icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold-border); background: var(--gold-dim); display: flex; align-items: center; justify-content: center; color: var(--gold); margin-bottom: 18px; } .service-card__day { font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .service-card h3 { font-size: 1.3rem; font-weight: 400; margin-bottom: 8px; color: var(--text); } .service-card__time { font-family: var(--font-ui); font-size: 0.78rem; color: var(--muted); margin-bottom: 12px; } .service-card p { font-size: 0.9rem; color: var(--text-sec); line-height: 1.65; } .service-card__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-top: 16px; transition: gap 0.2s; } .service-card__link:hover { gap: 10px; } /* ============================================================ GIVE (themed) ============================================================ */ .give { background: var(--surface); } .give__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; } .give__card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s; } .give__card:hover { border-color: var(--gold-border); transform: translateY(-3px); box-shadow: var(--shadow); } .give__card-top { padding: 40px 36px 32px; flex: 1; background: linear-gradient(135deg, var(--card) 0%, var(--card-hover) 100%); } .give__card-icon { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--gold-border); background: var(--gold-dim); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.4rem; margin-bottom: 20px; } .give__card h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 400; margin-bottom: 12px; } .give__card p { color: var(--text-sec); font-size: 0.95rem; line-height: 1.7; } .give__card-scripture { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--gold); margin-top: 20px; line-height: 1.5; padding-top: 16px; border-top: 1px solid var(--border); } .give__card-footer { padding: 24px 36px; background: var(--gold); display: flex; align-items: center; justify-content: space-between; transition: background 0.2s; } .give__card:hover .give__card-footer { background: var(--gold-light); } .give__card-footer-text { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; } .give__card-footer svg { color: #fff; transition: transform 0.2s; } .give__card:hover .give__card-footer svg { transform: translateX(4px); } .give__note { text-align: center; margin-top: 28px; font-family: var(--font-ui); font-size: 0.76rem; color: var(--muted); } /* ============================================================ CONTACT (themed) ============================================================ */ .contact { background: var(--bg); } .contact__layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 7vw, 88px); align-items: start; } .contact__info p { color: var(--text-sec); margin-bottom: 32px; font-size: 1rem; } .contact__detail { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .contact__detail-icon { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--gold-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 0.85rem; margin-top: 1px; } .contact__detail-text { font-family: var(--font-ui); font-size: 0.88rem; color: var(--text-sec); line-height: 1.65; } .contact__detail-text strong { display: block; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; font-weight: 600; } .contact__detail-text a { color: var(--text-sec); transition: color 0.2s; } .contact__detail-text a:hover { color: var(--gold); } .contact__form { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: clamp(28px, 4vw, 44px); } .messages-list { list-style: none; margin-bottom: 20px; } .message { padding: 13px 16px; border-radius: 3px; font-family: var(--font-ui); font-size: 0.83rem; margin-bottom: 8px; cursor: pointer; } .message.success { background: var(--gold-dim); border: 1px solid var(--gold-border); color: var(--gold); } .message.error { background: rgba(180,40,40,0.1); border: 1px solid rgba(180,40,40,0.3); color: #c44; } .form-group { margin-bottom: 26px; } .form-label { display: block; font-family: var(--font-ui); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; } .form-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-family: var(--font-body); font-size: 1rem; padding: 9px 0; outline: none; transition: border-color 0.3s; resize: none; } .form-input::placeholder { color: var(--muted); } .form-input:focus { border-color: var(--gold); } .form-error { font-family: var(--font-ui); font-size: 0.73rem; color: #c44; margin-top: 5px; } /* ============================================================ FIND US (themed) ============================================================ */ .find-us { background: var(--surface); padding-bottom: 0; } .find-us .container { padding-bottom: var(--section-pad); } .find-us__map-wrap { position: relative; width: 100%; height: 420px; overflow: hidden; } .find-us__map-wrap iframe { width: 100%; height: 100%; border: none; } html[data-theme="light"] .find-us__map-wrap iframe { filter: none; } html[data-theme="dark"] .find-us__map-wrap iframe { filter: grayscale(1) invert(0.85) contrast(0.9); opacity: 0.88; } .find-us__info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } .find-us__info-block { background: var(--card); padding: clamp(22px, 3.5vw, 36px); } .find-us__info-block .eyebrow { margin-bottom: 12px; } .find-us__info-block h3 { font-size: 1.2rem; font-weight: 400; margin-bottom: 8px; } .find-us__info-block address, .find-us__info-block p { font-style: normal; color: var(--text-sec); font-family: var(--font-ui); font-size: 0.88rem; line-height: 1.8; } .find-us__info-block a { color: var(--gold); font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; transition: color 0.2s; } .find-us__info-block a:hover { color: var(--gold-light); } .service-time { display: flex; flex-direction: column; margin-bottom: 8px; } .service-time strong { color: var(--text); font-family: var(--font-ui); font-size: 0.83rem; font-weight: 500; } .service-time span { color: var(--gold); font-family: var(--font-ui); font-size: 0.8rem; } /* ============================================================ FOOTER (always dark) ============================================================ */ .footer { background: var(--always-black); border-top: 1px solid var(--always-gold-border); padding-top: clamp(50px, 7vw, 80px); padding-bottom: 36px; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(32px, 5vw, 64px); margin-bottom: 56px; } .footer__logo-name { font-family: var(--font-display); font-size: 2rem; font-weight: 300; letter-spacing: 0.05em; color: var(--always-dark-text); margin-bottom: 6px; } .footer__logo-tagline { font-family: var(--font-body); font-style: italic; font-size: 0.9rem; color: var(--always-muted); margin-bottom: 22px; } .footer__contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; font-family: var(--font-ui); font-size: 0.85rem; color: rgba(244,239,230,0.58); } .footer__contact-item svg { flex-shrink: 0; margin-top: 2px; color: var(--always-gold); } .footer__contact-item a { color: inherit; transition: color 0.2s; } .footer__contact-item a:hover { color: var(--always-gold); } .footer__col-title { font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--always-gold); margin-bottom: 18px; } .footer__links { display: flex; flex-direction: column; gap: 10px; } .footer__link { font-family: var(--font-ui); font-size: 0.85rem; color: rgba(244,239,230,0.55); transition: color 0.2s; } .footer__link:hover { color: var(--always-dark-text); } .footer__socials { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; } /* Footer QR codes */ .footer__qr-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; } .footer__qr-item { display: flex; flex-direction: column; align-items: center; gap: 6px; } .footer__qr-item img { border-radius: 4px; opacity: 0.82; border: 1px solid rgba(212,168,67,0.25); transition: opacity 0.2s; } .footer__qr-item img:hover { opacity: 1; } .footer__qr-item span { font-family: var(--font-ui); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244,239,230,0.4); text-align: center; } .footer__social { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--always-border); display: flex; align-items: center; justify-content: center; color: rgba(244,239,230,0.5); transition: all 0.25s var(--ease); } .footer__social:hover { color: var(--always-gold); border-color: var(--always-gold-border); transform: translateY(-2px); } .footer__bottom { border-top: 1px solid var(--always-border); padding-top: 26px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .footer__copyright { font-family: var(--font-ui); font-size: 0.72rem; color: rgba(244,239,230,0.35); } .footer__heart { color: var(--always-gold); } /* ============================================================ SERVICES PAGE (/services/) ============================================================ */ .services-full { background: var(--bg); } .services-full .services-grid { grid-template-columns: repeat(3, 1fr); } .statement-of-faith { background: var(--always-black); color: var(--always-dark-text); padding: var(--section-pad) 0; } .statement-of-faith .eyebrow { color: var(--always-gold); } .statement-of-faith h2 { color: var(--always-dark-text); } .statement-of-faith .rule { background: var(--always-gold); } .belief-list { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 32px; } .belief-item { display: flex; gap: 16px; padding: 20px 24px; background: rgba(255,255,255,0.04); border-radius: 3px; border: 1px solid var(--always-border); font-size: 0.97rem; color: rgba(244,239,230,0.78); font-family: var(--font-body); line-height: 1.7; } .belief-item::before { content: '✦'; color: var(--always-gold); font-size: 0.7rem; margin-top: 5px; flex-shrink: 0; } .belief-item strong { color: var(--always-gold); font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .spirit-filled { background: var(--surface); } .trinity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; } .trinity-card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 28px; transition: border-color 0.3s; } .trinity-card:hover { border-color: var(--gold-border); } .trinity-card__ref { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .trinity-card p { font-family: var(--font-body); font-style: italic; color: var(--text-sec); line-height: 1.7; font-size: 0.97rem; } .faith-quotes { background: var(--bg); } .faith-quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; } .faith-quote { text-align: center; padding: 32px 24px; background: var(--card); border: 1px solid var(--border); border-radius: 4px; } .faith-quote blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--text); line-height: 1.5; margin-bottom: 16px; } .faith-quote cite { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-style: normal; } /* ============================================================ DONATIONS PAGE (/donations/) ============================================================ */ .donations { background: var(--bg); } .donations__why { background: var(--surface); padding: var(--section-pad) 0; text-align: center; } .donations__why blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.4rem); color: var(--text); max-width: 700px; margin: 0 auto 16px; line-height: 1.4; } .donations__why cite { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-style: normal; } .donations__why p { color: var(--text-sec); max-width: 580px; margin: 24px auto 0; } .donations__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 56px; } .donation-card { background: var(--card); border: 2px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s; } .donation-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow-md); } .donation-card__header { padding: 40px 40px 32px; background: linear-gradient(135deg, var(--card) 0%, var(--card-hover) 100%); flex: 1; } .donation-card__icon { width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid var(--gold-border); background: var(--gold-dim); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.6rem; margin-bottom: 24px; } .donation-card h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; margin-bottom: 14px; } .donation-card p { color: var(--text-sec); font-size: 1rem; line-height: 1.7; } .donation-card__verse { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1rem; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); line-height: 1.5; } .donation-card__cta { padding: 28px 40px; background: var(--always-black); display: flex; align-items: center; justify-content: center; } .donation-card__cta .btn--gold { width: 100%; justify-content: center; font-size: 0.82rem; padding: 17px; } .donations__security { text-align: center; margin-top: 36px; font-family: var(--font-ui); font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 8px; justify-content: center; } .donations__other { margin-top: 64px; text-align: center; } .donations__other p { color: var(--text-sec); margin-top: 16px; } .donations__other a { color: var(--gold); text-decoration: underline; text-decoration-color: var(--gold-border); } /* ============================================================ ANIMATIONS ============================================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes scrollPulse { 0%, 100% { opacity: 0.4; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.12); } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .about__grid { grid-template-columns: 1fr; } .about__image-wrap { max-width: 480px; margin: 0 auto; order: -1; } .about__image-wrap::after { display: none; } .services-grid { grid-template-columns: repeat(2, 1fr); } .services-full .services-grid { grid-template-columns: repeat(2, 1fr); } .find-us__info { grid-template-columns: 1fr 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } .trinity-grid { grid-template-columns: 1fr; } .faith-quotes__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav__links { display: none; } .lang-switcher { display: none; } .hamburger { display: flex; } .give__cards { grid-template-columns: 1fr; } .services-grid { grid-template-columns: 1fr; } .services-full .services-grid { grid-template-columns: 1fr; } .contact__layout { grid-template-columns: 1fr; } .find-us__info { grid-template-columns: 1fr; } .find-us__map-wrap { height: 300px; } .footer__grid { grid-template-columns: 1fr; gap: 32px; } .hero__cta { flex-direction: column; align-items: center; } .about__stats { flex-direction: column; gap: 20px; } .donations__cards { grid-template-columns: 1fr; } .faith-quotes__grid { grid-template-columns: 1fr; } .trinity-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .btn { padding: 13px 26px; } .contact__form { padding: 24px 18px; } .donation-card__header { padding: 28px 24px; } .donation-card__cta { padding: 22px 24px; } .give__card-top { padding: 28px 24px; } .give__card-footer { padding: 18px 24px; } } /* ============================================================ MISC UTILITIES ============================================================ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Smooth transition for theme changes on all key properties */ .nav, .footer, .about, .give, .contact, .find-us, .service-card, .give__card, .trinity-card, .faith-quote, .contact__form, .find-us__info-block { transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease); }