MiniMax MiniMax M3.1 Flash – Social Media
via Minimax · Generated
- AIMAC Debt 4.75
- Cost $0.024
- Total Violations 18
- HTML Size 112 KB
- Em Dashes 7
Screenshot
View Live Page
Accessibility Issues Found
18 Serious
-
color-contrast serious 18 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span class="brand__tagline">Real voices, shared momentum.</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="description" content="Echoora is a human-first social network for thoughtful communities, meaningful conversations, and sustainable organic growth.">
<meta name="theme-color" content="#15372b">
<meta property="og:title" content="Echoora — Real voices, shared momentum.">
<meta property="og:description" content="Find your people, join better conversations, and understand what moves your community.">
<meta property="og:type" content="website">
<title>Echoora — Real voices, shared momentum.</title>
<link rel="icon" href="https://placehold.co/64x64/15372b/ffffff?text=E&font=montserrat">
<script>document.documentElement.classList.add('js');</script>
<style>
:root {
--bg: #f4f6f0;
--surface: #ffffff;
--surface-soft: #e9eee7;
--ink: #16231d;
--ink-soft: #415149;
--muted: #66756d;
--forest: #15372b;
--forest-deep: #0e281f;
--forest-light: #23513e;
--lime: #d8ff72;
--lime-strong: #bfe94b;
--lavender: #e9e5ff;
--purple: #6552df;
--coral: #ff806f;
--gold: #f3c969;
--line: #d9e0da;
--line-dark: rgba(255, 255, 255, 0.15);
--shadow-sm: 0 8px 24px rgba(20, 40, 30, 0.07);
--shadow-md: 0 20px 60px rgba(20, 40, 30, 0.12);
--shadow-lg: 0 30px 90px rgba(8, 29, 21, 0.24);
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 30px;
--radius-xl: 40px;
--container: 1200px;
--font-sans: Inter, Avenir Next, Avenir, Segoe UI, Helvetica, Arial, sans-serif;
--font-display: Georgia, Times New Roman, serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 96px;
}
body {
margin: 0;
min-width: 320px;
overflow-x: hidden;
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.menu-open {
overflow: hidden;
}
::selection {
background: var(--lime);
color: var(--forest-deep);
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select,
textarea {
font: inherit;
}
button,
select {
cursor: pointer;
}
button {
border: 0;
}
h1,
h2,
h3,
h4,
p {
margin-top: 0;
}
h1,
h2,
h3,
h4 {
line-height: 1.12;
letter-spacing: -0.035em;
}
h1,
h2 {
font-weight: 750;
}
h3,
h4 {
font-weight: 700;
}
[hidden] {
display: none !important;
}
:focus-visible {
outline: 3px solid var(--purple);
outline-offset: 3px;
}
.container {
width: min(var(--container), calc(100% - 40px));
margin-inline: auto;
}
.section {
padding: 104px 0;
}
.section--surface {
background: var(--surface);
}
.section-heading {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
gap: 64px;
align-items: end;
margin-bottom: 44px;
}
.section-heading--center {
max-width: 820px;
margin-inline: auto;
text-align: center;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 17px;
color: var(--forest-light);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.14em;
line-height: 1.2;
text-transform: uppercase;
}
.eyebrow::before {
width: 25px;
height: 2px;
background: currentColor;
content: "";
}
.section-heading h2,
.section-heading--center h2 {
margin-bottom: 0;
font-size: clamp(2.15rem, 4.5vw, 4rem);
}
.section-copy {
color: var(--ink-soft);
font-size: 1.06rem;
}
.section-copy p:last-child {
margin-bottom: 0;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
z-index: 999;
top: 12px;
left: 12px;
padding: 10px 16px;
border-radius: 10px;
background: var(--lime);
color: var(--forest-deep);
font-weight: 800;
transform: translateY(-150%);
transition: transform 180ms ease;
}
.skip-link:focus {
transform: translateY(0);
}
.button {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 21px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 0.92rem;
font-weight: 800;
line-height: 1;
text-align: center;
transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.button:hover {
transform: translateY(-2px);
}
.button--primary {
background: var(--lime);
color: var(--forest-deep);
box-shadow: 0 10px 24px rgba(191, 233, 75, 0.2);
}
.button--primary:hover {
background: #e4ff9a;
box-shadow: 0 13px 30px rgba(191, 233, 75, 0.28);
}
.button--dark {
background: var(--forest);
color: #fff;
}
.button--dark:hover {
background: var(--forest-light);
}
.button--outline {
border-color: var(--line);
background: transparent;
color: var(--ink);
}
.button--outline:hover {
border-color: var(--ink);
background: #fff;
}
.button--light {
background: #fff;
color: var(--forest-deep);
}
.button--small {
min-height: 40px;
padding-inline: 16px;
font-size: 0.83rem;
}
.button--wide {
width: 100%;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--forest);
font-size: 0.9rem;
font-weight: 800;
}
.text-link::after {
content: "→";
transition: transform 180ms ease;
}
.text-link:hover::after {
transform: translateX(3px);
}
.announcement {
position: relative;
z-index: 60;
background: var(--forest-deep);
color: rgba(255, 255, 255, 0.86);
font-size: 0.79rem;
}
.announcement__inner {
display: flex;
min-height: 36px;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
}
.announcement strong {
color: var(--lime);
}
.announcement a {
color: #fff;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.site-header {
position: sticky;
z-index: 50;
top: 0;
border-bottom: 1px solid rgba(21, 55, 43, 0.09);
background: rgba(244, 246, 240, 0.9);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.site-header__inner {
position: relative;
display: flex;
min-height: 78px;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 11px;
}
.brand__logo {
width: 46px;
height: 46px;
border-radius: 14px;
box-shadow: 0 7px 18px rgba(21, 55, 43, 0.18);
}
.brand__name {
display: block;
font-size: 1.15rem;
font-weight: 850;
letter-spacing: -0.04em;
line-height: 1.05;
}
.brand__tagline {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.025em;
line-height: 1.2;
}
.primary-nav ul {
display: flex;
align-items: center;
gap: 4px;
padding: 0;
margin: 0;
list-style: none;
}
.primary-nav a {
position: relative;
display: block;
padding: 12px 12px;
color: var(--ink-soft);
font-size: 0.84rem;
font-weight: 750;
transition: color 180ms ease;
}
.primary-nav a::after {
position: absolute;
right: 12px;
bottom: 6px;
left: 12px;
height: 2px;
border-radius: 2px;
background: var(--forest);
content: "";
transform: scaleX(0);
transform-origin: left;
transition: transform 180ms ease;
}
.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
color: var(--forest);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after {
transform: scaleX(1);
}
.header-actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 10px;
}
.header-actions .button {
min-height: 43px;
padding-inline: 18px;
font-size: 0.82rem;
}
.menu-toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: 13px;
background: #fff;
color: var(--ink);
}
.menu-toggle svg {
width: 21px;
height: 21px;
}
.hero {
padding: 24px 0 0;
}
.hero-shell {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 68px 64px 0;
border-radius: var(--radius-xl);
background:
radial-gradient(circle at 78% 12%, rgba(216, 255, 114, 0.16), transparent 24%),
radial-gradient(circle at 12% 90%, rgba(101, 82, 223, 0.18), transparent 28%),
var(--forest);
color: #fff;
box-shadow: var(--shadow-lg);
}
.hero-shell::before,
.hero-shell::after {
position: absolute;
z-index: -1;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
content: "";
}
.hero-shell::before {
width: 440px;
height: 440px;
top: -220px;
right: -140px;
}
.hero-shell::after {
width: 320px;
height: 320px;
bottom: -220px;
left: 25%;
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(390px, 0.94fr);
gap: 68px;
align-items: center;
}
.hero-copy {
padding-bottom: 66px;
}
.hero-copy .eyebrow {
color: var(--lime);
}
.hero-copy h1 {
max-width: 700px;
margin-bottom: 25px;
font-size: clamp(3.25rem, 6.3vw, 5.9rem);
letter-spacing: -0.062em;
}
.hero-copy h1 em {
display: block;
color: var(--lime);
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.055em;
}
.hero-copy__lead {
max-width: 640px;
margin-bottom: 18px;
color: rgba(255, 255, 255, 0.8);
font-size: clamp(1.05rem, 1.7vw, 1.23rem);
line-height: 1.7;
}
.hero-copy__support {
max-width: 610px;
margin-bottom: 31px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.94rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
.hero-proof {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
margin: 0;
padding: 0;
color: rgba(255, 255, 255, 0.68);
font-size: 0.76rem;
list-style: none;
}
.hero-proof li {
display: flex;
align-items: center;
gap: 7px;
}
.hero-proof li::before {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--lime);
content: "";
}
.hero-visual {
position: relative;
align-self: end;
margin: 0;
padding-bottom: 35px;
}
.live-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 27px;
background: #f9faf6;
color: var(--ink);
box-shadow: 0 26px 70px rgba(4, 21, 15, 0.4);
transform: rotate(1.1deg);
}
.live-card__media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.live-card__media::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(10, 24, 19, 0.42));
content: "";
}
.live-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.live-badge {
position: absolute;
z-index: 2;
top: 16px;
left: 16px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border-radius: 999px;
background: rgba(13, 35, 27, 0.82);
color: #fff;
font-size: 0.64rem;
font-weight: 850;
letter-spacing: 0.08em;
backdrop-filter: blur(8px);
}
.live-badge::before {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--coral);
box-shadow: 0 0 0 4px rgba(255, 128, 111, 0.2);
content: "";
}
.live-card__body {
padding: 20px 22px 22px;
}
.live-card__title {
margin-bottom: 13px;
font-size: 1.25rem;
}
.live-card__title span {
color: var(--forest-light);
}
.live-card__people {
display: flex;
align-items: center;
gap: 10px;
color: var(--muted);
font-size: 0.78rem;
}
.avatar-stack {
display: flex;
align-items: center;
}
.avatar-stack img,
.avatar-stack__more {
width: 30px;
height: 30px;
margin-left: -8px;
border: 2px solid #fff;
border-radius: 50%;
object-fit: cover;
}
.avatar-stack img:first-child {
margin-left: 0;
}
.avatar-stack__more {
display: grid;
place-items: center;
background: var(--lavender);
color: var(--purple);
font-size: 0.62rem;
font-weight: 850;
}
.live-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.live-card__footer span {
color: var(--muted);
font-size: 0.74rem;
font-weight: 700;
}
.floating-note {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 15px;
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
box-shadow: var(--shadow-md);
font-size: 0.7rem;
font-weight: 800;
line-height: 1.25;
backdrop-filter: blur(10px);
animation: gentle-float 5s ease-in-out infinite;
}
.floating-note strong {
display: block;
color: var(--forest);
font-size: 0.92rem;
}
.floating-note__icon {
display: grid;
width: 32px;
height: 32px;
flex: 0 0 auto;
place-items: center;
border-radius: 10px;
background: var(--lime);
font-size: 1rem;
}
.floating-note--reach {
top: 16%;
right: -24px;
}
.floating-note--reply {
bottom: 12%;
left: -34px;
animation-delay: -2s;
}
@keyframes gentle-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--line-dark);
}
.hero-stat {
padding: 27px 30px 29px;
border-right: 1px solid var(--line-dark);
}
.hero-stat:first-child {
padding-left: 0;
}
.hero-stat:last-child {
border-right: 0;
}
.hero-stat strong {
display: block;
margin-bottom: 3px;
color: #fff;
font-size: 1.45rem;
letter-spacing: -0.04em;
}
.hero-stat span {
color: rgba(255, 255, 255, 0.57);
font-size: 0.75rem;
}
.discover-section {
background: var(--bg);
}
.trend-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 25px;
}
.trend-tabs {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.trend-tab {
min-height: 40px;
padding: 0 16px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--ink-soft);
font-size: 0.79rem;
font-weight: 800;
transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.trend-tab:hover {
border-color: #9cac9f;
}
.trend-tab[aria-selected="true"] {
border-color: var(--forest);
background: var(--forest);
color: #fff;
}
.trend-search {
position: relative;
width: min(285px, 100%);
flex: 0 0 auto;
}
.trend-search svg {
position: absolute;
top: 50%;
left: 14px;
width: 17px;
height: 17px;
color: var(--muted);
transform: translateY(-50%);
pointer-events: none;
}
.trend-search input {
width: 100%;
min-height: 43px;
padding: 0 16px 0 42px;
border: 1px solid var(--line);
border-radius: 999px;
outline: 0;
background: #fff;
color: var(--ink);
font-size: 0.82rem;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.trend-search input:focus {
border-color: var(--purple);
box-shadow: 0 0 0 4px rgba(101, 82, 223, 0.12);
}
.toolbar-status {
margin: 0 0 14px;
color: var(--muted);
font-size: 0.76rem;
font-weight: 700;
}
.trend-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px;
}
.trend-card {
position: relative;
display: flex;
min-height: 305px;
flex-direction: column;
padding: 24px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: #fff;
box-shadow: var(--shadow-sm);
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.trend-card:hover {
border-color: #bbc7bd;
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.trend-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 22px;
}
.category-pill {
display: inline-flex;
align-items: center;
min-height: 27px;
padding: 0 10px;
border-radius: 999px;
background: var(--surface-soft);
color: var(--forest);
font-size: 0.64rem;
font-weight: 850;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.category-pill--purple {
background: var(--lavender);
color: var(--purple);
}
.category-pill--coral {
background: #fff0ed;
color: #b34435;
}
.category-pill--gold {
background: #fff5d9;
color: #7b5a00;
}
.momentum {
display: inline-flex;
align-items: center;
gap: 5px;
color: #1f7a52;
font-size: 0.7rem;
font-weight: 850;
}
.momentum::before {
width: 6px;
height: 6px;
border-radius: 50%;
background: #36a36f;
content: "";
}
.trend-card h3 {
margin-bottom: 11px;
font-size: 1.4rem;
}
.trend-card__description {
margin-bottom: 20px;
color: var(--ink-soft);
font-size: 0.88rem;
line-height: 1.65;
}
.trend-card__data {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid #edf0ed;
}
.trend-card__number {
display: block;
color: var(--ink);
font-size: 1.1rem;
font-weight: 850;
letter-spacing: -0.03em;
}
.trend-card__label {
display: block;
margin-top: 1px;
color: var(--muted);
font-size: 0.67rem;
}
.sparkline {
display: flex;
height: 35px;
align-items: end;
gap: 3px;
}
.sparkline i {
display: block;
width: 5px;
height: var(--height);
min-height: 5px;
border-radius: 4px 4px 1px 1px;
background: var(--purple);
opacity: 0.72;
}
.trend-card__action {
margin-top: 18px;
}
.trend-follow {
min-height: 38px;
padding: 0 15px;
border: 1px solid var(--line);
border-radius: 999px;
background: transparent;
color: var(--forest);
font-size: 0.76rem;
font-weight: 850;
transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.trend-follow:hover,
.trend-follow[aria-pressed="true"] {
border-color: var(--forest);
background: var(--forest);
color: #fff;
}
.empty-state {
padding: 45px 20px;
border: 1px dashed #bdc8bf;
border-radius: var(--radius-md);
color: var(--muted);
text-align: center;
}
.empty-state strong {
display: block;
margin-bottom: 5px;
color: var(--ink);
}
.communities-section {
position: relative;
overflow: hidden;
}
.communities-section::before {
position: absolute;
z-index: -1;
top: -180px;
right: -180px;
width: 430px;
height: 430px;
border-radius: 50%;
background: var(--lavender);
content: "";
opacity: 0.52;
}
.community-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 21px;
}
.community-card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--shadow-sm);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.community-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-5px);
}
.community-card__media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
background: #dfe6df;
}
.community-card__media::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(7, 24, 17, 0.48));
content: "";
}
.community-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.community-card:hover .community-card__media img {
transform: scale(1.035);
}
.community-card__badge {
position: absolute;
z-index: 2;
top: 15px;
left: 15px;
padding: 7px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
color: var(--forest);
font-size: 0.65rem;
font-weight: 850;
backdrop-filter: blur(8px);
}
.community-card__activity {
position: absolute;
z-index: 2;
right: 15px;
bottom: 14px;
display: flex;
align-items: center;
gap: 6px;
color: #fff;
font-size: 0.67rem;
font-weight: 750;
}
.community-card__activity::before {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--lime);
content: "";
}
.community-card__body {
padding: 24px;
}
.community-card h3 {
margin-bottom: 10px;
font-size: 1.45rem;
}
.community-card p {
min-height: 76px;
margin-bottom: 20px;
color: var(--ink-soft);
font-size: 0.88rem;
}
.community-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding-top: 18px;
border-top: 1px solid #edf0ed;
}
.community-card__members {
display: flex;
align-items: center;
gap: 9px;
}
.community-card__members .avatar-stack img {
width: 28px;
height: 28px;
}
.community-card__members span {
color: var(--muted);
font-size: 0.7rem;
font-weight: 750;
}
.join-button {
min-height: 37px;
padding: 0 14px;
border-radius: 999px;
background: var(--forest);
color: #fff;
font-size: 0.74rem;
font-weight: 850;
transition: background-color 160ms ease, transform 160ms ease;
}
.join-button:hover {
background: var(--forest-light);
transform: translateY(-1px);
}
.join-button[aria-pressed="true"] {
background: var(--lavender);
color: var(--purple);
}
.messages-section {
background: var(--surface-soft);
}
.messages-layout {
display: grid;
grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr);
gap: 32px;
align-items: start;
}
.conversation-list {
display: grid;
gap: 13px;
}
.conversation-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 17px;
align-items: center;
padding: 20px;
border: 1px solid #d9e0d9;
border-radius: var(--radius-md);
background: #fff;
box-shadow: var(--shadow-sm);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.conversation-card:hover {
box-shadow: var(--shadow-md);
transform: translateX(3px);
}
.conversation-card__avatar {
position: relative;
width: 54px;
height: 54px;
}
.conversation-card__avatar img {
width: 100%;
height: 100%;
border-radius: 17px;
object-fit: cover;
}
.conversation-card__avatar::after {
position: absolute;
right: -2px;
bottom: -2px;
width: 12px;
height: 12px;
border: 3px solid #fff;
border-radius: 50%;
background: #39a36e;
content: "";
}
.conversation-card__top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 3px;
}
.conversation-card h3 {
margin: 0;
font-size: 1rem;
letter-spacing: -0.02em;
}
.conversation-card__time {
color: var(--muted);
font-size: 0.67rem;
}
.conversation-card p {
margin: 0;
overflow: hidden;
color: var(--ink-soft);
font-size: 0.82rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.conversation-card__tag {
display: inline-flex;
margin-top: 7px;
padding: 3px 8px;
border-radius: 999px;
background: var(--surface-soft);
color: var(--forest-light);
font-size: 0.62rem;
font-weight: 800;
}
.conversation-card__action {
padding: 9px 13px;
border: 1px solid var(--line);
border-radius: 999px;
background: transparent;
color: var(--forest);
font-size: 0.72rem;
font-weight: 850;
white-space: nowrap;
transition: background-color 160ms ease, color 160ms ease;
}
.conversation-card__action:hover {
background: var(--forest);
color: #fff;
}
.live-rail {
position: sticky;
top: 104px;
padding: 24px;
border-radius: var(--radius-lg);
background: var(--forest);
color: #fff;
box-shadow: var(--shadow-md);
}
.live-rail__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 20px;
}
.live-rail__header h3 {
margin: 0;
font-size: 1.25rem;
}
.live-rail__header span {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--lime);
font-size: 0.64rem;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.live-rail__header span::before {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--coral);
content: "";
}
.room-item {
padding: 16px 0;
border-top: 1px solid var(--line-dark);
}
.room-item__time {
display: block;
margin-bottom: 4px;
color: var(--lime);
font-size: 0.65rem;
font-weight: 850;
}
.room-item h4 {
margin-bottom: 6px;
font-size: 0.91rem;
}
.room-item p {
margin-bottom: 10px;
color: rgba(255, 255, 255, 0.58);
font-size: 0.72rem;
}
.room-item a {
color: #fff;
font-size: 0.7rem;
font-weight: 850;
}
.hashtag-list {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--line-dark);
}
.hashtag-list a {
padding: 6px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.09);
color: rgba(255, 255, 255, 0.78);
font-size: 0.67rem;
font-weight: 750;
}
.insights-section {
background: var(--bg);
}
.insights-panel {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
gap: 64px;
align-items: center;
padding: 64px;
border-radius: var(--radius-xl);
background: var(--lavender);
box-shadow: var(--shadow-sm);
}
.insights-copy .eyebrow {
color: var(--purple);
}
.insights-copy h2 {
margin-bottom: 22px;
font-size: clamp(2.4rem, 4.4vw, 4.15rem);
}
.insights-copy > p {
color: #3d3b55;
font-size: 1rem;
}
.insight-list {
display: grid;
gap: 13px;
padding: 0;
margin: 27px 0 30px;
list-style: none;
}
.insight-list li {
display: flex;
gap: 11px;
align-items: flex-start;
color: #3d3b55;
font-size: 0.87rem;
}
.insight-list__icon {
display: grid;
width: 23px;
height: 23px;
flex: 0 0 auto;
place-items: center;
border-radius: 8px;
background: var(--purple);
color: #fff;
font-size: 0.72rem;
font-weight: 900;
}
.dashboard {
overflow: hidden;
border: 1px solid rgba(41, 35, 92, 0.1);
border-radius: 24px;
background: #fff;
box-shadow: 0 28px 70px rgba(45, 38, 96, 0.17);
}
.dashboard__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 23px;
border-bottom: 1px solid #ececf2;
}
.dashboard__title {
display: flex;
align-items: center;
gap: 10px;
}
.dashboard__logo {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border-radius: 10px;
background: var(--forest);
color: var(--lime);
font-weight: 900;
}
.dashboard__title strong {
display: block;
font-size: 0.84rem;
}
.dashboard__title span {
display: block;
color: var(--muted);
font-size: 0.63rem;
}
.dashboard__select {
min-height: 35px;
padding: 0 30px 0 11px;
border: 1px solid var(--line);
border-radius: 9px;
outline: 0;
background: #fff;
color: var(--ink-soft);
font-size: 0.68rem;
font-weight: 700;
}
.dashboard__body {
padding: 22px;
}
.metric-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
margin-bottom: 20px;
}
.metric-card {
padding: 13px;
border: 1px solid #ececf2;
border-radius: 12px;
background: #fafafd;
}
.metric-card span {
display: block;
margin-bottom: 6px;
color: var(--muted);
font-size: 0.57rem;
font-weight: 750;
}
.metric-card strong {
display: block;
font-size: 1.05rem;
letter-spacing: -0.035em;
}
.metric-card small {
color: #27805a;
font-size: 0.58rem;
font-weight: 850;
}
.chart-card {
padding: 18px;
border: 1px solid #ececf2;
border-radius: 14px;
}
.chart-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.chart-card h4 {
margin-bottom: 2px;
font-size: 0.76rem;
letter-spacing: -0.01em;
}
.chart-card p {
margin: 0;
color: var(--muted);
font-size: 0.58rem;
}
.chart-legend {
display: flex;
align-items: center;
gap: 5px;
color: var(--muted);
font-size: 0.56rem;
}
.chart-legend::before {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--purple);
content: "";
}
.chart-card svg {
width: 100%;
height: auto;
overflow: visible;
}
.contribution-list {
display: grid;
gap: 10px;
margin-top: 16px;
}
.contribution-row {
display: grid;
grid-template-columns: 84px minmax(0, 1fr) 30px;
gap: 10px;
align-items: center;
color: var(--muted);
font-size: 0.59rem;
}
.contribution-bar {
height: 7px;
overflow: hidden;
border-radius: 999px;
background: #eeeef4;
}
.contribution-bar span {
display: block;
width: var(--width);
height: 100%;
border-radius: inherit;
background: var(--purple);
}
.contribution-row strong {
color: var(--ink);
text-align: right;
}
.stories-section {
background: var(--surface);
}
.stories-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.story-card {
display: flex;
min-height: 410px;
flex-direction: column;
padding: 29px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--shadow-sm);
}
.story-card__mark {
width: 43px;
height: 43px;
margin-bottom: 22px;
color: var(--purple);
font-family: var(--font-display);
font-size: 3.2rem;
line-height: 1;
}
.story-card blockquote {
margin: 0 0 25px;
color: var(--ink);
font-size: 1.08rem;
font-weight: 650;
line-height: 1.6;
letter-spacing: -0.015em;
}
.story-card__result {
margin-top: auto;
margin-bottom: 21px;
padding: 15px 16px;
border-radius: 13px;
background: var(--surface-soft);
}
.story-card__result strong {
display: block;
color: var(--forest);
font-size: 1.28rem;
letter-spacing: -0.04em;
}
.story-card__result span {
color: var(--muted);
font-size: 0.67rem;
font-weight: 700;
}
.story-card figcaption {
display: flex;
align-items: center;
gap: 12px;
padding-top: 19px;
border-top: 1px solid var(--line);
}
.story-card figcaption img {
width: 43px;
height: 43px;
border-radius: 50%;
object-fit: cover;
}
.story-card figcaption strong {
display: block;
font-size: 0.82rem;
}
.story-card figcaption span {
display: block;
color: var(--muted);
font-size: 0.66rem;
}
.create-section {
padding-top: 30px;
background: var(--surface);
}
.create-card {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
gap: 70px;
align-items: center;
overflow: hidden;
padding: 64px;
border-radius: var(--radius-xl);
background: var(--forest);
color: #fff;
box-shadow: var(--shadow-lg);
}
.create-card::before {
position: absolute;
z-index: -1;
top: -140px;
right: 32%;
width: 400px;
height: 400px;
border: 1px solid rgba(216, 255, 114, 0.16);
border-radius: 50%;
content: "";
}
.create-card .eyebrow {
color: var(--lime);
}
.create-card h2 {
max-width: 650px;
margin-bottom: 21px;
font-size: clamp(2.5rem, 5vw, 4.7rem);
}
.create-card__copy > p {
max-width: 620px;
color: rgba(255, 255, 255, 0.68);
font-size: 1rem;
}
.create-perks {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 27px 0 0;
padding: 0;
list-style: none;
}
.create-perks li {
padding: 7px 10px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.76);
font-size: 0.67rem;
font-weight: 750;
}
.join-form {
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 22px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
}
.join-form h3 {
margin-bottom: 6px;
font-size: 1.28rem;
}
.join-form > p {
margin-bottom: 21px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.78rem;
}
.form-field {
display: grid;
gap: 7px;
margin-bottom: 14px;
}
.form-field label {
color: rgba(255, 255, 255, 0.78);
font-size: 0.71rem;
font-weight: 750;
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
min-height: 49px;
padding: 0 14px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 12px;
outline: 0;
background: rgba(255, 255, 255, 0.96);
color: var(--ink);
font-size: 0.85rem;
}
.form-field select {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
background-repeat: no-repeat;
background-size: 5px 5px, 5px 5px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
box-shadow: 0 0 0 4px rgba(216, 255, 114, 0.2);
}
.form-consent {
display: flex;
gap: 9px;
align-items: flex-start;
margin: 17px 0;
color: rgba(255, 255, 255, 0.58);
font-size: 0.64rem;
line-height: 1.5;
}
.form-consent input {
width: 15px;
height: 15px;
flex: 0 0 auto;
margin-top: 2px;
accent-color: var(--lime);
}
.form-consent a {
color: #fff;
text-decoration: underline;
text-underline-offset: 2px;
}
.form-message {
min-height: 22px;
margin: 12px 0 0;
color: var(--lime);
font-size: 0.72rem;
font-weight: 750;
}
.faq-section {
background: var(--bg);
}
.faq-layout {
display: grid;
grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
gap: 80px;
align-items: start;
}
.faq-intro {
position: sticky;
top: 108px;
}
.faq-intro h2 {
margin-bottom: 19px;
font-size: clamp(2.4rem, 4.2vw, 3.8rem);
}
.faq-intro p {
color: var(--ink-soft);
}
.help-card {
margin-top: 28px;
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: #fff;
box-shadow: var(--shadow-sm);
}
.help-card strong {
display: block;
margin-bottom: 4px;
font-size: 0.9rem;
}
.help-card p {
margin-bottom: 13px;
color: var(--muted);
font-size: 0.76rem;
}
.faq-list {
border-top: 1px solid var(--line);
}
.faq-list details {
border-bottom: 1px solid var(--line);
}
.faq-list summary {
position: relative;
display: flex;
min-height: 78px;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 21px 48px 21px 0;
color: var(--ink);
cursor: pointer;
font-size: 1.03rem;
font-weight: 800;
letter-spacing: -0.02em;
list-style: none;
}
.faq-list summary::-webkit-details-marker {
display: none;
}
.faq-list summary::before,
.faq-list summary::after {
position: absolute;
top: 50%;
right: 9px;
width: 17px;
height: 2px;
border-radius: 2px;
background: var(--forest);
content: "";
transform: translateY(-50%);
transition: transform 180ms ease;
}
.faq-list summary::after {
transform: translateY(-50%) rotate(90deg);
}
.faq-list details[open] summary::after {
transform: translateY(-50%) rotate(0);
}
.faq-answer {
max-width: 700px;
padding: 0 50px 25px 0;
color: var(--ink-soft);
font-size: 0.9rem;
}
.faq-answer p:last-child {
margin-bottom: 0;
}
.site-footer {
padding: 72px 0 25px;
background: var(--forest-deep);
color: #fff;
}
.footer-grid {
display: grid;
grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(140px, 0.65fr));
gap: 54px;
padding-bottom: 55px;
}
.footer-brand .brand {
margin-bottom: 20px;
}
.footer-brand .brand__name {
color: #fff;
}
.footer-brand .brand__tagline {
color: rgba(255, 255, 255, 0.48);
}
.footer-brand > p {
max-width: 360px;
color: rgba(255, 255, 255, 0.58);
font-size: 0.84rem;
}
.footer-contact {
display: grid;
gap: 5px;
margin-top: 22px;
color: rgba(255, 255, 255, 0.66);
font-size: 0.76rem;
}
.footer-contact a:hover {
color: var(--lime);
}
.footer-column h3 {
margin-bottom: 18px;
color: rgba(255, 255, 255, 0.5);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.footer-column ul {
display: grid;
gap: 10px;
padding: 0;
margin: 0;
list-style: none;
}
.footer-column a {
color: rgba(255, 255, 255, 0.72);
font-size: 0.78rem;
transition: color 160ms ease;
}
.footer-column a:hover {
color: var(--lime);
}
.social-links {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 21px;
}
.social-links a {
padding: 6px 9px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
color: rgba(255, 255, 255, 0.7);
font-size: 0.62rem;
font-weight: 750;
transition: border-color 160ms ease, color 160ms ease;
}
.social-links a:hover {
border-color: var(--lime);
color: var(--lime);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
padding-top: 24px;
border-top: 1px solid var(--line-dark);
color: rgba(255, 255, 255, 0.42);
font-size: 0.68rem;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.footer-legal a:hover {
color: #fff;
}
.modal {
width: min(560px, calc(100% - 30px));
max-height: min(760px, calc(100vh - 30px));
overflow-y: auto;
padding: 0;
border: 0;
border-radius: 24px;
background: #fff;
color: var(--ink);
box-shadow: 0 30px 100px rgba(0, 0, 0, 0.3);
}
.modal::backdrop {
background: rgba(7, 25, 18, 0.7);
backdrop-filter: blur(5px);
}
.modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding: 25px 26px 18px;
border-bottom: 1px solid var(--line);
}
.modal__header h2 {
margin: 0;
font-size: 1.5rem;
}
.modal__header p {
margin: 5px 0 0;
color: var(--muted);
font-size: 0.75rem;
}
.modal__close {
display: grid;
width: 36px;
height: 36px;
flex: 0 0 auto;
place-items: center;
border-radius: 50%;
background: var(--surface-soft);
color: var(--ink);
font-size: 1.2rem;
}
.modal__body {
padding: 24px 26px 26px;
}
.modal__body > p {
color: var(--ink-soft);
font-size: 0.85rem;
}
.settings-group {
margin-bottom: 24px;
}
.settings-group legend {
margin-bottom: 10px;
color: var(--ink);
font-size: 0.8rem;
font-weight: 850;
}
.check-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.check-chip {
position: relative;
}
.check-chip input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.check-chip span {
display: inline-flex;
min-height: 38px;
align-items: center;
padding: 0 13px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--ink-soft);
cursor: pointer;
font-size: 0.72rem;
font-weight: 750;
}
.check-chip input:checked + span {
border-color: var(--forest);
background: var(--forest);
color: #fff;
}
.check-chip input:focus-visible + span {
outline: 3px solid var(--purple);
outline-offset: 2px;
}
.modal-select {
width: 100%;
min-height: 46px;
padding: 0 13px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
color: var(--ink);
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 9px;
margin-top: 25px;
}
.message-form textarea {
min-height: 140px;
padding-top: 12px;
resize: vertical;
}
.message-form input,
.message-form textarea {
border-color: var(--line);
}
.legal-copy h3 {
margin-top: 24px;
font-size: 1rem;
}
.legal-copy p,
.legal-copy li {
color: var(--ink-soft);
font-size: 0.83rem;
}
.legal-copy ul {
padding-left: 20px;
}
.toast {
position: fixed;
z-index: 200;
right: 20px;
bottom: 20px;
max-width: min(360px, calc(100% - 40px));
padding: 13px 17px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 13px;
background: var(--forest-deep);
color: #fff;
box-shadow: var(--shadow-lg);
font-size: 0.8rem;
font-weight: 750;
opacity: 0;
pointer-events: none;
transform: translateY(15px);
transition: opacity 180ms ease, transform 180ms ease;
}
.toast.is-visible {
opacity: 1;
transform: translateY(0);
}
.js .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 650ms ease, transform 650ms ease;
}
.js .reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 1080px) {
.primary-nav a {
padding-inline: 8px;
font-size: 0.78rem;
}
.primary-nav a::after {
right: 8px;
left: 8px;
}
.hero-grid {
gap: 45px;
}
.hero-shell {
padding-inline: 45px;
}
.floating-note--reach {
right: -10px;
}
.floating-note--reply {
left: -18px;
}
.insights-panel {
gap: 40px;
padding: 48px;
}
}
@media (max-width: 900px) {
.site-header__inner {
min-height: 70px;
}
.menu-toggle {
display: inline-flex;
}
.header-actions .button {
display: none;
}
.primary-nav {
position: absolute;
top: calc(100% + 9px);
right: 0;
display: none;
width: min(310px, calc(100vw - 30px));
padding: 13px;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
box-shadow: var(--shadow-lg);
}
.primary-nav.is-open {
display: block;
}
.primary-nav ul {
display: grid;
gap: 2px;
}
.primary-nav a {
padding: 12px 13px;
border-radius: 10px;
font-size: 0.88rem;
}
.primary-nav a::after {
display: none;
}
.primary-nav a:hover {
background: var(--surface-soft);
}
.hero-shell {
padding: 54px 36px 0;
}
.hero-grid {
grid-template-columns: 1fr;
}
.hero-copy {
padding-bottom: 12px;
}
.hero-visual {
width: min(620px, 100%);
margin: 10px auto 0;
}
.trend-grid,
.community-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trend-card:last-child,
.community-card:last-child {
grid-column: 1 / -1;
}
.messages-layout {
grid-template-columns: 1fr;
}
.live-rail {
position: static;
}
.insights-panel {
grid-template-columns: 1fr;
padding: 42px;
}
.stories-grid {
grid-template-columns: 1fr;
}
.story-card {
min-height: auto;
}
.create-card {
grid-template-columns: 1fr;
gap: 42px;
padding: 52px;
}
.faq-layout {
grid-template-columns: 1fr;
gap: 45px;
}
.faq-intro {
position: static;
}
.footer-grid {
grid-template-columns: 1.5fr repeat(2, 1fr);
}
.footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 680px) {
html {
scroll-padding-top: 82px;
}
.container {
width: min(100% - 28px, var(--container));
}
.section {
padding: 76px 0;
}
.announcement__inner {
min-height: 42px;
font-size: 0.7rem;
}
.announcement__inner span {
display: none;
}
.brand__logo {
width: 42px;
height: 42px;
}
.brand__tagline {
display: none;
}
.hero {
padding-top: 12px;
}
.hero-shell {
padding: 40px 22px 0;
border-radius: 27px;
}
.hero-copy h1 {
font-size: clamp(2.75rem, 14vw, 4rem);
}
.hero-copy__lead {
font-size: 1rem;
}
.hero-actions {
display: grid;
}
.hero-actions .button {
width: 100%;
}
.floating-note {
display: none;
}
.live-card {
transform: none;
}
.live-card__body {
padding: 18px;
}
.hero-stats {
grid-template-columns: 1fr;
}
.hero-stat,
.hero-stat:first-child {
padding: 19px 0;
border-right: 0;
border-bottom: 1px solid var(--line-dark);
}
.hero-stat:last-child {
border-bottom: 0;
}
.section-heading {
grid-template-columns: 1fr;
gap: 22px;
}
.section-heading h2,
.section-heading--center h2 {
font-size: 2.45rem;
}
.trend-toolbar {
align-items: stretch;
flex-direction: column;
}
.trend-tabs {
flex-wrap: nowrap;
padding-bottom: 5px;
overflow-x: auto;
}
.trend-tab {
flex: 0 0 auto;
}
.trend-search {
width: 100%;
}
.trend-grid,
.community-grid {
grid-template-columns: 1fr;
}
.trend-card:last-child,
.community-card:last-child {
grid-column: auto;
}
.trend-card {
min-height: 290px;
}
.conversation-card {
grid-template-columns: auto minmax(0, 1fr);
gap: 13px;
padding: 17px;
}
.conversation-card__action {
grid-column: 2;
justify-self: start;
}
.conversation-card p {
white-space: normal;
}
.insights-panel {
padding: 30px 20px;
border-radius: 25px;
}
.metric-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard__body {
padding: 14px;
}
.dashboard__header {
padding: 16px;
}
.contribution-row {
grid-template-columns: 70px minmax(0, 1fr) 25px;
}
.create-card {
padding: 37px 22px;
border-radius: 27px;
}
.create-card h2 {
font-size: 2.6rem;
}
.join-form {
padding: 20px;
}
.faq-list summary {
font-size: 0.95rem;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 38px 25px;
}
.footer-bottom {
align-items: flex-start;
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.js .reveal {
opacity: 1;
transform: none;
}
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to main content</a>
<div class="announcement">
<div class="container announcement__inner">
<span>New</span>
<strong>Community Pulse</strong>
<span>turns engagement data into clear, useful signals.</span>
<a href="#insights">Explore insights</a>
</div>
</div>
<header class="site-header">
<div class="container site-header__inner">
<a class="brand" href="#home" aria-label="Echoora home">
<img class="brand__logo" src="https://placehold.co/96x96/15372b/ffffff?text=E&font=montserrat" width="96" height="96" alt="Echoora logo">
<span>
<span class="brand__name">Echoora</span>
<span class="brand__tagline">Real voices, shared momentum.</span>
</span>
</a>
<nav class="primary-nav" id="primaryNav" aria-label="Primary navigation">
<ul>
<li><a href="#discover" aria-current="page">Discover</a></li>
<li><a href="#communities">Communities</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#insights">Insights</a></li>
<li><a href="#settingsDialog" data-dialog="settingsDialog">Settings</a></li>
<li><a href="#faq">Help</a></li>
</ul>
</nav>
<div class="header-actions">
<a class="button button--outline" href="#messages">Sign in</a>
<a class="button button--dark" href="#create">Join Echoora</a>
</div>
<button class="menu-toggle" id="menuToggle" type="button" aria-expanded="false" aria-controls="primaryNav" aria-label="Open navigation menu">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
<path d="M4 7h16M4 12h16M4 17h16"></path>
</svg>
</button>
</div>
</header>
<main id="main">
<section class="hero" id="home">
<div class="container">
<div class="hero-shell">
<div class="hero-grid">
<div class="hero-copy reveal">
<span class="eyebrow">The human-first social network</span>
<h1>Find your people. Move ideas <em>forward.</em></h1>
<p class="hero-copy__lead">Echoora brings thoughtful conversations, niche communities, and useful signals into one calm, human-first place. Follow what matters, join better conversations, and grow without performing for an algorithm.</p>
<p class="hero-copy__support">No rage bait, no cluttered feeds, and no manufactured urgency—just people sharing ideas with context, curiosity, and care.</p>
<div class="hero-actions">
<a class="button button--primary" href="#create">Create your space</a>
<a class="button button--light" href="#communities">Explore communities</a>
</div>
<ul class="hero-proof" aria-label="Platform benefits">
<li>Free to join</li>
<li>Human moderation</li>
<li>No ads in conversations</li>
</ul>
</div>
<figure class="hero-visual reveal">
<div class="live-card">
<div class="live-card__media">
<img src="https://picsum.photos/900/620" width="900" height="620" alt="A community gathering in a bright shared space">
<span class="live-badge">Live conversation</span>
</div>
<div class="live-card__body">
<h3 class="live-card__title">Designing a slower, <span>better internet</span></h3>
<div class="live-card__people">
<span class="avatar-stack" aria-hidden="true">
<img src="https://i.pravatar.cc/80?u=amara" width="80" height="80" alt="">
<img src="https://i.pravatar.cc/80?u=jules" width="80" height="80" alt="">
<img src="https://i.pravatar.cc/80?u=nia" width="80" height="80" alt="">
<span class="avatar-stack__more">+39</span>
</span>
<span>Neighborhood Commons is hosting</span>
</div>
<div class="live-card__footer">
<span>42 people are here now</span>
<a class="text-link" href="#messages">Join the conversation</a>
</div>
</div>
</div>
<div class="floating-note floating-note--reach" aria-hidden="true">
<span class="floating-note__icon">↗</span>
<span><strong>+24%</strong>community reach</span>
</div>
<div class="floating-note floating-note--reply" aria-hidden="true">
<span class="floating-note__icon">✓</span>
<span><strong>94%</strong>human replies</span>
</div>
</figure>
</div>
<div class="hero-stats reveal" aria-label="Echoora community statistics">
<div class="hero-stat">
<strong>2.4M</strong>
<span>thoughtful members worldwide</span>
</div>
<div class="hero-stat">
<strong>84K</strong>
<span>active interest-based communities</span>
</div>
<div class="hero-stat">
<strong>71%</strong>
<span>of weekly conversations get a human reply</span>
</div>
</div>
</div>
</div>
</section>
<section class="section discover-section" id="discover">
<div class="container">
<div class="section-heading reveal">
<div>
<span class="eyebrow">Live conversation index</span>
<h2>Know what’s moving—before it goes everywhere.</h2>
</div>
<div class="section-copy">
<p>The Discover index tracks meaningful conversation velocity across Echoora, not just raw post volume. Follow a topic to tune your feed, spot emerging ideas, and understand where your community is already active.</p>
<p>Filters update instantly, while momentum scores combine recency, thoughtful replies, and member participation to surface genuinely useful signals.</p>
</div>
</div>
<div class="trend-toolbar reveal">
<div class="trend-tabs" role="tablist" aria-label="Filter trending topics">
<button class="trend-tab" type="button" role="tab" aria-selected="true" data-filter="all">All signals</button>
<button class="trend-tab" type="button" role="tab" aria-selected="false" data-filter="creativity">Creativity</button>
<button class="trend-tab" type="button" role="tab" aria-selected="false" data-filter="culture">Culture</button>
<button class="trend-tab" type="button" role="tab" aria-selected="false" data-filter="technology">Technology</button>
<button class="trend-tab" type="button" role="tab" aria-selected="false" data-filter="wellbeing">Wellbeing</button>
</div>
<label class="trend-search">
<span class="sr-only">Search trending topics</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="11" cy="11" r="7"></circle>
<path d="m20 20-4-4"></path>
</svg>
<input id="trendSearch" type="search" placeholder="Search topics" autocomplete="off">
</label>
</div>
<p class="toolbar-status" id="trendStatus" aria-live="polite">Showing all 6 conversation signals</p>
<div class="trend-grid" id="trendGrid">
<article class="trend-card reveal" data-category="wellbeing" data-search="slow social digital wellbeing attention">
<div class="trend-card__top">
<span class="category-pill">Wellbeing</span>
<span class="momentum">+38%</span>
</div>
<h3>#SlowSocial</h3>
<p class="trend-card__description">Members are sharing practical ways to make online spaces calmer, kinder, and less driven by constant availability.</p>
<div class="trend-card__data">
<span><span class="trend-card__number">18.4K</span><span class="trend-card__label">thoughtful posts</span></span>
<span class="sparkline" aria-hidden="true">
<i style="--height: 24%"></i><i style="--height: 38%"></i><i style="--height: 31%"></i><i style="--height: 55%"></i><i style="--height: 48%"></i><i style="--height: 78%"></i><i style="--height: 92%"></i>
</span>
</div>
<div class="trend-card__action">
<button class="trend-follow" type="button" data-follow="SlowSocial" aria-pressed="false">Follow topic</button>
</div>
</article>
<article class="trend-card reveal" data-category="technology" data-search="careful ai responsible technology artificial intelligence">
<div class="trend-card__top">
<span class="category-pill category-pill--purple">Technology</span>
<span class="momentum">+31%</span>
</div>
<h3>#CarefulAI</h3>
<p class="trend-card__description">A cross-disciplinary conversation about transparent systems, creative work, and how AI can support people without replacing judgment.</p>
<div class="trend-card__data">
<span><span class="trend-card__number">15.2K</span><span class="trend-card__label">thoughtful posts</span></span>
<span class="sparkline" aria-hidden="true">
<i style="--height: 35%"></i><i style="--height: 31%"></i><i style="--height: 45%"></i><i style="--height: 58%"></i><i style="--height: 66%"></i><i style="--height: 72%"></i><i style="--height: 87%"></i>
</span>
</div>
<div class="trend-card__action">
<button class="trend-follow" type="button" data-follow="CarefulAI" aria-pressed="false">Follow topic</button>
</div>
</article>
<article class="trend-card reveal" data-category="culture" data-search="third places local community culture neighborhood">
<div class="trend-card__top">
<span class="category-pill category-pill--gold">Culture</span>
<span class="momentum">+24%</span>
</div>
<h3>#ThirdPlaces</h3>
<p class="trend-card__description">Neighborhood groups are mapping the cafés, libraries, workshops, and public spaces that make belonging possible offline.</p>
<div class="trend-card__data">
<span><span class="trend-card__number">9.6K</span><span class="trend-card__label">thoughtful posts</span></span>
<span class="sparkline" aria-hidden="true">
<i style="--height: 29%"></i><i style="--height: 44%"></i><i style="--height: 39%"></i><i style="--height: 58%"></i><i style="--height: 63%"></i><i style="--height: 68%"></i><i style="--height: 76%"></i>
</span>
</div>
<div class="trend-card__action">
<button class="trend-follow" type="button" data-follow="ThirdPlaces" aria-pressed="false">Follow topic</button>
</div>
</article>
<article class="trend-card reveal" data-category="creativity" data-search="creative practice process making artists design">
<div class="trend-card__top">
<span class="category-pill category-pill--coral">Creativity</span>
<span class="momentum">+22%</span>
</div>
<h3>#ShowTheProcess</h3>
<p class="trend-card__description">Makers are sharing unfinished drafts, honest lessons, and the process behind work that usually appears only as a final result.</p>
<div class="trend-card__data">
<span><span class="trend-card__number">12.1K</span><span class="trend-card__label">thoughtful posts</span></span>
<span class="sparkline" aria-hidden="true">
<i style="--height: 18%"></i><i style="--height: 34%"></i><i style="--height: 49%"></i><i style="--height: 44%"></i><i style="--height: 61%"></i><i style="--height: 70%"></i><i style="--height: 81%"></i>
</span>
</div>
<div class="trend-card__action">
<button class="trend-follow" type="button" data-follow="ShowTheProcess" aria-pressed="false">Follow topic</button>
</div>
</article>
<article class="trend-card reveal" data-category="wellbeing" data-search="morning pages reflection wellbeing habits journaling">
<div class="trend-card__top">
<span class="category-pill">Wellbeing</span>
<span class="momentum">+17%</span>
</div>
<h3>#MorningPages</h3>
<p class="trend-card__description">A low-pressure daily reflection habit, with members exchanging prompts for focus, clarity, and a gentler start.</p>
<div class="trend-card__data">
<span><span class="trend-card__number">7.4K</span><span class="trend-card__label">thoughtful posts</span></span>
<span class="sparkline" aria-hidden="true">
<i style="--height: 42%"></i><i style="--height: 35%"></i><i style="--height: 51%"></i><i style="--height: 47%"></i><i style="--height: 60%"></i><i style="--height: 57%"></i><i style="--height: 70%"></i>
</span>
</div>
<div class="trend-card__action">
<button class="trend-follow" type="button" data-follow="MorningPages" aria-pressed="false">Follow topic</button>
</div>
</article>
<article class="trend-card reveal" data-category="technology" data-search="open source collaboration software technology builders">
<div class="trend-card__top">
<span class="category-pill category-pill--purple">Technology</span>
<span class="momentum">+19%</span>
</div>
<h3>#OpenSourceBuilders</h3>
<p class="trend-card__description">Maintainers and contributors are documenting the real work behind open projects: maintenance, governance, and sustainable communities.</p>
<div class="trend-card__data">
<span><span class="trend-card__number">8.8K</span><span class="trend-card__label">thoughtful posts</span></span>
<span class="sparkline" aria-hidden="true">
<i style="--height: 27%"></i><i style="--height: 36%"></i><i style="--height: 52%"></i><i style="--height: 49%"></i><i style="--height: 66%"></i><i style="--height: 61%"></i><i style="--height: 78%"></i>
</span>
</div>
<div class="trend-card__action">
<button class="trend-follow" type="button" data-follow="OpenSourceBuilders" aria-pressed="false">Follow topic</button>
</div>
</article>
<div class="empty-state" id="trendEmpty" hidden>
<strong>No matching signals yet.</strong>
Try another topic or clear your search to see every conversation.
</div>
</div>
</div>
</section>
<section class="section section--surface communities-section" id="communities">
<div class="container">
<div class="section-heading reveal">
<div>
<span class="eyebrow">Communities with a point of view</span>
<h2>Built around interests—not follower counts.</h2>
</div>
<div class="section-copy">
<p>Echoora communities are small enough to feel personal and active enough to stay useful. Every space is member-led, moderated by people who understand the topic, and designed around meaningful participation rather than ad inventory.</p>
<p>Find a community that matches your curiosity, follow only the conversations you care about, and help shape a place with context and care.</p>
</div>
</div>
<div class="community-grid">
<article class="community-card reveal">
<div class="community-card__media">
<img src="https://picsum.photos/900/580" width="900" height="580" loading="lazy" alt="A creative studio filled with artwork and work tables">
<span class="community-card__badge">Creative practice</span>
<span class="community-card__activity">Active 8 min ago</span>
</div>
<div class="community-card__body">
<h3>Make & Meaning</h3>
<p>Process notes, honest critique, and shared studio wisdom for illustrators, designers, writers, and makers at every stage.</p>
<div class="community-card__footer">
<div class="community-card__members">
<span class="avatar-stack" aria-hidden="true">
<img src="https://i.pravatar.cc/70?u=amelia" width="70" height="70" alt="">
<img src="https://i.pravatar.cc/70?u=omar" width="70" height="70" alt="">
<img src="https://i.pravatar.cc/70?u=sora" width="70" height="70" alt="">
</span>
<span>28.4K members</span>
</div>
<button class="join-button" type="button" data-join="Make & Meaning" aria-pressed="false">Join community</button>
</div>
</div>
</article>
<article class="community-card reveal">
<div class="community-card__media">
<img src="https://picsum.photos/900/570" width="900" height="570" loading="lazy" alt="A welcoming neighborhood space with people gathered together">
<span class="community-card__badge">Local life</span>
<span class="community-card__activity">Active now</span>
</div>
<div class="community-card__body">
<h3>Neighborhood Commons</h3>
<p>Local organizing, shared resources, small-business stories, and practical ideas for making your area more connected.</p>
<div class="community-card__footer">
<div class="community-card__members">
<span class="avatar-stack" aria-hidden="true">
<img src="https://i.pravatar.cc/70?u=lena" width="70" height="70" alt="">
<img src="https://i.pravatar.cc/70?u=dev" width="70" height="70" alt="">
<img src="https://i.pravatar.cc/70?u=zoe" width="70" height="70" alt="">
</span>
<span>16.2K members</span>
</div>
<button class="join-button" type="button" data-join="Neighborhood Commons" aria-pressed="false">Join community</button>
</div>
</div>
</article>
<article class="community-card reveal">
<div class="community-card__media">
<img src="https://picsum.photos/900/590" width="900" height="590" loading="lazy" alt="A collaborative team working around a table">
<span class="community-card__badge">Future of work</span>
<span class="community-card__activity">Active 2 min ago</span>
</div>
<div class="community-card__body">
<h3>Work, Reimagined</h3>
<p>Research, experiments, and candid conversations about healthier teams, responsible leadership, and how work is changing.</p>
<div class="community-card__footer">
<div class="community-card__members">
<span class="avatar-stack" aria-hidden="true">
<img src="https://i.pravatar.cc/70?u=marcus" width="70" height="70" alt="">
<img src="https://i.pravatar.cc/70?u=imani" width="70" height="70" alt="">
<img src="https://i.pravatar.cc/70?u=arun" width="70" height="70" alt="">
</span>
<span>22.7K members</span>
</div>
<button class="join-button" type="button" data-join="Work, Reimagined" aria-pressed="false">Join community</button>
</div>
</div>
</article>
</div>
</div>
</section>
<section class="section messages-section" id="messages">
<div class="container">
<div class="section-heading reveal">
<div>
<span class="eyebrow">Conversations, not clutter</span>
<h2>Messages that feel like a welcome.</h2>
</div>
<div class="section-copy">
<p>Echoora keeps direct messages, group threads, and shared spaces together without turning every exchange into a demand for attention. Context stays visible, and you can move from a useful reply to a deeper conversation whenever you’re ready.</p>
<p>Start with a community, follow a thread, or send a direct note. Thoughtful response prompts and lightweight nudges help conversations move without creating noise.</p>
</div>
</div>
<div class="messages-layout">
<div class="conversation-list reveal">
<article class="conversation-card">
<div class="conversation-card__avatar">
<img src="https://i.pravatar.cc/120?u=maya-chen" width="120" height="120" loading="lazy" alt="Maya Chen">
</div>
<div>
<div class="conversation-card__top">
<h3>Maya Chen</h3>
<span class="conversation-card__time">4 min</span>
</div>
<p>That framework for a kinder onboarding flow is excellent. I’d love to test it with the new volunteer cohort.</p>
<span class="conversation-card__tag">Make & Meaning</span>
</div>
<button class="conversation-card__action" type="button" data-message="Maya Chen">Send message</button>
</article>
<article class="conversation-card">
<div class="conversation-card__avatar">
<img src="https://i.pravatar.cc/120?u=alex-rivera" width="120" height="120" loading="lazy" alt="Alex Rivera">
</div>
<div>
<div class="conversation-card__top">
<h3>Alex Rivera</h3>
<span class="conversation-card__time">18 min</span>
</div>
<p>Our library workshop is ready for a preview. Should we bring the neighborhood map or keep it in the follow-up?</p>
<span class="conversation-card__tag">Neighborhood Commons</span>
</div>
<button class="conversation-card__action" type="button" data-message="Alex Rivera">Send message</button>
</article>
<article class="conversation-card">
<div class="conversation-card__avatar">
<img src="https://i.pravatar.cc/120?u=echoora-weekly" width="120" height="120" loading="lazy" alt="Echoora Weekly">
</div>
<div>
<div class="conversation-card__top">
<h3>Echoora Weekly</h3>
<span class="conversation-card__time">Today</span>
</div>
<p>Your weekly roundup: 12 useful replies, 4 new communities, and the conversations gaining momentum this week.</p>
<span class="conversation-card__tag">Personal digest</span>
</div>
<button class="conversation-card__action" type="button" data-message="Echoora Weekly">Open digest</button>
</article>
</div>
<aside class="live-rail reveal" aria-label="Live rooms and suggested topics">
<div class="live-rail__header">
<h3>Live rooms</h3>
<span>3 happening</span>
</div>
<article class="room-item">
<span class="room-item__time">Today · 5:30 PM</span>
<h4>Critique without the cold</h4>
<p>A practical, generous portfolio review with three working designers.</p>
<a href="#create">Save your seat →</a>
</article>
<article class="room-item">
<span class="room-item__time">Tomorrow · 12:00 PM</span>
<h4>Healthy community metrics</h4>
<p>How to measure belonging, not just follower totals.</p>
<a href="#insights">Join the briefing →</a>
</article>
<article class="room-item">
<span class="room-item__time">Friday · 9:00 AM</span>
<h4>Build your local guide</h4>
<p>Turn neighborhood knowledge into a useful shared resource.</p>
<a href="#communities">See the community →</a>
</article>
<div class="hashtag-list" aria-label="Suggested hashtags">
<a href="#discover">#slowsocial</a>
<a href="#discover">#carefulai</a>
<a href="#discover">#thirdplaces</a>
<a href="#discover">#showtheprocess</a>
</div>
</aside>
</div>
</div>
</section>
<section class="section insights-section" id="insights">
<div class="container">
<div class="insights-panel reveal">
<div class="insights-copy">
<span class="eyebrow">Community intelligence</span>
<h2>Signal, not noise.</h2>
<p>Know what is working before you publish your next post. Community Pulse turns organic growth, engagement metrics, member sentiment, and content contribution into one clear view—so you can make better decisions without chasing every number.</p>
<p>Track the health of each conversation, compare channels without vanity metrics, and export the data your team needs. Every insight respects member privacy and is designed to help a community become healthier, not merely larger.</p>
<ul class="insight-list">
<li><span class="insight-list__icon">✓</span><span>Privacy-first reach and attribution reporting</span></li>
<li><span class="insight-list__icon">✓</span><span>Sentiment trends and conversation-quality signals</span></li>
<li><span class="insight-list__icon">✓</span><span>Clear exports for community and growth teams</span></li>
</ul>
<a class="button button--dark" href="#create">Explore Community Pulse</a>
</div>
<div class="dashboard" aria-label="Example Echoora community analytics dashboard">
<div class="dashboard__header">
<div class="dashboard__title">
<span class="dashboard__logo" aria-hidden="true">E</span>
<span><strong>Community Pulse</strong><span>Make & Meaning</span></span>
</div>
<select class="dashboard__select" id="dashboardRange" aria-label="Analytics date range">
<option>Last 30 days</option>
<option>Last 90 days</option>
<option>Last 12 months</option>
</select>
</div>
<div class="dashboard__body">
<div class="metric-grid">
<div class="metric-card">
<span>Organic reach</span>
<strong>284K</strong>
<small>↗ 18.4%</small>
</div>
<div class="metric-card">
<span>Engagement rate</span>
<strong>9.8%</strong>
<small>↗ 2.1%</small>
</div>
<div class="metric-card">
<span>Active members</span>
<strong>12.6K</strong>
<small>↗ 8.2%</small>
</div>
<div class="metric-card">
<span>Reply time</span>
<strong>4m</strong>
<small>↓ 12%</small>
</div>
</div>
<div class="chart-card">
<div class="chart-card__header">
<div><h4>Meaningful actions</h4><p>Replies, saves, and event participation</p></div>
<span class="chart-legend">This period</span>
</div>
<svg viewBox="0 0 560 180" role="img" aria-label="Engagement chart trending upward over six weeks">
<defs>
<linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#6552df" stop-opacity="0.28"></stop>
<stop offset="100%" stop-color="#6552df" stop-opacity="0"></stop>
</linearGradient>
</defs>
<g stroke="#ececf2" stroke-width="1">
<line x1="0" y1="24" x2="560" y2="24"></line>
<line x1="0" y1="65" x2="560" y2="65"></line>
<line x1="0" y1="106" x2="560" y2="106"></line>
<line x1="0" y1="147" x2="560" y2="147"></line>
</g>
<path d="M0 143 C50 132 70 137 105 116 S174 123 215 91 S285 99 323 72 S389 80 430 48 S505 54 560 22 L560 180 L0 180 Z" fill="url(#chartFill)"></path>
<path d="M0 143 C50 132 70 137 105 116 S174 123 215 91 S285 99 323 72 S389 80 430 48 S505 54 560 22" fill="none" stroke="#6552df" stroke-linecap="round" stroke-width="4"></path>
<circle cx="560" cy="22" r="5" fill="#6552df" stroke="#fff" stroke-width="3"></circle>
<g fill="#8b9490" font-size="9" font-family="Inter, Arial, sans-serif">
<text x="0" y="177">May 5</text>
<text x="92" y="177">May 12</text>
<text x="188" y="177">May 19</text>
<text x="283" y="177">May 26</text>
<text x="378" y="177">Jun 2</text>
<text x="515" y="177">Jun 9</text>
</g>
</svg>
</div>
<div class="contribution-list" aria-label="Engagement contribution by format">
<div class="contribution-row"><span>Replies</span><span class="contribution-bar"><span style="--width: 88%"></span></span><strong>46%</strong></div>
<div class="contribution-row"><span>Member posts</span><span class="contribution-bar"><span style="--width: 59%"></span></span><strong>31%</strong></div>
<div class="contribution-row"><span>Events</span><span class="contribution-bar"><span style="--width: 29%"></span></span><strong>15%</strong></div>
<div class="contribution-row"><span>Referrals</span><span class="contribution-bar"><span style="--width: 15%"></span></span><strong>8%</strong></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section stories-section" id="stories">
<div class="container">
<div class="section-heading--center reveal">
<span class="eyebrow">Stories from the network</span>
<h2>Growth looks different when it starts with belonging.</h2>
<div class="section-copy">
<p>Echoora members are building spaces with durable participation, stronger member relationships, and organic reach. These stories show what can happen when a platform rewards thoughtful contribution instead of manufactured urgency.</p>
<p>From independent creators to community organizers, every group has its own rhythm. Echoora gives those leaders better tools without taking control away from them.</p>
</div>
</div>
<div class="stories-grid">
<figure class="story-card reveal">
<span class="story-card__mark" aria-hidden="true">“</span>
<blockquote>Our comments became actual conversations. People ask follow-up questions, share resources, and return with new ideas instead of simply reacting and moving on.</blockquote>
<div class="story-card__result">
<strong>62%</strong>
<span>increase in comment quality</span>
</div>
<figcaption>
<img src="https://i.pravatar.cc/100?u=lena-ortiz" width="100" height="100" loading="lazy" alt="Lena Ortiz">
<span><strong>Lena Ortiz</strong><span>Founder, Field Notes Club</span></span>
</figcaption>
</figure>
<figure class="story-card reveal">
<span class="story-card__mark" aria-hidden="true">“</span>
<blockquote>The moderation tools give our volunteer team confidence. We can protect the tone of the community while making sure genuine questions still get heard.</blockquote>
<div class="story-card__result">
<strong>41%</strong>
<span>more returning members</span>
</div>
<figcaption>
<img src="https://i.pravatar.cc/100?u=marcus-lee" width="100" height="100" loading="lazy" alt="Marcus Lee">
<span><strong>Marcus Lee</strong><span>Community lead, Open Studio</span></span>
</figcaption>
</figure>
<figure class="story-card reveal">
<span class="story-card__mark" aria-hidden="true">“</span>
<blockquote>I stopped planning around algorithms and started planning around people. The result is a smaller audience that feels more invested in every piece of work.</blockquote>
<div class="story-card__result">
<strong>3.2×</strong>
<span>more referral-driven reach</span>
</div>
<figcaption>
<img src="https://i.pravatar.cc/100?u=priya-nair" width="100" height="100" loading="lazy" alt="Priya Nair">
<span><strong>Priya Nair</strong><span>Independent creator</span></span>
</figcaption>
</figure>
</div>
</div>
</section>
<section class="section create-section" id="create">
<div class="container">
<div class="create-card reveal">
<div class="create-card__copy">
<span class="eyebrow">Make room for better conversations</span>
<h2>Give your community space to grow.</h2>
<p>Create a free space for your people, publish your first conversation, or simply follow what moves you. Echoora is free for members, and gives community organizers the tools they need without requiring an ad budget.</p>
<ul class="create-perks" aria-label="Membership benefits">
<li>Unlimited conversations</li>
<li>Private communities</li>
<li>Community analytics</li>
<li>Human support</li>
</ul>
</div>
<form class="join-form" id="joinForm">
<h3>Join Echoora</h3>
<p>Start with your inbox. No credit card, no noisy onboarding.</p>
<div class="form-field">
<label for="joinEmail">Email address</label>
<input id="joinEmail" name="email" type="email" placeholder="you@example.com" autocomplete="email" required>
</div>
<div class="form-field">
<label for="joinRole">I’m joining to</label>
<select id="joinRole" name="role" required>
<option value="" selected disabled>Choose one</option>
<option>Meet people and join communities</option>
<option>Share ideas and creative work</option>
<option>Build and grow a community</option>
<option>Explore topics and conversations</option>
</select>
</div>
<label class="form-consent">
<input type="checkbox" required>
<span>I agree to Echoora’s <a href="#legalDialog" data-legal="terms">Terms</a> and <a href="#legalDialog" data-legal="privacy">Privacy Policy</a>. I can update these preferences at any time.</span>
</label>
<button class="button button--primary button--wide" type="submit">Create my account</button>
<p class="form-message" id="joinMessage" aria-live="polite"></p>
</form>
</div>
</div>
</section>
<section class="section faq-section" id="faq">
<div class="container faq-layout">
<div class="faq-intro reveal">
<span class="eyebrow">Help & good to know</span>
<h2>Questions, answered with context.</h2>
<p>Everything you need to understand how Echoora works, how communities are moderated, and how we keep the platform useful without turning attention into a commodity.</p>
<div class="help-card">
<strong>Still need a hand?</strong>
<p>Our support team usually replies within one business day.</p>
<a class="text-link" href="mailto:help@echoora.social">Email help@echoora.social</a>
</div>
</div>
<div class="faq-list reveal">
<details open>
<summary>What makes Echoora different from other social networks?</summary>
<div class="faq-answer">
<p>Echoora is designed around meaningful participation rather than maximum time spent. Communities are interest-led and member-governed, conversations carry more context, and reach metrics help organizers understand genuine interest—not just impressions.</p>
<p>There are no ads inside conversation feeds, no hidden engagement mechanics, and no pressure to post constantly. The result is a social experience designed to help people connect, collaborate, and return when they genuinely have something to share.</p>
</div>
</details>
<details>
<summary>How are communities moderated?</summary>
<div class="faq-answer">
<p>Every community has trusted moderators who set local norms and review reports. Echoora also provides automated signals for harassment, spam, and coordinated inauthentic behavior, but those signals support human review rather than replace it.</p>
<p>Moderators receive clear escalation tools, private reporting tools, and best-practice guidance for resolving disputes. If a community becomes inactive or violates platform standards, members can request a review through our trust and safety team.</p>
</div>
</details>
<details>
<summary>Is Echoora free for members and community leaders?</summary>
<div class="faq-answer">
<p>Yes. Joining Echoora, creating a community, messaging members, and accessing core community insights are free. Our optional Creator and Organization plans add advanced scheduling, larger data exports, custom domains, and dedicated support.</p>
<p>Free access is part of our long-term commitment to keeping public conversation open. We do not sell member data, and we never place third-party advertising inside private or public conversation feeds.</p>
</div>
</details>
<details>
<summary>What engagement metrics does Community Pulse show?</summary>
<div class="faq-answer">
<p>Community Pulse tracks organic reach, meaningful actions, engagement quality, active members, response time, member sentiment, and contribution by content format. Organizers can compare periods, channels, and community spaces to understand what is creating durable participation.</p>
<p>Metrics are aggregated and privacy-conscious. We do not expose individual reading histories, sell behavioral data, or use private messages to calculate advertising profiles.</p>
</div>
</details>
<details>
<summary>Can I import my contacts or move an existing community?</summary>
<div class="faq-answer">
<p>You can invite contacts by email and import a list of existing members through a guided migration flow. Dedicated migration support is available for eligible organizations and communities with more than 5,000 members.</p>
<p>Our team helps map roles, content, permissions, and moderation workflows so your community can move without losing its history or culture.</p>
</div>
</details>
<details>
<summary>How does Echoora protect my privacy?</summary>
<div class="faq-answer">
<p>Echoora collects only the information needed to operate the service and provide the controls you request. Private messages are not used for advertising, and community analytics are aggregated to prevent individual profiles from being exposed to organizers.</p>
<p>You can review connected apps, adjust notification preferences, export your data, or request account deletion from Settings. Data processing and retention periods are explained in our Privacy Policy.</p>
</div>
</details>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a class="brand" href="#home" aria-label="Echoora home">
<img class="brand__logo" src="https://placehold.co/96x96/d8ff72/15372b?text=E&font=montserrat" width="96" height="96" alt="Echoora logo">
<span>
<span class="brand__name">Echoora</span>
<span class="brand__tagline">Real voices, shared momentum.</span>
</span>
</a>
<p>A human-first social network for thoughtful communities, useful conversations, and sustainable organic growth.</p>
<div class="footer-contact">
<a href="mailto:hello@echoora.social">hello@echoora.social</a>
<a href="tel:+12125550147">+1 (212) 555-0147</a>
<span>155 Hudson Street, New York, NY 10013</span>
<span>Support: Mon–Fri, 9:00 AM–6:00 PM ET</span>
</div>
<div class="social-links" aria-label="Social media links">
<a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="Echoora on Instagram">Instagram</a>
<a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer" aria-label="Echoora on LinkedIn">LinkedIn</a>
<a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer" aria-label="Echoora on YouTube">YouTube</a>
<a href="https://bsky.app/" target="_blank" rel="noopener noreferrer" aria-label="Echoora on Bluesky">Bluesky</a>
</div>
</div>
<nav class="footer-column" aria-label="Product links">
<h3>Product</h3>
<ul>
<li><a href="#discover">Discover</a></li>
<li><a href="#communities">Communities</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#insights">Community Pulse</a></li>
<li><a href="#create">Create a space</a></li>
</ul>
</nav>
<nav class="footer-column" aria-label="Resource links">
<h3>Resources</h3>
<ul>
<li><a href="#faq">Help center</a></li>
<li><a href="#stories">Member stories</a></li>
<li><a href="mailto:help@echoora.social">Community support</a></li>
<li><a href="#insights">Analytics guide</a></li>
<li><a href="#settingsDialog" data-dialog="settingsDialog">Settings</a></li>
</ul>
</nav>
<nav class="footer-column" aria-label="Company links">
<h3>Company</h3>
<ul>
<li><a href="#home">About Echoora</a></li>
<li><a href="mailto:press@echoora.social">Press room</a></li>
<li><a href="mailto:jobs@echoora.social">Careers</a></li>
<li><a href="#legalDialog" data-legal="privacy">Privacy</a></li>
<li><a href="#legalDialog" data-legal="terms">Terms</a></li>
</ul>
</nav>
</div>
<div class="footer-bottom">
<span>© <span id="currentYear">2025</span> Echoora Social, Inc. All rights reserved.</span>
<div class="footer-legal">
<a href="#legalDialog" data-legal="privacy">Privacy Policy</a>
<a href="#legalDialog" data-legal="terms">Terms of Service</a>
<a href="#faq">Community Guidelines</a>
<a href="#home">Back to top ↑</a>
</div>
</div>
</div>
</footer>
<dialog class="modal" id="settingsDialog" aria-labelledby="settingsTitle">
<form method="dialog">
<div class="modal__header">
<div>
<h2 id="settingsTitle">Feed settings</h2>
<p>Choose how Echoora shapes your Discover feed.</p>
</div>
<button class="modal__close" type="submit" value="cancel" aria-label="Close settings">×</button>
</div>
<div class="modal__body">
<fieldset class="settings-group">
<legend>Topics you want to see more</legend>
<div class="check-grid">
<label class="check-chip"><input type="checkbox" name="topic" value="Creativity" checked><span>Creativity</span></label>
<label class="check-chip"><input type="checkbox" name="topic" value="Technology" checked><span>Technology</span></label>
<label class="check-chip"><input type="checkbox" name="topic" value="Culture"><span>Culture</span></label>
<label class="check-chip"><input type="checkbox" name="topic" value="Wellbeing" checked><span>Wellbeing</span></label>
<label class="check-chip"><input type="checkbox" name="topic" value="Local"><span>Local</span></label>
</div>
</fieldset>
<div class="settings-group">
<label class="form-field" for="feedDensity">
<span style="color: var(--ink); font-weight: 800;">Feed density</span>
<select class="modal-select" id="feedDensity">
<option>Comfortable</option>
<option>Compact</option>
<option>More context</option>
</select>
</label>
</div>
<div class="settings-group">
<label class="form-consent" style="color: var(--ink-soft); margin: 0;">
<input type="checkbox" checked>
<span>Show me conversations from communities I already follow before emerging topics.</span>
</label>
</div>
<div class="modal-actions">
<button class="button button--outline" type="submit" value="cancel">Cancel</button>
<button class="button button--dark" type="submit" value="saved">Save preferences</button>
</div>
</div>
</form>
</dialog>
<dialog class="modal" id="messageDialog" aria-labelledby="messageTitle">
<form class="message-form" id="messageForm">
<div class="modal__header">
<div>
<h2 id="messageTitle">New message</h2>
<p id="messageSubtitle">Start a thoughtful conversation.</p>
</div>
<button class="modal__close" type="button" data-close-dialog="messageDialog" aria-label="Close message composer">×</button>
</div>
<div class="modal__body">
<div class="form-field">
<label for="messageTo">To</label>
<input id="messageTo" name="to" type="text" readonly>
</div>
<div class="form-field">
<label for="messageBody">Message</label>
<textarea id="messageBody" name="message" placeholder="Write something useful, specific, and kind…" required></textarea>
</div>
<div class="modal-actions">
<button class="button button--outline" type="button" data-close-dialog="messageDialog">Cancel</button>
<button class="button button--dark" type="submit">Send message</button>
</div>
<p class="form-message" id="messageStatus" aria-live="polite"></p>
</div>
</form>
</dialog>
<dialog class="modal" id="legalDialog" aria-labelledby="legalTitle">
<div class="modal__header">
<div>
<h2 id="legalTitle">Privacy Policy</h2>
<p>Echoora community standards and data practices.</p>
</div>
<button class="modal__close" type="button" data-close-dialog="legalDialog" aria-label="Close legal information">×</button>
</div>
<div class="modal__body legal-copy" id="legalContent"></div>
</dialog>
<template id="privacyCopy">
<p>Echoora Social, Inc. (“Echoora,” “we,” or “us”) collects the information needed to operate the service, support communities, and provide the controls you request. We do not sell personal information or use private conversations for advertising.</p>
<h3>Information we collect</h3>
<p>Depending on how you use Echoora, this may include your profile details, community contributions, messages you choose to send, device information, and interaction events used to operate, secure, and improve the platform.</p>
<h3>How we use information</h3>
<p>We use information to provide community features, personalize content, respond to support requests, prevent abuse, and communicate service updates. Analytics are designed to protect member privacy and are not sold to third parties.</p>
<h3>Your choices</h3>
<ul>
<li>Manage notifications and feed preferences from Settings.</li>
<li>Request an export or deletion of your account data.</li>
<li>Review connected applications and revoke access at any time.</li>
</ul>
<p>For privacy questions or formal requests, contact <a href="mailto:privacy@echoora.social"><strong>privacy@echoora.social</strong></a>. This summary is provided for the fictional Echoora demonstration.</p>
</template>
<template id="termsCopy">
<p>These Echoora Terms explain the basic rules for using the fictional social networking service. By creating an account, you agree to use the service lawfully, respect other members, and follow the standards of any community you join.</p>
<h3>Your account and content</h3>
<p>You retain ownership of content you post. You give Echoora a limited, worldwide license to host and display that content as needed to operate the service. You are responsible for keeping your account credentials secure.</p>
<h3>Community conduct</h3>
<p>Do not harass others, impersonate a person or organization, distribute spam, evade platform safeguards, or use Echoora to cause harm. Moderators may remove content or restrict participation when necessary to protect a community.</p>
<h3>Availability and changes</h3>
<p>Echoora may update features, limits, and these terms as the service evolves. We will provide notice for material changes and explain how affected accounts can close or export their data.</p>
<p>For questions, contact <a href="mailto:legal@echoora.social"><strong>legal@echoora.social</strong></a>. These terms are provided for the fictional Echoora demonstration.</p>
</template>
<div class="toast" id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
<script>
(() => {
const menuToggle = document.getElementById('menuToggle');
const primaryNav = document.getElementById('primaryNav');
const toast = document.getElementById('toast');
let toastTimer;
const showToast = (message) => {
toast.textContent = message;
toast.classList.add('is-visible');
clearTimeout(toastTimer);
toastTimer = setTimeout(() => toast.classList.remove('is-visible'), 2800);
};
const openDialog = (dialog) => {
if (!dialog) return;
if (typeof dialog.showModal === 'function') {
dialog.showModal();
} else {
dialog.setAttribute('open', '');
}
};
const closeDialog = (dialog) => {
if (!dialog) return;
if (typeof dialog.close === 'function') {
dialog.close();
} else {
dialog.removeAttribute('open');
}
};
document.getElementById('currentYear').textContent = new Date().getFullYear();
menuToggle.addEventListener('click', () => {
const isOpen = primaryNav.classList.toggle('is-open');
menuToggle.setAttribute('aria-expanded', String(isOpen));
menuToggle.setAttribute('aria-label', isOpen ? 'Close navigation menu' : 'Open navigation menu');
document.body.classList.toggle('menu-open', isOpen);
});
primaryNav.querySelectorAll('a').forEach((link) => {
link.addEventListener('click', () => {
primaryNav.classList.remove('is-open');
menuToggle.setAttribute('aria-expanded', 'false');
menuToggle.setAttribute('aria-label', 'Open navigation menu');
document.body.classList.remove('menu-open');
});
});
document.querySelectorAll('[data-dialog]').forEach((link) => {
link.addEventListener('click', (event) => {
event.preventDefault();
openDialog(document.getElementById(link.dataset.dialog));
});
});
document.querySelectorAll('[data-close-dialog]').forEach((button) => {
button.addEventListener('click', () => closeDialog(document.getElementById(button.dataset.closeDialog)));
});
document.querySelectorAll('dialog').forEach((dialog) => {
dialog.addEventListener('click', (event) => {
const rect = dialog.getBoundingClientRect();
const outside = event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
if (outside) closeDialog(dialog);
});
});
const settingsDialog = document.getElementById('settingsDialog');
settingsDialog.addEventListener('close', () => {
if (settingsDialog.returnValue === 'saved') {
showToast('Your feed preferences have been updated.');
}
});
const trendTabs = Array.from(document.querySelectorAll('.trend-tab'));
const trendCards = Array.from(document.querySelectorAll('.trend-card'));
const trendSearch = document.getElementById('trendSearch');
const trendStatus = document.getElementById('trendStatus');
const trendEmpty = document.getElementById('trendEmpty');
let activeFilter = 'all';
const applyTrendFilters = () => {
const query = trendSearch.value.trim().toLowerCase();
let visibleCount = 0;
trendCards.forEach((card) => {
const matchesCategory = activeFilter === 'all' || card.dataset.category === activeFilter;
const matchesSearch = !query || card.dataset.search.includes(query) || card.textContent.toLowerCase().includes(query);
const isVisible = matchesCategory && matchesSearch;
card.hidden = !isVisible;
if (isVisible) visibleCount += 1;
});
trendEmpty.hidden = visibleCount !== 0;
const categoryLabel = activeFilter === 'all' ? 'all' : activeFilter;
trendStatus.textContent = query
? `${visibleCount} matching signal${visibleCount === 1 ? '' : 's'} for “${trendSearch.value.trim()}”`
: `Showing ${visibleCount} ${categoryLabel} conversation signal${visibleCount === 1 ? '' : 's'}`;
};
trendTabs.forEach((tab) => {
tab.addEventListener('click', () => {
activeFilter = tab.dataset.filter;
trendTabs.forEach((item) => item.setAttribute('aria-selected', String(item === tab)));
applyTrendFilters();
});
});
trendSearch.addEventListener('input', applyTrendFilters);
document.querySelectorAll('[data-follow]').forEach((button) => {
button.addEventListener('click', () => {
const following = button.getAttribute('aria-pressed') === 'true';
button.setAttribute('aria-pressed', String(!following));
button.textContent = !following ? 'Following' : 'Follow topic';
showToast(!following
? `You’re now following #${button.dataset.follow}.`
: `You’ve unfollowed #${button.dataset.follow}.`);
});
});
document.querySelectorAll('[data-join]').forEach((button) => {
button.addEventListener('click', () => {
const joined = button.getAttribute('aria-pressed') === 'true';
button.setAttribute('aria-pressed', String(!joined));
button.textContent = !joined ? 'Joined' : 'Join community';
showToast(!joined
? `Welcome to ${button.dataset.join}. Your feed is ready.`
: `You left ${button.dataset.join}.`);
});
});
const messageDialog = document.getElementById('messageDialog');
const messageForm = document.getElementById('messageForm');
const messageTo = document.getElementById('messageTo');
const messageBody = document.getElementById('messageBody');
const messageStatus = document.getElementById('messageStatus');
document.querySelectorAll('[data-message]').forEach((button) => {
button.addEventListener('click', () => {
const recipient = button.dataset.message;
messageTo.value = recipient;
messageStatus.textContent = '';
messageBody.value = '';
openDialog(messageDialog);
setTimeout(() => messageBody.focus(), 80);
});
});
messageForm.addEventListener('submit', (event) => {
event.preventDefault();
if (!messageBody.value.trim()) return;
messageStatus.textContent = `Message sent to ${messageTo.value}.`;
messageBody.value = '';
showToast(`Your message to ${messageTo.value} was sent.`);
});
const legalDialog = document.getElementById('legalDialog');
const legalTitle = document.getElementById('legalTitle');
const legalContent = document.getElementById('legalContent');
document.querySelectorAll('[data-legal]').forEach((link) => {
link.addEventListener('click', (event) => {
event.preventDefault();
const type = link.dataset.legal;
const template = document.getElementById(type === 'privacy' ? 'privacyCopy' : 'termsCopy');
legalTitle.textContent = type === 'privacy' ? 'Privacy Policy' : 'Terms of Service';
legalContent.replaceChildren(template.content.cloneNode(true));
openDialog(legalDialog);
});
});
const joinForm = document.getElementById('joinForm');
const joinMessage = document.getElementById('joinMessage');
joinForm.addEventListener('submit', (event) => {
event.preventDefault();
if (!joinForm.checkValidity()) {
joinForm.reportValidity();
return;
}
const email = document.getElementById('joinEmail').value;
joinMessage.textContent = `You’re on the list. A welcome link is heading to ${email}.`;
joinForm.reset();
showToast('Welcome to Echoora. Your account request is confirmed.');
});
document.getElementById('dashboardRange').addEventListener('change', (event) => {
showToast(`Analytics range changed to ${event.target.value.toLowerCase()}.`);
});
const revealItems = document.querySelectorAll('.reveal');
if ('IntersectionObserver' in window) {
const revealObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -35px' });
revealItems.forEach((item) => revealObserver.observe(item));
} else {
revealItems.forEach((item) => item.classList.add('is-visible'));
}
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T10:11:09.467Z",
"url": "https://benchmark.aimac.invalid/b9d4a2532778776f680832c462c61c7f9115d9260cd2c8796356e3b167125a17.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-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": "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": []
},
{
"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": "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=\"#home\" aria-label=\"Echoora home\">",
"target": [
".site-header__inner > .brand[aria-label=\"Echoora home\"][href$=\"#home\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"Echoora home\">",
"target": [
".site-header__inner > .brand[aria-label=\"Echoora home\"][href$=\"#home\"]"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"trend-tabs\" role=\"tablist\" aria-label=\"Filter trending topics\">",
"target": [
".trend-tabs"
]
}
]
},
{
"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": "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\">\n <path d=\"M4 7h16M4 12h16M4 17h16\"></path>\n </svg>",
"target": [
"#menuToggle > svg[viewBox=\"0 0 24 24\"][stroke=\"currentColor\"][stroke-width=\"2\"]"
]
}
]
},
{
"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=\"#home\" aria-label=\"Echoora home\">",
"target": [
".site-header__inner > .brand[aria-label=\"Echoora home\"][href$=\"#home\"]"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"trend-tabs\" role=\"tablist\" aria-label=\"Filter trending topics\">",
"target": [
".trend-tabs"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-required-children",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA children are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"trend-tabs\" role=\"tablist\" aria-label=\"Filter trending topics\">",
"target": [
".trend-tabs"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-required-parent",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA parent role present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"trend-tab\" type=\"button\" role=\"tab\" aria-selected=\"true\" data-filter=\"all\">All signals</button>",
"target": [
"button[data-filter=\"all\"]"
]
}
]
},
{
"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=\"trend-tabs\" role=\"tablist\" aria-label=\"Filter trending topics\">",
"target": [
".trend-tabs"
]
}
]
},
{
"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=\"#home\" aria-label=\"Echoora home\">",
"target": [
".site-header__inner > .brand[aria-label=\"Echoora home\"][href$=\"#home\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"Echoora home\">",
"target": [
".site-header__inner > .brand[aria-label=\"Echoora home\"][href$=\"#home\"]"
]
}
]
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input id=\"trendSearch\" type=\"search\" placeholder=\"Search topics\" autocomplete=\"off\">",
"target": [
"#trendSearch"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"trend-tab\" type=\"button\" role=\"tab\" aria-selected=\"true\" data-filter=\"all\">All signals</button>",
"target": [
"button[data-filter=\"all\"]"
]
}
]
},
{
"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>Find your people. Move ideas <em>forward.</em></h1>",
"target": [
"h1"
]
},
{
"html": "<h3 class=\"live-card__title\">Designing a slower, <span>better internet</span></h3>",
"target": [
".live-card__title"
]
},
{
"html": "<h2>Know what\u2019s moving\u2014before it goes everywhere.</h2>",
"target": [
"#discover > .container > .section-heading.reveal > div:nth-child(1) > h2"
]
},
{
"html": "<h3>#SlowSocial</h3>",
"target": [
".trend-card[data-category=\"wellbeing\"]:nth-child(1) > h3"
]
},
{
"html": "<h3>#CarefulAI</h3>",
"target": [
".trend-card[data-category=\"technology\"]:nth-child(2) > h3"
]
},
{
"html": "<h3>#ThirdPlaces</h3>",
"target": [
"article[data-category=\"culture\"] > h3"
]
},
{
"html": "<h3>#ShowTheProcess</h3>",
"target": [
"article[data-category=\"creativity\"] > h3"
]
},
{
"html": "<h3>#MorningPages</h3>",
"target": [
".trend-card[data-category=\"wellbeing\"]:nth-child(5) > h3"
]
},
{
"html": "<h3>#OpenSourceBuilders</h3>",
"target": [
".trend-card[data-category=\"technology\"]:nth-child(6) > h3"
]
},
{
"html": "<h2>Built around interests\u2014not follower counts.</h2>",
"target": [
"#communities > .container > .section-heading.reveal > div:nth-child(1) > h2"
]
},
{
"html": "<h3>Make & Meaning</h3>",
"target": [
".community-card:nth-child(1) > .community-card__body > h3"
]
},
{
"html": "<h3>Neighborhood Commons</h3>",
"target": [
".community-card:nth-child(2) > .community-card__body > h3"
]
},
{
"html": "<h3>Work, Reimagined</h3>",
"target": [
".community-card:nth-child(3) > .community-card__body > h3"
]
},
{
"html": "<h2>Messages that feel like a welcome.</h2>",
"target": [
"#messages > .container > .section-heading.reveal > div:nth-child(1) > h2"
]
},
{
"html": "<h3>Maya Chen</h3>",
"target": [
".conversation-card:nth-child(1) > div:nth-child(2) > .conversation-card__top > h3"
]
},
{
"html": "<h3>Alex Rivera</h3>",
"target": [
".conversation-card:nth-child(2) > div:nth-child(2) > .conversation-card__top > h3"
]
},
{
"html": "<h3>Echoora Weekly</h3>",
"target": [
".conversation-card:nth-child(3) > div:nth-child(2) > .conversation-card__top > h3"
]
},
{
"html": "<h3>Live rooms</h3>",
"target": [
".live-rail__header > h3"
]
},
{
"html": "<h4>Critique without the cold</h4>",
"target": [
".room-item:nth-child(2) > h4"
]
},
{
"html": "<h4>Healthy community metrics</h4>",
"target": [
".room-item:nth-child(3) > h4"
]
},
{
"html": "<h4>Build your local guide</h4>",
"target": [
".room-item:nth-child(4) > h4"
]
},
{
"html": "<h2>Signal, not noise.</h2>",
"target": [
".insights-copy > h2"
]
},
{
"html": "<h4>Meaningful actions</h4>",
"target": [
"div > h4"
]
},
{
"html": "<h2>Growth looks different when it starts with belonging.</h2>",
"target": [
".section-heading--center > h2"
]
},
{
"html": "<h2>Give your community space to grow.</h2>",
"target": [
".create-card__copy > h2"
]
},
{
"html": "<h3>Join Echoora</h3>",
"target": [
"#joinForm > h3"
]
},
{
"html": "<h2>Questions, answered with context.</h2>",
"target": [
".faq-intro > h2"
]
},
{
"html": "<h3>Product</h3>",
"target": [
"nav[aria-label=\"Product links\"] > h3"
]
},
{
"html": "<h3>Resources</h3>",
"target": [
"nav[aria-label=\"Resource links\"] > h3"
]
},
{
"html": "<h3>Company</h3>",
"target": [
"nav[aria-label=\"Company links\"] > h3"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"main\">",
"target": [
"#main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"js\">",
"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": "#dde1e0",
"bgColor": "#0e281f",
"contrastRatio": 11.86,
"fontSize": "9.5pt (12.64px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 11.86"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span>New</span>",
"target": [
".announcement__inner > span:nth-child(1)"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" class=\"js\">",
"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": "primaryNav",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"primary-nav\" id=\"primaryNav\" aria-label=\"Primary navigation\">",
"target": [
"#primaryNav"
]
}
]
},
{
"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=\"trend-search\">",
"target": [
".trend-search"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input id=\"trendSearch\" type=\"search\" placeholder=\"Search topics\" autocomplete=\"off\">",
"target": [
"#trendSearch"
]
}
]
},
{
"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\" class=\"js\">",
"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\" class=\"js\">",
"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 class=\"brand__logo\" src=\"https://placehold.co/96x96/15372b/ffffff?text=E&font=montserrat\" width=\"96\" height=\"96\" alt=\"Echoora logo\">",
"target": [
".site-header__inner > .brand[aria-label=\"Echoora home\"][href$=\"#home\"] > .brand__logo[width=\"96\"][height=\"96\"]"
]
}
]
},
{
"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": "implicit-label",
"data": {
"implicitLabel": "Search trending topics Search topics"
},
"relatedNodes": [
{
"html": "<label class=\"trend-search\">",
"target": [
".trend-search"
]
}
],
"impact": "critical",
"message": "Element has an implicit (wrapped) <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": "<input id=\"trendSearch\" type=\"search\" placeholder=\"Search topics\" autocomplete=\"off\">",
"target": [
"#trendSearch"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a class=\"skip-link\" href=\"#main\">Skip to main content</a>",
"target": [
".skip-link"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul>",
"target": [
"#primaryNav > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#discover\" aria-current=\"page\">Discover</a></li>",
"target": [
"#primaryNav > ul > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img class=\"brand__logo\" src=\"https://placehold.co/96x96/15372b/ffffff?text=E&font=montserrat\" width=\"96\" height=\"96\" alt=\"Echoora logo\">",
"target": [
".site-header__inner > .brand[aria-label=\"Echoora home\"][href$=\"#home\"] > .brand__logo[width=\"96\"][height=\"96\"]"
]
}
]
},
{
"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=\"dashboard__select\" id=\"dashboardRange\" aria-label=\"Analytics date range\">\n <option>Last 30 days</option>\n <option>Last 90 days</option>\n <option>Last 12 months</option>\n </select>",
"target": [
"#dashboardRange"
]
}
]
},
{
"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>What makes Echoora different from other social networks?</summary>",
"target": [
"details[open=\"\"] > summary"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<svg viewBox=\"0 0 560 180\" role=\"img\" aria-label=\"Engagement chart trending upward over six weeks\">",
"target": [
"svg[viewBox=\"0 0 560 180\"]"
]
}
]
},
{
"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": 203.5,
"height": 46.4
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (203.5px by 46.4px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"skip-link\" href=\"#main\">Skip to main content</a>",
"target": [
".skip-link"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"hero-stats reveal\" aria-label=\"Echoora community statistics\">",
"target": [
".hero-stats"
],
"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": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "bold",
"messageKey": "bgOverlap",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element's background color could not be determined because it is overlapped by another element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">The human-first social network</span>",
"target": [
".hero-copy > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined because it is overlapped by another element"
}
]
},
{
"id": "link-in-text-block",
"impact": "serious",
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block",
"data": {
"messageKey": "bgOverlap"
},
"relatedNodes": [
{
"html": "<div class=\"footer-brand\">",
"target": [
".footer-brand"
]
}
],
"impact": "serious",
"message": "Element's contrast ratio could not be determined because of element overlap"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"Echoora home\">",
"target": [
".footer-brand > .brand[aria-label=\"Echoora home\"][href$=\"#home\"]"
],
"failureSummary": "Fix any of the following:\n Element's contrast ratio could not be determined because of element overlap"
}
]
}
],
"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": "#66756d",
"bgColor": "#f4f6f0",
"contrastRatio": 4.45,
"fontSize": "7.9pt (10.56px)",
"fontWeight": "bold",
"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.45 (foreground color: #66756d, background color: #f4f6f0, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"brand__tagline\">Real voices, shared momentum.</span>",
"target": [
".site-header__inner > .brand[aria-label=\"Echoora home\"][href$=\"#home\"] > span > .brand__tagline"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.45 (foreground color: #66756d, background color: #f4f6f0, font size: 7.9pt (10.56px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6552df",
"bgColor": "#e9e5ff",
"contrastRatio": 4.47,
"fontSize": "7.4pt (9.92px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"avatar-stack__more\">+39</span>",
"target": [
".avatar-stack__more"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 7.4pt (9.92px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"avatar-stack__more\">+39</span>",
"target": [
".avatar-stack__more"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 7.4pt (9.92px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#66756d",
"bgColor": "#f4f6f0",
"contrastRatio": 4.45,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"section discover-section\" id=\"discover\">",
"target": [
"#discover"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.45 (foreground color: #66756d, background color: #f4f6f0, font size: 9.1pt (12.16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"toolbar-status\" id=\"trendStatus\" aria-live=\"polite\">Showing all 6 conversation signals</p>",
"target": [
"#trendStatus"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.45 (foreground color: #66756d, background color: #f4f6f0, font size: 9.1pt (12.16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#73827d",
"bgColor": "#0e281f",
"contrastRatio": 3.88,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.88 (foreground color: #73827d, background color: #0e281f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>\u00a9 <span id=\"currentYear\">2026</span> Echoora Social, Inc. All rights reserved.</span>",
"target": [
".footer-bottom > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.88 (foreground color: #73827d, background color: #0e281f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#73827d",
"bgColor": "#0e281f",
"contrastRatio": 3.88,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.88 (foreground color: #73827d, background color: #0e281f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span id=\"currentYear\">2026</span>",
"target": [
"#currentYear"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.88 (foreground color: #73827d, background color: #0e281f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#73827d",
"bgColor": "#0e281f",
"contrastRatio": 3.88,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.88 (foreground color: #73827d, background color: #0e281f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#legalDialog\" data-legal=\"privacy\">Privacy Policy</a>",
"target": [
".footer-legal > a[data-legal=\"privacy\"][href$=\"#legalDialog\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.88 (foreground color: #73827d, background color: #0e281f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#73827d",
"bgColor": "#0e281f",
"contrastRatio": 3.88,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.88 (foreground color: #73827d, background color: #0e281f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#legalDialog\" data-legal=\"terms\">Terms of Service</a>",
"target": [
".footer-legal > a[data-legal=\"terms\"][href$=\"#legalDialog\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.88 (foreground color: #73827d, background color: #0e281f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#73827d",
"bgColor": "#0e281f",
"contrastRatio": 3.88,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.88 (foreground color: #73827d, background color: #0e281f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#faq\">Community Guidelines</a>",
"target": [
".footer-legal > a[href$=\"#faq\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.88 (foreground color: #73827d, background color: #0e281f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#73827d",
"bgColor": "#0e281f",
"contrastRatio": 3.88,
"fontSize": "8.2pt (10.88px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site-footer\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.88 (foreground color: #73827d, background color: #0e281f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#home\">Back to top \u2191</a>",
"target": [
".footer-legal > a[href$=\"#home\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.88 (foreground color: #73827d, background color: #0e281f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6552df",
"bgColor": "#e9e5ff",
"contrastRatio": 4.47,
"fontSize": "7.7pt (10.24px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"category-pill category-pill--purple\">Technology</span>",
"target": [
".trend-card.is-visible[data-category=\"technology\"] > .trend-card__top > .category-pill--purple.category-pill"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 7.7pt (10.24px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"category-pill category-pill--purple\">Technology</span>",
"target": [
".trend-card.is-visible[data-category=\"technology\"] > .trend-card__top > .category-pill--purple.category-pill"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 7.7pt (10.24px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6552df",
"bgColor": "#e9e5ff",
"contrastRatio": 4.47,
"fontSize": "7.7pt (10.24px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"category-pill category-pill--purple\">Technology</span>",
"target": [
".trend-card.is-visible[data-category=\"technology\"]:nth-child(2) > .trend-card__top > .category-pill--purple.category-pill"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 7.7pt (10.24px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"category-pill category-pill--purple\">Technology</span>",
"target": [
".trend-card.is-visible[data-category=\"technology\"]:nth-child(2) > .trend-card__top > .category-pill--purple.category-pill"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 7.7pt (10.24px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6552df",
"bgColor": "#e9e5ff",
"contrastRatio": 4.47,
"fontSize": "7.7pt (10.24px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"category-pill category-pill--purple\">Technology</span>",
"target": [
".trend-card.is-visible[data-category=\"technology\"]:nth-child(6) > .trend-card__top > .category-pill--purple.category-pill"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 7.7pt (10.24px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"category-pill category-pill--purple\">Technology</span>",
"target": [
".trend-card.is-visible[data-category=\"technology\"]:nth-child(6) > .trend-card__top > .category-pill--purple.category-pill"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 7.7pt (10.24px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6552df",
"bgColor": "#e9e5ff",
"contrastRatio": 4.47,
"fontSize": "7.7pt (10.24px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"category-pill category-pill--purple\">Technology</span>",
"target": [
".trend-card[data-category=\"technology\"]:nth-child(2) > .trend-card__top > .category-pill--purple.category-pill"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 7.7pt (10.24px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"category-pill category-pill--purple\">Technology</span>",
"target": [
".trend-card[data-category=\"technology\"]:nth-child(2) > .trend-card__top > .category-pill--purple.category-pill"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 7.7pt (10.24px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6552df",
"bgColor": "#e9e5ff",
"contrastRatio": 4.47,
"fontSize": "7.7pt (10.24px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"category-pill category-pill--purple\">Technology</span>",
"target": [
".trend-card[data-category=\"technology\"]:nth-child(6) > .trend-card__top > .category-pill--purple.category-pill"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 7.7pt (10.24px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"category-pill category-pill--purple\">Technology</span>",
"target": [
".trend-card[data-category=\"technology\"]:nth-child(6) > .trend-card__top > .category-pill--purple.category-pill"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 7.7pt (10.24px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6552df",
"bgColor": "#e9e5ff",
"contrastRatio": 4.47,
"fontSize": "9.1pt (12.16px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"insights-panel reveal is-visible\">",
"target": [
".insights-panel"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 9.1pt (12.16px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"eyebrow\">Community intelligence</span>",
"target": [
".insights-copy > .eyebrow"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.47 (foreground color: #6552df, background color: #e9e5ff, font size: 9.1pt (12.16px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#66756d",
"bgColor": "#e9eee7",
"contrastRatio": 4.12,
"fontSize": "8.0pt (10.72px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"story-card__result\">\n <strong>62%</strong>\n <span>increase in comment quality</span>\n </div>",
"target": [
".story-card:nth-child(1) > .story-card__result"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #66756d, background color: #e9eee7, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>increase in comment quality</span>",
"target": [
".story-card:nth-child(1) > .story-card__result > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #66756d, background color: #e9eee7, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#66756d",
"bgColor": "#e9eee7",
"contrastRatio": 4.12,
"fontSize": "8.0pt (10.72px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"story-card__result\">\n <strong>41%</strong>\n <span>more returning members</span>\n </div>",
"target": [
".story-card:nth-child(2) > .story-card__result"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #66756d, background color: #e9eee7, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>more returning members</span>",
"target": [
".story-card:nth-child(2) > .story-card__result > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #66756d, background color: #e9eee7, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#66756d",
"bgColor": "#e9eee7",
"contrastRatio": 4.12,
"fontSize": "8.0pt (10.72px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"story-card__result\">\n <strong>3.2\u00d7</strong>\n <span>more referral-driven reach</span>\n </div>",
"target": [
".story-card:nth-child(3) > .story-card__result"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.12 (foreground color: #66756d, background color: #e9eee7, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>more referral-driven reach</span>",
"target": [
".story-card:nth-child(3) > .story-card__result > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.12 (foreground color: #66756d, background color: #e9eee7, font size: 8.0pt (10.72px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 8574
},
{
"y": 576,
"height": 8574
},
{
"y": 1152,
"height": 8574
},
{
"y": 1728,
"height": 8574
},
{
"y": 2304,
"height": 8574
},
{
"y": 2880,
"height": 8574
},
{
"y": 3456,
"height": 8574
},
{
"y": 4032,
"height": 8574
},
{
"y": 4608,
"height": 8574
},
{
"y": 5184,
"height": 8574
},
{
"y": 5760,
"height": 8574
},
{
"y": 6336,
"height": 8574
},
{
"y": 6912,
"height": 8574
},
{
"y": 7488,
"height": 8574
},
{
"y": 7854,
"height": 8574
}
],
"scans": 16,
"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: "Settings", "Help", "Discover".
- **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: "Featured Posts", "Community Highlights", "User Stories".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "organic growth", "engagement metrics", "reach".
- **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", "Connect", "Comment".
- **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: "trending tracker".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "live streams", "trending hashtags", "suggested follows".
- **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.