Anthropic Claude Sonnet 5.5 – Non Profit Charity

via Anthropic · Generated

  • AIMAC Debt 5.05
  • Cost $0.28
  • Total Violations 4
  • HTML Size 64 KB
  • Em Dashes 0

Screenshot

View Anthropic Claude Sonnet 5.5 Non Profit Charity page View Live Page

Accessibility Issues Found

4 Serious

  • link-in-text-block serious 1 instance

    Links must be distinguishable without relying on color

    Example HTML <a href="tel:+15035550142">(503) 555-0142</a>
  • color-contrast serious 3 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="eyebrow">Stories of Change</span>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Harborlight Alliance | Lighting the Way to Resilient Communities</title>
<meta name="description" content="Harborlight Alliance is a 501(c)(3) nonprofit delivering food security, youth education, housing stability and disaster resilience programs. Donate, volunteer, or join our advocacy work.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --navy:#12304a;
  --navy-2:#0c2236;
  --teal:#1f7a77;
  --teal-d:#175c5a;
  --amber:#f2a541;
  --amber-d:#d98b22;
  --cream:#fbf7f0;
  --sand:#f1e9db;
  --ink:#1e2a35;
  --muted:#5b6875;
  --line:#e3dccd;
  --white:#fff;
  --radius:16px;
  --shadow:0 10px 30px rgba(18,48,74,.12);
  --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;color:var(--navy);line-height:1.2;font-weight:700}
h1{font-size:clamp(2.3rem,5vw,3.8rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:.6rem}
h3{font-size:1.25rem;margin-bottom:.5rem}
p{margin-bottom:1rem}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:.8rem}
.lead{font-size:1.15rem;color:var(--muted);max-width:720px}
.section-head{margin-bottom:48px}
.section-head.center{text-align:center}
.section-head.center .lead{margin:0 auto}
.skip{position:absolute;left:-999px;top:0;background:var(--amber);color:var(--navy);padding:10px 16px;z-index:200;font-weight:700}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 1rem 'Inter',sans-serif;padding:14px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.2s;text-decoration:none!important}
.btn-primary{background:var(--amber);color:var(--navy)}
.btn-primary:hover{background:var(--amber-d);transform:translateY(-2px)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-d);transform:translateY(-2px)}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-light{border-color:rgba(255,255,255,.7);color:#fff}
.btn-light:hover{background:#fff;color:var(--navy)}
.btn-sm{padding:9px 18px;font-size:.92rem}

/* Top bar & header */
.topbar{background:var(--navy-2);color:#cfdbe6;font-size:.86rem}
.topbar .container{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.topbar a{color:#fff}
header.site{position:sticky;top:0;z-index:100;background:rgba(251,247,240,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none!important}
.brand img{width:52px;height:52px;border-radius:14px}
.brand-text strong{display:block;font-family:'Fraunces',serif;font-size:1.3rem;color:var(--navy);line-height:1.1}
.brand-text span{font-size:.78rem;color:var(--muted)}
nav.main ul{display:flex;gap:4px;list-style:none;align-items:center}
nav.main a{display:block;padding:9px 13px;border-radius:999px;color:var(--navy);font-weight:500;font-size:.95rem}
nav.main a:hover{background:var(--sand);text-decoration:none}
nav.main a.active{background:var(--sand)}
.menu-toggle{display:none;background:none;border:2px solid var(--navy);border-radius:10px;padding:8px 12px;font-weight:700;color:var(--navy);cursor:pointer}

/* Hero */
.hero{background:linear-gradient(135deg,var(--navy) 0%,#1a4a62 60%,var(--teal) 100%);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:rgba(242,165,65,.14)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:80px 24px 96px;position:relative;z-index:1}
.hero h1{color:#fff;margin-bottom:1.2rem}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p.lead{color:#d6e3ec;margin-bottom:2rem}
.hero .badges{display:flex;gap:18px;flex-wrap:wrap;margin-top:2rem;font-size:.9rem;color:#cfdde8}
.hero .badges span{display:flex;align-items:center;gap:8px}
.hero .badges i{font-style:normal;background:rgba(255,255,255,.14);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;color:var(--amber)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* Donate card */
.donate-card{background:#fff;color:var(--ink);border-radius:20px;padding:30px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.donate-card h2{font-size:1.5rem;margin-bottom:.3rem}
.donate-card .sub{font-size:.92rem;color:var(--muted);margin-bottom:1.2rem}
.freq{display:grid;grid-template-columns:1fr 1fr;background:var(--sand);border-radius:999px;padding:4px;margin-bottom:1.1rem}
.freq button{border:0;background:transparent;padding:10px;border-radius:999px;font:600 .95rem 'Inter',sans-serif;color:var(--navy);cursor:pointer}
.freq button[aria-pressed="true"]{background:var(--navy);color:#fff}
.amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.amounts button{padding:12px 0;border-radius:12px;border:2px solid var(--line);background:#fff;font:700 1rem 'Inter',sans-serif;color:var(--navy);cursor:pointer;transition:.15s}
.amounts button:hover{border-color:var(--teal)}
.amounts button[aria-pressed="true"]{border-color:var(--teal);background:#e6f3f2;color:var(--teal-d)}
.custom-amt{position:relative;margin-bottom:1rem}
.custom-amt span{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--muted)}
.custom-amt input{width:100%;padding:13px 16px 13px 32px;border:2px solid var(--line);border-radius:12px;font:600 1rem 'Inter',sans-serif}
.impact-box{background:#fff6e6;border-left:4px solid var(--amber);padding:12px 14px;border-radius:8px;font-size:.93rem;margin-bottom:1.2rem;min-height:68px}
.donate-card .btn{width:100%}
.donate-card .fine{font-size:.78rem;color:var(--muted);text-align:center;margin:12px 0 0}
.thanks{display:none;text-align:center;padding:20px 0}
.thanks.show{display:block}
.thanks .check{width:64px;height:64px;border-radius:50%;background:#e6f3f2;color:var(--teal);display:grid;place-items:center;font-size:2rem;margin:0 auto 1rem}

/* Stats */
.stats{background:var(--amber);padding:48px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat strong{display:block;font:700 clamp(2rem,4vw,3rem) 'Fraunces',serif;color:var(--navy)}
.stat span{font-size:.95rem;color:#43320f;font-weight:500}

/* About */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.photo-stack{position:relative}
.photo-stack img.main{border-radius:24px;box-shadow:var(--shadow);width:100%;aspect-ratio:4/3;object-fit:cover}
.photo-stack img.float{position:absolute;right:-24px;bottom:-32px;width:46%;border-radius:18px;border:6px solid var(--cream);box-shadow:var(--shadow);aspect-ratio:1;object-fit:cover}
.checklist{list-style:none;margin:1.2rem 0 1.8rem}
.checklist li{padding-left:34px;position:relative;margin-bottom:.7rem}
.checklist li::before{content:"✓";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;font-size:.8rem;display:grid;place-items:center;font-weight:700}

/* Programs */
.programs{background:#fff}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:var(--cream);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);transition:.25s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card img{aspect-ratio:3/2;object-fit:cover;width:100%}
.card-body{padding:24px;display:flex;flex-direction:column;flex:1}
.card-body p{color:var(--muted);font-size:.97rem}
.card-body .more{margin-top:auto;font-weight:600}
.tag{display:inline-block;background:#e6f3f2;color:var(--teal-d);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:.8rem;align-self:flex-start}

/* Advocacy */
.adv-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:72px}
.adv-row:last-child{margin-bottom:0}
.adv-row.rev .adv-img{order:2}
.adv-img img{border-radius:24px;box-shadow:var(--shadow);aspect-ratio:16/11;object-fit:cover;width:100%}
.progress-line{margin:1.2rem 0 1.5rem}
.progress-line .label{display:flex;justify-content:space-between;font-size:.88rem;font-weight:600;color:var(--navy);margin-bottom:6px}
.bar{height:10px;border-radius:99px;background:var(--sand);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--amber));border-radius:99px;width:0;transition:width 1.4s ease}

/* Volunteer */
.volunteer{background:var(--navy);color:#fff;position:relative}
.volunteer h2{color:#fff}
.volunteer .eyebrow{color:var(--amber)}
.volunteer .lead{color:#cfdde8}
.vol-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.roles{margin-top:2rem;display:grid;gap:14px}
.role{display:flex;gap:16px;background:rgba(255,255,255,.07);border-radius:14px;padding:16px 18px}
.role .ico{font-size:1.6rem;flex:none;width:48px;height:48px;border-radius:12px;background:rgba(242,165,65,.18);display:grid;place-items:center}
.role h3{color:#fff;font-size:1.05rem;margin-bottom:.15rem;font-family:'Inter',sans-serif;font-weight:600}
.role p{font-size:.9rem;color:#bcd0de;margin:0}
.vol-form{background:#fff;color:var(--ink);border-radius:22px;padding:34px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.vol-form h3{font-size:1.5rem}
.field{margin-bottom:1.1rem}
.field label,.field legend{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--navy)}
.field input[type=text],.field input[type=email],.field select{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:10px;font:1rem 'Inter',sans-serif;background:#fff}
.field input:focus,.field select:focus,.custom-amt input:focus{border-color:var(--teal);outline:none}
.field .err{display:none;color:#b3261e;font-size:.82rem;margin-top:4px}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select{border-color:#b3261e}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
fieldset{border:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{margin:0;cursor:pointer}
.chips input{position:absolute;opacity:0}
.chips span{display:inline-block;padding:8px 14px;border-radius:999px;border:2px solid var(--line);font-size:.88rem;font-weight:500;transition:.15s}
.chips input:checked+span{background:var(--teal);border-color:var(--teal);color:#fff}
.chips input:focus-visible+span{outline:3px solid var(--amber)}
input[type=range]{width:100%;accent-color:var(--teal)}
.range-out{background:#e6f3f2;border-radius:10px;padding:10px 14px;font-size:.92rem;margin-top:8px;color:var(--teal-d)}
.form-success{display:none;text-align:center;padding:30px 10px}
.form-success.show{display:block}
.form-success .check{width:70px;height:70px;border-radius:50%;background:#e6f3f2;color:var(--teal);display:grid;place-items:center;font-size:2.1rem;margin:0 auto 1rem}

/* Reports */
.fin-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.donut-wrap{display:flex;align-items:center;gap:32px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px}
.donut{width:200px;height:200px;border-radius:50%;background:conic-gradient(var(--teal) 0 86%,var(--amber) 86% 94%,var(--navy) 94% 100%);position:relative;flex:none}
.donut::after{content:"86¢";position:absolute;inset:34px;background:#fff;border-radius:50%;display:grid;place-items:center;font:700 2rem 'Fraunces',serif;color:var(--navy)}
.legend{list-style:none;font-size:.95rem}
.legend li{display:flex;align-items:center;gap:10px;margin-bottom:.6rem}
.legend b{width:14px;height:14px;border-radius:4px;flex:none}
.reports{display:grid;gap:14px;margin-top:1.5rem}
.report{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.report strong{display:block;color:var(--navy)}
.report small{color:var(--muted)}
.trust{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.5rem}
.trust span{background:var(--sand);border-radius:10px;padding:8px 14px;font-size:.85rem;font-weight:600;color:var(--navy)}

/* Testimonials */
.testimonials{background:var(--sand)}
.testi{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:0 4px 16px rgba(18,48,74,.06);position:relative}
.testi::before{content:"“";font:700 5rem 'Fraunces',serif;color:var(--amber);position:absolute;top:6px;right:22px;line-height:1}
.testi p{font-size:1rem;color:var(--ink)}
.person{display:flex;align-items:center;gap:14px;margin-top:1.4rem}
.person img{width:52px;height:52px;border-radius:50%}
.person strong{display:block;color:var(--navy);line-height:1.2}
.person span{font-size:.85rem;color:var(--muted)}
.stars{color:var(--amber);letter-spacing:2px;margin-bottom:.8rem}

/* News + sidebar */
.news-layout{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
.featured-post{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--line);margin-bottom:28px}
.featured-post img{width:100%;height:100%;object-fit:cover;min-height:260px}
.featured-post .body{padding:28px}
.meta{font-size:.82rem;color:var(--muted);margin-bottom:.6rem}
.post-list{display:grid;gap:20px}
.post{display:grid;grid-template-columns:180px 1fr;gap:20px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;align-items:center}
.post img{border-radius:12px;aspect-ratio:4/3;object-fit:cover;width:100%}
.post h3{font-size:1.1rem}
.post p{font-size:.92rem;color:var(--muted);margin:0}
.sub-head{margin:56px 0 24px;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.sub-head h2{font-size:1.9rem;margin:0}
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
aside.sidebar{display:grid;gap:24px;position:sticky;top:96px}
.widget{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px}
.widget h3{font-size:1.2rem;margin-bottom:1rem}
.events{list-style:none}
.events li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.events li:last-child{border:0;padding-bottom:0}
.date{flex:none;width:56px;text-align:center;background:var(--navy);color:#fff;border-radius:12px;padding:6px 0;line-height:1.1}
.date b{display:block;font:700 1.35rem 'Fraunces',serif;color:var(--amber)}
.date small{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.events strong{display:block;font-size:.97rem;color:var(--navy);line-height:1.3}
.events span{font-size:.82rem;color:var(--muted)}
.widget.news-sign{background:var(--teal);border:0;color:#fff}
.widget.news-sign h3{color:#fff}
.widget.news-sign p{font-size:.92rem;color:#d6efed}
.widget.news-sign input{width:100%;padding:12px 14px;border-radius:10px;border:0;margin-bottom:10px;font:1rem 'Inter',sans-serif}
.widget.news-sign .btn{width:100%}
.news-msg{display:none;font-size:.9rem;margin-top:10px;background:rgba(255,255,255,.18);padding:10px;border-radius:8px}
.news-msg.show{display:block}
.recent{list-style:none}
.recent li{padding:10px 0;border-bottom:1px solid var(--line);font-size:.93rem}
.recent li:last-child{border:0}
.recent a{color:var(--navy);font-weight:600}
.recent small{display:block;color:var(--muted)}

/* FAQ */
.faq-wrap{max-width:820px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:20px 24px;font:600 1.05rem 'Inter',sans-serif;color:var(--navy);display:flex;justify-content:space-between;gap:16px;cursor:pointer;align-items:center}
.faq-q::after{content:"+";font-size:1.6rem;color:var(--teal);transition:.2s;flex:none}
.faq-q[aria-expanded="true"]::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a div{padding:0 24px 22px;color:var(--muted)}

/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--teal),var(--navy));color:#fff;text-align:center;padding:80px 0}
.cta-band h2{color:#fff;max-width:760px;margin:0 auto 1rem}
.cta-band p{color:#d6e3ec;max-width:640px;margin:0 auto 2rem}
.cta-band .cta-row{justify-content:center}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.contact-list{list-style:none;margin-top:1.4rem}
.contact-list li{display:flex;gap:14px;margin-bottom:1rem}
.contact-list .ico{flex:none;width:44px;height:44px;border-radius:12px;background:#e6f3f2;display:grid;place-items:center}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px}
.field textarea{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:10px;font:1rem 'Inter',sans-serif;min-height:120px;resize:vertical}
.field textarea:focus{border-color:var(--teal);outline:none}

/* Footer */
footer.site{background:var(--navy-2);color:#b5c6d4;padding:72px 0 0;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:48px}
footer h4{color:#fff;font-family:'Inter',sans-serif;font-size:1rem;margin-bottom:1rem}
footer ul{list-style:none}
footer li{margin-bottom:.55rem}
footer a{color:#b5c6d4}
footer a:hover{color:var(--amber)}
.foot-brand .brand-text strong{color:#fff}
.foot-brand .brand-text span{color:#9db3c4}
.socials{display:flex;gap:10px;margin-top:1.2rem}
.socials a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;font-weight:700;font-size:.85rem;text-decoration:none}
.socials a:hover{background:var(--amber);color:var(--navy)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.87rem}
.foot-bottom nav{display:flex;gap:20px}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:.7s ease}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media(max-width:1020px){
  .hero-grid,.split,.adv-row,.vol-grid,.fin-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
  .adv-row.rev .adv-img{order:0}
  .news-layout{grid-template-columns:1fr}
  aside.sidebar{position:static;grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .photo-stack img.float{right:8px}
  .menu-toggle{display:block}
  nav.main{position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:1px solid var(--line);display:none;padding:12px 24px 20px}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;align-items:stretch}
  header.site{position:sticky}
  .header-inner{position:relative}
}
@media(max-width:680px){
  body{font-size:16px}
  .section{padding:64px 0}
  .stats-grid{grid-template-columns:1fr 1fr}
  .grid-3,.blog-grid,.row2{grid-template-columns:1fr}
  aside.sidebar{grid-template-columns:1fr}
  .featured-post{grid-template-columns:1fr}
  .post{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .topbar .container{justify-content:center;text-align:center}
  .brand-text span{display:none}
  .amounts{grid-template-columns:repeat(2,1fr)}
  .donut-wrap{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to main content</a>

<div class="topbar">
  <div class="container">
    <span>A registered 501(c)(3) nonprofit · EIN 84-3920175 · Gold Seal of Transparency</span>
    <span>Need help? Call our community line: <a href="tel:+15035550142">(503) 555-0142</a></span>
  </div>
</div>

<header class="site">
  <div class="container header-inner">
    <a class="brand" href="#top" aria-label="Harborlight Alliance home">
      <img src="https://placehold.co/104x104/1f7a77/ffffff?text=HA&font=montserrat" alt="Harborlight Alliance logo" width="52" height="52">
      <div class="brand-text">
        <strong>Harborlight Alliance</strong>
        <span>Lighting the way to resilient communities</span>
      </div>
    </a>
    <button class="menu-toggle" aria-expanded="false" aria-controls="mainNav">Menu</button>
    <nav class="main" id="mainNav" aria-label="Primary">
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#programs">Programs</a></li>
        <li><a href="#advocacy">Advocacy</a></li>
        <li><a href="#volunteer">Volunteer</a></li>
        <li><a href="#reports">Reports</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#blog">Blog</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a class="btn btn-primary btn-sm" href="#donate">Make Donation</a></li>
      </ul>
    </nav>
  </div>
</header>

<main id="main">

<!-- HERO -->
<section class="hero" id="top">
  <div class="container hero-grid">
    <div>
      <span class="eyebrow" style="color:var(--amber)">Serving the Pacific Northwest since 2009</span>
      <h1>No neighbor left in the dark. <em>Every community ready to rise.</em></h1>
      <p class="lead">Harborlight Alliance connects families with food, housing stability, education and disaster-ready support. Powered by 4,800 volunteers and donors like you, we turn compassion into lasting change across 38 communities.</p>
      <div class="cta-row">
        <a class="btn btn-primary" href="#donate">Make Donation</a>
        <a class="btn btn-light" href="#volunteer">Become a Volunteer</a>
      </div>
      <div class="badges">
        <span><i>✓</i> 86¢ of every dollar funds programs</span>
        <span><i>✓</i> 4-star Charity Navigator rating</span>
        <span><i>✓</i> Tax-deductible giving</span>
      </div>
    </div>

    <div class="donate-card" id="donate">
      <div id="donateForm">
        <h2>Support Cause: Give Today</h2>
        <p class="sub">Choose an amount and see the difference your gift makes.</p>
        <div class="freq" role="group" aria-label="Donation frequency">
          <button type="button" data-freq="once" aria-pressed="false">One-time</button>
          <button type="button" data-freq="monthly" aria-pressed="true">Monthly</button>
        </div>
        <div class="amounts" role="group" aria-label="Donation amount">
          <button type="button" data-amt="25" aria-pressed="false">$25</button>
          <button type="button" data-amt="50" aria-pressed="true">$50</button>
          <button type="button" data-amt="100" aria-pressed="false">$100</button>
          <button type="button" data-amt="250" aria-pressed="false">$250</button>
        </div>
        <div class="custom-amt">
          <span>$</span>
          <input type="number" id="customAmt" min="1" step="1" placeholder="Other amount" aria-label="Custom donation amount">
        </div>
        <div class="impact-box" id="impactBox" aria-live="polite"></div>
        <button class="btn btn-primary" id="donateBtn" type="button">Make Donation</button>
        <p class="fine">Secure checkout · Receipt emailed for your tax records · Cancel monthly gifts anytime</p>
      </div>
      <div class="thanks" id="donateThanks" role="status">
        <div class="check">♥</div>
        <h2>Thank you!</h2>
        <p id="thanksText">Your generosity is already lighting the way.</p>
        <button class="btn btn-outline btn-sm" id="donateReset" type="button">Make another gift</button>
      </div>
    </div>
  </div>
</section>

<!-- STATS -->
<section class="stats" aria-label="Impact at a glance">
  <div class="container stats-grid">
    <div class="stat"><strong data-count="2400000" data-suffix="+">0</strong><span>Meals delivered since 2009</span></div>
    <div class="stat"><strong data-count="186000" data-suffix="">0</strong><span>Volunteer hours last year</span></div>
    <div class="stat"><strong data-count="3150" data-suffix="">0</strong><span>Families moved to stable housing</span></div>
    <div class="stat"><strong data-count="38" data-suffix="">0</strong><span>Partner communities served</span></div>
  </div>
</section>

<!-- ABOUT -->
<section class="section" id="about">
  <div class="container split">
    <div class="photo-stack reveal">
      <img class="main" src="https://picsum.photos/800/600?random=11" alt="Volunteers sorting food donations in a warehouse" width="800" height="600" loading="lazy">
      <img class="float" src="https://picsum.photos/400/400?random=12" alt="Child reading with a mentor" width="400" height="400" loading="lazy">
    </div>
    <div class="reveal">
      <span class="eyebrow">Our Mission</span>
      <h2>Community care that is built to last</h2>
      <p>Harborlight Alliance began in 2009 as a church-basement pantry run by eleven neighbors after a devastating winter flood. Today we are a fully independent 501(c)(3) public charity with a simple conviction: dignity, stability and opportunity should not depend on a zip code.</p>
      <p>We pair immediate relief with long-term sustainability. Every program is co-designed with the residents it serves, measured against clear outcomes, and strengthened by local partnerships with schools, clinics, faith groups, and small businesses.</p>
      <ul class="checklist">
        <li>Community-led planning with resident advisory councils in every region</li>
        <li>Independent annual audit and fully public Form 990 filings</li>
        <li>Culturally responsive services in seven languages</li>
      </ul>
      <a class="btn btn-teal" href="#reports">See How We Use Your Gift</a>
    </div>
  </div>
</section>

<!-- PROGRAMS -->
<section class="section programs" id="programs">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow">Programs</span>
      <h2>Six ways we strengthen communities</h2>
      <p class="lead">From the first emergency meal to a family's first keys, our integrated programs meet people where they are and walk with them toward stability.</p>
    </div>
    <div class="grid-3">
      <article class="card reveal">
        <img src="https://picsum.photos/600/400?random=21" alt="Fresh produce being distributed at a community pantry" width="600" height="400" loading="lazy">
        <div class="card-body">
          <span class="tag">Food Security</span>
          <h3>Harvest Table Pantries</h3>
          <p>Twenty-two choice-based pantries and three mobile markets provide fresh produce, protein and culturally relevant staples, rescuing more than 1.1 million pounds of surplus food each year.</p>
          <a class="more" href="#donate">Support this program →</a>
        </div>
      </article>
      <article class="card reveal">
        <img src="https://picsum.photos/600/400?random=22" alt="Students working together in an after-school classroom" width="600" height="400" loading="lazy">
        <div class="card-body">
          <span class="tag">Youth Education</span>
          <h3>Bright Paths Mentoring</h3>
          <p>Trained volunteer mentors and certified tutors help 2,900 students build literacy, confidence and college-and-career readiness through free after-school and summer learning programs.</p>
          <a class="more" href="#volunteer">Mentor a student →</a>
        </div>
      </article>
      <article class="card reveal">
        <img src="https://picsum.photos/600/400?random=23" alt="A family receiving keys to a new home" width="600" height="400" loading="lazy">
        <div class="card-body">
          <span class="tag">Housing</span>
          <h3>Keystone Housing Stability</h3>
          <p>Rapid rehousing, rental assistance and eviction-prevention legal clinics keep families together. Ninety-one percent of participants remain stably housed 12 months later.</p>
          <a class="more" href="#donate">Support this program →</a>
        </div>
      </article>
      <article class="card reveal">
        <img src="https://picsum.photos/600/400?random=24" alt="Emergency response volunteers loading supply kits" width="600" height="400" loading="lazy">
        <div class="card-body">
          <span class="tag">Disaster Resilience</span>
          <h3>Beacon Ready Network</h3>
          <p>We train neighborhood response teams, pre-position supply caches and offer preparedness workshops so communities can recover faster from floods, wildfire smoke and winter storms.</p>
          <a class="more" href="#volunteer">Join a response team →</a>
        </div>
      </article>
      <article class="card reveal">
        <img src="https://picsum.photos/600/400?random=25" alt="Adults attending a job skills workshop" width="600" height="400" loading="lazy">
        <div class="card-body">
          <span class="tag">Workforce</span>
          <h3>Pathway Works</h3>
          <p>Job-readiness coaching, industry certifications and paid apprenticeships with more than 60 employer partners help adults secure living-wage careers and build lasting financial resilience.</p>
          <a class="more" href="#contact">Partner with us →</a>
        </div>
      </article>
      <article class="card reveal">
        <img src="https://picsum.photos/600/400?random=26" alt="Senior neighbors sharing a meal together" width="600" height="400" loading="lazy">
        <div class="card-body">
          <span class="tag">Healthy Aging</span>
          <h3>Lantern Senior Connect</h3>
          <p>Weekly friendly-visitor calls, home-delivered meals and transportation to medical appointments reduce isolation for 1,400 older adults who would otherwise go unseen.</p>
          <a class="more" href="#volunteer">Become a friendly visitor →</a>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ADVOCACY -->
<section class="section" id="advocacy">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">Advocacy Initiatives</span>
      <h2>Changing the systems behind the struggle</h2>
      <p class="lead">Direct service helps one family at a time. Policy advocacy helps thousands. Our nonpartisan team works with lawmakers, researchers and residents to remove barriers at their root.</p>
    </div>

    <div class="adv-row reveal">
      <div>
        <h3 style="font-size:1.7rem">Secure Homes Campaign</h3>
        <p>Working alongside tenant unions and legal aid partners, we helped pass a right-to-counsel ordinance in two counties, guaranteeing legal representation for households facing eviction. Early data shows a 64% drop in default judgments.</p>
        <p>Our next goal is statewide: expanding emergency rental assistance and creating a dedicated housing trust fund to build 5,000 affordable homes by 2030.</p>
        <div class="progress-line">
          <div class="label"><span>Petition goal: 25,000 signatures</span><span>78%</span></div>
          <div class="bar"><i data-w="78"></i></div>
        </div>
        <a class="btn btn-teal" href="#contact">Support Cause</a>
      </div>
      <div class="adv-img"><img src="https://picsum.photos/800/550?random=31" alt="Residents rallying at a state capitol for housing" width="800" height="550" loading="lazy"></div>
    </div>

    <div class="adv-row rev reveal">
      <div>
        <h3 style="font-size:1.7rem">Full Plates, Full Futures</h3>
        <p>No child should learn on an empty stomach. This coalition-led initiative advocates for universal free school meals, summer EBT enrollment and protections for SNAP benefits, backed by testimony from the families we serve.</p>
        <p>Since 2022, our policy briefs and volunteer-led call-in days have helped bring free breakfast and lunch to 112 additional schools, reaching more than 41,000 students.</p>
        <div class="progress-line">
          <div class="label"><span>Schools enrolled: 150 target</span><span>75%</span></div>
          <div class="bar"><i data-w="75"></i></div>
        </div>
        <a class="btn btn-teal" href="#volunteer">Join an Advocacy Day</a>
      </div>
      <div class="adv-img"><img src="https://picsum.photos/800/550?random=32" alt="Students enjoying a school lunch in a cafeteria" width="800" height="550" loading="lazy"></div>
    </div>
  </div>
</section>

<!-- VOLUNTEER -->
<section class="section volunteer" id="volunteer">
  <div class="container vol-grid">
    <div class="reveal">
      <span class="eyebrow">Volunteer Opportunities</span>
      <h2>Your time is the most powerful gift</h2>
      <p class="lead">Last year, volunteers contributed 186,000 hours, equal to $5.6 million in donated labor. Whether you have one afternoon a month or one day a week, there is a role designed for you.</p>
      <div class="roles">
        <div class="role"><div class="ico">🥕</div><div><h3>Pantry &amp; Mobile Market Crew</h3><p>Sort, pack and distribute fresh food. Flexible 3-hour shifts, no experience needed.</p></div></div>
        <div class="role"><div class="ico">📚</div><div><h3>Mentors &amp; Tutors</h3><p>Commit to one student for a school year. Training and background check provided.</p></div></div>
        <div class="role"><div class="ico">🧰</div><div><h3>Disaster Response Team</h3><p>Receive free preparedness training and help neighbors when emergencies strike.</p></div></div>
        <div class="role"><div class="ico">💻</div><div><h3>Skills-Based Pro Bono</h3><p>Lend your expertise in design, legal, finance, data or communications remotely.</p></div></div>
      </div>
    </div>

    <form class="vol-form reveal" id="volForm" novalidate>
      <div id="volFields">
        <h3>Volunteer signup</h3>
        <p style="color:var(--muted);font-size:.95rem">Tell us a little about you and our volunteer coordinator will reach out within two business days.</p>
        <div class="row2">
          <div class="field" id="f-name">
            <label for="vName">Full name</label>
            <input type="text" id="vName" autocomplete="name" placeholder="Jordan Rivera">
            <div class="err">Please enter your name.</div>
          </div>
          <div class="field" id="f-email">
            <label for="vEmail">Email</label>
            <input type="email" id="vEmail" autocomplete="email" placeholder="you@example.com">
            <div class="err">Please enter a valid email address.</div>
          </div>
        </div>
        <div class="field" id="f-area">
          <label for="vArea">Where would you like to help?</label>
          <select id="vArea">
            <option value="">Select a program…</option>
            <option>Harvest Table Pantries</option>
            <option>Bright Paths Mentoring</option>
            <option>Beacon Ready Network</option>
            <option>Lantern Senior Connect</option>
            <option>Skills-Based Pro Bono</option>
            <option>Advocacy &amp; Events</option>
          </select>
          <div class="err">Please choose a program area.</div>
        </div>
        <fieldset class="field" id="f-avail">
          <legend>Availability</legend>
          <div class="chips">
            <label><input type="checkbox" name="avail" value="Weekday mornings"><span>Weekday mornings</span></label>
            <label><input type="checkbox" name="avail" value="Weekday evenings"><span>Weekday evenings</span></label>
            <label><input type="checkbox" name="avail" value="Saturdays"><span>Saturdays</span></label>
            <label><input type="checkbox" name="avail" value="Sundays"><span>Sundays</span></label>
            <label><input type="checkbox" name="avail" value="Remote / flexible"><span>Remote / flexible</span></label>
          </div>
          <div class="err">Select at least one time that works for you.</div>
        </fieldset>
        <div class="field">
          <label for="vHours">Hours per month: <strong id="hrsVal">8</strong></label>
          <input type="range" id="vHours" min="2" max="40" step="2" value="8">
          <div class="range-out" id="hrsOut" aria-live="polite"></div>
        </div>
        <button class="btn btn-primary" type="submit" style="width:100%">Sign Me Up</button>
      </div>
      <div class="form-success" id="volSuccess" role="status">
        <div class="check">✓</div>
        <h3>Welcome to the team, <span id="sName"></span>!</h3>
        <p id="sMsg"></p>
        <button class="btn btn-outline btn-sm" type="button" id="volReset">Submit another signup</button>
      </div>
    </form>
  </div>
</section>

<!-- REPORTS -->
<section class="section" id="reports">
  <div class="container fin-grid">
    <div class="reveal">
      <span class="eyebrow">Annual Reports &amp; Transparency</span>
      <h2>Accountable to every donor, every day</h2>
      <p>We believe trust is earned through openness. Each year we publish audited financial statements, program outcomes, and a plain-language letter from our board about what worked and where we must improve.</p>
      <p>In fiscal year 2024 we raised $14.2 million from 31,000 individual donors, foundations and corporate partners, and ended the year with a healthy six-month operating reserve to support long-term sustainability.</p>
      <div class="reports">
        <div class="report"><div><strong>2024 Annual Impact Report</strong><small>PDF · 32 pages · 4.1 MB</small></div><a class="btn btn-outline btn-sm" href="#reports">Download</a></div>
        <div class="report"><div><strong>FY2024 Audited Financial Statements</strong><small>PDF · 24 pages · 2.3 MB</small></div><a class="btn btn-outline btn-sm" href="#reports">Download</a></div>
        <div class="report"><div><strong>IRS Form 990 &amp; Board Roster</strong><small>PDF · 41 pages · 3.0 MB</small></div><a class="btn btn-outline btn-sm" href="#reports">Download</a></div>
      </div>
    </div>
    <div class="reveal">
      <div class="donut-wrap">
        <div class="donut" role="img" aria-label="86 percent programs, 8 percent administration, 6 percent fundraising"></div>
        <div>
          <h3>Where every dollar goes</h3>
          <ul class="legend">
            <li><b style="background:var(--teal)"></b> 86% Programs &amp; direct services</li>
            <li><b style="background:var(--amber)"></b> 8% Administration</li>
            <li><b style="background:var(--navy)"></b> 6% Fundraising</li>
          </ul>
        </div>
      </div>
      <div class="trust">
        <span>🏅 Charity Navigator 4★</span>
        <span>✔ Candid Gold Seal</span>
        <span>✔ BBB Accredited Charity</span>
        <span>✔ Independent CPA audit</span>
      </div>
    </div>
  </div>
</section>

<!-- TESTIMONIALS -->
<section class="section testimonials" id="stories">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow">Stories of Change</span>
      <h2>The people behind the numbers</h2>
      <p class="lead">Neighbors, volunteers and donors share what Harborlight means to them.</p>
    </div>
    <div class="grid-3">
      <div class="testi reveal">
        <div class="stars">★★★★★</div>
        <p>When I lost my job, I was too proud to ask for help. The pantry team treated me like a neighbor, not a number. Six months later, through Pathway Works, I landed a role as a medical coder. Now I volunteer there every Saturday.</p>
        <div class="person"><img src="https://i.pravatar.cc/104?u=maria-hl" alt="Portrait of Maria T." width="52" height="52" loading="lazy"><div><strong>Maria T.</strong><span>Program graduate &amp; volunteer</span></div></div>
      </div>
      <div class="testi reveal">
        <div class="stars">★★★★★</div>
        <p>I've mentored a seventh grader for two years. Watching her go from avoiding reading aloud to leading our book club has been the highlight of my week. Harborlight provides the training and support that make it easy to show up.</p>
        <div class="person"><img src="https://i.pravatar.cc/104?u=daniel-hl" alt="Portrait of Daniel K." width="52" height="52" loading="lazy"><div><strong>Daniel K.</strong><span>Bright Paths mentor</span></div></div>
      </div>
      <div class="testi reveal">
        <div class="stars">★★★★★</div>
        <p>As a foundation officer, I look for transparency and measurable outcomes. Harborlight's reporting is the gold standard, and the community's voice is evident in every decision. It's a partner we gladly renew every year.</p>
        <div class="person"><img src="https://i.pravatar.cc/104?u=priya-hl" alt="Portrait of Priya S." width="52" height="52" loading="lazy"><div><strong>Priya S.</strong><span>Program Officer, Cascade Family Fund</span></div></div>
      </div>
    </div>
  </div>
</section>

<!-- NEWS + BLOG + SIDEBAR -->
<section class="section" id="news">
  <div class="container">
    <div class="section-head reveal">
      <span class="eyebrow">News</span>
      <h2>Latest from Harborlight</h2>
      <p class="lead">Program milestones, policy wins and ways to get involved in the weeks ahead.</p>
    </div>
    <div class="news-layout">
      <div>
        <article class="featured-post reveal">
          <img src="https://picsum.photos/800/600?random=41" alt="Ribbon cutting at the new Eastside community center" width="800" height="600" loading="lazy">
          <div class="body">
            <span class="tag">Press Release</span>
            <div class="meta">March 12 · 4 min read</div>
            <h3 style="font-size:1.45rem">New Eastside Community Hub opens its doors</h3>
            <p style="color:var(--muted)">After a two-year capital campaign, our 18,000-square-foot hub unites a pantry, learning lab and health clinic under one roof, serving up to 600 neighbors each week.</p>
            <a href="#news"><strong>Read the full story →</strong></a>
          </div>
        </article>
        <div class="post-list">
          <article class="post reveal">
            <img src="https://picsum.photos/360/270?random=42" alt="Legislators meeting with advocates" width="360" height="270" loading="lazy">
            <div>
              <div class="meta">February 27 · Advocacy</div>
              <h3>Right-to-counsel expands to a third county</h3>
              <p>Commissioners voted 4–1 to fund legal representation for tenants, a milestone built on 1,200 constituent letters from our volunteers.</p>
            </div>
          </article>
          <article class="post reveal">
            <img src="https://picsum.photos/360/270?random=43" alt="Corporate volunteers packing meal kits" width="360" height="270" loading="lazy">
            <div>
              <div class="meta">February 9 · Partnerships</div>
              <h3>Coastal Credit Union pledges $750,000 over three years</h3>
              <p>The multi-year gift will scale Pathway Works apprenticeships and add 400 volunteer hours through employee giving programs.</p>
            </div>
          </article>
          <article class="post reveal">
            <img src="https://picsum.photos/360/270?random=44" alt="Wildfire preparedness workshop" width="360" height="270" loading="lazy">
            <div>
              <div class="meta">January 21 · Resilience</div>
              <h3>1,000 households now covered by Beacon Ready kits</h3>
              <p>Our spring workshops are open for registration, with free go-bags, air purifiers and emergency plans for qualifying families.</p>
            </div>
          </article>
        </div>

        <div class="sub-head" id="blog">
          <div>
            <span class="eyebrow">Blog</span>
            <h2>Insights &amp; field notes</h2>
          </div>
          <a class="btn btn-outline btn-sm" href="#blog">View all posts</a>
        </div>
        <div class="blog-grid">
          <article class="card reveal">
            <img src="https://picsum.photos/600/400?random=51" alt="Notebook and coffee on a desk" width="600" height="400" loading="lazy">
            <div class="card-body">
              <div class="meta">By Elena Ortiz · 6 min read</div>
              <h3>How to plan a high-impact giving year</h3>
              <p>Practical ideas for aligning your budget, employer match and volunteer hours for greater social return.</p>
              <a class="more" href="#blog">Read more →</a>
            </div>
          </article>
          <article class="card reveal">
            <img src="https://picsum.photos/600/400?random=52" alt="Community garden with volunteers" width="600" height="400" loading="lazy">
            <div class="card-body">
              <div class="meta">By Marcus Bell · 5 min read</div>
              <h3>What sustainability really means for a food pantry</h3>
              <p>From regional sourcing to compost partnerships, how we're shrinking our footprint while serving more neighbors.</p>
              <a class="more" href="#blog">Read more →</a>
            </div>
          </article>
        </div>
      </div>

      <aside class="sidebar" aria-label="Sidebar">
        <div class="widget reveal">
          <h3>Upcoming events</h3>
          <ul class="events">
            <li><div class="date"><b>05</b><small>Apr</small></div><div><strong>Spring Volunteer Orientation</strong><span>6:00 PM · Eastside Hub</span></div></li>
            <li><div class="date"><b>13</b><small>Apr</small></div><div><strong>Harvest Run 5K &amp; Family Fun Day</strong><span>8:30 AM · Riverfront Park</span></div></li>
            <li><div class="date"><b>22</b><small>Apr</small></div><div><strong>Advocacy Day at the Capitol</strong><span>9:00 AM · Free bus from Portland</span></div></li>
            <li><div class="date"><b>09</b><small>May</small></div><div><strong>Lantern Gala: An Evening of Light</strong><span>7:00 PM · Harbor Pavilion</span></div></li>
          </ul>
        </div>
        <div class="widget news-sign reveal">
          <h3>Get the monthly Beacon</h3>
          <p>Stories, impact updates and volunteer openings, delivered once a month. No spam, ever.</p>
          <form id="newsForm" novalidate>
            <label for="nEmail" style="position:absolute;left:-999px">Email address</label>
            <input type="email" id="nEmail" placeholder="Your email address">
            <button class="btn btn-primary" type="submit">Subscribe</button>
            <div class="news-msg" id="newsMsg" role="status"></div>
          </form>
        </div>
        <div class="widget reveal">
          <h3>Recent updates</h3>
          <ul class="recent">
            <li><a href="#news">Winter coat drive collects 9,400 coats</a><small>Jan 14</small></li>
            <li><a href="#news">Volunteer of the Year: meet the Okafor family</a><small>Jan 3</small></li>
            <li><a href="#news">Our 2025 policy priorities, explained</a><small>Dec 18</small></li>
            <li><a href="#news">Board welcomes three new community members</a><small>Dec 5</small></li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</section>

<!-- FAQ -->
<section class="section" id="faq" style="background:#fff">
  <div class="container">
    <div class="section-head center reveal">
      <span class="eyebrow">Questions</span>
      <h2>Frequently asked questions</h2>
      <p class="lead">Everything you need to know about giving, volunteering, and working with Harborlight.</p>
    </div>
    <div class="faq-wrap reveal">
      <div class="faq-item">
        <button class="faq-q" aria-expanded="false">Is my donation tax-deductible?</button>
        <div class="faq-a"><div>Yes. Harborlight Alliance is a 501(c)(3) public charity (EIN 84-3920175). Every gift receives an emailed receipt, and we send an annual giving summary in January for your tax records. Gifts of stock, donor-advised funds and IRA qualified charitable distributions are also welcome.</div></div>
      </div>
      <div class="faq-item">
        <button class="faq-q" aria-expanded="false">How do I get started as a volunteer?</button>
        <div class="faq-a"><div>Complete the signup form above. A volunteer coordinator will contact you within two business days to schedule a short orientation. Some roles, such as mentoring and senior visits, include a background check and role-specific training, all provided at no cost.</div></div>
      </div>
      <div class="faq-item">
        <button class="faq-q" aria-expanded="false">Can my company or school group volunteer together?</button>
        <div class="faq-a"><div>Absolutely. We host team volunteer days for groups of 8–60 people, including pantry packing, community garden builds and preparedness kit assembly. We can also help structure employer matching and volunteer grant programs.</div></div>
      </div>
      <div class="faq-item">
        <button class="faq-q" aria-expanded="false">How is my gift actually used?</button>
        <div class="faq-a"><div>86 cents of every dollar goes directly to programs. The remaining funds support administration and fundraising, which keep us compliant, audited, and sustainable. You can view full details in our annual report and Form 990 above.</div></div>
      </div>
      <div class="faq-item">
        <button class="faq-q" aria-expanded="false">I need assistance. Where do I go?</button>
        <div class="faq-a"><div>Call our community line at (503) 555-0142 (Mon–Sat, 8am–6pm) or visit any Harborlight hub. Services are free, confidential and available regardless of immigration status, and interpreters are available in seven languages.</div></div>
      </div>
    </div>
  </div>
</section>

<!-- CTA BAND -->
<section class="cta-band">
  <div class="container">
    <h2>Together, we can keep the lights on for every neighbor</h2>
    <p>Join 31,000 supporters whose monthly gifts and volunteer hours make lasting change possible. Start today in under two minutes.</p>
    <div class="cta-row">
      <a class="btn btn-primary" href="#donate">Make Donation</a>
      <a class="btn btn-light" href="#contact">Contact Us</a>
    </div>
  </div>
</section>

<!-- CONTACT -->
<section class="section" id="contact">
  <div class="container contact-grid">
    <div class="reveal">
      <span class="eyebrow">Contact Us</span>
      <h2>Let's start a conversation</h2>
      <p>Whether you're a prospective partner, journalist, donor or neighbor in need, our team is happy to help. We reply to all messages within one business day.</p>
      <ul class="contact-list">
        <li><div class="ico">📍</div><div><strong>Headquarters</strong><br>418 Harbor Street, Suite 200<br>Portland, OR 97204</div></li>
        <li><div class="ico">📞</div><div><strong>Phone</strong><br><a href="tel:+15035550142">(503) 555-0142</a></div></li>
        <li><div class="ico">✉️</div><div><strong>Email</strong><br><a href="mailto:hello@harborlightalliance.org">hello@harborlightalliance.org</a></div></li>
        <li><div class="ico">🕒</div><div><strong>Office hours</strong><br>Mon–Fri 9am–5pm · Community line Mon–Sat 8am–6pm</div></li>
      </ul>
    </div>
    <form class="contact-form reveal" id="contactForm" novalidate>
      <div id="cFields">
        <h3 style="font-size:1.5rem">Send us a message</h3>
        <div class="field" id="c-name"><label for="cName">Name</label><input type="text" id="cName" placeholder="Your name"><div class="err">Please enter your name.</div></div>
        <div class="field" id="c-email"><label for="cEmail">Email</label><input type="email" id="cEmail" placeholder="you@example.com"><div class="err">Please enter a valid email address.</div></div>
        <div class="field">
          <label for="cTopic">Topic</label>
          <select id="cTopic"><option>General inquiry</option><option>Corporate partnership</option><option>Major gifts &amp; legacy giving</option><option>Media request</option><option>Request assistance</option></select>
        </div>
        <div class="field" id="c-msg"><label for="cMsg">Message</label><textarea id="cMsg" placeholder="How can we help?"></textarea><div class="err">Please write a short message.</div></div>
        <button class="btn btn-teal" type="submit" style="width:100%">Send Message</button>
      </div>
      <div class="form-success" id="cSuccess" role="status">
        <div class="check">✓</div>
        <h3>Message sent</h3>
        <p>Thank you for reaching out. A member of our team will respond within one business day.</p>
        <button class="btn btn-outline btn-sm" type="button" id="cReset">Send another</button>
      </div>
    </form>
  </div>
</section>

</main>

<footer class="site">
  <div class="container">
    <div class="foot-grid">
      <div class="foot-brand">
        <a class="brand" href="#top">
          <img src="https://placehold.co/104x104/f2a541/12304a?text=HA&font=montserrat" alt="Harborlight Alliance logo" width="52" height="52" loading="lazy">
          <div class="brand-text"><strong>Harborlight Alliance</strong><span>Lighting the way to resilient communities</span></div>
        </a>
        <p style="margin-top:1.2rem">A 501(c)(3) nonprofit organization. Your gift is tax-deductible to the fullest extent allowed by law.</p>
        <div class="socials">
          <a href="#" aria-label="Facebook">f</a>
          <a href="#" aria-label="Instagram">ig</a>
          <a href="#" aria-label="LinkedIn">in</a>
          <a href="#" aria-label="YouTube">▶</a>
          <a href="#" aria-label="X (Twitter)">X</a>
        </div>
      </div>
      <div>
        <h4>Get involved</h4>
        <ul>
          <li><a href="#donate">Make Donation</a></li>
          <li><a href="#volunteer">Volunteer</a></li>
          <li><a href="#advocacy">Advocacy</a></li>
          <li><a href="#contact">Corporate partners</a></li>
        </ul>
      </div>
      <div>
        <h4>Learn more</h4>
        <ul>
          <li><a href="#programs">Programs</a></li>
          <li><a href="#reports">Annual Reports</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#blog">Blog</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>
      <div>
        <h4>Contact</h4>
        <ul>
          <li>418 Harbor Street, Suite 200<br>Portland, OR 97204</li>
          <li><a href="tel:+15035550142">(503) 555-0142</a></li>
          <li><a href="mailto:hello@harborlightalliance.org">hello@harborlightalliance.org</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <span>© <span id="year">2025</span> Harborlight Alliance. All rights reserved. EIN 84-3920175.</span>
      <nav aria-label="Legal">
        <a href="#">Privacy Policy</a>
        <a href="#">Terms of Use</a>
        <a href="#">Accessibility</a>
      </nav>
    </div>
  </div>
</footer>

<script>
(function(){
  // Year
  document.getElementById('year').textContent = new Date().getFullYear();

  // Mobile nav
  var toggle = document.querySelector('.menu-toggle');
  var nav = document.getElementById('mainNav');
  toggle.addEventListener('click', function(){
    var open = nav.classList.toggle('open');
    toggle.setAttribute('aria-expanded', open);
  });
  nav.querySelectorAll('a').forEach(function(a){
    a.addEventListener('click', function(){ nav.classList.remove('open'); toggle.setAttribute('aria-expanded','false'); });
  });

  // Donation widget
  var state = {freq:'monthly', amt:50};
  var impacts = {
    25:'<strong>$25</strong> provides 75 nutritious meals for families through our Harvest Table pantries.',
    50:'<strong>$50</strong> funds a month of after-school tutoring and a healthy snack for two students.',
    100:'<strong>$100</strong> stocks a Beacon Ready emergency kit for a household and covers a preparedness workshop.',
    250:'<strong>$250</strong> helps a family avoid eviction with one month of rental assistance and legal support.'
  };
  var impactBox = document.getElementById('impactBox');
  var customInput = document.getElementById('customAmt');
  var amtBtns = document.querySelectorAll('.amounts button');
  var freqBtns = document.querySelectorAll('.freq button');

  function updateImpact(){
    var a = state.amt;
    var html;
    if(impacts[a]){ html = impacts[a]; }
    else if(a > 0){ html = '<strong>$'+a+'</strong> helps us provide about '+Math.round(a*3)+' meals, or equivalent services, to neighbors in need.'; }
    else { html = 'Enter an amount to see your impact.'; }
    if(a>0 && state.freq==='monthly'){ html += '<br><small>Over a year, your monthly gift totals <strong>$'+(a*12).toLocaleString()+'</strong>.</small>'; }
    impactBox.innerHTML = html;
  }
  amtBtns.forEach(function(b){
    b.addEventListener('click', function(){
      amtBtns.forEach(function(x){ x.setAttribute('aria-pressed','false'); });
      b.setAttribute('aria-pressed','true');
      state.amt = parseInt(b.dataset.amt,10);
      customInput.value = '';
      updateImpact();
    });
  });
  customInput.addEventListener('input', function(){
    var v = parseInt(customInput.value,10);
    amtBtns.forEach(function(x){ x.setAttribute('aria-pressed','false'); });
    state.amt = isNaN(v) || v < 1 ? 0 : v;
    updateImpact();
  });
  freqBtns.forEach(function(b){
    b.addEventListener('click', function(){
      freqBtns.forEach(function(x){ x.setAttribute('aria-pressed','false'); });
      b.setAttribute('aria-pressed','true');
      state.freq = b.dataset.freq;
      updateImpact();
    });
  });
  document.getElementById('donateBtn').addEventListener('click', function(){
    if(state.amt < 1){ customInput.focus(); impactBox.textContent = 'Please choose or enter a donation amount.'; return; }
    document.getElementById('thanksText').textContent = 'Your '+(state.freq==='monthly'?'monthly ':'')+'gift of $'+state.amt.toLocaleString()+' will help neighbors across our community. A receipt is on its way (demo only).';
    document.getElementById('donateForm').style.display = 'none';
    document.getElementById('donateThanks').classList.add('show');
  });
  document.getElementById('donateReset').addEventListener('click', function(){
    document.getElementById('donateForm').style.display = '';
    document.getElementById('donateThanks').classList.remove('show');
  });
  updateImpact();

  // Volunteer form
  var hours = document.getElementById('vHours');
  var hrsVal = document.getElementById('hrsVal');
  var hrsOut = document.getElementById('hrsOut');
  function updateHours(){
    var h = parseInt(hours.value,10);
    hrsVal.textContent = h;
    var yr = h*12;
    hrsOut.textContent = 'That is about '+yr+' volunteer hours a year, worth roughly $'+Math.round(yr*33.49).toLocaleString()+' in donated time and enough to serve about '+(yr*4)+' neighbors.';
  }
  hours.addEventListener('input', updateHours);
  updateHours();

  function emailOK(v){ return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); }
  function setInvalid(id, bad){ document.getElementById(id).classList.toggle('invalid', bad); return bad; }

  document.getElementById('volForm').addEventListener('submit', function(e){
    e.preventDefault();
    var name = document.getElementById('vName').value.trim();
    var email = document.getElementById('vEmail').value.trim();
    var area = document.getElementById('vArea').value;
    var avail = document.querySelectorAll('input[name=avail]:checked');
    var bad = false;
    bad = setInvalid('f-name', !name) || bad;
    bad = setInvalid('f-email', !emailOK(email)) || bad;
    bad = setInvalid('f-area', !area) || bad;
    bad = setInvalid('f-avail', avail.length === 0) || bad;
    if(bad) return;
    document.getElementById('sName').textContent = name.split(' ')[0];
    document.getElementById('sMsg').textContent = 'We received your interest in "'+area+'" at about '+hours.value+' hours per month. A coordinator will email '+email+' within two business days.';
    document.getElementById('volFields').style.display = 'none';
    document.getElementById('volSuccess').classList.add('show');
  });
  document.getElementById('volReset').addEventListener('click', function(){
    document.getElementById('volForm').reset();
    updateHours();
    document.getElementById('volFields').style.display = '';
    document.getElementById('volSuccess').classList.remove('show');
  });

  // Contact form
  document.getElementById('contactForm').addEventListener('submit', function(e){
    e.preventDefault();
    var bad = false;
    bad = setInvalid('c-name', !document.getElementById('cName').value.trim()) || bad;
    bad = setInvalid('c-email', !emailOK(document.getElementById('cEmail').value.trim())) || bad;
    bad = setInvalid('c-msg', !document.getElementById('cMsg').value.trim()) || bad;
    if(bad) return;
    document.getElementById('cFields').style.display = 'none';
    document.getElementById('cSuccess').classList.add('show');
  });
  document.getElementById('cReset').addEventListener('click', function(){
    document.getElementById('contactForm').reset();
    document.getElementById('cFields').style.display = '';
    document.getElementById('cSuccess').classList.remove('show');
  });

  // Newsletter
  document.getElementById('newsForm').addEventListener('submit', function(e){
    e.preventDefault();
    var v = document.getElementById('nEmail').value.trim();
    var msg = document.getElementById('newsMsg');
    msg.classList.add('show');
    if(emailOK(v)){ msg.textContent = 'Thank you! Look for your first Beacon soon.'; document.getElementById('nEmail').value=''; }
    else { msg.textContent = 'Please enter a valid email address.'; }
  });

  // FAQ accordion
  document.querySelectorAll('.faq-q').forEach(function(btn){
    btn.addEventListener('click', function(){
      var open = btn.getAttribute('aria-expanded') === 'true';
      document.querySelectorAll('.faq-q').forEach(function(b){
        b.setAttribute('aria-expanded','false');
        b.nextElementSibling.style.maxHeight = null;
      });
      if(!open){
        btn.setAttribute('aria-expanded','true');
        var panel = btn.nextElementSibling;
        panel.style.maxHeight = panel.scrollHeight + 'px';
      }
    });
  });
  var firstFaq = document.querySelector('.faq-q');
  if(firstFaq){ firstFaq.click(); }

  // Reveal, counters, progress bars
  function animateCount(el){
    var target = parseInt(el.dataset.count,10);
    var suffix = el.dataset.suffix || '';
    var start = null, dur = 1600;
    function step(ts){
      if(!start) start = ts;
      var p = Math.min((ts-start)/dur,1);
      var eased = 1 - Math.pow(1-p,3);
      el.textContent = Math.floor(target*eased).toLocaleString() + (p===1?suffix:'');
      if(p<1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }
  if('IntersectionObserver' in window){
    var io = new IntersectionObserver(function(entries){
      entries.forEach(function(en){
        if(en.isIntersecting){
          en.target.classList.add('in');
          en.target.querySelectorAll('.bar i').forEach(function(b){ b.style.width = b.dataset.w + '%'; });
          io.unobserve(en.target);
        }
      });
    },{threshold:.12});
    document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
    var io2 = new IntersectionObserver(function(entries){
      entries.forEach(function(en){
        if(en.isIntersecting){ en.target.querySelectorAll('[data-count]').forEach(animateCount); io2.unobserve(en.target); }
      });
    },{threshold:.4});
    io2.observe(document.querySelector('.stats'));
  } else {
    document.querySelectorAll('.reveal').forEach(function(el){ el.classList.add('in'); });
    document.querySelectorAll('.bar i').forEach(function(b){ b.style.width = b.dataset.w + '%'; });
    document.querySelectorAll('[data-count]').forEach(function(el){ el.textContent = parseInt(el.dataset.count,10).toLocaleString() + (el.dataset.suffix||''); });
  }

  // Active nav highlight
  var links = document.querySelectorAll('nav.main a[href^="#"]:not(.btn)');
  var map = {};
  links.forEach(function(l){ map[l.getAttribute('href').slice(1)] = l; });
  window.addEventListener('scroll', function(){
    var pos = window.scrollY + 140, current = null;
    Object.keys(map).forEach(function(id){
      var s = document.getElementById(id);
      if(s && s.offsetTop <= pos) current = id;
    });
    links.forEach(function(l){ l.classList.remove('active'); });
    if(current && map[current]) map[current].classList.add('active');
  }, {passive:true});
})();
</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:52:34.074Z",
  "url": "https://benchmark.aimac.invalid/a2349d303d2d7fc2bd9dae6a01c258e8b51051bd8726fcd3d01c3a1c5620100e.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-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": []
    },
    {
      "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": "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 class=\"brand\" href=\"#top\" aria-label=\"Harborlight Alliance home\">",
          "target": [
            "a[aria-label=\"Harborlight Alliance home\"]"
          ]
        }
      ]
    },
    {
      "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 class=\"brand\" href=\"#top\" aria-label=\"Harborlight Alliance home\">",
          "target": [
            "a[aria-label=\"Harborlight Alliance home\"]"
          ]
        }
      ]
    },
    {
      "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=\"freq\" role=\"group\" aria-label=\"Donation frequency\">\n          <button type=\"button\" data-freq=\"once\" aria-pressed=\"false\">One-time</button>\n          <button type=\"button\" data-freq=\"monthly\" aria-pressed=\"true\">Monthly</button>\n        </div>",
          "target": [
            ".freq"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-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 class=\"brand\" href=\"#top\" aria-label=\"Harborlight Alliance home\">",
          "target": [
            "a[aria-label=\"Harborlight Alliance home\"]"
          ]
        }
      ]
    },
    {
      "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=\"freq\" role=\"group\" aria-label=\"Donation frequency\">\n          <button type=\"button\" data-freq=\"once\" aria-pressed=\"false\">One-time</button>\n          <button type=\"button\" data-freq=\"monthly\" aria-pressed=\"true\">Monthly</button>\n        </div>",
          "target": [
            ".freq"
          ]
        }
      ]
    },
    {
      "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=\"freq\" role=\"group\" aria-label=\"Donation frequency\">\n          <button type=\"button\" data-freq=\"once\" aria-pressed=\"false\">One-time</button>\n          <button type=\"button\" data-freq=\"monthly\" aria-pressed=\"true\">Monthly</button>\n        </div>",
          "target": [
            ".freq"
          ]
        }
      ]
    },
    {
      "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 class=\"brand\" href=\"#top\" aria-label=\"Harborlight Alliance home\">",
          "target": [
            "a[aria-label=\"Harborlight Alliance home\"]"
          ]
        }
      ]
    },
    {
      "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 class=\"brand\" href=\"#top\" aria-label=\"Harborlight Alliance home\">",
          "target": [
            "a[aria-label=\"Harborlight Alliance home\"]"
          ]
        }
      ]
    },
    {
      "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=\"vName\" autocomplete=\"name\" placeholder=\"Jordan Rivera\">",
          "target": [
            "#vName"
          ]
        }
      ]
    },
    {
      "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": "<span class=\"eyebrow\" style=\"color:var(--amber)\">Serving the Pacific Northwest since 2009</span>",
          "target": [
            ".hero-grid > div:nth-child(1) > .eyebrow"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button type=\"button\" data-freq=\"once\" aria-pressed=\"false\">One-time</button>",
          "target": [
            "button[data-freq=\"once\"]"
          ]
        }
      ]
    },
    {
      "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>No neighbor left in the dark. <em>Every community ready to rise.</em></h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>Support Cause: Give Today</h2>",
                  "target": [
                    "#donateForm > h2"
                  ]
                },
                {
                  "html": "<h2>Community care that is built to last</h2>",
                  "target": [
                    ".reveal:nth-child(2) > h2"
                  ]
                },
                {
                  "html": "<h2>Six ways we strengthen communities</h2>",
                  "target": [
                    "#programs > .container > .center.section-head.reveal > h2"
                  ]
                },
                {
                  "html": "<h3>Harvest Table Pantries</h3>",
                  "target": [
                    ".grid-3 > .card:nth-child(1) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Bright Paths Mentoring</h3>",
                  "target": [
                    ".grid-3 > .card:nth-child(2) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Keystone Housing Stability</h3>",
                  "target": [
                    ".card:nth-child(3) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Beacon Ready Network</h3>",
                  "target": [
                    ".card:nth-child(4) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Pathway Works</h3>",
                  "target": [
                    ".card:nth-child(5) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Lantern Senior Connect</h3>",
                  "target": [
                    ".card:nth-child(6) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h2>Changing the systems behind the struggle</h2>",
                  "target": [
                    "#advocacy > .container > .section-head.reveal > h2"
                  ]
                },
                {
                  "html": "<h3 style=\"font-size:1.7rem\">Secure Homes Campaign</h3>",
                  "target": [
                    ".adv-row.reveal:nth-child(2) > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3 style=\"font-size:1.7rem\">Full Plates, Full Futures</h3>",
                  "target": [
                    ".rev > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h2>Your time is the most powerful gift</h2>",
                  "target": [
                    ".vol-grid > .reveal:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h3>Pantry &amp; Mobile Market Crew</h3>",
                  "target": [
                    ".role:nth-child(1) > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Mentors &amp; Tutors</h3>",
                  "target": [
                    ".role:nth-child(2) > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Disaster Response Team</h3>",
                  "target": [
                    ".role:nth-child(3) > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Skills-Based Pro Bono</h3>",
                  "target": [
                    ".role:nth-child(4) > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Volunteer signup</h3>",
                  "target": [
                    "#volFields > h3"
                  ]
                },
                {
                  "html": "<h2>Accountable to every donor, every day</h2>",
                  "target": [
                    ".fin-grid > .reveal:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h3>Where every dollar goes</h3>",
                  "target": [
                    ".donut-wrap > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h2>The people behind the numbers</h2>",
                  "target": [
                    "#stories > .container > .center.section-head.reveal > h2"
                  ]
                },
                {
                  "html": "<h2>Latest from Harborlight</h2>",
                  "target": [
                    "#news > .container > .section-head.reveal > h2"
                  ]
                },
                {
                  "html": "<h3 style=\"font-size:1.45rem\">New Eastside Community Hub opens its doors</h3>",
                  "target": [
                    ".body > h3"
                  ]
                },
                {
                  "html": "<h3>Right-to-counsel expands to a third county</h3>",
                  "target": [
                    ".post:nth-child(1) > div > h3"
                  ]
                },
                {
                  "html": "<h3>Coastal Credit Union pledges $750,000 over three years</h3>",
                  "target": [
                    ".post:nth-child(2) > div > h3"
                  ]
                },
                {
                  "html": "<h3>1,000 households now covered by Beacon Ready kits</h3>",
                  "target": [
                    ".post:nth-child(3) > div > h3"
                  ]
                },
                {
                  "html": "<h2>Insights &amp; field notes</h2>",
                  "target": [
                    "#blog > div > h2"
                  ]
                },
                {
                  "html": "<h3>How to plan a high-impact giving year</h3>",
                  "target": [
                    ".blog-grid > .card:nth-child(1) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>What sustainability really means for a food pantry</h3>",
                  "target": [
                    ".blog-grid > .card:nth-child(2) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Upcoming events</h3>",
                  "target": [
                    ".widget.reveal:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Get the monthly Beacon</h3>",
                  "target": [
                    ".news-sign > h3"
                  ]
                },
                {
                  "html": "<h3>Recent updates</h3>",
                  "target": [
                    ".widget.reveal:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2>Frequently asked questions</h2>",
                  "target": [
                    "#faq > .container > .center.section-head.reveal > h2"
                  ]
                },
                {
                  "html": "<h2>Together, we can keep the lights on for every neighbor</h2>",
                  "target": [
                    ".container > h2"
                  ]
                },
                {
                  "html": "<h2>Let's start a conversation</h2>",
                  "target": [
                    ".contact-grid > .reveal:nth-child(1) > h2"
                  ]
                },
                {
                  "html": "<h3 style=\"font-size:1.5rem\">Send us a message</h3>",
                  "target": [
                    "#cFields > h3"
                  ]
                },
                {
                  "html": "<h4>Get involved</h4>",
                  "target": [
                    "div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Learn more</h4>",
                  "target": [
                    "div:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Contact</h4>",
                  "target": [
                    "div:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"main\">",
                  "target": [
                    "#main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#cfdbe6",
                "bgColor": "#0c2236",
                "contrastRatio": 11.5,
                "fontSize": "10.3pt (13.76px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 11.5"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span>A registered 501(c)(3) nonprofit \u00b7 EIN 84-3920175 \u00b7 Gold Seal of Transparency</span>",
          "target": [
            ".container > span:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "mainNav",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav class=\"main\" id=\"mainNav\" aria-label=\"Primary\">",
          "target": [
            "#mainNav"
          ]
        }
      ]
    },
    {
      "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\" step=\"1\" placeholder=\"Other 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\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/104x104/1f7a77/ffffff?text=HA&amp;font=montserrat\" alt=\"Harborlight Alliance logo\" width=\"52\" height=\"52\">",
          "target": [
            "a[aria-label=\"Harborlight Alliance home\"] > img[alt=\"Harborlight Alliance logo\"][width=\"52\"][height=\"52\"]"
          ]
        }
      ]
    },
    {
      "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\" step=\"1\" placeholder=\"Other 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 class=\"skip\" href=\"#main\">Skip to main content</a>",
          "target": [
            ".skip"
          ]
        }
      ]
    },
    {
      "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>",
          "target": [
            "#mainNav > ul"
          ]
        }
      ]
    },
    {
      "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><a href=\"#about\">About</a></li>",
          "target": [
            "#mainNav > ul > 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\">",
          "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/104x104/1f7a77/ffffff?text=HA&amp;font=montserrat\" alt=\"Harborlight Alliance logo\" width=\"52\" height=\"52\">",
          "target": [
            "a[aria-label=\"Harborlight Alliance home\"] > img[alt=\"Harborlight Alliance logo\"][width=\"52\"][height=\"52\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"donut\" role=\"img\" aria-label=\"86 percent programs, 8 percent administration, 6 percent fundraising\"></div>",
          "target": [
            ".donut"
          ]
        }
      ]
    },
    {
      "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=\"vArea\">Where would you like to help?</label>",
                  "target": [
                    "label[for=\"vArea\"]"
                  ]
                }
              ],
              "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=\"vArea\">",
          "target": [
            "#vArea"
          ]
        }
      ]
    },
    {
      "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-size",
              "data": {
                "minSize": 24,
                "width": 201.5,
                "height": 48
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (201.5px by 48px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"skip\" href=\"#main\">Skip to main content</a>",
          "target": [
            ".skip"
          ]
        }
      ]
    }
  ],
  "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": {
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": "pseudoContent",
                "expectedContrastRatio": "4.5:1"
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a pseudo element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\" style=\"color:var(--amber)\">Serving the Pacific Northwest since 2009</span>",
          "target": [
            ".hero-grid > div:nth-child(1) > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a pseudo 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.4,
                "requiredContrastRatio": 3,
                "nodeColor": "#ffffff",
                "parentColor": "#cfdbe6"
              },
              "relatedNodes": [
                {
                  "html": "<span>Need help? Call our community line: <a href=\"tel:+15035550142\">(503) 555-0142</a></span>",
                  "target": [
                    ".container > span:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "The link has insufficient color contrast of 1.4:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffffff, surrounding text: #cfdbe6)"
            },
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<span>Need help? Call our community line: <a href=\"tel:+15035550142\">(503) 555-0142</a></span>",
                  "target": [
                    ".container > span:nth-child(2)"
                  ]
                }
              ],
              "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:+15035550142\">(503) 555-0142</a>",
          "target": [
            "span:nth-child(2) > a[href=\"tel:+15035550142\"]"
          ],
          "failureSummary": "Fix any of the following:\n  The link has insufficient color contrast of 1.4:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffffff, surrounding text: #cfdbe6)\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": "#1f7a77",
                "bgColor": "#f1e9db",
                "contrastRatio": 4.23,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section testimonials\" id=\"stories\">",
                  "target": [
                    "#stories"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.23 (foreground color: #1f7a77, background color: #f1e9db, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Stories of Change</span>",
          "target": [
            "#stories > .container > .center.section-head.in > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.23 (foreground color: #1f7a77, background color: #f1e9db, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d6efed",
                "bgColor": "#1f7a77",
                "contrastRatio": 4.24,
                "fontSize": "11.0pt (14.72px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"widget news-sign reveal in\">",
                  "target": [
                    ".news-sign"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.24 (foreground color: #d6efed, background color: #1f7a77, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Stories, impact updates and volunteer openings, delivered once a month. No spam, ever.</p>",
          "target": [
            ".news-sign > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.24 (foreground color: #d6efed, background color: #1f7a77, font size: 11.0pt (14.72px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#1f7a77",
                "bgColor": "#f1e9db",
                "contrastRatio": 4.23,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section testimonials\" id=\"stories\">",
                  "target": [
                    "#stories"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.23 (foreground color: #1f7a77, background color: #f1e9db, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Stories of Change</span>",
          "target": [
            "#stories > .container > .center.section-head.reveal > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.23 (foreground color: #1f7a77, background color: #f1e9db, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 12911
      },
      {
        "y": 576,
        "height": 12911
      },
      {
        "y": 1152,
        "height": 12911
      },
      {
        "y": 1728,
        "height": 12911
      },
      {
        "y": 2304,
        "height": 12911
      },
      {
        "y": 2880,
        "height": 12911
      },
      {
        "y": 3456,
        "height": 12911
      },
      {
        "y": 4032,
        "height": 12911
      },
      {
        "y": 4608,
        "height": 12911
      },
      {
        "y": 5184,
        "height": 12911
      },
      {
        "y": 5760,
        "height": 12911
      },
      {
        "y": 6336,
        "height": 12911
      },
      {
        "y": 6912,
        "height": 12911
      },
      {
        "y": 7488,
        "height": 12911
      },
      {
        "y": 8064,
        "height": 12911
      },
      {
        "y": 8640,
        "height": 12911
      },
      {
        "y": 9216,
        "height": 12911
      },
      {
        "y": 9792,
        "height": 12911
      },
      {
        "y": 10368,
        "height": 12911
      },
      {
        "y": 10944,
        "height": 12911
      },
      {
        "y": 11520,
        "height": 12911
      },
      {
        "y": 12096,
        "height": 12911
      },
      {
        "y": 12191,
        "height": 12911
      }
    ],
    "scans": 24,
    "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 "Non-Profit/Charity" 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: "Non-Profit/Charity"
- Description: Charitable organizations, non-profit initiatives, volunteering, and fundraising resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Non-Profit/Charity" 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: "Programs", "News", "Blog".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Non-Profit/Charity" category. Consider themes similar to: "Advocacy Initiatives", "Annual Reports", "Volunteer Opportunities".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "volunteer hours", "501(c)(3) status", "sustainability".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Contact Us", "Make Donation", "Support Cause".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Non-Profit/Charity" sector. Ideas similar but not limited to: "volunteer signup".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "event calendar", "newsletter signup", "recent news".
-   **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.