OpenAI GPT 6 Luna Pro – Gaming
via OpenAI · Generated
- AIMAC Debt 0.00
- Cost $0.015
- Total Violations 0
- HTML Size 45 KB
- Em Dashes 6
Screenshot
View Live Page
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0b0d12">
<meta name="description" content="NEXUS is your home for thoughtful game reviews, esports coverage, player stories, and a community that plays together.">
<title>NEXUS — Play better. Together.</title>
<link rel="preconnect" href="https://picsum.photos">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
color-scheme: dark;
--bg: #0b0d12;
--surface: #12151d;
--surface-2: #181c26;
--line: rgba(255,255,255,.09);
--muted: #9da5b6;
--text: #f5f6f8;
--lime: #c8ff4d;
--purple: #a68cff;
--orange: #ff9866;
--display: "Barlow Condensed", Impact, sans-serif;
--body: "DM Sans", sans-serif;
--max: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--text);
background:
radial-gradient(ellipse at 75% 0%, rgba(80,64,125,.14), transparent 36rem),
var(--bg);
font-family: var(--body);
line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.wrap { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.eyebrow {
display: inline-flex; align-items: center; gap: 9px;
color: var(--lime); font-size: .72rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; }
.section { padding: 78px 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.section-head h2 { margin:8px 0 0; font:700 clamp(2rem,4vw,3.2rem)/.95 var(--display); letter-spacing:.015em; text-transform:uppercase; }
.section-head p { max-width: 440px; margin:0; color:var(--muted); font-size:.94rem; }
.text-link { color:var(--lime); font-size:.86rem; font-weight:700; white-space:nowrap; }
.text-link:hover { color:#fff; }
.btn {
display:inline-flex; align-items:center; justify-content:center; gap:10px;
min-height:46px; padding:0 19px; border:1px solid transparent; border-radius:4px;
background:var(--lime); color:#11150a; font-size:.82rem; font-weight:700;
transition:transform .2s, background .2s, border-color .2s;
}
.btn:hover { transform:translateY(-2px); background:#dcff8d; }
.btn-outline { color:var(--text); background:transparent; border-color:rgba(255,255,255,.24); }
.btn-outline:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); }
.tag { display:inline-block; padding:5px 9px; border:1px solid rgba(255,255,255,.16); border-radius:3px; color:#dce0e8; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.topline { border-bottom:1px solid var(--line); color:#aeb5c2; font-size:.72rem; }
.topline .wrap { display:flex; justify-content:space-between; padding:8px 0; }
.live { color:var(--lime); font-weight:700; }
header { position:relative; z-index:5; border-bottom:1px solid var(--line); background:rgba(11,13,18,.92); }
.header-main { display:flex; align-items:center; justify-content:space-between; min-height:82px; gap:32px; }
.brand { display:flex; align-items:center; gap:12px; min-width:max-content; }
.brand-mark { width:42px; height:42px; }
.brand-name { display:block; font:800 1.75rem/.8 var(--display); letter-spacing:.04em; }
.brand-tagline { display:block; margin-top:7px; color:#a5adba; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; }
nav { display:flex; align-items:center; gap:26px; }
nav a { color:#c8ccd5; font-size:.8rem; font-weight:600; transition:color .2s; }
nav a:hover, nav a:focus-visible { color:var(--lime); }
.header-actions { display:flex; align-items:center; gap:12px; }
.search-button { width:39px; height:39px; border:1px solid var(--line); border-radius:50%; color:#fff; background:transparent; cursor:pointer; }
.search-button:hover { border-color:var(--lime); color:var(--lime); }
.menu-toggle { display:none; border:1px solid var(--line); border-radius:4px; padding:8px 10px; color:#fff; background:transparent; }
.hero { padding:32px 0 52px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(270px,.78fr); gap:18px; }
.hero-feature {
position:relative; min-height:480px; overflow:hidden; display:flex; align-items:end;
border:1px solid var(--line); border-radius:7px; background:#252a37;
}
.hero-feature > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; }
.hero-feature::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,9,14,.93) 0%,rgba(7,9,14,.55) 54%,rgba(7,9,14,.12) 100%),linear-gradient(0deg,rgba(7,9,14,.88),transparent 70%); }
.hero-copy { position:relative; z-index:1; max-width:650px; padding:42px; }
.hero-copy h1 { margin:15px 0 15px; font:800 clamp(3.4rem,7vw,6.5rem)/.82 var(--display); letter-spacing:.005em; text-transform:uppercase; }
.hero-copy h1 span { color:var(--lime); }
.hero-copy p { max-width:490px; margin:0 0 24px; color:#d0d3dc; font-size:1rem; }
.hero-meta { display:flex; align-items:center; gap:12px; margin-bottom:12px; color:#c2c8d4; font-size:.74rem; }
.hero-actions { display:flex; gap:11px; flex-wrap:wrap; }
.hero-side { display:flex; flex-direction:column; gap:18px; }
.side-story { position:relative; flex:1; min-height:220px; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--surface); }
.side-story img { width:100%; height:100%; min-height:220px; position:absolute; inset:0; object-fit:cover; opacity:.45; transition:transform .4s; }
.side-story:hover img { transform:scale(1.04); }
.side-story::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(9,11,16,.96),rgba(9,11,16,.02) 90%); }
.side-story-copy { position:absolute; z-index:1; inset:auto 20px 19px; }
.side-story h3 { margin:9px 0 0; font:700 1.55rem/1 var(--display); text-transform:uppercase; }
.side-story .eyebrow { font-size:.64rem; }
.ticker { border-block:1px solid var(--line); background:#10131a; }
.ticker-inner { display:flex; align-items:center; min-height:48px; gap:22px; overflow:hidden; white-space:nowrap; }
.ticker-label { color:var(--lime); font-size:.68rem; font-weight:800; letter-spacing:.14em; }
.ticker-item { color:#c5cad4; font-size:.77rem; }
.ticker-item b { margin-right:7px; color:#fff; }
.ticker-dot { color:#555d6d; }
.reviews { background:linear-gradient(180deg,transparent,rgba(255,255,255,.018),transparent); }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review-card { overflow:hidden; border:1px solid var(--line); border-radius:6px; background:var(--surface); transition:transform .2s,border-color .2s; }
.review-card:hover { transform:translateY(-4px); border-color:rgba(200,255,77,.42); }
.review-image { height:190px; position:relative; overflow:hidden; }
.review-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.75); }
.score { position:absolute; top:14px; right:14px; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--lime); color:#11150a; font:800 1.25rem var(--display); }
.review-body { padding:19px; }
.review-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.review-body h3 { margin:13px 0 8px; font:700 1.7rem/1 var(--display); text-transform:uppercase; }
.review-body p { min-height:72px; margin:0 0 15px; color:var(--muted); font-size:.86rem; }
.byline { color:#7f8899; font-size:.72rem; }
.library-layout { display:grid; grid-template-columns:1fr 330px; gap:28px; align-items:start; }
.game-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.game-card { position:relative; min-height:225px; overflow:hidden; border:1px solid var(--line); border-radius:5px; background:var(--surface-2); }
.game-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; transition:transform .35s,opacity .35s; }
.game-card:hover img { transform:scale(1.06); opacity:.72; }
.game-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,10,15,.95),rgba(8,10,15,.03) 85%); }
.game-copy { position:absolute; z-index:1; inset:auto 15px 15px; }
.game-copy h3 { margin:7px 0 2px; font:700 1.4rem/1 var(--display); text-transform:uppercase; }
.game-copy span { color:#b5bdc9; font-size:.72rem; }
.library-note { padding:24px; border:1px solid rgba(200,255,77,.24); border-radius:6px; background:linear-gradient(145deg,rgba(200,255,77,.08),rgba(166,140,255,.06)); }
.library-note .icon { display:grid; place-items:center; width:43px; height:43px; margin-bottom:17px; border-radius:5px; background:var(--lime); color:#10140b; font-size:1.3rem; }
.library-note h3 { margin:0 0 9px; font:700 1.75rem/1 var(--display); text-transform:uppercase; }
.library-note p { margin:0 0 19px; color:var(--muted); font-size:.86rem; }
.library-note .text-link { display:inline-block; }
.tournament { padding:56px 0; background:#11141c; border-block:1px solid var(--line); }
.tourney-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:45px; align-items:center; }
.tourney-art { position:relative; min-height:350px; overflow:hidden; border:1px solid var(--line); border-radius:6px; }
.tourney-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7; }
.tourney-art::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,10,15,.84),transparent 70%); }
.tourney-badge { position:absolute; z-index:1; top:18px; left:18px; padding:8px 11px; background:var(--orange); color:#1a100d; font-size:.68rem; font-weight:800; letter-spacing:.1em; }
.tourney-art-caption { position:absolute; z-index:1; bottom:20px; left:22px; }
.tourney-art-caption strong { display:block; font:700 2rem/.95 var(--display); text-transform:uppercase; }
.tourney-copy h2 { margin:9px 0 15px; font:800 clamp(2.7rem,5vw,4.5rem)/.86 var(--display); text-transform:uppercase; }
.tourney-copy h2 span { color:var(--purple); }
.tourney-copy p { color:var(--muted); font-size:.91rem; }
.tourney-details { display:flex; gap:20px; margin:20px 0 24px; padding:15px 0; border-block:1px solid var(--line); }
.tourney-details div { flex:1; }
.tourney-details small { display:block; color:#8992a3; font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; }
.tourney-details strong { font-size:.83rem; }
.gear-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:20px; }
.gear-feature { position:relative; min-height:340px; overflow:hidden; border:1px solid var(--line); border-radius:6px; }
.gear-feature img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6; }
.gear-feature::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,11,16,.92),rgba(9,11,16,.12)); }
.gear-copy { position:absolute; z-index:1; left:27px; bottom:27px; max-width:410px; }
.gear-copy h3 { margin:11px 0 9px; font:700 2.1rem/.95 var(--display); text-transform:uppercase; }
.gear-copy p { margin:0 0 14px; color:#c1c7d2; font-size:.85rem; }
.gear-list { display:grid; gap:12px; }
.gear-item { display:flex; gap:16px; padding:17px; border:1px solid var(--line); border-radius:5px; background:var(--surface); }
.gear-item .gear-number { color:var(--lime); font:700 1.6rem/.9 var(--display); }
.gear-item h4 { margin:0 0 4px; font-size:.9rem; }
.gear-item p { margin:0; color:var(--muted); font-size:.77rem; }
.community { background:linear-gradient(180deg,rgba(166,140,255,.045),transparent); }
.community-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.profiles { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.profile { display:flex; align-items:center; gap:12px; padding:15px; border:1px solid var(--line); border-radius:5px; background:var(--surface); }
.profile img { width:46px; height:46px; border-radius:50%; object-fit:cover; }
.profile strong { display:block; font-size:.83rem; }
.profile span { color:var(--muted); font-size:.7rem; }
.profile .rank { margin-left:auto; color:var(--lime); font-size:.67rem; font-weight:700; }
.quest-card { padding:24px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.quest-heading { display:flex; justify-content:space-between; gap:15px; align-items:start; }
.quest-heading h3 { margin:0; font:700 1.8rem/1 var(--display); text-transform:uppercase; }
.quest-heading p { margin:7px 0 0; color:var(--muted); font-size:.79rem; }
.progress-label { display:flex; justify-content:space-between; margin:20px 0 8px; color:#c4cad4; font-size:.72rem; }
.progress-track { height:7px; overflow:hidden; border-radius:10px; background:#292e3a; }
.progress-fill { width:0%; height:100%; border-radius:inherit; background:var(--lime); transition:width .3s; }
.quest-list { display:grid; gap:10px; margin:17px 0 18px; }
.quest-row { display:flex; align-items:center; gap:11px; color:#d6dae1; font-size:.8rem; cursor:pointer; }
.quest-row input { width:17px; height:17px; accent-color:var(--lime); cursor:pointer; }
.quest-row:has(input:checked) span { color:#798292; text-decoration:line-through; }
.quest-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); font-size:.72rem; }
.quest-reset { border:0; padding:4px 0; color:var(--lime); background:transparent; font-size:.72rem; cursor:pointer; }
.voices { padding-top:45px; }
.quote-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.quote-card { padding:20px; border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.025); }
.stars { color:var(--lime); letter-spacing:.12em; }
.quote-card blockquote { margin:11px 0 17px; color:#d1d5dd; font-size:.84rem; }
.quote-author { display:flex; align-items:center; gap:10px; }
.quote-author img { width:35px; height:35px; border-radius:50%; object-fit:cover; }
.quote-author strong { display:block; font-size:.75rem; }
.quote-author span { color:var(--muted); font-size:.68rem; }
.faq { border-top:1px solid var(--line); }
.faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:55px; }
.faq-intro h2 { margin:9px 0 12px; font:700 3rem/.9 var(--display); text-transform:uppercase; }
.faq-intro p { color:var(--muted); font-size:.88rem; }
details { border-bottom:1px solid var(--line); }
summary { position:relative; padding:18px 35px 18px 0; list-style:none; cursor:pointer; font-size:.91rem; font-weight:600; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:4px; color:var(--lime); font-size:1.3rem; top:12px; }
details[open] summary::after { content:"−"; }
details p { max-width:650px; margin:0 0 18px; color:var(--muted); font-size:.84rem; }
.newsletter { padding:42px 0; background:var(--lime); color:#11150a; }
.newsletter-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.newsletter h2 { margin:0; font:800 clamp(2rem,4vw,3.2rem)/.9 var(--display); text-transform:uppercase; }
.newsletter p { margin:8px 0 0; color:#36421d; font-size:.84rem; }
.signup { display:flex; width:min(430px,100%); gap:8px; }
.signup input { flex:1; min-width:0; padding:12px 14px; border:1px solid rgba(17,21,10,.3); border-radius:4px; color:#11150a; background:rgba(255,255,255,.48); outline:none; }
.signup input::placeholder { color:#48552b; }
.signup button { padding:0 18px; border:0; border-radius:4px; color:#fff; background:#11150a; font-weight:700; cursor:pointer; }
footer { padding:42px 0 22px; background:#080a0e; }
.footer-main { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:35px; padding-bottom:35px; }
.footer-about p { max-width:300px; color:var(--muted); font-size:.8rem; }
.footer-col h3 { margin:0 0 13px; color:#fff; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; }
.footer-col a { display:block; width:max-content; margin:7px 0; color:#9ea6b5; font-size:.77rem; }
.footer-col a:hover { color:var(--lime); }
.socials { display:flex; gap:8px; margin-top:16px; }
.socials a { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; color:#d2d6de; font-size:.65rem; font-weight:700; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:18px; border-top:1px solid var(--line); color:#777f8d; font-size:.7rem; }
.footer-legal { display:flex; gap:18px; }
.footer-legal a:hover { color:#fff; }
.search-panel { display:none; position:absolute; z-index:10; top:100%; left:0; right:0; padding:16px 0; border-bottom:1px solid var(--line); background:#12151d; }
.search-panel.open { display:block; }
.search-panel .wrap { display:flex; align-items:center; gap:12px; }
.search-panel input { flex:1; padding:12px 14px; border:1px solid var(--line); border-radius:4px; color:#fff; background:#090b10; outline:none; }
.search-panel input:focus { border-color:var(--lime); }
.search-hint { color:var(--muted); font-size:.73rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width: 900px) {
nav { gap:14px; }
.header-actions .btn { display:none; }
.hero-grid { grid-template-columns:1fr; }
.hero-side { display:grid; grid-template-columns:1fr 1fr; }
.side-story { min-height:200px; }
.library-layout { grid-template-columns:1fr; }
.library-note { display:flex; align-items:center; gap:18px; }
.library-note .icon { flex:none; margin:0; }
.library-note p { margin-bottom:10px; }
.tourney-grid { gap:28px; }
.community-grid { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
.wrap { width:min(100% - 32px,var(--max)); }
.topline .wrap { justify-content:center; }
.topline .wrap span:last-child { display:none; }
.header-main { min-height:70px; gap:12px; }
.brand-mark { width:36px; height:36px; }
.brand-name { font-size:1.5rem; }
.brand-tagline { font-size:.55rem; }
.menu-toggle { display:block; }
nav { display:none; position:absolute; top:100%; left:0; right:0; padding:12px 16px 18px; border-bottom:1px solid var(--line); background:#0e1118; }
nav.open { display:grid; grid-template-columns:1fr 1fr; gap:0; }
nav a { padding:12px 4px; border-bottom:1px solid var(--line); }
.search-button { width:36px; height:36px; }
.hero { padding-top:20px; }
.hero-feature { min-height:510px; }
.hero-copy { padding:26px; }
.hero-copy h1 { font-size:clamp(3.2rem,16vw,5.1rem); }
.hero-copy p { font-size:.9rem; }
.hero-side { grid-template-columns:1fr; }
.side-story { min-height:195px; }
.section { padding:58px 0; }
.section-head { align-items:start; flex-direction:column; gap:12px; }
.section-head p { font-size:.87rem; }
.review-grid { grid-template-columns:1fr; }
.review-body p { min-height:0; }
.review-image { height:210px; }
.game-grid { grid-template-columns:repeat(2,1fr); }
.game-card { min-height:190px; }
.library-note { align-items:flex-start; flex-wrap:wrap; padding:18px; }
.library-note > div:last-child { flex-basis:100%; }
.tournament { padding:42px 0; }
.tourney-grid { grid-template-columns:1fr; }
.tourney-art { min-height:260px; }
.gear-grid { grid-template-columns:1fr; }
.gear-feature { min-height:300px; }
.profiles { grid-template-columns:1fr; }
.quote-grid { grid-template-columns:1fr; }
.faq-grid { grid-template-columns:1fr; gap:18px; }
.faq-intro h2 { font-size:2.6rem; }
.newsletter-inner { align-items:flex-start; flex-direction:column; }
.signup { width:100%; }
.footer-main { grid-template-columns:1fr 1fr; gap:26px 18px; }
.footer-about { grid-column:1/-1; }
.footer-bottom { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior:auto !important; transition:none !important; }
}
</style>
</head>
<body>
<div class="topline">
<div class="wrap">
<span><span class="live">● LIVE</span> NEXUS OPEN — Day 2 broadcast starts at 18:00 UTC</span>
<span>Independent gaming, player-first perspective.</span>
</div>
</div>
<header>
<div class="wrap header-main">
<a class="brand" href="#home" aria-label="NEXUS home">
<svg class="brand-mark" viewBox="0 0 48 48" role="img" aria-label="NEXUS logo">
<path d="M7 8h10l14 19V8h10v32H31L17 21v19H7z" fill="#c8ff4d"/>
<path d="M7 8h10l14 19V8h10" fill="none" stroke="#fff" stroke-width="2" opacity=".35"/>
</svg>
<span><span class="brand-name">NEXUS</span><span class="brand-tagline">Play better. Together.</span></span>
</a>
<nav id="primary-nav" aria-label="Primary navigation">
<a href="#reviews">Reviews</a>
<a href="#library">Game Library</a>
<a href="#tournaments">Tournaments</a>
<a href="#gear">Hardware</a>
<a href="#community">Community</a>
<a href="#news">News</a>
</nav>
<div class="header-actions">
<button class="search-button" id="search-toggle" aria-label="Open search" aria-expanded="false">⌕</button>
<a class="btn" href="#community">Join the community <span aria-hidden="true">↗</span></a>
<button class="menu-toggle" id="menu-toggle" aria-label="Open navigation" aria-expanded="false">☰</button>
</div>
</div>
<div class="search-panel" id="search-panel">
<div class="wrap">
<label class="sr-only" for="site-search">Search NEXUS</label>
<input id="site-search" type="search" placeholder="Search games, guides, reviews…">
<span class="search-hint">Try “co-op” or “hardware”</span>
</div>
</div>
</header>
<main id="home">
<section class="hero wrap" aria-labelledby="hero-title">
<div class="hero-grid">
<article class="hero-feature">
<img src="https://picsum.photos/1200/760?random=41" alt="Atmospheric neon-lit scene from a futuristic action game">
<div class="hero-copy">
<div class="hero-meta"><span class="tag">Cover story</span><span>8 min read</span><span>•</span><span>June 12, 2025</span></div>
<span class="eyebrow">The games shaping what's next</span>
<h1 id="hero-title">Play the<br><span>next level.</span></h1>
<p>From midnight co-op marathons to the next esports dynasty, we find the stories, strategies, and people making games matter.</p>
<div class="hero-actions">
<a class="btn" href="#news">Explore the latest <span aria-hidden="true">→</span></a>
<a class="btn btn-outline" href="#tournaments">Watch live</a>
</div>
</div>
</article>
<div class="hero-side">
<a class="side-story" href="#tournaments">
<img src="https://picsum.photos/640/420?random=42" alt="Competitive gaming arena illuminated by stage lights">
<div class="side-story-copy"><span class="eyebrow">Esports / Live</span><h3>The bracket is set.<br>The pressure is on.</h3></div>
</a>
<a class="side-story" href="#reviews">
<img src="https://picsum.photos/640/420?random=43" alt="Close-up of a game controller beside a glowing monitor">
<div class="side-story-copy"><span class="eyebrow">Review / 9.2</span><h3>When a sequel<br>finds its own rhythm</h3></div>
</a>
</div>
</div>
</section>
<div class="ticker" id="news" aria-label="Gaming headlines">
<div class="wrap ticker-inner">
<span class="ticker-label">THE FEED</span>
<span class="ticker-item"><b>Patch watch:</b> Season 04 balance notes are live</span><span class="ticker-dot">✦</span>
<span class="ticker-item"><b>Indie spotlight:</b> Five worlds worth getting lost in</span><span class="ticker-dot">✦</span>
<span class="ticker-item"><b>Community:</b> The co-op queue is open</span>
</div>
</div>
<section class="section reviews" id="reviews">
<div class="wrap">
<div class="section-head">
<div><span class="eyebrow">Played, tested, and discussed</span><h2>Reviews that get to the point</h2></div>
<p>We go beyond the launch trailer. Expect honest verdicts on performance, progression, accessibility, and whether the endgame earns your time.</p>
</div>
<div class="review-grid">
<article class="review-card">
<div class="review-image"><img src="https://picsum.photos/700/420?random=51" alt="Vast otherworldly landscape beneath a dramatic sky"><span class="score">9.2</span></div>
<div class="review-body">
<div class="review-meta"><span class="tag">Action RPG</span><span class="byline">By Mara Chen</span></div>
<h3>Echoes of Aether</h3>
<p>A confident, generous adventure where build crafting and a beautifully strange world keep pulling you deeper. A few late-game quests overstay their welcome, but the journey is exceptional.</p>
<a class="text-link" href="#library">Read the full review →</a>
</div>
</article>
<article class="review-card">
<div class="review-image"><img src="https://picsum.photos/700/420?random=52" alt="Colorful abstract world with bold lights and deep shadows"><span class="score">8.6</span></div>
<div class="review-body">
<div class="review-meta"><span class="tag">Tactical shooter</span><span class="byline">By J. Alvarez</span></div>
<h3>Breakpoint: Zero</h3>
<p>Smart map design and a crisp gunfeel make every round count. Its ambitious ranked refresh needs a little matchmaking polish, but the competitive foundation is rock solid.</p>
<a class="text-link" href="#tournaments">Read the full review →</a>
</div>
</article>
<article class="review-card">
<div class="review-image"><img src="https://picsum.photos/700/420?random=53" alt="Serene, dreamlike scenery from an independent adventure game"><span class="score">8.9</span></div>
<div class="review-body">
<div class="review-meta"><span class="tag">Indie / Co-op</span><span class="byline">By Eli Morgan</span></div>
<h3>Small Hours</h3>
<p>A quietly inventive co-op puzzle game that turns communication into its best mechanic. Bring a patient friend; the best moments happen when neither of you has the answer.</p>
<a class="text-link" href="#community">Read the full review →</a>
</div>
</article>
</div>
</div>
</section>
<section class="section" id="library">
<div class="wrap">
<div class="section-head">
<div><span class="eyebrow">Your next favorite starts here</span><h2>Find your kind of game</h2></div>
<p>Browse by the way you like to play. Our library pairs practical recommendations with community notes, so you can pick your next session with confidence.</p>
</div>
<div class="library-layout">
<div class="game-grid">
<a class="game-card" href="#reviews"><img src="https://picsum.photos/420/500?random=61" alt="Dramatic fantasy world"><div class="game-copy"><span class="tag">Co-op RPG</span><h3>Starfall Protocol</h3><span>Cross-platform · 1–4 players</span></div></a>
<a class="game-card" href="#reviews"><img src="https://picsum.photos/420/500?random=62" alt="Futuristic city at night"><div class="game-copy"><span class="tag">Competitive</span><h3>Neon Circuit</h3><span>Team shooter · Free to play</span></div></a>
<a class="game-card" href="#reviews"><img src="https://picsum.photos/420/500?random=63" alt="Adventure landscape at golden hour"><div class="game-copy"><span class="tag">Open world</span><h3>Wild Meridian</h3><span>Adventure · New DLC guide</span></div></a>
<a class="game-card" href="#reviews"><img src="https://picsum.photos/420/500?random=64" alt="Moody science-fiction scene"><div class="game-copy"><span class="tag">Survival</span><h3>Deep Signal</h3><span>Horror · Squad up</span></div></a>
<a class="game-card" href="#reviews"><img src="https://picsum.photos/420/500?random=65" alt="Bright, colorful game environment"><div class="game-copy"><span class="tag">Indie pick</span><h3>Bloom & Beyond</h3><span>Cozy sim · New player friendly</span></div></a>
<a class="game-card" href="#reviews"><img src="https://picsum.photos/420/500?random=66" alt="Action-packed game environment"><div class="game-copy"><span class="tag">Fighting</span><h3>Rival Theory</h3><span>1v1 · Beginner's tier list</span></div></a>
</div>
<aside class="library-note">
<div class="icon" aria-hidden="true">✦</div>
<div>
<h3>Play your way</h3>
<p>Filter out the noise. We flag cross-platform support, co-op size, accessibility options, live-service commitments, and whether a game respects your time.</p>
<a class="text-link" href="#community">Explore the complete library →</a>
</div>
</aside>
</div>
</div>
</section>
<section class="tournament" id="tournaments">
<div class="wrap tourney-grid">
<div class="tourney-art">
<img src="https://picsum.photos/900/600?random=71" alt="Packed esports venue watching a high-stakes final">
<span class="tourney-badge">LIVE THIS WEEKEND</span>
<div class="tourney-art-caption"><strong>NEXUS OPEN<br>Championship Series</strong></div>
</div>
<div class="tourney-copy">
<span class="eyebrow">Esports, with the doors open</span>
<h2>Big plays.<br><span>Good people.</span></h2>
<p>The NEXUS Open brings rising squads and established pros together for a weekend of high-level play. Follow the live bracket, catch desk-side analysis, and meet the teams building their own momentum.</p>
<p>New to the scene? Our match guides break down roles, map picks, and the meta without assuming you already know the whole playbook.</p>
<div class="tourney-details">
<div><small>Next broadcast</small><strong>Sat · 18:00 UTC</strong></div>
<div><small>Prize pool</small><strong>$25,000</strong></div>
<div><small>Format</small><strong>5v5 · Double elim</strong></div>
</div>
<div class="hero-actions"><a class="btn" href="#newsletter">Watch tournament <span aria-hidden="true">▶</span></a><a class="btn btn-outline" href="#community">View the bracket</a></div>
</div>
</div>
</section>
<section class="section" id="gear">
<div class="wrap">
<div class="section-head">
<div><span class="eyebrow">Built for your setup</span><h2>Hardware without the hype</h2></div>
<p>We test the gear that makes a real difference. Our recommendations weigh comfort, reliability, latency, and value—not just the spec sheet.</p>
</div>
<div class="gear-grid">
<article class="gear-feature">
<img src="https://picsum.photos/1000/600?random=81" alt="Modern gaming desk with monitor and peripherals">
<div class="gear-copy">
<span class="tag">Setup guide · Updated June 2025</span>
<h3>Build a better battlestation, one upgrade at a time</h3>
<p>From a desk-friendly headset to a monitor that makes high refresh rates worthwhile, start with the upgrades you’ll actually notice.</p>
<a class="text-link" href="#community">See the complete setup guide →</a>
</div>
</article>
<div class="gear-list">
<article class="gear-item"><span class="gear-number">01</span><div><h4>Headsets worth wearing</h4><p>Comfort, mic clarity, and positional audio tested across long sessions.</p></div></article>
<article class="gear-item"><span class="gear-number">02</span><div><h4>Controllers for every grip</h4><p>Hall-effect sticks, back buttons, and reliable wireless performance compared.</p></div></article>
<article class="gear-item"><span class="gear-number">03</span><div><h4>Monitors that earn their place</h4><p>Panel type, response time, and refresh rate explained in plain language.</p></div></article>
<article class="gear-item"><span class="gear-number">04</span><div><h4>Small upgrades, big comfort</h4><p>Mousepads, lighting, and ergonomic essentials that make the daily setup better.</p></div></article>
</div>
</div>
</div>
</section>
<section class="section community" id="community">
<div class="wrap">
<div class="section-head">
<div><span class="eyebrow">More than a leaderboard</span><h2>Find your people. Find your party.</h2></div>
<p>Good games are better shared. Meet players, find a squad for your next raid, and celebrate progress at every skill level.</p>
</div>
<div class="community-grid">
<div>
<div class="profiles" aria-label="Featured community players">
<article class="profile"><img src="https://i.pravatar.cc/100?u=nexus-sage" alt=""><div><strong>SageOnSupport</strong><span>Overwatch · Shot-caller</span></div><span class="rank">DIAMOND</span></article>
<article class="profile"><img src="https://i.pravatar.cc/100?u=nexus-lio" alt=""><div><strong>lio.exe</strong><span>Indies · Co-op explorer</span></div><span class="rank">CREATOR</span></article>
<article class="profile"><img src="https://i.pravatar.cc/100?u=nexus-rin" alt=""><div><strong>rinnyplays</strong><span>Fighting games · Lab rat</span></div><span class="rank">MASTER</span></article>
<article class="profile"><img src="https://i.pravatar.cc/100?u=nexus-ash" alt=""><div><strong>ashfall</strong><span>MMO · Raid lead</span></div><span class="rank">VETERAN</span></article>
</div>
<p style="color:var(--muted);font-size:.82rem;margin:16px 0 0">Squad finder is built around how you actually play: platform, time zone, preferred roles, and whether you want a chill run or a serious push. No gatekeeping—just better matchmaking between people.</p>
</div>
<div class="quest-card" aria-labelledby="quest-title">
<div class="quest-heading"><div><h3 id="quest-title">Your weekly side quests</h3><p>Small goals. Good sessions. Track your progress locally.</p></div><span class="tag">Weekly</span></div>
<div class="progress-label"><span>Quest progress</span><span id="quest-count">0 / 4 complete</span></div>
<div class="progress-track" role="progressbar" aria-label="Weekly quest progress" aria-valuemin="0" aria-valuemax="4" aria-valuenow="0"><div class="progress-fill" id="progress-fill"></div></div>
<div class="quest-list">
<label class="quest-row"><input type="checkbox" data-quest="one"><span>Try a game outside your usual genre</span></label>
<label class="quest-row"><input type="checkbox" data-quest="two"><span>Play one session with a new teammate</span></label>
<label class="quest-row"><input type="checkbox" data-quest="three"><span>Share a useful tip with your community</span></label>
<label class="quest-row"><input type="checkbox" data-quest="four"><span>Take a break, stretch, and hydrate</span></label>
</div>
<div class="quest-foot"><span id="quest-message">Your progress is saved on this device.</span><button class="quest-reset" id="quest-reset" type="button">Reset quests</button></div>
</div>
</div>
<div class="voices">
<div class="section-head">
<div><span class="eyebrow">From the players</span><h2>Better when we play together</h2></div>
</div>
<div class="quote-grid">
<article class="quote-card"><div class="stars" aria-label="5 out of 5 stars">★★★★★</div><blockquote>“The reviews actually tell me what a game feels like to play—not just how many pixels it has. NEXUS has saved me from more than one bad day-one buy.”</blockquote><div class="quote-author"><img src="https://i.pravatar.cc/100?u=nexus-tess" alt=""><div><strong>Tess W.</strong><span>Community member · PC</span></div></div></article>
<article class="quote-card"><div class="stars" aria-label="5 out of 5 stars">★★★★★</div><blockquote>“Found my raid group through the squad finder. Same time zone, same energy, and patient enough to explain the boss mechanic one more time.”</blockquote><div class="quote-author"><img src="https://i.pravatar.cc/100?u=nexus-micah" alt=""><div><strong>Micah R.</strong><span>Community member · Console</span></div></div></article>
<article class="quote-card"><div class="stars" aria-label="5 out of 5 stars">★★★★★</div><blockquote>“The tournament coverage makes esports welcoming without watering anything down. I finally understand why that last map pick mattered.”</blockquote><div class="quote-author"><img src="https://i.pravatar.cc/100?u=nexus-jules" alt=""><div><strong>Jules K.</strong><span>Community member · Mobile</span></div></div></article>
</div>
</div>
</div>
</section>
<section class="section faq">
<div class="wrap faq-grid">
<div class="faq-intro"><span class="eyebrow">Good to know</span><h2>Questions,<br>answered.</h2><p>New here? Here are a few quick answers about how NEXUS works and what you’ll find inside.</p></div>
<div>
<details><summary>Is NEXUS a gaming news site or a community?</summary><p>Both. We publish independent reviews, practical guides, and esports coverage, while giving players ways to find teammates, talk about games, and take part in community events.</p></details>
<details><summary>How do your reviews work?</summary><p>Our writers play the game before sharing a verdict. We assess the core loop, technical performance, progression, accessibility, monetization, and long-term value. Scores are editorial judgments—not sponsored placements.</p></details>
<details><summary>Can I join a tournament if I'm new to competitive play?</summary><p>Absolutely. Community events include beginner-friendly brackets and clear rules. Check each event listing for platform, region, eligibility, and team requirements before signing up.</p></details>
<details><summary>Do you cover cross-platform and accessibility features?</summary><p>Yes. We call out cross-play and cross-progression where relevant, and include accessibility options in reviews and library listings so you can make an informed choice before downloading.</p></details>
</div>
</div>
</section>
<section class="newsletter" id="newsletter">
<div class="wrap newsletter-inner">
<div><h2>Good games. Great inbox.</h2><p>Get the week’s best reviews, guides, and esports moments. No spam, no spoilers.</p></div>
<form class="signup" id="signup-form">
<label class="sr-only" for="email">Your email address</label>
<input id="email" type="email" placeholder="you@example.com" required>
<button type="submit">Sign me up ↗</button>
</form>
</div>
</section>
</main>
<footer>
<div class="wrap">
<div class="footer-main">
<div class="footer-about">
<a class="brand" href="#home">
<svg class="brand-mark" viewBox="0 0 48 48" aria-hidden="true"><path d="M7 8h10l14 19V8h10v32H31L17 21v19H7z" fill="#c8ff4d"/></svg>
<span><span class="brand-name">NEXUS</span><span class="brand-tagline">Play better. Together.</span></span>
</a>
<p>Independent gaming coverage, community-first events, and a better place to find your next favorite game.</p>
<div class="socials" aria-label="Social media links"><a href="https://www.instagram.com/" aria-label="Instagram">IG</a><a href="https://www.youtube.com/" aria-label="YouTube">YT</a><a href="https://www.twitch.tv/" aria-label="Twitch">TW</a><a href="https://discord.com/" aria-label="Discord">DC</a></div>
</div>
<div class="footer-col"><h3>Explore</h3><a href="#reviews">Game reviews</a><a href="#library">Game library</a><a href="#tournaments">Esports & events</a><a href="#gear">Hardware guides</a></div>
<div class="footer-col"><h3>Community</h3><a href="#community">Find your squad</a><a href="#community">Player profiles</a><a href="#tournaments">Tournament hub</a><a href="#newsletter">The weekly feed</a></div>
<div class="footer-col"><h3>Get in touch</h3><a href="mailto:hello@nexusplay.gg">hello@nexusplay.gg</a><a href="mailto:press@nexusplay.gg">Press & partnerships</a><a href="tel:+14155550183">+1 (415) 555-0183</a><a href="#home">Portland, OR · Worldwide play</a></div>
</div>
<div class="footer-bottom"><span>© <span id="year"></span> NEXUS Play Media. All rights reserved.</span><span class="footer-legal"><a href="#privacy">Privacy</a><a href="#terms">Terms</a><a href="#accessibility">Accessibility</a></span></div>
</div>
</footer>
<script>
const menuToggle = document.getElementById('menu-toggle');
const nav = document.getElementById('primary-nav');
menuToggle.addEventListener('click', () => {
const open = nav.classList.toggle('open');
menuToggle.setAttribute('aria-expanded', String(open));
menuToggle.setAttribute('aria-label', open ? 'Close navigation' : 'Open navigation');
});
nav.querySelectorAll('a').forEach(link => link.addEventListener('click', () => {
nav.classList.remove('open');
menuToggle.setAttribute('aria-expanded', 'false');
}));
const searchToggle = document.getElementById('search-toggle');
const searchPanel = document.getElementById('search-panel');
const searchInput = document.getElementById('site-search');
searchToggle.addEventListener('click', () => {
const open = searchPanel.classList.toggle('open');
searchToggle.setAttribute('aria-expanded', String(open));
if (open) searchInput.focus();
});
searchInput.addEventListener('keydown', event => {
if (event.key === 'Escape') {
searchPanel.classList.remove('open');
searchToggle.setAttribute('aria-expanded', 'false');
searchToggle.focus();
}
if (event.key === 'Enter' && searchInput.value.trim()) {
const query = searchInput.value.toLowerCase();
const target = query.includes('hardware') || query.includes('gear') ? '#gear'
: query.includes('tournament') || query.includes('esport') ? '#tournaments'
: query.includes('community') || query.includes('co-op') ? '#community'
: query.includes('library') || query.includes('game') ? '#library' : '#reviews';
location.hash = target;
searchPanel.classList.remove('open');
searchToggle.setAttribute('aria-expanded', 'false');
}
});
const questInputs = [...document.querySelectorAll('[data-quest]')];
const progressFill = document.getElementById('progress-fill');
const questCount = document.getElementById('quest-count');
const progressBar = document.querySelector('[role="progressbar"]');
const questMessage = document.getElementById('quest-message');
const storageKey = 'nexus-weekly-quests';
function updateQuests(save = true) {
const complete = questInputs.filter(input => input.checked).length;
questCount.textContent = `${complete} / ${questInputs.length} complete`;
progressFill.style.width = `${complete / questInputs.length * 100}%`;
progressBar.setAttribute('aria-valuenow', String(complete));
questMessage.textContent = complete === questInputs.length ? 'All quests complete. Nice work!' : 'Your progress is saved on this device.';
if (save) localStorage.setItem(storageKey, JSON.stringify(questInputs.map(input => input.checked)));
}
try {
const saved = JSON.parse(localStorage.getItem(storageKey) || '[]');
questInputs.forEach((input, index) => input.checked = Boolean(saved[index]));
} catch (error) {}
updateQuests(false);
questInputs.forEach(input => input.addEventListener('change', () => updateQuests()));
document.getElementById('quest-reset').addEventListener('click', () => {
questInputs.forEach(input => input.checked = false);
updateQuests();
});
document.getElementById('signup-form').addEventListener('submit', event => {
event.preventDefault();
const button = event.currentTarget.querySelector('button');
button.textContent = 'You’re on the list ✓';
button.disabled = true;
event.currentTarget.querySelector('input').disabled = true;
});
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:57:29.354Z",
"url": "https://benchmark.aimac.invalid/0ad2dc75b23c2e461fd165c6663ed892faed35859e036ae4e155d99e1d81dad0.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "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": []
},
{
"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": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "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": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"NEXUS home\">",
"target": [
"a[aria-label=\"NEXUS home\"]"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"NEXUS home\">",
"target": [
"a[aria-label=\"NEXUS home\"]"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<svg class=\"brand-mark\" viewBox=\"0 0 48 48\" role=\"img\" aria-label=\"NEXUS logo\">\n <path d=\"M7 8h10l14 19V8h10v32H31L17 21v19H7z\" fill=\"#c8ff4d\"></path>\n <path d=\"M7 8h10l14 19V8h10\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" opacity=\".35\"></path>\n </svg>",
"target": [
"svg[role=\"img\"]"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<span aria-hidden=\"true\">\u2197</span>",
"target": [
".btn[href$=\"#community\"] > span[aria-hidden=\"true\"]"
]
}
]
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"progress-track\" role=\"progressbar\" aria-label=\"Weekly quest progress\" aria-valuemin=\"0\" aria-valuemax=\"4\" aria-valuenow=\"0\"><div class=\"progress-fill\" id=\"progress-fill\" style=\"width: 0%;\"></div></div>",
"target": [
".progress-track"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"NEXUS home\">",
"target": [
"a[aria-label=\"NEXUS home\"]"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<svg class=\"brand-mark\" viewBox=\"0 0 48 48\" role=\"img\" aria-label=\"NEXUS logo\">\n <path d=\"M7 8h10l14 19V8h10v32H31L17 21v19H7z\" fill=\"#c8ff4d\"></path>\n <path d=\"M7 8h10l14 19V8h10\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" opacity=\".35\"></path>\n </svg>",
"target": [
"svg[role=\"img\"]"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<svg class=\"brand-mark\" viewBox=\"0 0 48 48\" role=\"img\" aria-label=\"NEXUS logo\">\n <path d=\"M7 8h10l14 19V8h10v32H31L17 21v19H7z\" fill=\"#c8ff4d\"></path>\n <path d=\"M7 8h10l14 19V8h10\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" opacity=\".35\"></path>\n </svg>",
"target": [
"svg[role=\"img\"]"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"NEXUS home\">",
"target": [
"a[aria-label=\"NEXUS home\"]"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"NEXUS home\">",
"target": [
"a[aria-label=\"NEXUS 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": "<p style=\"color:var(--muted);font-size:.82rem;margin:16px 0 0\">Squad finder is built around how you actually play: platform, time zone, preferred roles, and whether you want a chill run or a serious push. No gatekeeping\u2014just better matchmaking between people.</p>",
"target": [
".community-grid > div:nth-child(1) > p"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"search-button\" id=\"search-toggle\" aria-label=\"Open search\" aria-expanded=\"false\">\u2315</button>",
"target": [
"#search-toggle"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 id=\"hero-title\">Play the<br><span>next level.</span></h1>",
"target": [
"#hero-title"
]
},
{
"html": "<h3>The bracket is set.<br>The pressure is on.</h3>",
"target": [
".side-story[href$=\"#tournaments\"] > .side-story-copy > h3"
]
},
{
"html": "<h3>When a sequel<br>finds its own rhythm</h3>",
"target": [
".side-story[href$=\"#reviews\"] > .side-story-copy > h3"
]
},
{
"html": "<h2>Reviews that get to the point</h2>",
"target": [
"#reviews > .wrap > .section-head > div > h2"
]
},
{
"html": "<h3>Echoes of Aether</h3>",
"target": [
".review-card:nth-child(1) > .review-body > h3"
]
},
{
"html": "<h3>Breakpoint: Zero</h3>",
"target": [
".review-card:nth-child(2) > .review-body > h3"
]
},
{
"html": "<h3>Small Hours</h3>",
"target": [
".review-card:nth-child(3) > .review-body > h3"
]
},
{
"html": "<h2>Find your kind of game</h2>",
"target": [
"#library > .wrap > .section-head > div > h2"
]
},
{
"html": "<h3>Starfall Protocol</h3>",
"target": [
".game-card[href$=\"#reviews\"]:nth-child(1) > .game-copy > h3"
]
},
{
"html": "<h3>Neon Circuit</h3>",
"target": [
".game-card[href$=\"#reviews\"]:nth-child(2) > .game-copy > h3"
]
},
{
"html": "<h3>Wild Meridian</h3>",
"target": [
".game-card[href$=\"#reviews\"]:nth-child(3) > .game-copy > h3"
]
},
{
"html": "<h3>Deep Signal</h3>",
"target": [
".game-card[href$=\"#reviews\"]:nth-child(4) > .game-copy > h3"
]
},
{
"html": "<h3>Bloom & Beyond</h3>",
"target": [
".game-card[href$=\"#reviews\"]:nth-child(5) > .game-copy > h3"
]
},
{
"html": "<h3>Rival Theory</h3>",
"target": [
".game-card[href$=\"#reviews\"]:nth-child(6) > .game-copy > h3"
]
},
{
"html": "<h3>Play your way</h3>",
"target": [
"aside > div:nth-child(2) > h3"
]
},
{
"html": "<h2>Big plays.<br><span>Good people.</span></h2>",
"target": [
".tourney-copy > h2"
]
},
{
"html": "<h2>Hardware without the hype</h2>",
"target": [
"#gear > .wrap > .section-head > div > h2"
]
},
{
"html": "<h3>Build a better battlestation, one upgrade at a time</h3>",
"target": [
".gear-copy > h3"
]
},
{
"html": "<h4>Headsets worth wearing</h4>",
"target": [
".gear-item:nth-child(1) > div > h4"
]
},
{
"html": "<h4>Controllers for every grip</h4>",
"target": [
".gear-item:nth-child(2) > div > h4"
]
},
{
"html": "<h4>Monitors that earn their place</h4>",
"target": [
".gear-item:nth-child(3) > div > h4"
]
},
{
"html": "<h4>Small upgrades, big comfort</h4>",
"target": [
".gear-item:nth-child(4) > div > h4"
]
},
{
"html": "<h2>Find your people. Find your party.</h2>",
"target": [
"#community > .wrap > .section-head > div > h2"
]
},
{
"html": "<h3 id=\"quest-title\">Your weekly side quests</h3>",
"target": [
"#quest-title"
]
},
{
"html": "<h2>Better when we play together</h2>",
"target": [
".voices > .section-head > div > h2"
]
},
{
"html": "<h2>Questions,<br>answered.</h2>",
"target": [
".faq-intro > h2"
]
},
{
"html": "<h2>Good games. Great inbox.</h2>",
"target": [
".newsletter-inner > div > h2"
]
},
{
"html": "<h3>Explore</h3>",
"target": [
".footer-col:nth-child(2) > h3"
]
},
{
"html": "<h3>Community</h3>",
"target": [
".footer-col:nth-child(3) > h3"
]
},
{
"html": "<h3>Get in touch</h3>",
"target": [
".footer-col:nth-child(4) > h3"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"home\">",
"target": [
"#home"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#11150a",
"bgColor": "#c8ff4d",
"contrastRatio": 15.73,
"fontSize": "9.8pt (13.12px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 15.73"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"btn\" href=\"#community\">Join the community <span aria-hidden=\"true\">\u2197</span></a>",
"target": [
".header-actions > .btn[href$=\"#community\"]"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "site-search",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<input id=\"site-search\" type=\"search\" placeholder=\"Search games, guides, reviews\u2026\">",
"target": [
"#site-search"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [
{
"html": "<label class=\"quest-row\"><input type=\"checkbox\" data-quest=\"one\"><span>Try a game outside your usual genre</span></label>",
"target": [
".quest-row:nth-child(1)"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"checkbox\" data-quest=\"one\">",
"target": [
"input[data-quest=\"one\"]"
]
}
]
},
{
"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/1200/760?random=41\" alt=\"Atmospheric neon-lit scene from a futuristic action game\">",
"target": [
".hero-feature > 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": "implicit-label",
"data": {
"implicitLabel": "Try a game outside your usual genre"
},
"relatedNodes": [
{
"html": "<label class=\"quest-row\"><input type=\"checkbox\" data-quest=\"one\"><span>Try a game outside your usual genre</span></label>",
"target": [
".quest-row:nth-child(1)"
]
}
],
"impact": "critical",
"message": "Element has an implicit (wrapped) <label>"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"checkbox\" data-quest=\"one\">",
"target": [
"input[data-quest=\"one\"]"
]
}
]
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"review-body\">",
"target": [
".review-card:nth-child(1) > .review-body"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"text-link\" href=\"#library\">Read the full review \u2192</a>",
"target": [
".text-link[href$=\"#library\"]"
]
}
]
},
{
"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"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"NEXUS home\">",
"target": [
"a[aria-label=\"NEXUS home\"]"
]
}
]
},
{
"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\">",
"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": "<svg class=\"brand-mark\" viewBox=\"0 0 48 48\" role=\"img\" aria-label=\"NEXUS logo\">\n <path d=\"M7 8h10l14 19V8h10v32H31L17 21v19H7z\" fill=\"#c8ff4d\"></path>\n <path d=\"M7 8h10l14 19V8h10\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" opacity=\".35\"></path>\n </svg>",
"target": [
"svg[role=\"img\"]"
]
}
]
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<summary>Is NEXUS a gaming news site or a community?</summary>",
"target": [
"details:nth-child(1) > summary"
]
}
]
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute exists and is not empty"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<svg class=\"brand-mark\" viewBox=\"0 0 48 48\" role=\"img\" aria-label=\"NEXUS logo\">\n <path d=\"M7 8h10l14 19V8h10v32H31L17 21v19H7z\" fill=\"#c8ff4d\"></path>\n <path d=\"M7 8h10l14 19V8h10\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" opacity=\".35\"></path>\n </svg>",
"target": [
"svg[role=\"img\"]"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 196,
"height": 45.3
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (196px by 45.3px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"brand\" href=\"#home\" aria-label=\"NEXUS home\">",
"target": [
"a[aria-label=\"NEXUS home\"]"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "div",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-label"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute is not well supported on a div with no valid role attribute."
}
],
"impact": "serious",
"html": "<div class=\"ticker\" id=\"news\" aria-label=\"Gaming headlines\">",
"target": [
"#news"
],
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a div with no valid role attribute."
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "8.6pt (11.52px)",
"fontWeight": "normal",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<body>",
"target": [
"body"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span><span class=\"live\">\u25cf LIVE</span> NEXUS OPEN \u2014 Day 2 broadcast starts at 18:00 UTC</span>",
"target": [
".topline > .wrap > span:nth-child(1)"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"violations": [],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 5201
},
{
"y": 576,
"height": 5201
},
{
"y": 1152,
"height": 5201
},
{
"y": 1728,
"height": 5201
},
{
"y": 2304,
"height": 5201
},
{
"y": 2880,
"height": 5201
},
{
"y": 3456,
"height": 5201
},
{
"y": 4032,
"height": 5201
},
{
"y": 4481,
"height": 5201
}
],
"scans": 10,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "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: "Community", "Game Library", "Tournaments".
- **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", "Game Reviews", "Gaming Hardware".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "cross-platform", "tier list", "DLC".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Download Now", "Watch Tournament", "Start Playing".
- **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: "achievement tracker".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "patch notes", "trending games", "gaming news".
- **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.