Mistral Mistral Large 4 – Religion and Spirituality
via Mistral · Generated
- AIMAC Debt 5.71
- Cost $0.33
- Total Violations 49
- HTML Size 84 KB
- Em Dashes 46
Screenshot
View Live Page
Accessibility Issues Found
49 Serious
-
color-contrast serious 49 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#visit" class="btn btn-primary btn-sm nav-cta">Plan a Visit</a>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Havenridge Community Church — Where grace takes root & neighbors become family</title>
<meta name="description" content="Havenridge Community Church in Riverbend — a place to belong, a faith to grow, and a city to love. Sundays 9:00 & 11:00 AM at 214 Alder Street.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%232E5C4D'/%3E%3Cpath d='M32 12c-9 0-15 6.5-15 15v25h30V27c0-8.5-6-15-15-15z' fill='%23F6F1E7'/%3E%3Crect x='29' y='22' width='6' height='22' fill='%232E5C4D'/%3E%3Crect x='21' y='30' width='22' height='6' fill='%232E5C4D'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
<style>
/* ============ Foundations ============ */
:root{
--pine:#2E5C4D; --pine-deep:#22453A; --pine-ink:#152A23;
--terracotta:#C05B2E; --terracotta-deep:#A84A22; --terracotta-soft:#E8B295;
--gold:#C99B3F;
--cream:#F6F1E7; --cream-soft:#FCFAF4; --paper:#FFFFFF;
--ink:#242B27; --muted:#5A655D; --line:#E4DECF; --line-soft:#EDE8DB;
--serif:"Fraunces", Georgia, "Times New Roman", serif;
--sans:"Public Sans", "Helvetica Neue", Arial, sans-serif;
--shadow-sm:0 2px 10px rgba(21,42,35,.07);
--shadow-md:0 14px 40px -12px rgba(21,42,35,.22);
--shadow-lg:0 30px 70px -20px rgba(21,42,35,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
::selection{background:var(--terracotta);color:var(--cream-soft)}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:4px}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--pine);border-radius:8px;border:3px solid var(--cream)}
.container{max-width:1180px;margin:0 auto;padding:0 28px}
section{position:relative}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em}
h2{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:16px}
h3{font-size:clamp(1.35rem,2vw,1.7rem)}
h2 em, h1 em{font-style:italic}
.accent{color:var(--terracotta)}
.lede{font-size:1.12rem;color:var(--muted);max-width:56ch}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.73rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta);margin-bottom:18px}
.eyebrow::before{content:"";width:34px;height:2px;background:currentColor;border-radius:2px}
.eyebrow.center::after{content:"";width:34px;height:2px;background:currentColor;border-radius:2px}
.eyebrow.gold{color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;font-weight:600;font-size:.95rem;letter-spacing:.01em;border:1.5px solid transparent;transition:all .25s ease;cursor:pointer}
.btn svg{width:17px;height:17px;transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--terracotta);color:#FFF7EE}
.btn-primary:hover{background:var(--terracotta-deep);transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(192,91,46,.55)}
.btn-outline{border-color:var(--pine);color:var(--pine)}
.btn-outline:hover{background:var(--pine);color:var(--cream-soft);transform:translateY(-2px)}
.btn-ghost-light{border-color:rgba(252,250,244,.45);color:var(--cream-soft)}
.btn-ghost-light:hover{background:rgba(252,250,244,.12);border-color:var(--cream-soft)}
.btn-sm{padding:10px 20px;font-size:.88rem}
.btn-block{width:100%;justify-content:center}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--terracotta)}
.text-link svg{width:16px;height:16px;transition:transform .25s}
.text-link:hover{color:var(--terracotta-deep)}
.text-link:hover svg{transform:translateX(4px)}
.section{padding:clamp(72px,9vw,110px) 0}
.bg-white{background:var(--paper)}
.bg-cream{background:var(--cream)}
.section-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:clamp(40px,5vw,60px)}
.section-head h2{margin-bottom:0}
.section-head .lede{padding-bottom:6px}
/* Photo treatment: green-toned monochrome for a unified identity */
.media{position:relative;overflow:hidden;background:var(--pine-ink)}
.media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(1.02);transition:transform .8s ease}
.media::after{content:"";position:absolute;inset:0;background:var(--pine);mix-blend-mode:color;pointer-events:none}
.media:hover img{transform:scale(1.045)}
/* Scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.reveal{opacity:1;transform:none;transition:none}
*{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* ============ Top bar ============ */
.topbar{background:var(--pine-ink);color:rgba(252,250,244,.85);font-size:.8rem}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:9px 28px;max-width:1180px;margin:0 auto}
.topbar-group{display:flex;gap:22px;align-items:center}
.topbar-group.right{margin-left:auto}
.topbar-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topbar-item svg{width:13px;height:13px;color:var(--gold)}
.topbar .tagline{font-family:var(--serif);font-style:italic;color:rgba(252,250,244,.72);letter-spacing:.02em}
@media(max-width:940px){.topbar .tagline{display:none}}
@media(max-width:620px){.topbar-group:not(.right){display:none}}
/* ============ Header ============ */
.site-header{position:sticky;top:0;z-index:60;background:rgba(252,250,244,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 8px 30px -12px rgba(21,42,35,.18)}
.header-inner{display:flex;align-items:center;gap:20px;max-width:1180px;margin:0 auto;padding:13px 28px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:46px;height:46px;border-radius:12px;box-shadow:var(--shadow-sm)}
.brand-name{display:block;font-family:var(--serif);font-size:1.32rem;font-weight:600;line-height:1.05;color:var(--pine-ink)}
.brand-sub{display:block;font-size:.58rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.main-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.main-nav > a:not(.btn){position:relative;padding:9px 13px;font-size:.92rem;font-weight:500;border-radius:8px;transition:color .2s}
.main-nav > a:not(.btn):hover{color:var(--terracotta)}
.main-nav > a:not(.btn).active{color:var(--terracotta);font-weight:600}
.main-nav > a:not(.btn).active::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--terracotta);border-radius:2px}
.nav-panel-cta{display:none}
.nav-toggle{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);align-items:center;justify-content:center;color:var(--pine-ink)}
.nav-toggle svg{width:21px;height:21px}
.nav-toggle .icon-close{display:none}
.nav-toggle.open .icon-open{display:none}
.nav-toggle.open .icon-close{display:block}
@media(max-width:1020px){
.main-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:2px;background:var(--cream-soft);border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);padding:14px 28px 22px}
.main-nav.open{display:flex}
.main-nav > a:not(.btn){padding:12px 12px;font-size:1rem;border-radius:10px}
.main-nav > a:not(.btn).active{background:rgba(46,92,77,.08)}
.main-nav > a:not(.btn).active::after{display:none}
.nav-panel-cta{display:inline-flex;justify-content:center;margin-top:12px}
.nav-cta{display:none}
.nav-toggle{display:inline-flex}
}
/* ============ Hero ============ */
.hero{position:relative;background:var(--pine-ink);color:var(--cream-soft);overflow:hidden;padding:clamp(80px,11vh,140px) 0 165px}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.9)}
.hero-bg::after{content:"";position:absolute;inset:0;background:rgba(16,32,27,.86)}
.hero-inner{position:relative;z-index:2;max-width:840px}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);margin-bottom:22px}
.hero h1 em{color:var(--terracotta-soft)}
.hero .sub{font-size:1.15rem;color:rgba(252,250,244,.82);max-width:60ch;margin-bottom:34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:28px;display:flex;gap:22px;flex-wrap:wrap;font-size:.84rem;color:rgba(252,250,244,.66)}
.hero-note span{display:inline-flex;align-items:center;gap:7px}
.hero-note svg{width:14px;height:14px;color:var(--gold)}
/* Next-gathering card overlapping hero */
.gather-wrap{position:relative;z-index:5;margin-top:-95px}
.gather-card{background:var(--cream-soft);border:1px solid var(--line-soft);border-radius:22px;box-shadow:var(--shadow-lg);padding:30px 36px;display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center}
.gather-label{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta);margin-bottom:8px}
.gather-label svg{width:14px;height:14px}
.gather-title{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--pine-ink);line-height:1.15}
.gather-meta{margin-top:10px;display:flex;flex-direction:column;gap:7px;font-size:.92rem;color:var(--muted)}
.gather-meta span{display:inline-flex;align-items:center;gap:8px}
.gather-meta svg{width:14px;height:14px;color:var(--pine);flex-shrink:0}
.gather-directions{margin-top:14px}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line);padding-left:36px}
.cd-block{position:relative;text-align:center}
.cd-block + .cd-block::before{content:"";position:absolute;left:0;top:12%;height:76%;width:1px;background:var(--line)}
.cd-num{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.5rem);font-weight:600;line-height:1;color:var(--pine);font-variant-numeric:tabular-nums}
.cd-label{font-size:.63rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}
@media(max-width:900px){
.gather-card{grid-template-columns:1fr;gap:24px;padding:26px}
.countdown{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}
}
/* ============ About ============ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,90px);align-items:center}
.about-media{position:relative;margin-bottom:26px}
.about-main{width:82%;aspect-ratio:4/5;border-radius:999px 999px 22px 22px;box-shadow:var(--shadow-md);position:relative;z-index:1}
.about-sub{position:absolute;right:0;bottom:-30px;width:52%;aspect-ratio:5/4;border-radius:16px;border:8px solid var(--cream);box-shadow:var(--shadow-md);z-index:2}
.about-chip{position:absolute;left:-12px;bottom:96px;z-index:3;display:flex;gap:10px;align-items:center;max-width:240px;background:var(--pine-ink);color:var(--cream-soft);font-size:.8rem;line-height:1.45;padding:13px 17px;border-radius:14px;box-shadow:var(--shadow-md)}
.about-chip svg{width:16px;height:16px;color:var(--gold);flex-shrink:0}
.about-copy p{color:#4C584F;margin-bottom:16px}
.stats{display:flex;margin:32px 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.stat{flex:1;padding:0 22px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-family:var(--serif);font-size:1.85rem;font-weight:600;line-height:1.1;color:var(--pine)}
.stat span{font-size:.76rem;color:var(--muted)}
.about-ctas{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}.about-chip{left:6px}}
@media(max-width:560px){.stats{flex-wrap:wrap;gap:16px}.stat{flex:1 1 40%;border-left:0;padding:0}}
/* ============ Commitments (staggered editorial grid) ============ */
@media(min-width:821px){.section-commit{padding-bottom:185px}}
.commit-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(48px,6vw,90px)}
.commit{margin-top:36px;padding:36px 0 10px;border-top:1px solid var(--line)}
.commit:nth-child(even){transform:translateY(54px)}
.commit-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.commit-num{font-family:var(--serif);font-size:2.4rem;font-weight:600;line-height:1;color:transparent;-webkit-text-stroke:1.3px var(--terracotta)}
@supports not (-webkit-text-stroke:1px black){.commit-num{color:var(--terracotta)}}
.commit-icon{width:46px;height:46px;border-radius:50%;background:rgba(46,92,77,.09);color:var(--pine);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.commit-icon svg{width:20px;height:20px}
.commit h3{color:var(--pine-ink);margin-bottom:10px}
.commit p{color:var(--muted);font-size:.98rem}
@media(max-width:820px){.commit-grid{grid-template-columns:1fr}.commit:nth-child(even){transform:none}}
/* ============ Ministries (alternating rows) ============ */
.ministry{display:grid;grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,84px);align-items:center;padding:54px 0;border-top:1px solid var(--line)}
.ministry:first-of-type{border-top:0;padding-top:8px}
.ministry .media{aspect-ratio:4/3;border-radius:999px 999px 20px 20px;box-shadow:var(--shadow-md)}
.ministry:nth-of-type(even) .media{order:2}
.ministry .eyebrow{margin-bottom:12px}
.ministry h3{font-size:clamp(1.6rem,2.4vw,2.05rem);color:var(--pine-ink);margin-bottom:14px}
.ministry-body p{color:#4C584F;margin-bottom:20px}
.ministry-facts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.fact{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--pine);background:rgba(46,92,77,.08);padding:7px 14px;border-radius:999px}
.fact svg{width:13px;height:13px}
@media(max-width:880px){.ministry{grid-template-columns:1fr;gap:30px}.ministry:nth-of-type(even) .media{order:0}}
/* ============ Scripture band ============ */
.verse{position:relative;padding:clamp(90px,12vw,150px) 0;background:var(--pine-ink);color:var(--cream-soft);overflow:hidden}
.verse-bg{position:absolute;inset:0}
.verse-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.55) contrast(1.05)}
.verse-bg::after{content:"";position:absolute;inset:0;background:rgba(16,32,27,.8)}
.verse-inner{position:relative;z-index:2;max-width:860px;margin:0 auto;padding:0 28px;text-align:center}
.verse-frame{border:1px solid rgba(246,241,231,.3);border-radius:320px 320px 26px 26px;padding:clamp(48px,7vw,80px) clamp(28px,6vw,72px) clamp(40px,5vw,58px)}
.verse blockquote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.65rem,3.4vw,2.65rem);line-height:1.28;margin-bottom:20px}
.verse cite{font-style:normal;font-size:.82rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,241,231,.65)}
/* ============ Events ============ */
.events-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(40px,5vw,64px);align-items:start}
.event{display:grid;grid-template-columns:86px 1fr auto;gap:22px;align-items:center;background:var(--cream-soft);border:1px solid var(--line-soft);border-radius:18px;padding:22px 24px;margin-bottom:16px;transition:all .25s ease}
.event:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(46,92,77,.28)}
.event-date{background:var(--pine);color:var(--cream-soft);border-radius:14px;text-align:center;padding:12px 4px 10px}
.event-date b{display:block;font-family:var(--serif);font-size:1.75rem;font-weight:600;line-height:1}
.event-date span{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(252,250,244,.75)}
.event-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tag{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta);background:rgba(192,91,46,.1);padding:4px 10px;border-radius:999px}
.tag.alt{color:var(--pine);background:rgba(46,92,77,.09)}
.event h3{font-size:1.28rem;color:var(--pine-ink);margin-bottom:6px}
.event p{font-size:.92rem;color:var(--muted);margin-bottom:10px}
.event-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:.82rem;font-weight:500;color:var(--muted)}
.event-meta span{display:inline-flex;align-items:center;gap:6px}
.event-meta svg{width:13px;height:13px;color:var(--pine)}
.event .rsvp.saved{background:var(--pine);border-color:var(--pine);color:var(--cream-soft)}
@media(max-width:960px){.events-grid{grid-template-columns:1fr}}
@media(max-width:640px){.event{grid-template-columns:70px 1fr}.event-cta{grid-column:2}}
.side-card{background:var(--cream-soft);border:1px solid var(--line-soft);border-radius:18px;padding:26px;margin-bottom:20px}
.side-card h4{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.15rem;color:var(--pine-ink);margin-bottom:14px}
.side-card h4 svg{width:17px;height:17px;color:var(--terracotta)}
.side-card > p{font-size:.9rem;color:var(--muted)}
.rhythm li{display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line-soft);font-size:.9rem}
.rhythm li:first-child{border-top:0}
.rhythm .day{min-width:46px;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pine);padding-top:3px}
.rhythm svg{width:15px;height:15px;color:var(--terracotta);flex-shrink:0;margin-top:4px}
.rhythm .what b{display:block;font-size:.92rem;font-weight:600;color:var(--ink)}
.rhythm .what span{font-size:.82rem;color:var(--muted)}
.news-form{display:flex;gap:8px;margin-top:16px}
.news-form input{flex:1;min-width:0;padding:12px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);font:inherit;font-size:.9rem}
.news-form input:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(46,92,77,.14)}
.news-ok{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.88rem;font-weight:600;color:var(--pine)}
.news-ok svg{width:15px;height:15px}
#icsBtn{margin-top:16px}
/* ============ Voices ============ */
.voices-wrap{max-width:860px;margin:0 auto;text-align:center}
.voices-wrap h2{margin-bottom:44px}
.quote-mark{width:54px;height:54px;margin:0 auto 26px;border-radius:50%;background:rgba(192,91,46,.1);color:var(--terracotta);display:flex;align-items:center;justify-content:center}
.quote-mark svg{width:22px;height:22px}
.voice-stage{transition:opacity .28s ease,transform .28s ease}
.voice-stage.fading{opacity:0;transform:translateY(10px)}
.voice-quote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.4rem,2.8vw,2.05rem);line-height:1.38;color:var(--pine-ink)}
.voice-attr{margin-top:28px;display:flex;align-items:center;justify-content:center;gap:14px}
.voice-attr img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--terracotta)}
.voice-attr .who{text-align:left}
.voice-attr b{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--pine-ink)}
.voice-attr span{font-size:.82rem;color:var(--muted)}
.voice-tabs{display:flex;justify-content:center;gap:16px;margin-top:36px}
.voice-tab{width:58px;height:58px;border-radius:50%;overflow:hidden;border:2px solid transparent;opacity:.5;filter:grayscale(1);transition:all .25s ease;padding:0}
.voice-tab img{width:100%;height:100%;object-fit:cover}
.voice-tab:hover{opacity:.85}
.voice-tab.active{opacity:1;filter:none;border-color:var(--terracotta);transform:scale(1.1);box-shadow:var(--shadow-sm)}
/* ============ Prayer wall ============ */
.prayer-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,5vw,64px);align-items:start}
.prayer-form{position:sticky;top:110px;background:var(--cream-soft);border:1px solid var(--line-soft);border-radius:20px;padding:30px;box-shadow:var(--shadow-sm)}
.prayer-form h3{font-size:1.45rem;color:var(--pine-ink)}
.prayer-form-sub{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:.92rem;margin:4px 0 22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pine-ink);margin-bottom:7px}
.field .opt{color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;background:var(--paper);font:inherit;font-size:.94rem;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:104px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(46,92,77,.14)}
.field .err{display:none;color:#B3401F;font-size:.8rem;font-weight:600;margin-top:6px}
.field.invalid input,.field.invalid textarea{border-color:var(--terracotta)}
.field.invalid .err{display:block}
.check{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--muted);margin:2px 0 16px;cursor:pointer;user-select:none}
.check input{width:17px;height:17px;accent-color:var(--terracotta);cursor:pointer}
.char-count{font-size:.75rem;color:var(--muted);text-align:right;margin-top:6px}
.prayer-fine{font-size:.82rem;color:var(--muted);text-align:center;margin-top:14px}
.inline-link{color:var(--terracotta);font-weight:600}
.inline-link:hover{text-decoration:underline}
.prayer-wall{columns:2;column-gap:18px}
.prayer-card{break-inside:avoid;background:var(--cream-soft);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:18px;transition:box-shadow .3s,transform .3s,border-color .6s}
.prayer-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.prayer-card.fresh{border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(192,91,46,.14);animation:freshIn .5s ease}
@keyframes freshIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.prayer-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.prayer-ava{width:36px;height:36px;border-radius:50%;background:var(--pine);color:var(--cream-soft);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:.82rem;flex-shrink:0}
.prayer-who{flex:1;min-width:0}
.prayer-who b{display:block;font-size:.9rem;color:var(--pine-ink)}
.prayer-who span{font-size:.74rem;color:var(--muted)}
.prayer-body{font-size:.94rem;line-height:1.6;margin-bottom:14px}
.prayer-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line-soft);padding-top:13px}
.amen-btn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:600;color:var(--muted);transition:all .2s}
.amen-btn svg{width:13px;height:13px}
.amen-btn:hover{border-color:var(--terracotta);color:var(--terracotta)}
.amen-btn.on{background:var(--terracotta);border-color:var(--terracotta);color:#FFF7EE}
.prayer-foot .count{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--muted)}
.prayer-foot .count svg{width:13px;height:13px;color:var(--terracotta)}
@media(max-width:960px){.prayer-grid{grid-template-columns:1fr}.prayer-form{position:static}}
@media(max-width:620px){.prayer-wall{columns:1}}
/* ============ Giving ============ */
.give{background:var(--pine-deep);color:var(--cream-soft)}
.give .eyebrow{color:var(--gold)}
.give h2{color:var(--cream-soft)}
.give h2 em{color:var(--terracotta-soft)}
.give-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,90px);align-items:center}
.give-copy p{color:rgba(252,250,244,.78);margin-bottom:16px}
.impact{margin:30px 0 26px;border-top:1px solid rgba(252,250,244,.16)}
.impact li{display:flex;gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(252,250,244,.16);font-size:.95rem;color:rgba(252,250,244,.85)}
.impact b{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--gold);min-width:62px}
.give-note{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:rgba(252,250,244,.62)}
.give-note svg{width:15px;height:15px;color:var(--gold);flex-shrink:0;margin-top:4px}
.give-widget{background:var(--cream-soft);color:var(--ink);border-radius:22px;padding:34px;box-shadow:var(--shadow-lg)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--cream);border:1.5px solid var(--line);border-radius:999px;padding:4px}
.seg button{padding:10px;border-radius:999px;font-weight:600;font-size:.88rem;color:var(--muted);transition:all .2s}
.seg button.active{background:var(--pine);color:var(--cream-soft);box-shadow:var(--shadow-sm)}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer}
.select-wrap > svg{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.amounts button{padding:13px 0;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--pine-ink);transition:all .2s}
.amounts button:hover{border-color:var(--pine)}
.amounts button.active{background:var(--pine);border-color:var(--pine);color:var(--cream-soft)}
.custom-wrap{position:relative}
.custom-wrap .cur{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600}
.custom-wrap input{padding-left:32px}
.secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:.8rem;color:var(--muted)}
.secure svg{width:14px;height:14px;color:var(--pine)}
@media(max-width:960px){.give-grid{grid-template-columns:1fr}}
@media(max-width:480px){.amounts{grid-template-columns:repeat(2,1fr)}.give-widget{padding:26px}}
/* ============ Visit / FAQ ============ */
.visit-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(44px,6vw,80px);align-items:start}
.visit-grid .lede{margin-bottom:26px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 0;text-align:left;font-family:var(--serif);font-size:1.13rem;font-weight:600;color:var(--pine-ink);transition:color .2s}
.faq-q:hover{color:var(--terracotta)}
.faq-icon{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s}
.faq-icon svg{width:15px;height:15px;transition:transform .3s}
.faq-item.open .faq-icon{background:var(--terracotta);border-color:var(--terracotta);color:#FFF7EE}
.faq-item.open .faq-icon svg{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 44px 22px 0;color:var(--muted);font-size:.95rem}
.faq-item.open .faq-a{grid-template-rows:1fr}
.visit-card{position:sticky;top:110px;background:var(--paper);border:1px solid var(--line-soft);border-radius:22px;padding:36px;box-shadow:var(--shadow-md)}
.visit-title{font-size:1.65rem;color:var(--pine-ink);margin-bottom:10px}
.visit-sub{font-size:.94rem;color:var(--muted);margin-bottom:24px}
.visit-success{text-align:center;padding:26px 4px}
.success-icon{width:70px;height:70px;margin:0 auto 20px;border-radius:50%;background:rgba(46,92,77,.1);color:var(--pine);display:flex;align-items:center;justify-content:center}
.success-icon svg{width:32px;height:32px}
@media(max-width:960px){.visit-grid{grid-template-columns:1fr}.visit-card{position:static}}
/* ============ Footer ============ */
.footer{background:var(--pine-ink);color:rgba(252,250,244,.75);padding-top:70px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:44px;padding-bottom:54px}
.footer .brand-name{color:var(--cream-soft)}
.footer .brand-sub{color:rgba(252,250,244,.5)}
.footer-blurb{font-size:.92rem;color:rgba(252,250,244,.62);margin:18px 0 22px;max-width:34ch}
.socials{display:flex;gap:10px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(252,250,244,.25);display:flex;align-items:center;justify-content:center;color:rgba(252,250,244,.8);transition:all .25s}
.socials a:hover{background:var(--terracotta);border-color:var(--terracotta);color:#FFF7EE;transform:translateY(-3px)}
.socials svg{width:16px;height:16px}
.footer h5{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.footer-col li{margin-bottom:11px;font-size:.92rem}
.footer-col a{transition:color .2s}
.footer-col a:hover{color:var(--cream-soft)}
.contact-line{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:.92rem}
.contact-line svg{width:15px;height:15px;color:var(--gold);flex-shrink:0;margin-top:4px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(252,250,244,.12);padding:22px 0;font-size:.82rem;color:rgba(252,250,244,.5)}
.footer-bottom .legal{display:flex;gap:22px}
.footer-bottom button{font-size:.82rem;color:rgba(252,250,244,.5);transition:color .2s}
.footer-bottom button:hover{color:var(--cream-soft)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
/* ============ Modal & toasts ============ */
.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(15,29,24,.62);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{position:relative;width:100%;max-width:620px;max-height:84vh;overflow-y:auto;background:var(--cream-soft);border-radius:22px;padding:40px;transform:translateY(24px) scale(.98);transition:transform .3s}
.modal-overlay.open .modal{transform:none}
.modal-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .2s}
.modal-close:hover{color:var(--terracotta);border-color:var(--terracotta)}
.modal-close svg{width:17px;height:17px}
.modal h3{font-size:1.6rem;color:var(--pine-ink);margin-bottom:14px;padding-right:40px}
.modal-body p{color:var(--muted);font-size:.95rem;margin-bottom:14px}
.sermon-media{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;margin-bottom:18px}
.sermon-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.75)}
.sermon-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sermon-play button{width:74px;height:74px;border-radius:50%;background:var(--terracotta);color:#FFF7EE;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:transform .25s}
.sermon-play button:hover{transform:scale(1.08)}
.sermon-play svg{width:26px;height:26px;margin-left:3px}
.sermon-meta{display:flex;gap:18px;flex-wrap:wrap;background:var(--cream);border:1px solid var(--line-soft);border-radius:12px;padding:14px 18px;margin-bottom:18px;font-size:.85rem;color:var(--muted)}
.sermon-meta span{display:inline-flex;align-items:center;gap:7px}
.sermon-meta svg{width:14px;height:14px;color:var(--terracotta)}
.toast-zone{position:fixed;bottom:24px;right:24px;z-index:120;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.toast{display:flex;align-items:center;gap:12px;max-width:380px;background:var(--pine-ink);color:var(--cream-soft);padding:14px 20px;border-radius:14px;box-shadow:var(--shadow-lg);font-size:.92rem;font-weight:500;animation:toastIn .35s ease;transition:opacity .4s,transform .4s}
.toast svg{width:17px;height:17px;color:var(--gold);flex-shrink:0}
.toast.hide{opacity:0;transform:translateY(10px)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:560px){.toast-zone{left:16px;right:16px;align-items:stretch}.toast{max-width:none}}
</style>
</head>
<body>
<!-- Top utility bar -->
<div class="topbar">
<div class="topbar-inner">
<div class="topbar-group">
<span class="topbar-item"><i data-lucide="clock"></i>Sundays 9:00 & 11:00 AM</span>
<span class="topbar-item"><i data-lucide="map-pin"></i>214 Alder Street, Riverbend</span>
</div>
<span class="tagline">“Where grace takes root & neighbors become family.”</span>
<div class="topbar-group right">
<a class="topbar-item" href="tel:+15550134728"><i data-lucide="phone"></i>(555) 013-4728</a>
</div>
</div>
</div>
<!-- Header -->
<header class="site-header" id="siteHeader">
<div class="header-inner">
<a href="#top" class="brand" aria-label="Havenridge Community Church — back to top">
<img src="https://placehold.co/96x96/2E5C4D/FCFAF4?text=HR&font=playfair+display" alt="Havenridge Community Church logo" width="46" height="46">
<span>
<span class="brand-name">Havenridge</span>
<span class="brand-sub">Community Church</span>
</span>
</a>
<nav class="main-nav" id="mainNav" aria-label="Primary navigation">
<a href="#top">Home</a>
<a href="#about" data-spy="about">About</a>
<a href="#ministries" data-spy="ministries">Ministries</a>
<a href="#events" data-spy="events">Events</a>
<a href="#community" data-spy="community">Community</a>
<a href="#prayer" data-spy="prayer">Prayer Wall</a>
<a href="#give" data-spy="give">Give</a>
<a href="#visit" class="btn btn-primary btn-sm nav-panel-cta">Plan a Visit</a>
</nav>
<a href="#visit" class="btn btn-primary btn-sm nav-cta">Plan a Visit</a>
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation menu" aria-expanded="false">
<i data-lucide="menu" class="icon-open"></i><i data-lucide="x" class="icon-close"></i>
</button>
</div>
</header>
<!-- Hero -->
<section class="hero" id="top">
<div class="hero-bg"><img src="https://picsum.photos/seed/havenridge-hero/1920/1080.jpg?grayscale" alt="" fetchpriority="high"></div>
<div class="container hero-inner reveal">
<span class="eyebrow">A neighborhood church in Riverbend · Est. 1993</span>
<h1>A place to <em>belong</em>, a faith to grow, and a city to <em>love</em>.</h1>
<p class="sub">For more than thirty years, Havenridge has been home to the skeptical, the seeking, and the sure — a family of ordinary people learning to follow Jesus together, one meal, one prayer, one act of mercy at a time.</p>
<div class="hero-ctas">
<a href="#visit" class="btn btn-primary">Plan Your Visit <i data-lucide="arrow-right"></i></a>
<button type="button" class="btn btn-ghost-light" data-modal="sermon"><i data-lucide="play"></i> Watch Last Sunday</button>
</div>
<div class="hero-note">
<span><i data-lucide="check"></i>No dress code</span>
<span><i data-lucide="check"></i>Kids check-in at every service</span>
<span><i data-lucide="check"></i>Doors open 30 minutes early</span>
</div>
</div>
</section>
<!-- Next-gathering countdown card -->
<div class="container gather-wrap">
<div class="gather-card reveal">
<div>
<span class="gather-label"><i data-lucide="calendar"></i>Next gathering</span>
<div class="gather-title" id="gatherDate">Sunday</div>
<div class="gather-meta">
<span><i data-lucide="clock"></i>9:00 & 11:00 AM — two identical gatherings</span>
<span><i data-lucide="map-pin"></i>214 Alder Street, Riverbend · Sanctuary & Chapel</span>
</div>
<a class="text-link gather-directions" href="https://www.google.com/maps/search/?api=1&query=214+Alder+Street+Riverbend" target="_blank" rel="noopener">Get directions <i data-lucide="arrow-up-right"></i></a>
</div>
<div class="countdown" role="timer" aria-label="Time remaining until the next gathering">
<div class="cd-block"><div class="cd-num" id="cdD">–</div><div class="cd-label">Days</div></div>
<div class="cd-block"><div class="cd-num" id="cdH">–</div><div class="cd-label">Hours</div></div>
<div class="cd-block"><div class="cd-num" id="cdM">–</div><div class="cd-label">Min</div></div>
<div class="cd-block"><div class="cd-num" id="cdS">–</div><div class="cd-label">Sec</div></div>
</div>
</div>
</div>
<!-- About -->
<section class="section bg-cream" id="about">
<div class="container about-grid">
<div class="about-media reveal">
<div class="about-main media"><img src="https://picsum.photos/seed/havenridge-welcome/840/1050.jpg?grayscale" alt="Members of Havenridge sharing a meal together after a Sunday gathering" loading="lazy" decoding="async"></div>
<div class="about-sub media"><img src="https://picsum.photos/seed/havenridge-table/640/512.jpg?grayscale" alt="A small group studying scripture around a kitchen table" loading="lazy" decoding="async"></div>
<div class="about-chip"><i data-lucide="heart-handshake"></i><span>300+ neighbors served by our ministries every month</span></div>
</div>
<div class="about-copy reveal">
<span class="eyebrow">Welcome home</span>
<h2>You’ve been <em class="accent">expected</em>.</h2>
<p>Havenridge began in 1993 as a dozen neighbors singing hymns in a living room on Alder Street. Three decades later, we’re still here — about 1,200 people across every age, background, and stage of faith, convinced that church should feel less like a performance and more like a kitchen table.</p>
<p>That conviction shapes everything we do. Our Sundays are unhurried and our Scriptures are opened wide. We read the Bible in small groups in living rooms across Riverbend, we pray with strangers at the food pantry, and we believe the way of Jesus is good news for this city — all of it.</p>
<p>So whether you’ve followed Jesus for decades, you’re exploring faith for the first time, or you’re not sure what you believe — there’s a seat saved for you. Come early, stay late, ask anything.</p>
<div class="stats">
<div class="stat"><b>31</b><span>Years on Alder Street</span></div>
<div class="stat"><b>1,200</b><span>Members & weekly friends</span></div>
<div class="stat"><b>40+</b><span>Ministries & outreaches</span></div>
<div class="stat"><b>300</b><span>Neighbors served monthly</span></div>
</div>
<div class="about-ctas">
<a href="#visit" class="btn btn-primary">Plan Your First Visit</a>
<a href="#prayer" class="text-link">Share a prayer request <i data-lucide="arrow-right"></i></a>
</div>
</div>
</div>
</section>
<!-- Commitments -->
<section class="section bg-white section-commit" id="commitments">
<div class="container">
<div class="section-head reveal">
<div>
<span class="eyebrow">What we’re about</span>
<h2>Four commitments that shape <em class="accent">every gathering</em></h2>
</div>
<p class="lede">These aren’t slogans on a wall — they’re habits we practice weekly, in season and out, until they become the shape of a life.</p>
</div>
<div class="commit-grid reveal">
<article class="commit">
<div class="commit-top">
<span class="commit-num">01</span>
<span class="commit-icon"><i data-lucide="book-open"></i></span>
</div>
<h3>Scripture, opened wide</h3>
<p>We read the Bible in every gathering — not as a relic, but as the living word of God. Our pastors teach verse by verse, our classes argue about the hard parts, and our small groups bring the text to bear on real life. You’ll never be handed a conclusion without being shown the path.</p>
</article>
<article class="commit">
<div class="commit-top">
<span class="commit-num">02</span>
<span class="commit-icon"><i data-lucide="coffee"></i></span>
</div>
<h3>Hospitality that feels like home</h3>
<p>From the coffee cart in the lobby to the seat you’re offered in the row, we practice a stubborn, old-fashioned welcome. Our welcome team greets every guest, our newcomers’ lunch runs monthly, and nobody eats alone unless they want to.</p>
</article>
<article class="commit">
<div class="commit-top">
<span class="commit-num">03</span>
<span class="commit-icon"><i data-lucide="scale"></i></span>
</div>
<h3>Justice & mercy on a schedule</h3>
<p>Faith without works is dead, so we put mercy on the calendar. The Riverbend Food Pantry serves 300 families a month, our ESL tutors walk with newcomers for a full year, and our families host the winter shelter. Mercy, but make it regular.</p>
</article>
<article class="commit">
<div class="commit-top">
<span class="commit-num">04</span>
<span class="commit-icon"><i data-lucide="sprout"></i></span>
</div>
<h3>Formation for the long road</h3>
<p>We’re not building an audience; we’re forming a people. Through discipleship groups, one-to-one mentoring, and the School of Formation, we walk with you for years — through grief, growth, doubt, and joy — as faith takes root and life changes.</p>
</article>
</div>
</div>
</section>
<!-- Ministries -->
<section class="section bg-cream" id="ministries">
<div class="container">
<div class="section-head reveal">
<div>
<span class="eyebrow">Ministries</span>
<h2>Find your people. <em class="accent">Find your place.</em></h2>
</div>
<p class="lede">Church at Havenridge doesn’t happen only on Sunday morning. It happens in living rooms, gymnasiums, kitchens, and classrooms all across the city — wherever two or three are gathered.</p>
</div>
<article class="ministry reveal">
<div class="media"><img src="https://picsum.photos/seed/havenridge-faith/900/675.jpg?grayscale" alt="Adults in a small group discussing scripture together" loading="lazy" decoding="async"></div>
<div class="ministry-body">
<span class="eyebrow">Adults · Faith Formation</span>
<h3>Grow deep in the Scriptures, together</h3>
<p>Sunday classes and midweek small groups are where adults open the Bible and one another’s lives. Our School of Formation runs September through May with tracks in theology, spiritual disciplines, and the quiet art of neighbor-loving. No question is off the table — most groups meet in homes within ten minutes of the church.</p>
<div class="ministry-facts">
<span class="fact"><i data-lucide="users"></i>Groups of 8–12</span>
<span class="fact"><i data-lucide="clock"></i>Sundays & midweek</span>
<span class="fact"><i data-lucide="heart-handshake"></i>Free childcare</span>
</div>
<a href="#visit" class="text-link" data-interest="group">Find a group <i data-lucide="arrow-right"></i></a>
</div>
</article>
<article class="ministry reveal">
<div class="media"><img src="https://picsum.photos/seed/havenridge-kids/900/675.jpg?grayscale" alt="Children laughing during a kids ministry activity" loading="lazy" decoding="async"></div>
<div class="ministry-body">
<span class="eyebrow">Kids · Students</span>
<h3>Safe, joyful spaces to grow</h3>
<p>Harbor Kids (six weeks through fifth grade) and Ridge Youth (sixth through twelfth) meet during both Sunday gatherings — secure check-in, background-checked volunteers, and a curriculum that takes kids seriously. On Wednesday nights, Ridge Youth fills the gym for worship, honest conversation, and far too much pizza.</p>
<div class="ministry-facts">
<span class="fact"><i data-lucide="users"></i>6 weeks – 5th grade</span>
<span class="fact"><i data-lucide="shield-check"></i>Secure check-in</span>
<span class="fact"><i data-lucide="sun"></i>Both Sunday services</span>
</div>
<a href="#visit" class="text-link" data-interest="kids">Register a child <i data-lucide="arrow-right"></i></a>
</div>
</article>
<article class="ministry reveal">
<div class="media"><img src="https://picsum.photos/seed/havenridge-outreach/900/675.jpg?grayscale" alt="Volunteers packing grocery boxes at the food pantry" loading="lazy" decoding="async"></div>
<div class="ministry-body">
<span class="eyebrow">Outreach · Service</span>
<h3>Mercy for the city, block by block</h3>
<p>Every third Saturday, volunteers pack grocery boxes at the Riverbend Food Pantry. Year-round, our ESL tutors help newcomers find their footing, our families host the winter shelter rotation, and our crews build alongside Habitat for Humanity. Show up once — most people stay for years.</p>
<div class="ministry-facts">
<span class="fact"><i data-lucide="calendar"></i>3rd Saturdays monthly</span>
<span class="fact"><i data-lucide="heart-handshake"></i>No experience needed</span>
<span class="fact"><i data-lucide="users"></i>Families welcome</span>
</div>
<a href="#visit" class="text-link" data-interest="volunteer">Volunteer with us <i data-lucide="arrow-right"></i></a>
</div>
</article>
</div>
</section>
<!-- Scripture band -->
<section class="verse">
<div class="verse-bg"><img src="https://picsum.photos/seed/havenridge-verse/1920/900.jpg?grayscale" alt="" loading="lazy" decoding="async"></div>
<div class="verse-inner reveal">
<div class="verse-frame">
<span class="eyebrow center gold">Matthew 11 : 28</span>
<blockquote>“Come to me, all you who are weary and burdened, and I will give you rest.”</blockquote>
<cite>Jesus · Gospel of Matthew</cite>
</div>
</div>
</section>
<!-- Events -->
<section class="section bg-white" id="events">
<div class="container">
<div class="section-head reveal">
<div>
<span class="eyebrow">Community life</span>
<h2>Mark the <em class="accent">calendar</em></h2>
</div>
<p class="lede">Everything below is open to everyone — regulars, first-timers, and the simply curious. Bring a friend, bring your questions, bring the kids.</p>
</div>
<div class="events-grid">
<div id="eventList" class="reveal"></div>
<aside class="reveal">
<div class="side-card">
<h4><i data-lucide="sun"></i>The weekly rhythm</h4>
<ul class="rhythm">
<li><span class="day">Sun</span><i data-lucide="church"></i><div class="what"><b>Gatherings</b><span>9:00 & 11:00 AM · Sanctuary</span></div></li>
<li><span class="day">Mon</span><i data-lucide="clock"></i><div class="what"><b>Church office</b><span>9:00 AM – 4:00 PM</span></div></li>
<li><span class="day">Wed</span><i data-lucide="moon"></i><div class="what"><b>Prayer & Communion</b><span>6:30 PM · The Chapel</span></div></li>
<li><span class="day">Thu</span><i data-lucide="users"></i><div class="what"><b>Small groups</b><span>Evenings · homes citywide</span></div></li>
<li><span class="day">Sat</span><i data-lucide="shopping-basket"></i><div class="what"><b>Food pantry</b><span>3rd Saturday · 8:00 AM</span></div></li>
</ul>
</div>
<div class="side-card">
<h4><i data-lucide="mail"></i>Never miss a week</h4>
<p>One email every Thursday with what’s ahead — events, volunteer openings, and a word of encouragement.</p>
<form class="news-form" id="newsForm" novalidate>
<input type="email" id="newsEmail" placeholder="you@example.com" aria-label="Email address">
<button class="btn btn-primary btn-sm" type="submit">Subscribe</button>
</form>
<p class="news-ok" id="newsOk" hidden><i data-lucide="check"></i>You’re on the list — see you Sunday.</p>
</div>
<div class="side-card">
<h4><i data-lucide="calendar-plus"></i>Add us to your calendar</h4>
<p>Download the next Sunday gathering as a calendar file and it lands on every device you own.</p>
<button type="button" class="btn btn-outline btn-sm btn-block" id="icsBtn"><i data-lucide="download"></i> Download .ics file</button>
</div>
</aside>
</div>
</div>
</section>
<!-- Community voices -->
<section class="section bg-cream" id="community">
<div class="container voices-wrap reveal">
<span class="eyebrow center">Community voices</span>
<h2>Stories from <em class="accent">the ridge</em></h2>
<div class="voice-stage" id="voiceStage">
<div class="quote-mark"><i data-lucide="quote"></i></div>
<blockquote class="voice-quote" id="voiceQuote"></blockquote>
<div class="voice-attr">
<img id="voiceAvatar" src="https://i.pravatar.cc/120?u=47" alt="">
<div class="who"><b id="voiceName"></b><span id="voiceRole"></span></div>
</div>
</div>
<div class="voice-tabs" id="voiceTabs" role="tablist" aria-label="Choose a story"></div>
</div>
</section>
<!-- Prayer wall -->
<section class="section bg-white" id="prayer">
<div class="container">
<div class="section-head reveal">
<div>
<span class="eyebrow">Prayer wall</span>
<h2>How can we <em class="accent">pray for you?</em></h2>
</div>
<p class="lede">Our prayer team gathers every Wednesday evening and prays over each request on this wall — by name. Share as much or as little as you like; requests stay here for thirty days, then are archived with care.</p>
</div>
<div class="prayer-grid">
<form class="prayer-form reveal" id="prayerForm" novalidate>
<h3>Post a request</h3>
<p class="prayer-form-sub">“Do not be anxious about anything…” — Philippians 4:6</p>
<div class="field">
<label for="prName">Your name</label>
<input type="text" id="prName" maxlength="60" placeholder="e.g. Sarah J." autocomplete="given-name">
</div>
<label class="check"><input type="checkbox" id="prAnon"> Post anonymously</label>
<div class="field">
<label for="prText">Your request</label>
<textarea id="prText" rows="4" maxlength="280" placeholder="What’s on your heart?"></textarea>
<div class="char-count"><span id="prCount">0</span> / 280</div>
<div class="err">Please share at least a few words so we know how to pray.</div>
</div>
<button class="btn btn-primary btn-block" type="submit"><i data-lucide="heart-handshake"></i> Post to the Prayer Wall</button>
<p class="prayer-fine">Prefer to talk? Text the prayer team any time: <a class="inline-link" href="sms:+15550134728">(555) 013-4728</a></p>
</form>
<div class="prayer-wall reveal" id="prayerWall" aria-live="polite"></div>
</div>
</div>
</section>
<!-- Giving -->
<section class="section give" id="give">
<div class="container give-grid">
<div class="give-copy reveal">
<span class="eyebrow">Generosity</span>
<h2>Give in a way that <em>outlives the week</em></h2>
<p>Every gift to Havenridge stays rooted right here in Riverbend. Ninety-two cents of every dollar goes straight to people — meals, tutoring, shelter, and the ministries you’ve just read about. The rest keeps the lights on and the doors open.</p>
<ul class="impact">
<li><b>$25</b> Stocks a family’s pantry box for a full week</li>
<li><b>$50</b> Funds a semester of ESL tutoring for one newcomer</li>
<li><b>$100</b> Keeps a neighbor’s lights on and water running for a month</li>
<li><b>$250</b> Sends a student to summer camp with Ridge Youth</li>
</ul>
<p class="give-note"><i data-lucide="shield-check"></i>Havenridge Community Church is a registered 501(c)(3) organization. Every gift is tax-deductible, and a receipt lands in your inbox the same day.</p>
</div>
<div class="give-widget reveal">
<div class="field">
<label>Frequency</label>
<div class="seg" id="freqSeg">
<button type="button" class="active" data-freq="once">One-time</button>
<button type="button" data-freq="monthly">Monthly</button>
</div>
</div>
<div class="field">
<label for="fundSelect">Give to</label>
<div class="select-wrap">
<select id="fundSelect">
<option value="general">Where it’s needed most</option>
<option value="pantry">Riverbend Food Pantry</option>
<option value="missions">Missions & Partnerships</option>
<option value="building">Building & Future</option>
</select>
<i data-lucide="chevron-down"></i>
</div>
</div>
<div class="field">
<label>Amount</label>
<div class="amounts" id="amounts">
<button type="button" data-amt="25">$25</button>
<button type="button" data-amt="50" class="active">$50</button>
<button type="button" data-amt="100">$100</button>
<button type="button" data-amt="250">$250</button>
</div>
<div class="custom-wrap">
<span class="cur">$</span>
<input type="number" id="customAmt" min="1" step="1" placeholder="Other amount" aria-label="Custom amount">
</div>
</div>
<button type="button" class="btn btn-primary btn-block" id="giveBtn" style="padding:17px">Give $50</button>
<p class="secure"><i data-lucide="shield-check"></i>Secure & encrypted · Cancel monthly gifts anytime</p>
</div>
</div>
</section>
<!-- Visit + FAQ -->
<section class="section bg-cream" id="visit">
<div class="container visit-grid">
<div class="reveal">
<span class="eyebrow">New here?</span>
<h2>Questions, <em class="accent">answered</em></h2>
<p class="lede">The things first-time guests ask us most — answered honestly, with no fine print.</p>
<div class="faq" id="faq">
<div class="faq-item">
<button type="button" class="faq-q" aria-expanded="false">What should I wear?<span class="faq-icon"><i data-lucide="plus"></i></span></button>
<div class="faq-a"><div><p>Whatever you have on. You’ll see everything from jeans and hoodies to Sunday best, and nobody minds either way. Come comfortable — you’re among friends.</p></div></div>
</div>
<div class="faq-item">
<button type="button" class="faq-q" aria-expanded="false">What about my kids?<span class="faq-icon"><i data-lucide="plus"></i></span></button>
<div class="faq-a"><div><p>Bring them! Harbor Kids (six weeks through fifth grade) runs during both services with secure check-in and background-checked volunteers. There’s a nursing room and a cry room off the lobby, and it’s all free.</p></div></div>
</div>
<div class="faq-item">
<button type="button" class="faq-q" aria-expanded="false">How long is the service?<span class="faq-icon"><i data-lucide="plus"></i></span></button>
<div class="faq-a"><div><p>About 75 minutes — singing, Scripture, a down-to-earth message, and a quiet moment to pray. We start and end on time, because your Sunday afternoon matters too.</p></div></div>
</div>
<div class="faq-item">
<button type="button" class="faq-q" aria-expanded="false">Do I have to give money or sign anything?<span class="faq-icon"><i data-lucide="plus"></i></span></button>
<div class="faq-a"><div><p>No. Giving is a response to grace, never a ticket to belong. You won’t be singled out, put on a list, or followed up with a sales pitch. You’re simply our guest.</p></div></div>
</div>
<div class="faq-item">
<button type="button" class="faq-q" aria-expanded="false">What does Havenridge actually believe?<span class="faq-icon"><i data-lucide="plus"></i></span></button>
<div class="faq-a"><div><p>We’re a non-denominational, Jesus-centered church anchored in the Bible: one God, three persons; salvation by grace through faith; and a church sent to love the world. Our full statement of faith is at the welcome desk — or ask us anything on Sunday.</p></div></div>
</div>
</div>
</div>
<div class="visit-card reveal" id="visitCard">
<span class="eyebrow">Plan your visit</span>
<h3 class="visit-title">Save your seat for Sunday</h3>
<p class="visit-sub">Tell us you’re coming, and a real human from our welcome team will email you before Sunday with everything you need — where to park, what to expect, and where to find the coffee.</p>
<form id="visitForm" novalidate>
<div class="field" id="vfName">
<label for="vName">First name</label>
<input type="text" id="vName" placeholder="Jordan" autocomplete="given-name">
<div class="err">Please tell us your name.</div>
</div>
<div class="field" id="vfEmail">
<label for="vEmail">Email</label>
<input type="email" id="vEmail" placeholder="you@example.com" autocomplete="email">
<div class="err">That email doesn’t look quite right.</div>
</div>
<div class="field">
<label for="vInterest">I’m mostly interested in</label>
<div class="select-wrap">
<select id="vInterest">
<option value="sunday">A Sunday gathering</option>
<option value="group">Joining a small group</option>
<option value="volunteer">Volunteering & outreach</option>
<option value="kids">Kids & students</option>
<option value="curious">Just looking around</option>
</select>
<i data-lucide="chevron-down"></i>
</div>
</div>
<div class="field">
<label for="vMsg">Anything we should know? <span class="opt">(optional)</span></label>
<textarea id="vMsg" rows="3" placeholder="Kids’ ages, questions, accessibility needs…"></textarea>
</div>
<button class="btn btn-primary btn-block" type="submit">Save My Spot <i data-lucide="arrow-right"></i></button>
<p class="prayer-fine">One email, from a real person. We promise never to spam you.</p>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div>
<a href="#top" class="brand">
<img src="https://placehold.co/96x96/2E5C4D/FCFAF4?text=HR&font=playfair+display" alt="Havenridge Community Church logo" width="46" height="46">
<span>
<span class="brand-name">Havenridge</span>
<span class="brand-sub">Community Church</span>
</span>
</a>
<p class="footer-blurb">A family of ordinary people in Riverbend, learning to follow Jesus together — and saving a seat for you.</p>
<div class="socials">
<a href="https://facebook.com/havenridgechurch" target="_blank" rel="noopener" aria-label="Facebook"><i data-lucide="facebook"></i></a>
<a href="https://instagram.com/havenridgechurch" target="_blank" rel="noopener" aria-label="Instagram"><i data-lucide="instagram"></i></a>
<a href="https://youtube.com/@havenridgechurch" target="_blank" rel="noopener" aria-label="YouTube"><i data-lucide="youtube"></i></a>
<a href="mailto:hello@havenridge.church" aria-label="Email us"><i data-lucide="mail"></i></a>
</div>
</div>
<div class="footer-col">
<h5>Visit Us</h5>
<ul>
<li>214 Alder Street</li>
<li>Riverbend, OR 97000</li>
<li>Sundays · 9:00 & 11:00 AM</li>
<li><a href="https://www.google.com/maps/search/?api=1&query=214+Alder+Street+Riverbend" target="_blank" rel="noopener">Get directions →</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Explore</h5>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#ministries">Ministries</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#prayer">Prayer Wall</a></li>
<li><a href="#give">Give</a></li>
<li><a href="#visit">Plan a Visit</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Contact</h5>
<div class="contact-line"><i data-lucide="phone"></i><a href="tel:+15550134728">(555) 013-4728</a></div>
<div class="contact-line"><i data-lucide="mail"></i><a href="mailto:hello@havenridge.church">hello@havenridge.church</a></div>
<div class="contact-line"><i data-lucide="clock"></i><span>Office · Tue–Fri, 9 AM – 4 PM</span></div>
<div class="contact-line"><i data-lucide="map-pin"></i><span>Text the prayer team: (555) 013-4728</span></div>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="year">2025</span> Havenridge Community Church · All rights reserved</span>
<div class="legal">
<button type="button" data-modal="privacy">Privacy Policy</button>
<button type="button" data-modal="terms">Terms of Use</button>
</div>
<span>Built with faith on Alder Street</span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal-overlay" id="modalOverlay" role="dialog" aria-modal="true" aria-label="Details">
<div class="modal">
<button type="button" class="modal-close" id="modalClose" aria-label="Close dialog"><i data-lucide="x"></i></button>
<div id="modalContent"></div>
</div>
</div>
<!-- Toasts -->
<div class="toast-zone" id="toastZone" aria-live="polite"></div>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script>
/* ---------- Helpers ---------- */
const $ = (s, c = document) => c.querySelector(s);
const $$ = (s, c = document) => [...c.querySelectorAll(s)];
const refreshIcons = () => { if (window.lucide) lucide.createIcons(); };
const escapeHtml = s => String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
refreshIcons();
$('#year').textContent = new Date().getFullYear();
/* ---------- Toasts ---------- */
function toast(msg, icon = 'check'){
const el = document.createElement('div');
el.className = 'toast';
el.innerHTML = `<i data-lucide="${icon}"></i><span></span>`;
el.querySelector('span').textContent = msg;
$('#toastZone').appendChild(el);
refreshIcons();
setTimeout(() => { el.classList.add('hide'); setTimeout(() => el.remove(), 450); }, 3800);
}
/* ---------- Header: shadow + mobile nav ---------- */
const header = $('#siteHeader');
addEventListener('scroll', () => header.classList.toggle('scrolled', scrollY > 8), { passive: true });
const nav = $('#mainNav'), navToggle = $('#navToggle');
navToggle.addEventListener('click', () => {
const open = nav.classList.toggle('open');
navToggle.classList.toggle('open', open);
navToggle.setAttribute('aria-expanded', open);
});
$$('#mainNav a').forEach(a => a.addEventListener('click', () => {
nav.classList.remove('open'); navToggle.classList.remove('open');
navToggle.setAttribute('aria-expanded', 'false');
}));
/* ---------- Scrollspy ---------- */
const spyLinks = $$('.main-nav a[data-spy]');
const spyIO = new IntersectionObserver(entries => {
entries.forEach(en => {
if (en.isIntersecting) {
spyLinks.forEach(a => a.classList.remove('active'));
const link = spyLinks.find(a => a.dataset.spy === en.target.id);
if (link) link.classList.add('active');
}
});
}, { rootMargin: '-35% 0px -55% 0px' });
['about','ministries','events','community','prayer','give','visit'].forEach(id => {
const s = document.getElementById(id); if (s) spyIO.observe(s);
});
/* ---------- Scroll reveal ---------- */
const revIO = new IntersectionObserver(entries => {
entries.forEach(en => {
if (en.isIntersecting) { en.target.classList.add('in'); revIO.unobserve(en.target); }
});
}, { threshold: .12 });
$$('.reveal').forEach(el => revIO.observe(el));
/* ---------- Next-gathering countdown ---------- */
function nextServiceDate(){
const n = new Date();
const d = new Date(n.getFullYear(), n.getMonth(), n.getDate(), 9, 0, 0, 0);
while (d <= n) d.setDate(d.getDate() + 7);
return d;
}
const serviceDate = nextServiceDate();
$('#gatherDate').textContent = serviceDate.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
function tick(){
const diff = Math.max(0, serviceDate - new Date());
const set = (id, v) => $(id).textContent = String(v).padStart(2, '0');
set('#cdD', Math.floor(diff / 864e5));
set('#cdH', Math.floor(diff % 864e5 / 36e5));
set('#cdM', Math.floor(diff % 36e5 / 6e4));
set('#cdS', Math.floor(diff % 6e4 / 1e3));
}
tick(); setInterval(tick, 1000);
/* ---------- Events (dates always computed as upcoming) ---------- */
function nextOccurrence(day, hour, minute){
const n = new Date();
const d = new Date(n.getFullYear(), n.getMonth(), n.getDate(), hour, minute, 0, 0);
while (d.getDay() !== day || d <= n) d.setDate(d.getDate() + 1);
return d;
}
function thirdSaturday(){
const n = new Date();
for (let i = 0; i < 40; i++){
const d = new Date(n.getFullYear(), n.getMonth(), n.getDate() + i, 8, 0, 0, 0);
if (d.getDay() === 6 && d.getDate() >= 15 && d.getDate() <= 21 && d > n) return d;
}
}
function fourthSunday(){
const n = new Date();
const mk = (y, m) => {
const first = new Date(y, m, 1);
const off = (0 - first.getDay() + 7) % 7;
return new Date(y, m, 1 + off + 21, 12, 15, 0, 0);
};
let d = mk(n.getFullYear(), n.getMonth());
if (d <= n) d = mk(n.getFullYear(), n.getMonth() + 1);
return d;
}
const EVENTS = [
{ title: 'Sunday Gatherings', tag: 'Worship', aud: 'All ages', time: '9:00 & 11:00 AM', loc: 'The Sanctuary',
desc: 'Two identical gatherings with live worship, practical teaching from the Scriptures, and kids check-in at both. Come early for coffee; stay late for conversation.',
date: () => nextOccurrence(0, 9, 0) },
{ title: 'Midweek Prayer & Communion', tag: 'Prayer', aud: 'Adults', time: '6:30 – 7:30 PM', loc: 'The Chapel',
desc: 'A quiet, candlelit half hour of Scripture, silence, and communion in the middle of your week. Come weary; leave held.',
date: () => nextOccurrence(3, 18, 30) },
{ title: 'Food Pantry Volunteer Morning', tag: 'Service', aud: 'Families welcome', time: '8:00 AM – 12:00 PM', loc: 'Riverbend Community Center',
desc: 'Pack grocery boxes, sort donations, and meet neighbors with dignity on both sides of the table. No experience needed — just show up.',
date: thirdSaturday },
{ title: 'Newcomers’ Lunch', tag: 'Welcome', aud: 'First-timers', time: '12:15 – 1:30 PM', loc: 'Fellowship Hall',
desc: 'A sit-down meal with our pastors — no pitch, no pressure. Hear the Havenridge story, ask anything, and meet people who remember being new.',
date: fourthSunday }
];
const savedEvents = new Set();
function renderEvents(){
const now = new Date();
const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
$('#eventList').innerHTML = EVENTS.map((ev, i) => {
const d = ev.date();
const isToday = d.toDateString() === now.toDateString();
const isTmr = d.toDateString() === tomorrow.toDateString();
const chip = isToday ? '<span class="tag">Today</span>' : isTmr ? '<span class="tag alt">Tomorrow</span>' : '';
return `<article class="event">
<div class="event-date"><b>${d.getDate()}</b><span>${d.toLocaleDateString('en-US',{month:'short'})}</span></div>
<div>
<div class="event-tags"><span class="tag">${ev.tag}</span>${chip}<span class="tag alt">${ev.aud}</span></div>
<h3>${ev.title}</h3>
<p>${ev.desc}</p>
<div class="event-meta">
<span><i data-lucide="calendar"></i>${d.toLocaleDateString('en-US',{weekday:'long', month:'long', day:'numeric'})}</span>
<span><i data-lucide="clock"></i>${ev.time}</span>
<span><i data-lucide="map-pin"></i>${ev.loc}</span>
</div>
</div>
<div class="event-cta"><button type="button" class="btn btn-outline btn-sm rsvp" data-i="${i}">Save a seat</button></div>
</article>`;
}).join('');
refreshIcons();
}
renderEvents();
$('#eventList').addEventListener('click', e => {
const btn = e.target.closest('.rsvp'); if (!btn) return;
const i = +btn.dataset.i;
if (savedEvents.has(i)) {
savedEvents.delete(i);
btn.classList.remove('saved'); btn.textContent = 'Save a seat';
} else {
savedEvents.add(i);
btn.classList.add('saved');
btn.innerHTML = '<i data-lucide="check"></i> Saved';
refreshIcons();
toast(`You're on the list for “${EVENTS[i].title.replace('&','&')}” — see you there!`, 'calendar-check');
}
});
/* ---------- Community voices ---------- */
const VOICES = [
{ name: 'Maria G.', role: 'Member since 2016', img: 'https://i.pravatar.cc/120?u=47',
quote: '“I walked in carrying a divorce I didn’t know how to talk about. Within a month, three women from my small group had shown up at my door with dinner and a listening ear. Havenridge didn’t fix my life — it carried it.”' },
{ name: 'David & Paula O.', role: 'Parents of three', img: 'https://i.pravatar.cc/120?u=12',
quote: '“Our kids beg to come to church. Beg. The volunteers know their names, their allergies, and their favorite Bible stories. We came for the kids’ program and stayed for the grace we found ourselves.”' },
{ name: 'James T.', role: 'Food Pantry volunteer', img: 'https://i.pravatar.cc/120?u=33',
quote: '“I signed up to serve one Saturday morning six years ago. Handing a box of groceries to a neighbor and watching their whole face change — that’s the gospel I want to be part of.”' }
];
let voiceIdx = 0, voiceTimer = null;
function showVoice(i, instant = false){
voiceIdx = i;
const apply = () => {
const v = VOICES[i];
$('#voiceQuote').textContent = v.quote;
$('#voiceName').textContent = v.name;
$('#voiceRole').textContent = v.role;
$('#voiceAvatar').src = v.img;
$('#voiceAvatar').alt = v.name;
$$('#voiceTabs .voice-tab').forEach((t, ti) => t.classList.toggle('active', ti === i));
};
if (instant) { apply(); return; }
const stage = $('#voiceStage');
stage.classList.add('fading');
setTimeout(() => { apply(); stage.classList.remove('fading'); }, 280);
}
function restartVoiceTimer(){
clearInterval(voiceTimer);
voiceTimer = setInterval(() => showVoice((voiceIdx + 1) % VOICES.length), 7000);
}
$('#voiceTabs').innerHTML = VOICES.map((v, i) =>
`<button type="button" class="voice-tab" role="tab" aria-label="Read ${escapeHtml(v.name)}’s story"><img src="${v.img}" alt=""></button>`).join('');
$$('#voiceTabs .voice-tab').forEach((t, i) => t.addEventListener('click', () => { showVoice(i); restartVoiceTimer(); }));
const voicesSection = $('#community');
voicesSection.addEventListener('mouseenter', () => clearInterval(voiceTimer));
voicesSection.addEventListener('mouseleave', restartVoiceTimer);
showVoice(0, true); restartVoiceTimer();
/* ---------- Prayer wall ---------- */
const PRAYER_KEY = 'havenridge-prayers-v1';
const VOTE_KEY = 'havenridge-prayer-votes-v1';
const seedPrayers = [
{ name: 'Diane R.', anon: false, ts: Date.now() - 2 * 36e5, amens: 12,
text: 'Please pray for my mom, Ruth — her surgery is Tuesday and she’s never spent a night in a hospital. She’s scared, and honestly, so am I.' },
{ name: '', anon: true, ts: Date.now() - 5 * 36e5, amens: 8,
text: 'Finals week has me running on three hours of sleep and a lot of coffee. Pray for steady minds and kind hearts in the library at 2 AM.' },
{ name: 'Marcus', anon: false, ts: Date.now() - 26 * 36e5, amens: 24,
text: 'Celebrating five years sober today. Thank you for walking with me, church family. Sobriety is possible — and community helps.' }
];
let prayers = [];
try { prayers = JSON.parse(localStorage.getItem(PRAYER_KEY)) || []; } catch (e) { prayers = []; }
if (!Array.isArray(prayers) || !prayers.length) prayers = seedPrayers.slice();
prayers.forEach((p, i) => { if (!p.id) p.id = 's' + i; if (typeof p.amens !== 'number') p.amens = 0; });
let votes = new Set();
try { votes = new Set(JSON.parse(localStorage.getItem(VOTE_KEY)) || []); } catch (e) { votes = new Set(); }
const savePrayers = () => { try { localStorage.setItem(PRAYER_KEY, JSON.stringify(prayers.slice(0, 30))); } catch (e) {} };
const saveVotes = () => { try { localStorage.setItem(VOTE_KEY, JSON.stringify([...votes])); } catch (e) {} };
function timeAgo(ts){
const s = Math.max(0, (Date.now() - ts) / 1000);
if (s < 60) return 'just now';
const m = s / 60; if (m < 60) return Math.floor(m) + 'm ago';
const h = m / 60; if (h < 24) return Math.floor(h) + 'h ago';
return Math.floor(h / 24) + 'd ago';
}
function initials(name){
const parts = name.trim().split(/\s+/).filter(Boolean);
return parts.length ? (parts[0][0] + (parts[1] ? parts[1][0] : '')).toUpperCase() : 'A';
}
function renderPrayers(){
const wall = $('#prayerWall');
wall.innerHTML = prayers.map(p => {
const display = p.anon ? 'Anonymous' : (p.name || 'Friend');
const on = votes.has(p.id);
return `<article class="prayer-card${p.fresh ? ' fresh' : ''}" data-id="${p.id}">
<div class="prayer-head">
<div class="prayer-ava">${p.anon ? 'A' : escapeHtml(initials(display))}</div>
<div class="prayer-who"><b>${escapeHtml(display)}</b><span>${timeAgo(p.ts)}</span></div>
</div>
<p class="prayer-body"></p>
<div class="prayer-foot">
<button type="button" class="amen-btn${on ? ' on' : ''}" data-amen="${p.id}"><i data-lucide="heart"></i><span>Amen</span></button>
<span class="count"><i data-lucide="heart-handshake"></i>${p.amens} ${p.amens === 1 ? 'person has' : 'people have'} prayed</span>
</div>
</article>`;
}).join('');
$$('.prayer-card', wall).forEach((card, i) => {
card.querySelector('.prayer-body').textContent = prayers[i].text; // safe text insertion
if (prayers[i].fresh) prayers[i].fresh = false;
});
refreshIcons();
}
renderPrayers();
$('#prayerWall').addEventListener('click', e => {
const btn = e.target.closest('.amen-btn'); if (!btn) return;
const p = prayers.find(x => x.id === btn.dataset.amen); if (!p) return;
if (votes.has(p.id)) {
votes.delete(p.id); p.amens = Math.max(0, p.amens - 1);
btn.classList.remove('on');
} else {
votes.add(p.id); p.amens++; btn.classList.add('on');
toast('Amen — our team is praying with you.', 'heart');
}
const count = btn.closest('.prayer-foot').querySelector('.count');
count.innerHTML = `<i data-lucide="heart-handshake"></i>${p.amens} ${p.amens === 1 ? 'person has' : 'people have'} prayed`;
refreshIcons();
saveVotes(); savePrayers();
});
$('#prText').addEventListener('input', e => { $('#prCount').textContent = e.target.value.length; });
$('#prayerForm').addEventListener('submit', e => {
e.preventDefault();
const text = $('#prText').value.trim();
const field = $('#prText').closest('.field');
if (text.length < 4) { field.classList.add('invalid'); $('#prText').focus(); return; }
field.classList.remove('invalid');
const anon = $('#prAnon').checked;
const name = anon ? '' : $('#prName').value.trim();
prayers.unshift({ id: 'u' + Date.now(), name, anon, text, ts: Date.now(), amens: 0, fresh: true });
savePrayers(); renderPrayers();
e.target.reset(); $('#prCount').textContent = '0';
toast('Your request is on the prayer wall. We pray over it Wednesday evening.', 'heart-handshake');
});
/* ---------- Giving widget ---------- */
const give = { freq: 'once', amount: 50, custom: '' };
function updateGiveBtn(){
const amt = give.custom ? Math.round(+give.custom) : give.amount;
$('#giveBtn').textContent = amt > 0
? `Give $${amt.toLocaleString()}${give.freq === 'monthly' ? ' / month' : ''}`
: 'Enter an amount';
}
$$('#freqSeg button').forEach(b => b.addEventListener('click', () => {
$$('#freqSeg button').forEach(x => x.classList.remove('active'));
b.classList.add('active');
give.freq = b.dataset.freq;
updateGiveBtn();
}));
$$('#amounts button').forEach(b => b.addEventListener('click', () => {
$$('#amounts button').forEach(x => x.classList.remove('active'));
b.classList.add('active');
give.amount = +b.dataset.amt; give.custom = '';
$('#customAmt').value = '';
updateGiveBtn();
}));
$('#customAmt').addEventListener('input', e => {
const v = e.target.value.trim();
if (v) {
$$('#amounts button').forEach(x => x.classList.remove('active'));
give.custom = v;
} else {
give.custom = ''; give.amount = 50;
$('#amounts button[data-amt="50"]').classList.add('active');
}
updateGiveBtn();
});
$('#giveBtn').addEventListener('click', () => {
const amt = give.custom ? Math.round(+give.custom) : give.amount;
if (!amt || amt <= 0) { toast('Please choose or enter an amount first.', 'info'); return; }
const fundName = $('#fundSelect').selectedOptions[0].textContent;
toast(`Thank you! Your ${give.freq === 'monthly' ? 'monthly ' : ''}gift of $${amt.toLocaleString()} to “${fundName}” is being processed securely.`, 'heart-handshake');
});
/* ---------- FAQ accordion ---------- */
$$('.faq-item').forEach(item => {
$('.faq-q', item).addEventListener('click', () => {
const wasOpen = item.classList.contains('open');
$$('.faq-item.open').forEach(o => { o.classList.remove('open'); $('.faq-q', o).setAttribute('aria-expanded', 'false'); });
if (!wasOpen) { item.classList.add('open'); $('.faq-q', item).setAttribute('aria-expanded', 'true'); }
});
});
/* ---------- Ministry CTAs pre-fill the visit form ---------- */
$$('[data-interest]').forEach(a => a.addEventListener('click', () => {
const map = { group: 'group', kids: 'kids', volunteer: 'volunteer' };
const v = map[a.dataset.interest];
if (v) $('#vInterest').value = v;
}));
/* ---------- Visit form ---------- */
$('#visitForm').addEventListener('submit', e => {
e.preventDefault();
const name = $('#vName').value.trim();
const email = $('#vEmail').value.trim();
const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
$('#vfName').classList.toggle('invalid', !name);
$('#vfEmail').classList.toggle('invalid', !emailOk);
if (!name || !emailOk) return;
$('#visitCard').innerHTML = `<div class="visit-success">
<div class="success-icon"><i data-lucide="check"></i></div>
<h3 class="visit-title">You’re on the list, ${escapeHtml(name)}!</h3>
<p class="visit-sub">A real human from our welcome team will email you before Sunday with where to park, what to expect, and where to find the coffee. We can’t wait to meet you.</p>
<p class="prayer-fine">Meanwhile: <a class="inline-link" href="https://www.google.com/maps/search/?api=1&query=214+Alder+Street+Riverbend" target="_blank" rel="noopener">get directions</a> · <a class="inline-link" href="#events">see what’s ahead</a></p>
</div>`;
refreshIcons();
toast(`Visit saved — see you Sunday, ${name}!`, 'sparkles');
});
/* ---------- Newsletter ---------- */
$('#newsForm').addEventListener('submit', e => {
e.preventDefault();
const em = $('#newsEmail').value.trim();
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(em)) { toast('Please enter a valid email address.', 'info'); $('#newsEmail').focus(); return; }
$('#newsForm').hidden = true;
$('#newsOk').hidden = false;
refreshIcons();
toast('Subscribed — the weekly email lands every Thursday.', 'mail');
});
/* ---------- Calendar (.ics) download ---------- */
$('#icsBtn').addEventListener('click', () => {
const start = nextServiceDate();
const end = new Date(start.getTime() + 75 * 60000);
const fmt = d => d.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
const ics = ['BEGIN:VCALENDAR','VERSION:2.0','PRODID:-//Havenridge Community Church//EN','BEGIN:VEVENT',
'UID:' + Date.now() + '@havenridge.church','DTSTAMP:' + fmt(new Date()),
'DTSTART:' + fmt(start),'DTEND:' + fmt(end),
'SUMMARY:Havenridge Sunday Gathering','LOCATION:214 Alder Street\\, Riverbend',
'DESCRIPTION:Two gatherings — 9:00 & 11:00 AM. Kids check-in at both. Doors open 30 minutes early.',
'END:VEVENT','END:VCALENDAR'].join('\r\n');
const blob = new Blob([ics], { type: 'text/calendar' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'havenridge-sunday-gathering.ics';
document.body.appendChild(a); a.click(); a.remove();
setTimeout(() => URL.revokeObjectURL(a.href), 1000);
toast('Calendar file downloaded — see you Sunday!', 'calendar-plus');
});
/* ---------- Modal (sermon / privacy / terms) ---------- */
const MODALS = {
sermon: {
eyebrow: 'Last Sunday · “Road Stories” series',
title: '“The Table” — Pastor Adaeze Okafor',
body: `<div class="sermon-media">
<img src="https://picsum.photos/seed/havenridge-sermon/1280/720.jpg?grayscale" alt="Pastor Adaeze Okafor teaching on Sunday morning" loading="lazy">
<div class="sermon-play"><button type="button" id="playBtn" aria-label="Play message"><i data-lucide="play"></i></button></div>
</div>
<div class="sermon-meta">
<span><i data-lucide="book-open"></i>Luke 24:13–35</span>
<span><i data-lucide="user"></i>Pastor Adaeze Okafor</span>
<span><i data-lucide="clock"></i>38 minutes</span>
</div>
<p>Every week we post the message by Sunday evening — but honestly, the room is better. There’s coffee, there are kids laughing in the lobby, and there’s a table with your name on it.</p>
<button type="button" class="btn btn-primary" id="modalVisit">Plan your visit instead <i data-lucide="arrow-right"></i></button>`
},
privacy: {
eyebrow: 'Legal',
title: 'Privacy Policy',
body: `<p>Havenridge Community Church respects your privacy. Information you share with us — a visit form, a prayer request, a giving record — is used only to welcome you, pray for you, and process your gift.</p>
<p>We never sell, rent, or trade your personal information. Prayer requests posted on this site are visible to the congregation for thirty days, then archived privately by our team.</p>
<p>To update or delete anything you’ve shared, email <strong>hello@havenridge.church</strong> or call the church office at (555) 013-4728. A real person will take care of it within two business days.</p>`
},
terms: {
eyebrow: 'Legal',
title: 'Terms of Use',
body: `<p>Welcome to havenridge.church. By using this site you agree to use it kindly: no spam, no scraping, and no content that harasses or exploits others.</p>
<p>Prayer requests and stories posted here may be read aloud in our services and shared in the weekly email. Anonymous posts remain anonymous.</p>
<p>This site is provided as-is, without warranties of any kind. Scripture quotations are from the NIV® and ESV® translations.</p>
<p>Questions about these terms? Write to <strong>hello@havenridge.church</strong> — we read everything.</p>`
}
};
const overlay = $('#modalOverlay');
function openModal(key){
const m = MODALS[key]; if (!m) return;
$('#modalContent').innerHTML = `<span class="eyebrow">${m.eyebrow}</span><h3>${m.title}</h3><div class="modal-body">${m.body}</div>`;
overlay.classList.add('open');
document.body.style.overflow = 'hidden';
refreshIcons();
}
function closeModal(){ overlay.classList.remove('open'); document.body.style.overflow = ''; }
$$('[data-modal]').forEach(b => b.addEventListener('click', () => openModal(b.dataset.modal)));
$('#modalClose').addEventListener('click', closeModal);
overlay.addEventListener('click', e => { if (e.target === overlay) closeModal(); });
addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
$('#modalContent').addEventListener('click', e => {
if (e.target.closest('#playBtn')) toast('The full message archive launches this fall — until then, join us live Sunday at 9:00 or 11:00 AM.', 'play');
if (e.target.closest('#modalVisit')) { closeModal(); $('#visit').scrollIntoView({ behavior: 'smooth' }); }
});
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T10:12:08.858Z",
"url": "https://benchmark.aimac.invalid/8e74738f262d199bdda480e004524dbcd8fef5120debe84441f304c384d78fca.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Havenridge Community Church \u2014 back to top\">",
"target": [
".header-inner > .brand[href$=\"#top\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Havenridge Community Church \u2014 back to top\">",
"target": [
".header-inner > .brand[href$=\"#top\"]"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"countdown\" role=\"timer\" aria-label=\"Time remaining until the next gathering\">",
"target": [
".countdown"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" data-lucide=\"clock\" aria-hidden=\"true\" class=\"lucide lucide-clock\">",
"target": [
".topbar-item:nth-child(1) > .lucide-clock[data-lucide=\"clock\"]"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Havenridge Community Church \u2014 back to top\">",
"target": [
".header-inner > .brand[href$=\"#top\"]"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"countdown\" role=\"timer\" aria-label=\"Time remaining until the next gathering\">",
"target": [
".countdown"
]
}
]
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-children",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA children are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"voice-tabs\" id=\"voiceTabs\" role=\"tablist\" aria-label=\"Choose a story\">",
"target": [
"#voiceTabs"
]
}
]
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-parent",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA parent role present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button type=\"button\" class=\"voice-tab active\" role=\"tab\" aria-label=\"Read Maria G.\u2019s story\"><img src=\"https://i.pravatar.cc/120?u=47\" alt=\"\"></button>",
"target": [
"button[aria-label=\"Read Maria G.\u2019s story\"]"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<div class=\"countdown\" role=\"timer\" aria-label=\"Time remaining until the next gathering\">",
"target": [
".countdown"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Havenridge Community Church \u2014 back to top\">",
"target": [
".header-inner > .brand[href$=\"#top\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#top\" class=\"brand\" aria-label=\"Havenridge Community Church \u2014 back to top\">",
"target": [
".header-inner > .brand[href$=\"#top\"]"
]
}
]
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input type=\"text\" id=\"prName\" maxlength=\"60\" placeholder=\"e.g. Sarah J.\" autocomplete=\"given-name\">",
"target": [
"#prName"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button type=\"button\" class=\"btn btn-ghost-light\" data-modal=\"sermon\">",
"target": [
".btn-ghost-light"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1>A place to <em>belong</em>, a faith to grow, and a city to <em>love</em>.</h1>",
"target": [
"h1"
]
},
{
"html": "<h2>You\u2019ve been <em class=\"accent\">expected</em>.</h2>",
"target": [
".about-copy > h2"
]
},
{
"html": "<h2>Four commitments that shape <em class=\"accent\">every gathering</em></h2>",
"target": [
"#commitments > .container > .section-head.reveal > div > h2"
]
},
{
"html": "<h3>Scripture, opened wide</h3>",
"target": [
".commit:nth-child(1) > h3"
]
},
{
"html": "<h3>Hospitality that feels like home</h3>",
"target": [
".commit:nth-child(2) > h3"
]
},
{
"html": "<h3>Justice & mercy on a schedule</h3>",
"target": [
".commit:nth-child(3) > h3"
]
},
{
"html": "<h3>Formation for the long road</h3>",
"target": [
".commit:nth-child(4) > h3"
]
},
{
"html": "<h2>Find your people. <em class=\"accent\">Find your place.</em></h2>",
"target": [
"#ministries > .container > .section-head.reveal > div > h2"
]
},
{
"html": "<h3>Grow deep in the Scriptures, together</h3>",
"target": [
".ministry:nth-child(2) > .ministry-body > h3"
]
},
{
"html": "<h3>Safe, joyful spaces to grow</h3>",
"target": [
".ministry:nth-child(3) > .ministry-body > h3"
]
},
{
"html": "<h3>Mercy for the city, block by block</h3>",
"target": [
".ministry:nth-child(4) > .ministry-body > h3"
]
},
{
"html": "<h2>Mark the <em class=\"accent\">calendar</em></h2>",
"target": [
"#events > .container > .section-head.reveal > div > h2"
]
},
{
"html": "<h3>Sunday Gatherings</h3>",
"target": [
".event:nth-child(1) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Midweek Prayer & Communion</h3>",
"target": [
".event:nth-child(2) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Food Pantry Volunteer Morning</h3>",
"target": [
".event:nth-child(3) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Newcomers\u2019 Lunch</h3>",
"target": [
".event:nth-child(4) > div:nth-child(2) > h3"
]
},
{
"html": "<h4>",
"target": [
".side-card:nth-child(1) > h4"
]
},
{
"html": "<h4>",
"target": [
".side-card:nth-child(2) > h4"
]
},
{
"html": "<h4>",
"target": [
".side-card:nth-child(3) > h4"
]
},
{
"html": "<h2>Stories from <em class=\"accent\">the ridge</em></h2>",
"target": [
".voices-wrap > h2"
]
},
{
"html": "<h2>How can we <em class=\"accent\">pray for you?</em></h2>",
"target": [
"#prayer > .container > .section-head.reveal > div > h2"
]
},
{
"html": "<h3>Post a request</h3>",
"target": [
"#prayerForm > h3"
]
},
{
"html": "<h2>Give in a way that <em>outlives the week</em></h2>",
"target": [
".give-copy > h2"
]
},
{
"html": "<h2>Questions, <em class=\"accent\">answered</em></h2>",
"target": [
".visit-grid > .reveal:nth-child(1) > h2"
]
},
{
"html": "<h3 class=\"visit-title\">Save your seat for Sunday</h3>",
"target": [
".visit-title"
]
},
{
"html": "<h5>Visit Us</h5>",
"target": [
".footer-col:nth-child(2) > h5"
]
},
{
"html": "<h5>Explore</h5>",
"target": [
".footer-col:nth-child(3) > h5"
]
},
{
"html": "<h5>Contact</h5>",
"target": [
".footer-col:nth-child(4) > h5"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9dbd5",
"bgColor": "#152a23",
"contrastRatio": 10.84,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 10.84"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"topbar-item\">",
"target": [
".topbar-group:nth-child(1) > .topbar-item:nth-child(1)"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "prName",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<input type=\"text\" id=\"prName\" maxlength=\"60\" placeholder=\"e.g. Sarah J.\" autocomplete=\"given-name\">",
"target": [
"#prName"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"email\" id=\"newsEmail\" placeholder=\"you@example.com\" aria-label=\"Email address\">",
"target": [
"#newsEmail"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/96x96/2E5C4D/FCFAF4?text=HR&font=playfair+display\" alt=\"Havenridge Community Church logo\" width=\"46\" height=\"46\">",
"target": [
".header-inner > .brand[href$=\"#top\"] > img[width=\"46\"][height=\"46\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"email\" id=\"newsEmail\" placeholder=\"you@example.com\" aria-label=\"Email address\">",
"target": [
"#newsEmail"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a class=\"topbar-item\" href=\"tel:+15550134728\">",
"target": [
".topbar-item[href=\"tel:+15550134728\"]"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"rhythm\">",
"target": [
".rhythm"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li>",
"target": [
".rhythm > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/96x96/2E5C4D/FCFAF4?text=HR&font=playfair+display\" alt=\"Havenridge Community Church logo\" width=\"46\" height=\"46\">",
"target": [
".header-inner > .brand[href$=\"#top\"] > img[width=\"46\"][height=\"46\"]"
]
}
]
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "explicit-label",
"data": null,
"relatedNodes": [
{
"html": "<label for=\"fundSelect\">Give to</label>",
"target": [
"label[for=\"fundSelect\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<select id=\"fundSelect\">",
"target": [
"#fundSelect"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"topbar-item\" href=\"tel:+15550134728\">",
"target": [
".topbar-item[href=\"tel:+15550134728\"]"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": "imgNode",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<img src=\"https://picsum.photos/seed/havenridge-hero/1920/1080.jpg?grayscale\" alt=\"\" fetchpriority=\"high\">",
"target": [
"img[fetchpriority=\"high\"]"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined because element contains an image node"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">A neighborhood church in Riverbend \u00b7 Est. 1993</span>",
"target": [
".hero-inner > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined because element contains an image node"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fff7ee",
"bgColor": "#c05b2e",
"contrastRatio": 4.14,
"fontSize": "10.6pt (14.08px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#visit\" class=\"btn btn-primary btn-sm nav-cta\">Plan a Visit</a>",
"target": [
".nav-cta"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#visit\" class=\"btn btn-primary btn-sm nav-cta\">Plan a Visit</a>",
"target": [
".nav-cta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fff7ee",
"bgColor": "#c05b2e",
"contrastRatio": 4.14,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#visit\" class=\"btn btn-primary\">",
"target": [
".hero-ctas > .btn-primary.btn[href$=\"#visit\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#visit\" class=\"btn btn-primary\">",
"target": [
".hero-ctas > .btn-primary.btn[href$=\"#visit\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#fcfaf4",
"contrastRatio": 4.21,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"gather-card reveal in\">",
"target": [
".gather-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf4, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"gather-label\">",
"target": [
".gather-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf4, font size: 8.4pt (11.2px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#fcfaf4",
"contrastRatio": 4.21,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"gather-card reveal in\">",
"target": [
".gather-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a class=\"text-link gather-directions\" href=\"https://www.google.com/maps/search/?api=1&query=214+Alder+Street+Riverbend\" target=\"_blank\" rel=\"noopener\">",
"target": [
".gather-directions"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Welcome home</span>",
"target": [
".about-copy > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fff7ee",
"bgColor": "#c05b2e",
"contrastRatio": 4.14,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#visit\" class=\"btn btn-primary\">Plan Your First Visit</a>",
"target": [
".about-ctas > .btn-primary.btn[href$=\"#visit\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#visit\" class=\"btn btn-primary\">Plan Your First Visit</a>",
"target": [
".about-ctas > .btn-primary.btn[href$=\"#visit\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#prayer\" class=\"text-link\">",
"target": [
".text-link[href$=\"#prayer\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#fcf9f3",
"contrastRatio": 4.18,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header scrolled\" id=\"siteHeader\">",
"target": [
"#siteHeader"
]
},
{
"html": "<section class=\"section bg-cream\" id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.18 (foreground color: #c05b2e, background color: #fcf9f3, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#about\" data-spy=\"about\" class=\"active\">About</a>",
"target": [
"a[data-spy=\"about\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.18 (foreground color: #c05b2e, background color: #fcf9f3, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#ffffff",
"contrastRatio": 4.39,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-white section-commit\" id=\"commitments\">",
"target": [
"#commitments"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">What we\u2019re about</span>",
"target": [
".section-head.in.reveal > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#fcfaf5",
"contrastRatio": 4.21,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header scrolled\" id=\"siteHeader\">",
"target": [
"#siteHeader"
]
},
{
"html": "<section class=\"section bg-white section-commit\" id=\"commitments\">",
"target": [
"#commitments"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf5, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#ministries\" data-spy=\"ministries\" class=\"active\">Ministries</a>",
"target": [
"a[data-spy=\"ministries\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf5, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#ffffff",
"contrastRatio": 4.39,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-white section-commit\" id=\"commitments\">",
"target": [
"#commitments"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">What we\u2019re about</span>",
"target": [
"#commitments > .container > .section-head.in.reveal > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"ministries\">",
"target": [
"#ministries"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Ministries</span>",
"target": [
"#ministries > .container > .section-head.in.reveal > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"ministries\">",
"target": [
"#ministries"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Adults \u00b7 Faith Formation</span>",
"target": [
".ministry.in > .ministry-body > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"ministries\">",
"target": [
"#ministries"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#visit\" class=\"text-link\" data-interest=\"group\">",
"target": [
"a[data-interest=\"group\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"ministries\">",
"target": [
"#ministries"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Adults \u00b7 Faith Formation</span>",
"target": [
".ministry.in:nth-child(2) > .ministry-body > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"ministries\">",
"target": [
"#ministries"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Kids \u00b7 Students</span>",
"target": [
".ministry.in:nth-child(3) > .ministry-body > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"ministries\">",
"target": [
"#ministries"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#visit\" class=\"text-link\" data-interest=\"kids\">",
"target": [
"a[data-interest=\"kids\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"ministries\">",
"target": [
"#ministries"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Outreach \u00b7 Service</span>",
"target": [
".ministry.in:nth-child(4) > .ministry-body > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"ministries\">",
"target": [
"#ministries"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#visit\" class=\"text-link\" data-interest=\"volunteer\">",
"target": [
"a[data-interest=\"volunteer\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#ffffff",
"contrastRatio": 4.39,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-white\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Community life</span>",
"target": [
"#events > .container > .section-head.in.reveal > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#fcfaf5",
"contrastRatio": 4.21,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header scrolled\" id=\"siteHeader\">",
"target": [
"#siteHeader"
]
},
{
"html": "<section class=\"section bg-white\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf5, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\" data-spy=\"events\" class=\"active\">Events</a>",
"target": [
"a[data-spy=\"events\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf5, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"ministries\">",
"target": [
"#ministries"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Adults \u00b7 Faith Formation</span>",
"target": [
".ministry:nth-child(2) > .ministry-body > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"ministries\">",
"target": [
"#ministries"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Kids \u00b7 Students</span>",
"target": [
".ministry:nth-child(3) > .ministry-body > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"ministries\">",
"target": [
"#ministries"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Outreach \u00b7 Service</span>",
"target": [
".ministry:nth-child(4) > .ministry-body > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6eae0",
"contrastRatio": 3.71,
"fontSize": "7.9pt (10.56px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag\">Worship</span>",
"target": [
".event:nth-child(1) > div:nth-child(2) > .event-tags > .tag:nth-child(1)"
]
},
{
"html": "<article class=\"event\">",
"target": [
".event:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.71 (foreground color: #c05b2e, background color: #f6eae0, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Worship</span>",
"target": [
".event:nth-child(1) > div:nth-child(2) > .event-tags > .tag:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.71 (foreground color: #c05b2e, background color: #f6eae0, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6eae0",
"contrastRatio": 3.71,
"fontSize": "7.9pt (10.56px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag\">Prayer</span>",
"target": [
".event:nth-child(2) > div:nth-child(2) > .event-tags > .tag:nth-child(1)"
]
},
{
"html": "<article class=\"event\">",
"target": [
".event:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.71 (foreground color: #c05b2e, background color: #f6eae0, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Prayer</span>",
"target": [
".event:nth-child(2) > div:nth-child(2) > .event-tags > .tag:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.71 (foreground color: #c05b2e, background color: #f6eae0, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6eae0",
"contrastRatio": 3.71,
"fontSize": "7.9pt (10.56px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag\">Service</span>",
"target": [
".event:nth-child(3) > div:nth-child(2) > .event-tags > .tag:nth-child(1)"
]
},
{
"html": "<article class=\"event\">",
"target": [
".event:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.71 (foreground color: #c05b2e, background color: #f6eae0, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Service</span>",
"target": [
".event:nth-child(3) > div:nth-child(2) > .event-tags > .tag:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.71 (foreground color: #c05b2e, background color: #f6eae0, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6eae0",
"contrastRatio": 3.71,
"fontSize": "7.9pt (10.56px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"tag\">Welcome</span>",
"target": [
".event:nth-child(4) > div:nth-child(2) > .event-tags > .tag:nth-child(1)"
]
},
{
"html": "<article class=\"event\">",
"target": [
".event:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.71 (foreground color: #c05b2e, background color: #f6eae0, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"tag\">Welcome</span>",
"target": [
".event:nth-child(4) > div:nth-child(2) > .event-tags > .tag:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.71 (foreground color: #c05b2e, background color: #f6eae0, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fff7ee",
"bgColor": "#c05b2e",
"contrastRatio": 4.14,
"fontSize": "10.6pt (14.08px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-primary btn-sm\" type=\"submit\">Subscribe</button>",
"target": [
".btn-primary.btn-sm[type=\"submit\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"btn btn-primary btn-sm\" type=\"submit\">Subscribe</button>",
"target": [
".btn-primary.btn-sm[type=\"submit\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#fcfaf5",
"contrastRatio": 4.21,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header scrolled\" id=\"siteHeader\">",
"target": [
"#siteHeader"
]
},
{
"html": "<section class=\"section bg-white\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf5, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#community\" data-spy=\"community\" class=\"active\">Community</a>",
"target": [
"a[href$=\"#community\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf5, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"community\">",
"target": [
"#community"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow center\">Community voices</span>",
"target": [
".voices-wrap > .center.eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#ffffff",
"contrastRatio": 4.39,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-white\" id=\"prayer\">",
"target": [
"#prayer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Prayer wall</span>",
"target": [
"#prayer > .container > .section-head.in.reveal > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#fcfaf5",
"contrastRatio": 4.21,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header scrolled\" id=\"siteHeader\">",
"target": [
"#siteHeader"
]
},
{
"html": "<section class=\"section bg-white\" id=\"prayer\">",
"target": [
"#prayer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf5, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#prayer\" data-spy=\"prayer\" class=\"active\">Prayer Wall</a>",
"target": [
"a[data-spy=\"prayer\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf5, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fff7ee",
"bgColor": "#c05b2e",
"contrastRatio": 4.14,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-primary btn-block\" type=\"submit\">",
"target": [
"#prayerForm > .btn-block.btn-primary[type=\"submit\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"btn btn-primary btn-block\" type=\"submit\">",
"target": [
"#prayerForm > .btn-block.btn-primary[type=\"submit\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#fcfaf4",
"contrastRatio": 4.21,
"fontSize": "9.8pt (13.12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<form class=\"prayer-form reveal in\" id=\"prayerForm\" novalidate=\"\">",
"target": [
"#prayerForm"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf4, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a class=\"inline-link\" href=\"sms:+15550134728\">(555) 013-4728</a>",
"target": [
".inline-link"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf4, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#fcfaf4",
"contrastRatio": 4.21,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header class=\"site-header scrolled\" id=\"siteHeader\">",
"target": [
"#siteHeader"
]
},
{
"html": "<article class=\"prayer-card\" data-id=\"s2\">",
"target": [
"article[data-id=\"s2\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf4, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#give\" data-spy=\"give\" class=\"active\">Give</a>",
"target": [
"a[data-spy=\"give\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.21 (foreground color: #c05b2e, background color: #fcfaf4, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c99b3f",
"bgColor": "#22453a",
"contrastRatio": 4.16,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section give\" id=\"give\">",
"target": [
"#give"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #c99b3f, background color: #22453a, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Generosity</span>",
"target": [
".give-copy > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #c99b3f, background color: #22453a, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c99b3f",
"bgColor": "#22453a",
"contrastRatio": 4.16,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section give\" id=\"give\">",
"target": [
"#give"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #c99b3f, background color: #22453a, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>$25</b>",
"target": [
"li:nth-child(1) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #c99b3f, background color: #22453a, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c99b3f",
"bgColor": "#22453a",
"contrastRatio": 4.16,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section give\" id=\"give\">",
"target": [
"#give"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #c99b3f, background color: #22453a, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>$50</b>",
"target": [
"li:nth-child(2) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #c99b3f, background color: #22453a, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c99b3f",
"bgColor": "#22453a",
"contrastRatio": 4.16,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section give\" id=\"give\">",
"target": [
"#give"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #c99b3f, background color: #22453a, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>$100</b>",
"target": [
"li:nth-child(3) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #c99b3f, background color: #22453a, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c99b3f",
"bgColor": "#22453a",
"contrastRatio": 4.16,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section give\" id=\"give\">",
"target": [
"#give"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.16 (foreground color: #c99b3f, background color: #22453a, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>$250</b>",
"target": [
"li:nth-child(4) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.16 (foreground color: #c99b3f, background color: #22453a, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fff7ee",
"bgColor": "#c05b2e",
"contrastRatio": 4.14,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"button\" class=\"btn btn-primary btn-block\" id=\"giveBtn\" style=\"padding:17px\">Give $50</button>",
"target": [
"#giveBtn"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"button\" class=\"btn btn-primary btn-block\" id=\"giveBtn\" style=\"padding:17px\">Give $50</button>",
"target": [
"#giveBtn"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#ffffff",
"contrastRatio": 4.39,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-white section-commit\" id=\"commitments\">",
"target": [
"#commitments"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">What we\u2019re about</span>",
"target": [
"#commitments > .container > .section-head.reveal.in > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"ministries\">",
"target": [
"#ministries"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Ministries</span>",
"target": [
"#ministries > .container > .section-head.reveal.in > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#ffffff",
"contrastRatio": 4.39,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-white\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Community life</span>",
"target": [
"#events > .container > .section-head.reveal.in > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#ffffff",
"contrastRatio": 4.39,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-white\" id=\"prayer\">",
"target": [
"#prayer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Prayer wall</span>",
"target": [
"#prayer > .container > .section-head.reveal.in > div > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#f6f1e7",
"contrastRatio": 3.9,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section bg-cream\" id=\"visit\">",
"target": [
"#visit"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">New here?</span>",
"target": [
".visit-grid > .reveal.in:nth-child(1) > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.9 (foreground color: #c05b2e, background color: #f6f1e7, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c05b2e",
"bgColor": "#ffffff",
"contrastRatio": 4.39,
"fontSize": "8.8pt (11.68px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"visit-card reveal in\" id=\"visitCard\">",
"target": [
"#visitCard"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Plan your visit</span>",
"target": [
"#visitCard > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #c05b2e, background color: #ffffff, font size: 8.8pt (11.68px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#fff7ee",
"bgColor": "#c05b2e",
"contrastRatio": 4.14,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-primary btn-block\" type=\"submit\">",
"target": [
"#visitForm > .btn-block.btn-primary[type=\"submit\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"btn btn-primary btn-block\" type=\"submit\">",
"target": [
"#visitForm > .btn-block.btn-primary[type=\"submit\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.14 (foreground color: #fff7ee, background color: #c05b2e, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 11177
},
{
"y": 576,
"height": 11177
},
{
"y": 1152,
"height": 11132
},
{
"y": 1728,
"height": 11132
},
{
"y": 2304,
"height": 11132
},
{
"y": 2880,
"height": 11132
},
{
"y": 3456,
"height": 11132
},
{
"y": 4032,
"height": 11132
},
{
"y": 4608,
"height": 11177
},
{
"y": 5184,
"height": 11177
},
{
"y": 5760,
"height": 11177
},
{
"y": 6336,
"height": 11177
},
{
"y": 6912,
"height": 11177
},
{
"y": 7488,
"height": 11177
},
{
"y": 8064,
"height": 11177
},
{
"y": 8640,
"height": 11177
},
{
"y": 9216,
"height": 11177
},
{
"y": 9747,
"height": 11132
},
{
"y": 10323,
"height": 11132
},
{
"y": 10412,
"height": 11132
}
],
"scans": 21,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Religion and Spirituality" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "Religion and Spirituality"
- Description: Religious organizations, spiritual resources, faith communities, and worship services.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Religion and Spirituality" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Events", "Community", "About".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Religion and Spirituality" category. Consider themes similar to: "Volunteer Opportunities", "Community Events", "Faith Formation".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "outreach", "scripture", "ministry".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Connect", "Find Group", "Contact Pastor".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Religion and Spirituality" sector. Ideas similar but not limited to: "giving portal".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "ministry updates", "member stories", "volunteer opportunities".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.