Anthropic Claude Haiku 5.5 – Non Profit Charity

via Anthropic · Generated

  • AIMAC Debt 2.00
  • Cost $0.012
  • Total Violations 1
  • HTML Size 54 KB
  • Em Dashes 0

Screenshot

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

Accessibility Issues Found

1 Serious

  • color-contrast serious 1 instance

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="eyebrow">Impact Story</span>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tidewater Hope Collective | Rooted in Community. Growing Change Together.</title>
  <meta name="description" content="Tidewater Hope Collective connects donors, volunteers, and partners with local programs that build food security, education, and housing stability across our region.">
  <style>
    :root {
      --primary: #1f6f5c;
      --primary-dark: #17574a;
      --accent: #f2a541;
      --accent-dark: #d98c24;
      --ink: #1d2a27;
      --muted: #5b6b67;
      --bg: #f7f5f0;
      --surface: #ffffff;
      --line: #e3e0d7;
      --radius: 14px;
      --shadow: 0 10px 30px rgba(29, 42, 39, 0.08);
      --max: 1180px;
    }

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

    html { scroll-behavior: smooth; scroll-padding-top: 90px; }

    body {
      font-family: "Source Sans Pro", "Open Sans", system-ui, sans-serif;
      color: var(--ink);
      background: var(--bg);
      line-height: 1.65;
      font-size: 17px;
    }

    h1, h2, h3, h4 {
      font-family: "Playfair Display", Georgia, serif;
      line-height: 1.2;
      color: var(--ink);
    }

    h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
    h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 0.75rem; }
    h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }

    p + p { margin-top: 1rem; }

    a { color: var(--primary); text-decoration: none; }
    a:hover { text-decoration: underline; }

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

    .container {
      width: min(100% - 2.5rem, var(--max));
      margin-inline: auto;
    }

    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      background: var(--ink);
      color: #fff;
      padding: 0.6rem 1rem;
      z-index: 200;
    }
    .skip-link:focus { left: 1rem; top: 1rem; }

    .eyebrow {
      display: inline-block;
      font-size: 0.8rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 0.6rem;
    }

    .lead { font-size: 1.15rem; color: var(--muted); }

    .section { padding: 5.5rem 0; }
    .section-alt { background: var(--surface); }
    .section-head { max-width: 720px; margin-bottom: 3rem; }
    .section-head.center { margin-inline: auto; text-align: center; }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.85rem 1.6rem;
      border-radius: 999px;
      font-weight: 700;
      font-size: 1rem;
      border: 2px solid transparent;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
      font-family: inherit;
    }
    .btn:hover { transform: translateY(-2px); text-decoration: none; }
    .btn-primary { background: var(--accent); color: var(--ink); }
    .btn-primary:hover { background: var(--accent-dark); }
    .btn-outline { border-color: var(--primary); color: var(--primary); background: transparent; }
    .btn-outline:hover { background: var(--primary); color: #fff; }
    .btn-light { background: #fff; color: var(--primary-dark); }
    .btn-light:hover { background: var(--bg); }
    .btn-ghost { border-color: rgba(255,255,255,0.7); color: #fff; }
    .btn-ghost:hover { background: rgba(255,255,255,0.12); }
    .btn-small { padding: 0.55rem 1.1rem; font-size: 0.92rem; }

    /* Header */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(6px);
      border-bottom: 1px solid var(--line);
    }
    .header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 0.9rem 0;
    }
    .brand { display: flex; align-items: center; gap: 0.9rem; color: var(--ink); }
    .brand:hover { text-decoration: none; }
    .brand img { width: 56px; height: 56px; border-radius: 12px; }
    .brand-name {
      font-family: "Playfair Display", Georgia, serif;
      font-weight: 700;
      font-size: 1.35rem;
      line-height: 1.1;
    }
    .brand-tag { font-size: 0.85rem; color: var(--muted); }

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

    .main-nav { border-top: 1px solid var(--line); }
    .main-nav ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem 1.5rem;
      padding: 0.6rem 0;
    }
    .main-nav a {
      color: var(--ink);
      font-weight: 600;
      font-size: 0.97rem;
      padding: 0.35rem 0;
      border-bottom: 2px solid transparent;
    }
    .main-nav a:hover, .main-nav a[aria-current="true"] {
      color: var(--primary);
      border-bottom-color: var(--accent);
      text-decoration: none;
    }

    /* Hero */
    .hero {
      position: relative;
      color: #fff;
      background: var(--primary-dark);
      overflow: hidden;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.35;
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, rgba(23,87,74,0.95) 35%, rgba(23,87,74,0.55) 100%);
    }
    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 3rem;
      align-items: center;
      padding: 6.5rem 0 5rem;
    }
    .hero h1 { color: #fff; margin-bottom: 1.25rem; }
    .hero .eyebrow { color: var(--accent); }
    .hero p.lead { color: rgba(255,255,255,0.88); max-width: 620px; }
    .hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
    .hero-note { margin-top: 1.5rem; font-size: 0.95rem; color: rgba(255,255,255,0.8); }

    .hero-card {
      background: rgba(255,255,255,0.97);
      color: var(--ink);
      border-radius: var(--radius);
      padding: 2rem;
      box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    }
    .hero-card h3 { color: var(--primary-dark); }
    .progress-label {
      display: flex;
      justify-content: space-between;
      font-weight: 700;
      margin: 1rem 0 0.4rem;
      font-size: 0.95rem;
    }
    .progress {
      height: 12px;
      background: var(--line);
      border-radius: 999px;
      overflow: hidden;
    }
    .progress span {
      display: block;
      height: 100%;
      width: 72%;
      background: linear-gradient(90deg, var(--primary), var(--accent));
      border-radius: 999px;
    }
    .hero-card small { color: var(--muted); display: block; margin-top: 0.5rem; }
    .hero-card .btn { width: 100%; justify-content: center; margin-top: 1.5rem; }

    /* Stats */
    .stats {
      background: var(--ink);
      color: #fff;
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      text-align: center;
    }
    .stat {
      padding: 2.25rem 1rem;
      border-right: 1px solid rgba(255,255,255,0.1);
    }
    .stat:last-child { border-right: none; }
    .stat strong {
      display: block;
      font-family: "Playfair Display", Georgia, serif;
      font-size: 2.4rem;
      color: var(--accent);
      line-height: 1.1;
    }
    .stat span { font-size: 0.95rem; color: rgba(255,255,255,0.8); }

    /* Feature grid (programs) */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.75rem;
    }
    .feature-card {
      background: var(--surface);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      transition: transform 0.25s;
    }
    .feature-card:hover { transform: translateY(-6px); }
    .feature-card img { width: 100%; height: 200px; object-fit: cover; }
    .feature-body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
    .feature-body p { color: var(--muted); }
    .feature-body .link-arrow {
      margin-top: auto;
      padding-top: 1rem;
      font-weight: 700;
    }
    .tag {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      background: #e6f2ee;
      color: var(--primary-dark);
      padding: 0.25rem 0.7rem;
      border-radius: 999px;
      margin-bottom: 0.9rem;
      width: fit-content;
    }

    /* Two-column split (volunteer) */
    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    .split img.rounded {
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      width: 100%;
      height: 480px;
      object-fit: cover;
    }
    .checklist { list-style: none; margin: 1.5rem 0 2rem; }
    .checklist li {
      position: relative;
      padding-left: 2rem;
      margin-bottom: 0.9rem;
    }
    .checklist li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      width: 1.35rem;
      height: 1.35rem;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      font-size: 0.8rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .shift-list {
      margin-top: 1.5rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
    }
    .shift {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1.25rem;
      border-bottom: 1px solid var(--line);
      font-size: 0.97rem;
    }
    .shift:last-child { border-bottom: none; }
    .shift span:last-child { color: var(--muted); white-space: nowrap; }

    /* Calculator */
    .calc-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: start;
    }
    .calc-panel {
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 2.5rem;
    }
    .calc-amount {
      font-family: "Playfair Display", Georgia, serif;
      font-size: 3rem;
      color: var(--primary);
      margin: 0.5rem 0 1rem;
      line-height: 1;
    }
    .calc-amount small { font-size: 1rem; color: var(--muted); font-family: inherit; }
    input[type="range"] {
      width: 100%;
      accent-color: var(--primary);
      height: 8px;
      cursor: pointer;
    }
    .range-scale {
      display: flex;
      justify-content: space-between;
      font-size: 0.85rem;
      color: var(--muted);
      margin-top: 0.4rem;
    }
    .frequency {
      display: flex;
      gap: 0.5rem;
      margin: 1.5rem 0;
      flex-wrap: wrap;
    }
    .frequency label {
      cursor: pointer;
      border: 2px solid var(--line);
      padding: 0.5rem 1rem;
      border-radius: 999px;
      font-weight: 600;
      font-size: 0.95rem;
      transition: all 0.2s;
    }
    .frequency input { position: absolute; opacity: 0; pointer-events: none; }
    .frequency input:checked + span { color: var(--primary); }
    .frequency label:has(input:checked) {
      border-color: var(--primary);
      background: #e6f2ee;
    }
    .frequency label:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
    .impact-results {
      display: grid;
      gap: 1rem;
      margin-top: 1.5rem;
    }
    .impact-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      background: var(--bg);
      border-radius: 12px;
      padding: 1rem 1.25rem;
    }
    .impact-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--accent);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      flex-shrink: 0;
    }
    .impact-item strong { font-size: 1.5rem; color: var(--primary-dark); display: block; line-height: 1.1; }
    .impact-item span { font-size: 0.92rem; color: var(--muted); }
    .calc-note { font-size: 0.85rem; color: var(--muted); margin-top: 1.25rem; }
    .calc-copy img {
      border-radius: var(--radius);
      width: 100%;
      height: 320px;
      object-fit: cover;
      margin-bottom: 1.75rem;
      box-shadow: var(--shadow);
    }

    /* Stories + testimonials */
    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.75rem;
    }
    .testimonial {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 2rem;
      box-shadow: var(--shadow);
      border-top: 4px solid var(--accent);
      display: flex;
      flex-direction: column;
    }
    .testimonial blockquote {
      font-family: "Lora", Georgia, serif;
      font-style: italic;
      color: var(--ink);
      margin-bottom: 1.5rem;
      flex: 1;
    }
    .testimonial blockquote::before {
      content: "\201C";
      display: block;
      font-size: 3.5rem;
      line-height: 0.6;
      color: var(--accent);
      font-family: Georgia, serif;
      margin-bottom: 0.5rem;
    }
    .person { display: flex; align-items: center; gap: 0.9rem; }
    .person img { width: 52px; height: 52px; border-radius: 50%; }
    .person strong { display: block; line-height: 1.2; }
    .person span { font-size: 0.9rem; color: var(--muted); }

    .story-feature {
      margin-top: 4rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: var(--primary-dark);
      color: #fff;
      border-radius: 20px;
      overflow: hidden;
    }
    .story-feature img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
    .story-feature .story-body { padding: 3rem; }
    .story-feature h3, .story-feature h2 { color: #fff; }
    .story-feature p { color: rgba(255,255,255,0.88); }
    .story-feature .eyebrow { color: var(--accent); }

    /* Main + sidebar */
    .content-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 3rem;
      align-items: start;
    }
    .article h3 { margin-top: 2rem; }
    .article p { color: var(--muted); }
    .article figure { margin: 2rem 0; }
    .article figure img { border-radius: var(--radius); width: 100%; height: 340px; object-fit: cover; }
    .article figcaption { font-size: 0.87rem; color: var(--muted); margin-top: 0.5rem; }
    .highlight-box {
      background: #fff8ec;
      border-left: 4px solid var(--accent);
      padding: 1.5rem 1.75rem;
      border-radius: 0 var(--radius) var(--radius) 0;
      margin: 2rem 0;
    }
    .highlight-box p { color: var(--ink); }

    .sidebar { display: flex; flex-direction: column; gap: 1.75rem; position: sticky; top: 120px; }
    .widget {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 1.75rem;
      box-shadow: var(--shadow);
    }
    .widget h3 {
      font-size: 1.2rem;
      padding-bottom: 0.75rem;
      margin-bottom: 1rem;
      border-bottom: 2px solid var(--bg);
    }
    .event {
      display: flex;
      gap: 1rem;
      padding: 0.85rem 0;
      border-bottom: 1px solid var(--line);
    }
    .event:last-child { border-bottom: none; padding-bottom: 0; }
    .event-date {
      flex-shrink: 0;
      width: 58px;
      text-align: center;
      background: var(--primary);
      color: #fff;
      border-radius: 10px;
      padding: 0.4rem 0;
      line-height: 1.1;
    }
    .event-date strong { display: block; font-size: 1.4rem; font-family: "Playfair Display", Georgia, serif; }
    .event-date span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
    .event h4 { font-family: "Source Sans Pro", sans-serif; font-size: 1rem; margin-bottom: 0.15rem; }
    .event p { font-size: 0.9rem; color: var(--muted); margin: 0; }
    .donor-list { list-style: none; }
    .donor-list li {
      display: flex;
      justify-content: space-between;
      font-size: 0.95rem;
      padding: 0.55rem 0;
      border-bottom: 1px dashed var(--line);
    }
    .donor-list li:last-child { border-bottom: none; }
    .donor-list .tier { font-weight: 700; color: var(--primary-dark); }
    .widget-cta { background: var(--primary); color: #fff; }
    .widget-cta h3 { color: #fff; border-bottom-color: rgba(255,255,255,0.2); }
    .widget-cta p { color: rgba(255,255,255,0.9); font-size: 0.95rem; }
    .widget-cta .btn { width: 100%; justify-content: center; margin-top: 0.75rem; }

    /* Feature cards on partners */
    .partner-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1.25rem;
      align-items: center;
    }
    .partner-grid img {
      width: 100%;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
    }

    /* FAQ */
    .faq-wrap { max-width: 860px; margin-inline: auto; }
    details {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 12px;
      margin-bottom: 1rem;
      overflow: hidden;
    }
    details[open] { box-shadow: var(--shadow); }
    summary {
      list-style: none;
      cursor: pointer;
      padding: 1.25rem 1.5rem;
      font-weight: 700;
      font-size: 1.05rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: "+";
      font-size: 1.6rem;
      color: var(--primary);
      line-height: 1;
      transition: transform 0.2s;
    }
    details[open] summary::after { transform: rotate(45deg); }
    details > div { padding: 0 1.5rem 1.4rem; color: var(--muted); }
    summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

    /* About + Contact */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
    }
    .values { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
    .value {
      background: var(--bg);
      padding: 1.25rem;
      border-radius: 12px;
    }
    .value h4 { font-family: "Source Sans Pro", sans-serif; font-size: 1.05rem; margin-bottom: 0.3rem; }
    .value p { font-size: 0.92rem; color: var(--muted); margin: 0; }

    .contact-form {
      background: var(--surface);
      padding: 2.5rem;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .field { margin-bottom: 1rem; }
    .field label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.35rem; }
    .field input, .field select, .field textarea {
      width: 100%;
      font: inherit;
      padding: 0.75rem 0.9rem;
      border: 1.5px solid var(--line);
      border-radius: 10px;
      background: #fff;
      color: var(--ink);
    }
    .field textarea { min-height: 120px; resize: vertical; }
    .field input:focus, .field select:focus, .field textarea:focus {
      outline: 3px solid rgba(31,111,92,0.25);
      border-color: var(--primary);
    }
    .form-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.75rem; }
    .form-success { display: none; color: var(--primary-dark); font-weight: 700; margin-top: 1rem; }

    /* Newsletter band */
    .band {
      background: var(--accent);
      padding: 3.5rem 0;
    }
    .band-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      flex-wrap: wrap;
    }
    .band h2 { margin: 0; }
    .band p { color: var(--ink); margin-top: 0.4rem; }
    .band form { display: flex; gap: 0.6rem; flex: 1; max-width: 480px; min-width: 280px; }
    .band input {
      flex: 1;
      padding: 0.85rem 1.1rem;
      border-radius: 999px;
      border: none;
      font: inherit;
    }

    /* Footer */
    .site-footer {
      background: var(--ink);
      color: rgba(255,255,255,0.8);
      padding: 4.5rem 0 2rem;
      font-size: 0.95rem;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap: 2.5rem;
    }
    .site-footer h3 {
      color: #fff;
      font-family: "Source Sans Pro", sans-serif;
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 1rem;
    }
    .site-footer a { color: rgba(255,255,255,0.8); }
    .site-footer a:hover { color: var(--accent); }
    .site-footer ul { list-style: none; }
    .site-footer li { margin-bottom: 0.55rem; }
    .footer-brand strong {
      font-family: "Playfair Display", Georgia, serif;
      font-size: 1.4rem;
      color: #fff;
      display: block;
      margin-bottom: 0.5rem;
    }
    .socials { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
    .socials a {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.85rem;
      color: #fff;
    }
    .socials a:hover { background: var(--accent); color: var(--ink); text-decoration: none; }
    .footer-bottom {
      margin-top: 3.5rem;
      padding-top: 1.75rem;
      border-top: 1px solid rgba(255,255,255,0.12);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      font-size: 0.88rem;
    }
    .footer-bottom nav { display: flex; gap: 1.5rem; }
    .ein { color: rgba(255,255,255,0.6); }

    /* Responsive */
    @media (max-width: 1024px) {
      .content-layout { grid-template-columns: 1fr; }
      .sidebar { position: static; display: grid; grid-template-columns: repeat(2, 1fr); }
      .partner-grid { grid-template-columns: repeat(3, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 900px) {
      .hero-inner, .split, .calc-wrap, .about-grid, .story-feature { grid-template-columns: 1fr; }
      .hero-inner { padding: 4.5rem 0; }
      .feature-grid, .testimonial-grid { grid-template-columns: 1fr 1fr; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .stat:nth-child(2) { border-right: none; }
      .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.1); }
      .split img.rounded { height: 340px; }
    }

    @media (max-width: 680px) {
      body { font-size: 16px; }
      .section { padding: 4rem 0; }
      .feature-grid, .testimonial-grid, .form-row, .values { grid-template-columns: 1fr; }
      .sidebar { grid-template-columns: 1fr; }
      .partner-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr; }
      .brand-tag { display: none; }
      .header-actions .btn-outline { display: none; }
      .main-nav ul { gap: 0.25rem 1.1rem; }
      .main-nav a { font-size: 0.92rem; }
      .contact-form, .calc-panel { padding: 1.5rem; }
      .story-feature .story-body { padding: 2rem; }
      .band form { flex-direction: column; min-width: 0; }
    }
  </style>
</head>
<body>

<a class="skip-link" href="#main">Skip to main content</a>

<!-- HEADER -->
<header class="site-header">
  <div class="container header-top">
    <a class="brand" href="#top" aria-label="Tidewater Hope Collective home">
      <img src="https://placehold.co/112x112/1f6f5c/ffffff?text=THC&font=montserrat" alt="Tidewater Hope Collective logo">
      <div>
        <div class="brand-name">Tidewater Hope Collective</div>
        <div class="brand-tag">Rooted in community. Growing change together.</div>
      </div>
    </a>
    <div class="header-actions">
      <a class="btn btn-outline btn-small" href="#volunteer">Volunteer</a>
      <a class="btn btn-primary btn-small" href="#donate">Donate Today</a>
    </div>
  </div>
  <nav class="main-nav" aria-label="Primary">
    <div class="container">
      <ul>
        <li><a href="#programs">Programs</a></li>
        <li><a href="#volunteer">Volunteer</a></li>
        <li><a href="#impact">Impact</a></li>
        <li><a href="#stories">Stories</a></li>
        <li><a href="#partners">Partners</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

<main id="main">

<!-- HERO -->
<section class="hero" id="top">
  <img class="hero-bg" src="https://picsum.photos/1920/900" alt="">
  <div class="container hero-inner">
    <div>
      <span class="eyebrow">Serving Hampton Roads since 2009</span>
      <h1>Every neighbor deserves a fair start. Let's build it together.</h1>
      <p class="lead">Tidewater Hope Collective is a registered 501(c)(3) nonprofit that partners with local families, schools, and small congregations to strengthen food security, early learning, and housing stability. Our work is shaped by the people we serve, and it grows through the generosity of donors and volunteers who show up week after week.</p>
      <div class="hero-cta">
        <a class="btn btn-primary" href="#donate">Donate Today</a>
        <a class="btn btn-ghost" href="#volunteer">Get Involved</a>
      </div>
      <p class="hero-note">Every dollar you give is tracked, reported, and put to work within our region. Our audited financials are published every year.</p>
    </div>

    <aside class="hero-card" id="donate" aria-labelledby="fund-title">
      <span class="tag">Current Campaign</span>
      <h3 id="fund-title">Winter Warmth &amp; Pantry Fund</h3>
      <p>Help us stock 12 community pantries and provide emergency heating assistance for 340 households before the first frost.</p>
      <div class="progress-label"><span>$86,400 raised</span><span>Goal: $120,000</span></div>
      <div class="progress" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" aria-label="Campaign progress, 72 percent"><span></span></div>
      <small>1,214 donors have given so far. Gifts are matched dollar-for-dollar through December 31.</small>
      <a class="btn btn-primary" href="#impact">Give Now</a>
    </aside>
  </div>
</section>

<!-- STATS -->
<section class="stats" aria-label="Organization impact at a glance">
  <div class="container stats-grid">
    <div class="stat"><strong>48,000+</strong><span>Meals distributed each year</span></div>
    <div class="stat"><strong>1,850</strong><span>Active volunteers in 2024</span></div>
    <div class="stat"><strong>64</strong><span>Partner schools and congregations</span></div>
    <div class="stat"><strong>91%</strong><span>of funds directed to programs</span></div>
  </div>
</section>

<!-- PROGRAMS -->
<section class="section" id="programs" aria-labelledby="programs-title">
  <div class="container">
    <div class="section-head">
      <span class="eyebrow">Our Programs</span>
      <h2 id="programs-title">Three pillars of lasting community stability</h2>
      <p class="lead">Our programs are designed around the needs that families tell us matter most. Each one combines direct service with capacity building, so that neighbors gain skills, networks, and resources that outlast any single intervention.</p>
    </div>

    <div class="feature-grid">
      <article class="feature-card">
        <img src="https://picsum.photos/seed/pantry/800/500" alt="Volunteers sorting fresh produce at a community pantry">
        <div class="feature-body">
          <span class="tag">Food Security</span>
          <h3>Neighborhood Pantry Network</h3>
          <p>Twelve community pantries operate on a fixed weekly schedule, offering fresh produce, shelf-stable staples, and culturally appropriate groceries. Our model emphasizes dignity, with client-choice shopping, flexible hours, and no paperwork barriers for first-time visitors.</p>
          <a class="link-arrow" href="#volunteer">Volunteer at a pantry &rarr;</a>
        </div>
      </article>

      <article class="feature-card">
        <img src="https://picsum.photos/seed/readers/800/500" alt="Children reading together in a library reading corner">
        <div class="feature-body">
          <span class="tag">Early Learning</span>
          <h3>Bright Start Literacy Circles</h3>
          <p>Trained mentors meet with preschool and early-elementary children twice a week to build reading readiness, vocabulary, and confidence. Families receive take-home books and coaching so that learning continues at home between sessions.</p>
          <a class="link-arrow" href="#volunteer">Become a mentor &rarr;</a>
        </div>
      </article>

      <article class="feature-card">
        <img src="https://picsum.photos/seed/housing/800/500" alt="A bright, renovated apartment kitchen">
        <div class="feature-body">
          <span class="tag">Housing Stability</span>
          <h3>Home Bridge Transitional Support</h3>
          <p>Households facing eviction or recent displacement receive short-term rental assistance, budgeting coaching, and case management. Our stewardship team works alongside landlords and public agencies to keep families housed while longer-term plans take shape.</p>
          <a class="link-arrow" href="#contact">Request support &rarr;</a>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- VOLUNTEER -->
<section class="section section-alt" id="volunteer" aria-labelledby="volunteer-title">
  <div class="container split">
    <div>
      <span class="eyebrow">Volunteer Opportunities</span>
      <h2 id="volunteer-title">Your time changes more than you expect</h2>
      <p class="lead">Volunteers are the backbone of everything we do. Whether you have one Saturday a month or a few hours each week, there is a role that fits your skills, your schedule, and your interests.</p>
      <p>New volunteers complete a 45-minute orientation covering our trauma-informed approach, confidentiality standards, and safety procedures. Team leads are available throughout every shift, and we keep volunteer roles clearly defined so that no one is left guessing about what to do next.</p>

      <ul class="checklist">
        <li>Background-checked and fully trained before your first shift</li>
        <li>Flexible roles for families, teens, and corporate teams</li>
        <li>Skills-based placements for accountants, designers, and drivers</li>
        <li>Volunteer recognition and certificates for school service hours</li>
      </ul>

      <div class="shift-list" aria-label="Upcoming volunteer shifts">
        <div class="shift"><span><strong>Pantry Sorting Shift</strong></span><span>Sat, 9:00 AM</span></div>
        <div class="shift"><span><strong>Literacy Circle Mentor</strong></span><span>Tue &amp; Thu, 4:30 PM</span></div>
        <div class="shift"><span><strong>Delivery Driver (Seniors)</strong></span><span>Weekdays, flexible</span></div>
      </div>

      <div class="hero-cta" style="margin-top:2rem;">
        <a class="btn btn-primary" href="#contact">Sign Up to Volunteer</a>
        <a class="btn btn-outline" href="#events">Join an Event</a>
      </div>
    </div>
    <img class="rounded" src="https://picsum.photos/seed/volunteers/1000/900" alt="A group of volunteers smiling while packing boxes together">
  </div>
</section>

<!-- IMPACT CALCULATOR -->
<section class="section" id="impact" aria-labelledby="impact-title">
  <div class="container">
    <div class="section-head center">
      <span class="eyebrow">Impact Calculator</span>
      <h2 id="impact-title">See what your giving makes possible</h2>
      <p class="lead">Use the slider below to explore how a monthly or one-time gift translates into meals, school supplies, and emergency shelter nights. These estimates are based on our 2024 program cost data.</p>
    </div>

    <div class="calc-wrap">
      <div class="calc-copy">
        <img src="https://picsum.photos/seed/impact/900/640" alt="A donor reviewing a printed annual impact report with a program coordinator">
        <h3>Transparent by design</h3>
        <p>We publish a plain-language impact report every spring that breaks down how contributions were used, which programs they supported, and how many households were reached. Our cost-per-outcome figures are reviewed by an independent auditor.</p>
        <p>Major donors and foundation partners receive quarterly stewardship updates that include client stories, outcome data, and a candid account of what did not work and what we changed as a result.</p>
      </div>

      <div class="calc-panel">
        <label for="gift" class="eyebrow" style="margin-bottom:0;">Your gift amount</label>
        <div class="calc-amount" id="giftDisplay" aria-live="polite">$50 <small>/ gift</small></div>
        <input type="range" id="gift" min="10" max="250" step="5" value="50" aria-describedby="giftHelp">
        <div class="range-scale"><span>$10</span><span>$125</span><span>$250</span></div>

        <fieldset style="border:none; margin-top:1.5rem;">
          <legend style="font-weight:700; margin-bottom:0.5rem;">Frequency</legend>
          <div class="frequency">
            <label><input type="radio" name="freq" value="1" checked><span>One-time</span></label>
            <label><input type="radio" name="freq" value="12"><span>Monthly</span></label>
          </div>
        </fieldset>

        <div class="impact-results" aria-live="polite">
          <div class="impact-item">
            <div class="impact-icon" aria-hidden="true">🍲</div>
            <div><strong id="outMeals">200</strong><span>nutritious meals provided</span></div>
          </div>
          <div class="impact-item">
            <div class="impact-icon" aria-hidden="true">🎒</div>
            <div><strong id="outKits">2.0</strong><span>classroom literacy kits funded</span></div>
          </div>
          <div class="impact-item">
            <div class="impact-icon" aria-hidden="true">🏠</div>
            <div><strong id="outNights">3.3</strong><span>emergency shelter nights covered</span></div>
          </div>
        </div>

        <p class="calc-note" id="giftHelp">Estimates are illustrative. Monthly gifts are shown as annual totals. Gifts are tax-deductible to the extent allowed by law.</p>
        <a class="btn btn-primary" href="#contact" style="width:100%; justify-content:center; margin-top:1.25rem;">Make This Gift Today</a>
      </div>
    </div>
  </div>
</section>

<!-- STORIES -->
<section class="section section-alt" id="stories" aria-labelledby="stories-title">
  <div class="container">
    <div class="section-head">
      <span class="eyebrow">Beneficiary Stories</span>
      <h2 id="stories-title">In their own words</h2>
      <p class="lead">The families, students, and neighbors we serve are the true experts on what works. Their stories shape our programs, and we share them with their permission and with care for their privacy.</p>
    </div>

    <div class="testimonial-grid">
      <figure class="testimonial">
        <blockquote>When my hours were cut in the spring, I was ashamed to walk into the pantry. The volunteers made me feel like a neighbor, not a case number. That made all the difference for my kids.</blockquote>
        <figcaption class="person">
          <img src="https://i.pravatar.cc/120?u=denise-harper" alt="Portrait of Denise H." loading="lazy">
          <div><strong>Denise H.</strong><span>Pantry client, Norfolk</span></div>
        </figcaption>
      </figure>

      <figure class="testimonial">
        <blockquote>My son used to hide his books. After a year in Bright Start, he reads to his little sister every night. His teacher says he is one of the most confident readers in his class.</blockquote>
        <figcaption class="person">
          <img src="https://i.pravatar.cc/120?u=marcus-bell" alt="Portrait of Marcus B." loading="lazy">
          <div><strong>Marcus B.</strong><span>Parent, Portsmouth</span></div>
        </figcaption>
      </figure>

      <figure class="testimonial">
        <blockquote>I came in as a volunteer driver and stayed because the people I delivered to became my friends. Keeping seniors connected to their groceries is a small job that means everything.</blockquote>
        <figcaption class="person">
          <img src="https://i.pravatar.cc/120?u=anita-okafor" alt="Portrait of Anita O." loading="lazy">
          <div><strong>Anita O.</strong><span>Volunteer since 2019</span></div>
        </figcaption>
      </figure>
    </div>

    <article class="story-feature">
      <img src="https://picsum.photos/seed/homebridge/900/700" alt="A family standing together in front of their new front door" loading="lazy">
      <div class="story-body">
        <span class="eyebrow">Impact Story</span>
        <h3>From a motel room to a front door of their own</h3>
        <p>When the Reyes family lost their apartment after a job layoff, they spent six weeks in a motel with two children and no kitchen. Through Home Bridge, they received rental assistance, budgeting coaching, and a case manager who helped them negotiate with their landlord.</p>
        <p>Today they have a stable lease, a savings account, and a garden in the backyard. Their story is one of many that show how short-term support, delivered with patience, can change the trajectory of an entire household.</p>
        <a class="btn btn-light" href="#contact" style="margin-top:1rem;">Read More Stories</a>
      </div>
    </article>
  </div>
</section>

<!-- MAIN CONTENT + SIDEBAR: EVENTS & DONORS -->
<section class="section" id="events" aria-labelledby="events-title">
  <div class="container content-layout">
    <div class="article">
      <span class="eyebrow">Get Involved</span>
      <h2 id="events-title">Community events and ways to take action</h2>
      <p class="lead">Fundraisers, service days, and learning sessions bring neighbors together around shared goals. Each event is designed to be welcoming for first-timers and meaningful for longtime supporters.</p>

      <figure>
        <img src="https://picsum.photos/seed/gala/1200/680" alt="Guests mingling at a community fundraising dinner" loading="lazy">
        <figcaption>Our annual Hope Dinner brings together more than 400 supporters each November.</figcaption>
      </figure>

      <h3>Why community events matter</h3>
      <p>Beyond the funds they raise, our events build the relationships that sustain our work. Neighbors who meet at a service day often become volunteers, board members, or monthly donors. Local businesses that sponsor a table frequently host their own workplace giving drives.</p>
      <p>We keep event costs low and publish a breakdown of expenses for every fundraiser, so that you know exactly how much of your ticket price reaches our programs.</p>

      <div class="highlight-box">
        <p><strong>Corporate teams:</strong> Our Community Service Days offer half-day projects for groups of 10 to 60. We handle logistics, safety briefings, and project supplies, so your team can focus on the work and the conversation.</p>
      </div>

      <h3>Ways to participate this season</h3>
      <p>Choose the option that fits your time and resources. Every form of participation, from sharing a post to chairing a committee, helps us reach more families.</p>
      <div class="hero-cta" style="margin-top:1.5rem;">
        <a class="btn btn-primary" href="#contact">Join Event</a>
        <a class="btn btn-outline" href="#contact">Start a Fundraiser</a>
      </div>
    </div>

    <aside class="sidebar" aria-label="Sidebar">
      <section class="widget" aria-labelledby="upcoming-title">
        <h3 id="upcoming-title">Upcoming Events</h3>
        <div class="event">
          <div class="event-date"><strong>14</strong><span>Mar</span></div>
          <div><h4>Spring Plant &amp; Pantry Day</h4><p>Community garden planting, 9 AM to 1 PM</p></div>
        </div>
        <div class="event">
          <div class="event-date"><strong>22</strong><span>Mar</span></div>
          <div><h4>Volunteer Orientation</h4><p>Virtual session, 6:30 PM</p></div>
        </div>
        <div class="event">
          <div class="event-date"><strong>05</strong><span>Apr</span></div>
          <div><h4>Stride for Hope 5K</h4><p>Waterfront route, registration open</p></div>
        </div>
        <div class="event">
          <div class="event-date"><strong>17</strong><span>Apr</span></div>
          <div><h4>Financial Coaching Workshop</h4><p>Public library, Room B, 10 AM</p></div>
        </div>
      </section>

      <section class="widget" aria-labelledby="donors-title">
        <h3 id="donors-title">Donor Recognition</h3>
        <p style="font-size:0.92rem; color:var(--muted); margin-bottom:0.75rem;">Thank you to our Q1 leadership donors. Recognition tiers reflect cumulative giving over the last 12 months.</p>
        <ul class="donor-list">
          <li><span>Bayside Community Bank</span><span class="tier">Keystone</span></li>
          <li><span>The Ellery Family Foundation</span><span class="tier">Keystone</span></li>
          <li><span>Harbor Health Partners</span><span class="tier">Anchor</span></li>
          <li><span>Marsh &amp; Tate Architects</span><span class="tier">Anchor</span></li>
          <li><span>Church of the Good Shepherd</span><span class="tier">Beacon</span></li>
          <li><span>Dr. Lena Park</span><span class="tier">Beacon</span></li>
        </ul>
        <a href="#partners" style="display:inline-block; margin-top:1rem; font-weight:700;">View all donors &rarr;</a>
      </section>

      <section class="widget widget-cta" aria-labelledby="cta-title">
        <h3 id="cta-title">Make a Monthly Pledge</h3>
        <p>Sustaining donors provide the predictable revenue our pantries and literacy circles rely on. Even $10 a month keeps shelves stocked.</p>
        <a class="btn btn-primary" href="#donate">Become a Sustainer</a>
      </section>
    </aside>
  </div>
</section>

<!-- FAQ -->
<section class="section section-alt" id="faq" aria-labelledby="faq-title">
  <div class="container">
    <div class="section-head center">
      <span class="eyebrow">Frequently Asked Questions</span>
      <h2 id="faq-title">Good questions deserve clear answers</h2>
      <p class="lead">If you do not see your question below, reach out to our team and we will respond within two business days.</p>
    </div>

    <div class="faq-wrap">
      <details open>
        <summary>Is my donation tax-deductible?</summary>
        <div>Yes. Tidewater Hope Collective is a registered 501(c)(3) public charity. Your contribution is tax-deductible to the extent permitted by law. You will receive a written acknowledgment for every gift of $250 or more, and a year-end giving statement is sent each January.</div>
      </details>
      <details>
        <summary>How do you ensure funds are used responsibly?</summary>
        <div>Our board of directors reviews financial statements at every meeting and an independent audit is completed annually. We maintain a program expense ratio of at least 90 percent and publish our Form 990 and audited statements on our website. Restricted gifts are tracked separately and reported to the funder.</div>
      </details>
      <details>
        <summary>Do I need experience to volunteer?</summary>
        <div>No prior experience is required. Every volunteer completes an orientation and receives role-specific training from an experienced team lead. Some roles, such as literacy mentoring and benefits navigation, include additional training that we provide at no cost.</div>
      </details>
      <details>
        <summary>Can my company match employee gifts or host a service day?</summary>
        <div>Absolutely. Many employers offer matching programs that double or triple employee contributions. We can provide the documentation your HR team needs. We also host corporate service days for teams of 10 to 60, with project supplies and safety briefings included.</div>
      </details>
      <details>
        <summary>How do I request assistance from your programs?</summary>
        <div>You can contact our intake line at (757) 555-0148 or complete the short request form on our contact page. Staff will reach out within one business day to discuss eligibility and next steps. All services are confidential, and no one is turned away for inability to pay.</div>
      </details>
    </div>
  </div>
</section>

<!-- PARTNERS -->
<section class="section" id="partners" aria-labelledby="partners-title">
  <div class="container">
    <div class="section-head center">
      <span class="eyebrow">Partners &amp; Collaborators</span>
      <h2 id="partners-title">We are stronger together</h2>
      <p class="lead">Our partners include local government agencies, faith communities, public schools, healthcare systems, and businesses. Together we share resources, knowledge, and a commitment to lasting change in our region.</p>
    </div>

    <div class="partner-grid" aria-label="Partner logos">
      <img src="https://placehold.co/300x150/ffffff/1f6f5c?text=Bayside+Bank&font=montserrat" alt="Bayside Community Bank logo" loading="lazy">
      <img src="https://placehold.co/300x150/ffffff/1f6f5c?text=Harbor+Health&font=montserrat" alt="Harbor Health Partners logo" loading="lazy">
      <img src="https://placehold.co/300x150/ffffff/1f6f5c?text=City+Schools&font=montserrat" alt="Regional School District logo" loading="lazy">
      <img src="https://placehold.co/300x150/ffffff/1f6f5c?text=Good+Shepherd&font=montserrat" alt="Church of the Good Shepherd logo" loading="lazy">
      <img src="https://placehold.co/300x150/ffffff/1f6f5c?text=Marsh+%26+Tate&font=montserrat" alt="Marsh and Tate Architects logo" loading="lazy">
      <img src="https://placehold.co/300x150/ffffff/1f6f5c?text=Ellery+Fdn&font=montserrat" alt="Ellery Family Foundation logo" loading="lazy">
    </div>

    <p style="text-align:center; margin-top:2.5rem;">
      <a class="btn btn-outline" href="#contact">Become a Partner</a>
    </p>
  </div>
</section>

<!-- ABOUT -->
<section class="section section-alt" id="about" aria-labelledby="about-title">
  <div class="container about-grid">
    <div>
      <span class="eyebrow">About Us</span>
      <h2 id="about-title">Founded by neighbors, guided by the community</h2>
      <p class="lead">Tidewater Hope Collective began in 2009 as a small group of congregation members who noticed that families were falling through the cracks between existing services. Today we are a team of 38 staff members and more than 1,800 volunteers.</p>
      <p>Our mission is to reduce barriers to stability by pairing direct assistance with capacity building. We invest in the skills, networks, and leadership of the people we serve, because lasting change is rooted in local strength rather than outside rescue.</p>
      <p>Our governance model includes a board of directors with a majority of community members, a client advisory council that reviews program design each year, and an annual listening session open to the public.</p>

      <div class="values">
        <div class="value"><h4>Dignity First</h4><p>Every service is offered with respect, privacy, and choice.</p></div>
        <div class="value"><h4>Shared Leadership</h4><p>Those with lived experience help shape our decisions.</p></div>
        <div class="value"><h4>Stewardship</h4><p>We manage every gift as a trust we owe to our donors.</p></div>
        <div class="value"><h4>Accountability</h4><p>We measure outcomes honestly and share what we learn.</p></div>
      </div>
    </div>

    <div id="contact">
      <div class="contact-form">
        <span class="eyebrow">Contact Us</span>
        <h3 style="font-size:1.6rem; margin-bottom:0.5rem;">Let's start a conversation</h3>
        <p style="color:var(--muted); margin-bottom:1.5rem;">Tell us how you would like to help, or ask for support. A member of our team will respond within two business days.</p>
        <form id="contactForm" novalidate>
          <div class="form-row">
            <div class="field">
              <label for="name">Full name</label>
              <input id="name" name="name" type="text" autocomplete="name" required>
            </div>
            <div class="field">
              <label for="email">Email address</label>
              <input id="email" name="email" type="email" autocomplete="email" required>
            </div>
          </div>
          <div class="field">
            <label for="interest">I would like to</label>
            <select id="interest" name="interest">
              <option>Make a donation</option>
              <option>Volunteer with a program</option>
              <option>Request assistance</option>
              <option>Partner with my organization</option>
              <option>Something else</option>
            </select>
          </div>
          <div class="field">
            <label for="message">Message</label>
            <textarea id="message" name="message" placeholder="Share a few details about your interest or question."></textarea>
          </div>
          <button class="btn btn-primary" type="submit" style="width:100%; justify-content:center;">Send Message</button>
          <p class="form-success" id="formSuccess" role="status">Thank you. Your message has been received, and our team will be in touch soon.</p>
          <p class="form-note">If you are in crisis or need immediate help, please call 911. For general inquiries, our office is open Monday through Friday, 9 AM to 5 PM.</p>
        </form>
      </div>
    </div>
  </div>
</section>

<!-- NEWSLETTER -->
<section class="band" aria-labelledby="news-title">
  <div class="container band-inner">
    <div>
      <h2 id="news-title">Stay close to the work</h2>
      <p>Receive a monthly story, upcoming event list, and volunteer opportunities in your inbox.</p>
    </div>
    <form onsubmit="event.preventDefault(); this.querySelector('button').textContent='Subscribed';">
      <label for="newsEmail" class="sr-only" style="position:absolute;left:-9999px;">Email address</label>
      <input id="newsEmail" type="email" placeholder="Your email address" required>
      <button class="btn btn-primary" type="submit">Subscribe</button>
    </form>
  </div>
</section>

</main>

<!-- FOOTER -->
<footer class="site-footer">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <strong>Tidewater Hope Collective</strong>
        <p>A 501(c)(3) nonprofit organization serving Hampton Roads through food security, early learning, and housing stability programs.</p>
        <p style="margin-top:0.75rem;" class="ein">EIN 54-0187362</p>
        <div class="socials" aria-label="Social media">
          <a href="#" aria-label="Facebook">Fb</a>
          <a href="#" aria-label="Instagram">Ig</a>
          <a href="#" aria-label="LinkedIn">In</a>
          <a href="#" aria-label="YouTube">Yt</a>
        </div>
      </div>

      <div>
        <h3>Get Involved</h3>
        <ul>
          <li><a href="#volunteer">Volunteer</a></li>
          <li><a href="#events">Events</a></li>
          <li><a href="#donate">Donate</a></li>
          <li><a href="#partners">Corporate Partners</a></li>
          <li><a href="#contact">Start a Fundraiser</a></li>
        </ul>
      </div>

      <div>
        <h3>Our Work</h3>
        <ul>
          <li><a href="#programs">Programs</a></li>
          <li><a href="#impact">Impact Reports</a></li>
          <li><a href="#stories">Stories</a></li>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="#about">About Us</a></li>
        </ul>
      </div>

      <div>
        <h3>Contact</h3>
        <ul>
          <li>1400 Harbor Commons Drive, Suite 210<br>Norfolk, VA 23510</li>
          <li><a href="tel:+17575550148">(757) 555-0148</a></li>
          <li><a href="mailto:hello@tidewaterhope.org">hello@tidewaterhope.org</a></li>
          <li>Mon&ndash;Fri, 9 AM &ndash; 5 PM</li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom">
      <p>&copy; <span id="year">2025</span> Tidewater Hope Collective. All rights reserved.</p>
      <nav aria-label="Legal">
        <a href="#privacy">Privacy Policy</a>
        <a href="#terms">Terms of Use</a>
        <a href="#accessibility">Accessibility</a>
      </nav>
    </div>
  </div>
</footer>

<script>
  // Current year in footer
  document.getElementById('year').textContent = new Date().getFullYear();

  // Impact calculator
  (function () {
    const slider = document.getElementById('gift');
    const display = document.getElementById('giftDisplay');
    const freqInputs = document.querySelectorAll('input[name="freq"]');
    const outMeals = document.getElementById('outMeals');
    const outKits = document.getElementById('outKits');
    const outNights = document.getElementById('outNights');

    // Program cost assumptions (illustrative, based on 2024 program data)
    const MEALS_PER_DOLLAR = 4;     // $1 provides about 4 meals through the pantry network
    const KIT_COST = 25;            // one literacy kit costs about $25
    const NIGHT_COST = 15;          // one shelter night costs about $15

    function frequencyMultiplier() {
      const checked = document.querySelector('input[name="freq"]:checked');
      return checked ? parseInt(checked.value, 10) : 1;
    }

    function update() {
      const base = parseInt(slider.value, 10);
      const total = base * frequencyMultiplier();
      const suffix = frequencyMultiplier() === 12 ? ' <small>/ year</small>' : ' <small>/ gift</small>';
      display.innerHTML = '$' + total.toLocaleString('en-US') + suffix;

      outMeals.textContent = Math.round(total * MEALS_PER_DOLLAR).toLocaleString('en-US');
      outKits.textContent = (total / KIT_COST).toFixed(1);
      outNights.textContent = (total / NIGHT_COST).toFixed(1);
    }

    slider.addEventListener('input', update);
    freqInputs.forEach(function (input) { input.addEventListener('change', update); });
    update();
  })();

  // Contact form (demo validation only)
  (function () {
    const form = document.getElementById('contactForm');
    const success = document.getElementById('formSuccess');
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      const name = form.name.value.trim();
      const email = form.email.value.trim();
      const valid = name.length > 1 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
      if (!valid) {
        success.style.display = 'none';
        (name.length > 1 ? form.email : form.name).focus();
        return;
      }
      success.style.display = 'block';
      form.reset();
    });
  })();

  // Highlight current section in navigation
  (function () {
    const links = document.querySelectorAll('.main-nav a');
    const sections = [...links].map(function (a) {
      return document.querySelector(a.getAttribute('href'));
    });
    const observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          links.forEach(function (link) {
            link.setAttribute('aria-current', link.getAttribute('href') === '#' + entry.target.id ? 'true' : 'false');
          });
        }
      });
    }, { rootMargin: '-40% 0px -55% 0px' });
    sections.forEach(function (s) { if (s) observer.observe(s); });
  })();
</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:08:15.664Z",
  "url": "https://benchmark.aimac.invalid/37a7968830a64b745a022d14c2e351aec4def61a33b48b777313183ff763e8ec.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Tidewater Hope Collective home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Tidewater Hope Collective home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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=\"progress\" role=\"progressbar\" aria-valuenow=\"72\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Campaign progress, 72 percent\"><span></span></div>",
          "target": [
            ".progress"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<div class=\"impact-icon\" aria-hidden=\"true\">\ud83c\udf72</div>",
          "target": [
            ".impact-item:nth-child(1) > .impact-icon[aria-hidden=\"true\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"progress\" role=\"progressbar\" aria-valuenow=\"72\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Campaign progress, 72 percent\"><span></span></div>",
          "target": [
            ".progress"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Tidewater Hope Collective home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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=\"progress\" role=\"progressbar\" aria-valuenow=\"72\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Campaign progress, 72 percent\"><span></span></div>",
          "target": [
            ".progress"
          ]
        }
      ]
    },
    {
      "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=\"progress\" role=\"progressbar\" aria-valuenow=\"72\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Campaign progress, 72 percent\"><span></span></div>",
          "target": [
            ".progress"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Tidewater Hope Collective home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Tidewater Hope Collective home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "autocomplete-valid",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "the autocomplete attribute is correctly formatted"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<input id=\"name\" name=\"name\" type=\"text\" autocomplete=\"name\" required=\"\">",
          "target": [
            "#name"
          ]
        }
      ]
    },
    {
      "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": "<div class=\"hero-cta\" style=\"margin-top:2rem;\">\n        <a class=\"btn btn-primary\" href=\"#contact\">Sign Up to Volunteer</a>\n        <a class=\"btn btn-outline\" href=\"#events\">Join an Event</a>\n      </div>",
          "target": [
            ".split > div > .hero-cta"
          ]
        }
      ]
    },
    {
      "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-primary\" type=\"submit\" style=\"width:100%; justify-content:center;\">Send Message</button>",
          "target": [
            "#contactForm > button"
          ]
        }
      ]
    },
    {
      "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>Every neighbor deserves a fair start. Let's build it together.</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h3 id=\"fund-title\">Winter Warmth &amp; Pantry Fund</h3>",
                  "target": [
                    "#fund-title"
                  ]
                },
                {
                  "html": "<h2 id=\"programs-title\">Three pillars of lasting community stability</h2>",
                  "target": [
                    "#programs-title"
                  ]
                },
                {
                  "html": "<h3>Neighborhood Pantry Network</h3>",
                  "target": [
                    ".feature-card:nth-child(1) > .feature-body > h3"
                  ]
                },
                {
                  "html": "<h3>Bright Start Literacy Circles</h3>",
                  "target": [
                    ".feature-card:nth-child(2) > .feature-body > h3"
                  ]
                },
                {
                  "html": "<h3>Home Bridge Transitional Support</h3>",
                  "target": [
                    ".feature-card:nth-child(3) > .feature-body > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"volunteer-title\">Your time changes more than you expect</h2>",
                  "target": [
                    "#volunteer-title"
                  ]
                },
                {
                  "html": "<h2 id=\"impact-title\">See what your giving makes possible</h2>",
                  "target": [
                    "#impact-title"
                  ]
                },
                {
                  "html": "<h3>Transparent by design</h3>",
                  "target": [
                    ".calc-copy > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"stories-title\">In their own words</h2>",
                  "target": [
                    "#stories-title"
                  ]
                },
                {
                  "html": "<h3>From a motel room to a front door of their own</h3>",
                  "target": [
                    ".story-body > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"events-title\">Community events and ways to take action</h2>",
                  "target": [
                    "#events-title"
                  ]
                },
                {
                  "html": "<h3>Why community events matter</h3>",
                  "target": [
                    "h3:nth-child(5)"
                  ]
                },
                {
                  "html": "<h3>Ways to participate this season</h3>",
                  "target": [
                    "h3:nth-child(9)"
                  ]
                },
                {
                  "html": "<h3 id=\"upcoming-title\">Upcoming Events</h3>",
                  "target": [
                    "#upcoming-title"
                  ]
                },
                {
                  "html": "<h4>Spring Plant &amp; Pantry Day</h4>",
                  "target": [
                    ".event:nth-child(2) > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Volunteer Orientation</h4>",
                  "target": [
                    ".event:nth-child(3) > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Stride for Hope 5K</h4>",
                  "target": [
                    ".event:nth-child(4) > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Financial Coaching Workshop</h4>",
                  "target": [
                    ".event:nth-child(5) > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h3 id=\"donors-title\">Donor Recognition</h3>",
                  "target": [
                    "#donors-title"
                  ]
                },
                {
                  "html": "<h3 id=\"cta-title\">Make a Monthly Pledge</h3>",
                  "target": [
                    "#cta-title"
                  ]
                },
                {
                  "html": "<h2 id=\"faq-title\">Good questions deserve clear answers</h2>",
                  "target": [
                    "#faq-title"
                  ]
                },
                {
                  "html": "<h2 id=\"partners-title\">We are stronger together</h2>",
                  "target": [
                    "#partners-title"
                  ]
                },
                {
                  "html": "<h2 id=\"about-title\">Founded by neighbors, guided by the community</h2>",
                  "target": [
                    "#about-title"
                  ]
                },
                {
                  "html": "<h4>Dignity First</h4>",
                  "target": [
                    ".value:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h4>Shared Leadership</h4>",
                  "target": [
                    ".value:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Stewardship</h4>",
                  "target": [
                    ".value:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Accountability</h4>",
                  "target": [
                    ".value:nth-child(4) > h4"
                  ]
                },
                {
                  "html": "<h3 style=\"font-size:1.6rem; margin-bottom:0.5rem;\">Let's start a conversation</h3>",
                  "target": [
                    ".contact-form > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"news-title\">Stay close to the work</h2>",
                  "target": [
                    "#news-title"
                  ]
                },
                {
                  "html": "<h3>Get Involved</h3>",
                  "target": [
                    ".footer-grid > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Our Work</h3>",
                  "target": [
                    "div:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Contact</h3>",
                  "target": [
                    "div:nth-child(4) > h3"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"main\">",
                  "target": [
                    "#main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#1d2a27",
                "bgColor": "#ffffff",
                "contrastRatio": 14.86,
                "fontSize": "16.2pt (21.6px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 14.86"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"brand-name\">Tidewater Hope Collective</div>",
          "target": [
            ".brand-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": "fund-title",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<h3 id=\"fund-title\">Winter Warmth &amp; Pantry Fund</h3>",
          "target": [
            "#fund-title"
          ]
        }
      ]
    },
    {
      "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": [
                {
                  "html": "<label for=\"gift\" class=\"eyebrow\" style=\"margin-bottom:0;\">Your gift amount</label>",
                  "target": [
                    "label[for=\"gift\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"range\" id=\"gift\" min=\"10\" max=\"250\" step=\"5\" value=\"50\" aria-describedby=\"giftHelp\">",
          "target": [
            "#gift"
          ]
        }
      ]
    },
    {
      "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/112x112/1f6f5c/ffffff?text=THC&amp;font=montserrat\" alt=\"Tidewater Hope Collective logo\">",
          "target": [
            "img[alt=\"Tidewater Hope Collective 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": "explicit-label",
              "data": {
                "explicitLabel": "Your gift amount"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"gift\" class=\"eyebrow\" style=\"margin-bottom:0;\">Your gift amount</label>",
                  "target": [
                    "label[for=\"gift\"]"
                  ]
                }
              ],
              "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": "<input type=\"range\" id=\"gift\" min=\"10\" max=\"250\" step=\"5\" value=\"50\" aria-describedby=\"giftHelp\">",
          "target": [
            "#gift"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<aside class=\"hero-card\" id=\"donate\" aria-labelledby=\"fund-title\">",
                  "target": [
                    "#donate"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"btn btn-primary\" href=\"#impact\">Give Now</a>",
          "target": [
            ".btn-primary.btn[href$=\"#impact\"]"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a class=\"skip-link\" href=\"#main\">Skip to main content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    },
    {
      "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": [
            ".container > 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=\"#programs\">Programs</a></li>",
          "target": [
            ".container > 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/112x112/1f6f5c/ffffff?text=THC&amp;font=montserrat\" alt=\"Tidewater Hope Collective logo\">",
          "target": [
            "img[alt=\"Tidewater Hope Collective logo\"]"
          ]
        }
      ]
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": {
                "explicitLabel": "I would like to"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"interest\">I would like to</label>",
                  "target": [
                    "label[for=\"interest\"]"
                  ]
                }
              ],
              "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=\"interest\" name=\"interest\">",
          "target": [
            "#interest"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<summary>Is my donation tax-deductible?</summary>",
          "target": [
            "details[open=\"\"] > summary"
          ]
        }
      ]
    },
    {
      "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": 188.1,
                "height": 47.2
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (188.1px by 47.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 class=\"skip-link\" href=\"#main\">Skip to main content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "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": {
                "role": null,
                "nodeName": "div",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-label"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute is not well supported on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"shift-list\" aria-label=\"Upcoming volunteer shifts\">",
          "target": [
            ".shift-list"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": "pseudoContent",
                "expectedContrastRatio": "4.5:1"
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a pseudo element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Serving Hampton Roads since 2009</span>",
          "target": [
            ".hero-inner > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a pseudo element"
        }
      ]
    }
  ],
  "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": "#f2a541",
                "bgColor": "#17574a",
                "contrastRatio": 4.09,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"story-feature\">",
                  "target": [
                    ".story-feature"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.09 (foreground color: #f2a541, background color: #17574a, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Impact Story</span>",
          "target": [
            ".story-body > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.09 (foreground color: #f2a541, background color: #17574a, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 10300
      },
      {
        "y": 576,
        "height": 10300
      },
      {
        "y": 1152,
        "height": 10300
      },
      {
        "y": 1728,
        "height": 10300
      },
      {
        "y": 2304,
        "height": 10300
      },
      {
        "y": 2880,
        "height": 10300
      },
      {
        "y": 3456,
        "height": 10300
      },
      {
        "y": 4032,
        "height": 10300
      },
      {
        "y": 4608,
        "height": 10300
      },
      {
        "y": 5184,
        "height": 10389
      },
      {
        "y": 5760,
        "height": 10389
      },
      {
        "y": 6336,
        "height": 10389
      },
      {
        "y": 6912,
        "height": 10389
      },
      {
        "y": 7488,
        "height": 10389
      },
      {
        "y": 8064,
        "height": 10389
      },
      {
        "y": 8640,
        "height": 10389
      },
      {
        "y": 9216,
        "height": 10389
      },
      {
        "y": 9669,
        "height": 10389
      }
    ],
    "scans": 19,
    "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: "Contact", "About", "Partners".
-   **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: "Volunteer Opportunities", "Impact Stories", "Beneficiary Stories".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "capacity building", "stewardship", "beneficiary".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Take Action", "Get Involved", "Join Event".
-   **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: "impact calculator".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "donor recognition", "upcoming fundraisers", "event calendar".
-   **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.