Qwen Qwen3.7 Plus – Gaming
via Alibaba · Generated
- AIMAC Debt 6.27
- Cost $0.036
- Total Violations 89
- HTML Size 75 KB
- Em Dashes 12
Screenshot
View Live Page
Accessibility Issues Found
89 Serious
-
color-contrast serious 89 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<div class="ticker-label"> <span class="live-dot"></span> BREAKING </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>NexusPlay — Forge Your Legacy. Own the Arena.</title>
<meta name="description" content="NexusPlay is the home of competitive gaming: in-depth reviews, live esports coverage, community-driven clan matching, and the gear that wins championships." />
<style>
:root {
--bg: #0a0a0f;
--surface: #13131b;
--surface-2: #1c1c28;
--surface-3: #232332;
--border: #2a2a3a;
--border-strong: #3a3a52;
--primary: #00e5ff;
--primary-dim: #00b8cc;
--secondary: #ff2d95;
--accent: #a855f7;
--success: #22d39a;
--warning: #ffb020;
--text: #e8e8f0;
--text-dim: #b0b0c0;
--muted: #7a7a8c;
--gradient-hero: linear-gradient(135deg, #00e5ff 0%, #a855f7 50%, #ff2d95 100%);
--gradient-card: linear-gradient(145deg, rgba(0,229,255,0.08), rgba(168,85,247,0.04));
--shadow-lg: 0 20px 60px -20px rgba(0,229,255,0.25);
--shadow-glow: 0 0 40px rgba(0,229,255,0.15);
--radius-sm: 6px;
--radius: 12px;
--radius-lg: 20px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 15% 10%, rgba(0,229,255,0.08), transparent 40%),
radial-gradient(circle at 85% 80%, rgba(255,45,149,0.06), transparent 45%),
radial-gradient(circle at 50% 50%, rgba(168,85,247,0.04), transparent 60%);
pointer-events: none;
z-index: 0;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.container {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 1;
}
/* ===== TOP UTILITY BAR ===== */
.utility-bar {
background: rgba(10,10,15,0.8);
border-bottom: 1px solid var(--border);
font-size: 13px;
color: var(--muted);
backdrop-filter: blur(10px);
}
.utility-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
}
.utility-bar .live-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
}
.live-dot {
width: 8px; height: 8px;
background: var(--secondary);
border-radius: 50%;
box-shadow: 0 0 10px var(--secondary);
animation: pulse 1.6s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
.utility-links { display: flex; gap: 20px; }
.utility-links a:hover { color: var(--primary); }
/* ===== HEADER ===== */
header.main-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(10,10,15,0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
gap: 32px;
}
.logo {
display: flex;
align-items: center;
gap: 14px;
}
.logo-mark {
width: 44px; height: 44px;
background: var(--gradient-hero);
border-radius: 10px;
display: grid;
place-items: center;
font-weight: 900;
color: #0a0a0f;
font-size: 22px;
box-shadow: var(--shadow-glow);
position: relative;
overflow: hidden;
}
.logo-mark::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
animation: shine 3s infinite;
}
@keyframes shine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text .name {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.5px;
background: var(--gradient-hero);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.logo-text .tagline {
font-size: 11px;
color: var(--muted);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-top: 2px;
}
nav.primary-nav ul {
display: flex;
list-style: none;
gap: 4px;
}
nav.primary-nav a {
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
color: var(--text-dim);
border-radius: var(--radius-sm);
transition: all 0.2s;
position: relative;
}
nav.primary-nav a:hover {
color: var(--text);
background: var(--surface-2);
}
nav.primary-nav a.active {
color: var(--primary);
}
nav.primary-nav a.active::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 2px;
background: var(--primary);
border-radius: 2px;
box-shadow: 0 0 8px var(--primary);
}
.header-actions { display: flex; gap: 12px; align-items: center; }
.search-btn {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--surface-2);
border: 1px solid var(--border);
transition: all 0.2s;
}
.search-btn:hover { border-color: var(--primary); color: var(--primary); }
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
font-size: 14px;
font-weight: 600;
border-radius: var(--radius-sm);
transition: all 0.25s;
cursor: pointer;
white-space: nowrap;
}
.btn-primary {
background: var(--gradient-hero);
color: #0a0a0f;
box-shadow: 0 4px 20px rgba(0,229,255,0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0,229,255,0.5);
}
.btn-ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--border-strong);
}
.btn-ghost:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(0,229,255,0.05);
}
.mobile-toggle { display: none; }
/* ===== HERO ===== */
.hero {
padding: 60px 0 80px;
position: relative;
}
.hero-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 48px;
align-items: center;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px;
background: rgba(0,229,255,0.1);
border: 1px solid rgba(0,229,255,0.3);
border-radius: 100px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 24px;
}
.hero h1 {
font-size: clamp(36px, 5vw, 64px);
font-weight: 900;
line-height: 1.05;
letter-spacing: -1.5px;
margin-bottom: 24px;
}
.hero h1 .accent {
background: var(--gradient-hero);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-lead {
font-size: 18px;
color: var(--text-dim);
margin-bottom: 36px;
max-width: 560px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.hero-stat .num {
font-size: 32px;
font-weight: 800;
background: var(--gradient-hero);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
}
.hero-stat .label {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 6px;
}
.hero-visual {
position: relative;
aspect-ratio: 4/5;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-strong);
box-shadow: var(--shadow-lg);
}
.hero-visual img {
width: 100%; height: 100%;
object-fit: cover;
}
.hero-visual::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(10,10,15,0.9) 100%);
}
.hero-visual-card {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
z-index: 2;
padding: 20px;
background: rgba(19,19,27,0.85);
backdrop-filter: blur(12px);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
}
.hero-visual-card .tag {
display: inline-block;
padding: 3px 10px;
background: var(--secondary);
color: white;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
border-radius: 4px;
margin-bottom: 10px;
}
.hero-visual-card h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 6px;
}
.hero-visual-card p {
font-size: 13px;
color: var(--text-dim);
}
/* ===== NEWS TICKER ===== */
.ticker {
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 14px 0;
overflow: hidden;
position: relative;
}
.ticker-label {
position: absolute;
left: 0; top: 0; bottom: 0;
background: var(--secondary);
color: white;
padding: 14px 20px;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
display: flex;
align-items: center;
gap: 8px;
z-index: 2;
}
.ticker-track {
display: flex;
gap: 48px;
padding-left: 180px;
animation: scroll 45s linear infinite;
white-space: nowrap;
}
.ticker-item {
font-size: 14px;
color: var(--text-dim);
display: inline-flex;
align-items: center;
gap: 12px;
}
.ticker-item strong { color: var(--primary); font-weight: 700; }
.ticker-item::before {
content: '◆';
color: var(--muted);
font-size: 8px;
}
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ===== SECTIONS ===== */
section { padding: 80px 0; position: relative; }
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 48px;
gap: 24px;
flex-wrap: wrap;
}
.section-title {
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 800;
letter-spacing: -0.8px;
line-height: 1.1;
}
.section-title .accent {
background: var(--gradient-hero);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section-sub {
color: var(--text-dim);
font-size: 15px;
margin-top: 10px;
max-width: 620px;
}
.section-meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.chip {
padding: 7px 14px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 100px;
font-size: 13px;
color: var(--text-dim);
cursor: pointer;
transition: all 0.2s;
}
.chip:hover, .chip.active {
border-color: var(--primary);
color: var(--primary);
background: rgba(0,229,255,0.05);
}
/* ===== REVIEWS ===== */
.reviews-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.review-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: all 0.3s;
display: flex;
flex-direction: column;
}
.review-card:hover {
transform: translateY(-6px);
border-color: var(--primary);
box-shadow: var(--shadow-lg);
}
.review-card .img-wrap {
aspect-ratio: 16/10;
overflow: hidden;
position: relative;
}
.review-card img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.4s;
}
.review-card:hover img { transform: scale(1.05); }
.review-card .platform {
position: absolute;
top: 12px; left: 12px;
padding: 4px 10px;
background: rgba(10,10,15,0.85);
backdrop-filter: blur(8px);
border: 1px solid var(--border-strong);
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
color: var(--primary);
}
.review-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.review-genre {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 8px;
}
.review-card h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.3;
}
.review-card p {
font-size: 14px;
color: var(--text-dim);
margin-bottom: 16px;
flex: 1;
}
.review-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.score {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
}
.score-num {
font-size: 22px;
font-weight: 800;
color: var(--primary);
}
.score-label {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
}
.verdict {
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.verdict.must { background: rgba(34,211,154,0.15); color: var(--success); }
.verdict.good { background: rgba(0,229,255,0.15); color: var(--primary); }
.verdict.mixed { background: rgba(255,176,32,0.15); color: var(--warning); }
/* ===== ESPORTS HUB ===== */
.esports-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
}
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px;
}
.panel-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
}
.panel-head h3 {
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.panel-head .icon {
width: 32px; height: 32px;
background: var(--gradient-card);
border: 1px solid var(--border-strong);
border-radius: 8px;
display: grid; place-items: center;
color: var(--primary);
}
.panel-link {
font-size: 13px;
color: var(--primary);
font-weight: 600;
}
.panel-link:hover { text-decoration: underline; }
.match-list { display: flex; flex-direction: column; gap: 14px; }
.match {
display: grid;
grid-template-columns: 1fr auto 1fr auto;
align-items: center;
gap: 20px;
padding: 16px 20px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
transition: all 0.2s;
}
.match:hover {
border-color: var(--primary);
background: var(--surface-3);
}
.match-team {
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
font-size: 15px;
}
.match-team.right { justify-content: flex-end; text-align: right; }
.team-logo {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--gradient-card);
border: 1px solid var(--border-strong);
display: grid; place-items: center;
font-weight: 800;
font-size: 14px;
color: var(--primary);
}
.match-vs {
font-size: 12px;
color: var(--muted);
font-weight: 700;
letter-spacing: 2px;
padding: 0 8px;
}
.match-meta {
text-align: right;
font-size: 12px;
color: var(--muted);
}
.match-meta .time {
color: var(--primary);
font-weight: 700;
font-size: 13px;
}
.match.live { border-color: var(--secondary); }
.match.live .match-vs { color: var(--secondary); }
/* Leaderboard */
.leaderboard { display: flex; flex-direction: column; gap: 10px; }
.lb-row {
display: grid;
grid-template-columns: 30px 1fr auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--surface-2);
border-radius: var(--radius-sm);
border: 1px solid transparent;
transition: all 0.2s;
}
.lb-row:hover { border-color: var(--border-strong); }
.lb-rank {
font-weight: 800;
color: var(--muted);
font-size: 14px;
}
.lb-row:nth-child(1) .lb-rank { color: var(--warning); }
.lb-row:nth-child(2) .lb-rank { color: var(--text-dim); }
.lb-row:nth-child(3) .lb-rank { color: #cd7f32; }
.lb-player {
display: flex;
align-items: center;
gap: 10px;
}
.lb-player img {
width: 32px; height: 32px;
border-radius: 50%;
border: 2px solid var(--border-strong);
}
.lb-name { font-weight: 600; font-size: 14px; }
.lb-team { font-size: 11px; color: var(--muted); }
.lb-pts {
font-weight: 700;
color: var(--primary);
font-size: 14px;
}
/* ===== CLAN FINDER ===== */
.clan-section {
background: linear-gradient(135deg, rgba(0,229,255,0.04), rgba(168,85,247,0.04));
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.clan-layout {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 48px;
align-items: start;
}
.clan-intro h2 { margin-bottom: 18px; }
.clan-intro p {
color: var(--text-dim);
margin-bottom: 16px;
font-size: 15px;
}
.clan-features {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 28px;
}
.clan-feature {
display: flex;
gap: 14px;
align-items: flex-start;
}
.clan-feature .icon {
width: 36px; height: 36px;
flex-shrink: 0;
background: var(--surface-2);
border: 1px solid var(--border-strong);
border-radius: 8px;
display: grid; place-items: center;
color: var(--primary);
}
.clan-feature h4 {
font-size: 15px;
font-weight: 700;
margin-bottom: 4px;
}
.clan-feature p {
font-size: 13px;
color: var(--muted);
margin: 0;
}
.clan-finder {
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-lg);
}
.clan-finder h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 6px;
}
.clan-finder .sub {
font-size: 13px;
color: var(--muted);
margin-bottom: 24px;
}
.filter-group {
margin-bottom: 18px;
}
.filter-group label {
display: block;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--muted);
margin-bottom: 10px;
}
.filter-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.filter-opt {
padding: 8px 14px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 100px;
font-size: 13px;
color: var(--text-dim);
cursor: pointer;
transition: all 0.2s;
}
.filter-opt:hover { border-color: var(--primary); color: var(--text); }
.filter-opt.selected {
background: rgba(0,229,255,0.15);
border-color: var(--primary);
color: var(--primary);
font-weight: 600;
}
.clan-results {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
.clan-results-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.clan-results-head h4 {
font-size: 14px;
font-weight: 700;
}
.clan-count {
font-size: 12px;
color: var(--muted);
}
.clan-list {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 320px;
overflow-y: auto;
}
.clan-list::-webkit-scrollbar { width: 6px; }
.clan-list::-webkit-scrollbar-track { background: var(--surface-2); }
.clan-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.clan-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
padding: 14px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
transition: all 0.2s;
}
.clan-card:hover {
border-color: var(--primary);
transform: translateX(4px);
}
.clan-emblem {
width: 44px; height: 44px;
border-radius: 10px;
background: var(--gradient-card);
border: 1px solid var(--border-strong);
display: grid; place-items: center;
font-weight: 800;
color: var(--primary);
font-size: 16px;
}
.clan-info .clan-name {
font-weight: 700;
font-size: 14px;
margin-bottom: 2px;
}
.clan-info .clan-meta {
font-size: 12px;
color: var(--muted);
display: flex;
gap: 10px;
}
.clan-info .clan-meta span::before {
content: '•';
margin-right: 6px;
color: var(--border-strong);
}
.clan-info .clan-meta span:first-child::before { content: ''; margin: 0; }
.clan-join {
padding: 7px 14px;
background: transparent;
border: 1px solid var(--primary);
color: var(--primary);
border-radius: 6px;
font-size: 12px;
font-weight: 600;
transition: all 0.2s;
}
.clan-join:hover {
background: var(--primary);
color: #0a0a0f;
}
.no-results {
text-align: center;
padding: 32px 16px;
color: var(--muted);
font-size: 14px;
}
/* ===== HARDWARE ===== */
.hardware-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.hw-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: all 0.3s;
}
.hw-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: 0 20px 50px -20px rgba(168,85,247,0.3);
}
.hw-img {
aspect-ratio: 16/11;
overflow: hidden;
background: var(--surface-2);
}
.hw-img img { width: 100%; height: 100%; object-fit: cover; }
.hw-body { padding: 24px; }
.hw-category {
font-size: 11px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 700;
margin-bottom: 10px;
}
.hw-card h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.3;
}
.hw-card p {
font-size: 14px;
color: var(--text-dim);
margin-bottom: 18px;
}
.hw-specs {
display: flex;
gap: 16px;
padding: 14px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-bottom: 18px;
}
.hw-spec {
flex: 1;
text-align: center;
}
.hw-spec .val {
font-size: 16px;
font-weight: 800;
color: var(--text);
}
.hw-spec .lbl {
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 2px;
}
.hw-foot {
display: flex;
justify-content: space-between;
align-items: center;
}
.hw-price {
font-size: 22px;
font-weight: 800;
color: var(--text);
}
.hw-price .old {
font-size: 13px;
color: var(--muted);
text-decoration: line-through;
margin-right: 6px;
font-weight: 500;
}
/* ===== TESTIMONIALS ===== */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.testimonial {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px;
position: relative;
transition: all 0.3s;
}
.testimonial:hover {
border-color: var(--border-strong);
transform: translateY(-4px);
}
.testimonial::before {
content: '"';
position: absolute;
top: 10px; right: 24px;
font-size: 80px;
font-family: Georgia, serif;
color: var(--border-strong);
line-height: 1;
}
.testimonial blockquote {
font-size: 15px;
color: var(--text);
line-height: 1.6;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.testimonial-author img {
width: 48px; height: 48px;
border-radius: 50%;
border: 2px solid var(--primary);
}
.author-info .name {
font-weight: 700;
font-size: 14px;
}
.author-info .role {
font-size: 12px;
color: var(--muted);
}
.author-info .team {
font-size: 11px;
color: var(--primary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ===== FAQ ===== */
.faq-wrap {
max-width: 860px;
margin: 0 auto;
}
.faq-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 12px;
overflow: hidden;
transition: all 0.2s;
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-item.open { border-color: var(--primary); }
.faq-q {
width: 100%;
padding: 20px 24px;
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
font-size: 15px;
font-weight: 600;
color: var(--text);
transition: color 0.2s;
}
.faq-q:hover { color: var(--primary); }
.faq-icon {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--surface-2);
display: grid; place-items: center;
font-size: 18px;
color: var(--primary);
transition: transform 0.3s;
flex-shrink: 0;
margin-left: 16px;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item.open .faq-a { max-height: 400px; }
.faq-a-inner {
padding: 0 24px 24px;
color: var(--text-dim);
font-size: 14px;
line-height: 1.7;
}
/* ===== NEWSLETTER ===== */
.newsletter {
padding: 80px 0;
background: linear-gradient(135deg, rgba(0,229,255,0.08), rgba(255,45,149,0.06));
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.newsletter::before {
content: '';
position: absolute;
top: -50%; left: -10%;
width: 60%; height: 200%;
background: radial-gradient(circle, rgba(0,229,255,0.1), transparent 60%);
pointer-events: none;
}
.newsletter-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
position: relative;
}
.newsletter h2 {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 800;
margin-bottom: 16px;
letter-spacing: -0.5px;
}
.newsletter p {
color: var(--text-dim);
font-size: 16px;
margin-bottom: 32px;
}
.newsletter-form {
display: flex;
gap: 10px;
max-width: 520px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 100px;
padding: 6px;
}
.newsletter-form input {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 12px 20px;
color: var(--text);
font-size: 14px;
font-family: inherit;
}
.newsletter-form input::placeholder { color: var(--muted); }
.newsletter-form button {
padding: 12px 28px;
border-radius: 100px;
}
.newsletter-meta {
margin-top: 20px;
font-size: 12px;
color: var(--muted);
}
/* ===== FOOTER ===== */
footer {
background: #06060a;
padding: 80px 0 30px;
border-top: 1px solid var(--border);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 60px;
}
.footer-brand .logo { margin-bottom: 20px; }
.footer-brand p {
color: var(--muted);
font-size: 14px;
margin-bottom: 24px;
max-width: 320px;
}
.social-links {
display: flex;
gap: 10px;
}
.social-links a {
width: 40px; height: 40px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
display: grid; place-items: center;
transition: all 0.2s;
}
.social-links a:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
}
.footer-col h4 {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text);
margin-bottom: 20px;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-col a {
font-size: 14px;
color: var(--muted);
transition: color 0.2s;
}
.footer-col a:hover { color: var(--primary); }
.footer-bottom {
padding-top: 30px;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 13px;
color: var(--muted);
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a:hover { color: var(--text); }
/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
.reviews-grid { grid-template-columns: repeat(2, 1fr); }
.hardware-grid { grid-template-columns: repeat(2, 1fr); }
.testimonials-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-visual { aspect-ratio: 16/10; max-height: 400px; }
.esports-layout { grid-template-columns: 1fr; }
.clan-layout { grid-template-columns: 1fr; }
nav.primary-nav { display: none; }
.mobile-toggle {
display: grid;
place-items: center;
width: 40px; height: 40px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 8px;
}
.header-actions .btn-ghost { display: none; }
}
@media (max-width: 640px) {
section { padding: 60px 0; }
.reviews-grid, .hardware-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.hero-stats { grid-template-columns: 1fr; gap: 16px; }
.match { grid-template-columns: 1fr; text-align: center; gap: 10px; }
.match-team, .match-team.right { justify-content: center; }
.match-meta { text-align: center; }
.newsletter-form { flex-direction: column; border-radius: var(--radius); padding: 12px; }
.newsletter-form input { text-align: center; }
.newsletter-form button { width: 100%; }
.utility-links { display: none; }
.ticker-label { position: static; padding: 8px 16px; }
.ticker-track { padding-left: 20px; }
}
</style>
</head>
<body>
<!-- ===== UTILITY BAR ===== -->
<div class="utility-bar">
<div class="container">
<div class="live-indicator">
<span class="live-dot"></span>
<span>LIVE NOW: NexusPlay Invitational — Finals on Stream</span>
</div>
<div class="utility-links">
<a href="#">Download App</a>
<a href="#">Creator Program</a>
<a href="#">Advertise</a>
<a href="#">Sign In</a>
</div>
</div>
</div>
<!-- ===== HEADER ===== -->
<header class="main-header">
<div class="container">
<div class="header-inner">
<a href="#" class="logo" aria-label="NexusPlay home">
<div class="logo-mark">N</div>
<div class="logo-text">
<span class="name">NexusPlay</span>
<span class="tagline">Forge Your Legacy</span>
</div>
</a>
<nav class="primary-nav" aria-label="Primary">
<ul>
<li><a href="#reviews" class="active">Reviews</a></li>
<li><a href="#esports">Esports</a></li>
<li><a href="#streaming">Streaming</a></li>
<li><a href="#community">Community</a></li>
<li><a href="#hardware">Hardware</a></li>
<li><a href="#guides">Guides</a></li>
<li><a href="#shop">Shop</a></li>
</ul>
</nav>
<div class="header-actions">
<button class="search-btn" aria-label="Search">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</button>
<a href="#" class="btn btn-ghost">Sign In</a>
<a href="#" class="btn btn-primary">Join Free</a>
<button class="mobile-toggle" aria-label="Menu">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
</div>
</div>
</div>
</header>
<!-- ===== HERO ===== -->
<section class="hero">
<div class="container">
<div class="hero-grid">
<div class="hero-content">
<span class="hero-eyebrow">
<span class="live-dot"></span>
Season 7 · Live Coverage
</span>
<h1>
The pulse of <span class="accent">competitive gaming</span>, delivered daily.
</h1>
<p class="hero-lead">
From frame-perfect reviews to championship-stage esports analysis, NexusPlay is where serious players come for the signal in the noise. Expert-written coverage across 40+ titles, live tournament streams, and a community of 2.4 million players who refuse to settle for casual.
</p>
<div class="hero-ctas">
<a href="#esports" class="btn btn-primary">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
Watch Tournament
</a>
<a href="#reviews" class="btn btn-ghost">Browse Reviews</a>
</div>
<div class="hero-stats">
<div class="hero-stat">
<div class="num">2.4M</div>
<div class="label">Active Players</div>
</div>
<div class="hero-stat">
<div class="num">1,240+</div>
<div class="label">Reviews Published</div>
</div>
<div class="hero-stat">
<div class="num">48</div>
<div class="label">Esports Titles</div>
</div>
</div>
</div>
<div class="hero-visual">
<img src="https://picsum.photos/800/1000?grayscale&blur=1" alt="Esports arena stage with dramatic lighting" />
<div class="hero-visual-card">
<span class="tag">● LIVE</span>
<h3>NexusPlay Invitational — Grand Finals</h3>
<p>Team Phantom vs. Solaris Esports · $2M Prize Pool · 342K watching</p>
</div>
</div>
</div>
</div>
</section>
<!-- ===== NEWS TICKER ===== -->
<div class="ticker">
<div class="ticker-label">
<span class="live-dot"></span>
BREAKING
</div>
<div class="ticker-track">
<span class="ticker-item"><strong>VALORANT</strong> Patch 9.04 introduces new agent "Kite" with smoke-based kit</span>
<span class="ticker-item"><strong>LEAGUE</strong> Worlds 2025 locations confirmed: Seoul, Busan, Shanghai</span>
<span class="ticker-item"><strong>CS2</strong> Major Copenhagen qualifiers begin next Monday</span>
<span class="ticker-item"><strong>APEX</strong> Split 2 ranked reset — new mastery tiers revealed</span>
<span class="ticker-item"><strong>OVERWATCH</strong> Blizzard announces 8v8 experimental mode</span>
<span class="ticker-item"><strong>DIABLO IV</strong> Season of Sanctuary DLC launches March 14</span>
<!-- duplicate for seamless loop -->
<span class="ticker-item"><strong>VALORANT</strong> Patch 9.04 introduces new agent "Kite" with smoke-based kit</span>
<span class="ticker-item"><strong>LEAGUE</strong> Worlds 2025 locations confirmed: Seoul, Busan, Shanghai</span>
<span class="ticker-item"><strong>CS2</strong> Major Copenhagen qualifiers begin next Monday</span>
<span class="ticker-item"><strong>APEX</strong> Split 2 ranked reset — new mastery tiers revealed</span>
<span class="ticker-item"><strong>OVERWATCH</strong> Blizzard announces 8v8 experimental mode</span>
<span class="ticker-item"><strong>DIABLO IV</strong> Season of Sanctuary DLC launches March 14</span>
</div>
</div>
<!-- ===== REVIEWS ===== -->
<section id="reviews">
<div class="container">
<div class="section-head">
<div>
<h2 class="section-title">Editor's <span class="accent">Reviews</span></h2>
<p class="section-sub">No affiliate-driven fluff. Our reviews are written by players with 10,000+ hours across the genres they cover. Every score is earned through rigorous testing on retail hardware at native resolution.</p>
</div>
<div class="section-meta">
<span class="chip active">All</span>
<span class="chip">FPS</span>
<span class="chip">RPG</span>
<span class="chip">MOBA</span>
<span class="chip">Strategy</span>
<span class="chip">Indie</span>
</div>
</div>
<div class="reviews-grid">
<article class="review-card">
<div class="img-wrap">
<img src="https://picsum.photos/600/400?random=11" alt="Crimson Horizon gameplay" />
<span class="platform">PC · PS5 · XSX</span>
</div>
<div class="review-body">
<span class="review-genre">Open-World RPG</span>
<h3>Crimson Horizon</h3>
<p>A 90-hour epic that finally delivers on the open-world RPG promise. Combat feels weighty, the skill tree is genuinely deep, and the 60fps performance mode holds up even in dense crowd scenes. The post-launch DLC roadmap looks even stronger than the base game.</p>
<div class="review-footer">
<div class="score">
<span class="score-num">9.2</span>
<span class="score-label">/ 10</span>
</div>
<span class="verdict must">Must Play</span>
</div>
</div>
</article>
<article class="review-card">
<div class="img-wrap">
<img src="https://picsum.photos/600/400?random=22" alt="Ironclad Tactics gameplay" />
<span class="platform">PC · PS5</span>
</div>
<div class="review-body">
<span class="review-genre">Tactical Shooter</span>
<h3>Ironclad Tactics</h3>
<p>Skill-based matchmaking done right. The gunplay is crisp with sub-20ms input latency on wired connections, and the new operator system adds enough asymmetry to keep ranked fresh across seasons. Server stability at launch is a legitimate concern though.</p>
<div class="review-footer">
<div class="score">
<span class="score-num">8.4</span>
<span class="score-label">/ 10</span>
</div>
<span class="verdict good">Great</span>
</div>
</div>
</article>
<article class="review-card">
<div class="img-wrap">
<img src="https://picsum.photos/600/400?random=33" alt="Aetherweave gameplay" />
<span class="platform">PC · Switch 2</span>
</div>
<div class="review-body">
<span class="review-genre">Indie Metroidvania</span>
<h3>Aetherweave</h3>
<p>A hand-drawn masterpiece from a three-person team that punches far above its weight. Map design is tight, the magic system has emergent depth, and the soundtrack alone is worth the price of admission. A strong GOTY contender in the indie category.</p>
<div class="review-footer">
<div class="score">
<span class="score-num">9.0</span>
<span class="score-label">/ 10</span>
</div>
<span class="verdict must">Must Play</span>
</div>
</div>
</article>
<article class="review-card">
<div class="img-wrap">
<img src="https://picsum.photos/600/400?random=44" alt="Starfall Online gameplay" />
<span class="platform">PC · Mobile</span>
</div>
<div class="review-body">
<span class="review-genre">MMORPG</span>
<h3>Starfall Online</h3>
<p>Ambitious in scope, uneven in execution. The 200-player siege warfare is spectacular when it works, but persistent zone-server issues and a pay-to-progress endgame undercut what could have been a generational MMO. Wait for patches before diving in.</p>
<div class="review-footer">
<div class="score">
<span class="score-num">6.8</span>
<span class="score-label">/ 10</span>
</div>
<span class="verdict mixed">Mixed</span>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ===== ESPORTS HUB ===== -->
<section id="esports" style="padding-top: 40px;">
<div class="container">
<div class="section-head">
<div>
<h2 class="section-title">Live <span class="accent">Esports Hub</span></h2>
<p class="section-sub">Real-time match schedules, global leaderboards, and pro-player analysis from our in-house casters. Every major LAN, every regional qualifier, every upset — covered as it happens.</p>
</div>
<a href="#" class="btn btn-ghost">Full Tournament Calendar →</a>
</div>
<div class="esports-layout">
<div class="panel">
<div class="panel-head">
<h3>
<span class="icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
</span>
Today's Matches
</h3>
<a href="#" class="panel-link">View all 24 →</a>
</div>
<div class="match-list">
<div class="match live">
<div class="match-team">
<div class="team-logo">PH</div>
<span>Team Phantom</span>
</div>
<div class="match-vs">LIVE · 14:32</div>
<div class="match-team right">
<span>Solaris</span>
<div class="team-logo">SE</div>
</div>
<div class="match-meta">
<div class="time">● LIVE</div>
<div>VALORANT · Grand Final</div>
</div>
</div>
<div class="match">
<div class="match-team">
<div class="team-logo">NV</div>
<span>Nova Squad</span>
</div>
<div class="match-vs">VS</div>
<div class="match-team right">
<span>Apex Predators</span>
<div class="team-logo">AP</div>
</div>
<div class="match-meta">
<div class="time">18:00 EST</div>
<div>CS2 · Semifinal</div>
</div>
</div>
<div class="match">
<div class="match-team">
<div class="team-logo">KZ</div>
<span>Kzenn Gaming</span>
</div>
<div class="match-vs">VS</div>
<div class="match-team right">
<span>Riftwalkers</span>
<div class="team-logo">RW</div>
</div>
<div class="match-meta">
<div class="time">20:30 EST</div>
<div>League · Lower Bracket</div>
</div>
</div>
<div class="match">
<div class="match-team">
<div class="team-logo">VG</div>
<span>Vanguard</span>
</div>
<div class="match-vs">VS</div>
<div class="match-team right">
<span>Eclipse</span>
<div class="team-logo">EC</div>
</div>
<div class="match-meta">
<div class="time">22:00 EST</div>
<div>Apex · ALGS Championship</div>
</div>
</div>
<div class="match">
<div class="match-team">
<div class="team-logo">OM</div>
<span>Omega Collective</span>
</div>
<div class="match-vs">VS</div>
<div class="match-team right">
<span>Titans United</span>
<div class="team-logo">TU</div>
</div>
<div class="match-meta">
<div class="time">Tomorrow 15:00</div>
<div>Overwatch · OWL Week 8</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-head">
<h3>
<span class="icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>
</span>
Global Leaderboard
</h3>
<a href="#" class="panel-link">View Leaderboard →</a>
</div>
<div class="leaderboard">
<div class="lb-row">
<div class="lb-rank">01</div>
<div class="lb-player">
<img src="https://i.pravatar.cc/64?u=faker" alt="Faker" />
<div>
<div class="lb-name">Faker</div>
<div class="lb-team">T1 · League</div>
</div>
</div>
<div class="lb-pts">14,280</div>
</div>
<div class="lb-row">
<div class="lb-rank">02</div>
<div class="lb-player">
<img src="https://i.pravatar.cc/64?u=tenz" alt="TenZ" />
<div>
<div class="lb-name">TenZ</div>
<div class="lb-team">Sentinels · VALORANT</div>
</div>
</div>
<div class="lb-pts">13,905</div>
</div>
<div class="lb-row">
<div class="lb-rank">03</div>
<div class="lb-player">
<img src="https://i.pravatar.cc/64?u=s1mple" alt="s1mple" />
<div>
<div class="lb-name">s1mple</div>
<div class="lb-team">NAVI · CS2</div>
</div>
</div>
<div class="lb-pts">13,412</div>
</div>
<div class="lb-row">
<div class="lb-rank">04</div>
<div class="lb-player">
<img src="https://i.pravatar.cc/64?u=showmaker" alt="ShowMaker" />
<div>
<div class="lb-name">ShowMaker</div>
<div class="lb-team">DK · League</div>
</div>
</div>
<div class="lb-pts">12,890</div>
</div>
<div class="lb-row">
<div class="lb-rank">05</div>
<div class="lb-player">
<img src="https://i.pravatar.cc/64?u=ace" alt="Ace" />
<div>
<div class="lb-name">Ace</div>
<div class="lb-team">Gen.G · VALORANT</div>
</div>
</div>
<div class="lb-pts">12,540</div>
</div>
<div class="lb-row">
<div class="lb-rank">06</div>
<div class="lb-player">
<img src="https://i.pravatar.cc/64?u=zekken" alt="Zekken" />
<div>
<div class="lb-name">Zekken</div>
<div class="lb-team">100T · Overwatch</div>
</div>
</div>
<div class="lb-pts">12,105</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== CLAN FINDER ===== -->
<section id="community" class="clan-section">
<div class="container">
<div class="clan-layout">
<div class="clan-intro">
<span class="hero-eyebrow" style="margin-bottom: 18px;">Community Tool</span>
<h2 class="section-title">Find your <span class="accent">clan</span>.</h2>
<p>
Solo queue is a lonely road. Our Clan Finder matches you with active, vetted communities based on your game, region, skill bracket, and playstyle preferences. Every clan listed is verified by our moderation team and rated by real members — no ghost towns, no toxicity, no gatekeeping.
</p>
<p>
Whether you're a diamond-ranked support main looking for a scrims-focused squad, or a casual player hunting weekend warriors for co-op campaigns, the right clan changes everything. Average members find a match in under 90 seconds.
</p>
<div class="clan-features">
<div class="clan-feature">
<div class="icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>
</div>
<div>
<h4>Smart matching</h4>
<p>Algorithm weighs schedule overlap, rank proximity, and communication style.</p>
</div>
</div>
<div class="clan-feature">
<div class="icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<div>
<h4>Moderation-first</h4>
<p>Every clan is vetted. Zero-tolerance policy on harassment and cheating.</p>
</div>
</div>
<div class="clan-feature">
<div class="icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<div>
<h4>2.4M members</h4>
<p>Active across 40+ titles and 180+ countries. Someone's waiting for you.</p>
</div>
</div>
</div>
</div>
<div class="clan-finder">
<h3>Clan Finder</h3>
<p class="sub">Pick your preferences — we'll surface the best matches below.</p>
<div class="filter-group">
<label>Game</label>
<div class="filter-options" data-filter="game">
<button class="filter-opt selected" data-value="any">Any</button>
<button class="filter-opt" data-value="valorant">VALORANT</button>
<button class="filter-opt" data-value="league">League</button>
<button class="filter-opt" data-value="cs2">CS2</button>
<button class="filter-opt" data-value="apex">Apex</button>
<button class="filter-opt" data-value="overwatch">Overwatch</button>
</div>
</div>
<div class="filter-group">
<label>Region</label>
<div class="filter-options" data-filter="region">
<button class="filter-opt selected" data-value="any">Any</button>
<button class="filter-opt" data-value="na">NA</button>
<button class="filter-opt" data-value="eu">EU</button>
<button class="filter-opt" data-value="asia">Asia</button>
<button class="filter-opt" data-value="oce">OCE</button>
<button class="filter-opt" data-value="sa">SA</button>
</div>
</div>
<div class="filter-group">
<label>Skill Level</label>
<div class="filter-options" data-filter="skill">
<button class="filter-opt selected" data-value="any">Any</button>
<button class="filter-opt" data-value="casual">Casual</button>
<button class="filter-opt" data-value="competitive">Competitive</button>
<button class="filter-opt" data-value="semi-pro">Semi-Pro</button>
<button class="filter-opt" data-value="pro">Pro / Academy</button>
</div>
</div>
<div class="filter-group">
<label>Playstyle</label>
<div class="filter-options" data-filter="style">
<button class="filter-opt selected" data-value="any">Any</button>
<button class="filter-opt" data-value="scrims">Scrims-focused</button>
<button class="filter-opt" data-value="ranked">Ranked Grind</button>
<button class="filter-opt" data-value="social">Social / Casual</button>
<button class="filter-opt" data-value="coaching">Coaching-led</button>
</div>
</div>
<div class="clan-results">
<div class="clan-results-head">
<h4>Recommended Clans</h4>
<span class="clan-count" id="clan-count">Showing 8 of 8</span>
</div>
<div class="clan-list" id="clan-list">
<!-- populated by JS -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== HARDWARE ===== -->
<section id="hardware">
<div class="container">
<div class="section-head">
<div>
<h2 class="section-title">Gear <span class="accent">that wins</span>.</h2>
<p class="section-sub">Independent hardware reviews tested on retail units with calibrated instruments. We measure input latency, color accuracy, thermal throttling, and acoustic performance — not just read spec sheets.</p>
</div>
<a href="#" class="btn btn-ghost">Full Buyer's Guide →</a>
</div>
<div class="hardware-grid">
<article class="hw-card">
<div class="hw-img">
<img src="https://picsum.photos/600/420?random=55" alt="Phantom X1 monitor" />
</div>
<div class="hw-body">
<span class="hw-category">Gaming Monitor</span>
<h3>Phantom X1 27" OLED</h3>
<p>360Hz QHD-OLED with 0.03ms GtG response. The panel uniformity is reference-grade and the included calibration report actually matches measured delta-E on our unit. The new anti-glare coating is a legitimate improvement over last year's model.</p>
<div class="hw-specs">
<div class="hw-spec">
<div class="val">360Hz</div>
<div class="lbl">Refresh</div>
</div>
<div class="hw-spec">
<div class="val">0.03ms</div>
<div class="lbl">Response</div>
</div>
<div class="hw-spec">
<div class="val">QHD</div>
<div class="lbl">Resolution</div>
</div>
</div>
<div class="hw-foot">
<div class="hw-price"><span class="old">$1,099</span>$899</div>
<a href="#" class="btn btn-ghost">Read Review</a>
</div>
</div>
</article>
<article class="hw-card">
<div class="hw-img">
<img src="https://picsum.photos/600/420?random=66" alt="Vertex Pro controller" />
</div>
<div class="hw-body">
<span class="hw-category">Controller</span>
<h3>Vertex Pro Wireless</h3>
<p>Hall-effect sticks with zero drift after 500 hours of testing. The back paddles are repositioned for natural thumb reach, and the 1000Hz polling rate delivers measurable input improvements in aim-trainers. Battery life hits 42 hours with RGB off.</p>
<div class="hw-specs">
<div class="hw-spec">
<div class="val">1000Hz</div>
<div class="lbl">Polling</div>
</div>
<div class="hw-spec">
<div class="val">42h</div>
<div class="lbl">Battery</div>
</div>
<div class="hw-spec">
<div class="val">68g</div>
<div class="lbl">Weight</div>
</div>
</div>
<div class="hw-foot">
<div class="hw-price">$179</div>
<a href="#" class="btn btn-ghost">Read Review</a>
</div>
</div>
</article>
<article class="hw-card">
<div class="hw-img">
<img src="https://picsum.photos/600/420?random=77" alt="Rift mechanical keyboard" />
</div>
<div class="hw-body">
<span class="hw-category">Keyboard</span>
<h3>Rift 75% Magnetic</h3>
<p>Rapid-trigger magnetic switches with adjustable actuation from 0.2mm to 3.8mm. The gasket-mounted aluminum chassis sounds and feels premium, and the included software actually works without demanding an account. Our new daily driver for competitive FPS.</p>
<div class="hw-specs">
<div class="hw-spec">
<div class="val">8KHz</div>
<div class="lbl">Polling</div>
</div>
<div class="hw-spec">
<div class="val">0.2mm</div>
<div class="lbl">Min Act.</div>
</div>
<div class="hw-spec">
<div class="val">84</div>
<div class="lbl">Keys</div>
</div>
</div>
<div class="hw-foot">
<div class="hw-price"><span class="old">$229</span>$189</div>
<a href="#" class="btn btn-ghost">Read Review</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ===== STREAMING / TESTIMONIALS ===== -->
<section id="streaming" style="padding-top: 40px;">
<div class="container">
<div class="section-head">
<div>
<h2 class="section-title">Trusted by <span class="accent">pros</span>.</h2>
<p class="section-sub">From world champions to rising academy talent, the competitive scene relies on NexusPlay for analysis, preparation, and community. Here's what they're saying.</p>
</div>
</div>
<div class="testimonials-grid">
<div class="testimonial">
<blockquote>
NexusPlay's VOD review breakdowns are genuinely better than what most orgs produce in-house. I've had my analysts reference their CS2 economy round writeups before major LANs. The signal-to-noise ratio on this site is unmatched.
</blockquote>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/96?u=maria" alt="Maria Chen" />
<div class="author-info">
<div class="name">Maria "Valkyrie" Chen</div>
<div class="role">IGL · 3x Major Champion</div>
<div class="team">Team Phantom</div>
</div>
</div>
</div>
<div class="testimonial">
<blockquote>
The clan finder hooked me up with a squad that's now my second family. We went from randoms in Gold to competing in amateur tournaments within six months. The matching algorithm actually gets how important schedule compatibility is.
</blockquote>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/96?u=devon" alt="Devon Park" />
<div class="author-info">
<div class="name">Devon Park</div>
<div class="role">Diamond II · Support Main</div>
<div class="team">Community Member</div>
</div>
</div>
</div>
<div class="testimonial">
<blockquote>
I've been reading game reviews here since beta. The hardware testing methodology is the only one I trust — they actually publish raw latency numbers instead of vague marketing claims. My entire streaming setup is based on their recommendations.
</blockquote>
<div class="testimonial-author">
<img src="https://i.pravatar.cc/96?u=jules" alt="Jules "Streamline" Rivera" />
<div class="author-info">
<div class="name">Jules "Streamline" Rivera</div>
<div class="role">Partnered Streamer · 1.2M followers</div>
<div class="team">Twitch / YouTube</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== FAQ ===== -->
<section id="guides">
<div class="container">
<div class="section-head" style="justify-content: center; text-align: center;">
<div>
<h2 class="section-title">Frequently <span class="accent">asked</span></h2>
<p class="section-sub" style="margin-left: auto; margin-right: auto;">Everything players ask us about reviews, community features, and how we keep things honest.</p>
</div>
</div>
<div class="faq-wrap">
<div class="faq-item">
<button class="faq-q">
How do you prevent affiliate bias in hardware reviews?
<span class="faq-icon">+</span>
</button>
<div class="faq-a">
<div class="faq-a-inner">
We purchase all review units at retail unless explicitly noted otherwise, and our hardware team has no visibility into affiliate revenue. Every monitor is measured with a calibrated colorimeter, every peripheral is logged for input latency with dedicated test rigs, and we publish raw data alongside our scoring. If a sponsored unit ever slips through, our corrections policy requires a public note within 48 hours.
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-q">
Is the Clan Finder really free? What's the catch?
<span class="faq-icon">+</span>
</button>
<div class="faq-a">
<div class="faq-a-inner">
Completely free for players, forever. We monetize through optional premium features for clan leaders (custom branding, advanced analytics, tournament hosting tools) and through the hardware affiliate program you'll see in reviews. Player matching will never be paywalled — that's the whole point of the feature.
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-q">
How are review scores calculated?
<span class="faq-icon">+</span>
</button>
<div class="faq-a">
<div class="faq-a-inner">
Every game is scored by a primary reviewer with 500+ hours in the genre, then independently verified by a second editor who plays a minimum of 15 hours before sign-off. We score across five weighted categories: core gameplay loop (40%), technical performance (20%), content depth (20%), audio-visual presentation (10%), and long-term value (10%). Full rubrics are published on every review page.
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-q">
Can I submit my clan to be listed?
<span class="faq-icon">+</span>
</button>
<div class="faq-a">
<div class="faq-a-inner">
Absolutely. Clan leaders can apply through the dashboard with a minimum of 10 active members and a documented code of conduct. Our moderation team reviews applications within 72 hours and may reach out for a voice interview with leadership. Accepted clans get a public profile, member management tools, and access to our community events calendar.
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-q">
Do you cover esports betting or gambling content?
<span class="faq-icon">+</span>
</button>
<div class="faq-a">
<div class="faq-a-inner">
No. We maintain a strict editorial wall between our esports coverage and any form of betting content. We do not accept advertising from sportsbooks, do not publish odds, and do not partner with prediction platforms. Our esports revenue comes from tournament sponsorships with non-gaming brands, ticketing partnerships, and our premium video package.
</div>
</div>
</div>
<div class="faq-item">
<button class="faq-q">
How do I enter the NexusPlay Championship?
<span class="faq-icon">+</span>
</button>
<div class="faq-a">
<div class="faq-a-inner">
Open qualifiers run four times per year across our supported titles. Any NexusPlay account in good standing can register a solo player or full roster during the open registration window (typically 3 weeks before each qualifier). Top finishers advance to closed regional qualifiers, with the top 8 from each region invited to the LAN finals. Full rules and prize distribution are published on the tournament hub.
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== NEWSLETTER ===== -->
<section class="newsletter">
<div class="container">
<div class="newsletter-inner">
<h2>Get the signal. Skip the noise.</h2>
<p>One weekly digest. The biggest reviews, tournament results, and hardware drops — curated by editors, not algorithms. Join 480,000 players who actually read their gaming newsletter.</p>
<form class="newsletter-form" onsubmit="event.preventDefault(); this.querySelector('button').textContent='Subscribed ✓'; this.querySelector('input').value='';">
<input type="email" placeholder="your@email.com" required />
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
<p class="newsletter-meta">No spam. Unsubscribe anytime. We respect your inbox like we respect your rank.</p>
</div>
</div>
</section>
<!-- ===== FOOTER ===== -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="#" class="logo">
<div class="logo-mark">N</div>
<div class="logo-text">
<span class="name">NexusPlay</span>
<span class="tagline">Forge Your Legacy</span>
</div>
</a>
<p>The home of competitive gaming. Independent reviews, live esports coverage, and a community built for players who take the game seriously.</p>
<div class="social-links">
<a href="#" aria-label="Twitter">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="#" aria-label="Twitch">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M6.937 20.455H3.813l-2.184-3.9V2.25h19.032v13.05l-5.478 5.155h-4.374l-2.436 2.436h-2.436l2.436-2.436zM5.25 3.886v14.67l3.123 3.123h3.123l2.436-2.436h3.886l4.686-4.395V3.886H5.25zm12.464 9.336h-2.34v4.395h-2.34v-4.395h-2.34l3.51-3.51h3.51v3.51z"/></svg>
</a>
<a href="#" aria-label="YouTube">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
</a>
<a href="#" aria-label="Discord">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
</a>
<a href="#" aria-label="Instagram">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
</a>
</div>
</div>
<div class="footer-col">
<h4>Content</h4>
<ul>
<li><a href="#">Game Reviews</a></li>
<li><a href="#">Hardware Reviews</a></li>
<li><a href="#">Guides & Builds</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Video Essays</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Esports</h4>
<ul>
<li><a href="#">Tournaments</a></li>
<li><a href="#">Leaderboards</a></li>
<li><a href="#">Team Profiles</a></li>
<li><a href="#">Watch Live</a></li>
<li><a href="#">Enter Contest</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Community</h4>
<ul>
<li><a href="#">Clan Finder</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Creator Program</a></li>
<li><a href="#">Events Calendar</a></li>
<li><a href="#">Discord Server</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Company</h4>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Editorial Standards</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press Kit</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div>© <span id="year"></span> NexusPlay Media Inc. · 548 Market St, Suite 2048, San Francisco, CA 94104 · hello@nexusplay.gg</div>
<div class="footer-legal">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Settings</a>
<a href="#">Accessibility</a>
</div>
</div>
</div>
</footer>
<script>
// ===== Current year =====
document.getElementById('year').textContent = new Date().getFullYear();
// ===== FAQ accordion =====
document.querySelectorAll('.faq-q').forEach(btn => {
btn.addEventListener('click', () => {
const item = btn.parentElement;
const wasOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
if (!wasOpen) item.classList.add('open');
});
});
// ===== Filter chips (reviews) =====
document.querySelectorAll('.section-meta .chip').forEach(chip => {
chip.addEventListener('click', () => {
chip.parentElement.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
chip.classList.add('active');
});
});
// ===== Clan Finder =====
const clans = [
{ name: "Phantom Vanguard", emblem: "PV", game: "valorant", region: "na", skill: "competitive", style: "scrims", members: 12, rank: "Immortal avg" },
{ name: "Neon Ronin", emblem: "NR", game: "valorant", region: "na", skill: "competitive", style: "ranked", members: 8, rank: "Ascendant+" },
{ name: "Solaris Collective", emblem: "SC", game: "league", region: "eu", skill: "semi-pro", style: "scrims", members: 15, rank: "Diamond I+" },
{ name: "Riftwalkers", emblem: "RW", game: "league", region: "na", skill: "competitive", style: "coaching", members: 10, rank: "Emerald+" },
{ name: "Iron Sight", emblem: "IS", game: "cs2", region: "eu", skill: "semi-pro", style: "scrims", members: 14, rank: "Faceit Lvl 9+" },
{ name: "Apex Predators EU", emblem: "AE", game: "apex", region: "eu", skill: "competitive", style: "ranked", members: 9, rank: "Master+" },
{ name: "Lunar Coyotes", emblem: "LC", game: "overwatch", region: "na", skill: "competitive", style: "scrims", members: 11, rank: "Diamond+" },
{ name: "Casual Legends", emblem: "CL", game: "any", region: "any", skill: "casual", style: "social", members: 42, rank: "All ranks welcome" },
{ name: "Academy Rising", emblem: "AR", game: "valorant", region: "na", skill: "pro", style: "scrims", members: 6, rank: "Radiant track" },
{ name: "Tokyo Drift", emblem: "TD", game: "valorant", region: "asia", skill: "competitive", style: "ranked", members: 10, rank: "Immortal avg" },
{ name: "Outback Ops", emblem: "OO", game: "cs2", region: "oce", skill: "competitive", style: "scrims", members: 8, rank: "Faceit Lvl 8+" },
{ name: "Paulista Gamers", emblem: "PG", game: "league", region: "sa", skill: "casual", style: "social", members: 28, rank: "All ranks" },
{ name: "Berlin Bruisers", emblem: "BB", game: "overwatch", region: "eu", skill: "semi-pro", style: "coaching", members: 12, rank: "GM+" },
{ name: "Seoul Strikers", emblem: "SS", game: "league", region: "asia", skill: "pro", style: "scrims", members: 7, rank: "Challengers track" }
];
const filters = { game: 'any', region: 'any', skill: 'any', style: 'any' };
const clanList = document.getElementById('clan-list');
const clanCount = document.getElementById('clan-count');
function renderClans() {
const filtered = clans.filter(c =>
(filters.game === 'any' || c.game === filters.game || c.game === 'any') &&
(filters.region === 'any' || c.region === filters.region || c.region === 'any') &&
(filters.skill === 'any' || c.skill === filters.skill) &&
(filters.style === 'any' || c.style === filters.style || c.style === 'social')
);
clanCount.textContent = `Showing ${filtered.length} of ${clans.length}`;
if (filtered.length === 0) {
clanList.innerHTML = '<div class="no-results">No clans match your filters. Try broadening your search.</div>';
return;
}
clanList.innerHTML = filtered.map(c => `
<div class="clan-card">
<div class="clan-emblem">${c.emblem}</div>
<div class="clan-info">
<div class="clan-name">${c.name}</div>
<div class="clan-meta">
<span>${c.members} members</span>
<span>${c.rank}</span>
<span>${c.game.toUpperCase()} · ${c.region.toUpperCase()}</span>
</div>
</div>
<button class="clan-join">Request Join</button>
</div>
`).join('');
}
document.querySelectorAll('.filter-options').forEach(group => {
const filterKey = group.dataset.filter;
group.querySelectorAll('.filter-opt').forEach(opt => {
opt.addEventListener('click', () => {
group.querySelectorAll('.filter-opt').forEach(o => o.classList.remove('selected'));
opt.classList.add('selected');
filters[filterKey] = opt.dataset.value;
renderClans();
});
});
});
renderClans();
</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:43:02.709Z",
"url": "https://benchmark.aimac.invalid/5e93d20ab0ad775ba8364bbbbc7bca2f85dfd20995ac2c7e964f3d74183f4c1f.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-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": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-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": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-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": []
},
{
"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": "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": []
},
{
"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": "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": []
},
{
"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 href=\"#\" class=\"logo\" aria-label=\"NexusPlay home\">\n <div class=\"logo-mark\">N</div>\n <div class=\"logo-text\">\n <span class=\"name\">NexusPlay</span>\n <span class=\"tagline\">Forge Your Legacy</span>\n </div>\n </a>",
"target": [
"a[aria-label=\"NexusPlay home\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"logo\" aria-label=\"NexusPlay home\">\n <div class=\"logo-mark\">N</div>\n <div class=\"logo-text\">\n <span class=\"name\">NexusPlay</span>\n <span class=\"tagline\">Forge Your Legacy</span>\n </div>\n </a>",
"target": [
"a[aria-label=\"NexusPlay home\"]"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"logo\" aria-label=\"NexusPlay home\">\n <div class=\"logo-mark\">N</div>\n <div class=\"logo-text\">\n <span class=\"name\">NexusPlay</span>\n <span class=\"tagline\">Forge Your Legacy</span>\n </div>\n </a>",
"target": [
"a[aria-label=\"NexusPlay home\"]"
]
}
]
},
{
"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 href=\"#\" class=\"logo\" aria-label=\"NexusPlay home\">\n <div class=\"logo-mark\">N</div>\n <div class=\"logo-text\">\n <span class=\"name\">NexusPlay</span>\n <span class=\"tagline\">Forge Your Legacy</span>\n </div>\n </a>",
"target": [
"a[aria-label=\"NexusPlay home\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"logo\" aria-label=\"NexusPlay home\">\n <div class=\"logo-mark\">N</div>\n <div class=\"logo-text\">\n <span class=\"name\">NexusPlay</span>\n <span class=\"tagline\">Forge Your Legacy</span>\n </div>\n </a>",
"target": [
"a[aria-label=\"NexusPlay home\"]"
]
}
]
},
{
"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": "<section id=\"esports\" style=\"padding-top: 40px;\">",
"target": [
"#esports"
]
}
]
},
{
"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": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"search-btn\" aria-label=\"Search\">",
"target": [
".search-btn"
]
}
]
},
{
"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>\n The pulse of <span class=\"accent\">competitive gaming</span>, delivered daily.\n </h1>",
"target": [
"h1"
]
},
{
"html": "<h3>NexusPlay Invitational \u2014 Grand Finals</h3>",
"target": [
".hero-visual-card > h3"
]
},
{
"html": "<h2 class=\"section-title\">Editor's <span class=\"accent\">Reviews</span></h2>",
"target": [
"#reviews > .container > .section-head > div:nth-child(1) > .section-title"
]
},
{
"html": "<h3>Crimson Horizon</h3>",
"target": [
".review-card:nth-child(1) > .review-body > h3"
]
},
{
"html": "<h3>Ironclad Tactics</h3>",
"target": [
".review-card:nth-child(2) > .review-body > h3"
]
},
{
"html": "<h3>Aetherweave</h3>",
"target": [
".review-card:nth-child(3) > .review-body > h3"
]
},
{
"html": "<h3>Starfall Online</h3>",
"target": [
".review-card:nth-child(4) > .review-body > h3"
]
},
{
"html": "<h2 class=\"section-title\">Live <span class=\"accent\">Esports Hub</span></h2>",
"target": [
"#esports > .container > .section-head > div > .section-title"
]
},
{
"html": "<h3>",
"target": [
".panel:nth-child(1) > .panel-head > h3"
]
},
{
"html": "<h3>",
"target": [
".panel:nth-child(2) > .panel-head > h3"
]
},
{
"html": "<h2 class=\"section-title\">Find your <span class=\"accent\">clan</span>.</h2>",
"target": [
".clan-intro > .section-title"
]
},
{
"html": "<h4>Smart matching</h4>",
"target": [
".clan-feature:nth-child(1) > div:nth-child(2) > h4"
]
},
{
"html": "<h4>Moderation-first</h4>",
"target": [
".clan-feature:nth-child(2) > div:nth-child(2) > h4"
]
},
{
"html": "<h4>2.4M members</h4>",
"target": [
".clan-feature:nth-child(3) > div:nth-child(2) > h4"
]
},
{
"html": "<h3>Clan Finder</h3>",
"target": [
".clan-finder > h3"
]
},
{
"html": "<h4>Recommended Clans</h4>",
"target": [
".clan-results-head > h4"
]
},
{
"html": "<h2 class=\"section-title\">Gear <span class=\"accent\">that wins</span>.</h2>",
"target": [
"#hardware > .container > .section-head > div > .section-title"
]
},
{
"html": "<h3>Phantom X1 27\" OLED</h3>",
"target": [
".hw-card:nth-child(1) > .hw-body > h3"
]
},
{
"html": "<h3>Vertex Pro Wireless</h3>",
"target": [
".hw-card:nth-child(2) > .hw-body > h3"
]
},
{
"html": "<h3>Rift 75% Magnetic</h3>",
"target": [
".hw-card:nth-child(3) > .hw-body > h3"
]
},
{
"html": "<h2 class=\"section-title\">Trusted by <span class=\"accent\">pros</span>.</h2>",
"target": [
"#streaming > .container > .section-head > div > .section-title"
]
},
{
"html": "<h2 class=\"section-title\">Frequently <span class=\"accent\">asked</span></h2>",
"target": [
"#guides > .container > .section-head > div > .section-title"
]
},
{
"html": "<h2>Get the signal. Skip the noise.</h2>",
"target": [
".newsletter-inner > h2"
]
},
{
"html": "<h4>Content</h4>",
"target": [
".footer-col:nth-child(2) > h4"
]
},
{
"html": "<h4>Esports</h4>",
"target": [
".footer-col:nth-child(3) > h4"
]
},
{
"html": "<h4>Community</h4>",
"target": [
".footer-col:nth-child(4) > h4"
]
},
{
"html": "<h4>Company</h4>",
"target": [
".footer-col:nth-child(5) > h4"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"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": "#7a7a8c",
"bgColor": "#0a0a0f",
"contrastRatio": 4.69,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 4.69"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span>LIVE NOW: NexusPlay Invitational \u2014 Finals on Stream</span>",
"target": [
".live-indicator > span:nth-child(2)"
]
}
]
},
{
"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": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"email\" placeholder=\"your@email.com\" required=\"\">",
"target": [
"input"
]
}
]
},
{
"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://picsum.photos/800/1000?grayscale&blur=1\" alt=\"Esports arena stage with dramatic lighting\">",
"target": [
".hero-visual > img"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"email\" placeholder=\"your@email.com\" required=\"\">",
"target": [
"input"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#\">Download App</a>",
"target": [
".utility-links > a[href=\"#\"]:nth-child(1)"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul>",
"target": [
"nav > ul"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li><a href=\"#reviews\" class=\"active\">Reviews</a></li>",
"target": [
"nav > ul > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"search-btn\" aria-label=\"Search\">",
"target": [
".search-btn"
]
}
]
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element contains focusable elements"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"clan-list\" id=\"clan-list\">",
"target": [
"#clan-list"
]
}
]
},
{
"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-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\">Download App</a>",
"target": [
".utility-links > a[href=\"#\"]:nth-child(1)"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fontSize": "16.5pt (22px)",
"fontWeight": "bold",
"messageKey": "pseudoContent",
"expectedContrastRatio": "3:1"
},
"relatedNodes": [
{
"html": "<div class=\"logo-mark\">N</div>",
"target": [
"a[aria-label=\"NexusPlay home\"] > .logo-mark"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a pseudo element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"logo-mark\">N</div>",
"target": [
"a[aria-label=\"NexusPlay home\"] > .logo-mark"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a pseudo element"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#ff2d95",
"contrastRatio": 3.46,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"ticker-label\">\n <span class=\"live-dot\"></span>\n BREAKING\n </div>",
"target": [
".ticker-label"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 3.46 (foreground color: #ffffff, background color: #ff2d95, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"ticker-label\">\n <span class=\"live-dot\"></span>\n BREAKING\n </div>",
"target": [
".ticker-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.46 (foreground color: #ffffff, background color: #ff2d95, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"review-card\">",
"target": [
".review-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"review-genre\">Open-World RPG</span>",
"target": [
".review-card:nth-child(1) > .review-body > .review-genre"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"review-card\">",
"target": [
".review-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"score-label\">/ 10</span>",
"target": [
".review-card:nth-child(1) > .review-body > .review-footer > .score > .score-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"review-card\">",
"target": [
".review-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"review-genre\">Tactical Shooter</span>",
"target": [
".review-card:nth-child(2) > .review-body > .review-genre"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"review-card\">",
"target": [
".review-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"score-label\">/ 10</span>",
"target": [
".review-card:nth-child(2) > .review-body > .review-footer > .score > .score-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"review-card\">",
"target": [
".review-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"review-genre\">Indie Metroidvania</span>",
"target": [
".review-card:nth-child(3) > .review-body > .review-genre"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"review-card\">",
"target": [
".review-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"score-label\">/ 10</span>",
"target": [
".review-card:nth-child(3) > .review-body > .review-footer > .score > .score-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"review-card\">",
"target": [
".review-card:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"review-genre\">MMORPG</span>",
"target": [
".review-card:nth-child(4) > .review-body > .review-genre"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "8.3pt (11px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"review-card\">",
"target": [
".review-card:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"score-label\">/ 10</span>",
"target": [
".review-card:nth-child(4) > .review-body > .review-footer > .score > .score-label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"match live\">",
"target": [
".live"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div>VALORANT \u00b7 Grand Final</div>",
"target": [
".live > .match-meta > div:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"match\">",
"target": [
".match:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"match-vs\">VS</div>",
"target": [
".match:nth-child(2) > .match-vs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"match\">",
"target": [
".match:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div>CS2 \u00b7 Semifinal</div>",
"target": [
".match:nth-child(2) > .match-meta > div:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"match\">",
"target": [
".match:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"match-vs\">VS</div>",
"target": [
".match:nth-child(3) > .match-vs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"match\">",
"target": [
".match:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div>League \u00b7 Lower Bracket</div>",
"target": [
".match:nth-child(3) > .match-meta > div:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"match\">",
"target": [
".match:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"match-vs\">VS</div>",
"target": [
".match:nth-child(4) > .match-vs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"match\">",
"target": [
".match:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div>Apex \u00b7 ALGS Championship</div>",
"target": [
".match:nth-child(4) > .match-meta > div:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"match\">",
"target": [
".match:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"match-vs\">VS</div>",
"target": [
".match:nth-child(5) > .match-vs"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"match\">",
"target": [
".match:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div>Overwatch \u00b7 OWL Week 8</div>",
"target": [
".match:nth-child(5) > .match-meta > div:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"lb-row\">",
"target": [
".lb-row:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lb-team\">T1 \u00b7 League</div>",
"target": [
".lb-row:nth-child(1) > .lb-player > div > .lb-team"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"lb-row\">",
"target": [
".lb-row:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lb-team\">Sentinels \u00b7 VALORANT</div>",
"target": [
".lb-row:nth-child(2) > .lb-player > div > .lb-team"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"lb-row\">",
"target": [
".lb-row:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lb-team\">NAVI \u00b7 CS2</div>",
"target": [
".lb-row:nth-child(3) > .lb-player > div > .lb-team"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "10.5pt (14px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"lb-row\">",
"target": [
".lb-row:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lb-rank\">04</div>",
"target": [
".lb-row:nth-child(4) > .lb-rank"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"lb-row\">",
"target": [
".lb-row:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lb-team\">DK \u00b7 League</div>",
"target": [
".lb-row:nth-child(4) > .lb-player > div > .lb-team"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "10.5pt (14px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"lb-row\">",
"target": [
".lb-row:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lb-rank\">05</div>",
"target": [
".lb-row:nth-child(5) > .lb-rank"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"lb-row\">",
"target": [
".lb-row:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lb-team\">Gen.G \u00b7 VALORANT</div>",
"target": [
".lb-row:nth-child(5) > .lb-player > div > .lb-team"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "10.5pt (14px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"lb-row\">",
"target": [
".lb-row:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lb-rank\">06</div>",
"target": [
".lb-row:nth-child(6) > .lb-rank"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"lb-row\">",
"target": [
".lb-row:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lb-team\">100T \u00b7 Overwatch</div>",
"target": [
".lb-row:nth-child(6) > .lb-player > div > .lb-team"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-finder\">",
"target": [
".clan-finder"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<p class=\"sub\">Pick your preferences \u2014 we'll surface the best matches below.</p>",
"target": [
".sub"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-finder\">",
"target": [
".clan-finder"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label>Game</label>",
"target": [
".filter-group:nth-child(3) > label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-finder\">",
"target": [
".clan-finder"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label>Region</label>",
"target": [
".filter-group:nth-child(4) > label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-finder\">",
"target": [
".clan-finder"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label>Skill Level</label>",
"target": [
".filter-group:nth-child(5) > label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-finder\">",
"target": [
".clan-finder"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<label>Playstyle</label>",
"target": [
".filter-group:nth-child(6) > label"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-finder\">",
"target": [
".clan-finder"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"clan-count\" id=\"clan-count\">Showing 14 of 14</span>",
"target": [
"#clan-count"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>12 members</span>",
"target": [
".clan-card:nth-child(1) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Immortal avg</span>",
"target": [
".clan-card:nth-child(1) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>VALORANT \u00b7 NA</span>",
"target": [
".clan-card:nth-child(1) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>8 members</span>",
"target": [
".clan-card:nth-child(2) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Ascendant+</span>",
"target": [
".clan-card:nth-child(2) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>VALORANT \u00b7 NA</span>",
"target": [
".clan-card:nth-child(2) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>15 members</span>",
"target": [
".clan-card:nth-child(3) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Diamond I+</span>",
"target": [
".clan-card:nth-child(3) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>LEAGUE \u00b7 EU</span>",
"target": [
".clan-card:nth-child(3) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>10 members</span>",
"target": [
".clan-card:nth-child(4) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Emerald+</span>",
"target": [
".clan-card:nth-child(4) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(4)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>LEAGUE \u00b7 NA</span>",
"target": [
".clan-card:nth-child(4) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>14 members</span>",
"target": [
".clan-card:nth-child(5) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Faceit Lvl 9+</span>",
"target": [
".clan-card:nth-child(5) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(5)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>CS2 \u00b7 EU</span>",
"target": [
".clan-card:nth-child(5) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>9 members</span>",
"target": [
".clan-card:nth-child(6) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Master+</span>",
"target": [
".clan-card:nth-child(6) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(6)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>APEX \u00b7 EU</span>",
"target": [
".clan-card:nth-child(6) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(7)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>11 members</span>",
"target": [
".clan-card:nth-child(7) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(7)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Diamond+</span>",
"target": [
".clan-card:nth-child(7) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(7)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>OVERWATCH \u00b7 NA</span>",
"target": [
".clan-card:nth-child(7) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(8)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>42 members</span>",
"target": [
".clan-card:nth-child(8) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(8)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>All ranks welcome</span>",
"target": [
".clan-card:nth-child(8) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(8)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>ANY \u00b7 ANY</span>",
"target": [
".clan-card:nth-child(8) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(9)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>6 members</span>",
"target": [
".clan-card:nth-child(9) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(9)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Radiant track</span>",
"target": [
".clan-card:nth-child(9) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(9)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>VALORANT \u00b7 NA</span>",
"target": [
".clan-card:nth-child(9) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(10)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>10 members</span>",
"target": [
".clan-card:nth-child(10) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(10)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Immortal avg</span>",
"target": [
".clan-card:nth-child(10) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(10)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>VALORANT \u00b7 ASIA</span>",
"target": [
".clan-card:nth-child(10) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(11)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>8 members</span>",
"target": [
".clan-card:nth-child(11) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(11)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Faceit Lvl 8+</span>",
"target": [
".clan-card:nth-child(11) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(11)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>CS2 \u00b7 OCE</span>",
"target": [
".clan-card:nth-child(11) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(12)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>28 members</span>",
"target": [
".clan-card:nth-child(12) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(12)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>All ranks</span>",
"target": [
".clan-card:nth-child(12) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(12)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>LEAGUE \u00b7 SA</span>",
"target": [
".clan-card:nth-child(12) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(13)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>12 members</span>",
"target": [
".clan-card:nth-child(13) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(13)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>GM+</span>",
"target": [
".clan-card:nth-child(13) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(13)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>OVERWATCH \u00b7 EU</span>",
"target": [
".clan-card:nth-child(13) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(14)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>7 members</span>",
"target": [
".clan-card:nth-child(14) > .clan-info > .clan-meta > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(14)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>Challengers track</span>",
"target": [
".clan-card:nth-child(14) > .clan-info > .clan-meta > span:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#1c1c28",
"contrastRatio": 4,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"clan-card\">",
"target": [
".clan-card:nth-child(14)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>LEAGUE \u00b7 ASIA</span>",
"target": [
".clan-card:nth-child(14) > .clan-info > .clan-meta > span:nth-child(3)"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4 (foreground color: #7a7a8c, background color: #1c1c28, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"hw-card\">",
"target": [
".hw-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lbl\">Refresh</div>",
"target": [
".hw-card:nth-child(1) > .hw-body > .hw-specs > .hw-spec:nth-child(1) > .lbl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"hw-card\">",
"target": [
".hw-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lbl\">Response</div>",
"target": [
".hw-card:nth-child(1) > .hw-body > .hw-specs > .hw-spec:nth-child(2) > .lbl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"hw-card\">",
"target": [
".hw-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lbl\">Resolution</div>",
"target": [
".hw-card:nth-child(1) > .hw-body > .hw-specs > .hw-spec:nth-child(3) > .lbl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"hw-card\">",
"target": [
".hw-card:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"old\">$1,099</span>",
"target": [
".hw-card:nth-child(1) > .hw-body > .hw-foot > .hw-price > .old"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"hw-card\">",
"target": [
".hw-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lbl\">Polling</div>",
"target": [
".hw-card:nth-child(2) > .hw-body > .hw-specs > .hw-spec:nth-child(1) > .lbl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"hw-card\">",
"target": [
".hw-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lbl\">Battery</div>",
"target": [
".hw-card:nth-child(2) > .hw-body > .hw-specs > .hw-spec:nth-child(2) > .lbl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"hw-card\">",
"target": [
".hw-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lbl\">Weight</div>",
"target": [
".hw-card:nth-child(2) > .hw-body > .hw-specs > .hw-spec:nth-child(3) > .lbl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"hw-card\">",
"target": [
".hw-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lbl\">Polling</div>",
"target": [
".hw-card:nth-child(3) > .hw-body > .hw-specs > .hw-spec:nth-child(1) > .lbl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"hw-card\">",
"target": [
".hw-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lbl\">Min Act.</div>",
"target": [
".hw-card:nth-child(3) > .hw-body > .hw-specs > .hw-spec:nth-child(2) > .lbl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "7.5pt (10px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"hw-card\">",
"target": [
".hw-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"lbl\">Keys</div>",
"target": [
".hw-card:nth-child(3) > .hw-body > .hw-specs > .hw-spec:nth-child(3) > .lbl"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"hw-card\">",
"target": [
".hw-card:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"old\">$229</span>",
"target": [
".hw-card:nth-child(3) > .hw-body > .hw-foot > .hw-price > .old"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial\">",
"target": [
".testimonial:nth-child(1)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"role\">IGL \u00b7 3x Major Champion</div>",
"target": [
".testimonial:nth-child(1) > .testimonial-author > .author-info > .role"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial\">",
"target": [
".testimonial:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"role\">Diamond II \u00b7 Support Main</div>",
"target": [
".testimonial:nth-child(2) > .testimonial-author > .author-info > .role"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#7a7a8c",
"bgColor": "#13131b",
"contrastRatio": 4.39,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"testimonial\">",
"target": [
".testimonial:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"role\">Partnered Streamer \u00b7 1.2M followers</div>",
"target": [
".testimonial:nth-child(3) > .testimonial-author > .author-info > .role"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.39 (foreground color: #7a7a8c, background color: #13131b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 7062
},
{
"y": 576,
"height": 7062
},
{
"y": 1152,
"height": 7062
},
{
"y": 1728,
"height": 7062
},
{
"y": 2304,
"height": 7062
},
{
"y": 2880,
"height": 7062
},
{
"y": 3456,
"height": 7062
},
{
"y": 4032,
"height": 7062
},
{
"y": 4608,
"height": 7062
},
{
"y": 5184,
"height": 7062
},
{
"y": 5760,
"height": 7062
},
{
"y": 6336,
"height": 7062
},
{
"y": 6342,
"height": 7062
}
],
"scans": 14,
"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 "Gaming" 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: "Gaming"
- Description: Video games, esports news, game reviews, and online gaming communities.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Gaming" 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: "Reviews", "Streaming", "Community".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Gaming" category. Consider themes similar to: "Player Profiles", "Gaming Hardware", "Game Reviews".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "DLC", "skill-based matchmaking", "framerate".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Watch Tournament", "Enter Contest", "View Leaderboard".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Gaming" sector. Ideas similar but not limited to: "clan finder".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "tournament results", "editor picks", "community clips".
- **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.