:root { --navy: #101B33; --navy-light: #1C2C52; --gold: #D9A441; --gold-light: #F2C868; --cream: #FAF5EC; --cream-light: #FFFCF6; --ink: #1A1712; --white: #FFFFFF; --line: #E6DCC8; /* Semantic tokens -- these are the roles that actually change between light and dark mode (page/card backgrounds, body text, muted text, borders, the gold-as-text accent used for small labels/links). The literal tokens above stay fixed in both themes: several of them (--navy, --white, --ink) are ALSO used elsewhere as intentionally always-dark backgrounds or text on those backgrounds -- the site header's nav-cta button, the hero/page-hero, the footer, navy icon badges -- and those specific declarations deliberately keep using the literal tokens directly, never these semantic ones, so they don't invert with the theme. */ --bg: var(--cream); --bg-subtle: var(--cream-light); --surface: var(--white); --text: var(--navy); --text-muted: #4A4438; --border: var(--line); --accent-text: #8A6420; --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --max-width: 1160px; --radius: 10px; --shadow-card: 0 2px 4px rgba(16, 27, 51, 0.08), 0 12px 28px -18px rgba(16, 27, 51, 0.3), 0 24px 44px -28px rgba(217, 164, 65, 0.18); --shadow-hero: 0 4px 8px rgba(16, 27, 51, 0.12), 0 24px 48px -20px rgba(16, 27, 51, 0.4), 0 36px 64px -30px rgba(217, 164, 65, 0.22); } /* Dark mode: only the semantic tokens above are redefined here -- the literal --navy/--gold/--white/etc. tokens are never touched, so every declaration still using them directly (header nav-cta, hero, footer, navy icon badges) stays exactly as designed in both themes. Two triggers: the OS-level preference (media query, when the visitor hasn't chosen explicitly) and a manual toggle (the data-theme attribute on , stored in localStorage -- see js/theme-init.js, which sets this before first paint, and the click handler in js/main.js). :not([data-theme="light"]) lets a manual "light" choice override a dark OS preference; the second block lets a manual "dark" choice override a light OS preference. Values computed relative to --navy (#101B33) rather than picked freehand, and every text/background pairing checked against the real WCAG contrast formula -- see PROJECT-LOG.md for the actual ratios. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0A0E1A; --bg-subtle: #131C34; --surface: #1B2542; --text: #F0EDE6; --text-muted: #A9B0C4; --border: #2E3A5C; --accent-text: var(--gold-light); } } :root[data-theme="dark"] { --bg: #0A0E1A; --bg-subtle: #131C34; --surface: #1B2542; --text: #F0EDE6; --text-muted: #A9B0C4; --border: #2E3A5C; --accent-text: var(--gold-light); } /* Cross-fade between pages instead of a hard flash-to-white. Browsers without support just ignore this and navigate as before -- no fallback code needed. Reduced-motion users get an instant swap. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.5em; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* Visible on keyboard focus only -- doesn't clutter mouse/touch use, but every interactive element gets a real, high-contrast focus ring. */ a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: var(--white); padding: 12px 20px; z-index: 100; border-radius: 0 0 6px 0; } .skip-link:focus { left: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 14px 28px; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 1rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } .btn-primary { background: var(--gold); color: var(--navy); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(217, 164, 65, 0.6); } .btn-secondary { background: transparent; color: var(--white); border: 2px solid rgba(255, 255, 255, 0.5); } .btn-secondary:hover { border-color: var(--white); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg-subtle); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; } .logo { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; text-decoration: none; color: var(--text); letter-spacing: 0.01em; } .main-nav { /* Groups the nav + header-actions (theme toggle, hamburger) together at the right edge, logo alone at the left -- an auto margin absorbs the free space ahead of this item regardless of the parent's justify-content, so adding header-actions as a third flex child doesn't push the nav toward the center. */ margin-left: auto; } .main-nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; } .main-nav a { text-decoration: none; font-weight: 500; font-size: 0.95rem; color: var(--text); } .main-nav a:hover { color: var(--gold); } .nav-cta { background: var(--navy); color: var(--white) !important; padding: 10px 20px; border-radius: 999px; font-weight: 600; } /* ---------- Header actions (theme toggle + mobile hamburger) ---------- */ .header-actions { display: flex; align-items: center; gap: 12px; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1.5px solid var(--border); background: transparent; color: var(--text); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } @media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } } .theme-toggle:hover { border-color: var(--gold); background-color: rgba(217, 164, 65, 0.12); } .theme-toggle svg { width: 17px; height: 17px; } /* Swap icon by theme: show the sun when dark (meaning "tap to go light"), the moon when light (meaning "tap to go dark") -- the icon always represents the mode you'd switch TO, the common convention. */ .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } .nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--text); padding: 4px 8px; } @media (max-width: 860px) { .nav-toggle { display: block; } .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-subtle); border-bottom: 1px solid var(--border); } .main-nav.is-open { display: block; } .main-nav ul { flex-direction: column; padding: 16px 24px 24px; gap: 18px; } } /* ---------- Hero ---------- */ .hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 100%); color: var(--white); padding: 100px 0 80px; text-align: center; } .hero-eyebrow { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; color: var(--gold-light); margin-bottom: 18px; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 16ch; margin-left: auto; margin-right: auto; color: var(--white); } .hero-sub { font-size: 1.15rem; max-width: 42ch; margin: 18px auto 0; opacity: 0.9; } .hero-verse { font-style: italic; opacity: 0.85; margin-top: 14px; font-size: 1.05rem; } .hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 36px; } /* ---------- Info bar (service times / location) ---------- */ .info-bar { background: var(--gold); color: var(--navy); } .info-bar .container { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; padding-top: 18px; padding-bottom: 18px; font-weight: 600; font-size: 0.95rem; } .info-bar .info-item { display: flex; align-items: center; gap: 8px; } /* ---------- Interior page hero ---------- */ .page-hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 100%); color: var(--white); padding: 64px 0 48px; text-align: center; } .page-hero h1 { color: var(--white); font-size: clamp(2rem, 4vw, 2.8rem); } .page-subnav { background: var(--bg-subtle); border-bottom: 1px solid var(--border); position: sticky; top: 65px; z-index: 40; } .page-subnav ul { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0; padding: 14px 0; justify-content: center; } .page-subnav a { text-decoration: none; font-size: 0.9rem; font-weight: 600; color: var(--text); } .page-subnav a:hover { color: var(--gold); } .lead.centered { font-size: 1.1rem; max-width: 68ch; margin: 0 auto; text-align: center; color: var(--text); } .brand-seal { display: block; max-width: 420px; width: 100%; height: auto; margin: 40px auto 0; border-radius: var(--radius); box-shadow: var(--shadow-hero); } /* ---------- Beliefs ---------- */ .beliefs-section { background: var(--surface); } .belief-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 860px) { .belief-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .belief-grid { grid-template-columns: 1fr; } } .belief-item h3 { color: var(--text); font-size: 1.1rem; } .belief-item p { color: var(--text-muted); font-size: 0.95rem; margin: 0; } /* ---------- Ministry detail grid (Connect page) ---------- */ .ministry-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 860px) { .ministry-detail-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .ministry-detail-grid { grid-template-columns: 1fr; } } .ministry-detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; scroll-margin-top: 130px; } .ministry-icon { font-size: 1.8rem; margin-bottom: 12px; } .ministry-detail h3 { color: var(--text); font-size: 1.1rem; } .ministry-detail p { color: var(--text-muted); font-size: 0.92rem; margin: 0 0 10px; } .ministry-detail p.ministry-verse { font-style: italic; color: var(--text-muted); font-size: 0.85rem; margin: 0; } /* ---------- Media archive ---------- */ p.note { font-size: 0.85rem; color: var(--text-muted); margin: 0; } /* ---------- CTA band ---------- */ .cta-section { background: var(--gold); text-align: center; } .cta-section h2 { color: var(--navy); } .cta-section p { color: #3A2E0F; margin-bottom: 24px; } /* .btn-primary is gold-on-navy by default, which disappears against this section's own gold background -- swap to navy-on-gold here specifically so the button stays visible without touching every page that uses it. */ .cta-section .btn-primary { background: var(--navy); color: var(--white); } .cta-section .btn-primary:hover { background: var(--navy-light); } /* ---------- Give ---------- */ .give-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 860px) { .give-grid { grid-template-columns: 1fr; } } .give-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; text-align: center; box-shadow: var(--shadow-card); } .give-card h3 { color: var(--text); font-size: 1.1rem; } .give-card p { color: var(--text-muted); font-size: 0.92rem; margin: 0 0 18px; } .qr-code { width: 160px; height: 160px; object-fit: contain; margin: 0 auto; border-radius: 8px; border: 1px solid var(--border); } .give-times { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--text); font-size: 0.9rem; } /* ---------- Contact grid ---------- */ .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; } @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } } .contact-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 20px; } .contact-item h3 { color: var(--text); font-size: 1.05rem; } .contact-item p { color: var(--text-muted); margin: 0; } /* ---------- Sections ---------- */ section { padding: 80px 0; } .section-heading { text-align: center; max-width: 640px; margin: 0 auto 48px; } .section-heading h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: var(--text); } .section-heading p { color: var(--text-muted); font-size: 1.05rem; } .welcome-section p.lead { font-size: 1.15rem; max-width: 62ch; margin: 0 auto; text-align: center; color: var(--text); } /* ---------- Engagement cards ---------- */ .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 960px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } } .card { background: var(--surface); border-radius: var(--radius); padding: 32px 24px; text-align: center; text-decoration: none; box-shadow: var(--shadow-card); border: 1px solid var(--border); } .card-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: var(--gold-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 1.4rem; } .card h3 { font-size: 1.15rem; color: var(--text); } .card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; } /* ---------- Ministries grid ---------- */ .ministry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 760px) { .ministry-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .ministry-grid { grid-template-columns: 1fr; } } .ministry-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; text-decoration: none; display: flex; align-items: center; gap: 14px; } .ministry-tile:hover { border-color: var(--gold); } .ministry-tile span.tile-name { font-weight: 600; color: var(--text); } /* ---------- Media / latest message ---------- */ .media-section { background: var(--navy); color: var(--white); } .media-section .section-heading h2 { color: var(--white); } .media-section .section-heading p { color: rgba(255,255,255,0.7); } .video-placeholder { max-width: 760px; margin: 0 auto; aspect-ratio: 16 / 9; background: var(--navy-light); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); font-size: 0.95rem; text-align: center; padding: 24px; } .live-cta { text-align: center; margin-bottom: 8px; } .video-embed { max-width: 760px; margin: 24px auto 0; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,0.15); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-embed-note { max-width: 760px; margin: 16px auto 0; text-align: center; font-size: 0.9rem; color: rgba(255,255,255,0.7); } .video-embed-note a { color: var(--white); } /* ---------- Leadership placeholder ---------- */ .leadership-card { max-width: 420px; margin: 0 auto; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); padding: 32px; text-align: center; } .leadership-avatar { width: 88px; height: 88px; border-radius: 50%; background: var(--bg-subtle); border: 2px solid var(--border); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.8rem; } .leadership-card p.note { font-size: 0.85rem; color: var(--text-muted); margin-top: 12px; } /* ---------- Leadership (real photos) ---------- */ .leader-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 640px; margin: 0 auto; } @media (max-width: 640px) { .leader-grid { grid-template-columns: 1fr; } } .leader-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; text-align: center; box-shadow: var(--shadow-card); display: block; text-decoration: none; } a.leader-card:hover { border-color: var(--gold); } .leader-grid-bios { max-width: 900px; } .leader-grid-bios .leader-card { text-align: left; } .leader-grid-bios .leader-card img { margin: 0 auto 18px; } .leader-grid-bios .leader-card h3 { text-align: center; } .leader-title { text-align: center; color: var(--accent-text); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; } .leader-grid-bios .leader-card p:not(.leader-title) { color: var(--text-muted); font-size: 0.95rem; } .leader-card img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; border: 3px solid var(--gold-light); } .leader-card h3 { color: var(--text); font-size: 1.1rem; margin-bottom: 4px; } .leader-card p.note { font-size: 0.85rem; color: var(--text-muted); margin: 0; } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: rgba(255,255,255,0.75); padding: 56px 0 32px; font-size: 0.9rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } } .site-footer h4 { color: var(--white); font-family: var(--font-body); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .site-footer a { color: rgba(255,255,255,0.75); text-decoration: none; } .site-footer a:hover { color: var(--gold-light); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; } .footer-bottom .scripture-notice { font-size: 0.72rem; color: rgba(255,255,255,0.5); line-height: 1.5; margin: 0 0 14px; max-width: 70ch; } .footer-bottom .copyright-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; color: rgba(255,255,255,0.5); } /* ---------- Scroll reveal ---------- */ /* Content is fully visible by default -- the hidden/animate-in state only applies once main.js has actually run and opted in via the `.js` class on . If JavaScript ever fails to load, errors out, or is blocked, every .reveal section still just renders normally instead of staying permanently invisible. Found by literally screenshotting the page and seeing the whole middle section blank before this fix existed -- not a hypothetical concern. */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Pathway (numbered step sequence) ---------- */ .pathway { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 980px; margin: 0 auto; position: relative; } .pathway::before { content: ""; position: absolute; top: 28px; left: calc(100% / 6); right: calc(100% / 6); height: 2px; background: var(--border); z-index: 0; } @media (max-width: 760px) { .pathway { grid-template-columns: 1fr; gap: 36px; } .pathway::before { top: 0; bottom: 0; left: 27px; right: auto; width: 2px; height: auto; } } .pathway-step { position: relative; z-index: 1; text-align: center; padding: 0 20px; } @media (max-width: 760px) { .pathway-step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; text-align: left; padding: 0; } } .pathway-number { width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: var(--gold-light); font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--border); } @media (max-width: 760px) { .pathway-number { margin: 0; } } .pathway-step h3 { color: var(--text); font-size: 1.15rem; margin-bottom: 8px; } .pathway-step p { color: var(--text-muted); font-size: 0.92rem; margin: 0; } .pathway-step a.pathway-link { display: inline-block; margin-top: 10px; font-size: 0.85rem; font-weight: 600; color: var(--accent-text); text-decoration: none; } .pathway-step a.pathway-link:hover { text-decoration: underline; } /* ---------- Quick links (pill row) ---------- */ .quick-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 48px; } .quick-link-pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 2px solid var(--text); color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.92rem; background: var(--surface); transition: background 0.15s ease, color 0.15s ease; } @media (prefers-reduced-motion: reduce) { .quick-link-pill { transition: none; } } .quick-link-pill:hover { background: var(--navy); color: var(--white); } /* ---------- Message archive cards (Media page) ---------- */ .archive-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 860px) { .archive-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .archive-card-grid { grid-template-columns: 1fr; } } .archive-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); } .archive-card-thumb { aspect-ratio: 16 / 9; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 100%); display: flex; align-items: center; justify-content: center; color: var(--gold-light); font-size: 1.6rem; } .archive-card-body { padding: 18px 20px; } .archive-card-body h3 { font-size: 1rem; color: var(--text); margin: 0 0 4px; } .archive-card-body p { font-size: 0.85rem; color: var(--text-muted); margin: 0; } .next-service-banner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-width: 640px; margin: 0 auto 56px; padding: 28px 32px; text-align: center; box-shadow: var(--shadow-card); } .next-service-banner .eyebrow { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem; color: var(--accent-text); margin-bottom: 8px; } .next-service-banner h3 { color: var(--text); font-size: 1.3rem; margin-bottom: 6px; } .next-service-banner p.note { margin-top: 10px; } /* ---------- Callout (Give page volunteer alternative) ---------- */ .callout { background: var(--surface); border: 2px dashed var(--border); border-radius: var(--radius); max-width: 640px; margin: 0 auto; padding: 32px; text-align: center; } .callout h3 { color: var(--text); font-size: 1.15rem; } .callout p { color: var(--text-muted); margin: 0 0 18px; }