StepFun Step 5 Preview – Non Profit Charity

via StepFun · Generated

  • AIMAC Debt 4.85
  • Cost $0.06
  • Total Violations 20
  • HTML Size 49 KB
  • Em Dashes 6

Screenshot

View StepFun Step 5 Preview Non Profit Charity page View Live Page

Accessibility Issues Found

20 Serious

  • color-contrast serious 20 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <a href="#contact" class="btn-nav">Contact</a>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Harborlight Initiative | Illuminating Pathways Out of Poverty</title>
  <meta name="description" content="Harborlight Initiative is a 501(c)(3) nonprofit delivering education, housing stability, and workforce development programs with measurable, lasting impact.">
  <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=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary: #0d9488;
      --primary-dark: #0f766e;
      --accent: #f97316;
      --accent-dark: #ea580c;
      --dark: #0f172a;
      --slate: #334155;
      --light: #f1f5f9;
      --white: #ffffff;
      --radius: 12px;
      --shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      color: var(--slate);
      line-height: 1.6;
      background: var(--white);
    }

    h1, h2, h3, h4 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      color: var(--dark);
      line-height: 1.2;
    }

    img { max-width: 100%; display: block; }

    a { text-decoration: none; color: inherit; }

    ul { list-style: none; }

    .container {
      width: 92%;
      max-width: 1200px;
      margin: 0 auto;
    }

    .section { padding: 5rem 0; }
    .bg-light { background: var(--light); }

    .eyebrow {
      display: inline-block;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--primary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 1rem;
    }

    .section-header {
      max-width: 720px;
      margin: 0 auto 3rem;
      text-align: center;
    }

    .section-header h2 { font-size: 2.25rem; margin-bottom: 1rem; }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.875rem 1.75rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.25s ease;
      font-family: 'Inter', sans-serif;
    }

    .btn-primary {
      background: var(--primary);
      color: var(--white);
    }
    .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); }

    .btn-accent {
      background: var(--accent);
      color: var(--white);
    }
    .btn-accent:hover { background: var(--accent-dark); transform: translateY(-2px); }

    .btn-outline {
      background: transparent;
      color: var(--dark);
      border-color: #cbd5e1;
    }
    .btn-outline:hover { border-color: var(--dark); }

    .btn-light {
      background: var(--white);
      color: var(--dark);
    }
    .btn-light:hover { background: #e2e8f0; }

    .btn-sm { padding: 0.5rem 1.25rem; font-size: 0.9375rem; }

    .link-arrow {
      color: var(--primary);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      transition: gap 0.2s;
    }
    .link-arrow:hover { gap: 0.6rem; }

    /* Header */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid #e2e8f0;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .brand img { border-radius: 8px; }

    .brand-text { display: flex; flex-direction: column; }

    .site-name {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 800;
      font-size: 1.25rem;
      color: var(--dark);
    }

    .tagline {
      font-size: 0.75rem;
      color: #64748b;
      font-weight: 500;
    }

    .main-nav ul {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    .main-nav a {
      font-weight: 500;
      font-size: 0.9375rem;
      color: var(--slate);
      transition: color 0.2s;
    }

    .main-nav a:hover { color: var(--primary); }

    .main-nav .btn-nav {
      background: var(--primary);
      color: var(--white);
      padding: 0.5rem 1.25rem;
      border-radius: 6px;
      font-weight: 600;
    }
    .main-nav .btn-nav:hover { background: var(--primary-dark); }

    .mobile-menu-toggle {
      display: none;
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: var(--dark);
    }

    /* Hero */
    .hero { padding: 4rem 0 5rem; }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }

    .hero-content h1 {
      font-size: 3.25rem;
      margin-bottom: 1.5rem;
      letter-spacing: -0.02em;
    }

    .hero-content p {
      font-size: 1.125rem;
      color: #475569;
      margin-bottom: 2rem;
      max-width: 540px;
    }

    .hero-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .hero-image {
      position: relative;
    }

    .hero-image img {
      border-radius: 16px;
      box-shadow: var(--shadow);
      aspect-ratio: 4/5;
      object-fit: cover;
      width: 100%;
    }

    /* Stats */
    .stats {
      background: var(--dark);
      color: var(--white);
      padding: 3rem 0;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      text-align: center;
    }

    .stat h3 {
      font-size: 2.5rem;
      color: var(--white);
      margin-bottom: 0.25rem;
    }

    .stat p {
      color: #94a3b8;
      font-size: 0.9375rem;
      font-weight: 500;
    }

    /* Mission */
    .mission-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3.5rem;
      align-items: center;
    }

    .mission-image img {
      border-radius: 16px;
      box-shadow: var(--shadow);
      aspect-ratio: 4/3;
      object-fit: cover;
    }

    .mission-text h2 { font-size: 2.25rem; margin-bottom: 1.5rem; }

    .mission-text p { margin-bottom: 1.25rem; color: #475569; }

    .check-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      margin-top: 1.5rem;
    }

    .check-list li {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 500;
      color: var(--dark);
    }

    .check-list li::before {
      content: "✓";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      background: #ccfbf1;
      color: var(--primary-dark);
      border-radius: 50%;
      font-size: 0.75rem;
      font-weight: 700;
      flex-shrink: 0;
    }

    /* Programs */
    .programs-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }

    .program-card {
      background: var(--white);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 20px -8px rgba(15, 23, 42, 0.1);
      border: 1px solid #e2e8f0;
      transition: transform 0.3s, box-shadow 0.3s;
      display: flex;
      flex-direction: column;
    }

    .program-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow);
    }

    .program-card img {
      aspect-ratio: 16/9;
      object-fit: cover;
      width: 100%;
    }

    .card-body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }

    .card-body h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }

    .card-body p { color: #475569; margin-bottom: 1.25rem; flex: 1; }

    /* Impact */
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }

    .testimonial-card {
      background: var(--white);
      padding: 2rem;
      border-radius: 16px;
      box-shadow: 0 4px 20px -8px rgba(15, 23, 42, 0.08);
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .testimonial-card blockquote {
      font-size: 1.0625rem;
      color: var(--dark);
      font-style: italic;
      line-height: 1.7;
    }

    .testimonial-card figcaption {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-top: auto;
    }

    .testimonial-card figcaption img {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      object-fit: cover;
    }

    .testimonial-card strong { display: block; color: var(--dark); }

    .testimonial-card span { font-size: 0.875rem; color: #64748b; }

    /* Events */
    .events-list {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      max-width: 860px;
      margin: 0 auto;
    }

    .event-card {
      display: flex;
      gap: 1.5rem;
      background: var(--white);
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 1.5rem;
      transition: border-color 0.25s, box-shadow 0.25s;
    }

    .event-card:hover {
      border-color: var(--primary);
      box-shadow: var(--shadow);
    }

    .event-date {
      background: #f0fdfa;
      color: var(--primary-dark);
      border-radius: 10px;
      width: 72px;
      height: 72px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .event-date .day { font-size: 1.5rem; font-weight: 800; line-height: 1; }
    .event-date .month { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; }

    .event-info h3 { font-size: 1.1875rem; margin-bottom: 0.35rem; }

    .event-meta {
      font-size: 0.875rem;
      color: #64748b;
      font-weight: 500;
      margin-bottom: 0.75rem;
    }

    .event-info p { color: #475569; margin-bottom: 1rem; }

    /* Blog & Sidebar */
    .blog-layout {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 3rem;
      align-items: start;
    }

    .blog-main h2 { font-size: 2rem; margin-bottom: 2rem; }

    .blog-post {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 1.5rem;
      background: var(--white);
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 1.5rem;
      transition: box-shadow 0.25s;
    }

    .blog-post:hover { box-shadow: var(--shadow); }

    .blog-post img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      aspect-ratio: 4/3;
    }

    .post-content { padding: 1.5rem 1.5rem 1.5rem 0; }

    .post-meta {
      display: block;
      font-size: 0.8125rem;
      color: var(--primary);
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .post-content h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }

    .post-content p { color: #475569; margin-bottom: 1rem; }

    .sidebar { display: flex; flex-direction: column; gap: 1.75rem; }

    .widget {
      background: var(--white);
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 1.75rem;
    }

    .widget h3 {
      font-size: 1.125rem;
      margin-bottom: 1rem;
      padding-bottom: 0.75rem;
      border-bottom: 2px solid var(--light);
    }

    .widget img {
      border-radius: 10px;
      margin-bottom: 1rem;
      aspect-ratio: 3/2;
      object-fit: cover;
    }

    .widget p { color: #475569; margin-bottom: 1rem; }

    .donor-list li {
      padding: 0.625rem 0;
      border-bottom: 1px solid #f1f5f9;
      font-size: 0.9375rem;
    }

    .donor-list li:last-child { border-bottom: none; }

    .donor-list strong { color: var(--dark); }

    .newsletter form { display: flex; flex-direction: column; gap: 0.75rem; }

    .newsletter input {
      padding: 0.75rem 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-family: inherit;
      font-size: 0.9375rem;
    }

    .newsletter input:focus { outline: 2px solid var(--primary); border-color: transparent; }

    /* FAQ */
    .accordion { max-width: 760px; margin: 0 auto; }

    .accordion-item {
      background: var(--white);
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      margin-bottom: 0.875rem;
      overflow: hidden;
    }

    .accordion-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 1.5rem;
      background: none;
      border: none;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--dark);
      cursor: pointer;
      text-align: left;
    }

    .accordion-header .icon {
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--primary);
      transition: transform 0.3s;
      flex-shrink: 0;
      margin-left: 1rem;
    }

    .accordion-item.active .icon { transform: rotate(45deg); }

    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }

    .accordion-content p {
      padding: 0 1.5rem 1.5rem;
      color: #475569;
    }

    .accordion-item.active .accordion-content { max-height: 400px; }

    /* CTA Banner */
    .cta-banner {
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      color: var(--white);
      padding: 4rem 0;
      text-align: center;
    }

    .cta-banner h2 { color: var(--white); font-size: 2.25rem; margin-bottom: 1rem; }

    .cta-banner p {
      max-width: 620px;
      margin: 0 auto 2rem;
      color: #ccfbf1;
      font-size: 1.0625rem;
    }

    .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

    /* Footer */
    .site-footer {
      background: var(--dark);
      color: #94a3b8;
      padding: 4rem 0 0;
      font-size: 0.9375rem;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 3rem;
      padding-bottom: 3rem;
    }

    .footer-about .brand { margin-bottom: 1.25rem; }
    .footer-about .site-name { color: var(--white); }
    .footer-about p { margin-bottom: 1rem; line-height: 1.7; }

    .footer-col h4 {
      color: var(--white);
      font-size: 1rem;
      margin-bottom: 1.25rem;
    }

    .footer-col li { margin-bottom: 0.75rem; }

    .footer-col a:hover { color: var(--white); }

    .footer-bottom {
      border-top: 1px solid #1e293b;
      padding: 1.5rem 0;
      font-size: 0.875rem;
    }

    .footer-bottom .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .socials { display: flex; gap: 1rem; }

    .socials a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: #1e293b;
      border-radius: 50%;
      transition: background 0.25s;
    }

    .socials a:hover { background: var(--primary); }

    .socials svg { width: 18px; height: 18px; fill: #94a3b8; }
    .socials a:hover svg { fill: var(--white); }

    /* Modal */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.7);
      backdrop-filter: blur(4px);
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s;
    }

    .modal-overlay.active { opacity: 1; pointer-events: all; }

    .modal {
      background: var(--white);
      border-radius: 16px;
      width: 100%;
      max-width: 520px;
      padding: 2rem;
      position: relative;
      transform: translateY(20px);
      transition: transform 0.25s;
      max-height: 90vh;
      overflow-y: auto;
    }

    .modal-overlay.active .modal { transform: translateY(0); }

    .modal-close {
      position: absolute;
      top: 1rem;
      right: 1.25rem;
      background: none;
      border: none;
      font-size: 1.75rem;
      cursor: pointer;
      color: #64748b;
      line-height: 1;
    }

    .modal h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }

    .modal > p { color: #475569; margin-bottom: 1.5rem; }

    .modal form { display: flex; flex-direction: column; gap: 1rem; }

    .modal label {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--dark);
      display: block;
      margin-bottom: 0.375rem;
    }

    .modal input, .modal select, .modal textarea {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-family: inherit;
      font-size: 0.9375rem;
    }

    .modal textarea { resize: vertical; min-height: 90px; }

    .modal input:focus, .modal select:focus, .modal textarea:focus {
      outline: 2px solid var(--primary);
      border-color: transparent;
    }

    .success-message {
      text-align: center;
      padding: 1rem 0;
    }

    .success-message h4 {
      color: var(--primary-dark);
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }

    /* Reveal */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .hero-content h1 { font-size: 2.5rem; }
      .programs-grid { grid-template-columns: 1fr; }
      .testimonials-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
      .blog-layout { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    }

    @media (max-width: 768px) {
      .mobile-menu-toggle { display: block; }

      .main-nav ul {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem;
        gap: 0.75rem;
        border-bottom: 1px solid #e2e8f0;
        box-shadow: var(--shadow);
        transform: translateY(-150%);
        transition: transform 0.3s ease;
        z-index: 99;
      }

      .main-nav ul.active { transform: translateY(0); }

      .main-nav a { display: block; padding: 0.75rem 0; font-size: 1.0625rem; }

      .main-nav .btn-nav { text-align: center; margin-top: 0.5rem; }

      .hero-grid, .mission-grid { grid-template-columns: 1fr; }
      .hero-image { order: -1; }
      .hero-image img { aspect-ratio: 4/3; }
      .stats-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
      .check-list { grid-template-columns: 1fr; }
      .blog-post { grid-template-columns: 1fr; }
      .post-content { padding: 1.5rem; }
      .footer-grid { grid-template-columns: 1fr; }
      .event-card { flex-direction: column; }
    }
  </style>
</head>
<body>

  <!-- Header -->
  <header class="site-header">
    <div class="container header-inner">
      <a href="#home" class="brand">
        <img src="https://placehold.co/48x48/0d9488/ffffff?text=HL&font=lato" alt="Harborlight Initiative logo">
        <span class="brand-text">
          <span class="site-name">Harborlight Initiative</span>
          <span class="tagline">Illuminating pathways out of poverty</span>
        </span>
      </a>

      <nav class="main-nav" aria-label="Primary navigation">
        <button class="mobile-menu-toggle" aria-label="Toggle menu">☰</button>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#programs">Programs</a></li>
          <li><a href="#impact">Impact</a></li>
          <li><a href="#events">Events</a></li>
          <li><a href="#blog">Blog</a></li>
          <li><a href="#volunteer">Volunteer</a></li>
          <li><a href="#contact" class="btn-nav">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
    <!-- Hero -->
    <section class="hero" id="home">
      <div class="container hero-grid">
        <div class="hero-content reveal">
          <span class="eyebrow">A 501(c)(3) Nonprofit Organization</span>
          <h1>Building resilient communities through sustainable action.</h1>
          <p>Harborlight Initiative partners with underserved neighborhoods to deliver education, housing stability, and workforce development programs that create measurable, generational change. Since 2008, we have walked alongside families as they move from crisis to self-sufficiency.</p>
          <div class="hero-actions">
            <a href="#contact" class="btn btn-accent">Give Now</a>
            <a href="#volunteer" class="btn btn-outline">Take Action</a>
          </div>
        </div>
        <div class="hero-image reveal">
          <img src="https://picsum.photos/seed/harborlight-community/800/1000" alt="Volunteers and community members gathered at a neighborhood event">
        </div>
      </div>
    </section>

    <!-- Stats -->
    <section class="stats" aria-label="Organizational impact statistics">
      <div class="container stats-grid">
        <div class="stat reveal">
          <h3>88¢</h3>
          <p>of every dollar to programs</p>
        </div>
        <div class="stat reveal">
          <h3>84,000+</h3>
          <p>lives impacted last year</p>
        </div>
        <div class="stat reveal">
          <h3>1,200</h3>
          <p>active volunteers nationwide</p>
        </div>
        <div class="stat reveal">
          <h3>17</h3>
          <p>years of community service</p>
        </div>
      </div>
    </section>

    <!-- Mission -->
    <section class="section" id="about">
      <div class="container mission-grid">
        <div class="mission-image reveal">
          <img src="https://picsum.photos/seed/harborlight-meeting/800/600" alt="Community stakeholders in a collaborative planning session">
        </div>
        <div class="mission-text reveal">
          <h2>Mission, Accountability & Impact Measurement</h2>
          <p>Founded in 2008, Harborlight Initiative operates at the intersection of direct service and systemic advocacy. We believe that transparent impact measurement and community-led solutions are the cornerstones of effective charitable giving. Through our holistic program model, we address immediate needs while building long-term resilience.</p>
          <p>Every dollar entrusted to us is stewarded with rigorous financial accountability. Our annual independent audits and program efficiency ratios ensure that 88 cents of every dollar goes directly to front-line services, with the remainder supporting critical administrative infrastructure that sustains our growth and expansion.</p>
          <ul class="check-list">
            <li>Gold Transparency Seal (Candid)</li>
            <li>IRS Form 990 Publicly Available</li>
            <li>Independent Annual Audit</li>
            <li>Outcome-Based Data Framework</li>
          </ul>
        </div>
      </div>
    </section>

    <!-- Programs -->
    <section class="section bg-light" id="programs">
      <div class="container">
        <div class="section-header reveal">
          <h2>Our Programs</h2>
          <p>We design interventions that are evidence-based, culturally responsive, and accountable to the people we serve. Each initiative is evaluated quarterly against clear outcome metrics.</p>
        </div>
        <div class="programs-grid">
          <article class="program-card reveal">
            <img src="https://picsum.photos/seed/harborlight-education/600/400" alt="Students engaged in a tutoring session">
            <div class="card-body">
              <h3>Bright Futures Education</h3>
              <p>Our flagship education initiative pairs K–12 students with certified tutors and mentors while providing digital literacy access to families. Since inception, 94% of participants have improved their academic performance by at least one letter grade.</p>
              <a href="#" class="link-arrow">Learn More →</a>
            </div>
          </article>

          <article class="program-card reveal">
            <img src="https://picsum.photos/seed/harborlight-housing/600/400" alt="Family reviewing housing documents with a case manager">
            <div class="card-body">
              <h3>Stable Ground Housing</h3>
              <p>We combine emergency rental assistance with long-term housing navigation to prevent evictions and reduce homelessness. Our case managers work one-on-one with families to secure stable, affordable housing within 90 days of intake.</p>
              <a href="#" class="link-arrow">Learn More →</a>
            </div>
          </article>

          <article class="program-card reveal">
            <img src="https://picsum.photos/seed/harborlight-employment/600/400" alt="Job training workshop participant at work">
            <div class="card-body">
              <h3>Pathways to Employment</h3>
              <p>This workforce development program offers industry-recognized certifications, mock interviews, and direct placement with regional employers. Last year, 82% of graduates secured living-wage employment within six months of completion.</p>
              <a href="#" class="link-arrow">Learn More →</a>
            </div>
          </article>

          <article class="program-card reveal">
            <img src="https://picsum.photos/seed/harborlight-health/600/400" alt="Mobile health clinic serving a rural neighborhood">
            <div class="card-body">
              <h3>Health & Wellness Access</h3>
              <p>Our mobile clinics and telehealth partnerships bring preventative care and mental health counseling to neighborhoods designated as medical deserts. We believe health equity is a fundamental human right and a prerequisite for economic mobility.</p>
              <a href="#" class="link-arrow">Learn More →</a>
            </div>
          </article>
        </div>
      </div>
    </section>

    <!-- Impact -->
    <section class="section" id="impact">
      <div class="container">
        <div class="section-header reveal">
          <h2>Real Impact, Measured</h2>
          <p>Impact measurement is not an afterthought at Harborlight; it is the foundation of how we design, fund, and scale our work. Our data team tracks longitudinal outcomes across every program, publishing findings quarterly to keep donors, partners, and community members informed.</p>
        </div>
        <div class="testimonials-grid">
          <figure class="testimonial-card reveal">
            <blockquote>"Harborlight didn't just give me a meal; they gave me the tools to feed my family for a lifetime. The housing program and job training happened side by side, and that made all the difference."</blockquote>
            <figcaption>
              <img src="https://i.pravatar.cc/100?u=maria" alt="Maria Rodriguez">
              <div>
                <strong>Maria Rodriguez</strong>
                <span>Program Graduate, 2022</span>
              </div>
            </figcaption>
          </figure>

          <figure class="testimonial-card reveal">
            <blockquote>"As a corporate partner, we've seen firsthand how their impact measurement frameworks deliver real ROI for community investment. Our employees leave every volunteer day feeling genuinely connected to the mission."</blockquote>
            <figcaption>
              <img src="https://i.pravatar.cc/100?u=james" alt="James Chen">
              <div>
                <strong>James Chen</strong>
                <span>VP Community Relations, Northline Corp</span>
              </div>
            </figcaption>
          </figure>

          <figure class="testimonial-card reveal">
            <blockquote>"Volunteering with the mobile clinics has been the most rewarding experience of my career. I've watched a rural neighborhood go from distrusting healthcare to proactively managing chronic conditions."</blockquote>
            <figcaption>
              <img src="https://i.pravatar.cc/100?u=aisha" alt="Dr. Aisha Patel">
              <div>
                <strong>Dr. Aisha Patel</strong>
                <span>Lead Volunteer Nurse</span>
              </div>
            </figcaption>
          </figure>
        </div>
      </div>
    </section>

    <!-- Events (Interactive) -->
    <section class="section bg-light" id="events">
      <div class="container">
        <div class="section-header reveal">
          <h2>Volunteer & Community Events</h2>
          <p>From one-day service projects to semester-long mentorship commitments, there is a place for you on our team. Browse upcoming opportunities and reserve your spot today.</p>
        </div>

        <div class="events-list">
          <div class="event-card reveal">
            <div class="event-date">
              <span class="day">14</span>
              <span class="month">Oct</span>
            </div>
            <div class="event-info">
              <h3>Weekend Food Distribution</h3>
              <p class="event-meta">Saturday, October 14 | 9:00 AM – 1:00 PM | Eastside Warehouse</p>
              <p>Help us sort, pack, and distribute fresh groceries to 300 families across the Eastside corridor. No experience necessary; training and safety equipment are provided on-site.</p>
              <button class="btn btn-sm btn-primary" data-event="Weekend Food Distribution">Register</button>
            </div>
          </div>

          <div class="event-card reveal">
            <div class="event-date">
              <span class="day">25</span>
              <span class="month">Oct</span>
            </div>
            <div class="event-info">
              <h3>Youth Mentorship Kickoff</h3>
              <p class="event-meta">Wednesday, October 25 | 5:30 PM – 7:30 PM | Harborlight Learning Center</p>
              <p>Meet your mentee and fellow volunteers at our semester kickoff. Light refreshments, curriculum orientation, and team-building activities are included for all attendees.</p>
              <button class="btn btn-sm btn-primary" data-event="Youth Mentorship Kickoff">Register</button>
            </div>
          </div>

          <div class="event-card reveal">
            <div class="event-date">
              <span class="day">17</span>
              <span class="month">Nov</span>
            </div>
            <div class="event-info">
              <h3>Annual Harborlight Gala</h3>
              <p class="event-meta">Friday, November 17 | 6:00 PM – 10:00 PM | The Riverside Pavilion</p>
              <p>An evening of celebration and fundraising featuring keynote speakers, live music, and our annual Impact Awards. Black-tie optional. Proceeds directly fund our winter emergency assistance fund.</p>
              <button class="btn btn-sm btn-primary" data-event="Annual Harborlight Gala">Register</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Blog & Sidebar -->
    <section class="section" id="blog">
      <div class="container blog-layout">
        <div class="blog-main reveal">
          <h2>Organization News & Insights</h2>

          <article class="blog-post">
            <img src="https://picsum.photos/seed/harborlight-data/600/400" alt="Data dashboard on a laptop screen">
            <div class="post-content">
              <span class="post-meta">October 2, 2024 | Research</span>
              <h3>How We Measure Real Impact: Inside Our 2024 Data Framework</h3>
              <p>Transparency is the bedrock of trust in the nonprofit sector. This quarter, we published our revised Impact Measurement Framework, which moves beyond output metrics—such as meals served or tutoring hours logged—to outcome-based indicators that track long-term stability. By leveraging secure, cloud-based case management systems, our program directors can now visualize a family's journey from intake to self-sufficiency in real time.</p>
              <a href="#" class="link-arrow">Read Article →</a>
            </div>
          </article>

          <article class="blog-post">
            <img src="https://picsum.photos/seed/harborlight-partnership/600/400" alt="Corporate volunteers at a team service day">
            <div class="post-content">
              <span class="post-meta">September 18, 2024 | Partnerships</span>
              <h3>Corporate Partnerships That Go Beyond Check Writing</h3>
              <p>True corporate social responsibility requires more than an annual donation. Harborlight's Premier Partner Program invites businesses to embed their teams into our volunteer pipeline, offer pro bono professional services, and co-design workforce curriculum. Together with our partners, we are building a talent pipeline that reflects the communities we serve while driving measurable ESG outcomes.</p>
              <a href="#" class="link-arrow">Read Article →</a>
            </div>
          </article>

          <article class="blog-post">
            <img src="https://picsum.photos/seed/harborlight-clinic/600/400" alt="Volunteer nurse preparing medical supplies">
            <div class="post-content">
              <span class="post-meta">August 29, 2024 | Volunteer Spotlight</span>
              <h3>Meet the Team Behind Our Mobile Clinics</h3>
              <p>Behind every mobile clinic route is a dedicated crew of volunteer nurses, drivers, and community health workers. This month, we profile the individuals who brave early mornings and long hours to ensure that rural families receive the preventative care they deserve. Their stories remind us that healthcare access is ultimately a human endeavor.</p>
              <a href="#" class="link-arrow">Read Article →</a>
            </div>
          </article>
        </div>

        <aside class="sidebar reveal" id="volunteer">
          <div class="widget">
            <h3>Volunteer Spotlight</h3>
            <img src="https://i.pravatar.cc/600?u=sarah" alt="Sarah Mitchell, volunteer coordinator">
            <p>Sarah Mitchell has logged over 400 volunteer hours in our after-school literacy program since 2019. "I came in to help kids read," she says. "I stayed because I watched a whole neighborhood transform."</p>
            <a href="#events" class="link-arrow">Join the Team →</a>
          </div>

          <div class="widget">
            <h3>Donor Recognition</h3>
            <p>Members of our Changemakers Circle provide the unrestricted funding that allows us to respond to emerging community needs with agility and speed.</p>
            <ul class="donor-list">
              <li><strong>Visionary Level</strong> — $10,000+ annually</li>
              <li><strong>Benefactor Level</strong> — $5,000+ annually</li>
              <li><strong>Advocate Level</strong> — $1,000+ annually</li>
              <li><strong>Sustainer Level</strong> — $500+ annually</li>
            </ul>
          </div>

          <div class="widget newsletter">
            <h3>Stay Connected</h3>
            <p>Get monthly impact reports, volunteer alerts, and giving opportunities delivered straight to your inbox.</p>
            <form onsubmit="event.preventDefault(); this.reset(); alert('Thank you for subscribing!');">
              <input type="text" name="name" placeholder="First Name" required>
              <input type="email" name="email" placeholder="Email Address" required>
              <button type="submit" class="btn btn-primary">Subscribe</button>
            </form>
          </div>
        </aside>
      </div>
    </section>

    <!-- FAQ -->
    <section class="section bg-light" id="faq">
      <div class="container">
        <div class="section-header reveal">
          <h2>Frequently Asked Questions</h2>
          <p>Everything you need to know about charitable giving, volunteer commitments, and organizational stewardship.</p>
        </div>

        <div class="accordion reveal">
          <div class="accordion-item">
            <button class="accordion-header">Is my donation tax-deductible?<span class="icon">+</span></button>
            <div class="accordion-content">
              <p>Yes. Harborlight Initiative is a registered 501(c)(3) tax-exempt organization under EIN 12-3456789. All charitable giving is tax-deductible to the extent allowed by law. You will receive an electronic receipt immediately upon donation, and our donor care team is available to answer questions about stock gifts, matching programs, and donor-advised funds.</p>
            </div>
          </div>

          <div class="accordion-item">
            <button class="accordion-header">How does Harborlight allocate its funds?<span class="icon">+</span></button>
            <div class="accordion-content">
              <p>We maintain a program efficiency ratio of 88%, meaning 88% of total expenses go directly to program services. The remaining 12% funds essential administration and fundraising operations that keep our infrastructure secure and scalable. Our audited financial statements and IRS Form 990 are available for public review on our Financial Transparency page.</p>
            </div>
          </div>

          <div class="accordion-item">
            <button class="accordion-header">Can my company partner with Harborlight?<span class="icon">+</span></button>
            <div class="accordion-content">
              <p>Absolutely. We offer tailored corporate partnerships including employee matching gifts, team volunteer days, cause-marketing campaigns, and pro bono skills-sharing. Contact our partnerships team at partners@harborlight.org to explore opportunities aligned with your corporate social responsibility goals.</p>
            </div>
          </div>

          <div class="accordion-item">
            <button class="accordion-header">What does the volunteer commitment look like?<span class="icon">+</span></button>
            <div class="accordion-content">
              <p>Volunteer commitments vary by program. Most ongoing opportunities require a minimum of two hours per week for a three-month term, though one-time event volunteering is always available. All volunteers receive orientation, background screening, and ongoing support from our dedicated volunteer coordinators.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA Banner -->
    <section class="cta-banner" id="contact">
      <div class="container reveal">
        <h2>Ready to make a difference?</h2>
        <p>Whether you give your time, your resources, or your voice, you become part of a movement building resilient communities. Choose how you want to show up today.</p>
        <div class="cta-actions">
          <a href="#" class="btn btn-accent">Host Fundraiser</a>
          <a href="#" class="btn btn-light">Give Now</a>
        </div>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="site-footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-about">
          <div class="brand">
            <img src="https://placehold.co/48x48/0d9488/ffffff?text=HL&font=lato" alt="Harborlight Initiative logo">
            <span class="brand-text">
              <span class="site-name">Harborlight Initiative</span>
              <span class="tagline" style="color:#64748b">Illuminating pathways out of poverty</span>
            </span>
          </div>
          <p>A 501(c)(3) nonprofit dedicated to education, housing stability, and workforce development. We believe in transparent impact measurement and community-led solutions.</p>
        </div>

        <div class="footer-col">
          <h4>Contact</h4>
          <ul>
            <li>1234 Beacon Street, Suite 400<br>Portland, OR 97205</li>
            <li><a href="tel:+15035550142">(503) 555-0142</a></li>
            <li><a href="mailto:hello@harborlight.org">hello@harborlight.org</a></li>
            <li>Tax ID: 12-3456789</li>
          </ul>
        </div>

        <div class="footer-col">
          <h4>Quick Links</h4>
          <ul>
            <li><a href="#programs">Programs</a></li>
            <li><a href="#impact">Impact Report</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#events">Volunteer</a></li>
            <li><a href="#contact">Donate</a></li>
          </ul>
        </div>

        <div class="footer-col">
          <h4>Legal</h4>
          <ul>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Terms of Service</a></li>
            <li><a href="#">Financial Transparency</a></li>
            <li><a href="#">Accessibility</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="footer-bottom">
      <div class="container">
        <p>&copy; <span id="year"></span> Harborlight Initiative. All rights reserved.</p>
        <div class="socials">
          <a href="#" aria-label="Facebook">
            <svg viewBox="0 0 24 24"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>
          </a>
          <a href="#" aria-label="Twitter">
            <svg viewBox="0 0 24 24"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.87c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg>
          </a>
          <a href="#" aria-label="Instagram">
            <svg viewBox="0 0 24 24"><path d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428A4.88 4.88 0 0 1 2.678 3.678 4.897 4.897 0 0 1 4.45 2.525c.638-.248 1.362-.415 2.428-.465C7.944 2.013 8.283 2 12 2zm0 1.802c-2.67 0-2.986.01-4.04.058-.976.045-1.505.207-1.858.344-.466.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.048 1.055-.058 1.37-.058 4.04 0 2.672.01 2.986.058 4.04.045.977.207 1.505.344 1.858.182.466.398.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.04.058 2.672 0 2.986-.01 4.04-.058.977-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.04 0-2.672-.01-2.986-.058-4.04-.045-.977-.207-1.505-.344-1.858a3.097 3.097 0 0 0-.748-1.15 3.098 3.098 0 0 0-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.055-.048-1.37-.058-4.04-.058zm0 3.064A5.135 5.135 0 1 1 12 17.135 5.135 5.135 0 0 1 12 6.865zm0 1.802a3.333 3.333 0 1 0 0 6.666 3.333 3.333 0 0 0 0-6.666zm6.538-2.66a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z"/></svg>
          </a>
          <a href="#" aria-label="LinkedIn">
            <svg viewBox="0 0 24 24"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .92.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/></svg>
          </a>
          <a href="#" aria-label="YouTube">
            <svg viewBox="0 0 24 24"><path d="M23 12s0-3.9-.5-5.77c-.28-.98-1.09-1.76-2.07-2.04C18.56 3.69 12 3.69 12 3.69s-6.56 0-8.43.5c-.98.28-1.79 1.06-2.07 2.04C1 8.1 1 12 1 12s0 3.9.5 5.77c.28.98 1.09 1.76 2.07 2.04 1.87.5 8.43.5 8.43.5s6.56 0 8.43-.5c.98-.28 1.79-1.06 2.07-2.04.5-1.87.5-5.77.5-5.77zM9.75 15.5v-7l6 3.5-6 3.5z"/></svg>
          </a>
        </div>
      </div>
    </div>
  </footer>

  <!-- Registration Modal -->
  <div class="modal-overlay" id="registerModal" role="dialog" aria-modal="true" aria-labelledby="modalEventName">
    <div class="modal">
      <button class="modal-close" aria-label="Close registration form">&times;</button>
      <h3>Event Registration</h3>
      <p>You are registering for: <strong id="modalEventName"></strong></p>
      <form id="registrationForm">
        <div>
          <label for="regName">Full Name</label>
          <input type="text" id="regName" name="name" required placeholder="Jane Doe">
        </div>
        <div>
          <label for="regEmail">Email Address</label>
          <input type="email" id="regEmail" name="email" required placeholder="jane@example.com">
        </div>
        <div>
          <label for="regPhone">Phone (Optional)</label>
          <input type="tel" id="regPhone" name="phone" placeholder="(555) 123-4567">
        </div>
        <div>
          <label for="regEvent">Select Event</label>
          <select id="regEvent" name="event">
            <option>Weekend Food Distribution</option>
            <option>Youth Mentorship Kickoff</option>
            <option>Annual Harborlight Gala</option>
          </select>
        </div>
        <div>
          <label for="regNotes">Questions or Accommodations</label>
          <textarea id="regNotes" name="notes" placeholder="Let us know how we can help..."></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Complete Registration</button>
      </form>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // Dynamic copyright year
      var yearSpan = document.getElementById('year');
      if (yearSpan) yearSpan.textContent = new Date().getFullYear();

      // Mobile menu toggle
      var toggle = document.querySelector('.mobile-menu-toggle');
      var navList = document.querySelector('.main-nav ul');
      if (toggle && navList) {
        toggle.addEventListener('click', function () {
          navList.classList.toggle('active');
        });
      }

      // Close mobile menu when clicking a link
      document.querySelectorAll('.main-nav a').forEach(function (link) {
        link.addEventListener('click', function () {
          if (navList) navList.classList.remove('active');
        });
      });

      // Accordion
      var accHeaders = document.querySelectorAll('.accordion-header');
      accHeaders.forEach(function (header) {
        header.addEventListener('click', function () {
          var item = header.parentElement;
          var isActive = item.classList.contains('active');

          // Close all
          document.querySelectorAll('.accordion-item').forEach(function (i) {
            i.classList.remove('active');
          });

          // Open clicked if it wasn't active
          if (!isActive) item.classList.add('active');
        });
      });

      // Modal logic
      var modal = document.getElementById('registerModal');
      var modalEventName = document.getElementById('modalEventName');
      var regEventSelect = document.getElementById('regEvent');
      var registerBtns = document.querySelectorAll('[data-event]');
      var closeBtn = document.querySelector('.modal-close');

      function openModal(eventName) {
        modalEventName.textContent = eventName;
        regEventSelect.value = eventName;
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
      }

      function closeModal() {
        modal.classList.remove('active');
        document.body.style.overflow = '';
      }

      registerBtns.forEach(function (btn) {
        btn.addEventListener('click', function () {
          openModal(btn.getAttribute('data-event'));
        });
      });

      closeBtn.addEventListener('click', closeModal);

      modal.addEventListener('click', function (e) {
        if (e.target === modal) closeModal();
      });

      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && modal.classList.contains('active')) closeModal();
      });

      // Registration form submission
      var form = document.getElementById('registrationForm');
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        var formData = new FormData(form);
        var name = formData.get('name') || 'Friend';
        var event = formData.get('event');

        form.innerHTML =
          '<div class="success-message">' +
          '<h4>Registration Confirmed</h4>' +
          '<p>Thank you, ' + name + '. We have received your registration for <strong>' + event + '</strong>. A confirmation email with logistics details is on its way.</p>' +
          '</div>';
      });

      // Scroll reveal
      var observer = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            entry.target.classList.add('revealed');
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.12 });

      document.querySelectorAll('.reveal').forEach(function (el) {
        observer.observe(el);
      });
    });
  </script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T10:14:43.678Z",
  "url": "https://benchmark.aimac.invalid/80b24debc79d8b9af43f6762c70c21c6f479836dc67185fd4c2236bfa7bcce17.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": "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": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": "<nav class=\"main-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "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": "<nav class=\"main-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"modal-overlay\" id=\"registerModal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalEventName\">",
          "target": [
            "#registerModal"
          ]
        }
      ]
    },
    {
      "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": "<nav class=\"main-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"modal-overlay\" id=\"registerModal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalEventName\">",
          "target": [
            "#registerModal"
          ]
        }
      ]
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"modal-overlay\" id=\"registerModal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalEventName\">",
          "target": [
            "#registerModal"
          ]
        }
      ]
    },
    {
      "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": "<nav class=\"main-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "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": "<nav class=\"main-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "nav"
          ]
        }
      ]
    },
    {
      "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=\"tagline\" style=\"color:#64748b\">Illuminating pathways out of poverty</span>",
          "target": [
            ".footer-about > .brand > .brand-text > .tagline"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"btn btn-sm btn-primary\" data-event=\"Weekend Food Distribution\">Register</button>",
          "target": [
            "button[data-event=\"Weekend Food Distribution\"]"
          ]
        }
      ]
    },
    {
      "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>Building resilient communities through sustainable action.</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h3>88\u00a2</h3>",
                  "target": [
                    ".stat.reveal:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>84,000+</h3>",
                  "target": [
                    ".stat.reveal:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>1,200</h3>",
                  "target": [
                    ".stat.reveal:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>17</h3>",
                  "target": [
                    ".stat.reveal:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h2>Mission, Accountability &amp; Impact Measurement</h2>",
                  "target": [
                    ".mission-text > h2"
                  ]
                },
                {
                  "html": "<h2>Our Programs</h2>",
                  "target": [
                    "#programs > .container > .section-header.reveal > h2"
                  ]
                },
                {
                  "html": "<h3>Bright Futures Education</h3>",
                  "target": [
                    ".program-card:nth-child(1) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Stable Ground Housing</h3>",
                  "target": [
                    ".program-card:nth-child(2) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Pathways to Employment</h3>",
                  "target": [
                    ".program-card:nth-child(3) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Health &amp; Wellness Access</h3>",
                  "target": [
                    ".program-card:nth-child(4) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h2>Real Impact, Measured</h2>",
                  "target": [
                    "#impact > .container > .section-header.reveal > h2"
                  ]
                },
                {
                  "html": "<h2>Volunteer &amp; Community Events</h2>",
                  "target": [
                    "#events > .container > .section-header.reveal > h2"
                  ]
                },
                {
                  "html": "<h3>Weekend Food Distribution</h3>",
                  "target": [
                    ".event-card.reveal:nth-child(1) > .event-info > h3"
                  ]
                },
                {
                  "html": "<h3>Youth Mentorship Kickoff</h3>",
                  "target": [
                    ".event-card.reveal:nth-child(2) > .event-info > h3"
                  ]
                },
                {
                  "html": "<h3>Annual Harborlight Gala</h3>",
                  "target": [
                    ".event-card.reveal:nth-child(3) > .event-info > h3"
                  ]
                },
                {
                  "html": "<h2>Organization News &amp; Insights</h2>",
                  "target": [
                    ".blog-main > h2"
                  ]
                },
                {
                  "html": "<h3>How We Measure Real Impact: Inside Our 2024 Data Framework</h3>",
                  "target": [
                    ".blog-post:nth-child(2) > .post-content > h3"
                  ]
                },
                {
                  "html": "<h3>Corporate Partnerships That Go Beyond Check Writing</h3>",
                  "target": [
                    ".blog-post:nth-child(3) > .post-content > h3"
                  ]
                },
                {
                  "html": "<h3>Meet the Team Behind Our Mobile Clinics</h3>",
                  "target": [
                    ".blog-post:nth-child(4) > .post-content > h3"
                  ]
                },
                {
                  "html": "<h3>Volunteer Spotlight</h3>",
                  "target": [
                    ".widget:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Donor Recognition</h3>",
                  "target": [
                    ".widget:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Stay Connected</h3>",
                  "target": [
                    ".newsletter > h3"
                  ]
                },
                {
                  "html": "<h2>Frequently Asked Questions</h2>",
                  "target": [
                    "#faq > .container > .section-header.reveal > h2"
                  ]
                },
                {
                  "html": "<h2>Ready to make a difference?</h2>",
                  "target": [
                    ".container.reveal > h2"
                  ]
                },
                {
                  "html": "<h4>Contact</h4>",
                  "target": [
                    ".footer-col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Quick Links</h4>",
                  "target": [
                    ".footer-col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Legal</h4>",
                  "target": [
                    ".footer-col:nth-child(4) > h4"
                  ]
                },
                {
                  "html": "<h3>Event Registration</h3>",
                  "target": [
                    ".modal > h3"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<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": "#0f172a",
                "bgColor": "#ffffff",
                "contrastRatio": 17.85,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 17.85"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span class=\"site-name\">Harborlight Initiative</span>",
          "target": [
            ".brand[href$=\"#home\"] > .brand-text > .site-name"
          ]
        }
      ]
    },
    {
      "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": "modalEventName",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<strong id=\"modalEventName\"></strong>",
          "target": [
            "#modalEventName"
          ]
        }
      ]
    },
    {
      "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=\"text\" name=\"name\" placeholder=\"First Name\" required=\"\">",
          "target": [
            "input[placeholder=\"First Name\"]"
          ]
        }
      ]
    },
    {
      "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/48x48/0d9488/ffffff?text=HL&amp;font=lato\" alt=\"Harborlight Initiative logo\">",
          "target": [
            ".brand[href$=\"#home\"] > img[alt=\"Harborlight Initiative logo\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "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=\"text\" name=\"name\" placeholder=\"First Name\" required=\"\">",
          "target": [
            "input[placeholder=\"First Name\"]"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a href=\"#home\" class=\"brand\">",
          "target": [
            ".brand[href$=\"#home\"]"
          ]
        }
      ]
    },
    {
      "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": [
            "nav > 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=\"#home\">Home</a></li>",
          "target": [
            "nav > 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.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/48x48/0d9488/ffffff?text=HL&amp;font=lato\" alt=\"Harborlight Initiative logo\">",
          "target": [
            ".brand[href$=\"#home\"] > img[alt=\"Harborlight Initiative logo\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element contains focusable elements"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"modal\">",
          "target": [
            ".modal"
          ]
        }
      ]
    },
    {
      "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=\"regEvent\">Select Event</label>",
                  "target": [
                    "label[for=\"regEvent\"]"
                  ]
                }
              ],
              "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=\"regEvent\" name=\"event\">\n            <option>Weekend Food Distribution</option>\n            <option>Youth Mentorship Kickoff</option>\n            <option>Annual Harborlight Gala</option>\n          </select>",
          "target": [
            "#regEvent"
          ]
        }
      ]
    },
    {
      "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": 269,
                "height": 51.2
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (269px by 51.2px, 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 href=\"#home\" class=\"brand\">",
          "target": [
            ".brand[href$=\"#home\"]"
          ]
        }
      ]
    }
  ],
  "incomplete": [],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#0d9488",
                "contrastRatio": 3.74,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#contact\" class=\"btn-nav\">Contact</a>",
                  "target": [
                    ".btn-nav"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#contact\" class=\"btn-nav\">Contact</a>",
          "target": [
            ".btn-nav"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">A 501(c)(3) Nonprofit Organization</span>",
          "target": [
            ".eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f97316",
                "contrastRatio": 2.8,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#contact\" class=\"btn btn-accent\">Give Now</a>",
                  "target": [
                    ".btn-accent.btn[href$=\"#contact\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#contact\" class=\"btn btn-accent\">Give Now</a>",
          "target": [
            ".btn-accent.btn[href$=\"#contact\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#64748b",
                "bgColor": "#0f172a",
                "contrastRatio": 3.75,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"site-footer\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.75 (foreground color: #64748b, background color: #0f172a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tagline\" style=\"color:#64748b\">Illuminating pathways out of poverty</span>",
          "target": [
            ".footer-about > .brand > .brand-text > .tagline"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.75 (foreground color: #64748b, background color: #0f172a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"program-card reveal revealed\">",
                  "target": [
                    ".program-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"link-arrow\">Learn More \u2192</a>",
          "target": [
            ".program-card:nth-child(1) > .card-body > .link-arrow[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"program-card reveal revealed\">",
                  "target": [
                    ".program-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"link-arrow\">Learn More \u2192</a>",
          "target": [
            ".program-card:nth-child(2) > .card-body > .link-arrow[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"program-card reveal revealed\">",
                  "target": [
                    ".program-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"link-arrow\">Learn More \u2192</a>",
          "target": [
            ".program-card:nth-child(3) > .card-body > .link-arrow[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"program-card reveal revealed\">",
                  "target": [
                    ".program-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"link-arrow\">Learn More \u2192</a>",
          "target": [
            ".program-card:nth-child(4) > .card-body > .link-arrow[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#0d9488",
                "contrastRatio": 3.74,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"btn btn-sm btn-primary\" data-event=\"Weekend Food Distribution\">Register</button>",
                  "target": [
                    "button[data-event=\"Weekend Food Distribution\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"btn btn-sm btn-primary\" data-event=\"Weekend Food Distribution\">Register</button>",
          "target": [
            "button[data-event=\"Weekend Food Distribution\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#0d9488",
                "contrastRatio": 3.74,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"btn btn-sm btn-primary\" data-event=\"Youth Mentorship Kickoff\">Register</button>",
                  "target": [
                    "button[data-event=\"Youth Mentorship Kickoff\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"btn btn-sm btn-primary\" data-event=\"Youth Mentorship Kickoff\">Register</button>",
          "target": [
            "button[data-event=\"Youth Mentorship Kickoff\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#0d9488",
                "contrastRatio": 3.74,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button class=\"btn btn-sm btn-primary\" data-event=\"Annual Harborlight Gala\">Register</button>",
                  "target": [
                    "button[data-event=\"Annual Harborlight Gala\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"btn btn-sm btn-primary\" data-event=\"Annual Harborlight Gala\">Register</button>",
          "target": [
            "button[data-event=\"Annual Harborlight Gala\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "9.8pt (13px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"blog-post\">",
                  "target": [
                    ".blog-post:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"post-meta\">October 2, 2024 | Research</span>",
          "target": [
            ".blog-post:nth-child(2) > .post-content > .post-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"blog-post\">",
                  "target": [
                    ".blog-post:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"link-arrow\">Read Article \u2192</a>",
          "target": [
            ".blog-post:nth-child(2) > .post-content > .link-arrow[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "9.8pt (13px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"blog-post\">",
                  "target": [
                    ".blog-post:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"post-meta\">September 18, 2024 | Partnerships</span>",
          "target": [
            ".blog-post:nth-child(3) > .post-content > .post-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"blog-post\">",
                  "target": [
                    ".blog-post:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"link-arrow\">Read Article \u2192</a>",
          "target": [
            ".blog-post:nth-child(3) > .post-content > .link-arrow[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "9.8pt (13px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"blog-post\">",
                  "target": [
                    ".blog-post:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"post-meta\">August 29, 2024 | Volunteer Spotlight</span>",
          "target": [
            ".blog-post:nth-child(4) > .post-content > .post-meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"blog-post\">",
                  "target": [
                    ".blog-post:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"link-arrow\">Read Article \u2192</a>",
          "target": [
            ".blog-post:nth-child(4) > .post-content > .link-arrow[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0d9488",
                "bgColor": "#ffffff",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"widget\">",
                  "target": [
                    ".widget:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#events\" class=\"link-arrow\">Join the Team \u2192</a>",
          "target": [
            ".link-arrow[href$=\"#events\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #0d9488, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#0d9488",
                "contrastRatio": 3.74,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button type=\"submit\" class=\"btn btn-primary\">Subscribe</button>",
                  "target": [
                    ".newsletter > form > .btn-primary.btn[type=\"submit\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button type=\"submit\" class=\"btn btn-primary\">Subscribe</button>",
          "target": [
            ".newsletter > form > .btn-primary.btn[type=\"submit\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.74 (foreground color: #ffffff, background color: #0d9488, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#f97316",
                "contrastRatio": 2.8,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-accent\">Host Fundraiser</a>",
                  "target": [
                    ".btn-accent.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-accent\">Host Fundraiser</a>",
          "target": [
            ".btn-accent.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 8029
      },
      {
        "y": 576,
        "height": 8029
      },
      {
        "y": 1152,
        "height": 8029
      },
      {
        "y": 1728,
        "height": 8029
      },
      {
        "y": 2304,
        "height": 8029
      },
      {
        "y": 2880,
        "height": 8029
      },
      {
        "y": 3456,
        "height": 8029
      },
      {
        "y": 4032,
        "height": 8029
      },
      {
        "y": 4608,
        "height": 8029
      },
      {
        "y": 5184,
        "height": 8029
      },
      {
        "y": 5760,
        "height": 8029
      },
      {
        "y": 6336,
        "height": 8029
      },
      {
        "y": 6912,
        "height": 8029
      },
      {
        "y": 7309,
        "height": 8029
      }
    ],
    "scans": 15,
    "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: "Blog", "Programs", "Impact".
-   **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: "Organization News", "Partnership Highlights", "Volunteer Opportunities".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "impact measurement", "501(c)(3) status", "charitable giving".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Host Fundraiser", "Give Now", "Take Action".
-   **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: "event registration".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "volunteer spotlights", "event calendar", "donor recognition".
-   **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.