@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Montserrat:wght@400;700&display=swap'); /* ────────────────────────────────────────────────────────── Bilingual paired-lang spans — used by SSR'd pages where the Worker emits both EN and ES strings inline. CSS hides whichever language isn't currently active on . The active lang is set pre-paint by an inline script in each SSR'd page reading localStorage, then maintained by applyTheme() in js/app.js. This pattern is SEO-friendly (both languages live in the markup) and flash-free (no JS swap on initial paint). ────────────────────────────────────────────────────────── */ html[lang="en"] [lang="es"] { display: none; } html[lang="es"] [lang="en"] { display: none; } /* Display headings can be theme-swapped via Tweaks */ h1, h2, h3, .hero-h1, .ns-hero h1, .ns-step-side h2, .ns-final h2, .page-header h1 { font-family: var(--heading-font); } :root { /* Accent (overridable via tweaks) */ --accent: #F97316; --accent-active: #EA6510; --accent-soft: #FED7AA; /* Heading font (overridable via tweaks) */ --heading-font: 'Inter', 'Airbnb Cereal VF', system-ui, sans-serif; /* Aliases used by inline page styles */ --brand: var(--accent); --brand-active: var(--accent-active); --ink: #222222; --muted: #6B6B6B; --border: #DDDDDD; /* Surface */ --canvas: #ffffff; --surface-soft: #f7f7f7; --surface-strong: #f2f2f2; /* Hairlines */ --hairline: #dddddd; --hairline-soft: #ebebeb; --border-strong: #c1c1c1; /* Ink */ --ink: #222222; --body: #3f3f3f; --muted: #6a6a6a; --muted-soft: #929292; --on-accent: #ffffff; --shadow-card: rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0; /* Spacing */ --xxs: 2px; --xs: 4px; --sm: 8px; --md: 12px; --base: 16px; --lg: 24px; --xl: 32px; --xxl: 48px; --section: 64px; /* Radii */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 32px; --r-full: 9999px; } /* Warm theme */ [data-warmth="warm"] { --canvas: #FBF8F4; --surface-soft: #F5F0E8; --surface-strong: #EFE9DE; } /* Accent variants */ [data-accent="coral"] { --accent: #FF385C; --accent-active: #E00B41; --accent-soft: #FFD1DA; } [data-accent="blue"] { --accent: #2563EB; --accent-active: #1D4ED8; --accent-soft: #BFDBFE; } [data-accent="teal"] { --accent: #0D9488; --accent-active: #0B7A70; --accent-soft: #99F6E4; } [data-accent="orange"] { --accent: #F97316; --accent-active: #EA6510; --accent-soft: #FED7AA; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--ink); font-family: 'Inter', 'Airbnb Cereal VF', Circular, -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif; font-size: 16px; line-height: 1.5; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; } /* ────────────────────────────────────────────────────────── Top Nav ────────────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--canvas); border-bottom: 1px solid var(--hairline-soft); } body:not(.has-video-hero) { padding-top: 80px; } .nav-inner { max-width: 1440px; margin: 0 auto; height: 80px; padding: 0 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--lg); } .nav-logo { display: flex; align-items: center; gap: 10px; font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); } .nav-logo .nav-logo-text { display: inline-flex; align-items: baseline; } .nav-logo .hb-light { font-weight: 400; margin: 0 0.15em; } .nav-logo-mark { width: 36px; height: 36px; background: #1f1f1f url("../assets/mtb_main_logo.png") center/72% no-repeat; border-radius: var(--r-full); } .nav-tabs { display: flex; gap: var(--xl); justify-content: center; } .nav-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--muted); padding: 10px 4px; border-bottom: 2px solid transparent; white-space: nowrap; position: relative; } .nav-tab:hover { color: var(--ink); text-decoration: none; } .nav-tab .tab-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); } .nav-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); } .nav-tab.is-active .tab-icon { color: var(--ink); } .nav-tab .new-tag { position: absolute; top: 4px; right: -10px; background: var(--canvas); color: var(--ink); font-size: 8px; font-weight: 700; letter-spacing: 0.32px; text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-full); box-shadow: var(--shadow-card); } .nav-utils { display: flex; gap: var(--sm); justify-content: flex-end; align-items: center; } .nav-utils a, .nav-utils button { font-size: 14px; font-weight: 600; padding: 12px 16px; border-radius: var(--r-full); white-space: nowrap; } .nav-utils a:hover, .nav-utils button:hover { background: var(--surface-soft); text-decoration: none; } .nav-utils .lang-toggle { position: relative; display: inline-flex; align-items: stretch; padding: 3px; border: 1px solid var(--hairline); border-radius: var(--r-full); background: transparent; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; line-height: 1; cursor: pointer; isolation: isolate; } .nav-utils .lang-toggle:hover { background: transparent; } .nav-utils .lang-toggle .lang-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--ink); border-radius: var(--r-full); transition: transform 240ms cubic-bezier(0.32, 0.72, 0.24, 1.04); z-index: 0; } .nav-utils .lang-toggle[data-lang="es"] .lang-thumb { transform: translateX(100%); } .nav-utils .lang-toggle .lang-opt { position: relative; z-index: 1; flex: 1; min-width: 36px; padding: 7px 12px; text-align: center; color: var(--muted); transition: color 200ms ease; } .nav-utils .lang-toggle .lang-opt.is-active { color: var(--canvas); } /* Hamburger trigger — hidden on desktop, revealed at the mobile breakpoint below. Three short bars, sits in .nav-utils so it slots in alongside the Give pill / lang toggle on the right. */ .nav-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; background: transparent; border: 1px solid var(--hairline); border-radius: var(--r-full); cursor: pointer; padding: 0; flex: 0 0 auto; } .nav-burger:hover { background: var(--surface-soft); } .nav-burger-bar { display: block; width: 18px; height: 1.5px; /* Inherits from .nav-burger color, so the transparent-over-hero rules in index.html flip the bars to white via the existing color cascade. */ background: currentColor; border-radius: 2px; transition: background-color .3s ease; } /* ────────────────────────────────────────────────────────── Mobile drawer — slides in from the right, full-height panel capped at 420px on tablets/large phones. ────────────────────────────────────────────────────────── */ .nav-mobile-backdrop { position: fixed; inset: 0; z-index: 1099; background: rgba(20, 12, 8, 0.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity 280ms ease; } .nav-mobile-backdrop.is-open { opacity: 1; } .nav-mobile-backdrop[hidden] { display: none; } .nav-mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px; background: var(--canvas); z-index: 1100; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 320ms cubic-bezier(0.32, 0.72, 0.24, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: -12px 0 40px rgba(20, 12, 8, 0.12); } .nav-mobile-menu.is-open { transform: translateX(0); } .nav-mobile-menu[hidden] { display: none; } .nav-mobile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--md); padding: 18px 22px; border-bottom: 1px solid var(--hairline-soft); flex: 0 0 auto; } .nav-mobile-close { width: 40px; height: 40px; border-radius: var(--r-full); display: grid; place-items: center; background: transparent; border: 1px solid var(--hairline); cursor: pointer; color: var(--ink); flex: 0 0 auto; } .nav-mobile-close:hover { background: var(--surface-soft); } .nav-mobile-primary { display: flex; flex-direction: column; padding: 28px 26px 16px; gap: 8px; flex: 0 0 auto; } .nav-mobile-link { font-family: var(--heading-font); font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); padding: 12px 0; } .nav-mobile-link:hover { color: var(--accent); text-decoration: none; } .nav-mobile-link.is-active { color: var(--accent); } .nav-mobile-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; padding: 24px 26px; margin-top: auto; border-top: 1px solid var(--hairline-soft); flex: 0 0 auto; } .nav-mobile-col h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 10px; } .nav-mobile-col a { display: block; padding: 5px 0; font-size: 15px; color: var(--ink); } .nav-mobile-col a:hover { color: var(--accent); text-decoration: none; } .nav-mobile-col p { margin: 0 0 4px; font-size: 13px; color: var(--muted); line-height: 1.45; } .nav-mobile-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px calc(22px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hairline-soft); background: var(--surface-soft); flex: 0 0 auto; } .nav-mobile-foot .lang-toggle { position: relative; display: inline-flex; align-items: stretch; padding: 3px; border: 1px solid var(--hairline); border-radius: var(--r-full); background: transparent; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; line-height: 1; cursor: pointer; isolation: isolate; } .nav-mobile-foot .lang-toggle .lang-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--ink); border-radius: var(--r-full); transition: transform 240ms cubic-bezier(0.32, 0.72, 0.24, 1.04); z-index: 0; } .nav-mobile-foot .lang-toggle[data-lang="es"] .lang-thumb { transform: translateX(100%); } .nav-mobile-foot .lang-toggle .lang-opt { position: relative; z-index: 1; flex: 1; min-width: 36px; padding: 7px 12px; text-align: center; color: var(--muted); transition: color 200ms ease; } .nav-mobile-foot .lang-toggle .lang-opt.is-active { color: var(--canvas); } .nav-mobile-give { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 600; padding: 13px 28px; border-radius: var(--r-full); min-width: 130px; } .nav-mobile-give:hover { background: var(--accent-active); color: var(--on-accent); text-decoration: none; } body.nav-mobile-locked { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .nav-mobile-menu, .nav-mobile-backdrop { transition: none; } } /* Mobile breakpoint — collapse the desktop tabs / Give / lang-toggle and reveal the hamburger. The drawer above carries everything that disappears. */ @media (max-width: 880px) { .nav-inner { grid-template-columns: auto 1fr auto; padding: 0 20px; height: 64px; } body:not(.has-video-hero) { padding-top: 64px; } .nav-tabs { display: none; } .nav-utils > .nav-give, .nav-utils > .lang-toggle { display: none; } .nav-burger { display: inline-flex; margin-right: -20px; } } /* ────────────────────────────────────────────────────────── Plan Your Visit pill (search bar) ────────────────────────────────────────────────────────── */ .visit-pill { margin: 0 auto; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-full); height: 68px; display: flex; align-items: center; max-width: 880px; box-shadow: var(--shadow-card); } .visit-seg { flex: 1; padding: 14px 28px; border-radius: var(--r-full); cursor: pointer; display: flex; flex-direction: column; gap: 2px; position: relative; } .visit-seg:hover { background: var(--surface-strong); } .visit-seg + .visit-seg::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--hairline); } .visit-seg:hover + .visit-seg::before, .visit-seg:hover::before { background: transparent; } .visit-seg .label { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: 0; } .visit-seg .value { font-size: 14px; color: var(--muted); } .visit-seg.has-value .value { color: var(--ink); } .visit-seg.search-cell { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; margin-left: auto; } .visit-orb { width: 52px; height: 52px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; transition: width .2s ease; } .visit-orb:hover { background: var(--accent-active); } .visit-seg.search-cell .label { color: var(--canvas); display: none; } /* ────────────────────────────────────────────────────────── Buttons ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 14px 24px; border-radius: var(--r-sm); font-size: 16px; font-weight: 500; font-family: inherit; cursor: pointer; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-active); text-decoration: none; } .btn-secondary { background: var(--canvas); color: var(--ink); border: 1px solid var(--ink); } .btn-secondary:hover { background: var(--surface-soft); text-decoration: none; } .btn-tertiary { color: var(--ink); text-decoration: underline; padding: 8px 0; height: auto; } .btn-pill { border-radius: var(--r-full); height: 40px; padding: 10px 20px; font-size: 14px; } .btn-icon-circle { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--canvas); display: grid; place-items: center; border: 1px solid var(--hairline); } /* ────────────────────────────────────────────────────────── Layout primitives ────────────────────────────────────────────────────────── */ .container { max-width: 1440px; margin: 0 auto; padding: 0 40px; } .container-narrow { max-width: 1080px; margin: 0 auto; padding: 0 40px; } @media (max-width: 720px) { .container, .container-narrow { padding: 0 20px; } } .section { padding: var(--section) 0; } .section-tight { padding: 40px 0; } .section-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: var(--lg); gap: var(--lg); } .section-head h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.5px; margin: 0; line-height: 1.2; } .section-head .show-all { font-size: 14px; font-weight: 500; text-decoration: underline; } .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--md); } /* ────────────────────────────────────────────────────────── Category strip (ministry filters) ────────────────────────────────────────────────────────── */ .cat-strip { border-bottom: 1px solid var(--hairline-soft); position: relative; } .cat-strip-inner { max-width: 1440px; margin: 0 auto; padding: 16px 40px; display: flex; gap: var(--xl); overflow-x: auto; scrollbar-width: none; } .cat-strip-inner::-webkit-scrollbar { display: none; } .cat-tab { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px; font-size: 12px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; min-width: 56px; } .cat-tab:hover { color: var(--ink); text-decoration: none; } .cat-tab .cat-icon { color: var(--muted); } .cat-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); } .cat-tab.is-active .cat-icon { color: var(--ink); } /* ────────────────────────────────────────────────────────── Cards (Ministries / Events / Teaching) ────────────────────────────────────────────────────────── */ .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lg) var(--base); } .card-grid-3 { grid-template-columns: repeat(3, 1fr); } .card-grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1128px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 880px) { .card-grid, .card-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .card-grid, .card-grid-3, .card-grid-2 { grid-template-columns: 1fr; } } .card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; } .card:hover { text-decoration: none; } .card-photo { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--surface-strong); } .card-photo img { width: 100%; height: 100%; object-fit: cover; } .card-photo .badge { position: absolute; top: 12px; left: 12px; background: var(--canvas); color: var(--ink); font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-full); box-shadow: var(--shadow-card); } .card-photo .heart { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; display: grid; place-items: center; color: var(--canvas); filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); } .card-photo.tall { aspect-ratio: 4 / 5; } .card-photo.wide { aspect-ratio: 16 / 10; } /* Designed thumbnail placeholders (no photos) */ .thumb-designed { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; color: #fff; position: relative; overflow: hidden; } .thumb-designed::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 50%), radial-gradient(circle at 80% 100%, rgba(0,0,0,.25), transparent 50%); pointer-events: none; } .thumb-verse { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; position: relative; } .thumb-title { font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.3px; text-wrap: balance; position: relative; max-width: 90%; } .thumb-event-day { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -2px; position: relative; } .thumb-event-mo { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.9; position: relative; } .card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sm); padding-top: 10px; } .card-title { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; } .card-sub { font-size: 14px; color: var(--muted); margin: 0; } .card-price { font-size: 14px; color: var(--ink); } .card-price strong { font-weight: 600; } /* placeholder photo for people */ .ph-people { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(160deg, var(--accent-soft), var(--surface-strong)); color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0.2px; text-align: center; padding: 16px; position: relative; } .ph-people::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 35%, rgba(255,255,255,.4), transparent 40%), radial-gradient(circle at 70% 65%, rgba(0,0,0,.05), transparent 50%); pointer-events: none; } .ph-people span { position: relative; background: var(--canvas); padding: 4px 10px; border-radius: var(--r-full); font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; } /* ────────────────────────────────────────────────────────── Date card (events) ────────────────────────────────────────────────────────── */ .date-block { position: absolute; bottom: 12px; left: 12px; background: var(--canvas); border-radius: var(--r-md); padding: 8px 12px; text-align: center; min-width: 56px; box-shadow: var(--shadow-card); } .date-block .month { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); line-height: 1; } .date-block .day { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--ink); margin-top: 2px; } /* ────────────────────────────────────────────────────────── Hero ────────────────────────────────────────────────────────── */ .hero { padding: 56px 0 32px; } .hero h1 { font-size: 56px; font-weight: 600; line-height: 1.05; letter-spacing: -1.5px; text-align: center; margin: 0 auto 14px; max-width: 880px; text-wrap: balance; } .hero .sub { text-align: center; font-size: 17px; color: var(--body); max-width: 640px; margin: 0 auto 32px; } .service-strip { display: flex; justify-content: center; gap: var(--xl); flex-wrap: wrap; margin: 32px 0 24px; font-size: 14px; color: var(--muted); } .service-strip strong { color: var(--ink); font-weight: 600; } .service-strip .dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: var(--r-full); margin-right: 8px; vertical-align: middle; } /* ────────────────────────────────────────────────────────── Host card (staff) ────────────────────────────────────────────────────────── */ .host-card { display: flex; gap: var(--lg); align-items: center; background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: var(--r-md); padding: var(--lg); box-shadow: var(--shadow-card); } .host-avatar { width: 80px; height: 80px; border-radius: var(--r-full); background: var(--accent-soft); display: grid; place-items: center; font-size: 22px; font-weight: 700; color: var(--accent-active); flex-shrink: 0; } .host-info { flex: 1; min-width: 0; } .host-name { font-size: 18px; font-weight: 600; margin: 0 0 2px; } .host-role { font-size: 14px; color: var(--muted); margin: 0 0 8px; } .host-meta { display: flex; gap: var(--base); font-size: 13px; color: var(--muted); flex-wrap: wrap; } .host-meta span { display: inline-flex; align-items: center; gap: 4px; } /* ────────────────────────────────────────────────────────── Staff page — index (/staff) New components for the redesigned staff index. The .host-card above is preserved because /give still uses it as an aside card. ────────────────────────────────────────────────────────── */ /* Tinted avatar — initials circle parameterized by --person-tint. Default sizes to 96px; overrides on a wrapper class adjust width, height, and font-size for hero (320px) or large lead-band (240px). */ .staff-avatar { --person-tint: var(--accent-soft); width: 96px; height: 96px; border-radius: var(--r-full); position: relative; display: grid; place-items: center; flex-shrink: 0; background: radial-gradient( circle at 35% 35%, color-mix(in srgb, var(--person-tint) 25%, #ffffff) 0%, color-mix(in srgb, var(--person-tint) 70%, #ffffff) 55%, color-mix(in srgb, var(--person-tint) 92%, #b08a5c) 100% ); font-weight: 700; letter-spacing: -0.5px; color: color-mix(in srgb, var(--person-tint) 50%, var(--ink)); font-size: 28px; overflow: hidden; isolation: isolate; } .staff-avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.45), transparent 55%); pointer-events: none; } /* When a photo is uploaded, render it edge-to-edge inside the avatar circle. The tint gradient stays as a fallback if the image fails to load. The decorative ::after sheen still applies on top. */ .staff-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; } /* Lead pastor band — asymmetric (avatar left, identity + lede right) */ .staff-lead-band { background: var(--surface-soft); padding: var(--section) 0; border-bottom: 1px solid var(--hairline-soft); } .staff-lead-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--xxl); align-items: center; } .staff-lead-avatar { width: 240px; height: 240px; font-size: 64px; } .staff-lead-content { min-width: 0; } .staff-lead-name { font-size: clamp(32px, 3.6vw, 44px); font-weight: 600; letter-spacing: -1px; line-height: 1.1; margin: 0 0 var(--sm); color: var(--ink); } .staff-lead-role { font-size: 18px; color: var(--muted); margin: 0 0 var(--md); } .staff-lead-pills { display: flex; flex-wrap: wrap; gap: var(--sm); margin: 0 0 var(--lg); } .staff-lead-pill { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-full); padding: 5px 12px; font-size: 13px; font-weight: 500; color: var(--body); } .staff-lead-tagline { font-size: 18px; font-style: italic; color: var(--body); line-height: 1.5; margin: 0; max-width: 540px; } .staff-lead-link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--lg); font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; } .staff-lead-link:hover { text-decoration: underline; } @media (max-width: 720px) { .staff-lead-grid { grid-template-columns: 1fr; gap: var(--xl); justify-items: center; text-align: center; } .staff-lead-avatar { width: 160px; height: 160px; font-size: 44px; } .staff-lead-pills { justify-content: center; } .staff-lead-tagline { text-align: center; } } /* Section heading block on /staff (eyebrow + h2) */ .staff-section-head { margin-bottom: var(--xl); max-width: 720px; } .staff-section-head .eyebrow { margin-bottom: var(--xs); } .staff-section-head h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.2; margin: 0; } /* Optional soft band wrapper for the leaders section */ .staff-band-soft { background: var(--surface-soft); padding: var(--section) 0; border-top: 1px solid var(--hairline-soft); } /* Pastoral / leaders grid card (named pastor) */ .staff-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--xs); background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: var(--r-md); padding: var(--xl) var(--lg); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; color: var(--ink); text-decoration: none; } .staff-card:hover { transform: translateY(-2px); border-color: var(--hairline); box-shadow: var(--shadow-card); text-decoration: none; } .staff-card-name { font-size: 17px; font-weight: 600; margin: var(--sm) 0 0; color: var(--ink); } .staff-card-role { font-size: 14px; color: var(--muted); margin: 2px 0 var(--xs); } .staff-card-pill { display: inline-block; background: var(--surface-soft); border-radius: var(--r-full); padding: 3px 10px; font-size: 12px; font-weight: 500; color: var(--muted); } .staff-card-since { font-size: 13px; color: var(--muted); margin: 4px 0 0; display: inline-flex; align-items: center; gap: 6px; } .staff-card-since::before { content: ""; width: 5px; height: 5px; border-radius: var(--r-full); background: var(--accent); flex-shrink: 0; } /* Open-role card (no name; role title + Volunteer CTA) */ .staff-open-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--xs); background: var(--canvas); border: 1.5px dashed var(--hairline); border-radius: var(--r-md); padding: var(--xl) var(--lg); color: var(--ink); transition: border-color 160ms ease, background 160ms ease; text-decoration: none; } .staff-open-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 30%, var(--canvas)); text-decoration: none; } .staff-open-circle { width: 96px; height: 96px; border-radius: var(--r-full); background: var(--surface-soft); display: grid; place-items: center; font-size: 32px; color: var(--muted); font-weight: 300; border: 1px dashed var(--hairline); flex-shrink: 0; } .staff-open-role { font-size: 17px; font-weight: 600; margin: var(--sm) 0 var(--xs); color: var(--ink); } .staff-open-status { font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted-soft); margin: 0 0 var(--xs); } .staff-open-cta { font-size: 13px; font-weight: 600; color: var(--accent); margin: 0; } /* Anchor "Want to lead?" CTA card (dark, fills the last grid cell) */ .staff-anchor-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--xs); background: var(--ink); color: var(--canvas); border-radius: var(--r-md); padding: var(--xl) var(--lg); transition: background 160ms ease; text-decoration: none; } .staff-anchor-card:hover { background: color-mix(in srgb, var(--ink) 82%, var(--accent)); text-decoration: none; } .staff-anchor-circle { width: 96px; height: 96px; border-radius: var(--r-full); background: var(--accent); display: grid; place-items: center; font-size: 40px; font-weight: 300; color: #fff; flex-shrink: 0; } .staff-anchor-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255,255,255,0.7); margin: var(--sm) 0 var(--xs); } .staff-anchor-title { font-size: 17px; font-weight: 600; margin: 0 0 var(--xs); color: var(--canvas); line-height: 1.3; max-width: 220px; } .staff-anchor-cta { font-size: 14px; color: var(--accent-soft); margin: 0; font-weight: 500; } /* Grid containers — 4-up at desktop, 2-up tablet, 1-up mobile */ .staff-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lg); } @media (max-width: 1100px) { .staff-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .staff-grid-4 { grid-template-columns: 1fr; } } /* ────────────────────────────────────────────────────────── Plan-your-visit detail block ────────────────────────────────────────────────────────── */ .visit-detail { background: var(--surface-soft); border-radius: var(--r-lg); padding: var(--xxl); } .visit-detail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--xl); } @media (max-width: 880px) { .visit-detail-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .visit-detail { padding: var(--lg); } } .visit-step h3 { font-size: 20px; font-weight: 600; margin: var(--base) 0 6px; } .visit-step p { color: var(--body); font-size: 15px; margin: 0; } .step-num { width: 36px; height: 36px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; } /* ────────────────────────────────────────────────────────── /about — Section background rhythm (alternating tones) white → soft → warm → soft → white-with-soft-tray ────────────────────────────────────────────────────────── */ /* "We are family" manifesto — replaces the old story section. Two-column band: hands-circle video on the left, eyebrow/headline/body/verse on the right. Subtle warm tint differentiates it from the white page header. */ .about-family { background: color-mix(in srgb, var(--surface-soft) 30%, var(--canvas)); border-bottom: 1px solid var(--hairline-soft); } .about-family .container-narrow { max-width: 1180px; } .about-family-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: start; } @media (max-width: 880px) { .about-family-grid { grid-template-columns: 1fr; gap: var(--xl); } } .about-family-photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 492 / 804; background: var(--surface-strong); position: sticky; top: 100px; } @media (max-width: 880px) { .about-family-photo { position: static; max-width: 480px; margin: 0 auto; } } .about-family-video { width: 100%; height: 100%; object-fit: cover; display: block; } .about-family-eyebrow { margin: 0 0 20px; } .about-family-h { font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: clamp(44px, 6.6vw, 92px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.95; color: var(--ink); margin: 0 0 var(--xl); } .about-family-body { display: flex; flex-direction: column; gap: var(--lg); margin: 0 0 var(--xxl); font-size: 18px; line-height: 1.65; color: var(--ink); } .about-family-body p { margin: 0; } .about-family-body strong { font-weight: 700; color: var(--ink); } .about-family-verse { margin: 0; border-top: 1px solid var(--hairline-soft); padding-top: var(--xl); } .about-family-quote { font-family: 'Cardo', Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.4; color: var(--accent); margin: 0 0 var(--lg); letter-spacing: -0.1px; text-wrap: balance; } .about-family-verse figcaption { display: flex; align-items: baseline; gap: var(--base); } .about-family-attrib { font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 16px; color: var(--ink); } .about-family-cite { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; } @media (max-width: 720px) { .about-family-h { font-size: 44px; letter-spacing: 0.01em; } .about-family-body { font-size: 16px; } } /* ────────────────────────────────────────────────────────── /about — "What we believe" doctrine grid (centerpiece) Sits on a subtle warm-accent wash so white cards lift. 3×2 desktop / 2×2 tablet / 1×6 mobile ────────────────────────────────────────────────────────── */ /* Values ticker — typographic marquee that sits between the family manifesto and the creed grid. Single-direction loop, edge fades, pause on hover/focus, scroll fallback when reduced motion is requested. */ .about-values { background: var(--canvas); border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); padding: clamp(56px, 7vw, 96px) 0; overflow: hidden; } .values-eyebrow { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.5vw, 36px); font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: clamp(24px, 3.4vw, 44px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); margin: 0 0 clamp(28px, 3.5vw, 56px); line-height: 1; text-align: center; } .values-eyebrow::before, .values-eyebrow::after { content: ''; flex: 1; max-width: 240px; height: 1.5px; } .values-eyebrow::before { background: linear-gradient(90deg, transparent, var(--accent) 90%); } .values-eyebrow::after { background: linear-gradient(270deg, transparent, var(--accent) 90%); } .values-ticker { position: relative; overflow: hidden; padding: 4px 0; } .values-ticker::before, .values-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none; } .values-ticker::before { left: 0; background: linear-gradient(90deg, var(--canvas), transparent); } .values-ticker::after { right: 0; background: linear-gradient(270deg, var(--canvas), transparent); } .values-ticker-track { display: flex; align-items: center; width: max-content; gap: clamp(28px, 3vw, 56px); padding: 0 24px; animation: valuesTickerScroll 55s linear infinite; will-change: transform; } .values-ticker:hover .values-ticker-track, .values-ticker:focus-within .values-ticker-track { animation-play-state: paused; } @keyframes valuesTickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .values-item { display: inline-flex; align-items: baseline; gap: 0.32em; font-size: clamp(22px, 3.4vw, 44px); line-height: 1; color: var(--ink); white-space: nowrap; } .values-prefix { font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .values-subject { font-family: 'Caveat', 'Brush Script MT', cursive; font-weight: 700; font-size: 1.55em; letter-spacing: 0; text-transform: none; line-height: 0.85; color: var(--ink); } .values-sep { color: var(--accent); font-size: clamp(18px, 2.4vw, 28px); line-height: 1; opacity: 0.8; } @media (prefers-reduced-motion: reduce) { .values-ticker-track { animation: none; } .values-ticker { overflow-x: auto; -webkit-overflow-scrolling: touch; } } .creed-section { background: color-mix(in srgb, var(--accent-soft) 22%, var(--canvas)); border-bottom: 1px solid var(--hairline-soft); } .creed-head { max-width: 720px; margin: 0 auto var(--xxl); text-align: center; } .creed-head .eyebrow { margin-bottom: var(--sm); } .creed-head h2 { font-family: var(--heading-font); font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -0.8px; line-height: 1.15; margin: 0 0 var(--md); text-wrap: balance; } .creed-head p { font-size: 16px; color: var(--muted); line-height: 1.55; margin: 0 auto; max-width: 560px; } .creed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lg); } @media (max-width: 980px) { .creed-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .creed-grid { grid-template-columns: 1fr; } } .creed-card { position: relative; background: var(--canvas); border: 1px solid var(--hairline-soft); border-top: 2px solid var(--accent); border-radius: var(--r-md); padding: var(--xl); box-shadow: 0 1px 2px rgba(120, 80, 30, .04), 0 4px 14px rgba(120, 80, 30, .05); transition: box-shadow .18s ease, transform .18s ease; } .creed-card:hover { box-shadow: 0 4px 8px rgba(120, 80, 30, .06), 0 10px 24px rgba(120, 80, 30, .08); transform: translateY(-2px); } .creed-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-full); background: var(--canvas); border: 1px solid var(--hairline); color: var(--accent); margin-bottom: var(--md); } .creed-mark svg { width: 24px; height: 24px; display: block; } .creed-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; margin: 0 0 var(--xs); color: var(--ink); } .creed-card p { font-size: 15px; color: var(--body); line-height: 1.55; margin: 0; } /* ────────────────────────────────────────────────────────── /about — Lead-pastor preview (modifier on .staff-lead-band) Smaller avatar, no pills, two link CTAs side-by-side. ────────────────────────────────────────────────────────── */ .about-lead-band .staff-lead-avatar { width: 160px; height: 160px; font-size: 44px; } .about-lead-band .staff-lead-name { font-size: clamp(28px, 2.6vw, 34px); } .about-lead-band .staff-lead-tagline { font-style: normal; color: var(--body); font-size: 16px; margin: 0 0 var(--sm); } .about-lead-band .about-lead-quiet { font-size: 14px; font-style: italic; color: var(--muted); margin: 0 0 var(--md); } .about-lead-band .about-lead-links { display: flex; flex-wrap: wrap; gap: var(--xl); margin-top: var(--md); } .about-lead-band .about-lead-links .staff-lead-link { margin-top: 0; } @media (max-width: 720px) { .about-lead-band .about-lead-links { justify-content: center; gap: var(--lg); } } /* ────────────────────────────────────────────────────────── /about — Visit CTA soft band (light tray, not dark like .give-band) ────────────────────────────────────────────────────────── */ .visit-soft-band { background: var(--surface-soft); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); padding: var(--xxl); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--xxl); align-items: center; } @media (max-width: 880px) { .visit-soft-band { grid-template-columns: 1fr; } } .visit-soft-copy h2 { font-family: var(--heading-font); font-size: clamp(26px, 2.8vw, 32px); font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; margin: 0 0 var(--sm); color: var(--ink); } .visit-soft-copy p { font-size: 16px; color: var(--body); line-height: 1.5; margin: 0; max-width: 480px; } .visit-soft-actions { display: flex; flex-wrap: wrap; gap: var(--md); justify-content: flex-end; } @media (max-width: 880px) { .visit-soft-actions { justify-content: flex-start; } } /* ────────────────────────────────────────────────────────── Give band ────────────────────────────────────────────────────────── */ .give-band { background: var(--ink); color: var(--canvas); border-radius: var(--r-lg); padding: var(--xxl); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--xxl); align-items: center; } @media (max-width: 880px) { .give-band { grid-template-columns: 1fr; } } .give-band-cta { display: flex; gap: 12px; flex-wrap: wrap; } .give-band h2 { font-size: 36px; font-weight: 600; letter-spacing: -0.8px; line-height: 1.15; margin: 0 0 var(--base); color: var(--canvas); } .give-band p { color: rgba(255,255,255,.8); font-size: 16px; margin: 0 0 var(--lg); } .give-band .btn-primary { background: var(--accent); } .give-band .btn-secondary { background: transparent; color: var(--canvas); border-color: var(--canvas); } /* Scripture verse panel — replaces the dollar-amount buttons on the home give band. */ .give-band .give-verse { margin: 0; padding: 28px 32px; border-left: 2px solid var(--accent); display: flex; flex-direction: column; gap: var(--base); } .give-band .give-verse-text { font-family: 'Cardo', Georgia, 'Times New Roman', serif; font-size: 22px; line-height: 1.45; letter-spacing: -0.1px; font-style: italic; color: rgba(255,255,255,0.94); margin: 0; text-wrap: balance; } .give-band .give-verse-cite { font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-soft); margin: 0; } /* Mobile: tighten outer paddings, soften the verse, and let the CTA buttons stretch to the card edge so they read as substantial calls-to-action. */ @media (max-width: 720px) { .give-band { padding: var(--lg); gap: var(--lg); } .give-band h2 { font-size: 28px; letter-spacing: -0.4px; } .give-band p { font-size: 15px; } .give-band .give-verse { padding: 18px 20px; } .give-band .give-verse-text { font-size: 18px; line-height: 1.5; } .give-band-cta { flex-direction: column; align-items: stretch; } .give-band-cta .btn { width: 100%; } } .give-stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md); } .give-amount { border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-sm); padding: var(--base); text-align: center; font-size: 18px; font-weight: 600; } .give-amount:hover { border-color: var(--accent); } /* ────────────────────────────────────────────────────────── Footer ────────────────────────────────────────────────────────── */ .footer { background: var(--canvas); border-top: 1px solid var(--hairline-soft); padding: 48px 0 24px; } .footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--xl); } @media (max-width: 880px) { .footer-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr; gap: var(--lg); } } .footer-col h4 { font-size: 14px; font-weight: 600; margin: 0 0 var(--base); } .footer-col a { display: block; font-size: 14px; color: var(--muted); padding: 6px 0; } .footer-col a:hover { color: var(--ink); text-decoration: underline; } .footer-brand .name { font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); margin: 0 0 8px; } .footer-brand .name .hb-light { font-weight: 400; margin: 0 0.15em; } .footer-brand p { font-size: 13px; color: var(--muted); margin: 0 0 var(--base); max-width: 300px; line-height: 1.5; } /* Visit-us column: campus blocks */ .footer-visit-us .footer-campus { margin-bottom: 12px; } .footer-campus-name { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 3px; } .footer-campus-addr { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 0 0 3px; line-height: 1.4; } .footer-campus-time { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.4; } .footer-campus-shared { font-size: 12px; color: var(--muted); font-style: italic; margin: 4px 0 0; line-height: 1.4; } /* Legal row: copyright | language | social */ .footer-legal { border-top: 1px solid var(--hairline-soft); margin-top: var(--xl); padding-top: var(--lg); font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--base); } .footer-legal-copy { flex: 1 1 auto; } .footer-legal a { color: var(--muted); } /* Footer language toggle (mirrors .nav-utils .lang-toggle, slightly tighter) */ .footer-legal .lang-toggle { position: relative; display: inline-flex; align-items: stretch; padding: 3px; border: 1px solid var(--hairline); border-radius: var(--r-full); background: transparent; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; line-height: 1; cursor: pointer; isolation: isolate; } .footer-legal .lang-toggle:hover { background: transparent; } .footer-legal .lang-toggle .lang-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--ink); border-radius: var(--r-full); transition: transform 240ms cubic-bezier(0.32, 0.72, 0.24, 1.04); z-index: 0; } .footer-legal .lang-toggle[data-lang="es"] .lang-thumb { transform: translateX(100%); } .footer-legal .lang-toggle .lang-opt { position: relative; z-index: 1; flex: 1; min-width: 32px; padding: 6px 10px; text-align: center; color: var(--muted); transition: color 200ms ease; } .footer-legal .lang-toggle .lang-opt.is-active { color: var(--canvas); } /* Footer social icons */ .footer-social { display: inline-flex; align-items: center; gap: 14px; } .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--muted); border-radius: var(--r-full); transition: color 160ms ease, background 160ms ease; } .footer-social-link:hover { color: var(--ink); background: var(--hairline-soft); text-decoration: none; } .footer-social-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ────────────────────────────────────────────────────────── Page header (inner pages) ────────────────────────────────────────────────────────── */ .page-header { padding: 56px 0 32px; border-bottom: 1px solid var(--hairline-soft); } .page-header h1 { font-size: 44px; font-weight: 600; letter-spacing: -1px; line-height: 1.1; margin: 0 0 var(--md); text-wrap: balance; } .page-header p { font-size: 17px; color: var(--body); max-width: 720px; margin: 0; line-height: 1.5; } /* ────────────────────────────────────────────────────────── Live hero (used on /teaching). Two states driven by JS: [data-state="live"] → embedded YouTube stream [data-state="countdown"] → next-service countdown card ────────────────────────────────────────────────────────── */ .live-hero { padding: 48px 0 40px; border-bottom: 1px solid var(--hairline-soft); } .live-hero-inner { max-width: 960px; margin: 0 auto; text-align: center; } .live-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .live-hero-eyebrow-live { color: #DC2626; } .live-hero-pulse { width: 8px; height: 8px; border-radius: 50%; background: #DC2626; box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); animation: liveHeroPulse 1.6s ease-out infinite; } @keyframes liveHeroPulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } } .live-hero-title { font-size: 36px; font-weight: 600; letter-spacing: -0.8px; line-height: 1.15; margin: 0 0 24px; text-wrap: balance; } .live-hero-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #08070C; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card); } .live-hero-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .live-hero-player-empty { display: grid; place-items: center; color: rgba(255, 255, 255, 0.78); } .live-hero-player-empty-inner { text-align: center; padding: 24px; } .live-hero-player-empty-inner span { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 18px; margin-bottom: 12px; } .live-hero-player-empty-inner p { font-size: 14px; margin: 0; max-width: 360px; line-height: 1.5; } .live-hero-clock { display: inline-flex; align-items: flex-end; gap: 8px; background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 20px 28px; margin: 0 auto; } .live-hero-cell { display: flex; flex-direction: column; align-items: center; min-width: 56px; } .live-hero-val { font-family: var(--heading-font); font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .live-hero-unit { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-top: 6px; } .live-hero-sep { font-family: var(--heading-font); font-size: 32px; font-weight: 400; color: var(--muted-soft); line-height: 1; padding-bottom: 18px; } .live-hero-caption { margin: 16px 0 0; font-size: 13px; color: var(--muted); } .teaching-library-h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.5px; margin: 0 0 24px; } @media (max-width: 720px) { .live-hero { padding: 32px 0 28px; } .live-hero-title { font-size: 26px; letter-spacing: -0.5px; margin-bottom: 18px; } .live-hero-clock { padding: 16px 14px; gap: 4px; } .live-hero-val { font-size: 30px; } .live-hero-cell { min-width: 44px; } .live-hero-sep { font-size: 24px; padding-bottom: 14px; } .teaching-library-h2 { font-size: 22px; margin-bottom: 16px; } } /* ────────────────────────────────────────────────────────── Contact form (single source of truth contact page) ────────────────────────────────────────────────────────── */ .contact-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 32px 36px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02); } @media (max-width: 560px) { .contact-card { padding: 24px 20px; border-radius: 14px; } } .cf-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-soft); color: var(--ink); border-radius: var(--r-full); padding: 6px 6px 6px 14px; font-size: 13px; margin: 0 0 22px; max-width: 100%; } .cf-chip-label { font-weight: 600; white-space: nowrap; } .cf-chip-label::after { content: ":"; margin-right: 2px; } .cf-chip-target { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-chip-clear { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.6); border: none; border-radius: var(--r-full); padding: 4px 10px 4px 6px; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; margin-left: 4px; transition: background 160ms ease; } .cf-chip-clear:hover { background: #fff; } .contact-form { display: flex; flex-direction: column; gap: 20px; } .contact-form[hidden] { display: none; } .cf-chip[hidden] { display: none; } .cf-success[hidden] { display: none; } .cf-field { display: flex; flex-direction: column; gap: 6px; } .cf-fieldset { border: none; margin: 0; padding: 0; } .cf-label { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.1px; } .cf-input { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; line-height: 1.4; transition: border-color 160ms ease, box-shadow 160ms ease; -webkit-appearance: none; appearance: none; } .cf-input::placeholder { color: var(--muted); } .cf-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .cf-input.is-invalid { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); } .cf-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236B6B6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; } .cf-textarea { resize: vertical; min-height: 120px; line-height: 1.5; } .cf-radio-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; } @media (max-width: 560px) { .cf-radio-group { grid-template-columns: 1fr 1fr; } } .cf-radio { position: relative; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 8px; cursor: pointer; text-align: center; transition: border-color 160ms ease, background 160ms ease; } .cf-radio input { position: absolute; opacity: 0; pointer-events: none; } .cf-radio:hover { border-color: var(--ink); } .cf-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; } .cf-radio:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .cf-error-msg { font-size: 12px; color: #DC2626; min-height: 0; line-height: 1.4; } .cf-error-msg:empty { display: none; } .cf-banner { font-size: 13px; color: #92400E; background: #FFF7ED; border: 1px solid #FDBA74; border-radius: var(--r-sm); padding: 10px 14px; line-height: 1.45; } .cf-banner[hidden] { display: none; } .cf-submit { margin-top: 4px; align-self: flex-start; min-width: 180px; } @media (max-width: 560px) { .cf-submit { width: 100%; align-self: stretch; } } /* Success state */ .cf-success { text-align: center; padding: 16px 8px; } .cf-success-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; animation: cfPop 280ms cubic-bezier(0.32, 0.72, 0.24, 1.04); } .cf-success-icon::before { content: ""; display: block; width: 24px; height: 12px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg) translateY(-3px); border-bottom-left-radius: 2px; } @keyframes cfPop { 0% { transform: scale(0.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .cf-success-h { font-size: 24px; font-weight: 600; letter-spacing: -0.4px; margin: 0 0 10px; color: var(--ink); } .cf-success-p { font-size: 15px; color: var(--muted); max-width: 480px; margin: 0 auto 24px; line-height: 1.5; } .cf-success-actions { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; } /* ────────────────────────────────────────────────────────── Tweaks panel ────────────────────────────────────────────────────────── */ .tweaks { position: fixed; bottom: 24px; right: 24px; width: 280px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04); padding: 16px; z-index: 100; font-size: 13px; display: none; } .tweaks.is-open { display: block; } .tweaks-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .tweaks-head h5 { font-size: 14px; font-weight: 600; margin: 0; } .tweaks-close { width: 28px; height: 28px; border-radius: var(--r-full); display: grid; place-items: center; color: var(--muted); } .tweaks-close:hover { background: var(--surface-soft); } .tweak-row { margin-bottom: 14px; } .tweak-row:last-child { margin-bottom: 0; } .tweak-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin-bottom: 8px; } .tweak-options { display: flex; gap: 6px; flex-wrap: wrap; } .tweak-pill { padding: 6px 10px; border: 1px solid var(--hairline); border-radius: var(--r-full); font-size: 12px; font-weight: 500; cursor: pointer; background: var(--canvas); color: var(--ink); } .tweak-pill.is-active { background: var(--ink); color: var(--canvas); border-color: var(--ink); } .tweak-swatch { width: 28px; height: 28px; border-radius: var(--r-full); cursor: pointer; border: 2px solid transparent; } .tweak-swatch.is-active { border-color: var(--ink); } /* ============================================================ Parallax quote section — entire layer (image + text) is FIXED. The section reserves 100vh of scroll space but its contents are pinned to the viewport. The next section (in normal flow with a solid background) scrolls up over the top of this fixed layer, creating a "curtain reveal" effect. ============================================================ */ .parallax-quote { position: relative; height: 100vh; /* reserves one screen of scroll space */ background: transparent; /* No overflow:hidden — the children are position:fixed and need to escape to viewport coords. The section itself is just a placeholder. */ } /* Fixed layer — desert + scrim + quote text all pinned to the viewport so the previous section (hero) scrolls UP to reveal them, and the next section scrolls UP to cover them. */ .parallax-quote-bg, .parallax-quote-scrim, .parallax-quote-inner { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; /* sits at the bottom of the page's stacking order */ } /* Cross at sunrise photograph. */ .parallax-quote-bg { background-color: #f5e6d3; /* fallback — cream sky tone from image */ background-image: url("../assets/lightstock_2356_full.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center; } .parallax-quote-scrim { z-index: 1; background: linear-gradient(180deg, rgba(20,12,8,0.18) 0%, rgba(20,12,8,0.14) 60%, rgba(20,12,8,0.10) 100%); pointer-events: none; } .parallax-quote-inner { z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #1c1410; padding: 0 24px; pointer-events: none; } .parallax-quote-inner > * { max-width: 920px; pointer-events: auto; } /* CRITICAL: the hero (above) and the next section (below) must each have an opaque background AND their own stacking context with z-index >= 1 so that they cover the fixed parallax layer when they're on screen. Without this, the desert + quote bleed through. */ .hero-video { position: relative; z-index: 5; background: #08070C; /* opaque dark — covers fixed layer when hero is on screen */ } .parallax-quote + .section, .parallax-quote ~ .section { position: relative; z-index: 5; background: var(--canvas, #fff); } /* Footer too, so it covers the fixed layer at the very bottom. */ footer { position: relative; z-index: 5; } .parallax-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(28,20,16,0.72); margin: 0 0 28px; text-shadow: 0 1px 2px rgba(255,247,237,0.5); } .parallax-quote-text { font-family: var(--font-serif, 'Cardo', Georgia, serif); font-size: clamp(28px, 4vw, 48px); line-height: 1.25; font-weight: 400; margin: 0; letter-spacing: -0.4px; text-wrap: balance; color: #1c1410; text-shadow: 0 1px 8px rgba(255,247,237,0.55); } .parallax-quote-attrib { font-size: 15px; font-weight: 500; letter-spacing: 0.04em; color: rgba(28,20,16,0.85); margin: 0; text-shadow: 0 1px 2px rgba(255,247,237,0.5); } /* iOS / mobile Safari doesn't paint background-attachment: fixed reliably on small viewports — fall back to scroll-attached. Sticky still works. */ @media (max-width: 768px) { .parallax-quote { min-height: 140vh; } .parallax-quote-bg { background-attachment: scroll; } } @media (hover: none) and (pointer: coarse) { .parallax-quote-bg { background-attachment: scroll; } } /* ============================================================ Giving page — form layout, segmented control, demo preview modal. The form collects intent; demo mode shows a preview, live mode routes to Tithe.ly. See js/giving.js + GIVING-SETUP.md. ============================================================ */ /* Page-level contrast — warm band wraps the form so the white card pops. */ .page-give { background: var(--surface-soft); } .page-give .page-header { background: linear-gradient(180deg, var(--canvas) 0%, var(--surface-soft) 100%); border-bottom: none; padding-bottom: 56px; } .page-give .give-section { background: var(--surface-soft); padding-top: 32px; } .page-give .host-card { background: var(--canvas); border: 1px solid var(--hairline-soft); } .give-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; } @media (max-width: 880px) { .give-layout { grid-template-columns: 1fr; } } .give-form-card { background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); padding: var(--xl); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: var(--lg); } .give-field { display: flex; flex-direction: column; gap: 6px; } .give-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); } .give-help { font-size: 12px; color: var(--muted); margin-top: 4px; } .give-input { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: var(--r-sm); font-size: 15px; background: var(--canvas); color: var(--ink); font-family: inherit; transition: border-color 160ms ease, box-shadow 160ms ease; } .give-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Segmented frequency control */ .give-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hairline); border-radius: var(--r-full); padding: 4px; background: var(--surface-soft); } .give-seg-btn { height: 44px; border-radius: var(--r-full); font-size: 14px; font-weight: 600; color: var(--muted); background: transparent; transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease; } .give-seg-btn.is-active { background: var(--canvas); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .give-continue { width: 100%; height: 56px; font-size: 16px; margin-top: 4px; } .give-secure { font-size: 12px; color: var(--muted); margin: 0; text-align: center; } .give-side { display: flex; flex-direction: column; gap: var(--base); } .give-aside-card { flex-direction: column; align-items: flex-start; gap: 8px; } .give-help-cta { margin-top: 8px; align-self: flex-start; } /* Demo preview modal */ .give-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .give-modal-backdrop { position: absolute; inset: 0; background: rgba(20,16,12,0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: giveModalFade 180ms ease-out; } .give-modal-card { position: relative; background: var(--canvas); border-radius: var(--r-lg); padding: 32px; max-width: 480px; width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,0.25); animation: giveModalRise 220ms ease-out; } @keyframes giveModalFade { from { opacity: 0; } to { opacity: 1; } } @keyframes giveModalRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .give-modal-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; color: var(--accent); margin-bottom: 8px; } .give-modal-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; margin: 0 0 8px; } .give-modal-sub { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0 0 20px; } .give-modal-summary { display: flex; flex-direction: column; margin: 0 0 24px; padding: 8px 0; border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); } .give-modal-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 14px; } .give-modal-summary dt { color: var(--muted); margin: 0; font-weight: 500; } .give-modal-summary dd { color: var(--ink); margin: 0; font-weight: 600; text-align: right; word-break: break-word; } .give-modal-close { width: 100%; height: 48px; } /* ============================================================ Guide page — interactive decision tree. Drives guide.html via js/guide-tree.js + js/guide.js. ============================================================ */ .page-guide { background: var(--surface-soft); } .guide-main { display: grid; grid-template-columns: 280px 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; padding: 56px 32px 80px; align-items: start; } @media (max-width: 880px) { .guide-main { grid-template-columns: 1fr; padding: 32px 20px 56px; gap: 20px; } } /* ── Journey sidebar ──────────────────────────────────────── */ .guide-journey-panel { position: sticky; top: 96px; background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); padding: 22px 22px 18px; box-shadow: var(--shadow-card); } @media (max-width: 880px) { .guide-journey-panel { position: static; padding: 16px 18px; } } .guide-journey-label { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } .guide-journey-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; } @media (max-width: 880px) { .guide-journey-list { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } } .guide-journey-empty { font-size: 13px; color: var(--muted); font-style: italic; } .guide-journey-step { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--ink); padding: 8px 10px; background: var(--surface-soft); border-radius: var(--r-sm); border: 1px solid var(--hairline-soft); animation: guideJourneyAppear 280ms ease-out; } @keyframes guideJourneyAppear { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .guide-journey-num { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; } .guide-journey-text { flex: 1 1 auto; } .guide-restart { font-size: 13px; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--hairline); border-radius: var(--r-full); padding: 8px 14px; cursor: pointer; transition: color 160ms ease, border-color 160ms ease; } .guide-restart:hover { color: var(--ink); border-color: var(--ink); } /* ── Stage (animated container) ───────────────────────────── */ .guide-stage { position: relative; background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); padding: 48px 56px; box-shadow: var(--shadow-card); transition: transform 220ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease; min-height: 520px; } @media (max-width: 880px) { .guide-stage { padding: 28px 22px; min-height: 440px; } } .guide-stage.is-leaving-left { transform: translateX(-30px); opacity: 0; } .guide-stage.is-leaving-right { transform: translateX( 30px); opacity: 0; } .guide-stage.is-entering-right { transform: translateX( 30px); opacity: 0; transition: none; } .guide-stage.is-entering-left { transform: translateX(-30px); opacity: 0; transition: none; } /* ── Screen header (step indicator + back) ────────────────── */ .guide-screen-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 12px; } .guide-step { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); } .guide-step-result { color: var(--accent); } .guide-back { font-size: 13px; font-weight: 600; color: var(--muted); background: transparent; border: 0; cursor: pointer; padding: 6px 10px; border-radius: var(--r-sm); transition: background 160ms ease, color 160ms ease; } .guide-back:hover { background: var(--surface-soft); color: var(--ink); } /* ── Question screen ─────────────────────────────────────── */ .guide-title { font-size: clamp(28px, 3.8vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -0.6px; text-wrap: balance; margin: 0 0 12px; color: var(--ink); } .guide-subtitle { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0 0 36px; max-width: 560px; } .guide-options { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 720px) { .guide-options { grid-template-columns: 1fr 1fr; } } .guide-opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; padding: 22px 56px 22px 24px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; } .guide-opt:hover, .guide-opt:focus-visible { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(249,115,22,0.10), 0 1px 2px rgba(0,0,0,0.04); outline: none; } .guide-opt-label { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.2px; line-height: 1.3; } .guide-opt-hint { font-size: 13px; color: var(--muted); line-height: 1.4; } .guide-opt-arrow { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--muted); transition: transform 200ms ease, color 200ms ease; } .guide-opt:hover .guide-opt-arrow, .guide-opt:focus-visible .guide-opt-arrow { transform: translate(4px, -50%); color: var(--accent); } /* ── Destination screen ──────────────────────────────────── */ .guide-message { font-size: 17px; line-height: 1.55; color: var(--body); margin: 0 0 24px; max-width: 620px; } .guide-verse { margin: 0 0 32px; padding: 20px 24px; border-left: 2px solid var(--accent); background: var(--surface-soft); border-radius: var(--r-sm); max-width: 620px; } .guide-verse blockquote { margin: 0 0 8px; font-family: 'Cardo', Georgia, serif; font-style: italic; font-size: 18px; line-height: 1.45; color: var(--ink); } .guide-verse figcaption { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .guide-cards { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 720px) { .guide-cards { grid-template-columns: 1fr 1fr; } } .guide-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 56px 18px 22px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); text-decoration: none; color: inherit; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .guide-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(249,115,22,0.10), 0 1px 2px rgba(0,0,0,0.04); text-decoration: none; } .guide-card-label { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; } .guide-card-sub { font-size: 13px; color: var(--muted); } .guide-card-arrow { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 18px; transition: transform 200ms ease, color 200ms ease; } .guide-card:hover .guide-card-arrow { transform: translate(4px, -50%); color: var(--accent); } /* Subtle left-bar tint per kind so destinations feel categorized at a glance */ .guide-card-give { border-left: 3px solid var(--accent); } .guide-card-teaching{ border-left: 3px solid #4C1D95; } .guide-card-contact { border-left: 3px solid var(--ink); } .guide-card-ministry{ border-left: 3px solid #0D9488; } .guide-card-staff { border-left: 3px solid #B45309; } .guide-card-visit { border-left: 3px solid #2563EB; } .guide-card-events { border-left: 3px solid #DC2626; } .guide-card-about { border-left: 3px solid #6B6B6B; } .guide-card-next-steps { border-left: 3px solid #15803D; } .guide-card-external { border-left: 3px solid #0EA5E9; }