Qwen Qwen3.8 27B – Social Media
via AkashML · Generated
- AIMAC Debt 10.24
- Cost $0.17
- Total Violations 31
- HTML Size 96 KB
- Em Dashes 63
Screenshot
View Live Page
Accessibility Issues Found
1 Critical 30 Serious
-
aria-required-children critical 1 instance
Certain ARIA roles must contain particular children
Example HTML
<div class="tabs" role="tablist" aria-label="Filter trending" data-reveal=""> -
color-contrast serious 30 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<div class="who">@juno <span>· 9m</span></div>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MURMUR — Where every voice finds its frequency</title>
<meta name="description" content="Murmur is the community-first social platform where circles of real people shape what trends. Rooms, threads, and the humans in them — no black-box algorithm, no ads.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root{
--paper:#F3EDE2;
--paper-2:#EAE2D2;
--card:#FBF7EE;
--ink:#17130E;
--ink-soft:#5A5346;
--line:#CFC5B0;
--verm:#FF4B2E;
--green:#1E6E4E;
--mustard:#E9A83A;
--disp:'Syne',sans-serif;
--body:'Instrument Sans',sans-serif;
--mono:'Space Mono',monospace;
--shadow-hard:6px 6px 0 rgba(23,19,14,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
background:var(--paper);
color:var(--ink);
font-family:var(--body);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
::selection{background:var(--verm);color:var(--paper)}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
section{scroll-margin-top:96px}
/* ---------- grain overlay ---------- */
body::after{
content:"";position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:200;font-family:var(--mono);font-size:13px}
.skip:focus{left:12px;top:12px}
.container{max-width:1220px;margin:0 auto;padding:0 28px}
/* ---------- type helpers ---------- */
.kicker{
font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:12px;color:var(--ink);
}
.kicker::before{content:"";width:34px;height:2px;background:var(--verm)}
.kicker .num{color:var(--verm)}
h2{font-family:var(--disp);font-weight:800;font-size:clamp(32px,4.4vw,52px);line-height:1.04;letter-spacing:-.01em}
h2 .dot{color:var(--verm)}
.lede{font-size:17px;color:var(--ink-soft);max-width:56ch}
.mono{font-family:var(--mono)}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:10px;
font-weight:600;font-size:14.5px;letter-spacing:.01em;
padding:15px 24px;border-radius:10px;border:2px solid var(--ink);
text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
background:transparent;color:var(--ink);
}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:5px 5px 0 var(--verm)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--verm)}
.btn-primary:active{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--verm)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-verm{background:var(--verm);color:var(--ink);box-shadow:5px 5px 0 var(--paper)}
.btn-verm:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--paper)}
.btn-sm{padding:9px 16px;font-size:13px;border-radius:8px}
.btn[disabled]{opacity:.4;pointer-events:none}
:focus-visible{outline:3px solid var(--verm);outline-offset:2px}
/* ---------- reveal + line masks ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
[data-reveal].is-in{opacity:1;transform:none}
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(112%);transition:transform .95s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
.mask.is-in>span{transform:none}
@media (prefers-reduced-motion:reduce){
[data-reveal],.mask>span{opacity:1;transform:none;transition:none}
*{animation-duration:.001s !important;animation-iteration-count:1 !important}
}
/* ---------- header ---------- */
header.site{
position:sticky;top:0;z-index:100;background:var(--paper);
border-bottom:2px solid var(--ink);transition:box-shadow .25s ease;
}
header.site.scrolled{box-shadow:0 10px 30px -18px rgba(23,19,14,.45)}
.head-in{display:flex;align-items:center;gap:28px;height:78px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;margin-right:auto}
.brand img{width:46px;height:46px;border-radius:10px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--verm)}
.brand-txt .name{font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:.04em;line-height:1}
.brand-txt .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.main-nav{display:flex;gap:26px}
.main-nav a{
text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.02em;position:relative;padding:6px 0;
}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--verm);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.main-nav a:hover::after,.main-nav a:focus-visible::after{transform:scaleX(1)}
.head-actions{display:flex;gap:12px;align-items:center}
.sign-in{text-decoration:none;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.04em}
.sign-in:hover{color:var(--verm)}
.burger{display:none;width:44px;height:44px;background:none;border:2px solid var(--ink);border-radius:10px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .25s ease,opacity .25s ease}
header.site.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.site.menu-open .burger span:nth-child(2){opacity:0}
header.site.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:960px){
.main-nav{display:none}
.burger{display:flex}
header.site.menu-open .main-nav{
display:flex;flex-direction:column;gap:4px;position:absolute;top:78px;left:0;right:0;
background:var(--paper);border-bottom:2px solid var(--ink);padding:22px 28px 28px;
}
header.site.menu-open .main-nav a{font-family:var(--disp);font-size:24px;padding:10px 0;border-bottom:1px solid var(--line)}
header.site.menu-open .main-nav a::after{display:none}
}
@media (max-width:640px){.sign-in{display:none}.brand-txt .tag{display:none}}
/* ---------- hero ---------- */
.hero{padding:72px 0 76px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.live-pill{
display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
border:1.5px solid var(--ink);border-radius:999px;padding:8px 16px;background:var(--card);margin-bottom:26px;
}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--verm);position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--verm);opacity:.6;animation:ping 1.6s ease-out infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.3);opacity:0}}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(44px,6.8vw,86px);line-height:.98;letter-spacing:-.015em}
.stroke-word{color:transparent;-webkit-text-stroke:2.5px var(--ink)}
@supports not (-webkit-text-stroke:1px black){.stroke-word{color:var(--verm)}}
.hero .lede{margin:26px 0 30px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.hero-stats{display:flex;gap:0;flex-wrap:wrap;border-top:1.5px solid var(--ink);padding-top:22px}
.hstat{padding:0 26px;border-left:1.5px solid var(--line)}
.hstat:first-child{padding-left:0;border-left:none}
.hstat .n{font-family:var(--disp);font-weight:800;font-size:28px;display:flex;align-items:center;gap:10px}
.hstat .l{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.room-card{
background:var(--ink);color:var(--paper);border-radius:16px;border:2px solid var(--ink);
box-shadow:10px 10px 0 var(--verm);padding:26px 26px 22px;position:relative;
}
.room-head{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,237,226,.75);margin-bottom:20px}
.eq{display:flex;align-items:flex-end;gap:5px;height:46px;margin-bottom:22px}
.eq i{width:7px;background:var(--verm);border-radius:2px;transform-origin:bottom;animation:eq 1.1s ease-in-out infinite alternate}
.eq i:nth-child(1){height:40%;animation-delay:.0s;animation-duration:.9s}
.eq i:nth-child(2){height:75%;animation-delay:.15s;animation-duration:1.2s}
.eq i:nth-child(3){height:55%;animation-delay:.3s;animation-duration:.8s}
.eq i:nth-child(4){height:95%;animation-delay:.1s;animation-duration:1.3s}
.eq i:nth-child(5){height:65%;animation-delay:.35s;animation-duration:1s}
.eq i:nth-child(6){height:85%;animation-delay:.05s;animation-duration:1.15s}
.eq i:nth-child(7){height:45%;animation-delay:.25s;animation-duration:.95s}
.eq i:nth-child(8){height:70%;animation-delay:.4s;animation-duration:1.25s}
.eq i:nth-child(9){height:55%;animation-delay:.2s;animation-duration:1.05s}
@keyframes eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.mini-posts{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.mini-post{
display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid rgba(243,237,226,.22);
border-radius:10px;opacity:.38;transform:translateX(6px);transition:opacity .5s ease,transform .5s ease,border-color .5s ease;
}
.mini-post.active{opacity:1;transform:none;border-color:var(--verm)}
.mini-post img{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(243,237,226,.4);flex:none}
.mini-post .who{font-size:12.5px;font-weight:700;font-family:var(--mono)}
.mini-post .who span{color:var(--verm)}
.mini-post p{font-size:13.5px;color:rgba(243,237,226,.85);line-height:1.45;margin-top:2px}
.room-foot{display:flex;align-items:center;gap:12px}
.ava-stack{display:flex}
.ava-stack img{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);margin-left:-10px}
.ava-stack img:first-child{margin-left:0}
.room-foot .count{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:rgba(243,237,226,.7)}
/* ---------- ticker ---------- */
.ticker{background:var(--ink);color:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden}
.ticker-label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.22em;padding:10px 0 0;display:none}
.ticker-track{display:flex;width:max-content;animation:slide 32s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;align-items:center;gap:46px;padding:13px 23px;white-space:nowrap}
.ticker-group b{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em}
.ticker-group b em{font-style:normal;color:var(--verm)}
.ticker-group i{color:var(--verm);font-style:normal;font-size:10px}
@keyframes slide{to{transform:translateX(-50%)}}
/* ---------- sections ---------- */
.sec{padding:96px 0}
.sec-alt{background:var(--paper-2)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.sec-head .note{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:10px;padding-bottom:8px}
@media (max-width:760px){.sec{padding:64px 0}}
/* ---------- feed ---------- */
.feed-grid{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start}
.feed-col{display:flex;flex-direction:column;gap:22px}
.post-card{
background:var(--card);border:1.5px solid var(--ink);border-radius:14px;padding:22px 24px;
transition:transform .25s ease,box-shadow .25s ease;
}
.post-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(23,19,14,.1)}
.post-card.pinned{border-left:6px solid var(--verm)}
.post-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.post-head img{width:46px;height:46px;border-radius:50%;border:2px solid var(--ink)}
.post-id .pn{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.post-id .ph{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.badge{
font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
border:1.5px dashed var(--ink-soft);border-radius:999px;padding:3px 10px;color:var(--ink-soft);
}
.badge.solid{border-style:solid;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.post-time{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);flex:none}
.post-body{font-size:15.5px;line-height:1.65}
.post-body .tag{color:var(--green);font-weight:600}
.post-img{margin-top:16px;border:1.5px solid var(--ink);border-radius:10px;overflow:hidden}
.post-img img{width:100%;height:auto;transition:transform 6s ease}
.post-card:hover .post-img img{transform:scale(1.05)}
.post-actions{display:flex;gap:26px;margin-top:16px;flex-wrap:wrap}
.act-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:var(--ink-soft);font-family:var(--mono);font-size:12.5px;font-weight:700;padding:4px 0;transition:color .2s ease}
.act-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act-btn[data-type="reply"]:hover{color:var(--green)}
.act-btn[data-type="repost"]:hover,.act-btn[data-type="repost"].on{color:var(--green)}
.act-btn[data-type="like"]:hover,.act-btn[data-type="like"].on{color:var(--verm)}
.act-btn[data-type="like"].on svg{fill:var(--verm);stroke:var(--verm)}
.act-btn[data-type="save"]:hover,.act-btn[data-type="save"].on{color:var(--mustard)}
.act-btn[data-type="save"].on svg{fill:var(--mustard);stroke:var(--mustard)}
.act-btn.pop svg{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.45) rotate(-8deg)}100%{transform:scale(1)}}
.post.just-now{animation:flash 1.6s ease}
@keyframes flash{0%{background:#FFD9CE}100%{background:var(--card)}}
/* sidebar */
.side{display:flex;flex-direction:column;gap:22px;position:sticky;top:100px}
.side-card{background:var(--card);border:1.5px solid var(--ink);border-radius:14px;padding:20px}
.side-card h3{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.side-card h3 a{color:var(--verm);text-decoration:none;font-size:11px}
.follow-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.follow-row:first-of-type{border-top:none;padding-top:0}
.follow-row img{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--ink)}
.follow-row .fi{flex:1;min-width:0}
.follow-row .fi b{font-size:14px;display:block;line-height:1.3}
.follow-row .fi span{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.follow-btn{
font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;
border:1.5px solid var(--ink);background:transparent;border-radius:999px;padding:6px 13px;
transition:background .2s,color .2s;white-space:nowrap;
}
.follow-btn:hover{background:var(--verm)}
.follow-btn.on{background:var(--ink);color:var(--paper)}
.live-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line)}
.live-row:first-of-type{border-top:none;padding-top:0}
.live-row .nm{font-size:14px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-row .ct{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.live-row .pulse{width:8px;height:8px}
.circle-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.circle-row:first-of-type{border-top:none;padding-top:0}
.circle-row .ci{flex:1}
.circle-row .ci b{font-size:14px;display:block}
.circle-row .ci span{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
/* ---------- messages ---------- */
.msg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.msg-card{background:var(--card);border:1.5px solid var(--ink);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:14px;transition:transform .25s ease,box-shadow .25s ease}
.msg-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(23,19,14,.1)}
.msg-top{display:flex;align-items:center;gap:11px}
.msg-top .avs{display:flex}
.msg-top .avs img{width:34px;height:34px;border-radius:50%;border:2px solid var(--paper);margin-left:-9px}
.msg-top .avs img:first-child{margin-left:0}
.msg-top b{font-size:14.5px;display:block;line-height:1.25}
.msg-top span{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.msg-quote{font-size:14.5px;font-style:italic;color:var(--ink-soft);border-left:3px solid var(--verm);padding-left:12px;flex:1}
.msg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.unread{font-family:var(--mono);font-size:11px;font-weight:700;background:var(--verm);color:var(--ink);border-radius:999px;padding:3px 10px}
.open-room{font-family:var(--mono);font-size:12px;font-weight:700;background:none;border:none;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.open-room:hover{color:var(--verm)}
/* ---------- communities (dark, sticky two-col) ---------- */
.dark{background:var(--ink);color:var(--paper)}
.dark .kicker{color:var(--paper)}
.comm-grid{display:grid;grid-template-columns:400px 1fr;gap:70px;align-items:start}
.comm-sticky{position:sticky;top:110px}
.comm-sticky .lede{color:rgba(243,237,226,.68);margin:22px 0 26px}
.formula-link{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--verm);text-decoration:underline;text-underline-offset:5px}
.step{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:34px 0;border-top:1px solid rgba(243,237,226,.18);transition:transform .3s ease}
.step:hover{transform:translateX(8px)}
.step .no{font-family:var(--disp);font-weight:800;font-size:44px;color:var(--verm);line-height:1}
.step h3{font-family:var(--disp);font-weight:700;font-size:23px;margin-bottom:10px}
.step p{color:rgba(243,237,226,.68);font-size:15.5px;max-width:52ch}
.step:last-child{border-bottom:1px solid rgba(243,237,226,.18)}
/* ---------- trending ---------- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.tab{
font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.08em;
border:1.5px solid var(--ink);background:transparent;border-radius:999px;padding:8px 18px;transition:background .2s,color .2s;
}
.tab:hover{background:var(--verm)}
.tab.active{background:var(--ink);color:var(--paper)}
.trend-list{border-top:2px solid var(--ink)}
.trend-row{
display:grid;grid-template-columns:56px 1fr 150px 150px 90px;gap:18px;align-items:center;
padding:17px 10px;border-bottom:1.5px solid var(--line);cursor:pointer;transition:background .2s ease,transform .2s ease;
}
.trend-row:hover{background:var(--card);transform:translateX(5px)}
.trend-row.hide{display:none}
.trend-row .rank{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink-soft)}
.trend-row .tag-cell b{font-family:var(--disp);font-weight:700;font-size:19px;display:block;line-height:1.2}
.trend-row .tag-cell p{font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.cat-tag{justify-self:start;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:999px;padding:4px 12px}
.v-wrap{display:flex;flex-direction:column;gap:6px}
.v-bar{height:9px;border:1.5px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--paper)}
.v-bar i{display:block;height:100%;width:var(--v);background:var(--green);transition:width 1s ease}
.v-wrap span{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.delta{font-family:var(--mono);font-size:13px;font-weight:700;text-align:right}
.delta.up{color:var(--green)}
.delta.down{color:var(--verm)}
.trend-foot{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);margin-top:18px;letter-spacing:.06em}
/* ---------- events ---------- */
.ev-feature{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;margin-bottom:34px}
.ev-media{position:relative;border:2px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:10px 10px 0 rgba(23,19,14,.12)}
.ev-media img{width:100%;height:420px;object-fit:cover}
.kenburns img{animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.5%,1.5%)}}
.ev-chip-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.ev-chip{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;background:var(--ink);color:var(--paper);border-radius:999px;padding:6px 14px}
.ev-chip.v{background:var(--verm);color:var(--ink)}
.ev-info h3{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3vw,36px);line-height:1.08;margin-bottom:14px}
.ev-info p{color:var(--ink-soft);font-size:15.5px;margin-bottom:18px}
.ev-meta{display:flex;gap:26px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;margin-bottom:20px}
.ev-meta b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px;font-weight:700}
.seats{margin-bottom:24px}
.seats .s-bar{height:10px;border:1.5px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--card)}
.seats .s-bar i{display:block;height:100%;background:var(--verm);width:95%}
.seats .s-lbl{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);margin-top:7px;display:flex;justify-content:space-between}
.ev-btns{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cal-link{font-family:var(--mono);font-size:12.5px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.cal-link:hover{color:var(--verm)}
.ev-row-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ev-small{display:grid;grid-template-columns:170px 1fr;gap:18px;background:var(--card);border:1.5px solid var(--ink);border-radius:14px;padding:16px;align-items:center;transition:transform .25s ease,box-shadow .25s ease}
.ev-small:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(23,19,14,.1)}
.ev-small .m{border:1.5px solid var(--ink);border-radius:10px;overflow:hidden}
.ev-small .m img{width:100%;height:130px;object-fit:cover}
.ev-small h4{font-family:var(--disp);font-weight:700;font-size:18px;margin:8px 0 6px}
.ev-small p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:10px}
.ev-small .em{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);margin-bottom:12px}
.rsvp-btn.on{background:var(--ink);color:var(--paper)}
/* ---------- voices (scattered postcards) ---------- */
.voices-wrap{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;padding-top:14px}
.postcard{
position:relative;width:300px;background:var(--card);border:1.5px solid var(--ink);border-radius:10px;
padding:26px 22px 22px;transform:rotate(var(--r,0deg)) translateY(var(--ty,0px));
transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease;
}
.postcard::before{
content:"";position:absolute;top:-13px;left:50%;width:92px;height:26px;transform:translateX(-50%) rotate(-3deg);
background:rgba(233,225,208,.9);border:1px solid rgba(23,19,14,.15);box-shadow:0 2px 5px rgba(23,19,14,.1);
}
.postcard:hover{transform:rotate(0deg) translateY(calc(var(--ty,0px) - 10px)) scale(1.02);z-index:5;box-shadow:10px 12px 0 rgba(23,19,14,.12)}
.postcard q{font-size:14.5px;font-style:italic;line-height:1.65;quotes:"“" "”";display:block;margin-bottom:18px}
.postcard .auth{display:flex;align-items:center;gap:11px}
.postcard .auth img{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink)}
.postcard .auth b{font-size:13.5px;display:block;line-height:1.25}
.postcard .auth span{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);letter-spacing:.04em}
.postcard.stat{background:var(--verm);color:var(--ink)}
.postcard.stat .big{font-family:var(--disp);font-weight:800;font-size:56px;line-height:1;margin-bottom:12px}
.postcard.stat p{font-size:13.5px;line-height:1.55;font-weight:500}
.pc1{--r:-2.4deg;--ty:10px}
.pc2{--r:1.8deg;--ty:-14px}
.pc3{--r:-1.2deg;--ty:18px}
.pc4{--r:2.6deg;--ty:-6px}
.pc5{--r:-3deg;--ty:8px}
@media (max-width:760px){.postcard{transform:rotate(0);width:100%;max-width:380px}}
/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
.about-photos{position:relative;padding-bottom:44px;padding-right:34px}
.about-photos .main{border:2px solid var(--ink);border-radius:14px;overflow:hidden}
.about-photos .main img{width:100%;height:380px;object-fit:cover}
.about-photos .flip{
position:absolute;bottom:0;right:0;width:46%;border:2px solid var(--ink);border-radius:12px;overflow:hidden;
transform:rotate(3deg);box-shadow:-8px 8px 0 rgba(23,19,14,.14);
}
.about-photos .flip img{width:100%;height:180px;object-fit:cover}
.about-copy p{color:var(--ink-soft);font-size:15.5px;margin-bottom:18px;max-width:56ch}
.about-stats{display:flex;gap:0;margin-top:28px;border-top:1.5px solid var(--ink);flex-wrap:wrap}
.a-stat{padding:18px 26px 0 0;margin-right:26px}
.a-stat .n{font-family:var(--disp);font-weight:800;font-size:30px}
.a-stat .n em{font-style:normal;color:var(--verm)}
.a-stat .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
/* ---------- composer ---------- */
.comp-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.comp-copy .lede{margin:22px 0}
.comp-points{list-style:none;margin-top:8px}
.comp-points li{display:flex;gap:12px;font-size:15px;color:var(--ink-soft);padding:11px 0;border-top:1px solid var(--line)}
.comp-points li b{color:var(--ink)}
.comp-points li::before{content:"◆";color:var(--verm);font-size:11px;line-height:1.9;flex:none}
.composer{background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:26px;box-shadow:9px 9px 0 var(--verm)}
.comp-as{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.comp-as img{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink)}
.comp-as .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.comp-as select{
font-family:var(--mono);font-size:12.5px;font-weight:700;border:1.5px solid var(--ink);border-radius:8px;
padding:7px 10px;background:var(--paper);color:var(--ink);margin-left:auto;
}
.composer textarea{
width:100%;min-height:120px;resize:vertical;border:1.5px solid var(--ink);border-radius:10px;
background:var(--paper);padding:14px 16px;font-family:var(--body);font-size:15px;line-height:1.6;color:var(--ink);
}
.composer textarea::placeholder{color:#9a9184}
.comp-mid{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
font-family:var(--mono);font-size:11.5px;font-weight:700;border:1.5px dashed var(--ink-soft);
background:transparent;border-radius:999px;padding:6px 12px;color:var(--ink-soft);transition:all .2s ease;
}
.chip:hover{border-style:solid;color:var(--ink);border-color:var(--ink)}
.char-count{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.char-count.warn{color:var(--verm);font-weight:700}
.comp-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.comp-actions select{
font-family:var(--mono);font-size:12.5px;font-weight:700;border:1.5px solid var(--ink);border-radius:10px;
padding:13px 12px;background:var(--paper);color:var(--ink);
}
.queue{margin-top:24px;border-top:2px solid var(--ink);padding-top:18px}
.queue h4{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;display:flex;justify-content:space-between}
.queue ul{list-style:none}
.q-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px;animation:qin .4s ease}
@keyframes qin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.q-time{font-family:var(--mono);font-size:10.5px;font-weight:700;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;white-space:nowrap;flex:none}
.q-text{flex:1;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-del{border:none;background:none;font-size:18px;color:var(--ink-soft);line-height:1;padding:2px 6px}
.q-del:hover{color:var(--verm)}
.q-empty{font-family:var(--mono);font-size:12px;color:var(--ink-soft);font-style:italic;padding:6px 0}
/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:380px 1fr;gap:64px;align-items:start}
.faq-left{position:sticky;top:110px}
.faq-left p{color:var(--ink-soft);font-size:15.5px;margin-top:20px;max-width:34ch}
.faq-item{background:var(--card);border:1.5px solid var(--ink);border-radius:12px;margin-bottom:14px;overflow:hidden;transition:box-shadow .25s ease}
.faq-item.open{box-shadow:6px 6px 0 rgba(23,19,14,.1)}
.faq-btn{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
background:none;border:none;padding:20px 22px;font-family:var(--body);font-weight:700;font-size:16px;text-align:left;color:var(--ink);
}
.faq-ic{position:relative;width:16px;height:16px;flex:none;transition:transform .3s ease}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;background:var(--verm);left:0;top:7px;width:16px;height:2.5px}
.faq-ic::after{transform:rotate(90deg)}
.faq-item.open .faq-ic{transform:rotate(135deg)}
.faq-panel{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,.61,.36,1)}
.faq-panel-in{padding:0 22px 22px;font-size:15px;color:var(--ink-soft);line-height:1.65}
/* ---------- CTA ---------- */
.cta{background:var(--ink);color:var(--paper);text-align:center;position:relative;overflow:hidden;padding:110px 0 120px}
.cta .kicker{color:var(--paper);justify-content:center}
.cta h2{font-size:clamp(40px,6.4vw,80px);margin:24px auto 22px;max-width:14ch}
.cta p{color:rgba(243,237,226,.68);max-width:52ch;margin:0 auto 36px;font-size:17px}
.cta .micro{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,237,226,.5);margin-top:22px}
.cta-ticker{position:absolute;bottom:0;left:0;right:0;border-top:1px solid rgba(243,237,226,.18);background:rgba(243,237,226,.04);overflow:hidden}
.cta-ticker .ticker-track{animation:slide 44s linear infinite reverse}
.cta-ticker .ticker-group b{color:rgba(243,237,226,.55);font-weight:400;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
/* ---------- footer ---------- */
footer.site{background:#100D09;color:rgba(243,237,226,.75);padding:70px 0 0}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.5fr;gap:44px;padding-bottom:54px}
.foot-brand .name{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:.05em;color:var(--paper);display:flex;align-items:center;gap:12px}
.foot-brand .name img{width:40px;height:40px;border-radius:9px;border:2px solid rgba(243,237,226,.4)}
.foot-brand p{font-size:14px;margin:16px 0 20px;max-width:34ch;line-height:1.6}
.soc-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.soc-row a{
font-family:var(--mono);font-size:11.5px;font-weight:700;text-decoration:none;border:1.5px solid rgba(243,237,226,.3);
border-radius:999px;padding:6px 13px;transition:all .2s ease;color:var(--paper);
}
.soc-row a:hover{background:var(--verm);border-color:var(--verm);color:var(--ink)}
.foot-contact{font-family:var(--mono);font-size:12px;line-height:2}
.foot-contact a{text-decoration:none;color:var(--paper)}
.foot-contact a:hover{color:var(--verm)}
.foot-col h4{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);margin-bottom:18px}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:11px}
.foot-col a{font-size:14px;text-decoration:none;transition:color .2s}
.foot-col a:hover{color:var(--verm)}
.foot-news p{font-size:13.5px;margin-bottom:14px;line-height:1.55}
.nl-form{display:flex;gap:0;margin-bottom:14px}
.nl-form input{
flex:1;min-width:0;background:transparent;border:1.5px solid rgba(243,237,226,.35);border-right:none;
border-radius:10px 0 0 10px;padding:13px 14px;color:var(--paper);font-family:var(--body);font-size:14px;
}
.nl-form input::placeholder{color:rgba(243,237,226,.4)}
.nl-form button{
background:var(--verm);color:var(--ink);border:1.5px solid var(--verm);border-radius:0 10px 10px 0;
font-weight:700;font-size:13.5px;padding:0 20px;transition:background .2s;
}
.nl-form button:hover{background:var(--paper);border-color:var(--paper)}
.foot-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:rgba(243,237,226,.4)}
.foot-bottom{border-top:1px solid rgba(243,237,226,.15);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px}
.foot-bottom nav{display:flex;gap:22px;flex-wrap:wrap}
.foot-bottom a{text-decoration:none}
.foot-bottom a:hover{color:var(--verm)}
/* ---------- toasts ---------- */
#toasts{position:fixed;bottom:24px;right:24px;z-index:10000;display:flex;flex-direction:column;gap:10px;max-width:min(380px,86vw)}
.toast{
background:var(--ink);color:var(--paper);border-left:5px solid var(--verm);border-radius:10px;
padding:14px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.5;
box-shadow:0 16px 40px -12px rgba(0,0,0,.5);opacity:0;transform:translateY(16px);transition:all .35s cubic-bezier(.22,.61,.36,1);
}
.toast.show{opacity:1;transform:none}
/* ---------- responsive ---------- */
@media (max-width:1100px){
.feed-grid{grid-template-columns:1fr}
.side{position:static;display:grid;grid-template-columns:1fr 1fr;align-items:start}
}
@media (max-width:980px){
.hero-grid,.comm-grid,.about-grid,.comp-grid,.faq-grid,.ev-feature{grid-template-columns:1fr}
.comm-sticky,.faq-left{position:static}
.comm-grid{gap:36px}
.about-grid{gap:40px}
.ev-media img{height:320px}
.side{grid-template-columns:1fr}
}
@media (max-width:820px){
.msg-grid,.ev-row-grid{grid-template-columns:1fr}
.trend-row{grid-template-columns:44px 1fr 84px;gap:12px}
.v-wrap,.cat-tag{display:none}
.ev-small{grid-template-columns:1fr}
.ev-small .m img{height:170px}
}
@media (max-width:640px){
.hero{padding:48px 0 56px}
.room-card{box-shadow:7px 7px 0 var(--verm)}
.hstat{padding:0 16px 14px 0;border-left:none}
.foot-grid{grid-template-columns:1fr 1fr}
.foot-brand{grid-column:1/-1}
.foot-news{grid-column:1/-1}
.step{grid-template-columns:1fr;gap:8px}
}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<!-- ============ HEADER ============ -->
<header class="site" id="siteHeader">
<div class="container head-in">
<a class="brand" href="#top" aria-label="Murmur home">
<img src="https://placehold.co/92x92/17130E/FF4B2E?text=M&font=oswald" alt="Murmur logo" width="46" height="46">
<span class="brand-txt">
<span class="name">MURMUR</span>
<span class="tag">Where every voice finds its frequency</span>
</span>
</a>
<nav class="main-nav" id="mainNav" aria-label="Primary">
<a href="#feed">Feed</a>
<a href="#communities">Communities</a>
<a href="#trending">Trending</a>
<a href="#events">Events</a>
<a href="#messages">Messages</a>
<a href="#about">About</a>
</nav>
<div class="head-actions">
<a class="sign-in" href="#feed">Sign in</a>
<a class="btn btn-primary btn-sm" href="#compose">Join free</a>
</div>
<button class="burger" id="navToggle" aria-label="Toggle menu" aria-expanded="false" aria-controls="mainNav">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main id="main">
<!-- ============ HERO / LIVE PULSE ============ -->
<section class="hero" id="top">
<div class="container hero-grid">
<div>
<span class="live-pill"><span class="pulse" aria-hidden="true"></span> Live · Room 042 — Creators' Hour · <span class="js-online">128,437</span> in the room network</span>
<h1>
<span class="mask"><span>Where every voice</span></span>
<span class="mask" style="--d:.12s"><span>finds its</span></span>
<span class="mask" style="--d:.24s"><span class="stroke-word" id="scrambleWord" data-text="FREQUENCY.">FREQUENCY.</span></span>
</h1>
<p class="lede" data-reveal style="--d:.35s">Murmur is the community-first social platform where circles of real people — not a black-box algorithm — decide what rises. Join a room, start a thread, or gather offline. Your people are already here, and they're talking about exactly this.</p>
<div class="hero-ctas" data-reveal style="--d:.45s">
<a class="btn btn-primary" href="#compose">Join free — takes 20 seconds</a>
<a class="btn btn-ghost" href="#feed">Explore the feed</a>
</div>
<div class="hero-stats" data-reveal style="--d:.55s">
<div class="hstat">
<div class="n"><span class="pulse" aria-hidden="true"></span><span data-count="128437" class="js-online">0</span></div>
<div class="l">Members online</div>
</div>
<div class="hstat">
<div class="n"><span data-count="9214">0</span></div>
<div class="l">Circles active</div>
</div>
<div class="hstat">
<div class="n"><span data-count="412">0</span></div>
<div class="l">Rooms live now</div>
</div>
</div>
</div>
<aside class="room-card" data-reveal style="--d:.3s" aria-label="Live from Room 042">
<div class="room-head"><span class="pulse" aria-hidden="true"></span> Live from Room 042 · Creators' Hour</div>
<div class="eq" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="mini-posts" id="miniPosts">
<div class="mini-post active">
<img src="https://i.pravatar.cc/80?u=mara" alt="">
<div><div class="who">@mara <span>· 2m</span></div><p>shipping the new voice threads. latency down 41% and I can finally hear the room before I speak.</p></div>
</div>
<div class="mini-post">
<img src="https://i.pravatar.cc/80?u=juno" alt="">
<div><div class="who">@juno <span>· 9m</span></div><p>300 frames from the meetup. zero edits. #GoldenHour35mm</p></div>
</div>
<div class="mini-post">
<img src="https://i.pravatar.cc/80?u=priya" alt="">
<div><div class="who">@priya <span>· 14m</span></div><p>long-form replies up 3.2× this quarter. people did this. no algorithm did.</p></div>
</div>
<div class="mini-post">
<img src="https://i.pravatar.cc/80?u=devon" alt="">
<div><div class="who">@devon <span>· 21m</span></div><p>who else is bringing a dish to the potluck? committing to a very spicy chili. no regrets.</p></div>
</div>
</div>
<div class="room-foot">
<div class="ava-stack" aria-hidden="true">
<img src="https://i.pravatar.cc/60?u=r1" alt=""><img src="https://i.pravatar.cc/60?u=r2" alt=""><img src="https://i.pravatar.cc/60?u=r3" alt=""><img src="https://i.pravatar.cc/60?u=r4" alt="">
</div>
<span class="count">3,214 IN THIS ROOM RIGHT NOW</span>
</div>
</aside>
</div>
</section>
<!-- ============ TICKER ============ -->
<div class="ticker" aria-label="Trending on Murmur">
<div class="ticker-track">
<div class="ticker-group">
<b><em>#VinylFinds</em> · 42.1k posts</b><i>✦</i>
<b>LIVE · Synthwave Open Set</b><i>✦</i>
<b><em>#ShipLogs</em> · 18.7k posts</b><i>✦</i>
<b>NEW CIRCLE · Darkroom Society</b><i>✦</i>
<b><em>#SourdoughSunday</em> · 12.3k posts</b><i>✦</i>
<b><em>#QuietLaunch</em> · 9.8k posts</b><i>✦</i>
<b>ROOM 042 · Creators' Hour · 3,214 in</b><i>✦</i>
<b><em>#ZineCulture</em> · 8.4k posts</b><i>✦</i>
<b><em>#MarketMornings</em> · 6.2k posts</b><i>✦</i>
<b>TRENDING <em>+212%</em> · #VinylFinds</b><i>✦</i>
</div>
<div class="ticker-group" aria-hidden="true">
<b><em>#VinylFinds</em> · 42.1k posts</b><i>✦</i>
<b>LIVE · Synthwave Open Set</b><i>✦</i>
<b><em>#ShipLogs</em> · 18.7k posts</b><i>✦</i>
<b>NEW CIRCLE · Darkroom Society</b><i>✦</i>
<b><em>#SourdoughSunday</em> · 12.3k posts</b><i>✦</i>
<b><em>#QuietLaunch</em> · 9.8k posts</b><i>✦</i>
<b>ROOM 042 · Creators' Hour · 3,214 in</b><i>✦</i>
<b><em>#ZineCulture</em> · 8.4k posts</b><i>✦</i>
<b><em>#MarketMornings</em> · 6.2k posts</b><i>✦</i>
<b>TRENDING <em>+212%</em> · #VinylFinds</b><i>✦</i>
</div>
</div>
</div>
<!-- ============ FEED ============ -->
<section class="sec" id="feed">
<div class="container">
<div class="sec-head">
<div>
<span class="kicker" data-reveal><span class="num">01</span> The Feed</span>
<h2 class="mask" style="margin-top:14px"><span>Today's conversation<span class="dot">.</span></span></h2>
</div>
<div class="note" data-reveal><span class="pulse" aria-hidden="true"></span> Pulled live from the public feed</div>
</div>
<div class="feed-grid">
<div class="feed-col" id="feedList">
<article class="post-card pinned" data-reveal>
<div class="post-head">
<img src="https://i.pravatar.cc/96?u=the_murmur" alt="Murmur team avatar">
<div class="post-id">
<div class="pn">Murmur Team <span class="badge solid">Pinned</span></div>
<div class="ph">@the_murmur · <span class="badge">Announcements</span></div>
</div>
<span class="post-time">1h</span>
</div>
<p class="post-body">Murmur Live Rooms go fully public on Friday. 412 rooms, one shared playlist, zero ads — and every room gets a transcript the moment it ends. If you've been waiting for a reason to stop doomscrolling and start <em>showing up</em>, this is it. See you in the room. <span class="tag">#MurmurLive</span></p>
<div class="post-actions">
<button class="act-btn" data-type="reply"><svg viewBox="0 0 24 24"><path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5c-1.4 0-2.8-.3-4-1L3 20l1-5.5c-.7-1.2-1-2.6-1-4A8.38 8.38 0 0 1 11.5 2 8.38 8.38 0 0 1 21 11.5z"/></svg><span class="count">312</span></button>
<button class="act-btn" data-type="repost" aria-label="Repost"><svg viewBox="0 0 24 24"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg><span class="count" data-n="964">964</span></button>
<button class="act-btn" data-type="like" aria-label="Like"><svg viewBox="0 0 24 24"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg><span class="count" data-n="5200">5.2k</span></button>
<button class="act-btn" data-type="save" aria-label="Save"><svg viewBox="0 0 24 24"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg><span class="count" data-n="1108">1,108</span></button>
</div>
</article>
<article class="post-card" data-reveal style="--d:.08s">
<div class="post-head">
<img src="https://i.pravatar.cc/96?u=mara" alt="Mara Okonkwo avatar">
<div class="post-id">
<div class="pn">Mara Okonkwo</div>
<div class="ph">@mara.builds · <span class="badge">CoffeeScripters</span></div>
</div>
<span class="post-time">24m</span>
</div>
<p class="post-body">Just shipped voice threads to the whole platform. Latency is down 41%, which sounds small until you realize it's the difference between talking <em>at</em> a room and talking <em>with</em> it. To everyone beta-testing with us for six months: you are the reason this feels like a living room instead of a call center. <span class="tag">#ShipLogs</span></p>
<div class="post-img"><img src="https://picsum.photos/800/460" alt="Screenshot of the new Murmur voice threads interface"></div>
<div class="post-actions">
<button class="act-btn" data-type="reply"><svg viewBox="0 0 24 24"><path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5c-1.4 0-2.8-.3-4-1L3 20l1-5.5c-.7-1.2-1-2.6-1-4A8.38 8.38 0 0 1 11.5 2 8.38 8.38 0 0 1 21 11.5z"/></svg><span class="count">89</span></button>
<button class="act-btn" data-type="repost" aria-label="Repost"><svg viewBox="0 0 24 24"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg><span class="count" data-n="204">204</span></button>
<button class="act-btn" data-type="like" aria-label="Like"><svg viewBox="0 0 24 24"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg><span class="count" data-n="1204">1.2k</span></button>
<button class="act-btn" data-type="save" aria-label="Save"><svg viewBox="0 0 24 24"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg><span class="count" data-n="312">312</span></button>
</div>
</article>
<article class="post-card" data-reveal style="--d:.12s">
<div class="post-head">
<img src="https://i.pravatar.cc/96?u=devon" alt="Devon Reyes avatar">
<div class="post-id">
<div class="pn">Devon Reyes</div>
<div class="ph">@devon.frames · <span class="badge">Darkroom Society</span></div>
</div>
<span class="post-time">1h</span>
</div>
<p class="post-body">Golden hour at the Analog Collective meetup. 300 frames, one camera, zero edits — the grain did the retouching. If you develop film, this circle is the closest thing to a darkroom that never closes. Bring your negatives on Thursday and we'll trade scans. <span class="tag">#GoldenHour35mm</span> <span class="tag">#35mm</span></p>
<div class="post-img"><img src="https://picsum.photos/800/560" alt="Golden hour film photography from the Analog Collective meetup"></div>
<div class="post-actions">
<button class="act-btn" data-type="reply"><svg viewBox="0 0 24 24"><path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5c-1.4 0-2.8-.3-4-1L3 20l1-5.5c-.7-1.2-1-2.6-1-4A8.38 8.38 0 0 1 11.5 2 8.38 8.38 0 0 1 21 11.5z"/></svg><span class="count">41</span></button>
<button class="act-btn" data-type="repost" aria-label="Repost"><svg viewBox="0 0 24 24"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg><span class="count" data-n="96">96</span></button>
<button class="act-btn" data-type="like" aria-label="Like"><svg viewBox="0 0 24 24"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg><span class="count" data-n="862">862</span></button>
<button class="act-btn" data-type="save" aria-label="Save"><svg viewBox="0 0 24 24"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg><span class="count" data-n="148">148</span></button>
</div>
</article>
<article class="post-card" data-reveal style="--d:.16s">
<div class="post-head">
<img src="https://i.pravatar.cc/96?u=priya" alt="Priya Shah avatar">
<div class="post-id">
<div class="pn">Priya Shah</div>
<div class="ph">@priya.signals · <span class="badge">Slow Readers</span></div>
</div>
<span class="post-time">3h</span>
</div>
<p class="post-body">We pulled the numbers on the first 90 days of Circles and I still can't quite believe them: long-form replies are up 3.2×, and 78% of members say they found their "actual people" inside a single circle of under 500 members. No algorithm did this. People did — because every reply lands back in context, where the person who asked can actually read it. Full breakdown in the thread, receipts attached. <span class="tag">#FirstFifty</span></p>
<div class="post-actions">
<button class="act-btn" data-type="reply"><svg viewBox="0 0 24 24"><path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5c-1.4 0-2.8-.3-4-1L3 20l1-5.5c-.7-1.2-1-2.6-1-4A8.38 8.38 0 0 1 11.5 2 8.38 8.38 0 0 1 21 11.5z"/></svg><span class="count">133</span></button>
<button class="act-btn" data-type="repost" aria-label="Repost"><svg viewBox="0 0 24 24"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg><span class="count" data-n="340">340</span></button>
<button class="act-btn" data-type="like" aria-label="Like"><svg viewBox="0 0 24 24"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg><span class="count" data-n="1980">1.9k</span></button>
<button class="act-btn" data-type="save" aria-label="Save"><svg viewBox="0 0 24 24"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg><span class="count" data-n="402">402</span></button>
</div>
</article>
<div style="text-align:center;padding-top:6px" data-reveal>
<button class="btn btn-ghost" id="loadMore">Load more from the feed</button>
</div>
</div>
<!-- SIDEBAR -->
<aside class="side" aria-label="Feed sidebar">
<div class="side-card" data-reveal>
<h3>Who to follow <a href="#feed">See all</a></h3>
<div class="follow-row">
<img src="https://i.pravatar.cc/80?u=lena" alt="">
<div class="fi"><b>Lena Fischer</b><span>@lena.builds · Circle host</span></div>
<button class="follow-btn">Follow</button>
</div>
<div class="follow-row">
<img src="https://i.pravatar.cc/80?u=priya" alt="">
<div class="fi"><b>Priya Shah</b><span>@priya.signals · Data & community</span></div>
<button class="follow-btn">Follow</button>
</div>
<div class="follow-row">
<img src="https://i.pravatar.cc/80?u=juno" alt="">
<div class="fi"><b>Juno Park</b><span>@juno.frames · Photographer</span></div>
<button class="follow-btn">Follow</button>
</div>
<div class="follow-row">
<img src="https://i.pravatar.cc/80?u=the_murmur" alt="">
<div class="fi"><b>Murmur Team</b><span>@the_murmur · Official</span></div>
<button class="follow-btn on">Following</button>
</div>
</div>
<div class="side-card" data-reveal style="--d:.08s">
<h3>Live now <a href="#events">All rooms</a></h3>
<div class="live-row"><span class="pulse" aria-hidden="true"></span><span class="nm">Creators' Hour</span><span class="ct js-room">3,214</span></div>
<div class="live-row"><span class="pulse" aria-hidden="true"></span><span class="nm">Synthwave Open Set</span><span class="ct js-room">1,087</span></div>
<div class="live-row"><span class="pulse" aria-hidden="true"></span><span class="nm">Late Night Letters</span><span class="ct js-room">442</span></div>
</div>
<div class="side-card" data-reveal style="--d:.16s">
<h3>Suggested circles <a href="#communities">Browse</a></h3>
<div class="circle-row">
<div class="ci"><b>Design Nerds</b><span>1,204 members</span></div>
<button class="follow-btn">Join</button>
</div>
<div class="circle-row">
<div class="ci"><b>CoffeeScripters</b><span>3,881 members</span></div>
<button class="follow-btn">Join</button>
</div>
<div class="circle-row">
<div class="ci"><b>Slow Readers</b><span>926 members</span></div>
<button class="follow-btn">Join</button>
</div>
</div>
</aside>
</div>
</div>
</section>
<!-- ============ MESSAGES ============ -->
<section class="sec sec-alt" id="messages">
<div class="container">
<div class="sec-head">
<div>
<span class="kicker" data-reveal><span class="num">02</span> Messages</span>
<h2 class="mask" style="margin-top:14px"><span>Your rooms<span class="dot">.</span></span></h2>
</div>
<div class="note" data-reveal>3 conversations waiting on you</div>
</div>
<div class="msg-grid">
<article class="msg-card" data-reveal>
<div class="msg-top">
<div class="avs"><img src="https://i.pravatar.cc/80?u=devon" alt=""></div>
<div><b>Devon Reyes</b><span>@devon.frames · 2m ago</span></div>
</div>
<p class="msg-quote">"send me the contact sheet from Thursday? the 35mm scans are ready and I'm weak to all of them"</p>
<div class="msg-foot"><span class="unread">2 unread</span><button class="open-room">Open room →</button></div>
</article>
<article class="msg-card" data-reveal style="--d:.1s">
<div class="msg-top">
<div class="avs"><img src="https://i.pravatar.cc/80?u=priya" alt=""><img src="https://i.pravatar.cc/80?u=r2" alt=""><img src="https://i.pravatar.cc/80?u=r3" alt=""></div>
<div><b>Darkroom Society</b><span>214 members · 14m ago</span></div>
</div>
<p class="msg-quote">"darkroom night moved to 8pm — bring your own reels and a flash that actually works"</p>
<div class="msg-foot"><span class="unread">1 unread</span><button class="open-room">Open room →</button></div>
</article>
<article class="msg-card" data-reveal style="--d:.2s">
<div class="msg-top">
<div class="avs"><img src="https://i.pravatar.cc/80?u=r4" alt=""></div>
<div><b>Voice Room · Design Nerds</b><span>Recorded · 1h ago</span></div>
</div>
<p class="msg-quote">Critique session · 00:42:11 · 18 participants — full transcript is ready, timestamps included.</p>
<div class="msg-foot"><span class="unread" style="background:var(--ink);color:var(--paper)">Transcript</span><button class="open-room">Play transcript →</button></div>
</article>
</div>
</div>
</section>
<!-- ============ COMMUNITIES / PRINCIPLES (DARK, STICKY) ============ -->
<section class="sec dark" id="communities">
<div class="container comm-grid">
<div class="comm-sticky">
<span class="kicker" data-reveal><span class="num">03</span> Communities</span>
<h2 class="mask" style="margin-top:14px"><span>Not an algorithm.<br>A living room<span class="dot">.</span></span></h2>
<p class="lede" data-reveal>Most networks hand you a firehose ranked by attention and call it "for you." Murmur hands you a circle of 50 to 500 humans and lets the conversation do the ranking. What trends here is decided by rooms full of people who actually reply to each other — and the formula behind it is one page long, not one board of secretaries long.</p>
<a class="formula-link" href="#trending" data-reveal>Read the public ranking formula →</a>
</div>
<div>
<div class="step" data-reveal>
<div class="no">01</div>
<div>
<h3>Circles before feeds</h3>
<p>You don't open Murmur to a feed — you open it to your circles. Every post is read by your whole circle before it's even eligible to trend, so "reach" starts as a conversation, not a broadcast. Circles cap at 500 on purpose: it's the largest room where someone might still know your name.</p>
</div>
</div>
<div class="step" data-reveal style="--d:.08s">
<div class="no">02</div>
<div>
<h3>Threads stay threaded</h3>
<p>Replies live with their parent, forever, in order, with the full context intact. Ninety-four percent of conversation on Murmur stays in-thread — which is why our threads run three times longer than elsewhere, and why a reply from week one can still start a good fight on week six.</p>
</div>
</div>
<div class="step" data-reveal style="--d:.16s">
<div class="no">03</div>
<div>
<h3>Signals you can read</h3>
<p>Instead of a black box, every recommendation carries a receipt: shared circle, mutual follow, or a mention in a live room. If we can't explain why a post reached you in plain language, it doesn't reach you. That's not a feature — it's the whole product.</p>
</div>
</div>
<div class="step" data-reveal style="--d:.24s">
<div class="no">04</div>
<div>
<h3>Gather, not ghost</h3>
<p>Every circle ships with a calendar and a live room. Offline meetups, scheduled critiquenights, and Thursday synthwave sets are first-class features, not plugins bolted on later. We measure success in people who met in person, not minutes glued to a screen.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ============ TRENDING ============ -->
<section class="sec" id="trending">
<div class="container">
<div class="sec-head">
<div>
<span class="kicker" data-reveal><span class="num">04</span> Trending</span>
<h2 class="mask" style="margin-top:14px"><span>What's moving this hour<span class="dot">.</span></span></h2>
</div>
<div class="note" data-reveal><span class="pulse" aria-hidden="true"></span> <span id="refreshNote">Refreshed 0s ago</span></div>
</div>
<div class="tabs" role="tablist" aria-label="Filter trending" data-reveal>
<button class="tab active" data-tab="all">All</button>
<button class="tab" data-tab="music">Music</button>
<button class="tab" data-tab="tech">Tech</button>
<button class="tab" data-tab="art">Art</button>
<button class="tab" data-tab="food">Food</button>
</div>
<div class="trend-list" id="trendList" data-reveal>
<div class="trend-row" data-cat="music" title="Click to copy hashtag">
<span class="rank">01</span>
<div class="tag-cell"><b>#VinylFinds</b><p>Analog swaps, first-press finds, and one very angry turntable.</p></div>
<span class="cat-tag">Music</span>
<div class="v-wrap"><div class="v-bar"><i style="--v:92%"></i></div><span>42.1k posts</span></div>
<span class="delta up">▲ +212%</span>
</div>
<div class="trend-row" data-cat="tech" title="Click to copy hashtag">
<span class="rank">02</span>
<div class="tag-cell"><b>#ShipLogs</b><p>Builders posting what they shipped this week. Receipts attached, always.</p></div>
<span class="cat-tag">Tech</span>
<div class="v-wrap"><div class="v-bar"><i style="--v:78%"></i></div><span>18.7k posts</span></div>
<span class="delta up">▲ +96%</span>
</div>
<div class="trend-row" data-cat="food" title="Click to copy hashtag">
<span class="rank">03</span>
<div class="tag-cell"><b>#SourdoughSunday</b><p>The weekend proof race. 94% of loaves made it. The 6% did not.</p></div>
<span class="cat-tag">Food</span>
<div class="v-wrap"><div class="v-bar"><i style="--v:64%"></i></div><span>12.3k posts</span></div>
<span class="delta up">▲ +61%</span>
</div>
<div class="trend-row" data-cat="tech" title="Click to copy hashtag">
<span class="rank">04</span>
<div class="tag-cell"><b>#QuietLaunch</b><p>Launches without the hype machine. Screenshots over superlatives.</p></div>
<span class="cat-tag">Tech</span>
<div class="v-wrap"><div class="v-bar"><i style="--v:58%"></i></div><span>9.8k posts</span></div>
<span class="delta up">▲ +44%</span>
</div>
<div class="trend-row" data-cat="art" title="Click to copy hashtag">
<span class="rank">05</span>
<div class="tag-cell"><b>#ZineCulture</b><p>Folded, stapled, photographed at 45 degrees. Xeroxes welcome.</p></div>
<span class="cat-tag">Art</span>
<div class="v-wrap"><div class="v-bar"><i style="--v:47%"></i></div><span>8.4k posts</span></div>
<span class="delta up">▲ +38%</span>
</div>
<div class="trend-row" data-cat="food" title="Click to copy hashtag">
<span class="rank">06</span>
<div class="tag-cell"><b>#MarketMornings</b><p>First cart, first coffee, first come. Farmers' market field notes.</p></div>
<span class="cat-tag">Food</span>
<div class="v-wrap"><div class="v-bar"><i style="--v:39%"></i></div><span>6.2k posts</span></div>
<span class="delta up">▲ +27%</span>
</div>
<div class="trend-row" data-cat="all" title="Click to copy hashtag">
<span class="rank">07</span>
<div class="tag-cell"><b>#FirstFifty</b><p>Introducing yourself to a new circle in exactly fifty words. No more.</p></div>
<span class="cat-tag">People</span>
<div class="v-wrap"><div class="v-bar"><i style="--v:34%"></i></div><span>5.9k posts</span></div>
<span class="delta up">▲ +19%</span>
</div>
<div class="trend-row" data-cat="art" title="Click to copy hashtag">
<span class="rank">08</span>
<div class="tag-cell"><b>#LetteringLovers</b><p>One brush, one alphabet, zero shortcuts. Show the bad drafts too.</p></div>
<span class="cat-tag">Art</span>
<div class="v-wrap"><div class="v-bar"><i style="--v:28%"></i></div><span>4.7k posts</span></div>
<span class="delta up">▲ +12%</span>
</div>
<div class="trend-row" data-cat="tech" title="Click to copy hashtag">
<span class="rank">09</span>
<div class="tag-cell"><b>#LatencyLivesMatter</b><p>For the 11 milliseconds that make a voice room feel like the same room.</p></div>
<span class="cat-tag">Tech</span>
<div class="v-wrap"><div class="v-bar"><i style="--v:21%"></i></div><span>3.3k posts</span></div>
<span class="delta down">▼ −8%</span>
</div>
<div class="trend-row" data-cat="art" title="Click to copy hashtag">
<span class="rank">10</span>
<div class="tag-cell"><b>#GoldenHour35mm</b><p>300 frames, one camera, zero edits. Film before filters.</p></div>
<span class="cat-tag">Art</span>
<div class="v-wrap"><div class="v-bar"><i style="--v:16%"></i></div><span>2.8k posts</span></div>
<span class="delta down">▼ −3%</span>
</div>
</div>
<p class="trend-foot" data-reveal>TIP — CLICK ANY HASHTAG TO COPY IT STRAIGHT INTO YOUR COMPOSER · VELOCITY = POSTS PER MINUTE VS. 24H AVERAGE</p>
</div>
</section>
<!-- ============ EVENTS ============ -->
<section class="sec sec-alt" id="events">
<div class="container">
<div class="sec-head">
<div>
<span class="kicker" data-reveal><span class="num">05</span> Events</span>
<h2 class="mask" style="margin-top:14px"><span>Gather, not ghost<span class="dot">.</span></span></h2>
<p class="lede" data-reveal style="margin-top:16px">Every circle on Murmur gets a calendar and a room, so the best conversations keep a time and a place. Here's what's happening across the network this month — in person, on the decks, or both.</p>
</div>
</div>
<div class="ev-feature">
<div class="ev-media kenburns" data-reveal>
<img src="https://picsum.photos/1000/640" alt="Crowd at the Murmur IRL San Francisco offsite">
</div>
<div class="ev-info" data-reveal style="--d:.1s">
<div class="ev-chip-row"><span class="ev-chip v">Featured</span><span class="ev-chip">SAT</span><span class="ev-chip">NOV 08</span><span class="ev-chip">2025</span></div>
<h3>MURMUR IRL — San Francisco</h3>
<p>Our flagship offsite: a full day with the people you've been arguing with about turntables, type scales, and CI/CD for months. Six speakers on building without an algorithm, twelve circles running parallel sessions, and a potluck that has genuinely broken our seating chart. Bring your laptop, your best story, and a dish you're proud of.</p>
<div class="ev-meta">
<div><b>Venue</b>Fort Mason Center</div>
<div><b>Doors</b>9:00 AM PT</div>
<div><b>Speakers</b>6 + 12 circles</div>
</div>
<div class="seats">
<div class="s-bar"><i></i></div>
<div class="s-lbl"><span>382 of 400 seats claimed</span><span>95%</span></div>
</div>
<div class="ev-btns">
<button class="btn btn-primary rsvp-btn" data-base="382">RSVP — free with membership</button>
<a class="cal-link" href="#events">Add to calendar ↗</a>
</div>
</div>
</div>
<div class="ev-row-grid">
<article class="ev-small" data-reveal>
<div class="m"><img src="https://picsum.photos/400/300" alt="DJ booth at the weekly Synthwave Open Set live room"></div>
<div>
<div class="ev-chip-row"><span class="ev-chip v">Weekly</span><span class="ev-chip">Live Room</span></div>
<h4>Synthwave Open Set</h4>
<p>Every Thursday 9:15 PM PT. A rotating DJ booth in our largest room — 40 minutes on the decks, one request queue, and the room's playlist is the algorithm.</p>
<div class="em">1,087 attending · online</div>
<button class="btn btn-ghost btn-sm rsvp-btn" data-base="1087">Attend</button>
</div>
</article>
<article class="ev-small" data-reveal style="--d:.1s">
<div class="m"><img src="https://picsum.photos/400/300" alt="Film photography meetup in Portland's Alberta Arts District"></div>
<div>
<div class="ev-chip-row"><span class="ev-chip">SAT</span><span class="ev-chip">NOV 22</span></div>
<h4>Analog Collectives — Portland</h4>
<p>Thirty photographers, one 1978 Polaroid, and a darkroom in the back. Bring a reel you've been afraid to develop — someone in this room will develop it with you.</p>
<div class="em">Alberta Arts District · 68 of 96 in</div>
<button class="btn btn-ghost btn-sm rsvp-btn" data-base="68">RSVP</button>
</div>
</article>
</div>
</div>
</section>
<!-- ============ VOICES ============ -->
<section class="sec" id="voices">
<div class="container">
<div class="sec-head">
<div>
<span class="kicker" data-reveal><span class="num">06</span> Voices</span>
<h2 class="mask" style="margin-top:14px"><span>Community, in their words<span class="dot">.</span></span></h2>
</div>
<div class="note" data-reveal>Unedited · pulled from public reviews</div>
</div>
<div class="voices-wrap">
<article class="postcard pc1" data-reveal>
<q>I've run a 400-person developer circle for two years. Murmur is the first platform where the conversation doesn't die after hour one — threads stay in context, and new members show up reading.</q>
<div class="auth"><img src="https://i.pravatar.cc/80?u=lena" alt="Lena Fischer"><div><b>Lena Fischer</b><span>CIRCLE HOST · RUST & RADIATORS</span></div></div>
</article>
<article class="postcard pc2" data-reveal style="--d:.08s">
<q>Our book club's replies tripled in a month. Not because of a new algorithm — because 900 readers can finally finish a sentence without losing the thread.</q>
<div class="auth"><img src="https://i.pravatar.cc/80?u=marcus" alt="Marcus Webb"><div><b>Marcus Webb</b><span>HOST · SLOW READERS</span></div></div>
</article>
<article class="postcard stat pc3" data-reveal style="--d:.16s">
<div class="big">4.8<span style="font-size:26px">/5</span></div>
<p>Average across 12,400 community reviews. 91% say they "found their people" in under a month.</p>
</article>
<article class="postcard pc4" data-reveal style="--d:.24s">
<q>The live rooms are the closest thing to being in the same coffee shop. My design circle met in person in April because of them. I cried a little at the potluck.</q>
<div class="auth"><img src="https://i.pravatar.cc/80?u=yuki" alt="Yuki Tanaka"><div><b>Yuki Tanaka</b><span>DESIGNER · TOKYO</span></div></div>
</article>
<article class="postcard pc5" data-reveal style="--d:.32s">
<q>Signal transparency is everything. My team can tell <em>why</em> a post landed — shared circle, mutual follow, room mention — and fix the ones that didn't. It's the first feed I can actually defend.</q>
<div class="auth"><img src="https://i.pravatar.cc/80?u=amara" alt="Amara Diallo"><div><b>Amara Diallo</b><span>COMMUNITY LEAD · 30K-MEMBER BRAND</span></div></div>
</article>
</div>
</div>
</section>
<!-- ============ ABOUT ============ -->
<section class="sec sec-alt" id="about">
<div class="container about-grid">
<div class="about-photos" data-reveal>
<div class="main"><img src="https://picsum.photos/720/540" alt="The Murmur team working in the San Francisco office"></div>
<div class="flip"><img src="https://picsum.photos/320/320" alt="Murmur IRL community offsite, 2024"></div>
</div>
<div class="about-copy">
<span class="kicker" data-reveal><span class="num">07</span> About</span>
<h2 class="mask" style="margin:14px 0 22px"><span>Built in San Francisco,<br>tuned worldwide<span class="dot">.</span></span></h2>
<p data-reveal>Murmur started in 2022 in a co-working basement in the Mission, when three community managers got tired of platforms that treated people like impressions. We quit, pooled our savings, and spent eighteen months building a network where a 400-person circle gets the same care as a 40-million-follower feed — because honestly, it's the smaller one you actually talk to.</p>
<p data-reveal style="--d:.1s">Today we're 62 people across San Francisco, Lisbon, and Tokyo, serving 2.4 million members with zero ad slots. The business is subscriptions, events, and API access for the brands that join their customers' rooms — not the ones that interrupt them. We still answer every support email, mostly by hand, usually within the hour.</p>
<div class="about-stats" data-reveal style="--d:.2s">
<div class="a-stat"><div class="n">2.4<em>M</em></div><div class="l">Members</div></div>
<div class="a-stat"><div class="n">62</div><div class="l">Humans</div></div>
<div class="a-stat"><div class="n">3</div><div class="l">Cities</div></div>
<div class="a-stat"><div class="n"><em>0</em></div><div class="l">Ad slots</div></div>
</div>
</div>
</div>
</section>
<!-- ============ COMPOSER / SCHEDULER ============ -->
<section class="sec" id="compose">
<div class="container comp-grid">
<div class="comp-copy">
<span class="kicker" data-reveal><span class="num">08</span> Composer</span>
<h2 class="mask" style="margin-top:14px"><span>Say it. Schedule it.<br>Send it<span class="dot">.</span></span></h2>
<p class="lede" data-reveal>The Murmur composer is where a thought becomes a post — or a plan. Draft in any circle, pick the moment, and our scheduler learns when your people are actually listening: 7:40 AM for CoffeeScripters, 9:15 PM for the synthwave crowd. It suggests the slot with the most ears, and it never boosts anything. Timing helps people find you; only people can make you trend.</p>
<ul class="comp-points" data-reveal style="--d:.1s">
<li><span><b>Post now</b> — drops straight into your circle's feed, seen by every member first.</span></li>
<li><span><b>Schedule</b> — queue posts for peak-listen hours; edit or cancel anytime.</span></li>
<li><span><b>Hashtag chips</b> — tap to attach the tags your circle is already using today.</span></li>
</ul>
</div>
<div class="composer" data-reveal style="--d:.15s">
<div class="comp-as">
<img src="https://i.pravatar.cc/80?u=you" alt="Your avatar">
<div>
<div class="lbl">Posting as @you</div>
<select id="circleSelect" aria-label="Choose circle">
<option value="Design Nerds" data-m="1204">Circle: Design Nerds</option>
<option value="CoffeeScripters" data-m="3881">Circle: CoffeeScripters</option>
<option value="Slow Readers" data-m="926">Circle: Slow Readers</option>
<option value="Rust & Radiators" data-m="402">Circle: Rust & Radiators</option>
</select>
</div>
</div>
<textarea id="postText" maxlength="400" placeholder="What is your circle talking about? (400 characters — make them count)" aria-label="Compose a post"></textarea>
<div class="comp-mid">
<div class="chips" aria-label="Hashtag suggestions">
<button class="chip" data-tag="#DesignNerds">#DesignNerds</button>
<button class="chip" data-tag="#WIP">#WIP</button>
<button class="chip" data-tag="#OpenCritique">#OpenCritique</button>
<button class="chip" data-tag="#FirstFifty">#FirstFifty</button>
</div>
<span class="char-count" id="charCount">0 / 400</span>
</div>
<div class="comp-actions">
<select id="timeSelect" aria-label="Choose time">
<option value="Now">Post time: Now</option>
<option value="Today · 6:00 PM">Today · 6:00 PM</option>
<option value="Tomorrow · 9:00 AM">Tomorrow · 9:00 AM</option>
<option value="Saturday · 10:00 AM">Saturday · 10:00 AM</option>
</select>
<button class="btn btn-primary btn-sm" id="postNowBtn" disabled>Create Post</button>
<button class="btn btn-ghost btn-sm" id="scheduleBtn" disabled>Schedule</button>
</div>
<div class="queue">
<h4>Your queue <span id="queueCount">2</span></h4>
<ul id="queueList">
<li class="q-item"><span class="q-time">Tomorrow · 9:00 AM</span><span class="q-text">Shipped a new wall for the circle. Feedback before Friday, please?</span><button class="q-del" aria-label="Remove scheduled post">×</button></li>
<li class="q-item"><span class="q-time">Saturday · 10:00 AM</span><span class="q-text">Open critique: my murals series. Roast welcome.</span><button class="q-del" aria-label="Remove scheduled post">×</button></li>
</ul>
<p class="q-empty" id="queueEmpty" style="display:none">Nothing scheduled — your silence is content too.</p>
</div>
</div>
</div>
</section>
<!-- ============ FAQ ============ -->
<section class="sec sec-alt" id="faq">
<div class="container faq-grid">
<div class="faq-left">
<span class="kicker" data-reveal><span class="num">09</span> FAQ</span>
<h2 class="mask" style="margin-top:14px"><span>Questions,<br>answered<span class="dot">.</span></span></h2>
<p data-reveal>The five things every new circle host asks us in their first week. Still curious? Message the team — a human reads every word.</p>
<p data-reveal style="--d:.1s" class="mono" style="font-size:13px">→ hello@murmur.social</p>
</div>
<div id="faqList" data-reveal>
<div class="faq-item">
<button class="faq-btn" aria-expanded="false">Is Murmur free?<span class="faq-ic" aria-hidden="true"></span></button>
<div class="faq-panel"><div class="faq-panel-in">Yes. The free tier covers everything a person needs: up to 12 circles, 400-character posts, live rooms, and full message history. Murmur Pro is $6/month and unlocks 500-member rooms, circle event calendars, and read-out reach reports — useful for hosts and brand teams, unnecessary for most members. Neither tier has ads, and neither ever will.</div></div>
</div>
<div class="faq-item">
<button class="faq-btn" aria-expanded="false">How does Murmur decide what trends?<span class="faq-ic" aria-hidden="true"></span></button>
<div class="faq-panel"><div class="faq-panel-in">A public formula, not a black box: velocity of posts per minute, weighted by replies from distinct members, capped so one viral user can't dominate a hashtag. Circle membership and mutual follows carry the most weight — your own people decide what rises before the wider network sees it. The full formula is one page, version-controlled, and published every time we change it.</div></div>
</div>
<div class="faq-item">
<button class="faq-btn" aria-expanded="false">Can I bring my existing community?<span class="faq-ic" aria-hidden="true"></span></button>
<div class="faq-panel"><div class="faq-panel-in">Most circles start that way. Our migration tool imports members, roles, and history from Discord, Slack, and Meetup, and maps channels to circles one-to-one. The trickiest part is cultural: bring your rituals (the Thursday set, the Sunday loaf) and the room fills itself. Average migration takes under an afternoon.</div></div>
</div>
<div class="faq-item">
<button class="faq-btn" aria-expanded="false">How is moderation handled?<span class="faq-ic" aria-hidden="true"></span></button>
<div class="faq-panel"><div class="faq-panel-in">Moderation lives with the community. Every circle rotates a moderator team from its own members, with tools for pins, quiet-hours, and context-preserving removals — nothing just vanishes. Platform-level reports are answered by a human within 24 hours, and we publish our moderation actions quarterly, the same way we publish the ranking formula.</div></div>
</div>
<div class="faq-item">
<button class="faq-btn" aria-expanded="false">Is there a mobile app?<span class="faq-ic" aria-hidden="true"></span></button>
<div class="faq-panel"><div class="faq-panel-in">iOS and Android both, with offline rooms (your transcripts, drafts, and read queues work on the subway) and a no-autoplay promise for video. Live rooms are fully usable on mobile — 71% of all room hours happen on a phone held in a hand at a potluck, and we've designed for exactly that.</div></div>
</div>
</div>
</div>
</section>
<!-- ============ CTA ============ -->
<section class="cta">
<div class="container">
<span class="kicker" data-reveal>Ready when you are</span>
<h2 class="mask" style="margin-top:22px"><span>Your frequency<br>is out there<span style="color:var(--verm)">.</span></span></h2>
<p data-reveal>Join 2.4 million people who stopped shouting at an algorithm and started talking to their people. Free for every circle under 100, forever.</p>
<div data-reveal style="--d:.1s">
<button class="btn btn-verm" data-join>Create your free account</button>
</div>
<p class="micro" data-reveal style="--d:.2s">No ads · No dark patterns · Your data is yours</p>
</div>
<div class="cta-ticker" aria-hidden="true">
<div class="ticker-track">
<div class="ticker-group">
<b>Open now — Creators' Hour</b><i>✦</i><b>Open now — Synthwave Set</b><i>✦</i><b>Open now — Late Night Letters</b><i>✦</i><b>Open now — Rust & Radiators</b><i>✦</i><b>Open now — Sourdough Sunday</b><i>✦</i><b>Open now — Zine Culture</b><i>✦</i>
</div>
<div class="ticker-group">
<b>Open now — Creators' Hour</b><i>✦</i><b>Open now — Synthwave Set</b><i>✦</i><b>Open now — Late Night Letters</b><i>✦</i><b>Open now — Rust & Radiators</b><i>✦</i><b>Open now — Sourdough Sunday</b><i>✦</i><b>Open now — Zine Culture</b><i>✦</i>
</div>
</div>
</div>
</section>
</main>
<!-- ============ FOOTER ============ -->
<footer class="site">
<div class="container">
<div class="foot-grid">
<div class="foot-brand">
<span class="name"><img src="https://placehold.co/80x80/17130E/FF4B2E?text=M&font=oswald" alt="Murmur logo">MURMUR</span>
<p>The community-first social platform. Rooms, threads, and the humans in them — tuned to your people since 2022.</p>
<div class="soc-row">
<a href="#top" aria-label="Murmur on X">X</a>
<a href="#top" aria-label="Murmur on Instagram">IG</a>
<a href="#top" aria-label="Murmur on YouTube">YT</a>
<a href="#top" aria-label="Murmur on TikTok">TT</a>
<a href="#top" aria-label="Murmur on Discord">DC</a>
</div>
<div class="foot-contact">
<a href="mailto:hello@murmur.social">hello@murmur.social</a><br>
<a href="tel:+14155550138">+1 (415) 555-0138</a><br>
548 Market Street, Suite 920<br>
San Francisco, CA 94104
</div>
</div>
<div class="foot-col">
<h4>Product</h4>
<ul>
<li><a href="#feed">The Feed</a></li>
<li><a href="#communities">Circles</a></li>
<li><a href="#events">Live Rooms</a></li>
<li><a href="#compose">Composer</a></li>
<li><a href="#top">Mobile Apps</a></li>
</ul>
</div>
<div class="foot-col">
<h4>Company</h4>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#top">Careers</a></li>
<li><a href="#top">Press Kit</a></li>
<li><a href="#communities">Community Charter</a></li>
<li><a href="mailto:press@murmur.social">Press</a></li>
</ul>
</div>
<div class="foot-col">
<h4>Support</h4>
<ul>
<li><a href="#faq">Help Center</a></li>
<li><a href="#top">Safety</a></li>
<li><a href="#top">Community Guidelines</a></li>
<li><a href="#top">Status</a></li>
<li><a href="#top">Moderation</a></li>
</ul>
</div>
<div class="foot-news">
<h4 class="foot-col" style="margin-bottom:18px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--paper)">The Weekly Signal</h4>
<p>One email, every Friday: the best of the murmur, the week's biggest circles, and one story we couldn't stop thinking about.</p>
<form class="nl-form" id="nlForm" novalidate>
<input type="email" id="nlEmail" placeholder="you@yourcircle.com" aria-label="Email address" required>
<button type="submit">Subscribe</button>
</form>
<p class="foot-note">12,400 READERS · UNSUBSCRIBE ANYTIME · NO SPAM, EVER</p>
</div>
</div>
<div class="foot-bottom">
<span>© <span id="yr">2025</span> Murmur Labs, Inc. — All frequencies reserved.</span>
<nav aria-label="Legal">
<a href="#top">Privacy</a>
<a href="#top">Terms</a>
<a href="#top">Cookies</a>
<a href="#top">Security</a>
</nav>
</div>
</div>
</footer>
<div id="toasts" aria-live="polite"></div>
<script>
(function(){
'use strict';
var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var $ = function(s,c){ return (c||document).querySelector(s); };
var $$ = function(s,c){ return Array.prototype.slice.call((c||document).querySelectorAll(s)); };
/* ---------- year ---------- */
$('#yr').textContent = new Date().getFullYear();
/* ---------- toast ---------- */
function toast(msg){
var box = $('#toasts');
var t = document.createElement('div');
t.className = 'toast';
t.textContent = msg;
box.appendChild(t);
requestAnimationFrame(function(){ requestAnimationFrame(function(){ t.classList.add('show'); }); });
setTimeout(function(){
t.classList.remove('show');
setTimeout(function(){ t.remove(); }, 400);
}, 3400);
}
/* ---------- header ---------- */
var header = $('#siteHeader');
window.addEventListener('scroll', function(){
header.classList.toggle('scrolled', window.scrollY > 8);
}, {passive:true});
var burger = $('#navToggle');
burger.addEventListener('click', function(){
var open = header.classList.toggle('menu-open');
burger.setAttribute('aria-expanded', open ? 'true' : 'false');
});
$$('#mainNav a').forEach(function(a){
a.addEventListener('click', function(){
header.classList.remove('menu-open');
burger.setAttribute('aria-expanded','false');
});
});
/* ---------- reveal on scroll ---------- */
var io = new IntersectionObserver(function(entries){
entries.forEach(function(e){
if(e.isIntersecting){ e.target.classList.add('is-in'); io.unobserve(e.target); }
});
}, {threshold:.18, rootMargin:'0px 0px -6% 0px'});
$$('[data-reveal], .mask').forEach(function(el){ io.observe(el); });
/* ---------- scramble decode ---------- */
(function(){
var el = $('#scrambleWord');
var final = el.getAttribute('data-text');
if(reduced){ el.textContent = final; return; }
var chars = '#%&@$/=?*+XZ';
var frame = 0;
function tick(){
var reveal = Math.floor(frame/2.2);
var out = '';
for(var i=0;i<final.length;i++){
out += i < reveal ? final[i] : (final[i] === ' ' ? ' ' : chars[Math.floor(Math.random()*chars.length)]);
}
el.textContent = out;
frame++;
if(reveal <= final.length){ requestAnimationFrame(tick); }
else { el.textContent = final; }
}
setTimeout(tick, 350);
})();
/* ---------- counters ---------- */
var cio = new IntersectionObserver(function(entries){
entries.forEach(function(e){
if(!e.isIntersecting) return;
cio.unobserve(e.target);
var el = e.target, target = +el.getAttribute('data-count');
if(reduced){ el.textContent = target.toLocaleString('en-US'); return; }
var t0 = performance.now(), dur = 1500;
(function step(now){
var p = Math.min(1,(now-t0)/dur);
var eased = 1 - Math.pow(1-p,3);
el.textContent = Math.round(target*eased).toLocaleString('en-US');
if(p<1) requestAnimationFrame(step);
})(t0);
});
}, {threshold:.5});
$$('[data-count]').forEach(function(el){ cio.observe(el); });
/* ---------- live online counter ---------- */
var onlineBase = 128437;
setInterval(function(){
onlineBase += Math.floor(Math.random()*91) - 35;
if(onlineBase < 125000) onlineBase = 125000;
$$('.js-online').forEach(function(el){ el.textContent = onlineBase.toLocaleString('en-US'); });
}, 3200);
/* ---------- mini post cycling ---------- */
var minis = $$('#miniPosts .mini-post');
if(minis.length && !reduced){
var mi = 0;
setInterval(function(){
minis[mi].classList.remove('active');
mi = (mi+1) % minis.length;
minis[mi].classList.add('active');
}, 3400);
}
/* ---------- room listener jitter ---------- */
$$('.js-room').forEach(function(el){
var base = parseInt(el.textContent.replace(/,/g,''),10) || 100;
setInterval(function(){
base += Math.floor(Math.random()*25) - 10;
el.textContent = base.toLocaleString('en-US');
}, 4100);
});
/* ---------- refresh note ---------- */
(function(){
var s = 0, el = $('#refreshNote');
if(!el) return;
setInterval(function(){
s = (s+1) % 61;
el.textContent = 'Refreshed ' + s + 's ago';
}, 1000);
})();
/* ---------- post action buttons (like / repost / save / reply) ---------- */
function fmt(n){
if(n >= 1000){ var k = (n/1000).toFixed(1).replace(/\.0$/,''); return k + 'k'; }
return String(n);
}
document.addEventListener('click', function(e){
var btn = e.target.closest('.act-btn');
if(!btn) return;
var type = btn.getAttribute('data-type');
var countEl = btn.querySelector('.count');
if(type === 'reply'){
toast('Reply composer opening…');
return;
}
var n = countEl ? (parseInt(countEl.getAttribute('data-n'),10) || 0) : 0;
var on = btn.classList.toggle('on');
if(type === 'like'){
n += on ? 1 : -1;
btn.classList.remove('pop'); void btn.offsetWidth; btn.classList.add('pop');
toast(on ? 'Added to your liked posts.' : 'Like removed.');
} else if(type === 'repost'){
n += on ? 1 : -1;
toast(on ? 'Reposted to your circles.' : 'Repost undone.');
} else if(type === 'save'){
n += on ? 1 : -1;
toast(on ? 'Saved to your bookshelf.' : 'Removed from bookshelf.');
}
if(countEl){ countEl.setAttribute('data-n', n); countEl.textContent = fmt(n); }
});
/* ---------- follow / join toggles ---------- */
$$('.follow-btn').forEach(function(btn){
btn.addEventListener('click', function(){
var on = btn.classList.toggle('on');
if(btn.textContent === 'Join' || btn.textContent === 'Joined'){
btn.textContent = on ? 'Joined' : 'Join';
toast(on ? 'Circle joined — say hi with #FirstFifty.' : 'Left the circle.');
} else {
btn.textContent = on ? 'Following' : 'Follow';
toast(on ? 'Now following. Their posts land in your circles.' : 'Unfollowed.');
}
});
});
/* ---------- RSVP toggles ---------- */
$$('.rsvp-btn').forEach(function(btn){
btn.addEventListener('click', function(){
var on = btn.classList.toggle('on');
var base = parseInt(btn.getAttribute('data-base'),10) || 0;
btn.textContent = on ? "You're in ✓" : (btn.textContent.indexOf('RSVP') === 0 ? 'RSVP' : 'Attend');
if(btn.getAttribute('data-orig') === null){ btn.setAttribute('data-orig', btn.textContent); }
if(!on){ btn.textContent = btn.getAttribute('data-orig'); }
toast(on ? 'RSVP confirmed — we saved you a seat. See you there.' : 'RSVP cancelled. The seat is open again.');
});
});
/* ---------- trending tabs ---------- */
var tabs = $$('.tab'), rows = $$('#trendList .trend-row');
tabs.forEach(function(t){
t.addEventListener('click', function(){
tabs.forEach(function(x){ x.classList.toggle('active', x === t); });
var cat = t.getAttribute('data-tab');
var visible = 0;
rows.forEach(function(r){
var show = cat === 'all' || r.getAttribute('data-cat') === cat;
r.classList.toggle('hide', !show);
if(show){ visible++; r.querySelector('.rank').textContent = String(visible).padStart(2,'0'); }
});
toast('Trending · ' + t.textContent + ' — ' + visible + ' hashtags moving.');
});
});
/* ---------- copy hashtag ---------- */
$('#trendList').addEventListener('click', function(e){
var row = e.target.closest('.trend-row');
if(!row) return;
var tag = row.querySelector('.tag-cell b').textContent;
if(navigator.clipboard && navigator.clipboard.writeText){
navigator.clipboard.writeText(tag).catch(function(){});
}
toast('Copied ' + tag + ' — paste it in the composer.');
});
/* ---------- FAQ accordion ---------- */
var items = $$('#faqList .faq-item');
items.forEach(function(item){
var btn = item.querySelector('.faq-btn'), panel = item.querySelector('.faq-panel');
btn.addEventListener('click', function(){
var isOpen = item.classList.contains('open');
items.forEach(function(other){
other.classList.remove('open');
other.querySelector('.faq-btn').setAttribute('aria-expanded','false');
other.querySelector('.faq-panel').style.maxHeight = null;
});
if(!isOpen){
item.classList.add('open');
btn.setAttribute('aria-expanded','true');
panel.style.maxHeight = panel.scrollHeight + 'px';
}
});
});
/* ---------- composer ---------- */
var ta = $('#postText'), cc = $('#charCount'),
nowBtn = $('#postNowBtn'), schedBtn = $('#scheduleBtn'),
circleSel = $('#circleSelect'), timeSel = $('#timeSelect'),
feedList = $('#feedList'), queueList = $('#queueList'),
queueCount = $('#queueCount'), queueEmpty = $('#queueEmpty');
function esc(s){
return s.replace(/[&<>"']/g, function(c){
return {'&':'&','<':'<','>':'>','"':'"',"'":'''}[c];
});
}
function updateCount(){
var len = ta.value.length;
cc.textContent = len + ' / 400';
cc.classList.toggle('warn', len > 360);
var empty = ta.value.trim().length === 0;
nowBtn.disabled = empty;
schedBtn.disabled = empty;
}
ta.addEventListener('input', updateCount);
updateCount();
$$('.chip').forEach(function(chip){
chip.addEventListener('click', function(){
var tag = chip.getAttribute('data-tag');
if(ta.value.indexOf(tag) !== -1){ ta.focus(); return; }
var cur = ta.value;
var add = (cur && !cur.endsWith(' ') ? ' ' : '') + tag;
if(cur.length + add.length > 400){ toast('Not enough characters left for that tag.'); return; }
ta.value = cur + add;
updateCount();
ta.focus();
});
});
function circleMembers(){
var opt = circleSel.options[circleSel.selectedIndex];
return { name: opt.value, m: opt.getAttribute('data-m') || '0' };
}
function newPostCard(text, isYou){
var c = circleMembers();
var card = document.createElement('article');
card.className = 'post-card just-now';
card.innerHTML =
'<div class="post-head">' +
'<img src="https://i.pravatar.cc/96?u=you" alt="Your avatar">' +
'<div class="post-id"><div class="pn">' + (isYou ? 'You' : 'You') + '</div>' +
'<div class="ph">@you · <span class="badge">' + esc(c.name) + '</span></div></div>' +
'<span class="post-time">Just now</span>' +
'</div>' +
'<p class="post-body">' + esc(text) + '</p>' +
'<div class="post-actions">' +
'<button class="act-btn" data-type="reply"><svg viewBox="0 0 24 24"><path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5c-1.4 0-2.8-.3-4-1L3 20l1-5.5c-.7-1.2-1-2.6-1-4A8.38 8.38 0 0 1 11.5 2 8.38 8.38 0 0 1 21 11.5z"/></svg><span class="count">0</span></button>' +
'<button class="act-btn" data-type="repost" aria-label="Repost"><svg viewBox="0 0 24 24"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg><span class="count" data-n="0">0</span></button>' +
'<button class="act-btn" data-type="like" aria-label="Like"><svg viewBox="0 0 24 24"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21.2l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg><span class="count" data-n="0">0</span></button>' +
'<button class="act-btn" data-type="save" aria-label="Save"><svg viewBox="0 0 24 24"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg><span class="count" data-n="0">0</span></button>' +
'</div>';
return card;
}
function postNow(){
var text = ta.value.trim();
if(!text) return;
var c = circleMembers();
feedList.insertBefore(newPostCard(text, true), feedList.firstChild);
ta.value = ''; updateCount();
toast('Posted to ' + c.name + ' — ' + (+c.m).toLocaleString('en-US') + ' members can see it.');
}
function schedule(){
var text = ta.value.trim();
if(!text) return;
var when = timeSel.value;
if(when === 'Now'){ postNow(); return; }
var li = document.createElement('li');
li.className = 'q-item';
var span = document.createElement('span'); span.className = 'q-time'; span.textContent = when;
var q = document.createElement('span'); q.className = 'q-text';
q.textContent = text.length > 64 ? text.slice(0,64) + '…' : text;
var del = document.createElement('button'); del.className = 'q-del'; del.textContent = '×';
del.setAttribute('aria-label','Remove scheduled post');
li.appendChild(span); li.appendChild(q); li.appendChild(del);
queueList.insertBefore(li, queueList.firstChild);
ta.value = ''; updateCount();
syncQueue();
toast('Scheduled — goes out ' + when.toLowerCase() + '.');
}
function syncQueue(){
var n = queueList.querySelectorAll('.q-item').length;
queueCount.textContent = n;
queueEmpty.style.display = n === 0 ? 'block' : 'none';
}
queueList.addEventListener('click', function(e){
if(e.target.closest('.q-del')){
e.target.closest('.q-item').remove();
syncQueue();
toast('Removed from your queue.');
}
});
nowBtn.addEventListener('click', postNow);
schedBtn.addEventListener('click', schedule);
/* ---------- load more ---------- */
$('#loadMore').addEventListener('click', function(){
toast("You're all caught up for now — that's the point of a feed with people in it.");
});
/* ---------- join CTAs ---------- */
$$('[data-join]').forEach(function(b){
b.addEventListener('click', function(){
toast('Welcome aboard! Your Murmur invite is on its way to your inbox.');
});
});
$$('.open-room').forEach(function(b){
b.addEventListener('click', function(){
toast('Opening room… (demo — sign in to jump in.)');
});
});
/* ---------- newsletter ---------- */
$('#nlForm').addEventListener('submit', function(e){
e.preventDefault();
var v = $('#nlEmail').value.trim();
if(v.indexOf('@') < 1 || v.indexOf('.') < 0){
toast('Hmm — that email looks off. Give it one more try.');
return;
}
$('#nlEmail').value = '';
toast('Subscribed. The Weekly Signal lands Friday, 7:00 AM — before the noise does.');
});
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:49:44.992Z",
"url": "https://benchmark.aimac.invalid/944594163a4b323a14213870a591af7bcca461ba1ad8d5584cef9c97d4431971.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Murmur home\">",
"target": [
".brand"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Murmur home\">",
"target": [
".brand"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<div class=\"tabs\" role=\"tablist\" aria-label=\"Filter trending\" data-reveal=\"\">",
"target": [
".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": "<span class=\"pulse\" aria-hidden=\"true\"></span>",
"target": [
".live-pill > .pulse[aria-hidden=\"true\"]"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Murmur home\">",
"target": [
".brand"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"tabs\" role=\"tablist\" aria-label=\"Filter trending\" data-reveal=\"\">",
"target": [
".tabs"
]
}
]
},
{
"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=\"tabs\" role=\"tablist\" aria-label=\"Filter trending\" data-reveal=\"\">",
"target": [
".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=\"#top\" aria-label=\"Murmur home\">",
"target": [
".brand"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#top\" aria-label=\"Murmur home\">",
"target": [
".brand"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<span class=\"mask is-in\" style=\"--d:.12s\"><span>finds its</span></span>",
"target": [
".is-in.mask:nth-child(2)"
]
}
]
},
{
"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=\"act-btn\" data-type=\"reply\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 11.5a8.38 8.38 0 0 1-8.5 8.5c-1.4 0-2.8-.3-4-1L3 20l1-5.5c-.7-1.2-1-2.6-1-4A8.38 8.38 0 0 1 11.5 2 8.38 8.38 0 0 1 21 11.5z\"></path></svg><span class=\"count\">312</span></button>",
"target": [
".pinned > .post-actions > .act-btn[data-type=\"reply\"]"
]
}
]
},
{
"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>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"mask\" style=\"margin-top:14px\"><span>Today's conversation<span class=\"dot\">.</span></span></h2>",
"target": [
"#feed > .container > .sec-head > div:nth-child(1) > h2"
]
},
{
"html": "<h3>Who to follow <a href=\"#feed\">See all</a></h3>",
"target": [
".side-card[data-reveal=\"\"]:nth-child(1) > h3"
]
},
{
"html": "<h3>Live now <a href=\"#events\">All rooms</a></h3>",
"target": [
".side-card[data-reveal=\"\"]:nth-child(2) > h3"
]
},
{
"html": "<h3>Suggested circles <a href=\"#communities\">Browse</a></h3>",
"target": [
".side-card[data-reveal=\"\"]:nth-child(3) > h3"
]
},
{
"html": "<h2 class=\"mask\" style=\"margin-top:14px\"><span>Your rooms<span class=\"dot\">.</span></span></h2>",
"target": [
"#messages > .container > .sec-head > div:nth-child(1) > h2"
]
},
{
"html": "<h2 class=\"mask\" style=\"margin-top:14px\"><span>Not an algorithm.<br>A living room<span class=\"dot\">.</span></span></h2>",
"target": [
".comm-sticky > h2"
]
},
{
"html": "<h3>Circles before feeds</h3>",
"target": [
".step[data-reveal=\"\"]:nth-child(1) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Threads stay threaded</h3>",
"target": [
".step[data-reveal=\"\"]:nth-child(2) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Signals you can read</h3>",
"target": [
".step[data-reveal=\"\"]:nth-child(3) > div:nth-child(2) > h3"
]
},
{
"html": "<h3>Gather, not ghost</h3>",
"target": [
".step[data-reveal=\"\"]:nth-child(4) > div:nth-child(2) > h3"
]
},
{
"html": "<h2 class=\"mask\" style=\"margin-top:14px\"><span>What's moving this hour<span class=\"dot\">.</span></span></h2>",
"target": [
"#trending > .container > .sec-head > div:nth-child(1) > h2"
]
},
{
"html": "<h2 class=\"mask\" style=\"margin-top:14px\"><span>Gather, not ghost<span class=\"dot\">.</span></span></h2>",
"target": [
"#events > .container > .sec-head > div > h2"
]
},
{
"html": "<h3>MURMUR IRL \u2014 San Francisco</h3>",
"target": [
".ev-info > h3"
]
},
{
"html": "<h4>Synthwave Open Set</h4>",
"target": [
".ev-small:nth-child(1) > div:nth-child(2) > h4"
]
},
{
"html": "<h4>Analog Collectives \u2014 Portland</h4>",
"target": [
".ev-small:nth-child(2) > div:nth-child(2) > h4"
]
},
{
"html": "<h2 class=\"mask\" style=\"margin-top:14px\"><span>Community, in their words<span class=\"dot\">.</span></span></h2>",
"target": [
"#voices > .container > .sec-head > div:nth-child(1) > h2"
]
},
{
"html": "<h2 class=\"mask\" style=\"margin:14px 0 22px\"><span>Built in San Francisco,<br>tuned worldwide<span class=\"dot\">.</span></span></h2>",
"target": [
".about-copy > h2"
]
},
{
"html": "<h2 class=\"mask\" style=\"margin-top:14px\"><span>Say it. Schedule it.<br>Send it<span class=\"dot\">.</span></span></h2>",
"target": [
".comp-copy > h2"
]
},
{
"html": "<h4>Your queue <span id=\"queueCount\">2</span></h4>",
"target": [
".queue > h4"
]
},
{
"html": "<h2 class=\"mask\" style=\"margin-top:14px\"><span>Questions,<br>answered<span class=\"dot\">.</span></span></h2>",
"target": [
".faq-left > h2"
]
},
{
"html": "<h2 class=\"mask\" style=\"margin-top:22px\"><span>Your frequency<br>is out there<span style=\"color:var(--verm)\">.</span></span></h2>",
"target": [
".container > h2"
]
},
{
"html": "<h4>Product</h4>",
"target": [
".foot-col:nth-child(2) > h4"
]
},
{
"html": "<h4>Company</h4>",
"target": [
".foot-col:nth-child(3) > h4"
]
},
{
"html": "<h4>Support</h4>",
"target": [
".foot-col:nth-child(4) > h4"
]
},
{
"html": "<h4 class=\"foot-col\" style=\"margin-bottom:18px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--paper)\">The Weekly Signal</h4>",
"target": [
".foot-news > .foot-col"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"main\">",
"target": [
"#main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#17130e",
"bgColor": "#f3ede2",
"contrastRatio": 15.86,
"fontSize": "15.8pt (21px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 15.86"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"name\">MURMUR</span>",
"target": [
".brand-txt > .name"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "mainNav",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<nav class=\"main-nav\" id=\"mainNav\" aria-label=\"Primary\">\n <a href=\"#feed\">Feed</a>\n <a href=\"#communities\">Communities</a>\n <a href=\"#trending\">Trending</a>\n <a href=\"#events\">Events</a>\n <a href=\"#messages\">Messages</a>\n <a href=\"#about\">About</a>\n </nav>",
"target": [
"#mainNav"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<select id=\"circleSelect\" aria-label=\"Choose circle\">",
"target": [
"#circleSelect"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://placehold.co/92x92/17130E/FF4B2E?text=M&font=oswald\" alt=\"Murmur logo\" width=\"46\" height=\"46\">",
"target": [
"img[width=\"46\"]"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
},
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<textarea id=\"postText\" maxlength=\"400\" placeholder=\"What is your circle talking about? (400 characters \u2014 make them count)\" aria-label=\"Compose a post\"></textarea>",
"target": [
"#postText"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a class=\"skip\" href=\"#main\">Skip to content</a>",
"target": [
".skip"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"comp-points\" data-reveal=\"\" style=\"--d:.1s\">",
"target": [
".comp-points"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><span><b>Post now</b> \u2014 drops straight into your circle's feed, seen by every member first.</span></li>",
"target": [
".comp-points > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://placehold.co/92x92/17130E/FF4B2E?text=M&font=oswald\" alt=\"Murmur logo\" width=\"46\" height=\"46\">",
"target": [
"img[width=\"46\"]"
]
}
]
},
{
"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 id=\"circleSelect\" aria-label=\"Choose circle\">",
"target": [
"#circleSelect"
]
}
]
},
{
"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": 151.3,
"height": 40.8
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (151.3px by 40.8px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"skip\" href=\"#main\">Skip to content</a>",
"target": [
".skip"
]
}
]
}
],
"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=\"ticker\" aria-label=\"Trending on Murmur\">",
"target": [
".ticker"
],
"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": "#f3ede2",
"bgColor": "#f3ede2",
"contrastRatio": 1,
"fontSize": "64.5pt (86px)",
"fontWeight": "bold",
"messageKey": "equalRatio",
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has a 1:1 contrast ratio with the background"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"stroke-word\" id=\"scrambleWord\" data-text=\"FREQUENCY.\">FREQUENCY.</span>",
"target": [
"#scrambleWord"
],
"failureSummary": "Fix any of the following:\n Element has a 1:1 contrast ratio with the background"
}
]
}
],
"violations": [
{
"id": "aria-required-children",
"impact": "critical",
"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": {
"messageKey": "unallowed",
"values": "button[tabindex]"
},
"relatedNodes": [
{
"html": "<button class=\"tab active\" data-tab=\"all\">All</button>",
"target": [
"button[data-tab=\"all\"]"
]
},
{
"html": "<button class=\"tab\" data-tab=\"music\">Music</button>",
"target": [
"button[data-tab=\"music\"]"
]
},
{
"html": "<button class=\"tab\" data-tab=\"tech\">Tech</button>",
"target": [
"button[data-tab=\"tech\"]"
]
},
{
"html": "<button class=\"tab\" data-tab=\"art\">Art</button>",
"target": [
"button[data-tab=\"art\"]"
]
},
{
"html": "<button class=\"tab\" data-tab=\"food\">Food</button>",
"target": [
"button[data-tab=\"food\"]"
]
}
],
"impact": "critical",
"message": "Element has children which are not allowed: button[tabindex]"
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<div class=\"tabs\" role=\"tablist\" aria-label=\"Filter trending\" data-reveal=\"\">",
"target": [
".tabs"
],
"failureSummary": "Fix any of the following:\n Element has children which are not allowed: button[tabindex]"
}
]
},
{
"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": "#6b665f",
"bgColor": "#17130e",
"contrastRatio": 3.24,
"fontSize": "9.4pt (12.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.24 (foreground color: #6b665f, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"who\">@juno <span>\u00b7 9m</span></div>",
"target": [
".mini-post:nth-child(2) > div > .who"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.24 (foreground color: #6b665f, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6f281a",
"bgColor": "#17130e",
"contrastRatio": 1.75,
"fontSize": "9.4pt (12.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.75 (foreground color: #6f281a, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>\u00b7 9m</span>",
"target": [
".mini-post:nth-child(2) > div > .who > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.75 (foreground color: #6f281a, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#5e5952",
"bgColor": "#17130e",
"contrastRatio": 2.66,
"fontSize": "10.1pt (13.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.66 (foreground color: #5e5952, background color: #17130e, font size: 10.1pt (13.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>300 frames from the meetup. zero edits. #GoldenHour35mm</p>",
"target": [
".mini-post:nth-child(2) > div > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.66 (foreground color: #5e5952, background color: #17130e, font size: 10.1pt (13.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b665f",
"bgColor": "#17130e",
"contrastRatio": 3.24,
"fontSize": "9.4pt (12.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.24 (foreground color: #6b665f, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"who\">@priya <span>\u00b7 14m</span></div>",
"target": [
".mini-post:nth-child(3) > div > .who"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.24 (foreground color: #6b665f, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6f281a",
"bgColor": "#17130e",
"contrastRatio": 1.75,
"fontSize": "9.4pt (12.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.75 (foreground color: #6f281a, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>\u00b7 14m</span>",
"target": [
".mini-post:nth-child(3) > div > .who > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.75 (foreground color: #6f281a, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#5e5952",
"bgColor": "#17130e",
"contrastRatio": 2.66,
"fontSize": "10.1pt (13.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.66 (foreground color: #5e5952, background color: #17130e, font size: 10.1pt (13.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>long-form replies up 3.2\u00d7 this quarter. people did this. no algorithm did.</p>",
"target": [
".mini-post:nth-child(3) > div > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.66 (foreground color: #5e5952, background color: #17130e, font size: 10.1pt (13.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b665f",
"bgColor": "#17130e",
"contrastRatio": 3.24,
"fontSize": "9.4pt (12.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.24 (foreground color: #6b665f, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"who\">@devon <span>\u00b7 21m</span></div>",
"target": [
".mini-post:nth-child(4) > div > .who"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.24 (foreground color: #6b665f, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6f281a",
"bgColor": "#17130e",
"contrastRatio": 1.75,
"fontSize": "9.4pt (12.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.75 (foreground color: #6f281a, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>\u00b7 21m</span>",
"target": [
".mini-post:nth-child(4) > div > .who > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.75 (foreground color: #6f281a, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#5e5952",
"bgColor": "#17130e",
"contrastRatio": 2.66,
"fontSize": "10.1pt (13.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.66 (foreground color: #5e5952, background color: #17130e, font size: 10.1pt (13.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>who else is bringing a dish to the potluck? committing to a very spicy chili. no regrets.</p>",
"target": [
".mini-post:nth-child(4) > div > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.66 (foreground color: #5e5952, background color: #17130e, font size: 10.1pt (13.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b6760",
"bgColor": "#100d09",
"contrastRatio": 3.44,
"fontSize": "10.1pt (13.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<footer class=\"site\">",
"target": [
"footer"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.44 (foreground color: #6b6760, background color: #100d09, font size: 10.1pt (13.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"foot-note\">12,400 READERS \u00b7 UNSUBSCRIBE ANYTIME \u00b7 NO SPAM, EVER</p>",
"target": [
".foot-note"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.44 (foreground color: #6b6760, background color: #100d09, font size: 10.1pt (13.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6b665f",
"bgColor": "#17130e",
"contrastRatio": 3.24,
"fontSize": "9.4pt (12.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.24 (foreground color: #6b665f, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"who\">@mara <span>\u00b7 2m</span></div>",
"target": [
".mini-post:nth-child(1) > div > .who"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.24 (foreground color: #6b665f, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#6f281a",
"bgColor": "#17130e",
"contrastRatio": 1.75,
"fontSize": "9.4pt (12.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.75 (foreground color: #6f281a, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>\u00b7 2m</span>",
"target": [
".mini-post:nth-child(1) > div > .who > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.75 (foreground color: #6f281a, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#5e5952",
"bgColor": "#17130e",
"contrastRatio": 2.66,
"fontSize": "10.1pt (13.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.66 (foreground color: #5e5952, background color: #17130e, font size: 10.1pt (13.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>shipping the new voice threads. latency down 41% and I can finally hear the room before I speak.</p>",
"target": [
".mini-post:nth-child(1) > div > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.66 (foreground color: #5e5952, background color: #17130e, font size: 10.1pt (13.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#f3ede2",
"contrastRatio": 2.86,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">01</span>",
"target": [
".kicker.is-in[data-reveal=\"\"] > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#fbf7ee",
"contrastRatio": 3.11,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"side-card is-in\" data-reveal=\"\">",
"target": [
".side-card.is-in[data-reveal=\"\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.11 (foreground color: #ff4b2e, background color: #fbf7ee, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#feed\">See all</a>",
"target": [
"h3 > a[href$=\"#feed\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.11 (foreground color: #ff4b2e, background color: #fbf7ee, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#fbf7ee",
"contrastRatio": 3.11,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"side-card is-in\" data-reveal=\"\" style=\"--d:.08s\">",
"target": [
".side-card.is-in[data-reveal=\"\"]:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.11 (foreground color: #ff4b2e, background color: #fbf7ee, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#events\">All rooms</a>",
"target": [
"h3 > a[href$=\"#events\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.11 (foreground color: #ff4b2e, background color: #fbf7ee, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#78736b",
"bgColor": "#17130e",
"contrastRatio": 3.92,
"fontSize": "9.4pt (12.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.92 (foreground color: #78736b, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"who\">@priya <span>\u00b7 14m</span></div>",
"target": [
".active.mini-post > div > .who"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.92 (foreground color: #78736b, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7d2c1c",
"bgColor": "#17130e",
"contrastRatio": 1.97,
"fontSize": "9.4pt (12.5px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 1.97 (foreground color: #7d2c1c, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>\u00b7 14m</span>",
"target": [
".active.mini-post > div > .who > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.97 (foreground color: #7d2c1c, background color: #17130e, font size: 9.4pt (12.5px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#69645d",
"bgColor": "#17130e",
"contrastRatio": 3.15,
"fontSize": "10.1pt (13.5px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<aside class=\"room-card is-in\" data-reveal=\"\" style=\"--d:.3s\" aria-label=\"Live from Room 042\">",
"target": [
".room-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.15 (foreground color: #69645d, background color: #17130e, font size: 10.1pt (13.5px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p>long-form replies up 3.2\u00d7 this quarter. people did this. no algorithm did.</p>",
"target": [
".active.mini-post > div > p"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.15 (foreground color: #69645d, background color: #17130e, font size: 10.1pt (13.5px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#fbf7ee",
"contrastRatio": 3.11,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"side-card is-in\" data-reveal=\"\" style=\"--d:.16s\">",
"target": [
".side-card.is-in[data-reveal=\"\"]:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.11 (foreground color: #ff4b2e, background color: #fbf7ee, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#communities\">Browse</a>",
"target": [
"h3 > a[href$=\"#communities\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.11 (foreground color: #ff4b2e, background color: #fbf7ee, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#f3ede2",
"contrastRatio": 2.86,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">01</span>",
"target": [
"#feed > .container > .sec-head > div:nth-child(1) > .kicker.is-in[data-reveal=\"\"] > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#eae2d2",
"contrastRatio": 2.58,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"sec sec-alt\" id=\"messages\">",
"target": [
"#messages"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.58 (foreground color: #ff4b2e, background color: #eae2d2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">02</span>",
"target": [
"#messages > .container > .sec-head > div:nth-child(1) > .kicker.is-in[data-reveal=\"\"] > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.58 (foreground color: #ff4b2e, background color: #eae2d2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#f3ede2",
"contrastRatio": 2.86,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">04</span>",
"target": [
"#trending > .container > .sec-head > div:nth-child(1) > .kicker.is-in[data-reveal=\"\"] > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#f3ede2",
"contrastRatio": 2.86,
"fontSize": "9.8pt (13px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"delta down\">\u25bc \u22128%</span>",
"target": [
".trend-row[data-cat=\"tech\"][title=\"Click to copy hashtag\"]:nth-child(9) > .down.delta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#f3ede2",
"contrastRatio": 2.86,
"fontSize": "9.8pt (13px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"delta down\">\u25bc \u22123%</span>",
"target": [
".trend-row[data-cat=\"art\"][title=\"Click to copy hashtag\"]:nth-child(10) > .down.delta"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#eae2d2",
"contrastRatio": 2.58,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"sec sec-alt\" id=\"events\">",
"target": [
"#events"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.58 (foreground color: #ff4b2e, background color: #eae2d2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">05</span>",
"target": [
"#events > .container > .sec-head > div > .kicker.is-in[data-reveal=\"\"] > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.58 (foreground color: #ff4b2e, background color: #eae2d2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#f3ede2",
"contrastRatio": 2.86,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">06</span>",
"target": [
"#voices > .container > .sec-head > div:nth-child(1) > .kicker.is-in[data-reveal=\"\"] > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#eae2d2",
"contrastRatio": 2.58,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"sec sec-alt\" id=\"about\">",
"target": [
"#about"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.58 (foreground color: #ff4b2e, background color: #eae2d2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">07</span>",
"target": [
".about-copy > .kicker.is-in[data-reveal=\"\"] > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.58 (foreground color: #ff4b2e, background color: #eae2d2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#f3ede2",
"contrastRatio": 2.86,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">08</span>",
"target": [
".comp-copy > .kicker.is-in[data-reveal=\"\"] > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.86 (foreground color: #ff4b2e, background color: #f3ede2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ff4b2e",
"bgColor": "#eae2d2",
"contrastRatio": 2.58,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<section class=\"sec sec-alt\" id=\"faq\">",
"target": [
"#faq"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.58 (foreground color: #ff4b2e, background color: #eae2d2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"num\">09</span>",
"target": [
".faq-left > .kicker.is-in[data-reveal=\"\"] > .num"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.58 (foreground color: #ff4b2e, background color: #eae2d2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 12035
},
{
"y": 576,
"height": 12035
},
{
"y": 1152,
"height": 12035
},
{
"y": 1728,
"height": 12035
},
{
"y": 2304,
"height": 12035
},
{
"y": 2880,
"height": 12035
},
{
"y": 3456,
"height": 12035
},
{
"y": 4032,
"height": 12035
},
{
"y": 4608,
"height": 12035
},
{
"y": 5184,
"height": 12035
},
{
"y": 5760,
"height": 12035
},
{
"y": 6336,
"height": 12035
},
{
"y": 6912,
"height": 12035
},
{
"y": 7488,
"height": 12035
},
{
"y": 8064,
"height": 12035
},
{
"y": 8640,
"height": 12035
},
{
"y": 9216,
"height": 12035
},
{
"y": 9792,
"height": 12035
},
{
"y": 10368,
"height": 12035
},
{
"y": 10944,
"height": 12035
},
{
"y": 11315,
"height": 12035
}
],
"scans": 22,
"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: "Messages", "About", "Events".
- **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: "Event Highlights", "Trending Content", "Featured Posts".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "trending", "hashtag", "algorithm".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Connect", "Create Post", "Subscribe".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Social Media" sector. Ideas similar but not limited to: "content scheduler".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "group recommendations", "live streams", "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.