Fireworks Ember 1 – Religion and Spirituality
via Fireworks · Generated
- AIMAC Debt 12.32
- Cost $0.45
- Total Violations 98
- HTML Size 78 KB
- Em Dashes 26
Screenshot
View Live Page
Accessibility Issues Found
98 Serious
-
link-in-text-block serious 1 instance
Links must be distinguishable without relying on color
Example HTML
<a href="tel:+15552149087">(555) 214-9087</a> -
color-contrast serious 93 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="eyebrow">Our Faith</span> -
target-size serious 4 instances
All touch targets must be 24px large, or leave sufficient space
Example HTML
<button class="dot" aria-label="Go to story 3"></button>
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>The Lumen Fellowship — Gathering in Grace, Growing in Light</title>
<meta name="description" content="The Lumen Fellowship is an open spiritual community in Riverton offering communal worship, music ministry, outreach, and sanctuary for every seeking soul.">
<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--cream:#f6f1e7;
--paper:#fffdf7;
--ink:#262119;
--ink-2:#3a3327;
--muted:#6b6252;
--gold:#b4882b;
--gold-2:#d4a94e;
--gold-soft:#efe2c4;
--sage:#7d8471;
--terra:#a85b38;
--line:#e5dcc8;
--shadow:0 18px 50px -18px rgba(38,33,25,.25);
--radius:18px;
--font-serif:'Cormorant Garamond',serif;
--font-sans:'Jost',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--font-sans);color:var(--ink);background:var(--cream);line-height:1.7;font-weight:400;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:600;line-height:1.12;color:var(--ink)}
.container{width:min(1180px,92%);margin:0 auto}
section{padding:6.5rem 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:.9rem;font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:1.1rem}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--gold)}
.section-title{font-size:clamp(2.1rem,4.2vw,3.1rem);margin-bottom:1.1rem}
.section-title em{font-style:italic;color:var(--gold);font-weight:500}
.lead{font-size:1.08rem;color:var(--muted);max-width:62ch}
.center{text-align:center}
.center .eyebrow::after{content:"";width:38px;height:1px;background:var(--gold)}
.center .lead{margin:0 auto}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.9rem;border-radius:999px;font-family:var(--font-sans);font-weight:500;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;transition:all .35s cubic-bezier(.4,0,.2,1)}
.btn svg{width:16px;height:16px;transition:transform .35s}
.btn:hover svg{transform:translateX(4px)}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#fff;box-shadow:0 12px 28px -10px rgba(180,136,43,.55)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 18px 34px -10px rgba(180,136,43,.65)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-3px)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:var(--ink-2);transform:translateY(-3px)}
.btn-outline{border-color:var(--gold);color:var(--gold)}
.btn-outline:hover{background:var(--gold);color:#fff;transform:translateY(-3px)}
.flourish{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0 auto;padding:0}
.flourish::before,.flourish::after{content:"";height:1px;width:min(140px,22vw);background:linear-gradient(90deg,transparent,var(--gold));}
.flourish::after{background:linear-gradient(90deg,var(--gold),transparent)}
.flourish svg{width:30px;height:30px;color:var(--gold)}
/* ---------- TOPBAR ---------- */
.topbar{background:var(--ink);color:#cfc6b2;font-size:.8rem;letter-spacing:.05em}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding:.55rem 0;gap:1rem}
.topbar a{color:#e8dfc8;transition:color .3s}
.topbar a:hover{color:var(--gold-2)}
.topbar .social{display:flex;gap:.9rem}
.topbar .social svg{width:15px;height:15px;fill:currentColor}
.topbar span.dot{color:var(--gold-2);margin:0 .6rem}
/* ---------- HEADER ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:900;transition:all .4s ease;padding:1.1rem 0}
header .container{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:flex;align-items:center;gap:.9rem}
.brand img{width:52px;height:52px;border-radius:50%;box-shadow:0 6px 18px -6px rgba(0,0,0,.4);border:2px solid var(--gold-2)}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-family:var(--font-serif);font-size:1.45rem;font-weight:700;color:var(--paper);transition:color .4s}
.brand-tag{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2)}
nav.mainnav{display:flex;align-items:center;gap:1.7rem}
nav.mainnav a{position:relative;font-size:.83rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:rgba(255,253,247,.85);padding:.35rem 0;transition:color .3s}
nav.mainnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold-2);transition:width .35s}
nav.mainnav a:hover::after,nav.mainnav a.active::after{width:100%}
nav.mainnav a:hover,nav.mainnav a.active{color:#fff}
nav.mainnav a.give-link{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#fff;padding:.6rem 1.35rem;border-radius:999px;box-shadow:0 10px 22px -8px rgba(180,136,43,.6)}
nav.mainnav a.give-link::after{display:none}
nav.mainnav a.give-link:hover{transform:translateY(-2px)}
header.scrolled{background:rgba(255,253,247,.92);backdrop-filter:blur(14px);padding:.6rem 0;box-shadow:0 10px 30px -14px rgba(38,33,25,.25)}
header.scrolled .brand-name{color:var(--ink)}
header.scrolled nav.mainnav a{color:var(--ink-2)}
header.scrolled nav.mainnav a:hover,header.scrolled nav.mainnav a.active{color:var(--gold)}
header.scrolled nav.mainnav a.give-link{color:#fff}
.hamburger{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px;position:relative;z-index:1002}
.hamburger span{display:block;width:26px;height:2px;background:var(--paper);margin:6px auto;transition:all .35s;border-radius:2px}
header.scrolled .hamburger span{background:var(--ink)}
.mobile-menu{position:fixed;inset:0;background:rgba(30,26,19,.97);backdrop-filter:blur(8px);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;opacity:0;pointer-events:none;transition:opacity .4s}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:var(--font-serif);font-size:2rem;color:var(--cream);transition:color .3s}
.mobile-menu a:hover{color:var(--gold-2)}
body.menu-open .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg);background:var(--cream)}
body.menu-open .hamburger span:nth-child(2){opacity:0}
body.menu-open .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);background:var(--cream)}
/* ---------- HERO ---------- */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--paper);padding:9rem 0 7rem;background:url('https://picsum.photos/id/1018/2000/1200') center/cover no-repeat;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,24,17,.55) 0%,rgba(28,24,17,.35) 45%,rgba(28,24,17,.82) 100%)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center 30%,rgba(212,169,78,.18),transparent 60%)}
.hero-content{position:relative;z-index:2;max-width:900px}
.hero .eyebrow{color:var(--gold-2);justify-content:center}
.hero .eyebrow::after{content:"";width:38px;height:1px;background:var(--gold-2)}
.hero h1{font-size:clamp(2.9rem,7.2vw,5.4rem);color:#fff;font-weight:600;margin-bottom:1.4rem;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.hero h1 em{font-style:italic;color:var(--gold-2);font-weight:500}
.hero p{font-size:1.14rem;color:rgba(255,253,247,.85);max-width:62ch;margin:0 auto 2.4rem;font-weight:300}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero-card{position:absolute;z-index:3;bottom:2.4rem;right:max(4vw,1.5rem);background:rgba(255,253,247,.1);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(12px);border-radius:var(--radius);padding:1.2rem 1.6rem;text-align:left;color:#fff;box-shadow:var(--shadow)}
.hero-card .hc-label{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-2);margin-bottom:.25rem}
.hero-card .hc-title{font-family:var(--font-serif);font-size:1.15rem;font-weight:600}
.hero-card .hc-time{font-size:.85rem;color:rgba(255,255,255,.75)}
.countdown{display:flex;gap:.8rem;margin-top:.7rem}
.countdown .cd{ text-align:center}
.countdown .cd b{display:block;font-family:var(--font-serif);font-size:1.5rem;font-weight:700;color:var(--gold-2);line-height:1}
.countdown .cd i{font-style:normal;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.scroll-hint{position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.7);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scroll-hint::after{content:"";width:1px;height:44px;background:linear-gradient(180deg,var(--gold-2),transparent);animation:drip 2.2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* ---------- FAITH ---------- */
.faith-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:4.5rem;align-items:center}
.faith-imgs{position:relative}
.faith-imgs .main-img{border-radius:var(--radius);box-shadow:var(--shadow);width:88%}
.faith-imgs .sub-img{position:absolute;bottom:-3rem;right:0;width:52%;border-radius:var(--radius);border:6px solid var(--cream);box-shadow:var(--shadow)}
.faith-imgs .frame{position:absolute;top:-1.4rem;left:-1.4rem;width:60%;height:60%;border:2px solid var(--gold);border-radius:var(--radius);z-index:-1;opacity:.5}
.faith-copy p{color:var(--muted);margin-bottom:1.1rem}
.faith-copy p strong{color:var(--ink)}
.dropcap::first-letter{font-family:var(--font-serif);font-size:3.6em;float:left;line-height:.82;padding:.06em .12em 0 0;color:var(--gold);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2.4rem;border-top:1px solid var(--line);padding-top:2rem}
.stat b{display:block;font-family:var(--font-serif);font-size:2.4rem;font-weight:700;color:var(--gold);line-height:1}
.stat span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* ---------- SERVICE TIMES ---------- */
.services{background:var(--paper)}
.services::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 0%,rgba(212,169,78,.1),transparent 55%)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:3rem}
.svc-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:2.4rem 2rem;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1)}
.svc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold-2),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .45s}
.svc-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);background:#fff}
.svc-card:hover::before{transform:scaleX(1)}
.svc-day{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600}
.svc-card h3{font-size:1.55rem;margin:.5rem 0 .2rem}
.svc-time{font-family:var(--font-serif);font-size:2.6rem;font-weight:700;color:var(--ink);line-height:1;margin:.4rem 0 .9rem}
.svc-time small{font-size:1.1rem;color:var(--muted);font-weight:500}
.svc-card p{font-size:.93rem;color:var(--muted);margin-bottom:1.3rem}
.svc-link{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--terra);display:inline-flex;align-items:center;gap:.45rem}
.svc-link svg{width:14px;height:14px;transition:transform .3s}
.svc-link:hover svg{transform:translateX(4px)}
.svc-note{margin-top:2.6rem;display:flex;align-items:center;justify-content:center;gap:.8rem;font-size:.92rem;color:var(--muted)}
.svc-note svg{width:18px;height:18px;color:var(--gold)}
/* ---------- MINISTRIES ---------- */
.min-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
.min-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem 1.9rem;transition:all .4s;position:relative}
.min-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:var(--gold-soft)}
.min-icon{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--gold-soft),#fff);border:1px solid var(--gold-soft);display:flex;align-items:center;justify-content:center;margin-bottom:1.3rem;transition:all .4s}
.min-card:hover .min-icon{background:linear-gradient(135deg,var(--gold-2),var(--gold));transform:rotate(-6deg) scale(1.06)}
.min-icon svg{width:26px;height:26px;color:var(--gold);transition:color .4s}
.min-card:hover .min-icon svg{color:#fff}
.min-card h3{font-size:1.35rem;margin-bottom:.55rem}
.min-card p{font-size:.92rem;color:var(--muted);margin-bottom:1rem}
.min-card a{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold)}
/* ---------- MUSIC SPOTLIGHT ---------- */
.spotlight{background:var(--ink);color:var(--cream);overflow:hidden}
.spotlight::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 15% 100%,rgba(212,169,78,.14),transparent 55%)}
.spot-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:4.5rem;align-items:center;position:relative}
.spot-img{border-radius:var(--radius);box-shadow:0 30px 60px -25px rgba(0,0,0,.6)}
.spotlight h2{color:#fff}
.spotlight .lead{color:rgba(246,241,231,.72)}
.spotlight p{color:rgba(246,241,231,.72);margin-bottom:1.1rem}
.spot-list{margin:1.4rem 0 2rem;display:grid;gap:.85rem}
.spot-list li{display:flex;gap:.85rem;align-items:flex-start;font-size:.95rem;color:rgba(246,241,231,.85)}
.spot-list svg{width:18px;height:18px;color:var(--gold-2);flex-shrink:0;margin-top:.25rem}
/* ---------- OUTREACH + SIDEBAR ---------- */
.outreach-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:3.5rem;align-items:start}
.outreach-main img{border-radius:var(--radius);box-shadow:var(--shadow);margin:1.8rem 0}
.outreach-main p{color:var(--muted);margin-bottom:1.1rem}
.program-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.6rem 0 2rem}
.program{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:1.1rem 1.2rem}
.program b{display:block;font-family:var(--font-serif);font-size:1.08rem;font-weight:700}
.program span{font-size:.82rem;color:var(--muted)}
aside.sidebar{display:grid;gap:1.6rem;position:sticky;top:110px}
.widget{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.6rem;box-shadow:0 10px 30px -18px rgba(38,33,25,.18)}
.widget h4{font-size:1.25rem;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.widget h4 svg{width:19px;height:19px;color:var(--gold)}
.verse-widget{background:linear-gradient(150deg,var(--ink),var(--ink-2));border:none;color:var(--cream)}
.verse-widget h4{color:#fff}
.verse-text{font-family:var(--font-serif);font-size:1.25rem;font-style:italic;line-height:1.5;transition:opacity .6s}
.verse-src{display:block;margin-top:.7rem;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);transition:opacity .6s}
.vol-list{display:grid;gap:.8rem}
.vol-list li{display:flex;justify-content:space-between;align-items:center;gap:.8rem;font-size:.9rem;border-bottom:1px dashed var(--line);padding-bottom:.8rem}
.vol-list li:last-child{border:none;padding-bottom:0}
.vol-list a{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--terra);white-space:nowrap}
.vol-list a:hover{color:var(--gold)}
.member-mini{display:flex;gap:1rem;align-items:center}
.member-mini img{width:58px;height:58px;border-radius:50%;border:2px solid var(--gold-soft)}
.member-mini p{font-size:.85rem;color:var(--muted);font-style:italic}
.member-mini b{display:block;font-style:normal;font-family:var(--font-serif);color:var(--ink);font-size:1rem}
/* ---------- EVENTS ---------- */
.events{background:var(--paper)}
.event-list{display:grid;gap:1.2rem;margin-top:3rem}
.event-row{display:grid;grid-template-columns:96px 150px 1fr auto;gap:1.6rem;align-items:center;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.6rem;transition:all .35s}
.event-row:hover{box-shadow:var(--shadow);transform:translateY(-4px);background:#fff}
.event-date{text-align:center;border-right:1px solid var(--line);padding-right:1.4rem}
.event-date b{display:block;font-family:var(--font-serif);font-size:2.5rem;font-weight:700;color:var(--gold);line-height:1}
.event-date span{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.event-thumb{width:150px;height:96px;object-fit:cover;border-radius:12px}
.event-info h3{font-size:1.35rem;margin-bottom:.2rem}
.event-info p{font-size:.88rem;color:var(--muted)}
.event-meta{display:flex;gap:1.2rem;font-size:.78rem;color:var(--terra);margin-top:.35rem;letter-spacing:.05em}
.event-meta span{display:inline-flex;align-items:center;gap:.35rem}
.event-meta svg{width:13px;height:13px}
/* ---------- TESTIMONIALS ---------- */
.stories{background:var(--ink);color:var(--cream);overflow:hidden}
.stories::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 85% 20%,rgba(212,169,78,.12),transparent 50%)}
.stories .eyebrow{color:var(--gold-2)}
.stories h2{color:#fff}
.slider{position:relative;max-width:820px;margin:2.5rem auto 0;overflow:hidden}
.slide-track{display:flex;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.slide{min-width:100%;padding:0 1rem;text-align:center}
.slide blockquote{font-family:var(--font-serif);font-size:clamp(1.35rem,2.6vw,1.8rem);font-style:italic;line-height:1.5;color:rgba(246,241,231,.92)}
.slide blockquote::before{content:"“";color:var(--gold-2);font-size:1.6em;line-height:0;vertical-align:-.2em;margin-right:.1em}
.slide .who{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:1.6rem}
.slide .who img{width:56px;height:56px;border-radius:50%;border:2px solid var(--gold-2)}
.slide .who b{display:block;font-family:var(--font-serif);font-size:1.1rem;color:#fff}
.slide .who span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.slider-nav{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:2rem}
.slider-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}
.slider-btn:hover{background:var(--gold);border-color:var(--gold)}
.slider-btn svg{width:18px;height:18px}
.dots{display:flex;gap:.55rem}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:all .3s;border:none}
.dot.active{background:var(--gold-2);transform:scale(1.35)}
/* ---------- FAQ ---------- */
.faq-wrap{max-width:820px;margin:3rem auto 0;display:grid;gap:.9rem}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:box-shadow .3s}
.faq-item.open{box-shadow:var(--shadow);border-color:var(--gold-soft)}
.faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;font-family:var(--font-serif);font-size:1.2rem;font-weight:600;color:var(--ink);text-align:left}
.faq-q .plus{width:30px;height:30px;flex-shrink:0;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;transition:all .4s;font-family:var(--font-sans);font-weight:400;font-size:1.2rem;line-height:1}
.faq-item.open .plus{background:var(--gold);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.faq-a p{padding:0 1.5rem 1.4rem;color:var(--muted);font-size:.95rem}
/* ---------- GIVE ---------- */
.give{background:url('https://picsum.photos/id/1043/1800/900') center/cover fixed;position:relative;color:#fff}
.give::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(30,25,17,.92),rgba(30,25,17,.78))}
.give .container{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:center}
.give h2{color:#fff}
.give .lead{color:rgba(255,253,247,.78)}
.give p.body{color:rgba(255,253,247,.7);margin-bottom:1rem}
.give-widget{background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:2.2rem;box-shadow:0 30px 70px -25px rgba(0,0,0,.6)}
.give-widget h3{font-size:1.5rem;margin-bottom:1.2rem}
.amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:.9rem}
.amt{border:1px solid var(--line);background:var(--cream);border-radius:10px;padding:.75rem 0;font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:var(--ink);cursor:pointer;transition:all .25s}
.amt:hover{border-color:var(--gold)}
.amt.active{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#fff;border-color:var(--gold)}
.custom-amt{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:10px;padding:.7rem 1rem;margin-bottom:1rem;background:var(--cream)}
.custom-amt span{font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:var(--gold)}
.custom-amt input{border:none;background:none;outline:none;font-family:var(--font-sans);font-size:1rem;width:100%;color:var(--ink)}
.impact-line{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--muted);background:var(--gold-soft);border-radius:10px;padding:.85rem 1rem;margin-bottom:1.2rem}
.impact-line svg{width:17px;height:17px;color:var(--gold);flex-shrink:0;margin-top:.15rem}
.goal{margin-bottom:1.4rem}
.goal-label{display:flex;justify-content:space-between;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.goal-label b{color:var(--gold)}
.goal-bar{height:9px;background:var(--line);border-radius:99px;overflow:hidden}
.goal-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold-2),var(--gold));border-radius:99px;transition:width 1.6s cubic-bezier(.4,0,.2,1)}
.give-widget .btn{width:100%;justify-content:center}
.give-secure{text-align:center;font-size:.75rem;color:var(--muted);margin-top:.8rem;display:flex;justify-content:center;align-items:center;gap:.4rem}
.give-secure svg{width:12px;height:12px}
/* ---------- NEWSLETTER ---------- */
.newsletter{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#fff;padding:4rem 0}
.newsletter .container{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.newsletter h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem)}
.newsletter p{color:rgba(255,255,255,.85);max-width:48ch}
.news-form{display:flex;gap:.6rem;flex-wrap:wrap}
.news-form input{padding:.95rem 1.4rem;border-radius:999px;border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);color:#fff;font-family:var(--font-sans);font-size:.95rem;min-width:280px;outline:none;transition:border .3s}
.news-form input::placeholder{color:rgba(255,255,255,.7)}
.news-form input:focus{border-color:#fff}
.news-form .btn{background:var(--ink);color:var(--cream)}
.news-form .btn:hover{background:#000;transform:translateY(-2px)}
/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:#b7ad99;padding:5rem 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:3rem;padding-bottom:3.5rem}
.foot-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.foot-brand img{width:46px;height:46px;border-radius:50%;border:2px solid var(--gold-2)}
.foot-brand .brand-name{color:#fff}
footer p{font-size:.9rem}
footer h4{color:#fff;font-size:1.15rem;margin-bottom:1.2rem}
.foot-links{display:grid;gap:.6rem;font-size:.9rem}
.foot-links a{transition:color .3s,padding .3s}
.foot-links a:hover{color:var(--gold-2);padding-left:.4rem}
.foot-contact li{display:flex;gap:.8rem;font-size:.9rem;margin-bottom:.9rem;align-items:flex-start}
.foot-contact svg{width:16px;height:16px;color:var(--gold-2);flex-shrink:0;margin-top:.3rem}
.foot-social{display:flex;gap:.8rem;margin-top:1.4rem}
.foot-social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:all .3s}
.foot-social a:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-3px)}
.foot-social svg{width:16px;height:16px;fill:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.4rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.8rem}
.foot-bottom .legal{display:flex;gap:1.5rem}
.foot-bottom a:hover{color:var(--gold-2)}
/* ---------- MODAL / TOAST / MISC ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(28,24,17,.7);backdrop-filter:blur(6px);z-index:1200;display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .35s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--paper);border-radius:var(--radius);max-width:480px;width:100%;padding:2.4rem;position:relative;transform:translateY(30px) scale(.97);transition:transform .4s cubic-bezier(.4,0,.2,1);max-height:90vh;overflow:auto}
.modal-overlay.open .modal{transform:translateY(0) scale(1)}
.modal-close{position:absolute;top:1.1rem;right:1.1rem;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--cream);cursor:pointer;font-size:1.1rem;color:var(--muted);transition:all .3s}
.modal-close:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.modal h3{font-size:1.7rem;margin-bottom:.3rem}
.modal .modal-sub{font-size:.88rem;color:var(--terra);margin-bottom:1.6rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:.4rem}
.field input,.field select{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--cream);font-family:var(--font-sans);font-size:.95rem;color:var(--ink);outline:none;transition:border .3s}
.field input:focus,.field select:focus{border-color:var(--gold)}
.field .err{display:none;font-size:.75rem;color:#b3402a;margin-top:.3rem}
.field.invalid input{border-color:#b3402a}
.field.invalid .err{display:block}
.form-success{display:none;text-align:center;padding:1.5rem 0}
.form-success .check{width:74px;height:74px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold));display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;animation:pop .5s cubic-bezier(.68,-.55,.27,1.55)}
.form-success .check svg{width:34px;height:34px;color:#fff}
.form-success h4{font-size:1.5rem;margin-bottom:.4rem}
.form-success p{font-size:.9rem;color:var(--muted)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%,120px);background:var(--ink);color:var(--cream);padding:1rem 1.8rem;border-radius:999px;font-size:.9rem;z-index:1300;box-shadow:var(--shadow);transition:transform .5s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:.7rem;max-width:90%}
.toast.show{transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;color:var(--gold-2);flex-shrink:0}
.back-top{position:fixed;bottom:2rem;right:2rem;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);z-index:800;opacity:0;pointer-events:none;transition:all .4s;transform:translateY(16px)}
.back-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-top svg{width:20px;height:20px}
[data-reveal]{opacity:0}
html.no-motion [data-reveal]{opacity:1}
/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
.faith-grid,.spot-grid,.give .container{grid-template-columns:1fr;gap:3rem}
.outreach-layout{grid-template-columns:1fr}
aside.sidebar{position:static;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.min-grid,.svc-grid{grid-template-columns:repeat(2,1fr)}
.foot-grid{grid-template-columns:1fr 1fr}
.hero-card{position:static;margin:2.5rem auto 0;display:inline-block}
.scroll-hint{display:none}
}
@media(max-width:760px){
nav.mainnav{display:none}
.hamburger{display:block}
.topbar .container{justify-content:center}
.topbar .social{display:none}
section{padding:4.5rem 0}
.min-grid,.svc-grid,.program-list,.stats{grid-template-columns:1fr}
.stats{grid-template-columns:1fr 1fr;gap:1.6rem}
.event-row{grid-template-columns:70px 1fr;grid-template-rows:auto auto}
.event-thumb{display:none}
.event-row .btn{grid-column:1/-1;justify-content:center}
.event-date{border-right:none;border-bottom:1px solid var(--line);padding:0 0 .8rem}
.foot-grid{grid-template-columns:1fr;gap:2.2rem}
.newsletter .container{flex-direction:column;text-align:center}
.news-form{justify-content:center;width:100%}
.news-form input{min-width:0;flex:1}
.amounts{grid-template-columns:repeat(2,1fr)}
.faith-imgs .sub-img{bottom:-1.6rem}
}
</style>
</head>
<body>
<!-- ===== TOPBAR ===== -->
<div class="topbar">
<div class="container">
<div>412 Lantern Lane, Riverton, OH <span class="dot">•</span> <a href="tel:+15552149087">(555) 214-9087</a> <span class="dot">•</span> Sundays 9:30 AM</div>
<div class="social">
<a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24"><path d="M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6c-.3-.04-1.3-.1-2.4-.1-2.4 0-4 1.45-4 4.1v2.3H7.5V13h2.8v8h3.2z"/></svg></a>
<a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24"><path d="M12 2.2c3.2 0 3.6 0 4.9.07 3.25.15 4.77 1.7 4.92 4.92.06 1.27.07 1.65.07 4.86s-.01 3.58-.07 4.85c-.15 3.23-1.66 4.77-4.92 4.92-1.3.06-1.7.07-4.9.07s-3.6-.01-4.86-.07c-3.26-.15-4.77-1.7-4.92-4.92C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.86C2.42 3.9 3.94 2.42 7.2 2.27 8.4 2.2 8.8 2.2 12 2.2zm0 3.1a6.7 6.7 0 100 13.4 6.7 6.7 0 000-13.4zm0 11a4.3 4.3 0 110-8.7 4.3 4.3 0 010 8.7zm6.96-11.2a1.57 1.57 0 11-3.14 0 1.57 1.57 0 013.14 0z"/></svg></a>
<a href="#" aria-label="YouTube"><svg viewBox="0 0 24 24"><path d="M23 7.2s-.22-1.56-.9-2.24c-.86-.9-1.82-.9-2.26-.96C16.7 3.75 12 3.75 12 3.75h-.01s-4.7 0-7.84.25c-.44.06-1.4.06-2.26.96C1.2 5.64 1 7.2 1 7.2S.75 9.03.75 10.87v1.7c0 1.83.24 3.66.24 3.66s.22 1.56.9 2.24c.86.9 1.98.87 2.49.97 1.8.17 7.62.22 7.62.22s4.71-.01 7.85-.26c.44-.05 1.4-.05 2.26-.95.68-.68.9-2.24.9-2.24s.24-1.83.24-3.66v-1.7C23.25 9.03 23 7.2 23 7.2zM9.75 14.6V8.75l6.15 2.93-6.15 2.92z"/></svg></a>
<a href="#" aria-label="X"><svg viewBox="0 0 24 24"><path d="M18.9 2H22l-6.77 7.74L23.2 22h-6.24l-4.9-6.4L6.5 22H3.34l7.24-8.28L2.8 2h6.4l4.43 5.85L18.9 2zm-1.1 18.1h1.72L7.1 3.8H5.25L17.8 20.1z"/></svg></a>
</div>
</div>
</div>
<!-- ===== HEADER ===== -->
<header id="siteHeader">
<div class="container">
<a href="#home" class="brand" aria-label="The Lumen Fellowship — home">
<img src="https://placehold.co/96x96/262119/d4a94e/png?text=L&font=playfair%20display" alt="The Lumen Fellowship logo">
<span class="brand-text">
<span class="brand-name">The Lumen Fellowship</span>
<span class="brand-tag">Gathering in Grace · Growing in Light</span>
</span>
</a>
<nav class="mainnav" aria-label="Primary navigation">
<a href="#home" class="active">Home</a>
<a href="#faith">Our Faith</a>
<a href="#services">Service Times</a>
<a href="#ministries">Ministries</a>
<a href="#events">Events</a>
<a href="#stories">Stories</a>
<a href="#give" class="give-link">Give</a>
</nav>
<button class="hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
</header>
<!-- Mobile menu -->
<div class="mobile-menu" id="mobileMenu">
<a href="#home">Home</a>
<a href="#faith">Our Faith</a>
<a href="#services">Service Times</a>
<a href="#ministries">Ministries</a>
<a href="#events">Events</a>
<a href="#stories">Stories</a>
<a href="#give">Give</a>
</div>
<!-- ===== HERO ===== -->
<section class="hero" id="home">
<div class="hero-content">
<span class="eyebrow">All Are Welcome Here</span>
<h1>Every soul deserves <em>a sanctuary.</em></h1>
<p>The Lumen Fellowship is an open and affirming spiritual community in the heart of Riverton — a home for communal worship, honest questions, and hands-on outreach. Come as you are. Leave a little lighter.</p>
<div class="hero-ctas">
<a href="#services" class="btn btn-gold">Plan Your Visit <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
<a href="#events" class="btn btn-ghost">Explore Events</a>
</div>
</div>
<div class="hero-card" aria-live="polite">
<div class="hc-label">Next Gathering</div>
<div class="hc-title">Sunday Worship Service</div>
<div class="hc-time">9:30 AM · Sanctuary & Livestream</div>
<div class="countdown" id="countdown">
<div class="cd"><b id="cd-d">0</b><i>Days</i></div>
<div class="cd"><b id="cd-h">0</b><i>Hrs</i></div>
<div class="cd"><b id="cd-m">0</b><i>Min</i></div>
<div class="cd"><b id="cd-s">0</b><i>Sec</i></div>
</div>
</div>
<div class="scroll-hint">Scroll</div>
</section>
<!-- ===== OUR FAITH ===== -->
<section id="faith">
<div class="container faith-grid">
<div class="faith-imgs" data-reveal>
<div class="frame"></div>
<img class="main-img" src="https://picsum.photos/id/1015/800/1000" alt="A quiet river winding through a valley at dawn" loading="lazy">
<img class="sub-img" src="https://picsum.photos/id/1043/700/520" alt="Morning mist settling over the hills" loading="lazy">
</div>
<div class="faith-copy" data-reveal>
<span class="eyebrow">Our Faith</span>
<h2 class="section-title">Rooted in tradition, <em>open to mystery.</em></h2>
<p class="dropcap">For more than four decades, The Lumen Fellowship has gathered seekers, skeptics, and saints around one simple conviction: that the sacred is found not only in ancient texts, but in shared bread, honest conversation, and the quiet courage of community. We draw from the contemplative stream of the Christian tradition while honoring the wisdom of many paths.</p>
<p>Our congregation is woven from every walk of life — young families and lifelong members, the certain and the questioning. We believe faith is not a destination but a practice: a rhythm of <strong>communal worship</strong>, study, silence, and service that shapes us week by week into people of compassion.</p>
<p>Whether you are returning to faith after years away, exploring spirituality for the first time, or simply searching for a place to belong, there is a seat saved for you here.</p>
<a href="#services" class="btn btn-outline" style="margin-top:.6rem">Learn More About Us <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
<div class="stats">
<div class="stat"><b>42</b><span>Years of Worship</span></div>
<div class="stat"><b>1,200+</b><span>Members & Friends</span></div>
<div class="stat"><b>18K</b><span>Meals Served / Yr</span></div>
<div class="stat"><b>40+</b><span>Small Groups</span></div>
</div>
</div>
</div>
</section>
<div class="flourish" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1"/></svg>
</div>
<!-- ===== SERVICE TIMES ===== -->
<section class="services" id="services">
<div class="container">
<div class="center" data-reveal>
<span class="eyebrow">Worship With Us</span>
<h2 class="section-title">Service times & <em>sacred rhythms</em></h2>
<p class="lead">Three distinct gatherings each week — from the full joy of Sunday morning worship to candlelit midweek stillness. Every service is open to all, no membership required, no dress code, no prerequisites.</p>
</div>
<div class="svc-grid">
<article class="svc-card" data-reveal>
<span class="svc-day">Sunday Morning</span>
<h3>Celebration Worship</h3>
<div class="svc-time">9:30 <small>AM</small></div>
<p>Our principal gathering: full chancel choir, communion, scripture, and a message that meets the moment. Nursery care and children's chapel available.</p>
<a href="#events" class="svc-link">Plan Your Visit <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</article>
<article class="svc-card" data-reveal>
<span class="svc-day">Wednesday Evening</span>
<h3>Midweek Reflection</h3>
<div class="svc-time">6:30 <small>PM</small></div>
<p>A candlelit, contemplative half-hour of prayer, poetry, and quiet music — a pause in the middle of the week to breathe, reflect, and be restored.</p>
<a href="#events" class="svc-link">Plan Your Visit <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</article>
<article class="svc-card" data-reveal>
<span class="svc-day">Saturday Evening</span>
<h3>Taizé Prayer Service</h3>
<div class="svc-time">5:00 <small>PM</small></div>
<p>Meditative song, silence, and scripture in the style of the Taizé community. Simple chants, soft light, and space for the soul to settle.</p>
<a href="#events" class="svc-link">Plan Your Visit <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</article>
</div>
<div class="svc-note" data-reveal>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M10 9l5 3-5 3V9z"/></svg>
Can't join in person? Every Sunday service is livestreamed and archived on our YouTube channel.
</div>
</div>
</section>
<!-- ===== MINISTRIES ===== -->
<section id="ministries">
<div class="container">
<div class="center" data-reveal>
<span class="eyebrow">Life Together</span>
<h2 class="section-title">Ministries for <em>every season of life</em></h2>
<p class="lead">Faith grows in community. From the choir loft to the food pantry, our ministries are the beating heart of the Fellowship — places to serve, to learn, and to be known.</p>
</div>
<div class="min-grid">
<article class="min-card" data-reveal>
<div class="min-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></div>
<h3>Music Ministry</h3>
<p>Chancel choir, handbell ensemble, and our contemporary band lead the congregation in song each week. All skill levels welcome.</p>
<a href="#music">Get Involved →</a>
</article>
<article class="min-card" data-reveal>
<div class="min-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 21s-7-4.5-9.5-9C.9 8.9 2.4 5.5 5.7 5.1c1.9-.2 3.6.7 4.6 2.2.5.7 1.9.7 2.4 0 1-1.5 2.7-2.4 4.6-2.2 3.3.4 4.8 3.8 3.2 6.9C19 16.5 12 21 12 21z" transform="scale(.92) translate(1,0)"/></svg></div>
<h3>Community Support</h3>
<p>Our outreach teams run the Riverton Food Pantry, shelter partnerships, and visitation ministry for the homebound and grieving.</p>
<a href="#outreach">Get Involved →</a>
</article>
<article class="min-card" data-reveal>
<div class="min-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5"/></svg></div>
<h3>Children & Youth</h3>
<p>Sunday chapel, youth group, and confirmation classes give young people a safe place to ask big questions and build lasting friendships.</p>
<a href="#events">Learn More →</a>
</article>
<article class="min-card" data-reveal>
<div class="min-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 19.5A2.5 2.5 0 016.5 17H20V4H6.5A2.5 2.5 0 004 6.5v13z"/><path d="M4 19.5A2.5 2.5 0 006.5 22H20v-5"/></svg></div>
<h3>Study & Small Groups</h3>
<p>More than forty groups meet weekly — scripture study, book circles, contemplative prayer, and interfaith dialogue. Find your people.</p>
<a href="#events">Learn More →</a>
</article>
<article class="min-card" data-reveal>
<div class="min-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 22s8-3.6 8-10V5.2L12 2 4 5.2V12c0 6.4 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg></div>
<h3>Care & Counseling</h3>
<p>Stephen Ministers, grief circles, and pastoral counseling offer confidential, compassionate care through life's hardest seasons.</p>
<a href="#outreach">Learn More →</a>
</article>
<article class="min-card" data-reveal>
<div class="min-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/><path d="M10 20v-6h4v6"/></svg></div>
<h3>Hospitality & Arts</h3>
<p>Greeters, bakers, gardeners, and gallery volunteers make our campus a warm, beautiful threshold between the everyday and the sacred.</p>
<a href="#outreach">Get Involved →</a>
</article>
</div>
</div>
</section>
<!-- ===== MUSIC SPOTLIGHT ===== -->
<section class="spotlight" id="music">
<div class="container spot-grid">
<div data-reveal>
<img class="spot-img" src="https://picsum.photos/id/1039/1100/800" alt="Water cascading over stone, evoking the flow of music" loading="lazy">
</div>
<div data-reveal>
<span class="eyebrow" style="color:var(--gold-2)">Ministry Spotlight</span>
<h2 class="section-title">Music Ministry: <em>where song becomes prayer</em></h2>
<p class="lead">"The one who sings prays twice." At The Lumen Fellowship, music is not performance — it is the congregation's shared breath, lifted together.</p>
<p>Our forty-voice Chancel Choir anchors Sunday worship with repertoire spanning Renaissance motets to modern gospel. The Lantern Ringers, our handbell ensemble, marks the great festivals of the year, while the Ember Band brings contemporary warmth to Saturday Taizé services.</p>
<ul class="spot-list">
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>Open auditions every September and January — no experience required for our New Voices ensemble.</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>Weekly rehearsals Thursdays at 7:00 PM in the Sanctuary Choir Loft.</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>Annual Candlelight Concert each December, free and open to the whole city.</li>
</ul>
<a href="#events" class="btn btn-gold">Join the Choir <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</div>
</section>
<!-- ===== OUTREACH + SIDEBAR ===== -->
<section id="outreach">
<div class="container outreach-layout">
<div class="outreach-main" data-reveal>
<span class="eyebrow">Community Support & Outreach</span>
<h2 class="section-title">Faith with <em>its sleeves rolled up</em></h2>
<p class="lead">We believe worship that never leaves the sanctuary is only half-finished. Our outreach ministries carry the light of the Fellowship into the streets, shelters, and kitchen tables of Riverton.</p>
<img src="https://picsum.photos/id/1029/1200/640" alt="The Riverton skyline at dusk, the community we serve" loading="lazy">
<p>Every week, more than 120 volunteers from our congregation staff the Riverton Food Pantry, prepare meals for the Harbor Street Shelter, and visit neighbors who are homebound, hospitalized, or grieving. Last year alone, the Fellowship served over 18,000 meals, welcomed six refugee families into new homes, and provided emergency assistance to 240 households.</p>
<p>You don't need to be a member to serve — only willing. Whether you have an hour a month or a day a week, there is a place for your hands here.</p>
<div class="program-list">
<div class="program"><b>Riverton Food Pantry</b><span>Tue & Fri, 9 AM – 1 PM · sorting, stocking, greeting</span></div>
<div class="program"><b>Harbor Street Shelter</b><span>First Saturdays · meal prep & service teams</span></div>
<div class="program"><b>Refugee Welcome Circle</b><span>Ongoing · housing, mentoring, language support</span></div>
<div class="program"><b>Visitation Team</b><span>Weekly · companionship for the homebound</span></div>
</div>
<a href="#events" class="btn btn-dark">Get Involved <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
<aside class="sidebar" aria-label="Community sidebar">
<div class="widget verse-widget" data-reveal>
<h4><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1"/><circle cx="12" cy="12" r="4"/></svg>Word for the Week</h4>
<p class="verse-text" id="verseText">"Let there be light — and there was light, and it was good."</p>
<span class="verse-src" id="verseSrc">Genesis 1:3</span>
</div>
<div class="widget" data-reveal>
<h4><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 21s-7-4.5-9.5-9C.9 8.9 2.4 5.5 5.7 5.1c1.9-.2 3.6.7 4.6 2.2.5.7 1.9.7 2.4 0 1-1.5 2.7-2.4 4.6-2.2 3.3.4 4.8 3.8 3.2 6.9C19 16.5 12 21 12 21z" transform="scale(.92) translate(1,0)"/></svg>Volunteer Opportunities</h4>
<ul class="vol-list">
<li>Pantry Sorters (Tue AM) <a href="#events">Sign Up</a></li>
<li>Sunday Greeters <a href="#events">Sign Up</a></li>
<li>Shelter Meal Team <a href="#events">Sign Up</a></li>
<li>Youth Mentors <a href="#events">Sign Up</a></li>
<li>Garden & Grounds Crew <a href="#events">Sign Up</a></li>
</ul>
</div>
<div class="widget" data-reveal>
<h4><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5"/></svg>Member Story</h4>
<div class="member-mini">
<img src="https://i.pravatar.cc/120?u=ruth-ellison" alt="Portrait of Ruth Ellison" loading="lazy">
<p>"I came for the food pantry shift. I stayed for the family I found."<b>Ruth E. · Volunteer since 2016</b></p>
</div>
</div>
</aside>
</div>
</section>
<!-- ===== EVENTS ===== -->
<section class="events" id="events">
<div class="container">
<div class="center" data-reveal>
<span class="eyebrow">Mark Your Calendar</span>
<h2 class="section-title">Upcoming <em>gatherings & events</em></h2>
<p class="lead">From harvest suppers to quiet retreat days, there is always a door open at the Fellowship. Reserve your place below — registration takes less than a minute.</p>
</div>
<div class="event-list">
<article class="event-row" data-reveal>
<div class="event-date"><b>18</b><span>Oct</span></div>
<img class="event-thumb" src="https://picsum.photos/id/1016/400/260" alt="Autumn canyon landscape" loading="lazy">
<div class="event-info">
<h3>Autumn Harvest Supper & Auction</h3>
<p>Our beloved annual feast: local food, live music from the Ember Band, and a silent auction benefiting the Refugee Welcome Circle.</p>
<div class="event-meta">
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>6:00 PM</span>
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-5.5-7-11a7 7 0 0114 0c0 5.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>Fellowship Hall</span>
</div>
</div>
<button class="btn btn-outline register-btn" data-event="Autumn Harvest Supper & Auction — Oct 18">Register</button>
</article>
<article class="event-row" data-reveal>
<div class="event-date"><b>26</b><span>Oct</span></div>
<img class="event-thumb" src="https://picsum.photos/id/1036/400/260" alt="Sunlit mountain ridge" loading="lazy">
<div class="event-info">
<h3>Newcomers' Brunch</h3>
<p>New to the Fellowship? Join our pastors and welcome team for coffee, conversation, and an honest look at life in this community.</p>
<div class="event-meta">
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>11:00 AM</span>
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-5.5-7-11a7 7 0 0114 0c0 5.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>Garden Room</span>
</div>
</div>
<button class="btn btn-outline register-btn" data-event="Newcomers' Brunch — Oct 26">Register</button>
</article>
<article class="event-row" data-reveal>
<div class="event-date"><b>08</b><span>Nov</span></div>
<img class="event-thumb" src="https://picsum.photos/id/1019/400/260" alt="A still lake at golden hour" loading="lazy">
<div class="event-info">
<h3>Contemplative Retreat Day</h3>
<p>A guided day of silence, walking meditation, and journaling led by Rev. Amara Osei. Lunch provided; bring a journal and an open heart.</p>
<div class="event-meta">
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>9:00 AM – 4:00 PM</span>
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-5.5-7-11a7 7 0 0114 0c0 5.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>Willowbrook Retreat House</span>
</div>
</div>
<button class="btn btn-outline register-btn" data-event="Contemplative Retreat Day — Nov 8">Register</button>
</article>
<article class="event-row" data-reveal>
<div class="event-date"><b>25</b><span>Nov</span></div>
<img class="event-thumb" src="https://picsum.photos/id/1035/400/260" alt="Fog rolling over forested hills" loading="lazy">
<div class="event-info">
<h3>Interfaith Thanksgiving Service</h3>
<p>Congregations from across Riverton gather for an evening of shared gratitude, music, and prayer across traditions. All are welcome.</p>
<div class="event-meta">
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>7:00 PM</span>
<span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-5.5-7-11a7 7 0 0114 0c0 5.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>Main Sanctuary</span>
</div>
</div>
<button class="btn btn-outline register-btn" data-event="Interfaith Thanksgiving Service — Nov 25">Register</button>
</article>
</div>
</div>
</section>
<!-- ===== TESTIMONIALS ===== -->
<section class="stories" id="stories">
<div class="container center" data-reveal>
<span class="eyebrow">Voices of the Fellowship</span>
<h2 class="section-title">Stories from <em>our congregation</em></h2>
</div>
<div class="slider" data-reveal>
<div class="slide-track" id="slideTrack">
<div class="slide">
<blockquote>I walked in a stranger carrying more grief than I could name. Within a month, I had a grief circle, a casserole brigade, and people who checked on me every single week. This place saved me.</blockquote>
<div class="who">
<img src="https://i.pravatar.cc/120?u=martha-okafor" alt="Portrait of Martha Okafor" loading="lazy">
<div><b>Martha Okafor</b><span>Member since 2019</span></div>
</div>
</div>
<div class="slide">
<blockquote>As a lifelong skeptic, I expected polite tolerance. What I found was a community that welcomed my questions as warmly as any creed. My doubts weren't a barrier here — they were a beginning.</blockquote>
<div class="who">
<img src="https://i.pravatar.cc/120?u=david-lindqvist" alt="Portrait of David Lindqvist" loading="lazy">
<div><b>David Lindqvist</b><span>Member since 2021</span></div>
</div>
</div>
<div class="slide">
<blockquote>My kids run down the aisle to children's chapel. My teenager actually asks to go to youth group. Watching three generations of our family grow in this congregation is the gift of my life.</blockquote>
<div class="who">
<img src="https://i.pravatar.cc/120?u=amara-reyes" alt="Portrait of Amara Reyes" loading="lazy">
<div><b>Amara Reyes</b><span>Member since 2014</span></div>
</div>
</div>
<div class="slide">
<blockquote>Serving at the food pantry every Friday morning has taught me more about faith than forty years of sermons. Here, belief is something you do with your hands.</blockquote>
<div class="who">
<img src="https://i.pravatar.cc/120?u=jonas-whitfield" alt="Portrait of Jonas Whitfield" loading="lazy">
<div><b>Jonas Whitfield</b><span>Member since 2008</span></div>
</div>
</div>
</div>
<div class="slider-nav">
<button class="slider-btn" id="prevSlide" aria-label="Previous story"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M11 6l-6 6 6 6"/></svg></button>
<div class="dots" id="sliderDots"></div>
<button class="slider-btn" id="nextSlide" aria-label="Next story"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
</div>
</div>
</section>
<!-- ===== FAQ ===== -->
<section id="faq">
<div class="container">
<div class="center" data-reveal>
<span class="eyebrow">Before You Visit</span>
<h2 class="section-title">Questions, <em>answered honestly</em></h2>
<p class="lead">Walking into a new spiritual community takes courage. Here's what you can expect when you walk through our doors.</p>
</div>
<div class="faq-wrap">
<div class="faq-item" data-reveal>
<button class="faq-q" aria-expanded="false">What should I wear to a service? <span class="plus">+</span></button>
<div class="faq-a"><p>Whatever feels like you. On any given Sunday you'll see suits and sneakers, dresses and denim — often in the same pew. We care about the person in the clothes, not the clothes. Come comfortable; you'll fit right in.</p></div>
</div>
<div class="faq-item" data-reveal>
<button class="faq-q" aria-expanded="false">Do I need to be a member to take communion? <span class="plus">+</span></button>
<div class="faq-a"><p>No. We practice open communion: the table belongs to everyone who seeks it, regardless of membership, denomination, or doubt. Gluten-free bread and grape juice are always available, and you are equally welcome to simply remain seated and receive a blessing.</p></div>
</div>
<div class="faq-item" data-reveal>
<button class="faq-q" aria-expanded="false">Is there childcare during worship? <span class="plus">+</span></button>
<div class="faq-a"><p>Yes. Our professionally staffed nursery welcomes infants through age three for all Sunday services, and Children's Chapel (ages 4–10) runs during the sermon with stories, crafts, and music. All caregivers are background-checked and trained in our Safe Sanctuary policy.</p></div>
</div>
<div class="faq-item" data-reveal>
<button class="faq-q" aria-expanded="false">How do I become a member? <span class="plus">+</span></button>
<div class="faq-a"><p>Membership begins with our three-week "Lantern Course," offered each quarter — a relaxed series of conversations about our history, beliefs, and life together. There's no pressure to join at the end; many people take the course simply to learn. New members are received during Sunday worship each season.</p></div>
</div>
<div class="faq-item" data-reveal>
<button class="faq-q" aria-expanded="false">Can I watch services online? <span class="plus">+</span></button>
<div class="faq-a"><p>Every Sunday service is livestreamed at 9:30 AM on our YouTube channel and archived for later viewing, with closed captions provided. Our online congregation spans three continents, and virtual small groups meet weekly for those who can't attend in person.</p></div>
</div>
</div>
</div>
</section>
<!-- ===== GIVE ===== -->
<section class="give" id="give">
<div class="container">
<div data-reveal>
<span class="eyebrow" style="color:var(--gold-2)">Stewardship & Giving</span>
<h2 class="section-title">Your generosity <em>becomes someone's miracle</em></h2>
<p class="lead" style="margin-bottom:1.2rem">Every gift to The Lumen Fellowship is a seed planted in real soil — a pantry shelf stocked, a shelter bed warmed, a sanctuary kept bright for the next seeker who walks through our doors.</p>
<p class="body">We practice transparent stewardship: an annual open-book report to the congregation, an independently audited budget, and a commitment that at least 30% of every undesignated gift flows directly to outreach beyond our walls.</p>
<p class="body">Give once, give monthly, or give your time. However you share, you become part of a story larger than any one of us.</p>
</div>
<div class="give-widget" data-reveal>
<h3>Make a Gift</h3>
<div class="amounts" id="amounts">
<button class="amt" data-amt="25">$25</button>
<button class="amt active" data-amt="50">$50</button>
<button class="amt" data-amt="100">$100</button>
<button class="amt" data-amt="250">$250</button>
</div>
<div class="custom-amt">
<span>$</span>
<input type="number" id="customAmt" min="1" placeholder="Custom amount" aria-label="Custom donation amount">
</div>
<div class="impact-line">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-4.5-9.5-9C.9 8.9 2.4 5.5 5.7 5.1c1.9-.2 3.6.7 4.6 2.2.5.7 1.9.7 2.4 0 1-1.5 2.7-2.4 4.6-2.2 3.3.4 4.8 3.8 3.2 6.9C19 16.5 12 21 12 21z" transform="scale(.92) translate(1,0)"/></svg>
<span id="impactText">$50 provides a full week of groceries for a family through the Riverton Food Pantry.</span>
</div>
<div class="goal">
<div class="goal-label"><span>October Outreach Goal</span><b id="goalPct">69%</b></div>
<div class="goal-bar"><div class="goal-fill" id="goalFill"></div></div>
</div>
<button class="btn btn-gold" id="giveBtn">Give Securely <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
<div class="give-secure"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/></svg>256-bit encrypted · Tax-deductible · Cancel anytime</div>
</div>
</div>
</section>
<!-- ===== NEWSLETTER ===== -->
<section class="newsletter">
<div class="container">
<div>
<h2>The Weekly Light</h2>
<p>A short, soulful email each Friday — one reflection, one upcoming event, one way to serve. No noise, ever.</p>
</div>
<form class="news-form" id="newsForm" novalidate>
<input type="email" id="newsEmail" placeholder="Your email address" aria-label="Email address" required>
<button type="submit" class="btn">Subscribe</button>
</form>
</div>
</section>
<!-- ===== FOOTER ===== -->
<footer id="contact">
<div class="container">
<div class="foot-grid">
<div>
<div class="foot-brand">
<img src="https://placehold.co/96x96/262119/d4a94e/png?text=L&font=playfair%20display" alt="The Lumen Fellowship logo">
<span class="brand-text">
<span class="brand-name">The Lumen Fellowship</span>
<span class="brand-tag">Gathering in Grace · Growing in Light</span>
</span>
</div>
<p>An open and affirming spiritual community in Riverton, Ohio — gathering for communal worship, growing through study and service, and carrying light into our city since 1983.</p>
<div class="foot-social">
<a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24"><path d="M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6c-.3-.04-1.3-.1-2.4-.1-2.4 0-4 1.45-4 4.1v2.3H7.5V13h2.8v8h3.2z"/></svg></a>
<a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24"><path d="M12 2.2c3.2 0 3.6 0 4.9.07 3.25.15 4.77 1.7 4.92 4.92.06 1.27.07 1.65.07 4.86s-.01 3.58-.07 4.85c-.15 3.23-1.66 4.77-4.92 4.92-1.3.06-1.7.07-4.9.07s-3.6-.01-4.86-.07c-3.26-.15-4.77-1.7-4.92-4.92C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.86C2.42 3.9 3.94 2.42 7.2 2.27 8.4 2.2 8.8 2.2 12 2.2zm0 3.1a6.7 6.7 0 100 13.4 6.7 6.7 0 000-13.4zm0 11a4.3 4.3 0 110-8.7 4.3 4.3 0 010 8.7zm6.96-11.2a1.57 1.57 0 11-3.14 0 1.57 1.57 0 013.14 0z"/></svg></a>
<a href="#" aria-label="YouTube"><svg viewBox="0 0 24 24"><path d="M23 7.2s-.22-1.56-.9-2.24c-.86-.9-1.82-.9-2.26-.96C16.7 3.75 12 3.75 12 3.75h-.01s-4.7 0-7.84.25c-.44.06-1.4.06-2.26.96C1.2 5.64 1 7.2 1 7.2S.75 9.03.75 10.87v1.7c0 1.83.24 3.66.24 3.66s.22 1.56.9 2.24c.86.9 1.98.87 2.49.97 1.8.17 7.62.22 7.62.22s4.71-.01 7.85-.26c.44-.05 1.4-.05 2.26-.95.68-.68.9-2.24.9-2.24s.24-1.83.24-3.66v-1.7C23.25 9.03 23 7.2 23 7.2zM9.75 14.6V8.75l6.15 2.93-6.15 2.92z"/></svg></a>
<a href="#" aria-label="X"><svg viewBox="0 0 24 24"><path d="M18.9 2H22l-6.77 7.74L23.2 22h-6.24l-4.9-6.4L6.5 22H3.34l7.24-8.28L2.8 2h6.4l4.43 5.85L18.9 2zm-1.1 18.1h1.72L7.1 3.8H5.25L17.8 20.1z"/></svg></a>
</div>
</div>
<div>
<h4>Explore</h4>
<div class="foot-links">
<a href="#faith">Our Faith</a>
<a href="#services">Service Times</a>
<a href="#ministries">Ministries</a>
<a href="#events">Events</a>
<a href="#stories">Member Stories</a>
<a href="#give">Give</a>
</div>
</div>
<div>
<h4>Resources</h4>
<div class="foot-links">
<a href="#">Sermon Archive</a>
<a href="#">Prayer Requests</a>
<a href="#">Room Reservations</a>
<a href="#">Safe Sanctuary Policy</a>
<a href="#">Annual Report</a>
</div>
</div>
<div>
<h4>Visit Us</h4>
<ul class="foot-contact">
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 21s-7-5.5-7-11a7 7 0 0114 0c0 5.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>412 Lantern Lane<br>Riverton, OH 45220</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.9v3a2 2 0 01-2.2 2A19.8 19.8 0 012 4.2 2 2 0 014 2h3a2 2 0 012 1.7c.13.96.36 1.9.7 2.8a2 2 0 01-.45 2.1L8.1 9.7a16 16 0 006.2 6.2l1.1-1.15a2 2 0 012.1-.45c.9.34 1.84.57 2.8.7A2 2 0 0122 16.9z"/></svg>(555) 214-9087</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 6L2 7"/></svg>hello@lumenfellowship.org</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>Office: Mon–Fri, 9 AM – 4 PM</li>
</ul>
</div>
</div>
<div class="foot-bottom">
<span>© <span id="year">2025</span> The Lumen Fellowship. All rights reserved.</span>
<div class="legal">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Use</a>
<a href="#">Accessibility</a>
</div>
</div>
</div>
</footer>
<!-- ===== REGISTRATION MODAL ===== -->
<div class="modal-overlay" id="modalOverlay" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
<div class="modal">
<button class="modal-close" id="modalClose" aria-label="Close dialog">✕</button>
<div id="regFormWrap">
<h3 id="modalTitle">Event Registration</h3>
<p class="modal-sub" id="modalEventName">Event</p>
<form id="regForm" novalidate>
<div class="field" id="fName">
<label for="regName">Full Name</label>
<input type="text" id="regName" placeholder="Jane Doe" autocomplete="name">
<span class="err">Please enter your name.</span>
</div>
<div class="field" id="fEmail">
<label for="regEmail">Email Address</label>
<input type="email" id="regEmail" placeholder="jane@example.com" autocomplete="email">
<span class="err">Please enter a valid email address.</span>
</div>
<div class="field">
<label for="regGuests">Number of Attendees</label>
<select id="regGuests">
<option value="1">Just me</option>
<option value="2">2 people</option>
<option value="3">3 people</option>
<option value="4">4 people</option>
<option value="5">5+ people</option>
</select>
</div>
<button type="submit" class="btn btn-gold" style="width:100%;justify-content:center">Confirm Registration</button>
</form>
</div>
<div class="form-success" id="formSuccess">
<div class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg></div>
<h4>You're registered!</h4>
<p id="successMsg">A confirmation is on its way to your inbox. We look forward to gathering with you.</p>
</div>
</div>
</div>
<!-- ===== TOAST ===== -->
<div class="toast" id="toast" role="status">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
<span id="toastMsg"></span>
</div>
<!-- Back to top -->
<button class="back-top" id="backTop" aria-label="Back to top">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M6 11l6-6 6 6"/></svg>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduceMotion) document.documentElement.classList.add('no-motion');
/* ---------- Footer year ---------- */
document.getElementById('year').textContent = new Date().getFullYear();
/* ---------- Header scroll state ---------- */
var header = document.getElementById('siteHeader');
var backTop = document.getElementById('backTop');
function onScroll() {
header.classList.toggle('scrolled', window.scrollY > 60);
backTop.classList.toggle('show', window.scrollY > 700);
}
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
backTop.addEventListener('click', function () { window.scrollTo({ top: 0, behavior: 'smooth' }); });
/* ---------- Mobile menu ---------- */
var hamburger = document.getElementById('hamburger');
var mobileMenu = document.getElementById('mobileMenu');
hamburger.addEventListener('click', function () {
var open = mobileMenu.classList.toggle('open');
document.body.classList.toggle('menu-open', open);
hamburger.setAttribute('aria-expanded', open);
});
mobileMenu.querySelectorAll('a').forEach(function (a) {
a.addEventListener('click', function () {
mobileMenu.classList.remove('open');
document.body.classList.remove('menu-open');
hamburger.setAttribute('aria-expanded', 'false');
});
});
/* ---------- Active nav highlighting ---------- */
var navLinks = document.querySelectorAll('nav.mainnav a:not(.give-link)');
var sections = ['home', 'faith', 'services', 'ministries', 'events', 'stories'].map(function (id) { return document.getElementById(id); });
var navObserver = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) {
navLinks.forEach(function (l) { l.classList.toggle('active', l.getAttribute('href') === '#' + e.target.id); });
}
});
}, { rootMargin: '-40% 0px -55% 0px' });
sections.forEach(function (s) { if (s) navObserver.observe(s); });
/* ---------- Countdown to next Sunday 9:30 AM ---------- */
function nextSunday() {
var now = new Date(), d = new Date(now);
d.setHours(9, 30, 0, 0);
var add = (7 - now.getDay()) % 7;
if (add === 0 && now >= d) add = 7;
d.setDate(d.getDate() + add);
return d;
}
var target = nextSunday();
var cdD = document.getElementById('cd-d'), cdH = document.getElementById('cd-h'),
cdM = document.getElementById('cd-m'), cdS = document.getElementById('cd-s');
function pad(n) { return String(n).padStart(2, '0'); }
function tick() {
var diff = target - new Date();
if (diff <= 0) { target = nextSunday(); diff = target - new Date(); }
cdD.textContent = Math.floor(diff / 864e5);
cdH.textContent = pad(Math.floor(diff / 36e5) % 24);
cdM.textContent = pad(Math.floor(diff / 6e4) % 60);
cdS.textContent = pad(Math.floor(diff / 1e3) % 60);
}
tick(); setInterval(tick, 1000);
/* ---------- Verse rotator ---------- */
var verses = [
{ t: '"Let there be light — and there was light, and it was good."', s: 'Genesis 1:3' },
{ t: '"Come to me, all who are weary, and I will give you rest."', s: 'Matthew 11:28' },
{ t: '"The light shines in the darkness, and the darkness has not overcome it."', s: 'John 1:5' },
{ t: '"Be still, and know that I am God."', s: 'Psalm 46:10' }
];
var vIdx = 0, vText = document.getElementById('verseText'), vSrc = document.getElementById('verseSrc');
setInterval(function () {
vText.style.opacity = 0; vSrc.style.opacity = 0;
setTimeout(function () {
vIdx = (vIdx + 1) % verses.length;
vText.textContent = verses[vIdx].t;
vSrc.textContent = verses[vIdx].s;
vText.style.opacity = 1; vSrc.style.opacity = 1;
}, 600);
}, 7000);
/* ---------- FAQ accordion ---------- */
document.querySelectorAll('.faq-item').forEach(function (item) {
var q = item.querySelector('.faq-q'), a = item.querySelector('.faq-a');
q.addEventListener('click', function () {
var isOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item.open').forEach(function (o) {
o.classList.remove('open');
o.querySelector('.faq-a').style.maxHeight = null;
o.querySelector('.faq-q').setAttribute('aria-expanded', 'false');
});
if (!isOpen) {
item.classList.add('open');
a.style.maxHeight = a.scrollHeight + 'px';
q.setAttribute('aria-expanded', 'true');
}
});
});
/* ---------- Testimonial slider ---------- */
var track = document.getElementById('slideTrack');
var slides = track.children.length;
var dotsWrap = document.getElementById('sliderDots');
var cur = 0, auto;
for (var i = 0; i < slides; i++) {
var d = document.createElement('button');
d.className = 'dot' + (i === 0 ? ' active' : '');
d.setAttribute('aria-label', 'Go to story ' + (i + 1));
(function (n) { d.addEventListener('click', function () { go(n); }); })(i);
dotsWrap.appendChild(d);
}
function go(n) {
cur = (n + slides) % slides;
track.style.transform = 'translateX(-' + cur * 100 + '%)';
dotsWrap.querySelectorAll('.dot').forEach(function (dt, k) { dt.classList.toggle('active', k === cur); });
restartAuto();
}
function restartAuto() { clearInterval(auto); auto = setInterval(function () { go(cur + 1); }, 7000); }
document.getElementById('prevSlide').addEventListener('click', function () { go(cur - 1); });
document.getElementById('nextSlide').addEventListener('click', function () { go(cur + 1); });
track.parentElement.addEventListener('mouseenter', function () { clearInterval(auto); });
track.parentElement.addEventListener('mouseleave', restartAuto);
restartAuto();
/* ---------- Registration modal ---------- */
var overlay = document.getElementById('modalOverlay');
var regFormWrap = document.getElementById('regFormWrap');
var formSuccess = document.getElementById('formSuccess');
var regForm = document.getElementById('regForm');
function openModal(evName) {
document.getElementById('modalEventName').textContent = evName;
regFormWrap.style.display = 'block';
formSuccess.style.display = 'none';
overlay.classList.add('open');
document.body.style.overflow = 'hidden';
setTimeout(function () { document.getElementById('regName').focus(); }, 350);
}
function closeModal() {
overlay.classList.remove('open');
document.body.style.overflow = '';
regForm.reset();
document.querySelectorAll('.field').forEach(function (f) { f.classList.remove('invalid'); });
}
document.querySelectorAll('.register-btn').forEach(function (b) {
b.addEventListener('click', function () { openModal(b.dataset.event); });
});
document.getElementById('modalClose').addEventListener('click', closeModal);
overlay.addEventListener('click', function (e) { if (e.target === overlay) closeModal(); });
document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && overlay.classList.contains('open')) closeModal(); });
regForm.addEventListener('submit', function (e) {
e.preventDefault();
var name = document.getElementById('regName');
var email = document.getElementById('regEmail');
var ok = true;
document.getElementById('fName').classList.toggle('invalid', !(ok = name.value.trim().length > 1) && true);
var emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value.trim());
document.getElementById('fEmail').classList.toggle('invalid', !emailOk);
if (!name.value.trim() || !emailOk) return;
var guests = document.getElementById('regGuests');
document.getElementById('successMsg').textContent =
'Thank you, ' + name.value.trim().split(' ')[0] + '! Your spot' +
(guests.value !== '1' ? 's for ' + guests.value + (guests.value === '5' ? '+' : '') + ' attendees' : '') +
' are confirmed. A reminder is on its way to your inbox.';
regFormWrap.style.display = 'none';
formSuccess.style.display = 'block';
setTimeout(closeModal, 4200);
});
/* ---------- Toast ---------- */
var toast = document.getElementById('toast'), toastMsg = document.getElementById('toastMsg'), toastTimer;
function showToast(msg) {
toastMsg.textContent = msg;
toast.classList.add('show');
clearTimeout(toastTimer);
toastTimer = setTimeout(function () { toast.classList.remove('show'); }, 3800);
}
/* ---------- Giving widget ---------- */
var impacts = {
25: '$25 fills a backpack with school supplies for a child in our Refugee Welcome Circle.',
50: '$50 provides a full week of groceries for a family through the Riverton Food Pantry.',
100: '$100 covers a warm meal service for forty neighbors at the Harbor Street Shelter.',
250: '$250 funds emergency rent assistance that keeps a local family in their home.'
};
var impactText = document.getElementById('impactText');
var customAmt = document.getElementById('customAmt');
var amtBtns = document.querySelectorAll('.amt');
amtBtns.forEach(function (b) {
b.addEventListener('click', function () {
amtBtns.forEach(function (x) { x.classList.remove('active'); });
b.classList.add('active');
customAmt.value = '';
impactText.textContent = impacts[b.dataset.amt];
});
});
customAmt.addEventListener('input', function () {
if (customAmt.value) {
amtBtns.forEach(function (x) { x.classList.remove('active'); });
impactText.textContent = '$' + customAmt.value + ' joins thousands of gifts, large and small, that keep our doors open and our outreach growing.';
}
});
document.getElementById('giveBtn').addEventListener('click', function () {
var active = document.querySelector('.amt.active');
var amt = customAmt.value ? '$' + customAmt.value : (active ? '$' + active.dataset.amt : 'Your gift');
showToast(amt + ' — thank you! You would now be redirected to our secure giving portal.');
});
/* ---------- Goal bar animation ---------- */
var goalFill = document.getElementById('goalFill');
new IntersectionObserver(function (entries, obs) {
entries.forEach(function (e) {
if (e.isIntersecting) { goalFill.style.width = '69%'; obs.disconnect(); }
});
}, { threshold: 0.4 }).observe(goalFill);
/* ---------- Newsletter ---------- */
document.getElementById('newsForm').addEventListener('submit', function (e) {
e.preventDefault();
var em = document.getElementById('newsEmail');
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(em.value.trim())) {
showToast('Please enter a valid email address to subscribe.');
em.focus();
return;
}
showToast('Welcome to The Weekly Light — your first reflection arrives Friday.');
em.value = '';
});
/* ---------- GSAP scroll reveals ---------- */
if (!reduceMotion && window.gsap && window.ScrollTrigger) {
gsap.registerPlugin(ScrollTrigger);
document.querySelectorAll('[data-reveal]').forEach(function (el, i) {
gsap.fromTo(el, { opacity: 0, y: 36 }, {
opacity: 1, y: 0, duration: 0.9, ease: 'power3.out',
delay: (i % 3) * 0.08,
scrollTrigger: { trigger: el, start: 'top 88%', once: true }
});
});
gsap.fromTo('.hero-content > *', { opacity: 0, y: 30 }, {
opacity: 1, y: 0, duration: 1.1, stagger: 0.14, ease: 'power3.out', delay: 0.2
});
gsap.fromTo('.hero-card', { opacity: 0, y: 24 }, {
opacity: 1, y: 0, duration: 1, ease: 'power3.out', delay: 0.9
});
} else {
document.querySelectorAll('[data-reveal]').forEach(function (el) { el.style.opacity = 1; });
}
});
</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-12T09:53:55.918Z",
"url": "https://benchmark.aimac.invalid/e81a1a598cf751f0a0368adddd307a18b673565b3ad79c2e96894eb2e57712a4.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-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": []
},
{
"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": []
},
{
"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": "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": "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=\"#\" aria-label=\"Facebook\"><svg viewBox=\"0 0 24 24\"><path d=\"M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6c-.3-.04-1.3-.1-2.4-.1-2.4 0-4 1.45-4 4.1v2.3H7.5V13h2.8v8h3.2z\"></path></svg></a>",
"target": [
".social > a[aria-label=\"Facebook\"][href=\"#\"]"
]
}
]
},
{
"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=\"#\" aria-label=\"Facebook\"><svg viewBox=\"0 0 24 24\"><path d=\"M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6c-.3-.04-1.3-.1-2.4-.1-2.4 0-4 1.45-4 4.1v2.3H7.5V13h2.8v8h3.2z\"></path></svg></a>",
"target": [
".social > a[aria-label=\"Facebook\"][href=\"#\"]"
]
}
]
},
{
"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=\"modal-overlay\" id=\"modalOverlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalTitle\">",
"target": [
"#modalOverlay"
]
}
]
},
{
"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 style=\"\">",
"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": "<div class=\"flourish\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"><circle cx=\"12\" cy=\"12\" r=\"4\"></circle><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1\"></path></svg>\n</div>",
"target": [
".flourish"
]
}
]
},
{
"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=\"#\" aria-label=\"Facebook\"><svg viewBox=\"0 0 24 24\"><path d=\"M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6c-.3-.04-1.3-.1-2.4-.1-2.4 0-4 1.45-4 4.1v2.3H7.5V13h2.8v8h3.2z\"></path></svg></a>",
"target": [
".social > a[aria-label=\"Facebook\"][href=\"#\"]"
]
}
]
},
{
"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=\"modal-overlay\" id=\"modalOverlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalTitle\">",
"target": [
"#modalOverlay"
]
}
]
},
{
"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=\"modal-overlay\" id=\"modalOverlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalTitle\">",
"target": [
"#modalOverlay"
]
}
]
},
{
"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=\"#\" aria-label=\"Facebook\"><svg viewBox=\"0 0 24 24\"><path d=\"M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6c-.3-.04-1.3-.1-2.4-.1-2.4 0-4 1.45-4 4.1v2.3H7.5V13h2.8v8h3.2z\"></path></svg></a>",
"target": [
".social > a[aria-label=\"Facebook\"][href=\"#\"]"
]
}
]
},
{
"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=\"#\" aria-label=\"Facebook\"><svg viewBox=\"0 0 24 24\"><path d=\"M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6c-.3-.04-1.3-.1-2.4-.1-2.4 0-4 1.45-4 4.1v2.3H7.5V13h2.8v8h3.2z\"></path></svg></a>",
"target": [
".social > a[aria-label=\"Facebook\"][href=\"#\"]"
]
}
]
},
{
"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=\"regName\" placeholder=\"Jane Doe\" autocomplete=\"name\">",
"target": [
"#regName"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<html lang=\"en\" style=\"scroll-behavior: smooth;\">",
"target": [
"html"
]
}
]
},
{
"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 class=\"btn btn-outline register-btn\" data-event=\"Autumn Harvest Supper & Auction \u2014 Oct 18\">Register</button>",
"target": [
".event-row:nth-child(1) > .register-btn.btn-outline.btn"
]
}
]
},
{
"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 style=\"translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1;\">Every soul deserves <em>a sanctuary.</em></h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"section-title\">Rooted in tradition, <em>open to mystery.</em></h2>",
"target": [
".faith-copy > .section-title"
]
},
{
"html": "<h2 class=\"section-title\">Service times & <em>sacred rhythms</em></h2>",
"target": [
"#services > .container > .center[data-reveal=\"\"] > .section-title"
]
},
{
"html": "<h3>Celebration Worship</h3>",
"target": [
".svc-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Midweek Reflection</h3>",
"target": [
".svc-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Taiz\u00e9 Prayer Service</h3>",
"target": [
".svc-card:nth-child(3) > h3"
]
},
{
"html": "<h2 class=\"section-title\">Ministries for <em>every season of life</em></h2>",
"target": [
"#ministries > .container > .center[data-reveal=\"\"] > .section-title"
]
},
{
"html": "<h3>Music Ministry</h3>",
"target": [
".min-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Community Support</h3>",
"target": [
".min-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Children & Youth</h3>",
"target": [
".min-card:nth-child(3) > h3"
]
},
{
"html": "<h3>Study & Small Groups</h3>",
"target": [
".min-card:nth-child(4) > h3"
]
},
{
"html": "<h3>Care & Counseling</h3>",
"target": [
".min-card:nth-child(5) > h3"
]
},
{
"html": "<h3>Hospitality & Arts</h3>",
"target": [
".min-card:nth-child(6) > h3"
]
},
{
"html": "<h2 class=\"section-title\">Music Ministry: <em>where song becomes prayer</em></h2>",
"target": [
".spot-grid > div[data-reveal=\"\"]:nth-child(2) > .section-title"
]
},
{
"html": "<h2 class=\"section-title\">Faith with <em>its sleeves rolled up</em></h2>",
"target": [
".outreach-main > .section-title"
]
},
{
"html": "<h4><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1\"></path><circle cx=\"12\" cy=\"12\" r=\"4\"></circle></svg>Word for the Week</h4>",
"target": [
".verse-widget > h4"
]
},
{
"html": "<h4>",
"target": [
".widget[data-reveal=\"\"]:nth-child(2) > h4"
]
},
{
"html": "<h4><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"12\" cy=\"8\" r=\"4\"></circle><path d=\"M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5\"></path></svg>Member Story</h4>",
"target": [
".widget[data-reveal=\"\"]:nth-child(3) > h4"
]
},
{
"html": "<h2 class=\"section-title\">Upcoming <em>gatherings & events</em></h2>",
"target": [
"#events > .container > .center[data-reveal=\"\"] > .section-title"
]
},
{
"html": "<h3>Autumn Harvest Supper & Auction</h3>",
"target": [
".event-row:nth-child(1) > .event-info > h3"
]
},
{
"html": "<h3>Newcomers' Brunch</h3>",
"target": [
".event-row:nth-child(2) > .event-info > h3"
]
},
{
"html": "<h3>Contemplative Retreat Day</h3>",
"target": [
".event-row:nth-child(3) > .event-info > h3"
]
},
{
"html": "<h3>Interfaith Thanksgiving Service</h3>",
"target": [
".event-row:nth-child(4) > .event-info > h3"
]
},
{
"html": "<h2 class=\"section-title\">Stories from <em>our congregation</em></h2>",
"target": [
".center.container[data-reveal=\"\"] > .section-title"
]
},
{
"html": "<h2 class=\"section-title\">Questions, <em>answered honestly</em></h2>",
"target": [
"#faq > .container > .center[data-reveal=\"\"] > .section-title"
]
},
{
"html": "<h2 class=\"section-title\">Your generosity <em>becomes someone's miracle</em></h2>",
"target": [
"#give > .container > div[data-reveal=\"\"]:nth-child(1) > .section-title"
]
},
{
"html": "<h3>Make a Gift</h3>",
"target": [
".give-widget > h3"
]
},
{
"html": "<h2>The Weekly Light</h2>",
"target": [
".newsletter > .container > div > h2"
]
},
{
"html": "<h4>Explore</h4>",
"target": [
".foot-grid > div:nth-child(2) > h4"
]
},
{
"html": "<h4>Resources</h4>",
"target": [
".foot-grid > div:nth-child(3) > h4"
]
},
{
"html": "<h4>Visit Us</h4>",
"target": [
"div:nth-child(4) > h4"
]
},
{
"html": "<h3 id=\"modalTitle\">Event Registration</h3>",
"target": [
"#modalTitle"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" style=\"scroll-behavior: smooth;\">",
"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": "#cfc6b2",
"bgColor": "#262119",
"contrastRatio": 9.41,
"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 9.41"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div>412 Lantern Lane, Riverton, OH <span class=\"dot\">\u2022</span> <a href=\"tel:+15552149087\">(555) 214-9087</a> <span class=\"dot\">\u2022</span> Sundays 9:30 AM</div>",
"target": [
".topbar > .container > div: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\" style=\"scroll-behavior: smooth;\">",
"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": "modalTitle",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<h3 id=\"modalTitle\">Event Registration</h3>",
"target": [
"#modalTitle"
]
}
]
},
{
"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=\"number\" id=\"customAmt\" min=\"1\" placeholder=\"Custom amount\" aria-label=\"Custom donation amount\">",
"target": [
"#customAmt"
]
}
]
},
{
"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\" style=\"scroll-behavior: smooth;\">",
"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\" style=\"scroll-behavior: smooth;\">",
"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/262119/d4a94e/png?text=L&font=playfair%20display\" alt=\"The Lumen Fellowship logo\">",
"target": [
".brand > img[alt=\"The Lumen Fellowship logo\"]"
]
}
]
},
{
"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=\"number\" id=\"customAmt\" min=\"1\" placeholder=\"Custom amount\" aria-label=\"Custom donation amount\">",
"target": [
"#customAmt"
]
}
]
},
{
"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 href=\"tel:+15552149087\">(555) 214-9087</a>",
"target": [
"a[href=\"tel:+15552149087\"]"
]
}
]
},
{
"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=\"spot-list\">",
"target": [
".spot-list"
]
}
]
},
{
"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><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 6L9 17l-5-5\"></path></svg>Open auditions every September and January \u2014 no experience required for our New Voices ensemble.</li>",
"target": [
".spot-list > 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/262119/d4a94e/png?text=L&font=playfair%20display\" alt=\"The Lumen Fellowship logo\">",
"target": [
".brand > img[alt=\"The Lumen Fellowship logo\"]"
]
}
]
},
{
"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=\"regGuests\">Number of Attendees</label>",
"target": [
"label[for=\"regGuests\"]"
]
}
],
"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=\"regGuests\">\n <option value=\"1\">Just me</option>\n <option value=\"2\">2 people</option>\n <option value=\"3\">3 people</option>\n <option value=\"4\">4 people</option>\n <option value=\"5\">5+ people</option>\n </select>",
"target": [
"#regGuests"
]
}
]
},
{
"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 href=\"#\" aria-label=\"Facebook\"><svg viewBox=\"0 0 24 24\"><path d=\"M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6c-.3-.04-1.3-.1-2.4-.1-2.4 0-4 1.45-4 4.1v2.3H7.5V13h2.8v8h3.2z\"></path></svg></a>",
"target": [
".social > a[aria-label=\"Facebook\"][href=\"#\"]"
]
}
]
}
],
"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": "17.4pt (23.2px)",
"fontWeight": "bold",
"messageKey": "elmPartiallyObscured",
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"topbar\">",
"target": [
".topbar"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined because it's partially obscured by another element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"brand-name\">The Lumen Fellowship</span>",
"target": [
".brand > .brand-text > .brand-name"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined because it's partially obscured by another element"
}
]
}
],
"violations": [
{
"id": "link-in-text-block",
"impact": "serious",
"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": [
{
"any": [
{
"id": "link-in-text-block",
"data": {
"messageKey": "fgContrast",
"contrastRatio": 1.27,
"requiredContrastRatio": 3,
"nodeColor": "#e8dfc8",
"parentColor": "#cfc6b2"
},
"relatedNodes": [
{
"html": "<div>412 Lantern Lane, Riverton, OH <span class=\"dot\">\u2022</span> <a href=\"tel:+15552149087\">(555) 214-9087</a> <span class=\"dot\">\u2022</span> Sundays 9:30 AM</div>",
"target": [
".topbar > .container > div:nth-child(1)"
]
}
],
"impact": "serious",
"message": "The link has insufficient color contrast of 1.27:1 with the surrounding text. (Minimum contrast is 3:1, link text: #e8dfc8, surrounding text: #cfc6b2)"
},
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div>412 Lantern Lane, Riverton, OH <span class=\"dot\">\u2022</span> <a href=\"tel:+15552149087\">(555) 214-9087</a> <span class=\"dot\">\u2022</span> Sundays 9:30 AM</div>",
"target": [
".topbar > .container > div:nth-child(1)"
]
}
],
"impact": "serious",
"message": "The link has no styling (such as underline) to distinguish it from the surrounding text"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"tel:+15552149087\">(555) 214-9087</a>",
"target": [
"a[href=\"tel:+15552149087\"]"
],
"failureSummary": "Fix any of the following:\n The link has insufficient color contrast of 1.27:1 with the surrounding text. (Minimum contrast is 3:1, link text: #e8dfc8, surrounding text: #cfc6b2)\n The link has no styling (such as underline) to distinguish it from the surrounding text"
}
]
},
{
"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": "#b78d33",
"bgColor": "#f6f1e7",
"contrastRatio": 2.71,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Our Faith</span>",
"target": [
".faith-copy > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b78d33",
"bgColor": "#f6f1e7",
"contrastRatio": 2.71,
"fontSize": "37.2pt (49.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em>open to mystery.</em>",
"target": [
".faith-copy > .section-title > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b78d33",
"bgColor": "#f6f1e7",
"contrastRatio": 2.71,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#services\" class=\"btn btn-outline\" style=\"margin-top:.6rem\">Learn More About Us <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
"target": [
".btn-outline.btn[href$=\"#services\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b78d33",
"bgColor": "#f6f1e7",
"contrastRatio": 2.71,
"fontSize": "28.8pt (38.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 28.8pt (38.4px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>42</b>",
"target": [
".stat:nth-child(1) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 28.8pt (38.4px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b78d33",
"bgColor": "#f6f1e7",
"contrastRatio": 2.71,
"fontSize": "28.8pt (38.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 28.8pt (38.4px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>1,200+</b>",
"target": [
".stat:nth-child(2) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 28.8pt (38.4px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b78d33",
"bgColor": "#f6f1e7",
"contrastRatio": 2.71,
"fontSize": "28.8pt (38.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 28.8pt (38.4px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>18K</b>",
"target": [
".stat:nth-child(3) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 28.8pt (38.4px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b78d33",
"bgColor": "#f6f1e7",
"contrastRatio": 2.71,
"fontSize": "28.8pt (38.4px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 28.8pt (38.4px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>40+</b>",
"target": [
".stat:nth-child(4) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.71 (foreground color: #b78d33, background color: #f6f1e7, font size: 28.8pt (38.4px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b4882b",
"bgColor": "#fefcf6",
"contrastRatio": 3.15,
"fontSize": "10.0pt (13.28px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header id=\"siteHeader\" class=\"scrolled\">",
"target": [
"#siteHeader"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.15 (foreground color: #b4882b, background color: #fefcf6, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#faith\" class=\"active\">Our Faith</a>",
"target": [
".active[href$=\"#faith\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.15 (foreground color: #b4882b, background color: #fefcf6, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d4a94e",
"bgColor": "#fefcf6",
"contrastRatio": 2.13,
"fontSize": "7.4pt (9.92px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header id=\"siteHeader\" class=\"scrolled\">",
"target": [
"#siteHeader"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.13 (foreground color: #d4a94e, background color: #fefcf6, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"brand-tag\">Gathering in Grace \u00b7 Growing in Light</span>",
"target": [
".brand > .brand-text > .brand-tag"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.13 (foreground color: #d4a94e, background color: #fefcf6, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b4882b",
"bgColor": "#fefcf6",
"contrastRatio": 3.15,
"fontSize": "10.0pt (13.28px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header id=\"siteHeader\" class=\"scrolled\">",
"target": [
"#siteHeader"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.15 (foreground color: #b4882b, background color: #fefcf6, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#services\" class=\"active\">Service Times</a>",
"target": [
".active[href$=\"#services\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.15 (foreground color: #b4882b, background color: #fefcf6, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b68b30",
"bgColor": "#f6f1e7",
"contrastRatio": 2.77,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.77 (foreground color: #b68b30, background color: #f6f1e7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Life Together</span>",
"target": [
"#ministries > .container > .center[data-reveal=\"\"] > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.77 (foreground color: #b68b30, background color: #f6f1e7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b68b30",
"bgColor": "#f6f1e7",
"contrastRatio": 2.77,
"fontSize": "37.2pt (49.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.77 (foreground color: #b68b30, background color: #f6f1e7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em>every season of life</em>",
"target": [
"#ministries > .container > .center[data-reveal=\"\"] > .section-title > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.77 (foreground color: #b68b30, background color: #f6f1e7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b4882b",
"bgColor": "#fefcf6",
"contrastRatio": 3.15,
"fontSize": "10.0pt (13.28px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header id=\"siteHeader\" class=\"scrolled\">",
"target": [
"#siteHeader"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.15 (foreground color: #b4882b, background color: #fefcf6, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#ministries\" class=\"active\">Ministries</a>",
"target": [
".active[href$=\"#ministries\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.15 (foreground color: #b4882b, background color: #fefcf6, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a5a097",
"bgColor": "#faf6ed",
"contrastRatio": 2.41,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 3.8002px, 0px); opacity: 0.8944;\">",
"target": [
".min-card:nth-child(1)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.41 (foreground color: #a5a097, background color: #faf6ed, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3>Music Ministry</h3>",
"target": [
".min-card:nth-child(1) > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.41 (foreground color: #a5a097, background color: #faf6ed, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c0b9ad",
"bgColor": "#faf6ed",
"contrastRatio": 1.8,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 3.8002px, 0px); opacity: 0.8944;\">",
"target": [
".min-card:nth-child(1)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.8 (foreground color: #c0b9ad, background color: #faf6ed, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Chancel choir, handbell ensemble, and our contemporary band lead the congregation in song each week. All skill levels welcome.</p>",
"target": [
".min-card:nth-child(1) > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.8 (foreground color: #c0b9ad, background color: #faf6ed, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#dcc89e",
"bgColor": "#faf6ed",
"contrastRatio": 1.52,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 3.8002px, 0px); opacity: 0.8944;\">",
"target": [
".min-card:nth-child(1)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.52 (foreground color: #dcc89e, background color: #faf6ed, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#music\">Get Involved \u2192</a>",
"target": [
"a[href$=\"#music\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.52 (foreground color: #dcc89e, background color: #faf6ed, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a756d",
"bgColor": "#fbf8f1",
"contrastRatio": 4.31,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 0.852px, 0px); opacity: 0.9763;\">",
"target": [
".min-card:nth-child(2)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.31 (foreground color: #7a756d, background color: #fbf8f1, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3>Community Support</h3>",
"target": [
".min-card:nth-child(2) > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.31 (foreground color: #7a756d, background color: #fbf8f1, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a39c8f",
"bgColor": "#fbf8f1",
"contrastRatio": 2.56,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 0.852px, 0px); opacity: 0.9763;\">",
"target": [
".min-card:nth-child(2)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #a39c8f, background color: #fbf8f1, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Our outreach teams run the Riverton Food Pantry, shelter partnerships, and visitation ministry for the homebound and grieving.</p>",
"target": [
".min-card:nth-child(2) > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #a39c8f, background color: #fbf8f1, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cfb377",
"bgColor": "#fbf8f1",
"contrastRatio": 1.9,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 0.852px, 0px); opacity: 0.9763;\">",
"target": [
".min-card:nth-child(2)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.9 (foreground color: #cfb377, background color: #fbf8f1, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#outreach\">Get Involved \u2192</a>",
"target": [
".min-card:nth-child(2) > a[href$=\"#outreach\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.9 (foreground color: #cfb377, background color: #fbf8f1, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8d887f",
"bgColor": "#fbf7ef",
"contrastRatio": 3.29,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.9288px, 0px); opacity: 0.9464;\">",
"target": [
".min-card:nth-child(3)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.29 (foreground color: #8d887f, background color: #fbf7ef, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3>Children & Youth</h3>",
"target": [
".min-card:nth-child(3) > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.29 (foreground color: #8d887f, background color: #fbf7ef, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b0a99c",
"bgColor": "#fbf7ef",
"contrastRatio": 2.18,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.9288px, 0px); opacity: 0.9464;\">",
"target": [
".min-card:nth-child(3)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.18 (foreground color: #b0a99c, background color: #fbf7ef, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Sunday chapel, youth group, and confirmation classes give young people a safe place to ask big questions and build lasting friendships.</p>",
"target": [
".min-card:nth-child(3) > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.18 (foreground color: #b0a99c, background color: #fbf7ef, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d5bc88",
"bgColor": "#fbf7ef",
"contrastRatio": 1.72,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.9288px, 0px); opacity: 0.9464;\">",
"target": [
".min-card:nth-child(3)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.72 (foreground color: #d5bc88, background color: #fbf7ef, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\">Learn More \u2192</a>",
"target": [
".min-card:nth-child(3) > a[href$=\"#events\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.72 (foreground color: #d5bc88, background color: #fbf7ef, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a5a097",
"bgColor": "#faf6ed",
"contrastRatio": 2.41,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 3.8002px, 0px); opacity: 0.8944;\">",
"target": [
".min-card:nth-child(4)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.41 (foreground color: #a5a097, background color: #faf6ed, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3>Study & Small Groups</h3>",
"target": [
".min-card:nth-child(4) > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.41 (foreground color: #a5a097, background color: #faf6ed, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c0b9ad",
"bgColor": "#faf6ed",
"contrastRatio": 1.8,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 3.8002px, 0px); opacity: 0.8944;\">",
"target": [
".min-card:nth-child(4)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.8 (foreground color: #c0b9ad, background color: #faf6ed, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>More than forty groups meet weekly \u2014 scripture study, book circles, contemplative prayer, and interfaith dialogue. Find your people.</p>",
"target": [
".min-card:nth-child(4) > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.8 (foreground color: #c0b9ad, background color: #faf6ed, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#dcc89e",
"bgColor": "#faf6ed",
"contrastRatio": 1.52,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 3.8002px, 0px); opacity: 0.8944;\">",
"target": [
".min-card:nth-child(4)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.52 (foreground color: #dcc89e, background color: #faf6ed, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\">Learn More \u2192</a>",
"target": [
".min-card:nth-child(4) > a[href$=\"#events\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.52 (foreground color: #dcc89e, background color: #faf6ed, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a756d",
"bgColor": "#fbf8f1",
"contrastRatio": 4.31,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 0.852px, 0px); opacity: 0.9763;\">",
"target": [
".min-card:nth-child(5)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.31 (foreground color: #7a756d, background color: #fbf8f1, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3>Care & Counseling</h3>",
"target": [
".min-card:nth-child(5) > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.31 (foreground color: #7a756d, background color: #fbf8f1, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a39c8f",
"bgColor": "#fbf8f1",
"contrastRatio": 2.56,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 0.852px, 0px); opacity: 0.9763;\">",
"target": [
".min-card:nth-child(5)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.56 (foreground color: #a39c8f, background color: #fbf8f1, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Stephen Ministers, grief circles, and pastoral counseling offer confidential, compassionate care through life's hardest seasons.</p>",
"target": [
".min-card:nth-child(5) > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.56 (foreground color: #a39c8f, background color: #fbf8f1, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#cfb377",
"bgColor": "#fbf8f1",
"contrastRatio": 1.9,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 0.852px, 0px); opacity: 0.9763;\">",
"target": [
".min-card:nth-child(5)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.9 (foreground color: #cfb377, background color: #fbf8f1, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#outreach\">Learn More \u2192</a>",
"target": [
".min-card:nth-child(5) > a[href$=\"#outreach\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.9 (foreground color: #cfb377, background color: #fbf8f1, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#8d887f",
"bgColor": "#fbf7ef",
"contrastRatio": 3.29,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.9288px, 0px); opacity: 0.9464;\">",
"target": [
".min-card:nth-child(6)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.29 (foreground color: #8d887f, background color: #fbf7ef, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3>Hospitality & Arts</h3>",
"target": [
".min-card:nth-child(6) > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.29 (foreground color: #8d887f, background color: #fbf7ef, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b0a99c",
"bgColor": "#fbf7ef",
"contrastRatio": 2.18,
"fontSize": "11.0pt (14.72px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.9288px, 0px); opacity: 0.9464;\">",
"target": [
".min-card:nth-child(6)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.18 (foreground color: #b0a99c, background color: #fbf7ef, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Greeters, bakers, gardeners, and gallery volunteers make our campus a warm, beautiful threshold between the everyday and the sacred.</p>",
"target": [
".min-card:nth-child(6) > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.18 (foreground color: #b0a99c, background color: #fbf7ef, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d5bc88",
"bgColor": "#fbf7ef",
"contrastRatio": 1.72,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"min-card\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.9288px, 0px); opacity: 0.9464;\">",
"target": [
".min-card:nth-child(6)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.72 (foreground color: #d5bc88, background color: #fbf7ef, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#outreach\">Get Involved \u2192</a>",
"target": [
".min-card:nth-child(6) > a[href$=\"#outreach\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.72 (foreground color: #d5bc88, background color: #fbf7ef, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9c496",
"bgColor": "#f6f1e7",
"contrastRatio": 1.51,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.51 (foreground color: #d9c496, background color: #f6f1e7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Community Support & Outreach</span>",
"target": [
".outreach-main > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.51 (foreground color: #d9c496, background color: #f6f1e7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9c978e",
"bgColor": "#f6f1e7",
"contrastRatio": 2.57,
"fontSize": "37.2pt (49.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #9c978e, background color: #f6f1e7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h2 class=\"section-title\">Faith with <em>its sleeves rolled up</em></h2>",
"target": [
".outreach-main > .section-title"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #9c978e, background color: #f6f1e7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d9c496",
"bgColor": "#f6f1e7",
"contrastRatio": 1.51,
"fontSize": "37.2pt (49.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.51 (foreground color: #d9c496, background color: #f6f1e7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em>its sleeves rolled up</em>",
"target": [
".outreach-main > .section-title > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.51 (foreground color: #d9c496, background color: #f6f1e7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bab3a6",
"bgColor": "#f6f1e7",
"contrastRatio": 1.84,
"fontSize": "13.0pt (17.28px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.84 (foreground color: #bab3a6, background color: #f6f1e7, font size: 13.0pt (17.28px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lead\">We believe worship that never leaves the sanctuary is only half-finished. Our outreach ministries carry the light of the Fellowship into the streets, shelters, and kitchen tables of Riverton.</p>",
"target": [
".outreach-main > .lead"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.84 (foreground color: #bab3a6, background color: #f6f1e7, font size: 13.0pt (17.28px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bab3a6",
"bgColor": "#f6f1e7",
"contrastRatio": 1.84,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.84 (foreground color: #bab3a6, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>",
"target": [
".outreach-main > p:nth-child(5)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.84 (foreground color: #bab3a6, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bab3a6",
"bgColor": "#f6f1e7",
"contrastRatio": 1.84,
"fontSize": "12.0pt (16px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.84 (foreground color: #bab3a6, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>You don't need to be a member to serve \u2014 only willing. Whether you have an hour a month or a day a week, there is a place for your hands here.</p>",
"target": [
"p:nth-child(6)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.84 (foreground color: #bab3a6, background color: #f6f1e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9c978e",
"bgColor": "#faf6ee",
"contrastRatio": 2.69,
"fontSize": "13.0pt (17.28px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"program\"><b>Riverton Food Pantry</b><span>Tue & Fri, 9 AM \u2013 1 PM \u00b7 sorting, stocking, greeting</span></div>",
"target": [
".program:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.69 (foreground color: #9c978e, background color: #faf6ee, font size: 13.0pt (17.28px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>Riverton Food Pantry</b>",
"target": [
".program:nth-child(1) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.69 (foreground color: #9c978e, background color: #faf6ee, font size: 13.0pt (17.28px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bab3a6",
"bgColor": "#faf6ee",
"contrastRatio": 1.93,
"fontSize": "9.8pt (13.12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"program\"><b>Riverton Food Pantry</b><span>Tue & Fri, 9 AM \u2013 1 PM \u00b7 sorting, stocking, greeting</span></div>",
"target": [
".program:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.93 (foreground color: #bab3a6, background color: #faf6ee, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Tue & Fri, 9 AM \u2013 1 PM \u00b7 sorting, stocking, greeting</span>",
"target": [
".program:nth-child(1) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.93 (foreground color: #bab3a6, background color: #faf6ee, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9c978e",
"bgColor": "#faf6ee",
"contrastRatio": 2.69,
"fontSize": "13.0pt (17.28px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"program\"><b>Harbor Street Shelter</b><span>First Saturdays \u00b7 meal prep & service teams</span></div>",
"target": [
".program:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.69 (foreground color: #9c978e, background color: #faf6ee, font size: 13.0pt (17.28px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>Harbor Street Shelter</b>",
"target": [
".program:nth-child(2) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.69 (foreground color: #9c978e, background color: #faf6ee, font size: 13.0pt (17.28px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bab3a6",
"bgColor": "#faf6ee",
"contrastRatio": 1.93,
"fontSize": "9.8pt (13.12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"program\"><b>Harbor Street Shelter</b><span>First Saturdays \u00b7 meal prep & service teams</span></div>",
"target": [
".program:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.93 (foreground color: #bab3a6, background color: #faf6ee, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>First Saturdays \u00b7 meal prep & service teams</span>",
"target": [
".program:nth-child(2) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.93 (foreground color: #bab3a6, background color: #faf6ee, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9c978e",
"bgColor": "#faf6ee",
"contrastRatio": 2.69,
"fontSize": "13.0pt (17.28px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"program\"><b>Refugee Welcome Circle</b><span>Ongoing \u00b7 housing, mentoring, language support</span></div>",
"target": [
".program:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.69 (foreground color: #9c978e, background color: #faf6ee, font size: 13.0pt (17.28px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>Refugee Welcome Circle</b>",
"target": [
".program:nth-child(3) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.69 (foreground color: #9c978e, background color: #faf6ee, font size: 13.0pt (17.28px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bab3a6",
"bgColor": "#faf6ee",
"contrastRatio": 1.93,
"fontSize": "9.8pt (13.12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"program\"><b>Refugee Welcome Circle</b><span>Ongoing \u00b7 housing, mentoring, language support</span></div>",
"target": [
".program:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.93 (foreground color: #bab3a6, background color: #faf6ee, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Ongoing \u00b7 housing, mentoring, language support</span>",
"target": [
".program:nth-child(3) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.93 (foreground color: #bab3a6, background color: #faf6ee, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9c978e",
"bgColor": "#faf6ee",
"contrastRatio": 2.69,
"fontSize": "13.0pt (17.28px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"program\"><b>Visitation Team</b><span>Weekly \u00b7 companionship for the homebound</span></div>",
"target": [
".program:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.69 (foreground color: #9c978e, background color: #faf6ee, font size: 13.0pt (17.28px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>Visitation Team</b>",
"target": [
".program:nth-child(4) > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.69 (foreground color: #9c978e, background color: #faf6ee, font size: 13.0pt (17.28px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#bab3a6",
"bgColor": "#faf6ee",
"contrastRatio": 1.93,
"fontSize": "9.8pt (13.12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"program\"><b>Visitation Team</b><span>Weekly \u00b7 companionship for the homebound</span></div>",
"target": [
".program:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.93 (foreground color: #bab3a6, background color: #faf6ee, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Weekly \u00b7 companionship for the homebound</span>",
"target": [
".program:nth-child(4) > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.93 (foreground color: #bab3a6, background color: #faf6ee, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f6f1e7",
"bgColor": "#9c978e",
"contrastRatio": 2.57,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#events\" class=\"btn btn-dark\">Get Involved <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
"target": [
".btn-dark"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #f6f1e7, background color: #9c978e, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\" class=\"btn btn-dark\">Get Involved <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M13 6l6 6-6 6\"></path></svg></a>",
"target": [
".btn-dark"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #f6f1e7, background color: #9c978e, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c59278",
"bgColor": "#fcf9f1",
"contrastRatio": 2.57,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 13.2497px, 0px); opacity: 0.632;\">",
"target": [
".widget[data-reveal=\"\"]:nth-child(2)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #c59278, background color: #fcf9f1, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\">Sign Up</a>",
"target": [
"li:nth-child(1) > a[href$=\"#events\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #c59278, background color: #fcf9f1, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c59278",
"bgColor": "#fcf9f1",
"contrastRatio": 2.57,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 13.2497px, 0px); opacity: 0.632;\">",
"target": [
".widget[data-reveal=\"\"]:nth-child(2)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #c59278, background color: #fcf9f1, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\">Sign Up</a>",
"target": [
"li:nth-child(2) > a[href$=\"#events\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #c59278, background color: #fcf9f1, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c59278",
"bgColor": "#fcf9f1",
"contrastRatio": 2.57,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 13.2497px, 0px); opacity: 0.632;\">",
"target": [
".widget[data-reveal=\"\"]:nth-child(2)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #c59278, background color: #fcf9f1, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\">Sign Up</a>",
"target": [
"li:nth-child(3) > a[href$=\"#events\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #c59278, background color: #fcf9f1, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c59278",
"bgColor": "#fcf9f1",
"contrastRatio": 2.57,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 13.2497px, 0px); opacity: 0.632;\">",
"target": [
".widget[data-reveal=\"\"]:nth-child(2)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #c59278, background color: #fcf9f1, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\">Sign Up</a>",
"target": [
"li:nth-child(4) > a[href$=\"#events\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #c59278, background color: #fcf9f1, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c59278",
"bgColor": "#fcf9f1",
"contrastRatio": 2.57,
"fontSize": "8.4pt (11.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 13.2497px, 0px); opacity: 0.632;\">",
"target": [
".widget[data-reveal=\"\"]:nth-child(2)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.57 (foreground color: #c59278, background color: #fcf9f1, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\">Sign Up</a>",
"target": [
"li:nth-child(5) > a[href$=\"#events\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.57 (foreground color: #c59278, background color: #fcf9f1, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#98938a",
"bgColor": "#faf6ee",
"contrastRatio": 2.83,
"fontSize": "15.0pt (20px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 19.6923px, 0px); opacity: 0.453;\">",
"target": [
".widget[data-reveal=\"\"]:nth-child(3)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.83 (foreground color: #98938a, background color: #faf6ee, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h4><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><circle cx=\"12\" cy=\"8\" r=\"4\"></circle><path d=\"M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5\"></path></svg>Member Story</h4>",
"target": [
".widget[data-reveal=\"\"]:nth-child(3) > h4"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.83 (foreground color: #98938a, background color: #faf6ee, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b7b0a4",
"bgColor": "#faf6ee",
"contrastRatio": 1.99,
"fontSize": "10.2pt (13.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 19.6923px, 0px); opacity: 0.453;\">",
"target": [
".widget[data-reveal=\"\"]:nth-child(3)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.99 (foreground color: #b7b0a4, background color: #faf6ee, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>\"I came for the food pantry shift. I stayed for the family I found.\"<b>Ruth E. \u00b7 Volunteer since 2016</b></p>",
"target": [
".member-mini > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.99 (foreground color: #b7b0a4, background color: #faf6ee, font size: 10.2pt (13.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#98938a",
"bgColor": "#faf6ee",
"contrastRatio": 2.83,
"fontSize": "12.0pt (16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"widget\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 19.6923px, 0px); opacity: 0.453;\">",
"target": [
".widget[data-reveal=\"\"]:nth-child(3)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.83 (foreground color: #98938a, background color: #faf6ee, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>Ruth E. \u00b7 Volunteer since 2016</b>",
"target": [
"p > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.83 (foreground color: #98938a, background color: #faf6ee, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f1e7d0",
"bgColor": "#fffdf7",
"contrastRatio": 1.2,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.2 (foreground color: #f1e7d0, background color: #fffdf7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Mark Your Calendar</span>",
"target": [
"#events > .container > .center[data-reveal=\"\"] > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.2 (foreground color: #f1e7d0, background color: #fffdf7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d6d3cd",
"bgColor": "#fffdf7",
"contrastRatio": 1.46,
"fontSize": "37.2pt (49.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.46 (foreground color: #d6d3cd, background color: #fffdf7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h2 class=\"section-title\">Upcoming <em>gatherings & events</em></h2>",
"target": [
"#events > .container > .center[data-reveal=\"\"] > .section-title"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.46 (foreground color: #d6d3cd, background color: #fffdf7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#f1e7d0",
"bgColor": "#fffdf7",
"contrastRatio": 1.2,
"fontSize": "37.2pt (49.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.2 (foreground color: #f1e7d0, background color: #fffdf7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em>gatherings & events</em>",
"target": [
"#events > .container > .center[data-reveal=\"\"] > .section-title > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.2 (foreground color: #f1e7d0, background color: #fffdf7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e3e0d8",
"bgColor": "#fffdf7",
"contrastRatio": 1.29,
"fontSize": "13.0pt (17.28px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.29 (foreground color: #e3e0d8, background color: #fffdf7, font size: 13.0pt (17.28px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"lead\">From harvest suppers to quiet retreat days, there is always a door open at the Fellowship. Reserve your place below \u2014 registration takes less than a minute.</p>",
"target": [
"#events > .container > .center[data-reveal=\"\"] > .lead"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.29 (foreground color: #e3e0d8, background color: #fffdf7, font size: 13.0pt (17.28px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b4882b",
"bgColor": "#fefcf6",
"contrastRatio": 3.15,
"fontSize": "10.0pt (13.28px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header id=\"siteHeader\" class=\"scrolled\">",
"target": [
"#siteHeader"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.15 (foreground color: #b4882b, background color: #fefcf6, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\" class=\"active\">Events</a>",
"target": [
".active[href$=\"#events\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.15 (foreground color: #b4882b, background color: #fefcf6, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ceb173",
"bgColor": "#f9f5ed",
"contrastRatio": 1.9,
"fontSize": "30.0pt (40px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.1202px, 0px); opacity: 0.9689;\">",
"target": [
".event-row:nth-child(1)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.9 (foreground color: #ceb173, background color: #f9f5ed, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>18</b>",
"target": [
".event-row:nth-child(1) > .event-date > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.9 (foreground color: #ceb173, background color: #f9f5ed, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9f998c",
"bgColor": "#f9f5ed",
"contrastRatio": 2.6,
"fontSize": "8.6pt (11.52px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.1202px, 0px); opacity: 0.9689;\">",
"target": [
".event-row:nth-child(1)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.6 (foreground color: #9f998c, background color: #f9f5ed, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Oct</span>",
"target": [
".event-row:nth-child(1) > .event-date > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.6 (foreground color: #9f998c, background color: #f9f5ed, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9f998c",
"bgColor": "#f9f5ed",
"contrastRatio": 2.6,
"fontSize": "10.6pt (14.08px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.1202px, 0px); opacity: 0.9689;\">",
"target": [
".event-row:nth-child(1)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.6 (foreground color: #9f998c, background color: #f9f5ed, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Our beloved annual feast: local food, live music from the Ember Band, and a silent auction benefiting the Refugee Welcome Circle.</p>",
"target": [
".event-row:nth-child(1) > .event-info > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.6 (foreground color: #9f998c, background color: #f9f5ed, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c7947b",
"bgColor": "#f9f5ed",
"contrastRatio": 2.42,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.1202px, 0px); opacity: 0.9689;\">",
"target": [
".event-row:nth-child(1)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.42 (foreground color: #c7947b, background color: #f9f5ed, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M12 7v5l3 3\"></path></svg>6:00 PM</span>",
"target": [
".event-row:nth-child(1) > .event-info > .event-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.42 (foreground color: #c7947b, background color: #f9f5ed, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c7947b",
"bgColor": "#f9f5ed",
"contrastRatio": 2.42,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.1202px, 0px); opacity: 0.9689;\">",
"target": [
".event-row:nth-child(1)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.42 (foreground color: #c7947b, background color: #f9f5ed, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 21s-7-5.5-7-11a7 7 0 0114 0c0 5.5-7 11-7 11z\"></path><circle cx=\"12\" cy=\"10\" r=\"2.5\"></circle></svg>Fellowship Hall</span>",
"target": [
".event-row:nth-child(1) > .event-info > .event-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.42 (foreground color: #c7947b, background color: #f9f5ed, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ceb173",
"bgColor": "#f5f4f2",
"contrastRatio": 1.88,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-outline register-btn\" data-event=\"Autumn Harvest Supper & Auction \u2014 Oct 18\">Register</button>",
"target": [
".event-row:nth-child(1) > .register-btn.btn-outline.btn"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.88 (foreground color: #ceb173, background color: #f5f4f2, 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-outline register-btn\" data-event=\"Autumn Harvest Supper & Auction \u2014 Oct 18\">Register</button>",
"target": [
".event-row:nth-child(1) > .register-btn.btn-outline.btn"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.88 (foreground color: #ceb173, background color: #f5f4f2, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d6bd88",
"bgColor": "#faf6ee",
"contrastRatio": 1.69,
"fontSize": "30.0pt (40px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 2.4143px, 0px); opacity: 0.9329;\">",
"target": [
".event-row:nth-child(2)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.69 (foreground color: #d6bd88, background color: #faf6ee, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>26</b>",
"target": [
".event-row:nth-child(2) > .event-date > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.69 (foreground color: #d6bd88, background color: #faf6ee, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#afa99d",
"bgColor": "#faf6ee",
"contrastRatio": 2.16,
"fontSize": "8.6pt (11.52px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 2.4143px, 0px); opacity: 0.9329;\">",
"target": [
".event-row:nth-child(2)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.16 (foreground color: #afa99d, background color: #faf6ee, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Oct</span>",
"target": [
".event-row:nth-child(2) > .event-date > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.16 (foreground color: #afa99d, background color: #faf6ee, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#89857e",
"bgColor": "#faf6ee",
"contrastRatio": 3.4,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 2.4143px, 0px); opacity: 0.9329;\">",
"target": [
".event-row:nth-child(2)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.4 (foreground color: #89857e, background color: #faf6ee, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3>Newcomers' Brunch</h3>",
"target": [
".event-row:nth-child(2) > .event-info > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.4 (foreground color: #89857e, background color: #faf6ee, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#afa99d",
"bgColor": "#faf6ee",
"contrastRatio": 2.16,
"fontSize": "10.6pt (14.08px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 2.4143px, 0px); opacity: 0.9329;\">",
"target": [
".event-row:nth-child(2)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.16 (foreground color: #afa99d, background color: #faf6ee, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>New to the Fellowship? Join our pastors and welcome team for coffee, conversation, and an honest look at life in this community.</p>",
"target": [
".event-row:nth-child(2) > .event-info > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.16 (foreground color: #afa99d, background color: #faf6ee, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d0a58f",
"bgColor": "#faf6ee",
"contrastRatio": 2.05,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 2.4143px, 0px); opacity: 0.9329;\">",
"target": [
".event-row:nth-child(2)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.05 (foreground color: #d0a58f, background color: #faf6ee, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M12 7v5l3 3\"></path></svg>11:00 AM</span>",
"target": [
".event-row:nth-child(2) > .event-info > .event-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.05 (foreground color: #d0a58f, background color: #faf6ee, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d0a58f",
"bgColor": "#faf6ee",
"contrastRatio": 2.05,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 2.4143px, 0px); opacity: 0.9329;\">",
"target": [
".event-row:nth-child(2)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.05 (foreground color: #d0a58f, background color: #faf6ee, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 21s-7-5.5-7-11a7 7 0 0114 0c0 5.5-7 11-7 11z\"></path><circle cx=\"12\" cy=\"10\" r=\"2.5\"></circle></svg>Garden Room</span>",
"target": [
".event-row:nth-child(2) > .event-info > .event-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.05 (foreground color: #d0a58f, background color: #faf6ee, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#d6bd88",
"bgColor": "#f6f5f3",
"contrastRatio": 1.67,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-outline register-btn\" data-event=\"Newcomers' Brunch \u2014 Oct 26\">Register</button>",
"target": [
"button[data-event=\"Newcomers' Brunch \u2014 Oct 26\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.67 (foreground color: #d6bd88, background color: #f6f5f3, 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-outline register-btn\" data-event=\"Newcomers' Brunch \u2014 Oct 26\">Register</button>",
"target": [
"button[data-event=\"Newcomers' Brunch \u2014 Oct 26\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.67 (foreground color: #d6bd88, background color: #f6f5f3, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#dfcca1",
"bgColor": "#fbf8f0",
"contrastRatio": 1.48,
"fontSize": "30.0pt (40px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 4.5969px, 0px); opacity: 0.8723;\">",
"target": [
".event-row:nth-child(3)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.48 (foreground color: #dfcca1, background color: #fbf8f0, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>08</b>",
"target": [
".event-row:nth-child(3) > .event-date > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.48 (foreground color: #dfcca1, background color: #fbf8f0, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c0bcb1",
"bgColor": "#fbf8f0",
"contrastRatio": 1.78,
"fontSize": "8.6pt (11.52px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 4.5969px, 0px); opacity: 0.8723;\">",
"target": [
".event-row:nth-child(3)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.78 (foreground color: #c0bcb1, background color: #fbf8f0, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Nov</span>",
"target": [
".event-row:nth-child(3) > .event-date > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.78 (foreground color: #c0bcb1, background color: #fbf8f0, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a3a099",
"bgColor": "#fbf8f0",
"contrastRatio": 2.45,
"fontSize": "16.2pt (21.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 4.5969px, 0px); opacity: 0.8723;\">",
"target": [
".event-row:nth-child(3)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.45 (foreground color: #a3a099, background color: #fbf8f0, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h3>Contemplative Retreat Day</h3>",
"target": [
".event-row:nth-child(3) > .event-info > h3"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.45 (foreground color: #a3a099, background color: #fbf8f0, font size: 16.2pt (21.6px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c0bcb1",
"bgColor": "#fbf8f0",
"contrastRatio": 1.78,
"fontSize": "10.6pt (14.08px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 4.5969px, 0px); opacity: 0.8723;\">",
"target": [
".event-row:nth-child(3)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.78 (foreground color: #c0bcb1, background color: #fbf8f0, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>A guided day of silence, walking meditation, and journaling led by Rev. Amara Osei. Lunch provided; bring a journal and an open heart.</p>",
"target": [
".event-row:nth-child(3) > .event-info > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.78 (foreground color: #c0bcb1, background color: #fbf8f0, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#dab9a6",
"bgColor": "#fbf8f0",
"contrastRatio": 1.72,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 4.5969px, 0px); opacity: 0.8723;\">",
"target": [
".event-row:nth-child(3)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.72 (foreground color: #dab9a6, background color: #fbf8f0, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M12 7v5l3 3\"></path></svg>9:00 AM \u2013 4:00 PM</span>",
"target": [
".event-row:nth-child(3) > .event-info > .event-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.72 (foreground color: #dab9a6, background color: #fbf8f0, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#dab9a6",
"bgColor": "#fbf8f0",
"contrastRatio": 1.72,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 4.5969px, 0px); opacity: 0.8723;\">",
"target": [
".event-row:nth-child(3)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.72 (foreground color: #dab9a6, background color: #fbf8f0, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 21s-7-5.5-7-11a7 7 0 0114 0c0 5.5-7 11-7 11z\"></path><circle cx=\"12\" cy=\"10\" r=\"2.5\"></circle></svg>Willowbrook Retreat House</span>",
"target": [
".event-row:nth-child(3) > .event-info > .event-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.72 (foreground color: #dab9a6, background color: #fbf8f0, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#dfcca1",
"bgColor": "#f8f7f4",
"contrastRatio": 1.47,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-outline register-btn\" data-event=\"Contemplative Retreat Day \u2014 Nov 8\">Register</button>",
"target": [
".event-row:nth-child(3) > .register-btn.btn-outline.btn"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.47 (foreground color: #dfcca1, background color: #f8f7f4, 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-outline register-btn\" data-event=\"Contemplative Retreat Day \u2014 Nov 8\">Register</button>",
"target": [
".event-row:nth-child(3) > .register-btn.btn-outline.btn"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.47 (foreground color: #dfcca1, background color: #f8f7f4, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ceb173",
"bgColor": "#f9f5ed",
"contrastRatio": 1.9,
"fontSize": "30.0pt (40px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.1202px, 0px); opacity: 0.9689;\">",
"target": [
".event-row:nth-child(4)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.9 (foreground color: #ceb173, background color: #f9f5ed, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<b>25</b>",
"target": [
".event-row:nth-child(4) > .event-date > b"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.9 (foreground color: #ceb173, background color: #f9f5ed, font size: 30.0pt (40px), font weight: bold). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9f998c",
"bgColor": "#f9f5ed",
"contrastRatio": 2.6,
"fontSize": "8.6pt (11.52px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.1202px, 0px); opacity: 0.9689;\">",
"target": [
".event-row:nth-child(4)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.6 (foreground color: #9f998c, background color: #f9f5ed, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Nov</span>",
"target": [
".event-row:nth-child(4) > .event-date > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.6 (foreground color: #9f998c, background color: #f9f5ed, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#9f998c",
"bgColor": "#f9f5ed",
"contrastRatio": 2.6,
"fontSize": "10.6pt (14.08px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.1202px, 0px); opacity: 0.9689;\">",
"target": [
".event-row:nth-child(4)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.6 (foreground color: #9f998c, background color: #f9f5ed, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>Congregations from across Riverton gather for an evening of shared gratitude, music, and prayer across traditions. All are welcome.</p>",
"target": [
".event-row:nth-child(4) > .event-info > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.6 (foreground color: #9f998c, background color: #f9f5ed, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c7947b",
"bgColor": "#f9f5ed",
"contrastRatio": 2.42,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.1202px, 0px); opacity: 0.9689;\">",
"target": [
".event-row:nth-child(4)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.42 (foreground color: #c7947b, background color: #f9f5ed, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"9\"></circle><path d=\"M12 7v5l3 3\"></path></svg>7:00 PM</span>",
"target": [
".event-row:nth-child(4) > .event-info > .event-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.42 (foreground color: #c7947b, background color: #f9f5ed, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#c7947b",
"bgColor": "#f9f5ed",
"contrastRatio": 2.42,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"event-row\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 1.1202px, 0px); opacity: 0.9689;\">",
"target": [
".event-row:nth-child(4)"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.42 (foreground color: #c7947b, background color: #f9f5ed, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 21s-7-5.5-7-11a7 7 0 0114 0c0 5.5-7 11-7 11z\"></path><circle cx=\"12\" cy=\"10\" r=\"2.5\"></circle></svg>Main Sanctuary</span>",
"target": [
".event-row:nth-child(4) > .event-info > .event-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.42 (foreground color: #c7947b, background color: #f9f5ed, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ceb173",
"bgColor": "#f5f4f2",
"contrastRatio": 1.88,
"fontSize": "11.4pt (15.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button class=\"btn btn-outline register-btn\" data-event=\"Interfaith Thanksgiving Service \u2014 Nov 25\">Register</button>",
"target": [
".event-row:nth-child(4) > .register-btn.btn-outline.btn"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.88 (foreground color: #ceb173, background color: #f5f4f2, 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-outline register-btn\" data-event=\"Interfaith Thanksgiving Service \u2014 Nov 25\">Register</button>",
"target": [
".event-row:nth-child(4) > .register-btn.btn-outline.btn"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.88 (foreground color: #ceb173, background color: #f5f4f2, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b4882b",
"bgColor": "#fffdf7",
"contrastRatio": 3.17,
"fontSize": "10.0pt (13.28px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<header id=\"siteHeader\" class=\"scrolled\">",
"target": [
"#siteHeader"
]
},
{
"html": "<section class=\"events\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.17 (foreground color: #b4882b, background color: #fffdf7, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#stories\" class=\"active\">Stories</a>",
"target": [
".active[href$=\"#stories\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.17 (foreground color: #b4882b, background color: #fffdf7, font size: 10.0pt (13.28px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b68c32",
"bgColor": "#f6f1e7",
"contrastRatio": 2.74,
"fontSize": "9.4pt (12.48px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.74 (foreground color: #b68c32, background color: #f6f1e7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Before You Visit</span>",
"target": [
"#faq > .container > .center[data-reveal=\"\"] > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.74 (foreground color: #b68c32, background color: #f6f1e7, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#b68c32",
"bgColor": "#f6f1e7",
"contrastRatio": 2.74,
"fontSize": "37.2pt (49.6px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.74 (foreground color: #b68c32, background color: #f6f1e7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<em>answered honestly</em>",
"target": [
"#faq > .container > .center[data-reveal=\"\"] > .section-title > em"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.74 (foreground color: #b68c32, background color: #f6f1e7, font size: 37.2pt (49.6px), font weight: normal). Expected contrast ratio of 3:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a7a298",
"bgColor": "#f9f6ed",
"contrastRatio": 2.35,
"fontSize": "14.4pt (19.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 22.2507px, 0px); opacity: 0.3819;\">",
"target": [
".faq-item[data-reveal=\"\"]:nth-child(1)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.35 (foreground color: #a7a298, background color: #f9f6ed, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"faq-q\" aria-expanded=\"false\">What should I wear to a service? <span class=\"plus\">+</span></button>",
"target": [
".faq-item[data-reveal=\"\"]:nth-child(1) > .faq-q"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.35 (foreground color: #a7a298, background color: #f9f6ed, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e2ddd4",
"bgColor": "#f7f2e9",
"contrastRatio": 1.21,
"fontSize": "14.4pt (19.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 32.607px, 0px); opacity: 0.0943;\">",
"target": [
".faq-item[data-reveal=\"\"]:nth-child(2)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.21 (foreground color: #e2ddd4, background color: #f7f2e9, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"faq-q\" aria-expanded=\"false\">Do I need to be a member to take communion? <span class=\"plus\">+</span></button>",
"target": [
".faq-item[data-reveal=\"\"]:nth-child(2) > .faq-q"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.21 (foreground color: #e2ddd4, background color: #f7f2e9, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a756c",
"bgColor": "#fbf8f1",
"contrastRatio": 4.31,
"fontSize": "14.4pt (19.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 14.5824px, 0px); opacity: 0.5949;\">",
"target": [
".faq-item[data-reveal=\"\"]:nth-child(3)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.31 (foreground color: #7a756c, background color: #fbf8f1, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"faq-q\" aria-expanded=\"false\">Is there childcare during worship? <span class=\"plus\">+</span></button>",
"target": [
".faq-item[data-reveal=\"\"]:nth-child(3) > .faq-q"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.31 (foreground color: #7a756c, background color: #fbf8f1, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#a7a298",
"bgColor": "#f9f6ed",
"contrastRatio": 2.35,
"fontSize": "14.4pt (19.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 22.2507px, 0px); opacity: 0.3819;\">",
"target": [
".faq-item[data-reveal=\"\"]:nth-child(4)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.35 (foreground color: #a7a298, background color: #f9f6ed, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"faq-q\" aria-expanded=\"false\">How do I become a member? <span class=\"plus\">+</span></button>",
"target": [
".faq-item[data-reveal=\"\"]:nth-child(4) > .faq-q"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.35 (foreground color: #a7a298, background color: #f9f6ed, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#e2ddd4",
"bgColor": "#f7f2e9",
"contrastRatio": 1.21,
"fontSize": "14.4pt (19.2px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"faq-item\" data-reveal=\"\" style=\"translate: none; rotate: none; scale: none; transform: translate3d(0px, 32.607px, 0px); opacity: 0.0943;\">",
"target": [
".faq-item[data-reveal=\"\"]:nth-child(5)"
]
},
{
"html": "<body style=\"\">",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.21 (foreground color: #e2ddd4, background color: #f7f2e9, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"faq-q\" aria-expanded=\"false\">Can I watch services online? <span class=\"plus\">+</span></button>",
"target": [
".faq-item[data-reveal=\"\"]:nth-child(5) > .faq-q"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.21 (foreground color: #e2ddd4, background color: #f7f2e9, font size: 14.4pt (19.2px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "target-size",
"impact": "serious",
"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-size",
"data": {
"minSize": 24,
"width": 9,
"height": 9
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (9px by 9px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 11.6,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<button class=\"dot\" aria-label=\"Go to story 4\"></button>",
"target": [
"button[aria-label=\"Go to story 4\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 11.6px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"dot\" aria-label=\"Go to story 3\"></button>",
"target": [
"button[aria-label=\"Go to story 3\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (9px by 9px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 11.6px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 9,
"height": 9
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (9px by 9px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 11.6,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<button class=\"dot\" aria-label=\"Go to story 3\"></button>",
"target": [
"button[aria-label=\"Go to story 3\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 11.6px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"dot\" aria-label=\"Go to story 4\"></button>",
"target": [
"button[aria-label=\"Go to story 4\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (9px by 9px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 11.6px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 9,
"height": 9
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (9px by 9px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 11.6,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<button class=\"dot\" aria-label=\"Go to story 2\"></button>",
"target": [
"button[aria-label=\"Go to story 2\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 11.6px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"dot\" aria-label=\"Go to story 1\"></button>",
"target": [
"button[aria-label=\"Go to story 1\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (9px by 9px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 11.6px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 9,
"height": 9
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (9px by 9px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 11.6,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<button class=\"dot\" aria-label=\"Go to story 1\"></button>",
"target": [
"button[aria-label=\"Go to story 1\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 11.6px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button class=\"dot\" aria-label=\"Go to story 2\"></button>",
"target": [
"button[aria-label=\"Go to story 2\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (9px by 9px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 11.6px instead of at least 24px."
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 9451
},
{
"y": 576,
"height": 9451
},
{
"y": 1152,
"height": 9451
},
{
"y": 1728,
"height": 9819
},
{
"y": 2304,
"height": 9819
},
{
"y": 2880,
"height": 9819
},
{
"y": 3456,
"height": 9819
},
{
"y": 4032,
"height": 9819
},
{
"y": 4608,
"height": 9819
},
{
"y": 5184,
"height": 9819
},
{
"y": 5760,
"height": 9819
},
{
"y": 6336,
"height": 9819
},
{
"y": 6912,
"height": 9819
},
{
"y": 7488,
"height": 9819
},
{
"y": 8064,
"height": 9819
},
{
"y": 8640,
"height": 9819
},
{
"y": 9099,
"height": 9819
}
],
"scans": 18,
"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: "Our Faith", "Events", "Give".
- **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: "Music Ministry", "Service Times", "Community Support".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "communal worship", "outreach", "congregation".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Get Involved", "Learn More", "Register".
- **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: "event registration".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "volunteer opportunities", "inspirational messages", "member stories".
- **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.