OpenAI GPT 6 Luna – Social Media

via Azure · Generated

  • AIMAC Debt 5.30
  • Cost $0.008
  • Total Violations 32
  • HTML Size 51 KB
  • Em Dashes 5

Screenshot

View OpenAI GPT 6 Luna Social Media page View Live Page

Accessibility Issues Found

32 Serious

  • color-contrast serious 32 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="brand-tagline">Find your people. Make room for more.</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">
  <meta name="theme-color" content="#f7f5f0">
  <meta name="description" content="Find your people on Gatherwell—a more thoughtful social network for sharing, discovering, and belonging.">
  <title>Gatherwell — Find your people. Make room for more.</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root {
      --ink: #20231f;
      --muted: #70766f;
      --line: #e9e7df;
      --paper: #f7f5f0;
      --white: #fffefa;
      --green: #41634d;
      --green-dark: #2f4a39;
      --lime: #d7ebbd;
      --peach: #f1c3a7;
      --lavender: #e8e4fb;
      --shadow: 0 14px 38px rgba(43, 48, 39, .07);
      --radius: 20px;
      --font: "DM Sans", sans-serif;
      --display: "Manrope", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: var(--font);
      font-size: 15px;
      line-height: 1.6;
    }
    a { color: inherit; text-decoration: none; }
    button, textarea, select, input { font: inherit; }
    button { cursor: pointer; }
    img { display: block; max-width: 100%; }
    .wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--green);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 19px; height: 2px; background: currentColor; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { font-family: var(--display); letter-spacing: -.045em; line-height: 1.12; }
    h2 { margin-bottom: 14px; font-size: clamp(30px, 4vw, 43px); }
    h3 { font-size: 20px; }
    .section-intro { max-width: 640px; margin-bottom: 30px; color: var(--muted); font-size: 16px; }
    .btn {
      display: inline-flex;
      min-height: 46px;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 0 18px;
      border: 1px solid transparent;
      border-radius: 12px;
      background: var(--green);
      color: #fff;
      font-weight: 700;
      transition: .2s ease;
    }
    .btn:hover { transform: translateY(-2px); background: var(--green-dark); }
    .btn-outline { border-color: var(--line); background: transparent; color: var(--ink); }
    .btn-outline:hover { background: #f1f0e9; color: var(--ink); }
    .btn-small { min-height: 36px; padding: 0 13px; border-radius: 10px; font-size: 13px; }
    .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

    /* Header */
    .top-note { background: #e9efdf; color: #405343; text-align: center; padding: 8px 16px; font-size: 12px; }
    .top-note a { margin-left: 7px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
    .site-header {
      position: sticky;
      z-index: 10;
      top: 0;
      border-bottom: 1px solid rgba(225, 223, 215, .8);
      background: rgba(247, 245, 240, .93);
      backdrop-filter: blur(16px);
    }
    .header-inner { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: flex; align-items: center; gap: 11px; flex: none; }
    .brand img { width: 42px; height: 42px; border-radius: 14px; }
    .brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
    .brand-name { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.06em; }
    .brand-tagline { margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: .015em; }
    .primary-nav { display: flex; align-items: center; gap: 5px; }
    .primary-nav a {
      padding: 9px 12px;
      border-radius: 10px;
      color: #575c56;
      font-size: 13px;
      font-weight: 600;
      transition: .18s ease;
    }
    .primary-nav a:hover, .primary-nav a.active { background: #ebece4; color: var(--green-dark); }
    .header-actions { display: flex; align-items: center; gap: 12px; }
    .search-link { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 12px; }
    .avatar { width: 38px; height: 38px; border: 2px solid white; border-radius: 50%; object-fit: cover; }
    .menu-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: transparent; }

    /* Hero */
    .hero { padding: 49px 0 39px; }
    .hero-shell {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1.03fr .97fr;
      min-height: 375px;
      border-radius: 28px;
      background: #e9eddf;
    }
    .hero-copy { z-index: 1; align-self: center; padding: 50px 24px 50px 55px; }
    .hero-copy .eyebrow { margin-bottom: 17px; }
    .hero h1 { max-width: 560px; margin-bottom: 17px; font-size: clamp(43px, 5.7vw, 68px); }
    .hero h1 span { color: var(--green); }
    .hero-copy > p { max-width: 490px; margin-bottom: 25px; color: #626a60; font-size: 17px; }
    .hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
    .hero-art { position: relative; min-height: 350px; }
    .hero-photo { position: absolute; inset: 27px 28px 27px 12px; width: calc(100% - 40px); height: calc(100% - 54px); border-radius: 21px; object-fit: cover; }
    .photo-shade { position: absolute; inset: 27px 28px 27px 12px; border-radius: 21px; background: linear-gradient(0deg, rgba(25, 36, 27, .42), transparent 65%); }
    .hero-note {
      position: absolute;
      right: 8px;
      bottom: 47px;
      width: 217px;
      padding: 15px 16px;
      border: 1px solid rgba(255,255,255,.75);
      border-radius: 16px;
      background: rgba(255,254,250,.94);
      box-shadow: var(--shadow);
    }
    .hero-note strong { display: block; font-family: var(--display); font-size: 13px; }
    .hero-note span { color: var(--muted); font-size: 12px; }
    .online-dots { display: flex; align-items: center; margin-bottom: 8px; }
    .online-dots img { width: 24px; height: 24px; margin-left: -5px; border: 2px solid white; border-radius: 50%; object-fit: cover; }
    .online-dots img:first-child { margin-left: 0; }
    .online-dots b { margin-left: 7px; color: var(--green); font-size: 11px; }

    /* Page layout */
    .dashboard { display: grid; grid-template-columns: minmax(0, 1fr) 315px; align-items: start; gap: 26px; padding: 20px 0 74px; }
    .main-column { min-width: 0; }
    .side-column { display: grid; gap: 16px; }
    .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 5px 20px rgba(43,48,39,.025); }
    .section-block { margin-top: 62px; }
    .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 21px; }
    .section-heading h2 { margin-bottom: 0; }
    .text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 13px; font-weight: 700; white-space: nowrap; }
    .text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

    /* Composer & feed */
    .composer { padding: 20px; }
    .composer-top { display: flex; align-items: flex-start; gap: 13px; }
    .composer-top .avatar { width: 44px; height: 44px; }
    .composer-field { flex: 1; }
    .composer textarea {
      width: 100%;
      min-height: 75px;
      resize: vertical;
      padding: 12px 14px;
      border: 1px solid #eeece5;
      border-radius: 13px;
      outline: none;
      background: #faf9f5;
      color: var(--ink);
    }
    .composer textarea:focus { border-color: #94ad92; box-shadow: 0 0 0 3px rgba(65,99,77,.1); }
    .composer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; }
    .composer-tools { display: flex; flex-wrap: wrap; gap: 8px; }
    .tool-button { display: inline-flex; align-items: center; gap: 7px; min-height: 35px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: #687067; font-size: 12px; font-weight: 600; }
    .tool-button:hover { background: #f2f2eb; color: var(--green); }
    .composer-controls { display: flex; align-items: center; gap: 10px; }
    .audience-select { max-width: 130px; padding: 8px 7px; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
    .char-count { color: #92978f; font-size: 11px; }
    .feed-label { display: flex; align-items: center; justify-content: space-between; margin: 27px 0 14px; }
    .feed-label h2 { margin: 0; font-size: 22px; }
    .sort-select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); color: #5d645d; font-size: 12px; }
    .post-card { overflow: hidden; margin-bottom: 15px; }
    .post-content { padding: 20px 21px 14px; }
    .post-author { display: flex; align-items: center; gap: 11px; }
    .post-author img { width: 43px; height: 43px; border-radius: 50%; object-fit: cover; }
    .author-meta { flex: 1; }
    .author-meta strong { display: block; font-size: 13px; }
    .author-meta span { color: #8b9088; font-size: 11px; }
    .more-button { border: 0; background: none; color: #8b9088; font-size: 20px; }
    .post-text { margin: 14px 0 15px; color: #4f554f; font-size: 14px; line-height: 1.7; }
    .post-text a { color: var(--green); font-weight: 600; }
    .post-image { width: 100%; max-height: 370px; object-fit: cover; }
    .post-image.tall { max-height: 310px; }
    .post-stats { display: flex; justify-content: space-between; padding: 11px 21px; color: #838980; font-size: 11px; }
    .reactions { display: flex; align-items: center; gap: 5px; }
    .reaction-icons { letter-spacing: -3px; font-size: 13px; }
    .post-actions { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 20px; padding: 8px 0 12px; border-top: 1px solid #efeee9; }
    .post-action { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 4px; border: 0; border-radius: 8px; background: none; color: #737a71; font-size: 12px; font-weight: 600; }
    .post-action:hover, .post-action.is-reacted { background: #eff4ea; color: var(--green); }
    .post-action .icon { width: 16px; height: 16px; }

    /* Sidebar */
    .profile-card { padding: 21px; text-align: center; }
    .profile-cover { height: 65px; margin: -21px -21px 0; border-radius: 20px 20px 0 0; background: linear-gradient(120deg, #cadbbd, #f2d2ba); }
    .profile-card .avatar { width: 64px; height: 64px; margin: -33px auto 9px; border: 4px solid var(--white); }
    .profile-card h3 { margin-bottom: 2px; font-size: 17px; }
    .profile-card p { margin-bottom: 14px; color: var(--muted); font-size: 12px; }
    .profile-stats { display: grid; grid-template-columns: 1fr 1fr; padding-top: 14px; border-top: 1px solid var(--line); }
    .profile-stats strong { display: block; font-family: var(--display); font-size: 16px; }
    .profile-stats span { color: var(--muted); font-size: 10px; }
    .side-card { padding: 19px; }
    .side-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .side-title h3 { margin: 0; font-size: 16px; }
    .side-title a { color: var(--green); font-size: 11px; font-weight: 700; }
    .trend { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid #f0efe9; }
    .trend:first-of-type { border-top: 0; }
    .trend strong { display: block; font-size: 12px; }
    .trend span { color: #92978f; font-size: 10px; }
    .trend b { align-self: center; color: var(--green); font-size: 11px; }
    .event-card { overflow: hidden; padding: 0; }
    .event-art { display: grid; min-height: 116px; place-items: center; background: linear-gradient(140deg, #d9e7cd, #f6d6c2); color: var(--green-dark); }
    .event-art .date-box { display: grid; width: 62px; height: 69px; place-content: center; border-radius: 13px; background: rgba(255,254,250,.9); text-align: center; box-shadow: 0 7px 20px rgba(45,54,40,.1); }
    .date-box span { color: #788273; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
    .date-box strong { font-family: var(--display); font-size: 25px; line-height: 1.1; }
    .event-info { padding: 15px 17px 17px; }
    .event-info .event-tag { color: var(--green); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
    .event-info h3 { margin: 5px 0; font-size: 16px; }
    .event-info p { margin-bottom: 12px; color: var(--muted); font-size: 11px; }
    .prompt-card { background: #f1eee4; border-color: #e9e4d8; }
    .prompt-card .eyebrow { margin-bottom: 8px; font-size: 9px; }
    .prompt-card p { margin: 0; font-family: var(--display); font-size: 16px; font-weight: 700; line-height: 1.4; }
    .prompt-card small { display: block; margin-top: 10px; color: var(--muted); font-size: 10px; }

    /* Groups */
    .groups-intro { max-width: 600px; margin: 11px 0 22px; color: var(--muted); }
    .group-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .group-card { overflow: hidden; }
    .group-cover { height: 135px; object-fit: cover; width: 100%; }
    .group-body { padding: 16px; }
    .group-kicker { color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
    .group-body h3 { margin: 4px 0 7px; font-size: 17px; }
    .group-body p { min-height: 59px; margin-bottom: 13px; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .group-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .group-members { display: flex; align-items: center; }
    .group-members img { width: 24px; height: 24px; margin-left: -6px; border: 2px solid white; border-radius: 50%; object-fit: cover; }
    .group-members img:first-child { margin-left: 0; }
    .member-count { margin-left: 7px; color: #848a81; font-size: 10px; }
    .join-btn { min-height: 33px; padding: 0 12px; }

    /* Safety, product updates */
    .safety-panel { display: grid; grid-template-columns: 1fr .88fr; overflow: hidden; border-radius: 24px; background: #e6ede2; }
    .safety-copy { padding: 34px 35px; }
    .safety-copy h2 { margin-top: 12px; font-size: 34px; }
    .safety-copy p { color: #5f6b5e; font-size: 14px; line-height: 1.75; }
    .safety-list { display: grid; gap: 12px; margin: 18px 0 22px; padding: 0; list-style: none; }
    .safety-list li { display: flex; align-items: flex-start; gap: 10px; color: #465548; font-size: 12px; }
    .check {
      display: grid; width: 21px; height: 21px; flex: none; place-items: center;
      border-radius: 50%; background: #cbdcc6; color: var(--green); font-size: 12px; font-weight: 700;
    }
    .safety-image { min-height: 340px; width: 100%; height: 100%; object-fit: cover; }
    .updates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .update-card { padding: 19px; }
    .update-icon { display: grid; width: 39px; height: 39px; margin-bottom: 14px; place-items: center; border-radius: 12px; background: #edf2e7; color: var(--green); }
    .update-card:nth-child(2) .update-icon { background: #f9ebe2; color: #a5633f; }
    .update-card:nth-child(3) .update-icon { background: #eeebfa; color: #7363ab; }
    .update-card h3 { margin-bottom: 8px; font-size: 16px; }
    .update-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

    /* Community quote and FAQ */
    .quote-banner {
      position: relative;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 25px;
      margin-top: 63px;
      padding: 29px 33px;
      border-radius: 22px;
      background: #f0e8df;
    }
    .quote-banner blockquote { max-width: 700px; margin: 0; font-family: var(--display); font-size: clamp(18px, 2.2vw, 24px); font-weight: 600; letter-spacing: -.03em; line-height: 1.45; }
    .quote-person { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
    .quote-person img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
    .quote-person strong { display: block; font-size: 12px; }
    .quote-person span { color: var(--muted); font-size: 10px; }
    .faq-list { display: grid; gap: 10px; }
    .faq-list details { padding: 16px 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
    .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; cursor: pointer; font-family: var(--display); font-size: 14px; font-weight: 700; list-style: none; }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary::after { content: "+"; color: var(--green); font-size: 21px; font-weight: 400; }
    .faq-list details[open] summary::after { content: "−"; }
    .faq-list details p { max-width: 780px; margin: 12px 25px 0 0; color: var(--muted); font-size: 13px; }

    /* Footer */
    .site-footer { margin-top: 70px; padding: 48px 0 20px; background: #27372c; color: #f7f5f0; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 35px; padding-bottom: 35px; }
    .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
    .footer-brand img { width: 38px; height: 38px; border-radius: 12px; }
    .footer-brand strong { font-family: var(--display); font-size: 19px; letter-spacing: -.05em; }
    .footer-about p { max-width: 280px; color: #c2c9bd; font-size: 12px; }
    .footer-about .email { color: #e3edda; font-weight: 600; }
    .footer-col h3 { margin: 5px 0 14px; font-family: var(--font); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
    .footer-col a { display: block; width: fit-content; margin: 8px 0; color: #c2c9bd; font-size: 12px; }
    .footer-col a:hover { color: white; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 15px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.15); color: #aeb9ad; font-size: 11px; }
    .social-links { display: flex; gap: 18px; }
    .social-links a { color: #dce6d6; }

    .toast {
      position: fixed;
      z-index: 20;
      right: 24px;
      bottom: 24px;
      max-width: min(360px, calc(100% - 32px));
      padding: 13px 17px;
      border-radius: 12px;
      background: #27372c;
      color: white;
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: .25s ease;
      font-size: 13px;
    }
    .toast.show { opacity: 1; transform: translateY(0); }

    @media (max-width: 980px) {
      .primary-nav { gap: 0; }
      .primary-nav a { padding-inline: 8px; font-size: 12px; }
      .header-inner { gap: 13px; }
      .dashboard { grid-template-columns: minmax(0, 1fr) 275px; gap: 17px; }
      .hero-copy { padding-left: 35px; }
      .hero h1 { font-size: 54px; }
    }
    @media (max-width: 780px) {
      .wrap { width: min(100% - 34px, 620px); }
      .header-inner { min-height: 69px; }
      .primary-nav {
        position: absolute;
        top: 68px;
        right: 17px;
        left: 17px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--white);
        box-shadow: var(--shadow);
      }
      .primary-nav.open { display: flex; }
      .primary-nav a { padding: 11px 12px; }
      .menu-toggle { display: grid; place-items: center; }
      .header-actions .btn { display: none; }
      .hero { padding: 25px 0 20px; }
      .hero-shell { grid-template-columns: 1fr; }
      .hero-copy { padding: 38px 30px 23px; }
      .hero h1 { max-width: 520px; font-size: clamp(43px, 10vw, 61px); }
      .hero-art { min-height: 260px; }
      .hero-photo, .photo-shade { inset: 5px 20px 20px; width: calc(100% - 40px); height: calc(100% - 25px); }
      .hero-note { right: 10px; bottom: 33px; }
      .dashboard { grid-template-columns: 1fr; padding-top: 12px; }
      .side-column { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
      .profile-card { grid-row: span 2; }
      .section-block { margin-top: 49px; }
      .safety-panel { grid-template-columns: 1fr; }
      .safety-image { min-height: 230px; max-height: 300px; }
      .quote-banner { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
      .footer-about { grid-column: 1 / -1; }
    }
    @media (max-width: 520px) {
      .wrap { width: calc(100% - 28px); }
      .top-note { font-size: 10px; }
      .brand-tagline { font-size: 9px; }
      .brand-name { font-size: 18px; }
      .brand img { width: 38px; height: 38px; }
      .header-actions { gap: 7px; }
      .hero-copy { padding: 31px 22px 18px; }
      .hero h1 { font-size: 43px; }
      .hero-copy > p { font-size: 15px; }
      .hero-art { min-height: 225px; }
      .hero-note { width: 195px; padding: 11px 12px; }
      .composer { padding: 15px; }
      .composer-top { gap: 9px; }
      .composer-top .avatar { width: 37px; height: 37px; }
      .composer-bottom { align-items: flex-end; }
      .composer-tools { gap: 2px; }
      .tool-button { padding: 0 7px; font-size: 0; }
      .tool-button .icon { width: 18px; }
      .composer-controls { flex-direction: column-reverse; align-items: flex-end; gap: 4px; }
      .audience-select { padding: 4px; }
      .feed-label h2 { font-size: 20px; }
      .post-content { padding: 16px 15px 12px; }
      .post-stats { padding-inline: 15px; }
      .post-actions { margin-inline: 14px; }
      .post-action { font-size: 11px; }
      .group-grid { grid-template-columns: 1fr; }
      .group-body p { min-height: 0; }
      .side-column { grid-template-columns: 1fr 1fr; gap: 11px; }
      .profile-card { grid-row: auto; }
      .side-card { padding: 15px; }
      .side-card.trends-card { grid-column: 1 / -1; }
      .updates-grid { grid-template-columns: 1fr; }
      .update-card { display: grid; grid-template-columns: 39px 1fr; column-gap: 12px; }
      .update-icon { grid-row: span 2; margin: 0; }
      .update-card h3 { margin: 1px 0 5px; }
      .update-card p { grid-column: 2; }
      .safety-copy { padding: 27px 23px; }
      .safety-copy h2 { font-size: 30px; }
      .section-heading { align-items: flex-start; }
      .section-heading .text-link { margin-top: 8px; }
      .quote-banner { padding: 24px; }
      .quote-person { white-space: normal; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
      .footer-about { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }
  </style>
</head>
<body>
  <div class="top-note">A little less scrolling. A lot more belonging. <a href="#about">See what makes Gatherwell different</a></div>

  <header class="site-header">
    <div class="wrap header-inner">
      <a class="brand" href="#" aria-label="Gatherwell home">
        <img src="https://placehold.co/96x96/41634d/ffffff?text=G&font=manrope" alt="Gatherwell logo">
        <span class="brand-copy">
          <span class="brand-name">gatherwell</span>
          <span class="brand-tagline">Find your people. Make room for more.</span>
        </span>
      </a>

      <nav class="primary-nav" id="primaryNav" aria-label="Main navigation">
        <a class="active" href="#feed">Feed</a>
        <a href="#groups">Groups</a>
        <a href="#messages">Messages</a>
        <a href="#discover">Discover</a>
        <a href="#events">Events</a>
        <a href="#safety">Safety</a>
      </nav>

      <div class="header-actions">
        <a class="search-link" href="#discover" aria-label="Search Gatherwell">
          <svg class="icon" viewBox="0 0 24 24"><circle cx="10.8" cy="10.8" r="6.8"></circle><path d="m16 16 5 5"></path></svg>
        </a>
        <a class="btn btn-small" href="#composer">Create a post <span aria-hidden="true">+</span></a>
        <img class="avatar" src="https://i.pravatar.cc/100?u=gatherwell-profile" alt="Your profile">
        <button class="menu-toggle" id="menuToggle" aria-label="Open navigation menu" aria-expanded="false">
          <svg class="icon" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"></path></svg>
        </button>
      </div>
    </div>
  </header>

  <main>
    <section class="hero wrap" id="about" aria-labelledby="hero-title">
      <div class="hero-shell">
        <div class="hero-copy">
          <span class="eyebrow">A social network with room to breathe</span>
          <h1 id="hero-title">Good things happen when we <span>gather.</span></h1>
          <p>Trade the noise for conversations that matter. Find your people, share what you love, and build a corner of the internet that feels like yours.</p>
          <div class="hero-buttons">
            <a class="btn" href="#groups">Find your community <span aria-hidden="true">→</span></a>
            <a class="btn btn-outline" href="#feed">Explore the feed</a>
          </div>
        </div>
        <div class="hero-art">
          <img class="hero-photo" src="https://picsum.photos/seed/gatherwell-friends/900/650" alt="Friends spending a relaxed afternoon together outdoors">
          <div class="photo-shade"></div>
          <div class="hero-note">
            <div class="online-dots" aria-label="Community members online">
              <img src="https://i.pravatar.cc/80?u=online-a" alt="">
              <img src="https://i.pravatar.cc/80?u=online-b" alt="">
              <img src="https://i.pravatar.cc/80?u=online-c" alt="">
              <img src="https://i.pravatar.cc/80?u=online-d" alt="">
              <b>+2.4k here today</b>
            </div>
            <strong>Your people are already here.</strong>
            <span>Come say hello. Stay a while.</span>
          </div>
        </div>
      </div>
    </section>

    <div class="wrap dashboard">
      <div class="main-column">
        <section class="card composer" id="composer" aria-label="Create a post">
          <form id="postForm">
            <div class="composer-top">
              <img class="avatar" src="https://i.pravatar.cc/100?u=gatherwell-profile" alt="">
              <div class="composer-field">
                <label class="sr-only" for="postText">What’s on your mind?</label>
                <textarea id="postText" maxlength="500" placeholder="What’s on your mind, Alex?"></textarea>
                <div class="composer-bottom">
                  <div class="composer-tools">
                    <button class="tool-button" type="button" aria-label="Add a photo" title="Add a photo">
                      <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"></rect><circle cx="8.5" cy="9" r="1.5"></circle><path d="m21 15-5-5L5 20"></path></svg>Photo
                    </button>
                    <button class="tool-button" type="button" aria-label="Add a feeling" title="Add a feeling">
                      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"></path></svg>Feeling
                    </button>
                    <button class="tool-button" type="button" aria-label="Add a location" title="Add a location">
                      <svg class="icon" viewBox="0 0 24 24"><path d="M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z"></path><circle cx="12" cy="10" r="2.5"></circle></svg>Place
                    </button>
                  </div>
                  <div class="composer-controls">
                    <span class="char-count" id="charCount" aria-live="polite">0 / 500</span>
                    <select class="audience-select" aria-label="Post audience">
                      <option>Everyone</option>
                      <option>My friends</option>
                      <option>Choose a group</option>
                    </select>
                    <button class="btn btn-small" type="submit">Create Post</button>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </section>

        <div class="feed-label" id="feed">
          <h2>Your community feed</h2>
          <select class="sort-select" aria-label="Sort feed">
            <option>For you</option>
            <option>Most recent</option>
            <option>Friends first</option>
          </select>
        </div>

        <article class="card post-card">
          <div class="post-content">
            <div class="post-author">
              <img src="https://i.pravatar.cc/100?u=maya-chen" alt="Maya Chen">
              <div class="author-meta">
                <strong>Maya Chen <span aria-label="verified">✓</span></strong>
                <span>Sunday Makers · 24 min ago</span>
              </div>
              <button class="more-button" aria-label="More post options">···</button>
            </div>
            <p class="post-text">Finally made it to the Saturday flower market with my sketchbook. I went in for “just one bunch” and somehow came home with a whole color palette. 🌷 What’s one small thing that made your weekend feel like yours? <a href="#groups">#slowweekend</a></p>
          </div>
          <img class="post-image" src="https://picsum.photos/seed/market-flowers/1000/560" alt="A bright bunch of fresh flowers at a weekend market">
          <div class="post-stats">
            <span class="reactions"><span class="reaction-icons">💚 ✨ 🌷</span> 48 thoughtful reactions</span>
            <span>12 replies</span>
          </div>
          <div class="post-actions">
            <button class="post-action react-button" type="button">
              <svg class="icon" viewBox="0 0 24 24"><path d="M20.8 8.6c0 5.2-8.8 10.1-8.8 10.1S3.2 13.8 3.2 8.6A4.6 4.6 0 0 1 12 6.4a4.6 4.6 0 0 1 8.8 2.2Z"></path></svg>React
            </button>
            <button class="post-action" type="button">
              <svg class="icon" viewBox="0 0 24 24"><path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5Z"></path></svg>Reply
            </button>
            <button class="post-action" type="button">
              <svg class="icon" viewBox="0 0 24 24"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13"></path></svg>Share
            </button>
          </div>
        </article>

        <article class="card post-card">
          <div class="post-content">
            <div class="post-author">
              <img src="https://i.pravatar.cc/100?u=jamal-rivera" alt="Jamal Rivera">
              <div class="author-meta">
                <strong>Jamal Rivera</strong>
                <span>City Walkers · 2 hrs ago</span>
              </div>
              <button class="more-button" aria-label="More post options">···</button>
            </div>
            <p class="post-text">Took the long way home and found this little pocket of quiet right in the middle of the city. Leaving the location in the group map for anyone who needs a reset this week. Sometimes the best discoveries are the ones we share.</p>
          </div>
          <img class="post-image tall" src="https://picsum.photos/seed/city-garden/1000/500" alt="A leafy green city garden tucked between buildings">
          <div class="post-stats">
            <span class="reactions"><span class="reaction-icons">💚 👏</span> 31 reactions</span>
            <span>8 replies</span>
          </div>
          <div class="post-actions">
            <button class="post-action react-button" type="button">
              <svg class="icon" viewBox="0 0 24 24"><path d="M20.8 8.6c0 5.2-8.8 10.1-8.8 10.1S3.2 13.8 3.2 8.6A4.6 4.6 0 0 1 12 6.4a4.6 4.6 0 0 1 8.8 2.2Z"></path></svg>React
            </button>
            <button class="post-action" type="button">
              <svg class="icon" viewBox="0 0 24 24"><path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5Z"></path></svg>Reply
            </button>
            <button class="post-action" type="button">
              <svg class="icon" viewBox="0 0 24 24"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13"></path></svg>Share
            </button>
          </div>
        </article>

        <section class="section-block" id="groups">
          <div class="section-heading">
            <div>
              <span class="eyebrow">Find your corner</span>
              <h2>Good company starts here.</h2>
            </div>
            <a class="text-link" href="#discover">Browse all groups <span aria-hidden="true">→</span></a>
          </div>
          <p class="groups-intro">From niche hobbies to neighborhood get-togethers, Gatherwell groups make it easier to turn shared interests into real connections. Join a conversation already in motion, or start one of your own.</p>
          <div class="group-grid">
            <article class="card group-card">
              <img class="group-cover" src="https://picsum.photos/seed/sundaymakers/700/350" alt="Creative tools and art supplies on a shared worktable">
              <div class="group-body">
                <span class="group-kicker">Make things · 8.2k members</span>
                <h3>Sunday Makers</h3>
                <p>A friendly place for works in progress, happy accidents, and creative projects that don’t need to be perfect.</p>
                <div class="group-bottom">
                  <div class="group-members" aria-label="A few members">
                    <img src="https://i.pravatar.cc/80?u=maker-1" alt="">
                    <img src="https://i.pravatar.cc/80?u=maker-2" alt="">
                    <img src="https://i.pravatar.cc/80?u=maker-3" alt="">
                    <span class="member-count">+8.2k</span>
                  </div>
                  <button class="btn btn-outline btn-small join-btn" type="button">Join group</button>
                </div>
              </div>
            </article>
            <article class="card group-card">
              <img class="group-cover" src="https://picsum.photos/seed/neighborhoodwalks/700/350" alt="A peaceful walking trail through a green neighborhood">
              <div class="group-body">
                <span class="group-kicker">Outdoors · 3.6k members</span>
                <h3>City Walkers</h3>
                <p>Trade favorite routes, notice the little things, and find a walking buddy for your next lunch-break wander.</p>
                <div class="group-bottom">
                  <div class="group-members" aria-label="A few members">
                    <img src="https://i.pravatar.cc/80?u=walker-1" alt="">
                    <img src="https://i.pravatar.cc/80?u=walker-2" alt="">
                    <img src="https://i.pravatar.cc/80?u=walker-3" alt="">
                    <span class="member-count">+3.6k</span>
                  </div>
                  <button class="btn btn-outline btn-small join-btn" type="button">Join group</button>
                </div>
              </div>
            </article>
            <article class="card group-card">
              <img class="group-cover" src="https://picsum.photos/seed/readingclub/700/350" alt="A stack of books ready for a cozy reading session">
              <div class="group-body">
                <span class="group-kicker">Books & ideas · 5.1k members</span>
                <h3>The Open Book Club</h3>
                <p>Curious readers, excellent recommendations, and monthly picks you can finish at your own pace.</p>
                <div class="group-bottom">
                  <div class="group-members" aria-label="A few members">
                    <img src="https://i.pravatar.cc/80?u=reader-1" alt="">
                    <img src="https://i.pravatar.cc/80?u=reader-2" alt="">
                    <img src="https://i.pravatar.cc/80?u=reader-3" alt="">
                    <span class="member-count">+5.1k</span>
                  </div>
                  <button class="btn btn-outline btn-small join-btn" type="button">Join group</button>
                </div>
              </div>
            </article>
            <article class="card group-card">
              <img class="group-cover" src="https://picsum.photos/seed/plantpeople/700/350" alt="Sunlight falling on houseplants by a window">
              <div class="group-body">
                <span class="group-kicker">Home & garden · 2.9k members</span>
                <h3>Plant People</h3>
                <p>Plant parents swapping cuttings, troubleshooting yellow leaves, and celebrating every new little leaf.</p>
                <div class="group-bottom">
                  <div class="group-members" aria-label="A few members">
                    <img src="https://i.pravatar.cc/80?u=plant-1" alt="">
                    <img src="https://i.pravatar.cc/80?u=plant-2" alt="">
                    <img src="https://i.pravatar.cc/80?u=plant-3" alt="">
                    <span class="member-count">+2.9k</span>
                  </div>
                  <button class="btn btn-outline btn-small join-btn" type="button">Join group</button>
                </div>
              </div>
            </article>
          </div>
        </section>

        <section class="section-block safety-panel" id="safety">
          <div class="safety-copy">
            <span class="eyebrow">Your space, your boundaries</span>
            <h2>Connection feels better when you feel safe.</h2>
            <p>We believe a healthy social network is built on trust, not time spent scrolling. That’s why our safety tools are easy to find, community standards are clear, and your privacy settings are always in your hands.</p>
            <ul class="safety-list">
              <li><span class="check">✓</span><span><strong>Choose your audience.</strong> Decide who sees each post, group, and profile detail.</span></li>
              <li><span class="check">✓</span><span><strong>Set the tone.</strong> Mute, block, or report in a couple of taps—without a confrontation.</span></li>
              <li><span class="check">✓</span><span><strong>Know what’s happening.</strong> Clear controls and human-reviewed reports help keep conversations respectful.</span></li>
            </ul>
            <a class="btn" href="#resources">Explore safety resources <span aria-hidden="true">→</span></a>
          </div>
          <img class="safety-image" src="https://picsum.photos/seed/safe-community/850/700" alt="A welcoming, calm community space filled with warm natural light">
        </section>

        <section class="section-block" id="discover">
          <div class="section-heading">
            <div>
              <span class="eyebrow">Small changes, better days</span>
              <h2>Made for more meaningful moments.</h2>
            </div>
          </div>
          <p class="section-intro">Our latest platform updates put people before performance. We’re rethinking the familiar social toolkit—from the way you see your feed to the signals we use to measure a thriving community.</p>
          <div class="updates-grid">
            <article class="card update-card">
              <div class="update-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M4 5h16M4 12h10M4 19h16"></path><circle cx="18" cy="12" r="2"></circle></svg></div>
              <h3>A feed that follows you</h3>
              <p>Your feed gives friends and groups the first word. A transparent recommendation algorithm helps you discover fresh voices, and you can adjust what appears at any time.</p>
            </article>
            <article class="card update-card">
              <div class="update-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M12 3v18M3 12h18"></path><circle cx="12" cy="12" r="9"></circle></svg></div>
              <h3>Better signals, less noise</h3>
              <p>We’re moving beyond vanity metrics. Thoughtful replies, helpful group posts, and the quality of connections matter more to us than raw impressions.</p>
            </article>
            <article class="card update-card">
              <div class="update-icon"><svg class="icon" viewBox="0 0 24 24"><path d="M21 11.5a8.5 8.5 0 0 1-8.5 8.5 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8A8.5 8.5 0 0 1 12.5 3h.5a8.5 8.5 0 0 1 8 8v.5Z"></path></svg></div>
              <h3>Messages with intention</h3>
              <p>Keep up with close friends in a calmer inbox. New controls help you manage requests, find important conversations, and make room for a proper catch-up.</p>
            </article>
          </div>
        </section>

        <section class="quote-banner" aria-label="Community testimonial">
          <blockquote>“It’s the first place in a long time where I can show up as myself and leave feeling a little more connected.”</blockquote>
          <div class="quote-person">
            <img src="https://i.pravatar.cc/100?u=community-testimonial" alt="Riley Morgan">
            <div><strong>Riley Morgan</strong><span>Member since 2022 · Sunday Makers</span></div>
          </div>
        </section>

        <section class="section-block" id="resources">
          <div class="section-heading">
            <div>
              <span class="eyebrow">A few helpful answers</span>
              <h2>Good to know.</h2>
            </div>
            <a class="text-link" href="#footer">Visit help center <span aria-hidden="true">→</span></a>
          </div>
          <div class="faq-list">
            <details>
              <summary>How does Gatherwell decide what appears in my feed?</summary>
              <p>Your feed starts with updates from friends and groups you’ve chosen to follow. Recommendations are based on the topics and communities you engage with—not a goal to keep you endlessly scrolling. You can switch to a chronological view whenever you like.</p>
            </details>
            <details>
              <summary>Can I control who sees what I share?</summary>
              <p>Yes. Every post lets you choose an audience, and your profile includes straightforward privacy controls for personal details and activity. You can change your choices at any time in Settings.</p>
            </details>
            <details>
              <summary>What makes a Gatherwell group different?</summary>
              <p>Groups are member-led spaces with clear community guidelines and useful moderation tools. They can be public or private, and group hosts can organize events, share resources, and welcome new members at their own pace.</p>
            </details>
          </div>
        </section>
      </div>

      <aside class="side-column" aria-label="Your Gatherwell sidebar">
        <section class="card profile-card">
          <div class="profile-cover"></div>
          <img class="avatar" src="https://i.pravatar.cc/120?u=gatherwell-profile" alt="Alex Morgan">
          <h3>Alex Morgan</h3>
          <p>Curious about people, places & good coffee.</p>
          <a class="btn btn-outline btn-small" href="#messages">View your profile</a>
          <div class="profile-stats">
            <div><strong>284</strong><span>Connections</span></div>
            <div><strong>12</strong><span>Communities</span></div>
          </div>
        </section>

        <section class="card side-card trends-card">
          <div class="side-title"><h3>Happening today</h3><a href="#discover">See all</a></div>
          <div class="trend"><div><strong>#TinyJoyTuesday</strong><span>Stories worth slowing down for</span></div><b>2.8k</b></div>
          <div class="trend"><div><strong>Local summer gardens</strong><span>In Home & garden</span></div><b>+18%</b></div>
          <div class="trend"><div><strong>What are you reading?</strong><span>In The Open Book Club</span></div><b>1.2k</b></div>
          <div class="trend"><div><strong>Weekend wandering</strong><span>In City Walkers</span></div><b>846</b></div>
        </section>

        <section class="card event-card" id="events">
          <div class="event-art">
            <div class="date-box"><span>JUN</span><strong>14</strong></div>
          </div>
          <div class="event-info">
            <span class="event-tag">Community meetup</span>
            <h3>Make & Mingle: A Sunday Social</h3>
            <p>Saturday, June 14 · 11:00 AM · Your neighborhood</p>
            <a class="btn btn-small" href="#groups">Save your spot <span aria-hidden="true">→</span></a>
          </div>
        </section>

        <section class="card side-card prompt-card">
          <span class="eyebrow">A prompt to pass around</span>
          <p>What’s something you know now that you wish you knew five years ago?</p>
          <small>A good question makes a good conversation.</small>
        </section>

        <section class="card side-card" id="messages">
          <div class="side-title"><h3>Your messages</h3><a href="#messages">Open inbox</a></div>
          <div class="trend">
            <img src="https://i.pravatar.cc/80?u=messages-lena" alt="" style="width:34px;height:34px;border-radius:50%;object-fit:cover">
            <div style="flex:1"><strong>Lena Park</strong><span>Those photos are lovely!</span></div><b>2m</b>
          </div>
          <div class="trend">
            <img src="https://i.pravatar.cc/80?u=messages-omar" alt="" style="width:34px;height:34px;border-radius:50%;object-fit:cover">
            <div style="flex:1"><strong>Omar & you</strong><span>Saturday’s walk is on ☀</span></div><b>1h</b>
          </div>
          <a class="text-link" href="#messages" style="margin-top:8px">Send Message <span aria-hidden="true">→</span></a>
        </section>
      </aside>
    </div>
  </main>

  <footer class="site-footer" id="footer">
    <div class="wrap">
      <div class="footer-grid">
        <div class="footer-about">
          <a class="footer-brand" href="#">
            <img src="https://placehold.co/96x96/d7ebbd/2f4a39?text=G&font=manrope" alt="">
            <strong>gatherwell</strong>
          </a>
          <p>A more thoughtful place to share life as it happens. Made for real people, good conversations, and finding your kind of community.</p>
          <a class="email" href="mailto:hello@gatherwell.social">hello@gatherwell.social</a>
        </div>
        <div class="footer-col">
          <h3>Explore</h3>
          <a href="#feed">Your feed</a>
          <a href="#groups">Communities</a>
          <a href="#events">Events near you</a>
          <a href="#discover">What’s new</a>
        </div>
        <div class="footer-col">
          <h3>Our promise</h3>
          <a href="#safety">Safety center</a>
          <a href="#resources">Help & support</a>
          <a href="#about">About Gatherwell</a>
          <a href="mailto:partnerships@gatherwell.social">Partner with us</a>
        </div>
        <div class="footer-col">
          <h3>The details</h3>
          <a href="#privacy">Privacy</a>
          <a href="#terms">Terms of service</a>
          <a href="#accessibility">Accessibility</a>
          <a href="mailto:press@gatherwell.social">Press inquiries</a>
        </div>
      </div>
      <div class="footer-bottom">
        <span>© 2025 Gatherwell Social, Inc. Made with care, for people.</span>
        <div class="social-links" aria-label="Social links">
          <a href="https://instagram.com" aria-label="Instagram">Instagram</a>
          <a href="https://threads.net" aria-label="Threads">Threads</a>
          <a href="https://linkedin.com" aria-label="LinkedIn">LinkedIn</a>
        </div>
      </div>
    </div>
  </footer>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <script>
    const menuToggle = document.getElementById('menuToggle');
    const primaryNav = document.getElementById('primaryNav');
    const postText = document.getElementById('postText');
    const charCount = document.getElementById('charCount');
    const toast = document.getElementById('toast');

    menuToggle.addEventListener('click', () => {
      const open = primaryNav.classList.toggle('open');
      menuToggle.setAttribute('aria-expanded', String(open));
      menuToggle.setAttribute('aria-label', open ? 'Close navigation menu' : 'Open navigation menu');
    });

    primaryNav.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        primaryNav.classList.remove('open');
        menuToggle.setAttribute('aria-expanded', 'false');
      });
    });

    postText.addEventListener('input', () => {
      charCount.textContent = `${postText.value.length} / 500`;
    });

    let toastTimer;
    function showToast(message) {
      toast.textContent = message;
      toast.classList.add('show');
      clearTimeout(toastTimer);
      toastTimer = setTimeout(() => toast.classList.remove('show'), 2600);
    }

    document.getElementById('postForm').addEventListener('submit', event => {
      event.preventDefault();
      const content = postText.value.trim();
      if (!content) {
        postText.focus();
        showToast('Add a thought before you create your post.');
        return;
      }

      const post = document.createElement('article');
      post.className = 'card post-card';
      const safeContent = document.createElement('p');
      safeContent.className = 'post-text';
      safeContent.textContent = content;

      const body = document.createElement('div');
      body.className = 'post-content';
      const author = document.createElement('div');
      author.className = 'post-author';
      const image = document.createElement('img');
      image.src = 'https://i.pravatar.cc/100?u=gatherwell-profile';
      image.alt = '';
      const meta = document.createElement('div');
      meta.className = 'author-meta';
      const name = document.createElement('strong');
      name.textContent = 'Alex Morgan';
      const time = document.createElement('span');
      time.textContent = 'Just now · Your community';
      meta.append(name, time);
      author.append(image, meta);
      body.append(author, safeContent);
      post.append(body);

      const stats = document.createElement('div');
      stats.className = 'post-stats';
      stats.innerHTML = '<span>Be the first to react</span><span>0 replies</span>';
      post.append(stats);

      const actions = document.createElement('div');
      actions.className = 'post-actions';
      actions.innerHTML = '<button class="post-action react-button" type="button"><svg class="icon" viewBox="0 0 24 24"><path d="M20.8 8.6c0 5.2-8.8 10.1-8.8 10.1S3.2 13.8 3.2 8.6A4.6 4.6 0 0 1 12 6.4a4.6 4.6 0 0 1 8.8 2.2Z"></path></svg>React</button><button class="post-action" type="button">Reply</button><button class="post-action" type="button">Share</button>';
      post.append(actions);

      document.querySelector('.feed-label').after(post);
      postText.value = '';
      charCount.textContent = '0 / 500';
      post.scrollIntoView({ behavior: 'smooth', block: 'center' });
      showToast('Your post is live. Thanks for sharing!');
    });

    document.addEventListener('click', event => {
      const react = event.target.closest('.react-button');
      if (react) {
        const active = react.classList.toggle('is-reacted');
        react.setAttribute('aria-pressed', String(active));
        if (active) showToast('Reaction added.');
      }
      const join = event.target.closest('.join-btn');
      if (join) {
        const joined = join.dataset.joined === 'true';
        join.dataset.joined = String(!joined);
        join.textContent = joined ? 'Join group' : 'Joined ✓';
        join.classList.toggle('btn-outline', joined);
        showToast(joined ? 'You left the group.' : 'Welcome to the group!');
      }
    });
  </script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:57:13.249Z",
  "url": "https://benchmark.aimac.invalid/1aebbbdfb54c2510a345a96faa313d9c5c65c727186ce5450d845d56d16fcc8b.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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=\"#\" aria-label=\"Gatherwell 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=\"#\" aria-label=\"Gatherwell 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=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\"></div>",
          "target": [
            "#toast"
          ]
        }
      ]
    },
    {
      "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": "<span aria-hidden=\"true\">\uff0b</span>",
          "target": [
            "a[href$=\"#composer\"] > span[aria-hidden=\"true\"]"
          ]
        }
      ]
    },
    {
      "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=\"#\" aria-label=\"Gatherwell 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=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\"></div>",
          "target": [
            "#toast"
          ]
        }
      ]
    },
    {
      "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=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\"></div>",
          "target": [
            "#toast"
          ]
        }
      ]
    },
    {
      "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=\"#\" aria-label=\"Gatherwell 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=\"#\" aria-label=\"Gatherwell home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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": "<img src=\"https://i.pravatar.cc/80?u=messages-lena\" alt=\"\" style=\"width:34px;height:34px;border-radius:50%;object-fit:cover\">",
          "target": [
            ".trend:nth-child(2) > img[alt=\"\"]"
          ]
        }
      ]
    },
    {
      "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"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            },
            {
              "id": "non-empty-title",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a title attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"tool-button\" type=\"button\" aria-label=\"Add a photo\" title=\"Add a photo\">",
          "target": [
            "button[aria-label=\"Add a photo\"]"
          ]
        }
      ]
    },
    {
      "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 id=\"hero-title\">Good things happen when we <span>gather.</span></h1>",
                  "target": [
                    "#hero-title"
                  ]
                },
                {
                  "html": "<h2>Your community feed</h2>",
                  "target": [
                    "#feed > h2"
                  ]
                },
                {
                  "html": "<h2>Good company starts here.</h2>",
                  "target": [
                    "#groups > .section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>Sunday Makers</h3>",
                  "target": [
                    ".group-card:nth-child(1) > .group-body > h3"
                  ]
                },
                {
                  "html": "<h3>City Walkers</h3>",
                  "target": [
                    ".group-card:nth-child(2) > .group-body > h3"
                  ]
                },
                {
                  "html": "<h3>The Open Book Club</h3>",
                  "target": [
                    ".group-card:nth-child(3) > .group-body > h3"
                  ]
                },
                {
                  "html": "<h3>Plant People</h3>",
                  "target": [
                    ".group-card:nth-child(4) > .group-body > h3"
                  ]
                },
                {
                  "html": "<h2>Connection feels better when you feel safe.</h2>",
                  "target": [
                    ".safety-copy > h2"
                  ]
                },
                {
                  "html": "<h2>Made for more meaningful moments.</h2>",
                  "target": [
                    "#discover > .section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>A feed that follows you</h3>",
                  "target": [
                    ".update-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Better signals, less noise</h3>",
                  "target": [
                    ".update-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Messages with intention</h3>",
                  "target": [
                    ".update-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2>Good to know.</h2>",
                  "target": [
                    "#resources > .section-heading > div > h2"
                  ]
                },
                {
                  "html": "<h3>Alex Morgan</h3>",
                  "target": [
                    ".profile-card > h3"
                  ]
                },
                {
                  "html": "<h3>Happening today</h3>",
                  "target": [
                    ".trends-card > .side-title > h3"
                  ]
                },
                {
                  "html": "<h3>Make &amp; Mingle: A Sunday Social</h3>",
                  "target": [
                    ".event-info > h3"
                  ]
                },
                {
                  "html": "<h3>Your messages</h3>",
                  "target": [
                    "#messages > .side-title > h3"
                  ]
                },
                {
                  "html": "<h3>Explore</h3>",
                  "target": [
                    ".footer-col:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Our promise</h3>",
                  "target": [
                    ".footer-col:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>The details</h3>",
                  "target": [
                    ".footer-col:nth-child(4) > h3"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main>",
                  "target": [
                    "main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#405343",
                "bgColor": "#e9efdf",
                "contrastRatio": 7.04,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 7.04"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"top-note\">A little less scrolling. A lot more belonging. <a href=\"#about\">See what makes Gatherwell different</a></div>",
          "target": [
            ".top-note"
          ]
        }
      ]
    },
    {
      "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": "hero-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": "<h1 id=\"hero-title\">Good things happen when we <span>gather.</span></h1>",
          "target": [
            "#hero-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 class=\"sr-only\" for=\"postText\">What\u2019s on your mind?</label>",
                  "target": [
                    "label"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<textarea id=\"postText\" maxlength=\"500\" placeholder=\"What\u2019s on your mind, Alex?\"></textarea>",
          "target": [
            "#postText"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/96x96/41634d/ffffff?text=G&amp;font=manrope\" alt=\"Gatherwell logo\">",
          "target": [
            "img[alt=\"Gatherwell 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": "What\u2019s on your mind?"
              },
              "relatedNodes": [
                {
                  "html": "<label class=\"sr-only\" for=\"postText\">What\u2019s on your mind?</label>",
                  "target": [
                    "label"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<textarea id=\"postText\" maxlength=\"500\" placeholder=\"What\u2019s on your mind, Alex?\"></textarea>",
          "target": [
            "#postText"
          ]
        }
      ]
    },
    {
      "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",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"top-note\">A little less scrolling. A lot more belonging. <a href=\"#about\">See what makes Gatherwell different</a></div>",
                  "target": [
                    ".top-note"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text in some way other than by color"
            },
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"top-note\">A little less scrolling. A lot more belonging. <a href=\"#about\">See what makes Gatherwell different</a></div>",
                  "target": [
                    ".top-note"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#about\">See what makes Gatherwell different</a>",
          "target": [
            ".top-note > a[href$=\"#about\"]"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a href=\"#about\">See what makes Gatherwell different</a>",
          "target": [
            ".top-note > a[href$=\"#about\"]"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"safety-list\">",
          "target": [
            "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><span class=\"check\">\u2713</span><span><strong>Choose your audience.</strong> Decide who sees each post, group, and profile detail.</span></li>",
          "target": [
            "li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/96x96/41634d/ffffff?text=G&amp;font=manrope\" alt=\"Gatherwell logo\">",
          "target": [
            "img[alt=\"Gatherwell 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": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<select class=\"audience-select\" aria-label=\"Post audience\">\n                      <option>Everyone</option>\n                      <option>My friends</option>\n                      <option>Choose a group</option>\n                    </select>",
          "target": [
            ".audience-select"
          ]
        }
      ]
    },
    {
      "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>How does Gatherwell decide what appears in my feed?</summary>",
          "target": [
            "details:nth-child(1) > 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": 236.1,
                "height": 42
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (236.1px by 42px, 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=\"brand\" href=\"#\" aria-label=\"Gatherwell home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    }
  ],
  "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=\"online-dots\" aria-label=\"Community members online\">",
          "target": [
            ".online-dots"
          ],
          "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": {
                "messageKey": "nonBmp"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element content contains only non-text characters"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span aria-hidden=\"true\">\u2192</span>",
          "target": [
            ".hero-buttons > .btn[href$=\"#groups\"] > span[aria-hidden=\"true\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element content contains only non-text characters"
        }
      ]
    }
  ],
  "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": "#70766f",
                "bgColor": "#f7f5f0",
                "contrastRatio": 4.27,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"site-header\">",
                  "target": [
                    "header"
                  ]
                },
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.27 (foreground color: #70766f, background color: #f7f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"brand-tagline\">Find your people. Make room for more.</span>",
          "target": [
            ".brand-tagline"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.27 (foreground color: #70766f, background color: #f7f5f0, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#92978f",
                "bgColor": "#fffefa",
                "contrastRatio": 2.95,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"card composer\" id=\"composer\" aria-label=\"Create a post\">",
                  "target": [
                    "#composer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"char-count\" id=\"charCount\" aria-live=\"polite\">0 / 500</span>",
          "target": [
            "#charCount"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8b9088",
                "bgColor": "#fffefa",
                "contrastRatio": 3.22,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.22 (foreground color: #8b9088, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Sunday Makers \u00b7 24 min ago</span>",
          "target": [
            ".post-card:nth-child(3) > .post-content > .post-author > .author-meta > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.22 (foreground color: #8b9088, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8b9088",
                "bgColor": "#fffefa",
                "contrastRatio": 3.22,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.22 (foreground color: #8b9088, background color: #fffefa, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"more-button\" aria-label=\"More post options\">\u00b7\u00b7\u00b7</button>",
          "target": [
            ".post-card:nth-child(3) > .post-content > .post-author > .more-button[aria-label=\"More post options\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.22 (foreground color: #8b9088, background color: #fffefa, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#838980",
                "bgColor": "#fffefa",
                "contrastRatio": 3.55,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #838980, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"reactions\"><span class=\"reaction-icons\">\ud83d\udc9a \u2728 \ud83c\udf37</span> 48 thoughtful reactions</span>",
          "target": [
            ".post-card:nth-child(3) > .post-stats > .reactions"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #838980, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#838980",
                "bgColor": "#fffefa",
                "contrastRatio": 3.55,
                "fontSize": "9.8pt (13px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #838980, background color: #fffefa, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"reaction-icons\">\ud83d\udc9a \u2728 \ud83c\udf37</span>",
          "target": [
            ".post-card:nth-child(3) > .post-stats > .reactions > .reaction-icons"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #838980, background color: #fffefa, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#838980",
                "bgColor": "#fffefa",
                "contrastRatio": 3.55,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #838980, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>12 replies</span>",
          "target": [
            ".post-card:nth-child(3) > .post-stats > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #838980, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#737a71",
                "bgColor": "#fffefa",
                "contrastRatio": 4.37,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.37 (foreground color: #737a71, background color: #fffefa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"post-action react-button\" type=\"button\">\n              <svg class=\"icon\" viewBox=\"0 0 24 24\"><path d=\"M20.8 8.6c0 5.2-8.8 10.1-8.8 10.1S3.2 13.8 3.2 8.6A4.6 4.6 0 0 1 12 6.4a4.6 4.6 0 0 1 8.8 2.2Z\"></path></svg>React\n            </button>",
          "target": [
            ".post-card:nth-child(3) > .post-actions > .react-button.post-action[type=\"button\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.37 (foreground color: #737a71, background color: #fffefa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#737a71",
                "bgColor": "#fffefa",
                "contrastRatio": 4.37,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.37 (foreground color: #737a71, background color: #fffefa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"post-action\" type=\"button\">",
          "target": [
            ".post-card:nth-child(3) > .post-actions > .post-action[type=\"button\"]:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.37 (foreground color: #737a71, background color: #fffefa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#737a71",
                "bgColor": "#fffefa",
                "contrastRatio": 4.37,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.37 (foreground color: #737a71, background color: #fffefa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"post-action\" type=\"button\">\n              <svg class=\"icon\" viewBox=\"0 0 24 24\"><path d=\"M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13\"></path></svg>Share\n            </button>",
          "target": [
            ".post-card:nth-child(3) > .post-actions > .post-action[type=\"button\"]:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.37 (foreground color: #737a71, background color: #fffefa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8b9088",
                "bgColor": "#fffefa",
                "contrastRatio": 3.22,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.22 (foreground color: #8b9088, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>City Walkers \u00b7 2 hrs ago</span>",
          "target": [
            ".post-card:nth-child(4) > .post-content > .post-author > .author-meta > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.22 (foreground color: #8b9088, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8b9088",
                "bgColor": "#fffefa",
                "contrastRatio": 3.22,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.22 (foreground color: #8b9088, background color: #fffefa, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"more-button\" aria-label=\"More post options\">\u00b7\u00b7\u00b7</button>",
          "target": [
            ".post-card:nth-child(4) > .post-content > .post-author > .more-button[aria-label=\"More post options\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.22 (foreground color: #8b9088, background color: #fffefa, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#838980",
                "bgColor": "#fffefa",
                "contrastRatio": 3.55,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #838980, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"reactions\"><span class=\"reaction-icons\">\ud83d\udc9a \ud83d\udc4f</span> 31 reactions</span>",
          "target": [
            ".post-card:nth-child(4) > .post-stats > .reactions"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #838980, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#838980",
                "bgColor": "#fffefa",
                "contrastRatio": 3.55,
                "fontSize": "9.8pt (13px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #838980, background color: #fffefa, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"reaction-icons\">\ud83d\udc9a \ud83d\udc4f</span>",
          "target": [
            ".post-card:nth-child(4) > .post-stats > .reactions > .reaction-icons"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #838980, background color: #fffefa, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#838980",
                "bgColor": "#fffefa",
                "contrastRatio": 3.55,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.55 (foreground color: #838980, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>8 replies</span>",
          "target": [
            ".post-card:nth-child(4) > .post-stats > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.55 (foreground color: #838980, background color: #fffefa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#737a71",
                "bgColor": "#fffefa",
                "contrastRatio": 4.37,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.37 (foreground color: #737a71, background color: #fffefa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"post-action react-button\" type=\"button\">\n              <svg class=\"icon\" viewBox=\"0 0 24 24\"><path d=\"M20.8 8.6c0 5.2-8.8 10.1-8.8 10.1S3.2 13.8 3.2 8.6A4.6 4.6 0 0 1 12 6.4a4.6 4.6 0 0 1 8.8 2.2Z\"></path></svg>React\n            </button>",
          "target": [
            ".post-card:nth-child(4) > .post-actions > .react-button.post-action[type=\"button\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.37 (foreground color: #737a71, background color: #fffefa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#737a71",
                "bgColor": "#fffefa",
                "contrastRatio": 4.37,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.37 (foreground color: #737a71, background color: #fffefa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"post-action\" type=\"button\">",
          "target": [
            ".post-card:nth-child(4) > .post-actions > .post-action[type=\"button\"]:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.37 (foreground color: #737a71, background color: #fffefa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#737a71",
                "bgColor": "#fffefa",
                "contrastRatio": 4.37,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card post-card\">",
                  "target": [
                    ".post-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.37 (foreground color: #737a71, background color: #fffefa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"post-action\" type=\"button\">\n              <svg class=\"icon\" viewBox=\"0 0 24 24\"><path d=\"M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13\"></path></svg>Share\n            </button>",
          "target": [
            ".post-card:nth-child(4) > .post-actions > .post-action[type=\"button\"]:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.37 (foreground color: #737a71, background color: #fffefa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#70766f",
                "bgColor": "#f7f5f0",
                "contrastRatio": 4.27,
                "fontSize": "11.3pt (15px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.27 (foreground color: #70766f, background color: #f7f5f0, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"groups-intro\">From niche hobbies to neighborhood get-togethers, Gatherwell groups make it easier to turn shared interests into real connections. Join a conversation already in motion, or start one of your own.</p>",
          "target": [
            ".groups-intro"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.27 (foreground color: #70766f, background color: #f7f5f0, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#848a81",
                "bgColor": "#fffefa",
                "contrastRatio": 3.5,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card group-card\">",
                  "target": [
                    ".group-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.5 (foreground color: #848a81, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"member-count\">+8.2k</span>",
          "target": [
            ".group-card:nth-child(1) > .group-body > .group-bottom > .group-members[aria-label=\"A few members\"] > .member-count"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.5 (foreground color: #848a81, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#848a81",
                "bgColor": "#fffefa",
                "contrastRatio": 3.5,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card group-card\">",
                  "target": [
                    ".group-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.5 (foreground color: #848a81, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"member-count\">+3.6k</span>",
          "target": [
            ".group-card:nth-child(2) > .group-body > .group-bottom > .group-members[aria-label=\"A few members\"] > .member-count"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.5 (foreground color: #848a81, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#848a81",
                "bgColor": "#fffefa",
                "contrastRatio": 3.5,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card group-card\">",
                  "target": [
                    ".group-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.5 (foreground color: #848a81, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"member-count\">+5.1k</span>",
          "target": [
            ".group-card:nth-child(3) > .group-body > .group-bottom > .group-members[aria-label=\"A few members\"] > .member-count"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.5 (foreground color: #848a81, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#848a81",
                "bgColor": "#fffefa",
                "contrastRatio": 3.5,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"card group-card\">",
                  "target": [
                    ".group-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.5 (foreground color: #848a81, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"member-count\">+2.9k</span>",
          "target": [
            ".group-card:nth-child(4) > .group-body > .group-bottom > .group-members[aria-label=\"A few members\"] > .member-count"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.5 (foreground color: #848a81, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#70766f",
                "bgColor": "#f7f5f0",
                "contrastRatio": 4.27,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.27 (foreground color: #70766f, background color: #f7f5f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"section-intro\">Our latest platform updates put people before performance. We\u2019re rethinking the familiar social toolkit\u2014from the way you see your feed to the signals we use to measure a thriving community.</p>",
          "target": [
            ".section-intro"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.27 (foreground color: #70766f, background color: #f7f5f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#70766f",
                "bgColor": "#f0e8df",
                "contrastRatio": 3.83,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"quote-banner\" aria-label=\"Community testimonial\">",
                  "target": [
                    ".quote-banner"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.83 (foreground color: #70766f, background color: #f0e8df, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Member since 2022 \u00b7 Sunday Makers</span>",
          "target": [
            ".quote-person > div > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.83 (foreground color: #70766f, background color: #f0e8df, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#92978f",
                "bgColor": "#fffefa",
                "contrastRatio": 2.95,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"card side-card trends-card\">",
                  "target": [
                    ".trends-card"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Stories worth slowing down for</span>",
          "target": [
            ".trends-card > .trend:nth-child(2) > div > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#92978f",
                "bgColor": "#fffefa",
                "contrastRatio": 2.95,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"card side-card trends-card\">",
                  "target": [
                    ".trends-card"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>In Home &amp; garden</span>",
          "target": [
            ".trends-card > .trend:nth-child(3) > div > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#92978f",
                "bgColor": "#fffefa",
                "contrastRatio": 2.95,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"card side-card trends-card\">",
                  "target": [
                    ".trends-card"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>In The Open Book Club</span>",
          "target": [
            ".trend:nth-child(4) > div > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#92978f",
                "bgColor": "#fffefa",
                "contrastRatio": 2.95,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"card side-card trends-card\">",
                  "target": [
                    ".trends-card"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>In City Walkers</span>",
          "target": [
            ".trend:nth-child(5) > div > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#70766f",
                "bgColor": "#f1eee4",
                "contrastRatio": 4.01,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"card side-card prompt-card\">\n          <span class=\"eyebrow\">A prompt to pass around</span>\n          <p>What\u2019s something you know now that you wish you knew five years ago?</p>\n          <small>A good question makes a good conversation.</small>\n        </section>",
                  "target": [
                    ".prompt-card"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.01 (foreground color: #70766f, background color: #f1eee4, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<small>A good question makes a good conversation.</small>",
          "target": [
            "small"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.01 (foreground color: #70766f, background color: #f1eee4, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#92978f",
                "bgColor": "#fffefa",
                "contrastRatio": 2.95,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"card side-card\" id=\"messages\">",
                  "target": [
                    "#messages"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Those photos are lovely!</span>",
          "target": [
            "#messages > .trend:nth-child(2) > div > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#92978f",
                "bgColor": "#fffefa",
                "contrastRatio": 2.95,
                "fontSize": "7.5pt (10px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"card side-card\" id=\"messages\">",
                  "target": [
                    "#messages"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Saturday\u2019s walk is on \u2600</span>",
          "target": [
            "#messages > .trend:nth-child(3) > div > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.95 (foreground color: #92978f, background color: #fffefa, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 5271
      },
      {
        "y": 576,
        "height": 5271
      },
      {
        "y": 1152,
        "height": 5271
      },
      {
        "y": 1728,
        "height": 5271
      },
      {
        "y": 2304,
        "height": 5271
      },
      {
        "y": 2880,
        "height": 5271
      },
      {
        "y": 3456,
        "height": 5271
      },
      {
        "y": 4032,
        "height": 5271
      },
      {
        "y": 4551,
        "height": 5271
      }
    ],
    "scans": 10,
    "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 "Social Media" 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: "Social Media"
- Description: Platforms for social networking, sharing, messaging, and online communities.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Social Media" 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: "Feed", "Groups", "Messages".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Social Media" category. Consider themes similar to: "Safety Resources", "Group Discoveries", "Platform Updates".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "engagement metrics", "influencer", "algorithm".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Send Message", "Create Post", "React".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Social Media" sector. Ideas similar but not limited to: "content scheduler".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "viral trends", "influencer spotlights", "sponsored content".
-   **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.